react-fela - npm Package Compare versions

Comparing version 4.0.1 to 4.1.0

dist/react-fela.js

@@ -40,2 +40,17 @@ (function (global, factory) {
 
+  babelHelpers.defineProperty = function (obj, key, value) {
+    if (key in obj) {
+      Object.defineProperty(obj, key, {
+        value: value,
+        enumerable: true,
+        configurable: true,
+        writable: true
+      });
+    } else {
+      obj[key] = value;
+    }
+
+    return obj;
+  };
+
   babelHelpers.extends = Object.assign || function (target) {
@@ -107,2 +122,15 @@ for (var i = 1; i < arguments.length; i++) {
   /*  weak */
+  var RULE_TYPE = 1;
+
+  function createDOMInterface(renderer, node) {
+    return function (change) {
+      // only use insertRule in production as browser devtools might have
+      // weird behavior if used together with insertRule at runtime
+      if (false && change.type === RULE_TYPE && !change.media) {} else {
+        node.textContent = renderer.renderToString();
+      }
+    };
+  }
+
+  /*  weak */
   var warning = function warning() {
@@ -124,45 +152,10 @@ return true;
 
-  /*  weak */
-  function createDOMInterface(renderer, node) {
-    var isHydrating = false;
-
-    var DOMInterface = {
-      /**
-       * updates DOM node styles performantly
-       *
-       * @param {Function} node - DOM node
-       * @param {Object} change - object describing the changes
-       * @param {Object} renderer - the renderer which triggered the change
-       */
-      updateNode: function updateNode() {
-        var change = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-
-        // setting the hydration flag to prevent DOM updates will immediately
-        // get unset as soon as the rehydration process is done
-        if (change.type === 'hydrate') {
-          isHydrating = !change.done;
-        }
-
-        // only update DOM if the renderer is not hydrating at the moment
-        if (!isHydrating) {
-          // only use insertRule in production as browser devtools might have
-          // weird behavior if used together with insertRule at runtime
-          if (change.type === 'rule' && !change.media && false) {
-            var sheet = node.sheet;
-            // directly append new rules before media rules
-            sheet.insertRule(change.selector + '{' + change.css + '}', sheet.cssRules.length);
-          } else {
-            node.textContent = renderer.renderToString();
-          }
-        }
-      }
-    };
-
-    return DOMInterface;
+  function isValidHTMLElement(mountNode) {
+    return mountNode && mountNode.nodeType === 1;
   }
 
   function render(renderer, mountNode) {
-    // check if the passed node is a valid element node which allows
-    // setting the `textContent` property to update the node's content
-    if (!mountNode || mountNode.nodeType !== 1) {
+    // mountNode must be a valid HTML element to be able
+    // to set mountNode.textContent later on
+    if (!isValidHTMLElement(mountNode)) {
       throw new Error('You need to specify a valid element node (nodeType = 1) to render into.');
@@ -179,10 +172,9 @@ }
 
-    var DOMInterface = createDOMInterface(renderer, mountNode);
-    renderer.subscribe(DOMInterface.updateNode);
+    var updateNode = createDOMInterface(renderer, mountNode);
+    renderer.subscribe(updateNode);
 
-    // render currently rendered styles to the DOM once
-    // if it is not already in DOM
     var css = renderer.renderToString();
 
     if (mountNode.textContent !== css) {
+      // render currently rendered styles to the DOM once
       mountNode.textContent = css;
@@ -250,9 +242,3 @@ }
 
-            // invoke the component name for better CSS debugging
 
-            if (true) {
-              this.context.renderer._selectorPrefix = Comp.displayName || Comp.name || 'ConnectedFelaComponent';
-            }
-
-            // invoke props and renderer to render all styles
             var styles = mapStylesToProps(babelHelpers.extends({}, this.props, {
@@ -262,7 +248,2 @@ theme: theme || {}
 
-            // remove the component name after rendering
-            if (true) {
-              this.context.renderer._selectorPrefix = undefined;
-            }
-
             return React__default.createElement(Comp, babelHelpers.extends({}, this.props, { styles: styles }));
@@ -282,3 +263,2 @@ }
     var passThroughProps = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
-    var defaultProps = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
 
@@ -305,6 +285,5 @@ var FelaComponent = function FelaComponent(_ref, _ref2) {
       var cls = className ? className + ' ' : '';
-      defaultProps.theme = theme || {};
+      ruleProps.theme = theme || {};
 
-      componentProps.className = cls + renderer.renderRule(rule, ruleProps, defaultProps);
-
+      componentProps.className = cls + renderer.renderRule(rule, ruleProps);
       return React.createElement(type, componentProps, children);
@@ -334,4 +313,10 @@ };
       value: function getChildContext() {
+        var _props = this.props,
+            overwrite = _props.overwrite,
+            theme = _props.theme;
+
+        var previousTheme = this.context.theme;
+
         return {
-          theme: babelHelpers.extends({}, !this.props.overwrite && this.context.theme || {}, this.props.theme)
+          theme: babelHelpers.extends({}, !overwrite && previousTheme || {}, theme)
         };
@@ -338,0 +323,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=!1,n={updateNode:function(){var n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};if("hydrate"===n.type&&(r=!n.done),!r)if("rule"!==n.type||n.media)t.textContent=e.renderToString();else{var o=t.sheet;o.insertRule(n.selector+"{"+n.css+"}",o.cssRules.length)}}};return n}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 i.classCallCheck(this,n),i.possibleConstructorReturn(this,(n.__proto__||Object.getPrototypeOf(n)).apply(this,arguments))}return i.inherits(n,e),i.createClass(n,[{key:"render",value:function(){var e=this.context,n=e.renderer,o=e.theme,c=t(i.extends({},this.props,{theme:o||{}}))(n);return s.createElement(r,i.extends({},this.props,{styles:c}))}}]),n}(e.Component),n.displayName=r.displayName||r.name||"ConnectedFelaComponent",n.contextTypes=i.extends({},r.contextTypes,{renderer:e.PropTypes.object,theme: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.length>3&&void 0!==arguments[3]?arguments[3]:{},s=function(s,c){var a=c.renderer,p=c.theme,u=s.children,l=s.className,y=s.style,f=s.passThrough,h=void 0===f?[]:f,d=i.objectWithoutProperties(s,["children","className","style","passThrough"]),m=[].concat(i.toConsumableArray(n),i.toConsumableArray(h)).reduce(function(e,t){return e[t]=d[t],e},{});m.style=y;var b=l?l+" ":"";return o.theme=p||{},m.className=b+a.renderRule(t,d,o),e.createElement(r,m,u)};return s.contextTypes={renderer:e.PropTypes.object,theme:e.PropTypes.object},s.displayName=t.name&&t.name||"FelaComponent",s}var s="default"in e?e.default:e,i={};i.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},i.classCallCheck=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},i.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}}(),i.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},i.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)},i.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},i.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},i.toConsumableArray=function(e){if(Array.isArray(e)){for(var t=0,r=Array(e.length);t<e.length;t++)r[t]=e[t];return r}return Array.from(e)};var c=function(t){function n(){return i.classCallCheck(this,n),i.possibleConstructorReturn(this,(n.__proto__||Object.getPrototypeOf(n)).apply(this,arguments))}return i.inherits(n,t),i.createClass(n,[{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 e.Children.only(this.props.children)}}]),n}(e.Component);c.propTypes={renderer:e.PropTypes.object},c.childContextTypes={renderer:e.PropTypes.object};var a=function(t){function r(){return i.classCallCheck(this,r),i.possibleConstructorReturn(this,(r.__proto__||Object.getPrototypeOf(r)).apply(this,arguments))}return i.inherits(r,t),i.createClass(r,[{key:"getChildContext",value:function(){return{theme:i.extends({},!this.props.overwrite&&this.context.theme||{},this.props.theme)}}},{key:"render",value:function(){return e.Children.only(this.props.children)}}]),r}(e.Component);a.propTypes={theme:e.PropTypes.object,overwrite:e.PropTypes.bool},a.childContextTypes={theme:e.PropTypes.object},a.contextTypes={theme:e.PropTypes.object};var p={Provider:c,connect:n,createComponent:o,ThemeProvider:a};return p});
+!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){return function(r){r.type!==a||r.media?t.textContent=e.renderToString():t.sheet.insertRule(r.selector+"{"+r.declaration+"}",t.sheet.cssRules.length)}}function r(e){return e&&1===e.nodeType}function n(e,n){if(!r(n))throw new Error("You need to specify a valid element node (nodeType = 1) to render into.");n.setAttribute("data-fela-stylesheet","");var o=t(e,n);e.subscribe(o);var i=e.renderToString();n.textContent!==i&&(n.textContent=i)}function o(t){return function(r){var n,o;return o=n=function(e){function n(){return c.classCallCheck(this,n),c.possibleConstructorReturn(this,(n.__proto__||Object.getPrototypeOf(n)).apply(this,arguments))}return c.inherits(n,e),c.createClass(n,[{key:"render",value:function(){var e=this.context,n=e.renderer,o=e.theme,i=t(c.extends({},this.props,{theme:o||{}}))(n);return s.createElement(r,c.extends({},this.props,{styles:i}))}}]),n}(e.Component),n.displayName=r.displayName||r.name||"ConnectedFelaComponent",n.contextTypes=c.extends({},r.contextTypes,{renderer:e.PropTypes.object,theme:e.PropTypes.object}),o}}function i(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 s=i.renderer,a=i.theme,u=o.children,p=o.className,l=o.style,f=o.passThrough,y=void 0===f?[]:f,h=c.objectWithoutProperties(o,["children","className","style","passThrough"]),d=[].concat(c.toConsumableArray(n),c.toConsumableArray(y)).reduce(function(e,t){return e[t]=h[t],e},{});d.style=l;var b=p?p+" ":"";return h.theme=a||{},d.className=b+s.renderRule(t,h),e.createElement(r,d,u)};return o.contextTypes={renderer:e.PropTypes.object,theme:e.PropTypes.object},o.displayName=t.name&&t.name||"FelaComponent",o}var s="default"in e?e.default:e,c={};c.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},c.classCallCheck=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},c.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}}(),c.defineProperty=function(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e},c.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},c.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)},c.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},c.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},c.toConsumableArray=function(e){if(Array.isArray(e)){for(var t=0,r=Array(e.length);t<e.length;t++)r[t]=e[t];return r}return Array.from(e)};var a=1,u=function(t){function r(){return c.classCallCheck(this,r),c.possibleConstructorReturn(this,(r.__proto__||Object.getPrototypeOf(r)).apply(this,arguments))}return c.inherits(r,t),c.createClass(r,[{key:"componentDidMount",value:function(){var e=this.props,t=e.mountNode,r=e.renderer;t&&n(r,t)}},{key:"getChildContext",value:function(){return{renderer:this.props.renderer}}},{key:"render",value:function(){return e.Children.only(this.props.children)}}]),r}(e.Component);u.propTypes={renderer:e.PropTypes.object},u.childContextTypes={renderer:e.PropTypes.object};var p=function(t){function r(){return c.classCallCheck(this,r),c.possibleConstructorReturn(this,(r.__proto__||Object.getPrototypeOf(r)).apply(this,arguments))}return c.inherits(r,t),c.createClass(r,[{key:"getChildContext",value:function(){var e=this.props,t=e.overwrite,r=e.theme,n=this.context.theme;return{theme:c.extends({},!t&&n||{},r)}}},{key:"render",value:function(){return e.Children.only(this.props.children)}}]),r}(e.Component);p.propTypes={theme:e.PropTypes.object,overwrite:e.PropTypes.bool},p.childContextTypes={theme:e.PropTypes.object},p.contextTypes={theme:e.PropTypes.object};var l={Provider:u,connect:o,createComponent:i,ThemeProvider:p};return l});

