react-shadow - npm Package Compare versions

Comparing version 0.1.6 to 0.1.7

bower.json

 {
   "name": "react-shadow",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "homepage": "https://github.com/Wildhoney/ReactShadow",
@@ -5,0 +5,0 @@ "authors": [

component/ReactShadow.js

@@ -13,6 +13,7 @@ (function main($window, $document) {
         /**
-         * @property shadowRoot
+         * @property _shadowRoot
          * @type {Object}
+         * @private
          */
-        shadowRoot: {},
+        _shadowRoot: {},
 
@@ -25,14 +26,17 @@ /**
 
+            // Prevent the constant invocation of `getDOMNode()`.
+            var componentElement = this.getDOMNode();
+
             // Wrap the current DOM node in a script element.
             var scriptElement = $document.createElement('script');
-            this.getDOMNode().parentNode.appendChild(scriptElement);
-            scriptElement.appendChild(this.getDOMNode());
+            componentElement.parentNode.appendChild(scriptElement);
+            scriptElement.appendChild(componentElement);
 
             // Create shadow root for the visible component.
-            var shadowRoot      = this.shadowRoot = this.getDOMNode().parentNode.parentNode.createShadowRoot(),
+            var shadowRoot      = this._shadowRoot = componentElement.parentNode.parentNode.createShadowRoot(),
                 templateElement = $document.createElement('template');
 
-            // Obtain the HTML from the component's `render` method.
-            templateElement.content.appendChild(this.getDOMNode().cloneNode(true));
-            this.attachCSSDocuments(templateElement);
+            // Obtain the HTML from the component's rendered elements.
+            templateElement.content.appendChild(componentElement.cloneNode(true));
+            this._attachCSSDocuments(templateElement);
 
@@ -42,3 +46,3 @@ // Append the template node's content to our component.
             shadowRoot.appendChild(clone);
-            this.interceptEvents();
+            this._interceptEvents();
 
@@ -48,7 +52,26 @@ },
         /**
-         * @method interceptEvents
+         * @method componentDidUpdate
          * @return {void}
          */
-        interceptEvents: function interceptEvents() {
+        componentDidUpdate: function componentDidUpdate() {
 
+            var containerElement = this._shadowRoot.querySelector(':not(style)');
+            containerElement.innerHTML = '';
+
+            var domNode    = this.getDOMNode(),
+                children   = domNode.children,
+                childCount = children.length;
+
+            for (var index = 0; index < childCount; index++) {
+                containerElement.appendChild(domNode.children[index].cloneNode(true));
+            }
+
+        },
+
+        /**
+         * @method _interceptEvents
+         * @return {void}
+         */
+        _interceptEvents: function _interceptEvents() {
+
             /**
@@ -78,3 +101,3 @@ * @method redirectEvent
             eventsList.forEach(function forEach(eventName) {
-                this.shadowRoot.addEventListener(eventName, redirectEvent);
+                this._shadowRoot.addEventListener(eventName, redirectEvent);
             }.bind(this));
@@ -85,26 +108,8 @@
         /**
-         * @method componentDidUpdate
-         * @return {void}
-         */
-        componentDidUpdate: function componentDidUpdate() {
-
-            var containerElement = this.shadowRoot.querySelector(':not(style)');
-            containerElement.innerHTML = '';
-
-            var domNode    = this.getDOMNode(),
-                children   = domNode.children,
-                childCount = children.length;
-
-            for (var index = 0; index < childCount; index++) {
-                containerElement.appendChild(domNode.children[index].cloneNode(true));
-            }
-
-        },
-
-        /**
-         * @method attachCSSDocuments
+         * @method _attachCSSDocuments
          * @param element {HTMLElement}
          * @return {HTMLElement}
+         * @private
          */
-        attachCSSDocuments: function attachCSSDocuments(element) {
+        _attachCSSDocuments: function _attachCSSDocuments(element) {
 
@@ -111,0 +116,0 @@ if (this.cssDocuments) {

dist/react-shadow.js

@@ -13,6 +13,7 @@ (function main($window, $document) {
         /**
-         * @property shadowRoot
+         * @property _shadowRoot
          * @type {Object}
+         * @private
          */
-        shadowRoot: {},
+        _shadowRoot: {},
 
@@ -25,14 +26,17 @@ /**
 
+            // Prevent the constant invocation of `getDOMNode()`.
+            var componentElement = this.getDOMNode();
+
             // Wrap the current DOM node in a script element.
             var scriptElement = $document.createElement('script');
-            this.getDOMNode().parentNode.appendChild(scriptElement);
-            scriptElement.appendChild(this.getDOMNode());
+            componentElement.parentNode.appendChild(scriptElement);
+            scriptElement.appendChild(componentElement);
 
             // Create shadow root for the visible component.
-            var shadowRoot      = this.shadowRoot = this.getDOMNode().parentNode.parentNode.createShadowRoot(),
+            var shadowRoot      = this._shadowRoot = componentElement.parentNode.parentNode.createShadowRoot(),
                 templateElement = $document.createElement('template');
 
-            // Obtain the HTML from the component's `render` method.
-            templateElement.content.appendChild(this.getDOMNode().cloneNode(true));
-            this.attachCSSDocuments(templateElement);
+            // Obtain the HTML from the component's rendered elements.
+            templateElement.content.appendChild(componentElement.cloneNode(true));
+            this._attachCSSDocuments(templateElement);
 
@@ -42,3 +46,3 @@ // Append the template node's content to our component.
             shadowRoot.appendChild(clone);
-            this.interceptEvents();
+            this._interceptEvents();
 
@@ -48,7 +52,26 @@ },
         /**
-         * @method interceptEvents
+         * @method componentDidUpdate
          * @return {void}
          */
-        interceptEvents: function interceptEvents() {
+        componentDidUpdate: function componentDidUpdate() {
 
+            var containerElement = this._shadowRoot.querySelector(':not(style)');
+            containerElement.innerHTML = '';
+
+            var domNode    = this.getDOMNode(),
+                children   = domNode.children,
+                childCount = children.length;
+
+            for (var index = 0; index < childCount; index++) {
+                containerElement.appendChild(domNode.children[index].cloneNode(true));
+            }
+
+        },
+
+        /**
+         * @method _interceptEvents
+         * @return {void}
+         */
+        _interceptEvents: function _interceptEvents() {
+
             /**
@@ -78,3 +101,3 @@ * @method redirectEvent
             eventsList.forEach(function forEach(eventName) {
-                this.shadowRoot.addEventListener(eventName, redirectEvent);
+                this._shadowRoot.addEventListener(eventName, redirectEvent);
             }.bind(this));
@@ -85,26 +108,8 @@
         /**
-         * @method componentDidUpdate
-         * @return {void}
-         */
-        componentDidUpdate: function componentDidUpdate() {
-
-            var containerElement = this.shadowRoot.querySelector(':not(style)');
-            containerElement.innerHTML = '';
-
-            var domNode    = this.getDOMNode(),
-                children   = domNode.children,
-                childCount = children.length;
-
-            for (var index = 0; index < childCount; index++) {
-                containerElement.appendChild(domNode.children[index].cloneNode(true));
-            }
-
-        },
-
-        /**
-         * @method attachCSSDocuments
+         * @method _attachCSSDocuments
          * @param element {HTMLElement}
          * @return {HTMLElement}
+         * @private
          */
-        attachCSSDocuments: function attachCSSDocuments(element) {
+        _attachCSSDocuments: function _attachCSSDocuments(element) {
 
@@ -111,0 +116,0 @@ if (this.cssDocuments) {

dist/react-shadow.min.js

@@ -1,1 +0,1 @@
-!function(t,e){"use strict";t.ReactShadow={shadowRoot:{},componentDidMount:function(){var t=e.createElement("script");this.getDOMNode().parentNode.appendChild(t),t.appendChild(this.getDOMNode());var n=this.shadowRoot=this.getDOMNode().parentNode.parentNode.createShadowRoot(),o=e.createElement("template");o.content.appendChild(this.getDOMNode().cloneNode(!0)),this.attachCSSDocuments(o);var i=e.importNode(o.content,!0);n.appendChild(i),this.interceptEvents()},interceptEvents:function(){var t=function(t){t.stopPropagation(),t.preventDefault();var n=t.target.getAttribute("data-reactid"),o=e.querySelector('*[data-reactid="'+n+'"]'),i=e.createEvent("Events");i.initEvent(t.type,!0,!1),o.dispatchEvent(i)},n=["click","dblclick","mouseup","mouseout","mouseover","mousedown","mouseenter","mouseleave","contextmenu"];n.forEach(function(e){this.shadowRoot.addEventListener(e,t)}.bind(this))},componentDidUpdate:function(){var t=this.shadowRoot.querySelector(":not(style)");t.innerHTML="";for(var e=this.getDOMNode(),n=e.children,o=n.length,i=0;o>i;i++)t.appendChild(e.children[i].cloneNode(!0))},attachCSSDocuments:function(t){if(this.cssDocuments){var n="function"==typeof this.cssDocuments,o=n?this.cssDocuments():this.cssDocuments;o.forEach(function(n){var o=e.createElement("style");o.innerHTML='@import "'+n+'"',t.content.appendChild(o)})}return t}}}(window,window.document);
+!function(t,e){"use strict";t.ReactShadow={_shadowRoot:{},componentDidMount:function(){var t=this.getDOMNode(),n=e.createElement("script");t.parentNode.appendChild(n),n.appendChild(t);var o=this._shadowRoot=t.parentNode.parentNode.createShadowRoot(),c=e.createElement("template");c.content.appendChild(t.cloneNode(!0)),this._attachCSSDocuments(c);var i=e.importNode(c.content,!0);o.appendChild(i),this._interceptEvents()},componentDidUpdate:function(){var t=this._shadowRoot.querySelector(":not(style)");t.innerHTML="";for(var e=this.getDOMNode(),n=e.children,o=n.length,c=0;o>c;c++)t.appendChild(e.children[c].cloneNode(!0))},_interceptEvents:function(){var t=function(t){t.stopPropagation(),t.preventDefault();var n=t.target.getAttribute("data-reactid"),o=e.querySelector('*[data-reactid="'+n+'"]'),c=e.createEvent("Events");c.initEvent(t.type,!0,!1),o.dispatchEvent(c)},n=["click","dblclick","mouseup","mouseout","mouseover","mousedown","mouseenter","mouseleave","contextmenu"];n.forEach(function(e){this._shadowRoot.addEventListener(e,t)}.bind(this))},_attachCSSDocuments:function(t){if(this.cssDocuments){var n="function"==typeof this.cssDocuments,o=n?this.cssDocuments():this.cssDocuments;o.forEach(function(n){var o=e.createElement("style");o.innerHTML='@import "'+n+'"',t.content.appendChild(o)})}return t}}}(window,window.document);

package.json

 {
   "name": "react-shadow",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "description": "Use Shadow DOM with React.js and CSS imports; write your component styles in CSS!",
@@ -5,0 +5,0 @@ "main": "dist/react-shadow.min.js",

README.md

@@ -11,3 +11,3 @@ # ReactShadow
 
-![Screenshot](http://i.imgur.com/vxA6fPl.png)
+![Screenshot](http://i.imgur.com/1txgnOL.png)
 
@@ -14,0 +14,0 @@ ---

No alert changes

Worsened metrics

Total package byte prevSize

22761

decreased by-95.4%

Number of package files

22

decreased by-15.38%

Lines of code

395

decreased by-0.75%

No dependency changes