react-fela - npm Package Compare versions

Comparing version 3.0.8 to 4.0.0

dist/react-fela.js

@@ -90,2 +90,12 @@ (function (global, factory) {
 
+  babelHelpers.toConsumableArray = function (arr) {
+    if (Array.isArray(arr)) {
+      for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) arr2[i] = arr[i];
+
+      return arr2;
+    } else {
+      return Array.from(arr);
+    }
+  };
+
   babelHelpers;
@@ -96,2 +106,3 @@
 
+  /*  weak */
   var warning = function warning() {
@@ -107,3 +118,2 @@ return true;
         }
-        throw new Error(message);
       }
@@ -115,2 +125,3 @@ };
 
+  /*  weak */
   function createDOMInterface(renderer, node) {
@@ -192,5 +203,5 @@ var isHydrating = false;
       value: function componentDidMount() {
-        var _props = this.props;
-        var mountNode = _props.mountNode;
-        var renderer = _props.renderer;
+        var _props = this.props,
+            mountNode = _props.mountNode,
+            renderer = _props.renderer;
 
@@ -210,3 +221,3 @@
       value: function render() {
-        return this.props.children;
+        return React.Children.only(this.props.children);
       }
@@ -237,3 +248,8 @@ }]);
           value: function render() {
+            var _context = this.context,
+                renderer = _context.renderer,
+                theme = _context.theme;
+
             // invoke the component name for better CSS debugging
+
             if (true) {
@@ -244,3 +260,5 @@ this.context.renderer._selectorPrefix = Comp.displayName || Comp.name || 'ConnectedFelaComponent';
             // invoke props and renderer to render all styles
-            var styles = mapStylesToProps(this.props)(this.context.renderer);
+            var styles = mapStylesToProps(babelHelpers.extends({}, this.props, {
+              theme: theme || {}
+            }))(renderer);
 
@@ -257,3 +275,4 @@ // remove the component name after rendering
       }(React.Component), _class.displayName = Comp.displayName || Comp.name || 'ConnectedFelaComponent', _class.contextTypes = babelHelpers.extends({}, Comp.contextTypes, {
-        renderer: React.PropTypes.object
+        renderer: React.PropTypes.object,
+        theme: React.PropTypes.object
       }), _temp;
@@ -265,19 +284,19 @@ };
     var type = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'div';
-    var passThroughProps = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+    var passThroughProps = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
+    var defaultProps = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
 