package.json

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

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.82kb-brightgreen.svg">
+<img alt="gzipped size" src="https://img.shields.io/badge/gzipped-1.79kb-brightgreen.svg">
 
@@ -17,3 +17,3 @@ This package only includes React bindings for [Fela](http://github.com/rofrischmann/fela).<br>
 
-Assuming you are using [npm](https://www.npmjs.com) as your package mananger you can basically just `npm install` all packages. <br>
+Assuming you are using [npm](https://www.npmjs.com) as your package manager you can basically just `npm install` all packages. <br>
 Otherwise we also provide [UMD](https://github.com/umdjs/umd) builds for each package within the `dist` folder. You can easily use them via [unpkg](https://unpkg.com/).
@@ -24,5 +24,5 @@ > **Caution**: You need to include both React and Fela on your own as well.
 <!-- Development build (with warnings)  -->
-<script src="https://unpkg.com/react-fela@4.0.1/dist/react-fela.js"></script>
+<script src="https://unpkg.com/react-fela@4.1.0/dist/react-fela.js"></script>
 <!-- Production build (minified)  -->
-<script src="https://unpkg.com/react-fela@4.0.1/dist/react-fela.min.js"></script>
+<script src="https://unpkg.com/react-fela@4.1.0/dist/react-fela.min.js"></script>
 ```
@@ -29,0 +29,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

Worsened metrics

Total package byte prevSize

31256

decreased by-7.88%

Lines of code

272

decreased by-4.9%

No dependency changes