Add support for opting-out from shadowRoot behavior. (LukasBombach#6)

* Add support for opting-out from shadowRoot behavior.

* Adjust the Readme.md.
* Bump the version.
* Add .editorsconfig file.
* Added type definition and dev dependencies
* Transpile from ES6 to ES5

* Add support for attributes to props and move the react-dom to peerDependency

* Remove source folder since it's not needed.

Author: mnemanja

.babelrc

@@ -0,0 +1,14 @@
+{
+  "presets": [
+    ["env", {
+      "targets": {
+        "browsers": ["last 2 versions", "safari >= 7"]
+      }
+    }]
+  ],
+  "env": {
+    "production": {
+      "presets": ["minify"]
+    }
+  }
+}

.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true

README.md

@@ -45,6 +45,16 @@ Then in your HTML simply use your web component, in this case named `my-componen
 <my-component></my-component>
 ```
 
+By default the `shadowRoot` is enabled. This allows for styles isolation and prevents component styles from 
+*bleeding out* to other parts of the application. It also prevents outer styles from affecting the web component you are creating. 
+
+In case that you want your component to inherit styles from the parent you can opt-out of the shadowRoot.
+To do that you can pass an **optional** parameter to the `create` method:
+```js
+ReactWebComponent.create(<App />, 'my-component', true);
+```
+
+
 It is also possible to create multiple web components in a single project and pass on props:
 
 ```javascript

index.d.ts

@@ -0,0 +1,5 @@
+declare namespace ReactWebComponent {
+  export const create: (app: JSX.Element, tagName: string, optOutFromShadowRoot?: boolean) => void;
+}
+
+export default ReactWebComponent;

package.json

@@ -1,13 +1,26 @@
 {
   "name": "react-web-component",
-  "version": "1.0.14",
+  "version": "1.2.0",
   "description": "Create Web Components with React",
   "main": "src/index.js",
+  "types": "index.d.ts",
   "author": "Lukas Bombach <[email protected]>",
   "license": "MIT",
   "repository": "WeltN24/react-web-component",
+  "scripts": {
+    "build": "babel src/dev -d src --presets minify"
+  },
   "dependencies": {
-    "react-dom": "^16.0.0",
     "react-shadow-dom-retarget-events": "^1.0.8"
+  },
+  "peerDependencies": {
+    "react-dom": "^16.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^16.0.38",
+    "babel-cli": "^6.26.0",
+    "babel-minify": "^0.3.0",
+    "babel-preset-env": "^1.6.1",
+    "babel-preset-minify": "^0.3.0"
   }
 }

src/dev/extractAttributes.js

@@ -0,0 +1,23 @@
+/**
+ * Takes in a node attributes map and returns an object with camelCased properties and values
+ * @param nodeMap
+ * @returns {{}}
+ */
+module.exports = function extractAttributes(nodeMap) {
+  if (!nodeMap.attributes) {
+    return {};
+  }
+
+  let obj = {};
+  let attribute;
+  const attributesAsNodeMap = [...nodeMap.attributes];
+  const attributes = attributesAsNodeMap.map((attribute) => ({ [attribute.name]: attribute.value }));
+
+  for (attribute of attributes) {
+    const key = Object.keys(attribute)[0];
+    const camelCasedKey = key.replace(/-([a-z])/g, (g) => g[1].toUpperCase());
+    obj[camelCasedKey] = attribute[key];
+  }
+
+  return obj;
+};

src/dev/getStyleElementsFromReactWebComponentStyleLoader.js

@@ -0,0 +1,11 @@
+/**
+ * An optional library which is conditionally added
+ * @returns {[]}
+ */
+module.exports = () => {
+  try {
+    return require('react-web-component-style-loader/exports').styleElements;
+  } catch (e) {
+    return [];
+  }
+};

src/dev/index.js

@@ -0,0 +1,96 @@
+const ReactDOM = require('react-dom');
+const retargetEvents = require('react-shadow-dom-retarget-events');
+const getStyleElementsFromReactWebComponentStyleLoader = require('./getStyleElementsFromReactWebComponentStyleLoader');
+const extractAttributes = require('./extractAttributes');
+
+module.exports = {
+  /**
+   * @param {JSX.Element} app
+   * @param {string} tagName - The name of the web component. Has to be minus "-" delimited.
+   * @param {boolean} useShadowDom - If the value is set to "true" the web component will use the `shadowDom`. The default value is true.
+   */
+  create: (app, tagName, useShadowDom = true) => {
+    let appInstance;
+
+    const lifeCycleHooks = {
+      attachedCallback: 'webComponentAttached',
+      connectedCallback: 'webComponentConnected',
+      disconnectedCallback: 'webComponentDisconnected',
+      attributeChangedCallback: 'webComponentAttributeChanged',
+      adoptedCallback: 'webComponentAdopted'
+    };
+
+    function callConstructorHook(webComponentInstance) {
+      if (appInstance['webComponentConstructed']) {
+        appInstance['webComponentConstructed'].apply(appInstance, [webComponentInstance])
+      }
+    }
+
+    function callLifeCycleHook(hook, params) {
+      const instanceParams = params || [];
+      const instanceMethod = lifeCycleHooks[hook];
+
+      if (instanceMethod && appInstance && appInstance[instanceMethod]) {
+        appInstance[instanceMethod].apply(appInstance, instanceParams);
+      }
+    }
+
+    const proto = Object.create(HTMLElement.prototype, {
+      attachedCallback: {
+        value: function() {
+          let webComponentInstance = this;
+          let mountPoint = webComponentInstance;
+
+          if (useShadowDom) {
+            // Re-assign the webComponentInstance (this) to the newly created shadowRoot
+            webComponentInstance = webComponentInstance.createShadowRoot();
+
+            // Re-assign the mountPoint to the newly created "div" element
+            mountPoint = document.createElement('div');
+
+            // Move all of the styles assigned to the react component inside of the shadowRoot.
+            // By default this is not used, only if the library is explicitly installed
+            const styles = getStyleElementsFromReactWebComponentStyleLoader();
+            styles.forEach((style) => {
+              webComponentInstance.appendChild(style.cloneNode(webComponentInstance));
+            });
+
+            webComponentInstance.appendChild(mountPoint);
+
+            retargetEvents(webComponentInstance);
+          }
+
+          ReactDOM.render(app, mountPoint, function () {
+            appInstance = this;
+            appInstance.props = extractAttributes(webComponentInstance);
+
+            callConstructorHook(webComponentInstance);
+            callLifeCycleHook('attachedCallback');
+          });
+        },
+      },
+      connectedCallback: {
+        value: () => {
+          callLifeCycleHook('connectedCallback');
+        },
+      },
+      disconnectedCallback: {
+        value: () => {
+          callLifeCycleHook('disconnectedCallback');
+        },
+      },
+      attributeChangedCallback: {
+        value: (attributeName, oldValue, newValue, namespace) => {
+          callLifeCycleHook('attributeChangedCallback', [attributeName, oldValue, newValue, namespace]);
+        },
+      },
+      adoptedCallback: {
+        value: (oldDocument, newDocument) => {
+          callLifeCycleHook('adoptedCallback', [oldDocument, newDocument]);
+        },
+      },
+    });
+
+    document.registerElement(tagName, { prototype: proto });
+  },
+};