fela - npm Package Compare versions

Comparing version 1.0.0-alpha.4 to 1.0.0-alpha.5

dist/fela.js

@@ -8,2 +8,7 @@ (function (global, factory) {
   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 ? "symbol" : typeof obj;
+  };
 
@@ -34,2 +39,16 @@ babelHelpers.classCallCheck = function (instance, Constructor) {
 
+  babelHelpers.extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
   babelHelpers;
@@ -42,22 +61,15 @@
      * @param {Function} composer - values to resolve dynamic styles
-     * @param {Object} mediaCompose - set of additional media composer
      */
 
     function Selector(composer) {
-      var mediaComposer = arguments.length <= 1 || arguments[1] === undefined ? {} : arguments[1];
       babelHelpers.classCallCheck(this, Selector);
 
       this.composer = composer;
-      this.mediaComposer = mediaComposer;
-      // safe media strings to iterate later on
-      this.mediaStrings = Object.keys(mediaComposer);
     }
 
     /**
-     * renders the styles with given set of props
-     * and pipes those styles through a set of plugins
+     * resolves the styles with given set of props
      *
      * @param {Object?} props - values to resolve dynamic styles
-     * @param {Function[]?} plugins - array of plugins to process styles
-     * @return {Object} rendered selector including classNames, styles and media styles
+     * @return {Object} rendered styles
      */
@@ -69,85 +81,6 @@
       value: function render() {
-        var _this = this;
-
         var props = arguments.length <= 0 || arguments[0] === undefined ? {} : arguments[0];
-        var plugins = arguments.length <= 1 || arguments[1] === undefined ? [] : arguments[1];
 
-        // renders styles by resolving and processing them
-        var styles = this._resolve(props, plugins);
-        var mediaStyles = this.mediaStrings.reduce(function (output, media) {
-          output.set(media, _this._resolve(props, plugins, media));
-          return output;
-        }, new Map());
-
-        return { mediaStyles: mediaStyles, styles: styles };
+        return this.composer(props);
       }
-
-      /**
-       * executes each plugin using a predefined plugin interface
-       *
-       * @param {Object} pluginInterface - interface containing relevant processing data
-       * @return {Object} processed and validated styles
-       */
-
-    }, {
-      key: "_process",
-      value: function _process(pluginInterface) {
-        var plugins = pluginInterface.plugins;
-        var styles = pluginInterface.styles;
-
-        // pipes each plugin by passes the plugin interface
-        // NOTE: as the styles are passed directly they're editable
-        // therefore the plugin order might matter
-
-        plugins.forEach(function (plugin) {
-          return plugin(pluginInterface);
-        });
-
-        return styles;
-      }
-
-      /**
-       * resolves and processes styles
-       *
-       * @param {Object} props - values to resolve dynamic styles
-       * @param {Function[]} plugins - array of plugins to process styles
-       * @param {string?} media - media string referencing media styles
-       * @return {Object} processed and resolved styles
-       */
-
-    }, {
-      key: "_resolve",
-      value: function _resolve(props, plugins, media) {
-        var composer = this._getComposer(media);
-        var styles = composer(props);
-
-        var pluginInterface = {
-          plugins: plugins,
-          processStyles: this._process,
-          styles: styles,
-          media: media,
-          props: props
-        };
-
-        return this._process(pluginInterface);
-      }
-
-      /**
-       * evaluates the expected composer for style resolving
-       *
-       * @param {string?} media - media string referencing a media composer
-       * @return {Function} expected style composer
-       */
-
-    }, {
-      key: "_getComposer",
-      value: function _getComposer(media) {
-        // if a composer with the given media
-        // string exists use it
-        if (this.mediaComposer[media]) {
-          return this.mediaComposer[media];
-        }
-        // use the basic composer by default
-        return this.composer;
-      }
     }]);
@@ -158,20 +91,20 @@ return Selector;
   /**
-   * Enhances a Selector to automatically render with a set of plugins
-   * @param {Selector} selector - selector that gets enhanced
+   * Enhances a Renderer to automatically render with a set of plugins
+   * @param {FelaRenderer} renderer - renderer that gets enhanced
    * @param {function[]} plugins - array of plugin functions
-   * @return enhanced selector
+   * @return enhanced renderer
    */
