react-web-component - npm Package Compare versions

Comparing version 1.0.3-alpha to 1.0.4-alpha

package.json

 {
   "name": "react-web-component",
-  "version": "1.0.3-alpha",
+  "version": "1.0.4-alpha",
   "description": "Create Web Components with React",
@@ -5,0 +5,0 @@ "main": "src/index.js",

src/index.js

@@ -7,8 +7,32 @@ const ReactDOM = require('react-dom');
   /**
-   * todo fix jsdoc type of app and options
+   * todo fix jsdoc type of app
    * @param {*} app
    * @param {string} tagName
-   * @param {Object} [options]
    */
-  create: function(app, tagName, options) {
+  create: function(app, tagName) {
+
+    let appInstance;
+
+    const lifeCycleHooks = {
+      attachedCallback: 'webComponentAttached',
+      connectedCallback: 'webComponentConnected',
+      disconnectedCallback: 'webComponentDisconnected',
+      attributeChangedCallback: 'webComponentAttributeChanged',
+      adoptedCallback: 'webComponentAdopted'
+    };
+
+    function callConstructorHook(proto) {
+        if (appInstance['webComponentConstructed']) {
+            appInstance['webComponentConstructed'].apply(appInstance, [proto])
+        }
+    }
+
+    function callLifeCycleHook(hook, params) {
+        const instanceParams = params || [];
+        const instanceMethod = lifeCycleHooks[hook];
+        if (instanceMethod && appInstance[instanceMethod]) {
+            appInstance[instanceMethod].apply(appInstance, instanceParams)
+        }
+    }
+
     const proto = Object.create(HTMLElement.prototype, {
@@ -20,10 +44,34 @@ attachedCallback: {
           const styles = getStyleElementsFromReactWebComponentStyleLoader();
-          for (var i in styles) {
+          for (let i = 0; i < styles.length; i++) {
             shadowRoot.appendChild(styles[i])
           }
           shadowRoot.appendChild(mountPoint);
-          ReactDOM.render(app, mountPoint);
+          ReactDOM.render(app, mountPoint, function () {
+              appInstance = this;
+              callConstructorHook(proto);
+              callLifeCycleHook('attachedCallback');
+          });
           retargetEvents(shadowRoot);
         },
       },
+      connectedCallback: {
+        value: function() {
+          callLifeCycleHook('connectedCallback');
+        },
+      },
+      disconnectedCallback: {
+        value: function() {
+          callLifeCycleHook('disconnectedCallback');
+        },
+      },
+      attributeChangedCallback: {
+        value: function(attributeName, oldValue, newValue, namespace) {
+          callLifeCycleHook('attributeChangedCallback', [attributeName, oldValue, newValue, namespace]);
+        },
+      },
+      adoptedCallback: {
+        value: function(oldDocument, newDocument) {
+          callLifeCycleHook('adoptedCallback', [oldDocument, newDocument]);
+        },
+      },
     });
@@ -30,0 +78,0 @@ document.registerElement(tagName, { prototype: proto });

No alert changes

Improved metrics

Total package byte prevSize

37740

4.44%

Lines of code

79

119.44%

No dependency changes