react-shadow - npm Package Compare versions

Comparing version 0.1.4 to 0.1.5

bower.json

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

component/ReactShadow.js

@@ -24,3 +24,9 @@ (function main($window, $document) {
 
-            var shadowRoot      = this.shadowRoot = this.getDOMNode().parentNode.createShadowRoot(),
+            // Wrap the current DOM node in a script element.
+            var scriptElement = $document.createElement('script');
+            this.getDOMNode().parentNode.appendChild(scriptElement);
+            scriptElement.appendChild(this.getDOMNode());
+
+            // Create shadow root for the visible component.
+            var shadowRoot      = this.shadowRoot = this.getDOMNode().parentNode.parentNode.createShadowRoot(),
                 templateElement = $document.createElement('template');
@@ -31,2 +37,3 @@
             this.attachCSSDocuments(templateElement);
+            console.log(templateElement);
 
@@ -33,0 +40,0 @@ // Append the template node's content to our component.

dist/react-shadow.js

@@ -24,3 +24,9 @@ (function main($window, $document) {
 
-            var shadowRoot      = this.shadowRoot = this.getDOMNode().parentNode.createShadowRoot(),
+            // Wrap the current DOM node in a script element.
+            var scriptElement = $document.createElement('script');
+            this.getDOMNode().parentNode.appendChild(scriptElement);
+            scriptElement.appendChild(this.getDOMNode());
+
+            // Create shadow root for the visible component.
+            var shadowRoot      = this.shadowRoot = this.getDOMNode().parentNode.parentNode.createShadowRoot(),
                 templateElement = $document.createElement('template');
@@ -31,2 +37,3 @@
             this.attachCSSDocuments(templateElement);
+            console.log(templateElement);
 
@@ -33,0 +40,0 @@ // Append the template node's content to our component.

dist/react-shadow.min.js

@@ -1,1 +0,1 @@
-!function(t,e){"use strict";t.ReactShadow={shadowRoot:{},componentDidMount:function(){var t=this.shadowRoot=this.getDOMNode().parentNode.createShadowRoot(),n=e.createElement("template");n.content.appendChild(this.getDOMNode().cloneNode(!0)),this.attachCSSDocuments(n);var o=e.importNode(n.content,!0);t.appendChild(o),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+'"]'),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))},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))},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=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),console.log(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);

package.json

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

@@ -49,2 +49,14 @@ # ReactShadow
 
-As Shadow DOM has the concept of [Event Retargeting](http://www.w3.org/TR/shadow-dom/#event-retargeting) for encapsulation purposes, event delegation will not function correctly because all events will appear to be coming from the Shadow DOM – therefore `ReactShadow` uses the React ID for each element to dispatch the event from the original element, therefore maintaining React's event delegation implementation.
+As Shadow DOM has the concept of [Event Retargeting](http://www.w3.org/TR/shadow-dom/#event-retargeting) for encapsulation purposes, event delegation will not function correctly because all events will appear to be coming from the Shadow DOM – therefore `ReactShadow` uses the React ID for each element to dispatch the event from the original element, therefore maintaining React's event delegation implementation.
+
+Events are therefore written in exactly the same way:
+
+```javascript
+var ReadmeApp = $react.createClass({
+    render: function render() {
+        return <a onClick={this.reset} title="Reset Counter">
+                   Reset, Comrade!
+               </a>
+    }
+});
+```

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

Improved metrics

Total package byte prevSize

22552

increased by5.24%

Lines of code

389

increased by3.18%

Number of lines in readme file

61

increased by24.49%

No dependency changes