react-fela - npm Package Compare versions

Comparing version 3.0.1 to 3.0.6

dist/react-fela.js

 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('react'), require('fela')) :
-  typeof define === 'function' && define.amd ? define(['react', 'fela'], factory) :
-  (global.ReactFela = factory(global.React,global.Fela));
-}(this, function (React,fela) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('react')) :
+  typeof define === 'function' && define.amd ? define(['react'], factory) :
+  (global.ReactFela = factory(global.React));
+}(this, function (React) { 'use strict';
 
@@ -10,2 +10,7 @@ var React__default = 'default' in React ? React['default'] : React;
   var babelHelpers = {};
+  babelHelpers.typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) {
+    return typeof obj;
+  } : function (obj) {
+    return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+  };
 
@@ -88,2 +93,109 @@ babelHelpers.classCallCheck = function (instance, Constructor) {
 
+
+  function __commonjs(fn, module) { return module = { exports: {} }, fn(module, module.exports), module.exports; }
+
+  var warning = function warning() {
+    return true;
+  };
+
+  if (true) {
+    warning = function warning(condition, message) {
+      if (!condition) {
+        if (typeof console !== 'undefined') {
+          console.error(message); // eslint-disable-line
+        }
+        throw new Error(message);
+      }
+    };
+  }
+
+  var warning$1 = warning;
+
+  function createDOMInterface(renderer, node) {
+    // this counter is used to cache the amount of @media rules
+    // rendered using insertRule since the last full rerender with textContent
+    // using the counter enables to insert rules and @media rules separately
+    // which helps to ensure correct order and prevents rule order issue
+    var mediaRules = 0;
+    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' && false) {
+            var selector = change.selector;
+            var css = change.css;
+            var media = change.media;
+
+            var cssRule = selector + '{' + css + '}';
+
+            var sheet = node.sheet;
+            var ruleLength = sheet.cssRules.length;
+
+            if (media && media.length > 0) {
+              // insert @media rules after basic rules, newest first
+              sheet.insertRule('@media ' + media + '{' + cssRule + '}', ruleLength - mediaRules);
+              mediaRules += 1;
+            } else {
+              // directly append new rules before everything else
+              sheet.insertRule(cssRule, 0);
+            }
+          } else {
+            node.textContent = renderer.renderToString();
+            // the @media rules counter gets reset as the
+            // full rerender also includes all @media rules
+            mediaRules = 0;
+          }
+        }
+      }
+    };
+
+    return DOMInterface;
+  }
+
+  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) {
+      throw new Error('You need to specify a valid element node (nodeType = 1) to render into.');
+    }
+
+    // warns if the DOM node either is not a valid <style> element thus the styles do not get applied as Expected
+    // or if the node already got the data-fela-stylesheet attribute applied suggesting it is already used by another Renderer
+    warning$1(mountNode.nodeName === 'STYLE', 'You are using a node other than `<style>`. Your styles might not get applied correctly.');
+    warning$1(!mountNode.hasAttribute('data-fela-stylesheet'), 'This node is already used by another renderer. Rendering might overwrite other styles.');
+
+    // mark and clean the DOM node to prevent side-effects
+    mountNode.setAttribute('data-fela-stylesheet', '');
+
+    var DOMInterface = createDOMInterface(renderer, mountNode);
+    renderer.subscribe(DOMInterface.updateNode);
+
+    // render currently rendered styles to the DOM once
+    // if it is not already in DOM
+    var css = renderer.renderToString();
+
+    if (mountNode.textContent !== css) {
+      mountNode.textContent = css;
+    }
+  }
+
   var Provider = function (_Component) {
@@ -94,3 +206,3 @@ babelHelpers.inherits(Provider, _Component);
       babelHelpers.classCallCheck(this, Provider);
-      return babelHelpers.possibleConstructorReturn(this, Object.getPrototypeOf(Provider).apply(this, arguments));
+      return babelHelpers.possibleConstructorReturn(this, (Provider.__proto__ || Object.getPrototypeOf(Provider)).apply(this, arguments));
     }
@@ -107,3 +219,3 @@
         if (mountNode) {
-          fela.render(renderer, mountNode);
+          render(renderer, mountNode);
         }
@@ -137,3 +249,3 @@ }
           babelHelpers.classCallCheck(this, EnhancedComponent);
-          return babelHelpers.possibleConstructorReturn(this, Object.getPrototypeOf(EnhancedComponent).apply(this, arguments));
+          return babelHelpers.possibleConstructorReturn(this, (EnhancedComponent.__proto__ || Object.getPrototypeOf(EnhancedComponent)).apply(this, arguments));
         }
@@ -146,4 +258,18 @@
           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);
+                };
+              })();
+            }
+
             // invoke props and renderer to render all styles
