react-shadow - npm Package Compare versions

Comparing version 0.2.0 to 0.2.1

bower.json

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

component/ReactShadow.js

@@ -49,2 +49,10 @@ (function main($window, $document) {
 
+            // Wrap current DOM node in `script` tag.
+            var scriptElement = $document.createElement('script');
+            this.getDOMNode().parentNode.appendChild(scriptElement);
+            scriptElement.appendChild(this.getDOMNode());
+
+            // Shadow insertion point for nesting shadow roots.
+            //shadowRoot.appendChild($document.createElement('shadow'));
+
         },
@@ -75,3 +83,3 @@
              * @param event {Object}
-             * @return {Function}
+             * @return {void}
              */
@@ -78,0 +86,0 @@ var redirectEvent = function redirectEvent(event) {

dist/react-shadow.js

@@ -49,2 +49,10 @@ (function main($window, $document) {
 
+            // Wrap current DOM node in `script` tag.
+            var scriptElement = $document.createElement('script');
+            this.getDOMNode().parentNode.appendChild(scriptElement);
+            scriptElement.appendChild(this.getDOMNode());
+
+            // Shadow insertion point for nesting shadow roots.
+            //shadowRoot.appendChild($document.createElement('shadow'));
+
         },
@@ -75,3 +83,3 @@
              * @param event {Object}
-             * @return {Function}
+             * @return {void}
              */
@@ -78,0 +86,0 @@ var redirectEvent = function redirectEvent(event) {

dist/react-shadow.min.js

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

example/js/App.jsx

@@ -71,11 +71,2 @@ (function main($react) {
         /**
-         * @method updateName
-         * @param event {Object}
-         * @return {void}
-         */
-        updateName: function updateName(event) {
-            this.setState({ value: event.target.value });
-        },
-
-        /**
          * @method render
@@ -86,4 +77,2 @@ * @return {XML}
 
-            var value = this.state.value;
-
             return <section onClick={this.resetCounter} title="Reset Counter">
@@ -90,0 +79,0 @@ <h1 className="title" onClick={this.updateName}>

package.json

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

No alert changes

Improved metrics

Total package byte prevSize

24336

increased by2.75%

Number of package files

23

increased by4.55%

Lines of code

433

increased by1.41%

No dependency changes