react-shadow - npm Package Compare versions

Comparing version 0.2.2 to 0.2.3

bower.json

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

component/ReactShadow.js

@@ -48,8 +48,13 @@ (function main($window, $document) {
 
+            // Attach CSS
+            if (this.cssDocuments) {
+                this._attachCSSDocuments(shadowRoot);
+            }
+            if (this.cssSource) {
+                this._attachCSSSource(shadowRoot);
+            }
             // Append the template node's content to our component.
-            this._attachCSSDocuments(shadowRoot);
             shadowRoot.appendChild(mainElement);
 
             // Render component and intercept the DOM events.
-            shadowRoot.appendChild(mainElement);
             React.render(this.render(), mainElement);
@@ -131,3 +136,29 @@ this._interceptEvents();
 
+
         /**
+         * @method createStyle
+         * @param  {HTMLElement} element
+         * @param  {string} styleContent Content style for given element
+         * @return {HTMLElement}              
+         */
+        _createStyle: function(element, styleContent) {
+            // Construct the HTML for the external stylesheets.
+            var styleElement = $document.createElement('style');
+            styleElement.innerHTML = styleContent;
+            element.appendChild(styleElement);
+            return element;
+        },
+
+
+        /**
+         * @method _attachCSSSource
+         * @param  {HTMLElement} element
+         * @return {HTMLElement}      
+         */
+        _attachCSSSource: function(element) {
+            this._createStyle(element, this.cssSource);
+        },
+
+
+        /**
          * @method _attachCSSDocuments
@@ -139,2 +170,3 @@ * @param element {HTMLElement}
         _attachCSSDocuments: function _attachCSSDocuments(element) {
+            var that = this;
 
@@ -147,8 +179,3 @@ if (this.cssDocuments) {
                 cssDocuments.forEach(function forEach(cssDocument) {
-
-                    // Construct the HTML for the external stylesheets.
-                    var styleElement = $document.createElement('style');
-                    styleElement.innerHTML = '@import "' + cssDocument + '"';
-                    element.appendChild(styleElement);
-
+                    that._createStyle(element, '@import "' + cssDocument + '"');
                 });
@@ -155,0 +182,0 @@

dist/react-shadow.js

@@ -48,8 +48,13 @@ (function main($window, $document) {
 
+            // Attach CSS
+            if (this.cssDocuments) {
+                this._attachCSSDocuments(shadowRoot);
+            }
+            if (this.cssSource) {
+                this._attachCSSSource(shadowRoot);
+            }
             // Append the template node's content to our component.
-            this._attachCSSDocuments(shadowRoot);
             shadowRoot.appendChild(mainElement);
 
             // Render component and intercept the DOM events.
-            shadowRoot.appendChild(mainElement);
             React.render(this.render(), mainElement);
@@ -131,3 +136,29 @@ this._interceptEvents();
 
+
         /**
+         * @method createStyle
+         * @param  {HTMLElement} element
+         * @param  {string} styleContent Content style for given element
+         * @return {HTMLElement}              
+         */
+        _createStyle: function(element, styleContent) {
+            // Construct the HTML for the external stylesheets.
+            var styleElement = $document.createElement('style');
+            styleElement.innerHTML = styleContent;
+            element.appendChild(styleElement);
+            return element;
+        },
+
+
+        /**
+         * @method _attachCSSSource
+         * @param  {HTMLElement} element
+         * @return {HTMLElement}      
+         */
+        _attachCSSSource: function(element) {
+            this._createStyle(element, this.cssSource);
+        },
+
+
+        /**
          * @method _attachCSSDocuments
@@ -139,2 +170,3 @@ * @param element {HTMLElement}
         _attachCSSDocuments: function _attachCSSDocuments(element) {
+            var that = this;
 
@@ -147,8 +179,3 @@ if (this.cssDocuments) {
                 cssDocuments.forEach(function forEach(cssDocument) {
-
-                    // Construct the HTML for the external stylesheets.
-                    var styleElement = $document.createElement('style');
-                    styleElement.innerHTML = '@import "' + cssDocument + '"';
-                    element.appendChild(styleElement);
-
+                    that._createStyle(element, '@import "' + cssDocument + '"');
                 });
@@ -155,0 +182,0 @@

dist/react-shadow.min.js

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

example/js/App.jsx

@@ -31,2 +31,7 @@ (function main($react) {
         /**
+         * @property cssSource
+         */
+        cssSource: "section { box-shadow: 2px 2px black }",
+
+        /**
          * @method getInitialState
@@ -33,0 +38,0 @@ * @return {{refreshed: number}}

package.json

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

@@ -47,2 +47,13 @@ # ReactShadow
 
+You can inline css with `cssSource` property.
+
+```javascript
+var ReadmeApp = $react.createClass({
+    mixins: [ReactShadow],
+    cssSource: "body { color: black; }"
+});
+```
+
+When `cssDocuments` and `cssSource` are both defined, style defined in `cssSource` is appended after `cssDocuments`.
+
 # Event Retargeting
@@ -49,0 +60,0 @@

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

26771

increased by8.51%

Lines of code

497

increased by11.69%

Number of lines in readme file

72

increased by18.03%

No dependency changes