├── .eslintrc
├── .gitignore
├── LICENSE
├── README.md
├── dist
    └── bundle.js
├── package.json
├── src
    └── index.js
└── webpack.config.js


/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 |   "plugins": [
3 |     "react",
4 |     "react-native"
5 |   ]
6 | }
7 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2016 Bradley Spaulding
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # preact-shadow-dom
 2 | 
 3 | Render your preact component to shadow DOM:
 4 | 
 5 | ```javascript
 6 | import ShadowDOM from "preact-shadow-dom";
 7 | 
 8 | var MyComponent = () => (
 9 | 	<div className="my-component-class">
10 | 		<h1>My Component</h1>
11 | 	</div>
12 | );
13 | 
14 | var ShadowMyComponent = ShadowDOM(MyComponent);
15 | ```
16 | 
17 | 
18 | With CSS, injected into the shadow DOM root:
19 | 
20 | ```javascript
21 | import ShadowDOM from "preact-shadow-dom";
22 | import styles from "styles.css";
23 | 
24 | var MyComponent = () => (
25 | 	<div className="my-component-class">
26 | 		<h1>My Component</h1>
27 | 	</div>
28 | );
29 | 
30 | // styles is raw css that will be injected into the shadow dom
31 | var ShadowMyComponent = ShadowDOM(MyComponent, styles);
32 | ```
33 | 
34 | ## Related
35 | 
36 | [preact-custom-element](https://github.com/bspaulding/preact-custom-element)
37 | 


--------------------------------------------------------------------------------
/dist/bundle.js:
--------------------------------------------------------------------------------
1 | !function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t(require("preact"));else if("function"==typeof define&&define.amd)define(["preact"],t);else{var o=t("object"==typeof exports?require("preact"):e.preact);for(var r in o)("object"==typeof exports?exports:e)[r]=o[r]}}(this,function(e){return function(e){function t(r){if(o[r])return o[r].exports;var n=o[r]={exports:{},id:r,loaded:!1};return e[r].call(n.exports,n,n.exports,t),n.loaded=!0,n.exports}var o={};return t.m=e,t.c=o,t.p="",t(0)}([function(e,t,o){"use strict";function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function n(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function i(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}function a(e,t){var o=function(o){function a(){return r(this,a),n(this,Object.getPrototypeOf(a).apply(this,arguments))}return i(a,o),u(a,[{key:"setup",value:function(o){return o?(this.shadow=o.createShadowRoot(),this._component=(0,s.render)((0,s.h)(e,this.props),this.shadow),void(this.shadow.innerHTML+="<style>"+t+"</style>")):void console.warn("ShadowDOM failed to create shadow dom for "+(e.displayName||"component")+", because node was falsy.")}},{key:"render",value:function(){return(0,s.h)("div",{ref:this.setup.bind(this)})}}]),a}(s.Component);return o.displayName="ShadowDOM("+e.displayName+")",o}Object.defineProperty(t,"__esModule",{value:!0});var u=function(){function e(e,t){for(var o=0;o<t.length;o++){var r=t[o];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,o,r){return o&&e(t.prototype,o),r&&e(t,r),t}}();t["default"]=a;var s=o(1)},function(t,o){t.exports=e}])});


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "preact-shadow-dom",
 3 |   "version": "1.0.1",
 4 |   "description": "HOC that renders component into shadow-dom",
 5 |   "main": "dist/bundle.js",
 6 |   "scripts": {
 7 |     "test": "npm test"
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "git+https://github.com/bspaulding/preact-shadow-dom.git"
12 |   },
13 |   "keywords": [
14 |     "preact",
15 |     "shadow",
16 |     "dom"
17 |   ],
18 |   "author": "Bradley J. Spaulding",
19 |   "license": "MIT",
20 |   "bugs": {
21 |     "url": "https://github.com/bspaulding/preact-shadow-dom/issues"
22 |   },
23 |   "homepage": "https://github.com/bspaulding/preact-shadow-dom#readme",
24 |   "devDependencies": {
25 |     "babel": "6.5.2",
26 |     "babel-core": "6.10.4",
27 |     "babel-loader": "6.2.4",
28 |     "babel-plugin-transform-react-jsx": "6.8.0",
29 |     "babel-preset-es2015": "6.9.0",
30 |     "babel-preset-react": "6.11.1",
31 |     "webpack": "1.13.1"
32 |   }
33 | }
34 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import { Component, h, render, unmountComponentAtNode } from "preact";
 2 | 
 3 | export default function ShadowDOM(ComponentClass, CSSString) {
 4 | 	class ShadowDOMComponentClass extends Component {
 5 | 		setup(node) {
 6 | 			if (!node) {
 7 | 				console.warn(`ShadowDOM failed to create shadow dom for ${ComponentClass.displayName || "component"}, because node was falsy.`);
 8 | 				return;
 9 | 			}
10 | 
11 | 			this.shadow = node.createShadowRoot();
12 | 			this._component = render(<ComponentClass {...this.props}/>, this.shadow);
13 | 			this.shadow.innerHTML += `<style>${CSSString}</style>`;
14 | 		}
15 | 
16 | 		render() {
17 | 			return <div ref={this.setup.bind(this)}/>;
18 | 		}
19 | 	}
20 | 	ShadowDOMComponentClass.displayName = `ShadowDOM(${ComponentClass.displayName})`;
21 | 
22 | 	return ShadowDOMComponentClass;
23 | }
24 | 
25 | 
26 | 


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 | 	entry: "./src/index.js",
 3 | 	output: {
 4 | 		path: "dist",
 5 | 		filename: "bundle.js",
 6 | 		libraryTarget: "umd"
 7 | 	},
 8 | 	module: {
 9 | 		loaders: [{
10 | 			test: /\.js$/,
11 | 			exclude: /(node_modules|bower_components)/,
12 | 			loader: "babel",
13 | 			query: {
14 | 				presets: ["es2015", "react"],
15 | 				plugins: [
16 | 					["transform-react-jsx", { "pragma":"h" }]
17 | 				]
18 | 			},
19 | 		}]
20 | 	},
21 | 	externals: {
22 | 		preact: "preact"
23 | 	}
24 | };
25 | 


--------------------------------------------------------------------------------