-            var styles = mapStylesToProps(this.props)(this.context.renderer);
+            var styles = mapStylesToProps(this.props)(renderer);
 
@@ -154,3 +280,3 @@ return React__default.createElement(Comp, babelHelpers.extends({}, this.props, { styles: styles }));
         return EnhancedComponent;
-      }(React.Component), _class.displayName = Comp.displayName || Comp.name || 'Component', _class.contextTypes = babelHelpers.extends({}, Comp.contextTypes, {
+      }(React.Component), _class.displayName = Comp.displayName || Comp.name || 'ConnectedFelaComponent', _class.contextTypes = babelHelpers.extends({}, Comp.contextTypes, {
         renderer: React.PropTypes.object
@@ -162,14 +288,16 @@ }), _temp;
   function createComponent(rule) {
-    var type = arguments.length <= 1 || arguments[1] === undefined ? 'div' : arguments[1];
-    var passThroughProps = arguments.length <= 2 || arguments[2] === undefined ? {} : arguments[2];
+    var type = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'div';
+    var passThroughProps = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+    var _displayName = arguments[3];
 
-    var component = function component(props, _ref) {
-      var renderer = _ref.renderer;
+    var component = function component(_ref, _ref2) {
+      var children = _ref.children;
+      var className = _ref.className;
+      var style = _ref.style;
+      var id = _ref.id;
+      var felaProps = babelHelpers.objectWithoutProperties(_ref, ['children', 'className', 'style', 'id']);
+      var renderer = _ref2.renderer;
 
-      // extract children as a special prop
-      var children = props.children;
-      var felaProps = babelHelpers.objectWithoutProperties(props, ['children']);
 
       // filter props to extract props to pass through
-
       var componentProps = Object.keys(passThroughProps).reduce(function (output, prop) {
@@ -183,3 +311,8 @@ output[prop] = felaProps[prop];
 
-      componentProps.className = renderer.renderRule(rule, felaProps);
+      componentProps.id = id;
+      componentProps.style = style;
+
+      var cls = className ? className + ' ' : '';
+      componentProps.className = cls + renderer.renderRule(rule, felaProps, _displayName);
+
       return React.createElement(type, componentProps, children);
@@ -186,0 +319,0 @@ };

dist/react-fela.min.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("react"),require("fela")):"function"==typeof define&&define.amd?define(["react","fela"],t):e.ReactFela=t(e.React,e.Fela)}(this,function(e,t){"use strict";function r(t){return function(r){var n,c;return c=n=function(e){function n(){return i.classCallCheck(this,n),i.possibleConstructorReturn(this,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 o.createElement(r,i["extends"]({},this.props,{styles:e}))}}]),n}(e.Component),n.displayName=r.displayName||r.name||"Component",n.contextTypes=i["extends"]({},r.contextTypes,{renderer:e.PropTypes.object}),c}}function n(t){var r=arguments.length<=1||void 0===arguments[1]?"div":arguments[1],n=arguments.length<=2||void 0===arguments[2]?{}:arguments[2],o=function(o,c){var s=c.renderer,u=o.children,a=i.objectWithoutProperties(o,["children"]),p=Object.keys(n).reduce(function(e,t){return e[t]=a[t],n[t]||delete a[t],e},{});return p.className=s.renderRule(t,a),e.createElement(r,p,u)};return o.contextTypes={renderer:e.PropTypes.object},o}var o="default"in e?e["default"]:e,i={};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 r(){return i.classCallCheck(this,r),i.possibleConstructorReturn(this,Object.getPrototypeOf(r).apply(this,arguments))}return i.inherits(r,e),i.createClass(r,[{key:"componentDidMount",value:function(){var e=this.props,r=e.mountNode,n=e.renderer;r&&t.render(n,r)}},{key:"getChildContext",value:function(){return{renderer:this.props.renderer}}},{key:"render",value:function(){return this.props.children}}]),r}(e.Component);c.propTypes={renderer:e.PropTypes.object},c.childContextTypes={renderer:e.PropTypes.object};var s={Provider:c,connect:r,createComponent:n};return s});
+!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});

