react-shadow - npm Package Compare versions

Comparing version 0.1.9 to 0.1.10

bower.json

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

component/ReactShadow.js

 (function main($window, $document, $react) {
 
+    "use strict";
+
     /**
+     * @constant REACT_ID_ATTRIBUTE
+     * @type {String}
+     */
+    var REACT_ID_ATTRIBUTE = 'data-reactid';
+
+    /**
+     * @constant REACT_SHADOW_ROOT
+     * @type {String}
+     */
+    var REACT_SHADOW_ROOT = 'main';
+
+    /**
      * @module ReactShadow
@@ -25,3 +39,3 @@ * @author Adam Timberlake
                 templateElement = $document.createElement('template'),
-                mainElement     = $document.createElement('main');
+                mainElement     = $document.createElement(REACT_SHADOW_ROOT);
 
@@ -33,5 +47,5 @@ // Append the template node's content to our component.
 
+            // Render component and intercept the DOM events.
             shadowRoot.appendChild(mainElement);
             $react.render(this.render(), mainElement);
-
             this._interceptEvents();
@@ -46,3 +60,3 @@
         componentDidUpdate: function componentDidUpdate() {
-            var containerElement = this._shadowRoot.querySelector('main');
+            var containerElement = this._shadowRoot.querySelector(REACT_SHADOW_ROOT);
             $react.render(this.render(), containerElement);
@@ -54,2 +68,3 @@ },
          * @return {void}
+         * @private
          */
@@ -59,3 +74,3 @@ _interceptEvents: function _interceptEvents() {
             // Memorise the React ID's root ID for intercepting events.
-            var rootReactId = this.getDOMNode().getAttribute('data-reactid');
+            var rootReactId = this.getDOMNode().getAttribute(REACT_ID_ATTRIBUTE);
 
@@ -71,3 +86,3 @@ /**
 
-                var targetId = event.target.getAttribute('data-reactid');
+                var targetId = event.target.getAttribute(REACT_ID_ATTRIBUTE);
 
@@ -78,3 +93,3 @@ if (targetId) {
                     var translatedId = targetId.replace(/\.[0-9]+/, rootReactId),
-                        element      = $document.querySelector('*[data-reactid="' + translatedId + '"]');
+                        element      = $document.querySelector('*[' + REACT_ID_ATTRIBUTE + '="' + translatedId + '"]');
 
@@ -92,3 +107,3 @@ // Dispatch the event on the original component's element.
             var eventsList = ['click', 'dblclick', 'mouseup', 'mouseout', 'mouseover', 'mousedown', 'mouseenter',
-                              'mouseleave', 'contextmenu'];
+                              'mouseleave', 'contextmenu', 'keyup'];
 
@@ -95,0 +110,0 @@ eventsList.forEach(function forEach(eventName) {

dist/react-shadow.js

 (function main($window, $document, $react) {
 
+    "use strict";
+
     /**
+     * @constant REACT_ID_ATTRIBUTE
+     * @type {String}
+     */
+    var REACT_ID_ATTRIBUTE = 'data-reactid';
+
+    /**
+     * @constant REACT_SHADOW_ROOT
+     * @type {String}
+     */
+    var REACT_SHADOW_ROOT = 'main';
+
+    /**
      * @module ReactShadow
@@ -25,3 +39,3 @@ * @author Adam Timberlake
                 templateElement = $document.createElement('template'),
-                mainElement     = $document.createElement('main');
+                mainElement     = $document.createElement(REACT_SHADOW_ROOT);
 
@@ -33,5 +47,5 @@ // Append the template node's content to our component.
 
+            // Render component and intercept the DOM events.
             shadowRoot.appendChild(mainElement);
             $react.render(this.render(), mainElement);
-
             this._interceptEvents();
@@ -46,3 +60,3 @@
         componentDidUpdate: function componentDidUpdate() {
-            var containerElement = this._shadowRoot.querySelector('main');
+            var containerElement = this._shadowRoot.querySelector(REACT_SHADOW_ROOT);
             $react.render(this.render(), containerElement);
@@ -54,2 +68,3 @@ },
          * @return {void}
+         * @private
          */
@@ -59,3 +74,3 @@ _interceptEvents: function _interceptEvents() {
             // Memorise the React ID's root ID for intercepting events.
-            var rootReactId = this.getDOMNode().getAttribute('data-reactid');
+            var rootReactId = this.getDOMNode().getAttribute(REACT_ID_ATTRIBUTE);
 
@@ -71,3 +86,3 @@ /**
 
-                var targetId = event.target.getAttribute('data-reactid');
+                var targetId = event.target.getAttribute(REACT_ID_ATTRIBUTE);
 
@@ -78,3 +93,3 @@ if (targetId) {
                     var translatedId = targetId.replace(/\.[0-9]+/, rootReactId),
-                        element      = $document.querySelector('*[data-reactid="' + translatedId + '"]');
+                        element      = $document.querySelector('*[' + REACT_ID_ATTRIBUTE + '="' + translatedId + '"]');
 
@@ -92,3 +107,3 @@ // Dispatch the event on the original component's element.
             var eventsList = ['click', 'dblclick', 'mouseup', 'mouseout', 'mouseover', 'mousedown', 'mouseenter',
-                              'mouseleave', 'contextmenu'];
+                              'mouseleave', 'contextmenu', 'keyup'];
 
@@ -95,0 +110,0 @@ eventsList.forEach(function forEach(eventName) {

dist/react-shadow.min.js

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

example/js/App.jsx

@@ -61,6 +61,6 @@ (function main($react) {
         /**
-         * @method reset
+         * @method resetCounter
          * @return {void}
          */
-        reset: function reset() {
+        resetCounter: function resetCounter() {
             clearInterval(this.state.interval);
@@ -72,2 +72,10 @@ this.setState({ refreshed: 0 });
         /**
+         * @method updateName
+         * @return {void}
+         */
+        updateName: function updateName() {
+
+        },
+
+        /**
          * @method render
@@ -77,4 +85,6 @@ * @return {XML}
         render: function render() {
-            return <section onClick={this.reset} title="Reset Counter">
-                       <h1 className="title">{this.state.refreshed}</h1>
+            return <section onClick={this.resetCounter} title="Reset Counter">
+                       <h1 className="title">
+                           {this.state.refreshed}
+                       </h1>
                    </section>
@@ -81,0 +91,0 @@ }

package.json

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

23151

increased by4.48%

Lines of code

415

increased by8.92%

No dependency changes