react-shadow - npm Package Compare versions

Comparing version 0.1.10 to 0.1.11

bower.json

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

component/ReactShadow.js

@@ -37,10 +37,8 @@ (function main($window, $document, $react) {
 
-            var shadowRoot      = this._shadowRoot = this.getDOMNode().parentNode.createShadowRoot(),
-                templateElement = $document.createElement('template'),
-                mainElement     = $document.createElement(REACT_SHADOW_ROOT);
+            var shadowRoot  = this._shadowRoot = this.getDOMNode().parentNode.createShadowRoot(),
+                mainElement = $document.createElement(REACT_SHADOW_ROOT);
 
             // Append the template node's content to our component.
-            this._attachCSSDocuments(templateElement);
-            var clone = $document.importNode(templateElement.content, true);
-            shadowRoot.appendChild(clone);
+            this._attachCSSDocuments(shadowRoot);
+            shadowRoot.appendChild(mainElement);
 
@@ -71,3 +69,4 @@ // Render component and intercept the DOM events.
             // Memorise the React ID's root ID for intercepting events.
-            var rootReactId = this.getDOMNode().getAttribute(REACT_ID_ATTRIBUTE);
+            var rootReactId = this.getDOMNode().getAttribute(REACT_ID_ATTRIBUTE),
+                domNode     = this.getDOMNode().parentNode;
 
@@ -89,3 +88,3 @@ /**
                     var translatedId = targetId.replace(/\.[0-9]+/, rootReactId),
-                        element      = $document.querySelector('*[' + REACT_ID_ATTRIBUTE + '="' + translatedId + '"]');
+                        element      = domNode.querySelector('*[' + REACT_ID_ATTRIBUTE + '="' + translatedId + '"]');
 
@@ -129,3 +128,3 @@ // Dispatch the event on the original component's element.
                     styleElement.innerHTML = '@import "' + cssDocument + '"';
-                    element.content.appendChild(styleElement);
+                    element.appendChild(styleElement);
 
@@ -132,0 +131,0 @@ });

dist/react-shadow.js

@@ -37,10 +37,8 @@ (function main($window, $document, $react) {
 
-            var shadowRoot      = this._shadowRoot = this.getDOMNode().parentNode.createShadowRoot(),
-                templateElement = $document.createElement('template'),
-                mainElement     = $document.createElement(REACT_SHADOW_ROOT);
+            var shadowRoot  = this._shadowRoot = this.getDOMNode().parentNode.createShadowRoot(),
+                mainElement = $document.createElement(REACT_SHADOW_ROOT);
 
             // Append the template node's content to our component.
-            this._attachCSSDocuments(templateElement);
-            var clone = $document.importNode(templateElement.content, true);
-            shadowRoot.appendChild(clone);
+            this._attachCSSDocuments(shadowRoot);
+            shadowRoot.appendChild(mainElement);
 
@@ -71,3 +69,4 @@ // Render component and intercept the DOM events.
             // Memorise the React ID's root ID for intercepting events.
-            var rootReactId = this.getDOMNode().getAttribute(REACT_ID_ATTRIBUTE);
+            var rootReactId = this.getDOMNode().getAttribute(REACT_ID_ATTRIBUTE),
+                domNode     = this.getDOMNode().parentNode;
 
@@ -89,3 +88,3 @@ /**
                     var translatedId = targetId.replace(/\.[0-9]+/, rootReactId),
-                        element      = $document.querySelector('*[' + REACT_ID_ATTRIBUTE + '="' + translatedId + '"]');
+                        element      = domNode.querySelector('*[' + REACT_ID_ATTRIBUTE + '="' + translatedId + '"]');
 
@@ -129,3 +128,3 @@ // Dispatch the event on the original component's element.
                     styleElement.innerHTML = '@import "' + cssDocument + '"';
-                    element.content.appendChild(styleElement);
+                    element.appendChild(styleElement);
 
@@ -132,0 +131,0 @@ });

dist/react-shadow.min.js

@@ -1,1 +0,1 @@
-!function(t,e,n){"use strict";var o="data-reactid",i="main";t.ReactShadow={_shadowRoot:{},componentDidMount:function(){var t=this._shadowRoot=this.getDOMNode().parentNode.createShadowRoot(),o=e.createElement("template"),c=e.createElement(i);this._attachCSSDocuments(o);var s=e.importNode(o.content,!0);t.appendChild(s),t.appendChild(c),n.render(this.render(),c),this._interceptEvents()},componentDidUpdate:function(){var t=this._shadowRoot.querySelector(i);n.render(this.render(),t)},_interceptEvents:function(){var t=this.getDOMNode().getAttribute(o),n=function(n){n.stopPropagation();var i=n.target.getAttribute(o);if(i){var c=i.replace(/\.[0-9]+/,t),s=e.querySelector("*["+o+'="'+c+'"]'),r=e.createEvent("Events");r.initEvent(n.type,!0,!1),s.dispatchEvent(r)}}.bind(this),i=["click","dblclick","mouseup","mouseout","mouseover","mousedown","mouseenter","mouseleave","contextmenu","keyup"];i.forEach(function(t){this._shadowRoot.addEventListener(t,n)}.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,window.React);
+!function(t,e,n){"use strict";var o="data-reactid",i="main";t.ReactShadow={_shadowRoot:{},componentDidMount:function(){var t=this._shadowRoot=this.getDOMNode().parentNode.createShadowRoot(),o=e.createElement(i);this._attachCSSDocuments(t),t.appendChild(o),t.appendChild(o),n.render(this.render(),o),this._interceptEvents()},componentDidUpdate:function(){var t=this._shadowRoot.querySelector(i);n.render(this.render(),t)},_interceptEvents:function(){var t=this.getDOMNode().getAttribute(o),n=this.getDOMNode().parentNode,i=function(i){i.stopPropagation();var s=i.target.getAttribute(o);if(s){var c=s.replace(/\.[0-9]+/,t),r=n.querySelector("*["+o+'="'+c+'"]'),a=e.createEvent("Events");a.initEvent(i.type,!0,!1),r.dispatchEvent(a)}}.bind(this),s=["click","dblclick","mouseup","mouseout","mouseover","mousedown","mouseenter","mouseleave","contextmenu","keyup"];s.forEach(function(t){this._shadowRoot.addEventListener(t,i)}.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.appendChild(o)})}return t}}}(window,window.document,window.React);

package.json

 {
   "name": "react-shadow",
-  "version": "0.1.10",
+  "version": "0.1.11",
   "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",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

22901

decreased by-1.08%

Lines of code

413

decreased by-0.48%

No dependency changes