package.json

 {
   "name": "react-fela",
-  "version": "3.0.1",
+  "version": "3.0.6",
   "description": "React bindings for Fela",
-  "repository": "https://github.com/rofrischmann/react-fela/",
-  "main": "lib/index.js",
+  "main": "index.js",
   "files": [
     "LICENSE",
     "README.md",
-    "/lib",
+    "index.js",
     "/dist"
   ],
+  "repository": "https://github.com/rofrischmann/fela/",
   "keywords": [
@@ -23,55 +23,6 @@ "fela",
   "license": "MIT",
-  "scripts": {
-    "babel": "babel -d lib modules",
-    "dist": "cross-env NODE_ENV=production babel-node scripts/buildPackage && cross-env NODE_ENV=development babel-node scripts/buildPackage",
-    "lint": "eslint modules",
-    "prepare": "npm run lint && npm test && npm run dist && npm run babel",
-    "release": "npm run prepare && npm publish",
-    "test": "istanbul cover node_modules/mocha/bin/_mocha -- --opts test/mocha.opts"
-  },
   "peerDependencies": {
     "react": "^15.3.2",
-    "fela": "^3.0.1"
-  },
-  "devDependencies": {
-    "babel": "^6.5.2",
-    "babel-cli": "^6.6.0",
-    "babel-core": "^6.6.0",
-    "babel-eslint": "^5.0.0",
-    "babel-plugin-add-module-exports": "^0.1.2",
-    "babel-plugin-transform-class-properties": "^6.9.1",
-    "babel-preset-es2015": "^6.6.0",
-    "babel-preset-es2015-rollup": "^1.1.1",
-    "babel-preset-react": "^6.5.0",
-    "babel-preset-stage-0": "^6.5.0",
-    "chai": "^3.5.0",
-    "codeclimate-test-reporter": "^0.3.1",
-    "cross-env": "^1.0.8",
-    "esformatter": "^0.9.0",
-    "esformatter-braces": "^1.2.1",
-    "esformatter-collapse-objects": "^0.5.1",
-    "esformatter-dot-notation": "^1.3.1",
-    "esformatter-jsx": "^4.1.2",
-    "esformatter-literal-notation": "^1.0.1",
-    "esformatter-parseint": "^1.0.3",
-    "esformatter-quote-props": "^1.0.2",
-    "esformatter-quotes": "^1.0.3",
-    "esformatter-remove-trailing-commas": "^1.0.1",
-    "esformatter-spaced-lined-comment": "^2.0.1",
-    "esformatter-var-each": "^2.1.0",
-    "eslint": "^2.10.2",
-    "eslint-config-rackt": "^1.1.1",
-    "eslint-plugin-react": "^6.2.2",
-    "estraverse-fb": "^1.3.1",
-    "fela": "^1.2.0",
-    "istanbul": "^1.0.0-alpha.2",
-    "mocha": "^2.4.5",
-    "react": "^15.1.0",
-    "react-dom": "^15.1.0",
-    "rollup": "^0.26.3",
-    "rollup-plugin-babel": "^2.4.0",
-    "rollup-plugin-commonjs": "^2.2.1",
-    "rollup-plugin-node-resolve": "^1.5.0",
-    "rollup-plugin-uglify": "^0.3.1"
+    "fela": "3.0.6"
   }
-}
+}

README.md

@@ -5,14 +5,8 @@ # React Fela
 
-<img alt="TravisCI" src="https://travis-ci.org/rofrischmann/react-fela.svg?branch=master">
-<a href="https://codeclimate.com/github/rofrischmann/react-fela/coverage"><img alt="Test Coverage" src="https://codeclimate.com/github/rofrischmann/react-fela/badges/coverage.svg"></a>
 <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.25kb-brightgreen.svg">
+<img alt="gzipped size" src="https://img.shields.io/badge/gzipped-1.65kb-brightgreen.svg">
 
-
 This package only includes React bindings for [Fela](http://github.com/rofrischmann/fela).<br>
 It assumes you already know about Fela and how to use it.
 
-> [Learn about Fela!](http://github.com/rofrischmann/fela)
-
-
 ## Installation
@@ -29,5 +23,5 @@ ```sh
 <!-- Development build (with warnings)  -->
-<script src="https://unpkg.com/react-fela@3.0.1/dist/react-fela.js"></script>
+<script src="https://unpkg.com/react-fela@3.0.6/dist/react-fela.js"></script>
 <!-- Production build (minified)  -->
-<script src="https://unpkg.com/react-fela@3.0.1/dist/react-fela.min.js"></script>
+<script src="https://unpkg.com/react-fela@3.0.6/dist/react-fela.min.js"></script>
 ```
@@ -44,5 +38,6 @@
 
+
 ## License
 Fela is licensed under the [MIT License](http://opensource.org/licenses/MIT).<br>
 Documentation is licensed under [Creative Common License](http://creativecommons.org/licenses/by/4.0/).<br>
-Created with ♥ by [@rofrischmann](http://rofrischmann.de).
+Created with ♥ by [@rofrischmann](http://rofrischmann.de) and all the great contributors.

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

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

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

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

Native code

Supply chain risk

Contains native code (e.g., compiled binaries or shared libraries). Including native code can obscure malicious behavior.

Found 1 instance in 1 package

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

31511

increased by8.38%

Dev dependency count

0

decreased by-100%

Worsened metrics

Number of package files

7

decreased by-46.15%

Lines of code

264

decreased by-9.9%

Number of lines in readme file

41

decreased by-10.87%

No dependency changes