react-shadow - npm Package Compare versions

Comparing version 0.1.3 to 0.1.4

bower.json

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

component/ReactShadow.js

@@ -117,17 +117,2 @@ (function main($window, $document) {
 
-        },
-
-        /**
-         * @method cleanElements
-         * @return {void}
-         */
-        cleanElements: function cleanElements() {
-
-            var children = this.getDOMNode().children,
-                count    = children.length;
-
-            while (count--) {
-                children[count].remove();
-            }
-
         }
@@ -134,0 +119,0 @@

dist/react-shadow.js

@@ -117,17 +117,2 @@ (function main($window, $document) {
 
-        },
-
-        /**
-         * @method cleanElements
-         * @return {void}
-         */
-        cleanElements: function cleanElements() {
-
-            var children = this.getDOMNode().children,
-                count    = children.length;
-
-            while (count--) {
-                children[count].remove();
-            }
-
         }
@@ -134,0 +119,0 @@

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},cleanElements:function(){for(var t=this.getDOMNode().children,e=t.length;e--;)t[e].remove()}}}(window,window.document);
+!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);

package.json

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

 # ReactShadow
-Use Shadow DOM with React.js and CSS imports; write your component styles in CSS!
+
+![Travis](http://img.shields.io/travis/Wildhoney/ReactShadow.svg?style=flat)
+ 
+![Experimental](http://img.shields.io/badge/experimental-%E2%9C%93-blue.svg?style=flat)
+ 
+![License MIT](http://img.shields.io/badge/license-mit-orange.svg?style=flat)
+
+* **Heroku**: [http://react-shadow.herokuapp.com/](http://react-shadow.herokuapp.com/)
+
+![Screenshot](http://i.imgur.com/vxA6fPl.png)
+
+---
+
+With `ReactShadow` you can apply a [Shadow DOM](http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/) root inside of your component. Under normal React.js conditions, your styles are written inline for style encapsulation – with `ReactShadow` your styles can now be moved into their rightful place – within CSS documents!
+
+# Getting Started
+
+`ReactShadow` is implemented as a mixin that you can import into your component:
+
+```javascript
+var ReadmeApp = $react.createClass({
+    mixins: [ReactShadow]
+});
+```
+
+From there `ReactShadow` will take over – creating a shadow root inside of your component, and importing any CSS documents defined in your `cssDocuments` property – which can be either an `array` or a `function`:
+
+```javascript
+var ReadmeApp = $react.createClass({
+    mixins: [ReactShadow],
+    cssDocuments: ['../css/Default.css']
+});
+```
+
+If you're applying CSS documents at runtime then it may well be useful to have the `cssDocuments` property as a `function`:
+
+```javascript
+var ReadmeApp = $react.createClass({
+    mixins: [ReactShadow],
+    cssDocuments: function cssDocuments() {
+        return ['../css/Component.css', '../css/' + this.props.cssDocument];
+    }
+});
+```
+
+# Event Retargeting
+
+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.

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

21430

increased by6.06%

Number of lines in readme file

49

increased by1533.33%

Worsened metrics

Lines of code

377

decreased by-5.51%

No dependency changes