react-fela - npm Package Compare versions

Comparing version 3.0.6 to 3.0.7

dist/react-fela.js

@@ -253,19 +253,15 @@ (function (global, factory) {
           value: function render() {
-            var renderer = this.context.renderer;
-
             // invoke the component name for better CSS debugging
-
             if (true) {
-              (function () {
-                var displayName = Comp.displayName || Comp.name || 'ConnectedFelaComponent';
-                var oldRenderRule = renderer.renderRule.bind(renderer);
-                renderer.renderRule = function (rule, props) {
-                  return oldRenderRule(rule, props, displayName);
-                };
-              })();
+              this.context.renderer._selectorPrefix = Comp.displayName || Comp.name || 'ConnectedFelaComponent';
             }
 
             // invoke props and renderer to render all styles
-            var styles = mapStylesToProps(this.props)(renderer);
+            var styles = mapStylesToProps(this.props)(this.context.renderer);
 
+            // remove the component name after rendering
+            if (true) {
+              this.context.renderer._selectorPrefix = undefined;
+            }
+
             return React__default.createElement(Comp, babelHelpers.extends({}, this.props, { styles: styles }));
@@ -284,3 +280,2 @@ }
     var passThroughProps = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-    var _displayName = arguments[3];
 
@@ -291,4 +286,3 @@ var component = function component(_ref, _ref2) {
       var style = _ref.style;
-      var id = _ref.id;
-      var felaProps = babelHelpers.objectWithoutProperties(_ref, ['children', 'className', 'style', 'id']);
+      var felaProps = babelHelpers.objectWithoutProperties(_ref, ['children', 'className', 'style']);
       var renderer = _ref2.renderer;
@@ -306,7 +300,6 @@
 
-      componentProps.id = id;
       componentProps.style = style;
 
       var cls = className ? className + ' ' : '';
-      componentProps.className = cls + renderer.renderRule(rule, felaProps, _displayName);
+      componentProps.className = cls + renderer.renderRule(rule, felaProps);
 
@@ -317,2 +310,6 @@ return React.createElement(type, componentProps, children);
     component.contextTypes = { renderer: React.PropTypes.object };
+
+    // use the rule name as display name to better debug with react inspector ( see #99 )
+    component.displayName = rule.name && rule.name || 'FelaComponent';
+
     return component;
@@ -319,0 +316,0 @@ }

dist/react-fela.min.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):e.ReactFela=t(e.React)}(this,function(e){"use strict";function t(e,t){var r=0,n=!1,o={updateNode:function(){var o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};if("hydrate"===o.type&&(n=!o.done),!n)if("rule"===o.type){var i=o.selector,s=o.css,c=o.media,u=i+"{"+s+"}",a=t.sheet,l=a.cssRules.length;c&&c.length>0?(a.insertRule("@media "+c+"{"+u+"}",l-r),r+=1):a.insertRule(u,0)}else t.textContent=e.renderToString(),r=0}};return o}function r(e,r){if(!r||1!==r.nodeType)throw new Error("You need to specify a valid element node (nodeType = 1) to render into.");r.setAttribute("data-fela-stylesheet","");var n=t(e,r);e.subscribe(n.updateNode);var o=e.renderToString();r.textContent!==o&&(r.textContent=o)}function n(t){return function(r){var n,o;return o=n=function(e){function n(){return s.classCallCheck(this,n),s.possibleConstructorReturn(this,(n.__proto__||Object.getPrototypeOf(n)).apply(this,arguments))}return s.inherits(n,e),s.createClass(n,[{key:"render",value:function(){var e=this.context.renderer,n=t(this.props)(e);return i.createElement(r,s.extends({},this.props,{styles:n}))}}]),n}(e.Component),n.displayName=r.displayName||r.name||"ConnectedFelaComponent",n.contextTypes=s.extends({},r.contextTypes,{renderer:e.PropTypes.object}),o}}function o(t){var r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"div",n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},o=arguments[3],i=function(i,c){var u=i.children,a=i.className,l=i.style,p=i.id,f=s.objectWithoutProperties(i,["children","className","style","id"]),d=c.renderer,y=Object.keys(n).reduce(function(e,t){return e[t]=f[t],n[t]||delete f[t],e},{});y.id=p,y.style=l;var h=a?a+" ":"";return y.className=h+d.renderRule(t,f,o),e.createElement(r,y,u)};return i.contextTypes={renderer:e.PropTypes.object},i}var i="default"in e?e.default:e,s={};s.typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},s.classCallCheck=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},s.createClass=function(){function e(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,r,n){return r&&e(t.prototype,r),n&&e(t,n),t}}(),s.extends=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},s.inherits=function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)},s.objectWithoutProperties=function(e,t){var r={};for(var n in e)t.indexOf(n)>=0||Object.prototype.hasOwnProperty.call(e,n)&&(r[n]=e[n]);return r},s.possibleConstructorReturn=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t};var c=function(e){function t(){return s.classCallCheck(this,t),s.possibleConstructorReturn(this,(t.__proto__||Object.getPrototypeOf(t)).apply(this,arguments))}return s.inherits(t,e),s.createClass(t,[{key:"componentDidMount",value:function(){var e=this.props,t=e.mountNode,n=e.renderer;t&&r(n,t)}},{key:"getChildContext",value:function(){return{renderer:this.props.renderer}}},{key:"render",value:function(){return this.props.children}}]),t}(e.Component);c.propTypes={renderer:e.PropTypes.object},c.childContextTypes={renderer:e.PropTypes.object};var u={Provider:c,connect:n,createComponent:o};return u});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):e.ReactFela=t(e.React)}(this,function(e){"use strict";function t(e,t){var r=0,n=!1,o={updateNode:function(){var o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};if("hydrate"===o.type&&(n=!o.done),!n)if("rule"===o.type){var i=o.selector,s=o.css,c=o.media,a=i+"{"+s+"}",u=t.sheet,l=u.cssRules.length;c&&c.length>0?(u.insertRule("@media "+c+"{"+a+"}",l-r),r+=1):u.insertRule(a,0)}else t.textContent=e.renderToString(),r=0}};return o}function r(e,r){if(!r||1!==r.nodeType)throw new Error("You need to specify a valid element node (nodeType = 1) to render into.");r.setAttribute("data-fela-stylesheet","");var n=t(e,r);e.subscribe(n.updateNode);var o=e.renderToString();r.textContent!==o&&(r.textContent=o)}function n(t){return function(r){var n,o;return o=n=function(e){function n(){return s.classCallCheck(this,n),s.possibleConstructorReturn(this,(n.__proto__||Object.getPrototypeOf(n)).apply(this,arguments))}return s.inherits(n,e),s.createClass(n,[{key:"render",value:function(){var e=t(this.props)(this.context.renderer);return i.createElement(r,s.extends({},this.props,{styles:e}))}}]),n}(e.Component),n.displayName=r.displayName||r.name||"ConnectedFelaComponent",n.contextTypes=s.extends({},r.contextTypes,{renderer:e.PropTypes.object}),o}}function o(t){var r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"div",n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},o=function(o,i){var c=o.children,a=o.className,u=o.style,l=s.objectWithoutProperties(o,["children","className","style"]),p=i.renderer,f=Object.keys(n).reduce(function(e,t){return e[t]=l[t],n[t]||delete l[t],e},{});f.style=u;var y=a?a+" ":"";return f.className=y+p.renderRule(t,l),e.createElement(r,f,c)};return o.contextTypes={renderer:e.PropTypes.object},o.displayName=t.name&&t.name||"FelaComponent",o}var i="default"in e?e.default:e,s={};s.typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},s.classCallCheck=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},s.createClass=function(){function e(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,r,n){return r&&e(t.prototype,r),n&&e(t,n),t}}(),s.extends=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},s.inherits=function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)},s.objectWithoutProperties=function(e,t){var r={};for(var n in e)t.indexOf(n)>=0||Object.prototype.hasOwnProperty.call(e,n)&&(r[n]=e[n]);return r},s.possibleConstructorReturn=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t};var c=function(e){function t(){return s.classCallCheck(this,t),s.possibleConstructorReturn(this,(t.__proto__||Object.getPrototypeOf(t)).apply(this,arguments))}return s.inherits(t,e),s.createClass(t,[{key:"componentDidMount",value:function(){var e=this.props,t=e.mountNode,n=e.renderer;t&&r(n,t)}},{key:"getChildContext",value:function(){return{renderer:this.props.renderer}}},{key:"render",value:function(){return this.props.children}}]),t}(e.Component);c.propTypes={renderer:e.PropTypes.object},c.childContextTypes={renderer:e.PropTypes.object};var a={Provider:c,connect:n,createComponent:o};return a});