-  function enhanceWithPlugins(selector, plugins) {
+  function enhanceWithPlugins(renderer, plugins) {
     // cache the initial render function to later refer to
     // it would else get overwritten directly
-    var existingRenderFunction = selector.render.bind(selector);
-    selector.render = function (props) {
-      var additionalPlugins = arguments.length <= 1 || arguments[1] === undefined ? [] : arguments[1];
+    var existingRenderFunction = renderer.render.bind(renderer);
+    renderer.render = function (selector, props) {
+      var additionalPlugins = arguments.length <= 2 || arguments[2] === undefined ? [] : arguments[2];
 
       // concat enhancing plugins with additional plugins to allow multiple
       // enhancing cycles without loosing the ability to render with additional plugins
-      return existingRenderFunction(props, plugins.concat(additionalPlugins));
+      return existingRenderFunction(selector, props, plugins.concat(additionalPlugins));
     };
 
-    return selector;
+    return renderer;
   }
@@ -178,0 +111,0 @@

dist/fela.min.js

@@ -1,1 +0,1 @@
-!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n():"function"==typeof define&&define.amd?define(n):e.Fela=n()}(this,function(){"use strict";function e(e,n){var t=e.render.bind(e);return e.render=function(e){var r=arguments.length<=1||void 0===arguments[1]?[]:arguments[1];return t(e,n.concat(r))},e}var n={};n.classCallCheck=function(e,n){if(!(e instanceof n))throw new TypeError("Cannot call a class as a function")},n.createClass=function(){function e(e,n){for(var t=0;t<n.length;t++){var r=n[t];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(n,t,r){return t&&e(n.prototype,t),r&&e(n,r),n}}();var t=function(){function e(t){var r=arguments.length<=1||void 0===arguments[1]?{}:arguments[1];n.classCallCheck(this,e),this.composer=t,this.mediaComposer=r,this.mediaStrings=Object.keys(r)}return n.createClass(e,[{key:"render",value:function(){var e=this,n=arguments.length<=0||void 0===arguments[0]?{}:arguments[0],t=arguments.length<=1||void 0===arguments[1]?[]:arguments[1],r=this._resolve(n,t),o=this.mediaStrings.reduce(function(r,o){return r.set(o,e._resolve(n,t,o)),r},new Map);return{mediaStyles:o,styles:r}}},{key:"_process",value:function(e){var n=e.plugins,t=e.styles;return n.forEach(function(n){return n(e)}),t}},{key:"_resolve",value:function(e,n,t){var r=this._getComposer(t),o=r(e),s={plugins:n,processStyles:this._process,styles:o,media:t,props:e};return this._process(s)}},{key:"_getComposer",value:function(e){return this.mediaComposer[e]?this.mediaComposer[e]:this.composer}}]),e}(),r={Selector:t,enhanceWithPlugins:e};return r});
+!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n():"function"==typeof define&&define.amd?define(n):e.Fela=n()}(this,function(){"use strict";function e(e,n){var t=e.render.bind(e);return e.render=function(e,r){var o=arguments.length<=2||void 0===arguments[2]?[]:arguments[2];return t(e,r,n.concat(o))},e}var n={};n["typeof"]="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol?"symbol":typeof e},n.classCallCheck=function(e,n){if(!(e instanceof n))throw new TypeError("Cannot call a class as a function")},n.createClass=function(){function e(e,n){for(var t=0;t<n.length;t++){var r=n[t];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(n,t,r){return t&&e(n.prototype,t),r&&e(n,r),n}}(),n["extends"]=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e};var t=function(){function e(t){n.classCallCheck(this,e),this.composer=t}return n.createClass(e,[{key:"render",value:function(){var e=arguments.length<=0||void 0===arguments[0]?{}:arguments[0];return this.composer(e)}}]),e}(),r={Selector:t,enhanceWithPlugins:e};return r});

lib/fela.js

@@ -7,3 +7,3 @@ 'use strict';
 
-var _Selector = require('./components/Selector');
+var _Selector = require('./components/shared/Selector');
 
@@ -10,0 +10,0 @@ var _Selector2 = _interopRequireDefault(_Selector);

lib/felaDOM.js

@@ -11,5 +11,9 @@ 'use strict';
 
+var _MediaSelector = require('./components/dom/MediaSelector');
+
+var _MediaSelector2 = _interopRequireDefault(_MediaSelector);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-exports.default = { Renderer: _DOMRenderer2.default };
+exports.default = { Renderer: _DOMRenderer2.default, MediaSelector: _MediaSelector2.default };
 module.exports = exports['default'];

lib/helpers/enhanceWithPlugins.js

@@ -8,21 +8,21 @@ "use strict";
 /**
- * Enhances a Selector to automatically render with a set of plugins
- * @param {Selector} selector - selector that gets enhanced
+ * Enhances a Renderer to automatically render with a set of plugins
+ * @param {FelaRenderer} renderer - renderer that gets enhanced
  * @param {function[]} plugins - array of plugin functions
- * @return enhanced selector
+ * @return enhanced renderer
  */
-function enhanceWithPlugins(selector, plugins) {
+function enhanceWithPlugins(renderer, plugins) {
   // cache the initial render function to later refer to
   // it would else get overwritten directly
-  var existingRenderFunction = selector.render.bind(selector);
-  selector.render = function (props) {
-    var additionalPlugins = arguments.length <= 1 || arguments[1] === undefined ? [] : arguments[1];
+  var existingRenderFunction = renderer.render.bind(renderer);
+  renderer.render = function (selector, props) {
+    var additionalPlugins = arguments.length <= 2 || arguments[2] === undefined ? [] : arguments[2];
 
     // concat enhancing plugins with additional plugins to allow multiple
     // enhancing cycles without loosing the ability to render with additional plugins
-    return existingRenderFunction(props, plugins.concat(additionalPlugins));
+    return existingRenderFunction(selector, props, plugins.concat(additionalPlugins));
   };
 
-  return selector;
+  return renderer;
 }
 module.exports = exports['default'];

lib/plugins/customProperty.js

@@ -1,1 +0,33 @@
-"use strict";
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+exports.default = customProperty;
+function customProperty(properties) {
+  return function (pluginInterface) {
+    var styles = pluginInterface.styles;
+    var processStyles = pluginInterface.processStyles;
+
+
+    Object.keys(styles).forEach(function (property) {
+      var value = styles[property];
+      if (properties[property]) {
+        Object.assign(styles, properties[property](value));
+        delete styles[property];
+      }
+
+      if (value instanceof Object && !Array.isArray(value)) {
+        styles[property] = processStyles(_extends({}, pluginInterface, {
+          styles: value
+        }));
+      }
+    });
+
+    return styles;
+  };
+}
+module.exports = exports['default'];

lib/plugins/friendlyPseudoClass.js

@@ -1,1 +0,37 @@
-"use strict";
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+exports.default = friendlyPseudoClass;
+function friendlyPseudoClass() {
+  return function (pluginInterface) {
+    var styles = pluginInterface.styles;
+    var processStyles = pluginInterface.processStyles;
+
+
+    Object.keys(styles).forEach(function (property) {
+      var value = styles[property];
+      if (value instanceof Object && !Array.isArray(value)) {
+        var regex = new RegExp('^on([A-Z])');
+        if (regex.test(property)) {
+          var pseudo = property.replace(regex, function (match, p1) {
+            return ':' + p1.toLowerCase();
+          });
+
+          styles[pseudo] = processStyles(_extends({}, pluginInterface, {
+            styles: value
+          }));
+
+          delete styles[property];
+        }
+      }
+    });
+
+    return styles;
+  };
+}
+module.exports = exports['default'];

lib/renderers/dom/StyleSheet.js

@@ -121,3 +121,3 @@ 'use strict';
      *
-     * @param {Selector} selector - Selector which gets rendered
+     * @param {Selector|Function} selector - Selector which gets rendered
      * @param {Object?} props - properties used to render
@@ -130,5 +130,11 @@ * @param {Function[]?} plugins - array of plugins to process styles
     key: '_renderSelectorVariation',
-    value: function _renderSelectorVariation(selector, props, plugins) {
+    value: function _renderSelectorVariation(selector) {
       var _this3 = this;
 
+      var props = arguments.length <= 1 || arguments[1] === undefined ? {} : arguments[1];
+      var plugins = arguments.length <= 2 || arguments[2] === undefined ? [] : arguments[2];
+
+      var isFunctionalSelector = selector instanceof Function;
+      var isMediaSelector = !isFunctionalSelector && selector.renderMedia instanceof Function;
+
       // rendering a Selector for the first time
@@ -139,10 +145,13 @@ // will create cache entries and an ID reference
         this.cache.set(selector, new Map());
+
         // iterate all used media strings to create
         // selector caches for each media as well
-        selector.mediaStrings.forEach(function (media) {
-          if (!_this3.mediaCache.has(media)) {
-            _this3.mediaCache.set(media, new Map());
-          }
-          _this3.mediaCache.get(media).set(selector, new Map());
-        });
+        if (isMediaSelector) {
+          selector.mediaStrings.forEach(function (media) {
+            if (!_this3.mediaCache.has(media)) {
+              _this3.mediaCache.set(media, new Map());
+            }
+            _this3.mediaCache.get(media).set(selector, new Map());
+          });
+        }
       }
@@ -153,26 +162,64 @@
 
+      // uses the reference ID and the props to generate an unique className
+      var className = this._renderClassName(this.ids.get(selector), propsReference);
+
       // only if the cached selector has not already been rendered
       // with a specific set of properties it actually renders
       if (!cachedSelector.has(propsReference)) {
-        var _selector$render = selector.render(props, plugins);
+        (function () {
+          // get the render method of either class-like selectors
+          // or pure functional selectors without a constructor
+          var pluginInterface = {
+            plugins: plugins,
+            processStyles: _this3._processStyles,
+            styles: isFunctionalSelector ? selector(props) : selector.render(props),
+            className: className,
+            props: props
+          };
 
-        var styles = _selector$render.styles;
-        var mediaStyles = _selector$render.mediaStyles;
+          cachedSelector.set(propsReference, _this3._processStyles(pluginInterface));
 
-        // cache the rendered output for future usage
+          if (isMediaSelector) {
+            selector.mediaStrings.forEach(function (media) {
+              pluginInterface.styles = selector.renderMedia(props, media);
+              pluginInterface.media = media;
 
-        cachedSelector.set(propsReference, styles);
-        mediaStyles.forEach(function (styles, media) {
-          _this3.mediaCache.get(media).get(selector).set(propsReference, styles);
-        });
+              var processedStyles = _this3._processStyles(pluginInterface);
+              _this3.mediaCache.get(media).get(selector).set(propsReference, processedStyles);
+            });
+          }
 
-        // emit changes as the styles stack changed
-        this._emitChange();
+          // emit changes as the styles stack changed
+          _this3._emitChange();
+        })();
       }
 
-      // uses the reference ID and the props to generate an unique className
-      return this._renderClassName(this.ids.get(selector), propsReference);
+      return className;
     }
 
     /**
+     * executes each plugin using a predefined plugin interface
+     *
+     * @param {Object} pluginInterface - interface containing relevant processing data
+     * @return {Object} processed and validated styles
+     */
+
+  }, {
+    key: '_processStyles',
+    value: function _processStyles(pluginInterface) {
+      var plugins = pluginInterface.plugins;
+      var styles = pluginInterface.styles;
+
+      // pipes each plugin by passes the plugin interface
+      // NOTE: as the styles are passed directly they're editable
+      // therefore the plugin order might matter
+
+      plugins.forEach(function (plugin) {
+        return plugin(pluginInterface);
+      });
+
+      return styles;
+    }
+
+    /**
      * generates an unique reference id by content hashing props
@@ -204,3 +251,25 @@ *
     }
+  }, {
+    key: '_splitPseudoClasses',
+    value: function _splitPseudoClasses(styles) {
+      var _this4 = this;
 
+      var pseudo = arguments.length <= 1 || arguments[1] === undefined ? '' : arguments[1];
+      var out = arguments.length <= 2 || arguments[2] === undefined ? {} : arguments[2];
+
+      Object.keys(styles).forEach(function (property) {
+        var value = styles[property];
+        if (value instanceof Object) {
+          _this4._splitPseudoClasses(value, pseudo + property, out);
+        } else {
+          if (!out[pseudo]) {
+            out[pseudo] = {};
+          }
+          out[pseudo][property] = value;
+        }
+      });
+
+      return out;
+    }
+
     /**
@@ -245,3 +314,3 @@ * renders a single ruleset into a CSS string
     value: function _renderCache(cache) {
-      var _this4 = this;
+      var _this5 = this;
 
@@ -251,7 +320,11 @@ var css = '';
       cache.forEach(function (variation, selector) {
-        var id = _this4.ids.get(selector);
+        var id = _this5.ids.get(selector);
 
         variation.forEach(function (styles, propsReference) {
-          var className = _this4._renderClassName(id, propsReference);
-          css += _this4._renderSelector(className, styles);
+          var className = _this5._renderClassName(id, propsReference);
+          var splitPseudos = _this5._splitPseudoClasses(styles);
+
+          Object.keys(splitPseudos).forEach(function (pseudo) {
+            css += _this5._renderSelector(className + pseudo, splitPseudos[pseudo]);
+          });
         });
@@ -258,0 +331,0 @@ });

package.json

 {
     "name": "fela",
-    "version": "1.0.0-alpha.4",
+    "version": "1.0.0-alpha.5",
     "description": "Fast, tiny & dynamic low-level API to handle Styling in JavaScript",
@@ -5,0 +5,0 @@ "main": "lib/fela.js",

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

43834

increased by5.01%

Number of package files

25

increased by4.17%

Lines of code

898

increased by10.32%

No dependency changes