Use web components polyfills (#17)

* add polyfills (credits to Artmann)
* change version for compability
* add babel plugins for custom elements
* fix retargetEvents
* fix overwriting props and constructorHook

Author: tdt17

.babelrc

@@ -2,13 +2,14 @@
   "presets": [
     ["env", {
       "targets": {
-        "browsers": ["last 2 versions", "safari >= 7"]
+        "browsers": [
+          "last 2 version"
+        ]
       }
     }]
   ],
-  "env": {
-    "production": {
-      "presets": ["minify"]
-    }
-  }
+  "plugins": [
+    "transform-custom-element-classes",
+    "transform-es2015-classes"
+  ]
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-web-component",
-  "version": "1.3.0",
+  "version": "2.0.0",
   "description": "Create Web Components with React",
   "main": "src/index.js",
   "types": "index.d.ts",
@@ -11,7 +11,9 @@
     "build": "babel src/dev -d src --presets minify"
   },
   "dependencies": {
-    "react-shadow-dom-retarget-events": "^1.0.8"
+    "react-shadow-dom-retarget-events": "^1.0.8",
+    "@webcomponents/custom-elements": "^1.2.1",
+    "@webcomponents/shadydom": "^1.4.3"
   },
   "peerDependencies": {
     "react-dom": "^16.2.0"
@@ -20,7 +22,9 @@
     "@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"
+    "babel-preset-env": "^1.7.0",
+    "babel-preset-minify": "^0.3.0",
+    "babel-plugin-transform-custom-element-classes": "^0.1.0",
+    "babel-plugin-transform-es2015-classes": "^6.24.1"
   }
 }

src/dev/index.js

@@ -3,6 +3,9 @@ const retargetEvents = require('react-shadow-dom-retarget-events');
 const getStyleElementsFromReactWebComponentStyleLoader = require('./getStyleElementsFromReactWebComponentStyleLoader');
 const extractAttributes = require('./extractAttributes');
 
+require('@webcomponents/shadydom');
+require('@webcomponents/custom-elements');
+
 module.exports = {
   /**
    * @param {JSX.Element} app
@@ -35,62 +38,48 @@ module.exports = {
       }
     }
 
-    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();
+    const proto = class extends HTMLElement {
+      connectedCallback() {
+        const webComponentInstance = this;
+        let mountPoint = webComponentInstance;
 
-            // Re-assign the mountPoint to the newly created "div" element
-            mountPoint = document.createElement('div');
+        if (useShadowDom) {
+          // Re-assign the webComponentInstance (this) to the newly created shadowRoot
+          const shadowRoot = webComponentInstance.attachShadow({ mode: 'open' });
+          // 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));
-            });
+          // 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) => {
+            shadowRoot.appendChild(style.cloneNode(shadowRoot));
+          });
 
-            webComponentInstance.appendChild(mountPoint);
+          shadowRoot.appendChild(mountPoint);
 
-            retargetEvents(webComponentInstance);
-          }
+          retargetEvents(shadowRoot);
+        }
 
-          ReactDOM.render(app, mountPoint, function () {
-            appInstance = this;
-            appInstance.props = extractAttributes(webComponentInstance);
+        ReactDOM.render(app, mountPoint, function () {
+          appInstance = this;
+          appInstance.props = Object.assign(extractAttributes(webComponentInstance), appInstance.props);
 
-            callConstructorHook(webComponentInstance);
-            callLifeCycleHook('attachedCallback');
-          });
-        },
-      },
-      connectedCallback: {
-        value: () => {
+          callConstructorHook(webComponentInstance);
           callLifeCycleHook('connectedCallback');
-        },
-      },
-      disconnectedCallback: {
-        value: () => {
+        });
+      }
+      disconnectedCallback () {
           callLifeCycleHook('disconnectedCallback');
-        },
-      },
-      attributeChangedCallback: {
-        value: (attributeName, oldValue, newValue, namespace) => {
-          callLifeCycleHook('attributeChangedCallback', [attributeName, oldValue, newValue, namespace]);
-        },
-      },
-      adoptedCallback: {
-        value: (oldDocument, newDocument) => {
-          callLifeCycleHook('adoptedCallback', [oldDocument, newDocument]);
-        },
-      },
-    });
+      }
+      attributeChangedCallback (attributeName, oldValue, newValue, namespace) {
+        callLifeCycleHook('attributeChangedCallback', [attributeName, oldValue, newValue, namespace]);
+      }
+      adoptedCallback (oldDocument, newDocument) {
+        callLifeCycleHook('adoptedCallback', [oldDocument, newDocument]);
+      }
+    }
 
-    document.registerElement(tagName, { prototype: proto });
+    customElements.define(tagName, proto);
   },
 };