package.json

 {
   "name": "react-fela",
-  "version": "3.0.6",
+  "version": "3.0.7",
   "description": "React bindings for Fela",
@@ -25,4 +25,4 @@ "main": "index.js",
     "react": "^15.3.2",
-    "fela": "3.0.6"
+    "fela": "3.0.7"
   }
 }

README.md

@@ -6,3 +6,3 @@ # React Fela
 <img alt="npm downloads" src="https://img.shields.io/npm/dm/react-fela.svg">
-<img alt="gzipped size" src="https://img.shields.io/badge/gzipped-1.65kb-brightgreen.svg">
+<img alt="gzipped size" src="https://img.shields.io/badge/gzipped-1.64kb-brightgreen.svg">
 
@@ -23,5 +23,5 @@ This package only includes React bindings for [Fela](http://github.com/rofrischmann/fela).<br>
 <!-- Development build (with warnings)  -->
-<script src="https://unpkg.com/react-fela@3.0.6/dist/react-fela.js"></script>
+<script src="https://unpkg.com/react-fela@3.0.7/dist/react-fela.js"></script>
 <!-- Production build (minified)  -->
-<script src="https://unpkg.com/react-fela@3.0.6/dist/react-fela.min.js"></script>
+<script src="https://unpkg.com/react-fela@3.0.7/dist/react-fela.min.js"></script>
 ```
@@ -34,3 +34,3 @@
 * [`createComponent(rule, [type], [passThroughProps])`](docs/createComponent.md)
-
+* [`<ThemeProvider theme>`](docs/ThemeProvider.md)
 ## Usage
@@ -37,0 +37,0 @@ For more information and best practices on how to effectively use this package, please check out the main [Fela Documention - Usage with React](http://fela.js.org/docs/guides/UsageWithReact.html). There you will also find some usage examples. This package only contains the pure API reference documentation.

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

31434

decreased by-0.24%

Lines of code

260

decreased by-1.52%

No dependency changes