-    var component = function component(_ref, _ref2) {
-      var children = _ref.children;
-      var className = _ref.className;
-      var style = _ref.style;
-      var passThrough = _ref.passThrough;
-      var felaProps = babelHelpers.objectWithoutProperties(_ref, ['children', 'className', 'style', 'passThrough']);
-      var renderer = _ref2.renderer;
+    var FelaComponent = function FelaComponent(_ref, _ref2) {
+      var renderer = _ref2.renderer,
+          theme = _ref2.theme;
+      var children = _ref.children,
+          className = _ref.className,
+          style = _ref.style,
+          _ref$passThrough = _ref.passThrough,
+          passThrough = _ref$passThrough === undefined ? [] : _ref$passThrough,
+          ruleProps = babelHelpers.objectWithoutProperties(_ref, ['children', 'className', 'style', 'passThrough']);
 
 
       // filter props to extract props to pass through
-      var componentProps = Object.keys(babelHelpers.extends({}, passThroughProps, passThrough)).reduce(function (output, prop) {
-        output[prop] = felaProps[prop];
-        if (!passThroughProps[prop]) {
-          delete felaProps[prop];
-        }
+      var componentProps = [].concat(babelHelpers.toConsumableArray(passThroughProps), babelHelpers.toConsumableArray(passThrough)).reduce(function (output, prop) {
+        output[prop] = ruleProps[prop];
         return output;
@@ -289,19 +308,52 @@ }, {});
       var cls = className ? className + ' ' : '';
-      componentProps.className = cls + renderer.renderRule(rule, felaProps);
+      defaultProps.theme = theme || {};
 
+      componentProps.className = cls + renderer.renderRule(rule, ruleProps, defaultProps);
+
       return React.createElement(type, componentProps, children);
     };
 
-    component.contextTypes = { renderer: React.PropTypes.object };
+    FelaComponent.contextTypes = {
+      renderer: React.PropTypes.object,
+      theme: React.PropTypes.object
+    };
 
     // use the rule name as display name to better debug with react inspector
-    component.displayName = rule.name && rule.name || 'FelaComponent';
-
-    return component;
+    FelaComponent.displayName = rule.name && rule.name || 'FelaComponent';
+    return FelaComponent;
   }
 
+  var ThemeProvider = function (_Component) {
+    babelHelpers.inherits(ThemeProvider, _Component);
+
+    function ThemeProvider() {
+      babelHelpers.classCallCheck(this, ThemeProvider);
+      return babelHelpers.possibleConstructorReturn(this, (ThemeProvider.__proto__ || Object.getPrototypeOf(ThemeProvider)).apply(this, arguments));
+    }
+
+    babelHelpers.createClass(ThemeProvider, [{
+      key: 'getChildContext',
+      value: function getChildContext() {
+        return {
+          theme: babelHelpers.extends({}, !this.props.overwrite && this.context.theme || {}, this.props.theme)
+        };
+      }
+    }, {
+      key: 'render',
+      value: function render() {
+        return React.Children.only(this.props.children);
+      }
+    }]);
+    return ThemeProvider;
+  }(React.Component);
+
+  ThemeProvider.propTypes = { theme: React.PropTypes.object, overwrite: React.PropTypes.bool };
+  ThemeProvider.childContextTypes = { theme: React.PropTypes.object };
+  ThemeProvider.contextTypes = { theme: React.PropTypes.object };
+
   var index = {
     Provider: Provider,
     connect: connect,
-    createComponent: createComponent
+    createComponent: createComponent,
+    ThemeProvider: ThemeProvider
   };
@@ -308,0 +360,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=t(this.props)(this.context.renderer);return s.createElement(r,i.extends({},this.props,{styles:e}))}}]),n}(e.Component),n.displayName=r.displayName||r.name||"ConnectedFelaComponent",n.contextTypes=i.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,s){var c=o.children,a=o.className,u=o.style,p=o.passThrough,l=i.objectWithoutProperties(o,["children","className","style","passThrough"]),f=s.renderer,y=Object.keys(i.extends({},n,p)).reduce(function(e,t){return e[t]=l[t],n[t]||delete l[t],e},{});y.style=u;var d=a?a+" ":"";return y.className=d+f.renderRule(t,l),e.createElement(r,y,c)};return o.contextTypes={renderer:e.PropTypes.object},o.displayName=t.name&&t.name||"FelaComponent",o}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};var c=function(e){function t(){return i.classCallCheck(this,t),i.possibleConstructorReturn(this,(t.__proto__||Object.getPrototypeOf(t)).apply(this,arguments))}return i.inherits(t,e),i.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});
+!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});

package.json

 {
   "name": "react-fela",
-  "version": "3.0.8",
+  "version": "4.0.0",
   "description": "React bindings for Fela",
@@ -25,4 +25,4 @@ "main": "index.js",
     "react": "^15.3.2",
-    "fela": "3.0.8"
+    "fela": "4.0.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.61kb-brightgreen.svg">
+<img alt="gzipped size" src="https://img.shields.io/badge/gzipped-1.82kb-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.8/dist/react-fela.js"></script>
+<script src="https://unpkg.com/react-fela@4.0.0/dist/react-fela.js"></script>
 <!-- Production build (minified)  -->
-<script src="https://unpkg.com/react-fela@3.0.8/dist/react-fela.min.js"></script>
+<script src="https://unpkg.com/react-fela@4.0.0/dist/react-fela.min.js"></script>
 ```
@@ -34,3 +34,4 @@
 * [`createComponent(rule, [type], [passThroughProps])`](docs/createComponent.md)
-* [`<ThemeProvider theme>`](docs/ThemeProvider.md)
+* [`<ThemeProvider theme [overwrite]>`](docs/ThemeProvider.md)
+
 ## Usage
@@ -37,0 +38,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

Improved metrics

Total package byte prevSize

33928

increased by15.65%

Lines of code

286

increased by18.18%

Number of lines in readme file

42

increased by2.44%

No dependency changes