stylefire - npm Package Compare versions

Comparing version 2.0.7 to 2.1.0

CHANGELOG.md

@@ -5,2 +5,8 @@ # Changelog
 
+## [2.0.7] 2018-08-10
+
+### Fixed
+
+- Adding value type for `skew`.
+
 ## [2.0.4] 2018-08-30
@@ -7,0 +13,0 @@

dist/stylefire.es.js

@@ -1,2 +0,2 @@
-import { onFrameRender } from 'framesync';
+import sync from 'framesync';
 import { alpha, color, degrees, scale, px, percent } from 'style-value-types';
@@ -27,3 +27,3 @@ import { __assign } from 'tslib';
                     hasChanged = true;
-                    onFrameRender(render);
+                    sync.render(render);
                 }
@@ -36,3 +36,3 @@ }
             }
-            if (forceRender || hasChanged) {
+            if (forceRender === true || hasChanged) {
                 onRender(state, props, changedValues);
@@ -164,2 +164,3 @@ hasChanged = false;
     scaleZ: scale,
+    skew: degrees,
     skewX: degrees,
@@ -166,0 +167,0 @@ skewY: degrees,

dist/stylefire.js

@@ -33,73 +33,143 @@ (function (global, factory) {
 
-    var hasRAF = typeof window !== 'undefined' && window.requestAnimationFrame !== undefined;
+    var HEY_LISTEN = 'Hey, listen! ';
+    var invariant = function () { };
+    if (process.env.NODE_ENV !== 'production') {
+        invariant = function (check, message) {
+            if (!check) {
+                throw new Error(HEY_LISTEN.toUpperCase() + message);
+            }
+        };
+    }
+
     var prevTime = 0;
-    var onNextFrame = hasRAF
+    var onNextFrame = typeof window !== 'undefined' && window.requestAnimationFrame !== undefined
         ? function (callback) { return window.requestAnimationFrame(callback); }
         : function (callback) {
-            var currentTime = Date.now();
-            var timeToCall = Math.max(0, 16.7 - (currentTime - prevTime));
-            prevTime = currentTime + timeToCall;
+            var timestamp = Date.now();
+            var timeToCall = Math.max(0, 16.7 - (timestamp - prevTime));
+            prevTime = timestamp + timeToCall;
             setTimeout(function () { return callback(prevTime); }, timeToCall);
         };
 
-    function createRenderStep(startRenderLoop) {
-        var functionsToRun = [];
-        var functionsToRunNextFrame = [];
+    var createStep = (function (setRunNextFrame) {
+        var processToRun = [];
+        var processToRunNextFrame = [];
         var numThisFrame = 0;
         var isProcessing = false;
         var i = 0;
-        return {
-            cancel: function (callback) {
-                var indexOfCallback = functionsToRunNextFrame.indexOf(callback);
+        var cancelled = new WeakSet();
+        var toKeepAlive = new WeakSet();
+        var renderStep = {
+            cancel: function (process) {
+                var indexOfCallback = processToRunNextFrame.indexOf(process);
+                cancelled.add(process);
                 if (indexOfCallback !== -1) {
-                    functionsToRunNextFrame.splice(indexOfCallback, 1);
+                    processToRunNextFrame.splice(indexOfCallback, 1);
                 }
             },
-            process: function () {
+            process: function (frame) {
+                var _a;
                 isProcessing = true;
-                _a = [functionsToRunNextFrame, functionsToRun], functionsToRun = _a[0], functionsToRunNextFrame = _a[1];
-                functionsToRunNextFrame.length = 0;
-                numThisFrame = functionsToRun.length;
-                for (i = 0; i < numThisFrame; i++) {
-                    functionsToRun[i]();
+                _a = [
+                    processToRunNextFrame,
+                    processToRun
+                ], processToRun = _a[0], processToRunNextFrame = _a[1];
+                processToRunNextFrame.length = 0;
+                numThisFrame = processToRun.length;
+                if (numThisFrame) {
+                    var process_1;
+                    for (i = 0; i < numThisFrame; i++) {
+                        process_1 = processToRun[i];
+                        process_1(frame);
+                        if (toKeepAlive.has(process_1) === true && !cancelled.has(process_1)) {
+                            renderStep.schedule(process_1);
+                            setRunNextFrame(true);
+                        }
+                    }
                 }
                 isProcessing = false;
-                var _a;
             },
-            schedule: function (callback, immediate) {
-                if (immediate === void 0) { immediate = false; }
-                startRenderLoop();
+            schedule: function (process, keepAlive, immediate) {
+                invariant(typeof process === 'function', 'Argument must be a function');
                 var addToCurrentBuffer = immediate && isProcessing;
-                var buffer = addToCurrentBuffer ? functionsToRun : functionsToRunNextFrame;
-                if (buffer.indexOf(callback) === -1) {
-                    buffer.push(callback);
-                    if (addToCurrentBuffer) {
-                        numThisFrame = functionsToRun.length;
-                    }
+                var buffer = addToCurrentBuffer ? processToRun : processToRunNextFrame;
+                if (keepAlive)
+                    toKeepAlive.add(process);
+                if (buffer.indexOf(process) === -1) {
+                    buffer.push(process);
+                    if (addToCurrentBuffer)
+                        numThisFrame = processToRun.length;
                 }
-            },
+            }
         };
-    }
+        return renderStep;
+    });
 
-    var HAS_PERFORMANCE_NOW = typeof performance !== 'undefined' && performance.now !== undefined;
-    var willRenderNextFrame = false;
-    function startRenderLoop() {
-        if (willRenderNextFrame)
-            return;
-        willRenderNextFrame = true;
-        onNextFrame(processFrame);
-    }
-    var frameStart = createRenderStep(startRenderLoop);
-    var frameUpdate = createRenderStep(startRenderLoop);
-    var frameRender = createRenderStep(startRenderLoop);
-    var frameEnd = createRenderStep(startRenderLoop);
-    function processFrame(framestamp) {
-        willRenderNextFrame = false;
-        frameStart.process();
-        frameUpdate.process();
-        frameRender.process();
-        frameEnd.process();
-    }
-    var onFrameRender = frameRender.schedule;
+    var StepId;
+    (function (StepId) {
+        StepId["Read"] = "read";
+        StepId["Update"] = "update";
+        StepId["Render"] = "render";
+        StepId["PostRender"] = "postRender";
+        StepId["FixedUpdate"] = "fixedUpdate";
+    })(StepId || (StepId = {}));
 
+    var maxElapsed = 40;
+    var defaultElapsed = (1 / 60) * 1000;
+    var useDefaultElapsed = true;
+    var willRunNextFrame = false;
+    var isProcessing = false;
+    var frame = {
+        delta: 0,
+        timestamp: 0
+    };
+    var stepsOrder = [
+        StepId.Read,
+        StepId.Update,
+        StepId.Render,
+        StepId.PostRender
+    ];
+    var setWillRunNextFrame = function (willRun) { return (willRunNextFrame = willRun); };
+    var _a = stepsOrder.reduce(function (acc, key) {
+        var step = createStep(setWillRunNextFrame);
+        acc.sync[key] = function (process, keepAlive, immediate) {
+            if (keepAlive === void 0) { keepAlive = false; }
+            if (immediate === void 0) { immediate = false; }
+            if (!willRunNextFrame)
+                startLoop();
+            step.schedule(process, keepAlive, immediate);
+            return process;
+        };
+        acc.cancelSync[key] = function (process) { return step.cancel(process); };
+        acc.steps[key] = step;
+        return acc;
+    }, {
+        steps: {},
+        sync: {},
+        cancelSync: {}
+    }), steps = _a.steps, sync = _a.sync, cancelSync = _a.cancelSync;
+    var processStep = function (stepId) { return steps[stepId].process(frame); };
+    var processFrame = function (timestamp) {
+        willRunNextFrame = false;
+        frame.delta = useDefaultElapsed
+            ? defaultElapsed
+            : Math.max(Math.min(timestamp - frame.timestamp, maxElapsed), 1);
+        if (!useDefaultElapsed)
+            defaultElapsed = frame.delta;
+        frame.timestamp = timestamp;
+        isProcessing = true;
+        stepsOrder.forEach(processStep);
+        isProcessing = false;
+        if (willRunNextFrame) {
+            useDefaultElapsed = false;
+            onNextFrame(processFrame);
+        }
+    };
+    var startLoop = function () {
+        willRunNextFrame = true;
+        useDefaultElapsed = true;
+        if (!isProcessing)
+            onNextFrame(processFrame);
+    };
+
     var createStyler = function (_a) {
@@ -121,3 +191,3 @@ var onRead = _a.onRead, onRender = _a.onRender, _b = _a.aliasMap, aliasMap = _b === void 0 ? {} : _b, _c = _a.useCache, useCache = _c === void 0 ? true : _c;
                         hasChanged = true;
-                        onFrameRender(render);
+                        sync.render(render);
                     }
@@ -128,3 +198,3 @@ }
                 if (forceRender === void 0) { forceRender = false; }
-                if (forceRender || hasChanged) {
+                if (forceRender === true || hasChanged) {
                     onRender(state, props, changedValues);
@@ -139,4 +209,4 @@ hasChanged = false;
                     var key = aliasMap[unmappedKey] || unmappedKey;
-                    return (key)
-                        ? (useCache && state[key] !== undefined)
+                    return key
+                        ? useCache && state[key] !== undefined
                             ? state[key]
@@ -164,3 +234,3 @@ : onRead(key, props)
                 },
-                render: render,
+                render: render
             };
@@ -255,5 +325,2 @@ };
     }; };
-    var contains = function (term) { return function (v) {
-        return typeof v === 'string' && v.indexOf(term) !== -1;
-    }; };
     var isFirstChars = function (term) { return function (v) {
@@ -278,12 +345,9 @@ return typeof v === 'string' && v.indexOf(term) === 0;
 
-    var createUnitType = function (unit) {
-        var containsUnit = contains(unit);
-        return {
-            test: function (v) {
-                return typeof v === 'string' && containsUnit(v) && v.split(' ').length === 1;
-            },
-            parse: parseFloat,
-            transform: function (v) { return "" + v + unit; }
-        };
-    };
+    var createUnitType = function (unit) { return ({
+        test: function (v) {
+            return typeof v === 'string' && v.endsWith(unit) && v.split(' ').length === 1;
+        },
+        parse: parseFloat,
+        transform: function (v) { return "" + v + unit; }
+    }); };
     var degrees = createUnitType('deg');
@@ -430,2 +494,3 @@ var percent = createUnitType('%');
         scaleZ: scale,
+        skew: degrees,
         skewX: degrees,
@@ -688,12 +753,2 @@ skewY: degrees,
 
-    var HEY_LISTEN = 'Hey, listen! ';
-    var invariant = function () { };
-    if (process.env.NODE_ENV !== 'production') {
-        invariant = function (check, message) {
-            if (!check) {
-                throw new Error(HEY_LISTEN.toUpperCase() + message);
-            }
-        };
-    }
-
     var cache = new WeakMap();
@@ -700,0 +755,0 @@ var createDOMStyler = function (node, props) {

dist/stylefire.min.js

@@ -1,1 +0,1 @@
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e(t.stylefire={})}(this,function(t){"use strict";var e=function(){return(e=Object.assign||function(t){for(var e,r=1,n=arguments.length;r<n;r++)for(var o in e=arguments[r])Object.prototype.hasOwnProperty.call(e,o)&&(t[o]=e[o]);return t}).apply(this,arguments)},r=0,n="undefined"!=typeof window&&void 0!==window.requestAnimationFrame?function(t){return window.requestAnimationFrame(t)}:function(t){var e=Date.now(),n=Math.max(0,16.7-(e-r));r=e+n,setTimeout(function(){return t(r)},n)};function o(t){var e=[],r=[],n=0,o=!1,a=0;return{cancel:function(t){var e=r.indexOf(t);-1!==e&&r.splice(e,1)},process:function(){for(o=!0,e=(t=[r,e])[0],(r=t[1]).length=0,n=e.length,a=0;a<n;a++)e[a]();var t;o=!1},schedule:function(a,i){void 0===i&&(i=!1),t();var s=i&&o,u=s?e:r;-1===u.indexOf(a)&&(u.push(a),s&&(n=e.length))}}}"undefined"!=typeof performance&&performance.now;var a=!1;function i(){a||(a=!0,n(l))}var s=o(i),u=o(i),f=o(i),c=o(i);function l(t){a=!1,s.process(),u.process(),f.process(),c.process()}var p,d=f.schedule,h=function(t){var e=t.onRead,r=t.onRender,n=t.aliasMap,o=void 0===n?{}:n,a=t.useCache,i=void 0===a||a;return function(t){var n={},a=[],s=!1,u=function(t,e){var r=o[t]||t,i=n[r];n[r]=e,n[r]!==i&&(-1===a.indexOf(r)&&a.push(r),s||(s=!0,d(f)))};function f(e){return void 0===e&&(e=!1),(e||s)&&(r(n,t,a),s=!1,a.length=0),this}return{get:function(r){var a=o[r]||r;return a?i&&void 0!==n[a]?n[a]:e(a,t):n},set:function(t,e){if("string"==typeof t){if(void 0===e)return function(e){return u(t,e)};u(t,e)}else for(var r in t)t.hasOwnProperty(r)&&u(r,t[r]);return this},render:f}}},g=/([a-z])([A-Z])/g,v=function(t){return t.replace(g,"$1-$2").toLowerCase()},m=new Map,y=new Map,w=["Webkit","Moz","O","ms",""],b=w.length,O=function(t,e){void 0===e&&(e=!1);var r=e?y:m;return r.has(t)||function(t){if("undefined"!=typeof document){p=p||document.createElement("div");for(var e=0;e<b;e++){var r=w[e],n=""===r,o=n?t:r+t.charAt(0).toUpperCase()+t.slice(1);o in p.style&&(m.set(t,o),y.set(t,(n?"":"-")+v(o)))}}}(t),r.get(t)||t},x=["","X","Y","Z"],Y=["translate","scale","rotate","skew","transformPerspective"].reduce(function(t,e){return x.reduce(function(t,r){return t.push(e+r),t},t)},["x","y","z"]),k=Y.reduce(function(t,e){return t[e]=!0,t},{}),X=function(t){return!0===k[t]},L=function(t,e){return Y.indexOf(t)-Y.indexOf(e)},M=function(t){return"transformOriginX"===t||"transformOriginY"===t},C=function(){return(C=Object.assign||function(t){for(var e,r=1,n=arguments.length;r<n;r++)for(var o in e=arguments[r])Object.prototype.hasOwnProperty.call(e,o)&&(t[o]=e[o]);return t}).apply(this,arguments)},T=function(t,e){return function(r){return Math.max(Math.min(r,e),t)}},P=function(t){return function(e){return"string"==typeof e&&0===e.indexOf(t)}},Z=function(t){return t%1?Number(t.toFixed(5)):t},R={test:function(t){return"number"==typeof t},parse:parseFloat,transform:function(t){return t}},S=C({},R,{transform:T(0,1)}),j=C({},R,{default:1}),A=function(t){var e,r=(e=t,function(t){return"string"==typeof t&&-1!==t.indexOf(e)});return{test:function(t){return"string"==typeof t&&r(t)&&1===t.split(" ").length},parse:parseFloat,transform:function(e){return""+e+t}}},E=A("deg"),F=A("%"),H=A("px"),N=T(0,255),V=/^(#[0-9a-f]{3}|#(?:[0-9a-f]{2}){2,4}|(rgb|hsl)a?\((-?\d+%?[,\s]+){2,3}\s*[\d\.]+%?\))$/i,z=function(t){return void 0!==t.red},I=function(t){return void 0!==t.hue},q=function(t){var e=t.length;return function(r){if("string"!=typeof r)return r;for(var n,o={},a=function(t){return"string"==typeof t?t.split(/,\s*/):[t]}((n=r).substring(n.indexOf("(")+1,n.lastIndexOf(")"))),i=0;i<e;i++)o[t[i]]=void 0!==a[i]?parseFloat(a[i]):1;return o}},B=C({},R,{transform:function(t){return Math.round(N(t))}}),W=P("rgb"),$={test:function(t){return"string"==typeof t?W(t):z(t)},parse:q(["red","green","blue","alpha"]),transform:function(t){var e=t.red,r=t.green,n=t.blue,o=t.alpha;return function(t){var e=t.red,r=t.green,n=t.blue,o=t.alpha;return"rgba("+e+", "+r+", "+n+", "+(void 0===o?1:o)+")"}({red:B.transform(e),green:B.transform(r),blue:B.transform(n),alpha:Z(o)})}},_=P("hsl"),D={test:function(t){return"string"==typeof t?_(t):I(t)},parse:q(["hue","saturation","lightness","alpha"]),transform:function(t){var e=t.hue,r=t.saturation,n=t.lightness,o=t.alpha;return function(t){var e=t.hue,r=t.saturation,n=t.lightness,o=t.alpha;return"hsla("+e+", "+r+", "+n+", "+(void 0===o?1:o)+")"}({hue:Math.round(e),saturation:F.transform(Z(r)),lightness:F.transform(Z(n)),alpha:Z(o)})}},G=C({},$,{test:P("#"),parse:function(t){var e="",r="",n="";return t.length>4?(e=t.substr(1,2),r=t.substr(3,2),n=t.substr(5,2)):(e=t.substr(1,1),r=t.substr(2,1),n=t.substr(3,1),e+=e,r+=r,n+=n),{red:parseInt(e,16),green:parseInt(r,16),blue:parseInt(n,16),alpha:1}}}),U={test:function(t){return"string"==typeof t&&V.test(t)||$.test(t)||D.test(t)||G.test(t)},parse:function(t){return $.test(t)?$.parse(t):D.test(t)?D.parse(t):G.test(t)?G.parse(t):t},transform:function(t){return z(t)?$.transform(t):I(t)?D.transform(t):t}},J={color:U,backgroundColor:U,outlineColor:U,fill:U,stroke:U,borderColor:U,borderTopColor:U,borderRightColor:U,borderBottomColor:U,borderLeftColor:U,borderRadius:H,width:H,maxWidth:H,height:H,maxHeight:H,top:H,left:H,bottom:H,right:H,rotate:E,rotateX:E,rotateY:E,rotateZ:E,scale:j,scaleX:j,scaleY:j,scaleZ:j,skewX:E,skewY:E,distance:H,translateX:H,translateY:H,translateZ:H,perspective:H,opacity:S,transformOriginX:F,transformOriginY:F,transformOriginZ:H},K=function(t){return J[t]},Q="number",tt="object",et="transform-origin",rt="transform",nt="translateZ",ot=";transform: none",at=function(t,e){return";"+t+":"+e};function it(t,e,r,n){void 0===e&&(e=!0),void 0===r&&(r=!0);for(var o=!0===e?Object.keys(t):e,a="",i="",s=!1,u=!0,f=!1,c=!1,l=o.length,p=0;p<l;p++){var d=o[p];if(X(d)){for(var h in f=!0,t)X(h)&&-1===o.indexOf(h)&&o.push(h);break}}o.sort(L);var g=o.length;for(p=0;p<g;p++){d=o[p];if(!n.has(d)){var v=X(d),m=t[d],y=K(d);v&&(y.default&&m!==y.default||!y.default&&0!==m)&&(u=!1),y&&(typeof m===Q||typeof m===tt)&&y.transform&&(m=y.transform(m)),v?(i+=d+"("+m+") ",c=d===nt||c):M(d)?(t[d]=m,s=!0):a+=at(O(d,!0),m)}}return s&&(a+=at(et,(t.transformOriginX||0)+" "+(t.transformOriginY||0)+" "+(t.transformOriginZ||0))),f&&(!c&&r&&(i+=nt+"(0)"),a+=at(rt,u?ot:i)),a}var st=new Set(["scrollLeft","scrollTop"]),ut=h({onRead:function(t,e){var r=e.element,n=e.preparseOutput,o=K(t);if(X(t))return o&&o.default||0;if(st.has(t))return r[t];var a=window.getComputedStyle(r,null).getPropertyValue(O(t,!0))||0;return n&&o&&o.parse?o.parse(a):a},onRender:function(t,e,r){var n=e.element,o=e.enableHardwareAcceleration;n.style.cssText+=it(t,r,o,st),-1!==r.indexOf("scrollLeft")&&(n.scrollLeft=t.scrollLeft),-1!==r.indexOf("scrollTop")&&(n.scrollTop=t.scrollTop)},aliasMap:{x:"translateX",y:"translateY",z:"translateZ",originX:"transformOriginX",originY:"transformOriginY",originZ:"transformOriginZ"},uncachedValues:st}),ft=function(t,e){return t/100*e+"px"},ct={fill:U,stroke:U,scale:j,scaleX:j,scaleY:j,opacity:S,fillOpacity:S,strokeOpacity:S},lt=h({onRead:function(t,e){var r=e.element;if(X(t)){var n=function(t){return ct[t]}(t);return n?n.default:0}return r.getAttribute(t)},onRender:function(t,e,r){var n=e.dimensions;!function(t,e){for(var r in e)e.hasOwnProperty(r)&&t.setAttribute(r,e[r])}(e.element,function(t,e,r,n){var o=!1,a=!1,i={},s=r?{pathLength:"0",pathSpacing:""+n}:void 0,u=void 0!==t.scale?t.scale||1e-7:t.scaleX||1,f=void 0!==t.scaleY?t.scaleY||1e-7:u||1,c=e.width*((t.originX||50)/100)+e.x,l=e.height*((t.originY||50)/100)+e.y,p=1*u*-c,d=1*f*-l,h=c/u,g=l/f,m={translate:"translate("+t.translateX+", "+t.translateY+") ",scale:"translate("+p+", "+d+") scale("+u+", "+f+") translate("+h+", "+g+") ",rotate:"rotate("+t.rotate+", "+c+", "+l+") ",skewX:"skewX("+t.skewX+") ",skewY:"skewY("+t.skewY+") "};for(var y in t)if(t.hasOwnProperty(y)){var w=t[y];X(y)?o=!0:!r||"pathLength"!==y&&"pathSpacing"!==y||"number"!=typeof w?r&&"pathOffset"===y?i["stroke-dashoffset"]=ft(-w,n):i[v(y)]=w:(a=!0,s[y]=ft(w,n))}if(a&&(i["stroke-dasharray"]=s.pathLength+" "+s.pathSpacing),o)for(var y in i.transform="",m)if(m.hasOwnProperty(y)){var b="scale"===y?"1":"0";i.transform+=m[y].replace(/undefined/g,b)}return i}(t,n,e.isPath,e.pathLength))},aliasMap:{x:"translateX",y:"translateY",background:"fill"}}),pt=h({useCache:!1,onRead:function(t){return"scrollTop"===t?window.pageYOffset:window.pageXOffset},onRender:function(t){var e=t.scrollTop,r=void 0===e?0:e,n=t.scrollLeft,o=void 0===n?0:n;return window.scrollTo(o,r)}}),dt=function(){};"production"!==process.env.NODE_ENV&&(dt=function(t,e){if(!t)throw new Error("Hey, listen! ".toUpperCase()+e)});var ht=new WeakMap,gt=function(t,r){var n;return t instanceof HTMLElement?n=function(t,r){return ut(e({element:t,enableHardwareAcceleration:!0,preparseOutput:!0},r))}(t,r):t instanceof SVGElement?n=function(t){var e=t.getBBox(),r={element:t,dimensions:{x:e.x,y:e.y,width:e.width,height:e.height},isPath:!1};return"path"===t.tagName&&(r.isPath=!0,r.pathLength=t.getTotalLength()),lt(r)}(t):"undefined"!=typeof window&&t===window&&(n=pt(t)),dt(void 0!==n,"No valid node provided. Node must be HTMLElement, SVGElement or window."),ht.set(t,n),n},vt=function(t,e){return ht.has(t)?ht.get(t):gt(t,e)};t.default=function(t,e){var r="string"==typeof t?document.querySelector(t):t;return vt(r,e)},t.createStylerFactory=h,t.buildStyles=it,Object.defineProperty(t,"__esModule",{value:!0})});
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e(t.stylefire={})}(this,function(t){"use strict";var e=function(){return(e=Object.assign||function(t){for(var e,r=1,n=arguments.length;r<n;r++)for(var a in e=arguments[r])Object.prototype.hasOwnProperty.call(e,a)&&(t[a]=e[a]);return t}).apply(this,arguments)},r=function(){};"production"!==process.env.NODE_ENV&&(r=function(t,e){if(!t)throw new Error("Hey, listen! ".toUpperCase()+e)});var n,a=0,o="undefined"!=typeof window&&void 0!==window.requestAnimationFrame?function(t){return window.requestAnimationFrame(t)}:function(t){var e=Date.now(),r=Math.max(0,16.7-(e-a));a=e+r,setTimeout(function(){return t(a)},r)};!function(t){t.Read="read",t.Update="update",t.Render="render",t.PostRender="postRender",t.FixedUpdate="fixedUpdate"}(n||(n={}));var i,s=1/60*1e3,u=!0,f=!1,c=!1,l={delta:0,timestamp:0},d=[n.Read,n.Update,n.Render,n.PostRender],p=function(t){return f=t},h=d.reduce(function(t,e){var n,a,o,i,s,u,c,l,d,h=(n=p,a=[],o=[],i=0,s=!1,u=0,c=new WeakSet,l=new WeakSet,d={cancel:function(t){var e=o.indexOf(t);c.add(t),-1!==e&&o.splice(e,1)},process:function(t){var e,r;if(s=!0,a=(e=[o,a])[0],(o=e[1]).length=0,i=a.length)for(u=0;u<i;u++)(r=a[u])(t),!0!==l.has(r)||c.has(r)||(d.schedule(r),n(!0));s=!1},schedule:function(t,e,n){r("function"==typeof t,"Argument must be a function");var u=n&&s,f=u?a:o;e&&l.add(t),-1===f.indexOf(t)&&(f.push(t),u&&(i=a.length))}});return t.sync[e]=function(t,e,r){return void 0===e&&(e=!1),void 0===r&&(r=!1),f||w(),h.schedule(t,e,r),t},t.cancelSync[e]=function(t){return h.cancel(t)},t.steps[e]=h,t},{steps:{},sync:{},cancelSync:{}}),g=h.steps,m=h.sync,v=(h.cancelSync,function(t){return g[t].process(l)}),y=function(t){f=!1,l.delta=u?s:Math.max(Math.min(t-l.timestamp,40),1),u||(s=l.delta),l.timestamp=t,c=!0,d.forEach(v),c=!1,f&&(u=!1,o(y))},w=function(){f=!0,u=!0,c||o(y)},b=function(t){var e=t.onRead,r=t.onRender,n=t.aliasMap,a=void 0===n?{}:n,o=t.useCache,i=void 0===o||o;return function(t){var n={},o=[],s=!1,u=function(t,e){var r=a[t]||t,i=n[r];n[r]=e,n[r]!==i&&(-1===o.indexOf(r)&&o.push(r),s||(s=!0,m.render(f)))};function f(e){return void 0===e&&(e=!1),(!0===e||s)&&(r(n,t,o),s=!1,o.length=0),this}return{get:function(r){var o=a[r]||r;return o?i&&void 0!==n[o]?n[o]:e(o,t):n},set:function(t,e){if("string"==typeof t){if(void 0===e)return function(e){return u(t,e)};u(t,e)}else for(var r in t)t.hasOwnProperty(r)&&u(r,t[r]);return this},render:f}}},O=/([a-z])([A-Z])/g,x=function(t){return t.replace(O,"$1-$2").toLowerCase()},k=new Map,Y=new Map,X=["Webkit","Moz","O","ms",""],M=X.length,R=function(t,e){void 0===e&&(e=!1);var r=e?Y:k;return r.has(t)||function(t){if("undefined"!=typeof document){i=i||document.createElement("div");for(var e=0;e<M;e++){var r=X[e],n=""===r,a=n?t:r+t.charAt(0).toUpperCase()+t.slice(1);a in i.style&&(k.set(t,a),Y.set(t,(n?"":"-")+x(a)))}}}(t),r.get(t)||t},L=["","X","Y","Z"],S=["translate","scale","rotate","skew","transformPerspective"].reduce(function(t,e){return L.reduce(function(t,r){return t.push(e+r),t},t)},["x","y","z"]),P=S.reduce(function(t,e){return t[e]=!0,t},{}),C=function(t){return!0===P[t]},T=function(t,e){return S.indexOf(t)-S.indexOf(e)},Z=function(t){return"transformOriginX"===t||"transformOriginY"===t},A=function(){return(A=Object.assign||function(t){for(var e,r=1,n=arguments.length;r<n;r++)for(var a in e=arguments[r])Object.prototype.hasOwnProperty.call(e,a)&&(t[a]=e[a]);return t}).apply(this,arguments)},E=function(t,e){return function(r){return Math.max(Math.min(r,e),t)}},j=function(t){return function(e){return"string"==typeof e&&0===e.indexOf(t)}},F=function(t){return t%1?Number(t.toFixed(5)):t},H={test:function(t){return"number"==typeof t},parse:parseFloat,transform:function(t){return t}},N=A({},H,{transform:E(0,1)}),U=A({},H,{default:1}),W=function(t){return{test:function(e){return"string"==typeof e&&e.endsWith(t)&&1===e.split(" ").length},parse:parseFloat,transform:function(e){return""+e+t}}},V=W("deg"),z=W("%"),I=W("px"),q=E(0,255),B=/^(#[0-9a-f]{3}|#(?:[0-9a-f]{2}){2,4}|(rgb|hsl)a?\((-?\d+%?[,\s]+){2,3}\s*[\d\.]+%?\))$/i,$=function(t){return void 0!==t.red},_=function(t){return void 0!==t.hue},D=function(t){var e=t.length;return function(r){if("string"!=typeof r)return r;for(var n,a={},o=function(t){return"string"==typeof t?t.split(/,\s*/):[t]}((n=r).substring(n.indexOf("(")+1,n.lastIndexOf(")"))),i=0;i<e;i++)a[t[i]]=void 0!==o[i]?parseFloat(o[i]):1;return a}},G=A({},H,{transform:function(t){return Math.round(q(t))}}),J=j("rgb"),K={test:function(t){return"string"==typeof t?J(t):$(t)},parse:D(["red","green","blue","alpha"]),transform:function(t){var e=t.red,r=t.green,n=t.blue,a=t.alpha;return function(t){var e=t.red,r=t.green,n=t.blue,a=t.alpha;return"rgba("+e+", "+r+", "+n+", "+(void 0===a?1:a)+")"}({red:G.transform(e),green:G.transform(r),blue:G.transform(n),alpha:F(a)})}},Q=j("hsl"),tt={test:function(t){return"string"==typeof t?Q(t):_(t)},parse:D(["hue","saturation","lightness","alpha"]),transform:function(t){var e=t.hue,r=t.saturation,n=t.lightness,a=t.alpha;return function(t){var e=t.hue,r=t.saturation,n=t.lightness,a=t.alpha;return"hsla("+e+", "+r+", "+n+", "+(void 0===a?1:a)+")"}({hue:Math.round(e),saturation:z.transform(F(r)),lightness:z.transform(F(n)),alpha:F(a)})}},et=A({},K,{test:j("#"),parse:function(t){var e="",r="",n="";return t.length>4?(e=t.substr(1,2),r=t.substr(3,2),n=t.substr(5,2)):(e=t.substr(1,1),r=t.substr(2,1),n=t.substr(3,1),e+=e,r+=r,n+=n),{red:parseInt(e,16),green:parseInt(r,16),blue:parseInt(n,16),alpha:1}}}),rt={test:function(t){return"string"==typeof t&&B.test(t)||K.test(t)||tt.test(t)||et.test(t)},parse:function(t){return K.test(t)?K.parse(t):tt.test(t)?tt.parse(t):et.test(t)?et.parse(t):t},transform:function(t){return $(t)?K.transform(t):_(t)?tt.transform(t):t}},nt={color:rt,backgroundColor:rt,outlineColor:rt,fill:rt,stroke:rt,borderColor:rt,borderTopColor:rt,borderRightColor:rt,borderBottomColor:rt,borderLeftColor:rt,borderRadius:I,width:I,maxWidth:I,height:I,maxHeight:I,top:I,left:I,bottom:I,right:I,rotate:V,rotateX:V,rotateY:V,rotateZ:V,scale:U,scaleX:U,scaleY:U,scaleZ:U,skew:V,skewX:V,skewY:V,distance:I,translateX:I,translateY:I,translateZ:I,perspective:I,opacity:N,transformOriginX:z,transformOriginY:z,transformOriginZ:I},at=function(t){return nt[t]},ot="number",it="object",st="transform-origin",ut="transform",ft="translateZ",ct=";transform: none",lt=function(t,e){return";"+t+":"+e};function dt(t,e,r,n){void 0===e&&(e=!0),void 0===r&&(r=!0);for(var a=!0===e?Object.keys(t):e,o="",i="",s=!1,u=!0,f=!1,c=!1,l=a.length,d=0;d<l;d++){var p=a[d];if(C(p)){for(var h in f=!0,t)C(h)&&-1===a.indexOf(h)&&a.push(h);break}}a.sort(T);var g=a.length;for(d=0;d<g;d++){p=a[d];if(!n.has(p)){var m=C(p),v=t[p],y=at(p);m&&(y.default&&v!==y.default||!y.default&&0!==v)&&(u=!1),y&&(typeof v===ot||typeof v===it)&&y.transform&&(v=y.transform(v)),m?(i+=p+"("+v+") ",c=p===ft||c):Z(p)?(t[p]=v,s=!0):o+=lt(R(p,!0),v)}}return s&&(o+=lt(st,(t.transformOriginX||0)+" "+(t.transformOriginY||0)+" "+(t.transformOriginZ||0))),f&&(!c&&r&&(i+=ft+"(0)"),o+=lt(ut,u?ct:i)),o}var pt=new Set(["scrollLeft","scrollTop"]),ht=b({onRead:function(t,e){var r=e.element,n=e.preparseOutput,a=at(t);if(C(t))return a&&a.default||0;if(pt.has(t))return r[t];var o=window.getComputedStyle(r,null).getPropertyValue(R(t,!0))||0;return n&&a&&a.parse?a.parse(o):o},onRender:function(t,e,r){var n=e.element,a=e.enableHardwareAcceleration;n.style.cssText+=dt(t,r,a,pt),-1!==r.indexOf("scrollLeft")&&(n.scrollLeft=t.scrollLeft),-1!==r.indexOf("scrollTop")&&(n.scrollTop=t.scrollTop)},aliasMap:{x:"translateX",y:"translateY",z:"translateZ",originX:"transformOriginX",originY:"transformOriginY",originZ:"transformOriginZ"},uncachedValues:pt}),gt=function(t,e){return t/100*e+"px"},mt={fill:rt,stroke:rt,scale:U,scaleX:U,scaleY:U,opacity:N,fillOpacity:N,strokeOpacity:N},vt=b({onRead:function(t,e){var r=e.element;if(C(t)){var n=function(t){return mt[t]}(t);return n?n.default:0}return r.getAttribute(t)},onRender:function(t,e,r){var n=e.dimensions;!function(t,e){for(var r in e)e.hasOwnProperty(r)&&t.setAttribute(r,e[r])}(e.element,function(t,e,r,n){var a=!1,o=!1,i={},s=r?{pathLength:"0",pathSpacing:""+n}:void 0,u=void 0!==t.scale?t.scale||1e-7:t.scaleX||1,f=void 0!==t.scaleY?t.scaleY||1e-7:u||1,c=e.width*((t.originX||50)/100)+e.x,l=e.height*((t.originY||50)/100)+e.y,d=1*u*-c,p=1*f*-l,h=c/u,g=l/f,m={translate:"translate("+t.translateX+", "+t.translateY+") ",scale:"translate("+d+", "+p+") scale("+u+", "+f+") translate("+h+", "+g+") ",rotate:"rotate("+t.rotate+", "+c+", "+l+") ",skewX:"skewX("+t.skewX+") ",skewY:"skewY("+t.skewY+") "};for(var v in t)if(t.hasOwnProperty(v)){var y=t[v];C(v)?a=!0:!r||"pathLength"!==v&&"pathSpacing"!==v||"number"!=typeof y?r&&"pathOffset"===v?i["stroke-dashoffset"]=gt(-y,n):i[x(v)]=y:(o=!0,s[v]=gt(y,n))}if(o&&(i["stroke-dasharray"]=s.pathLength+" "+s.pathSpacing),a)for(var v in i.transform="",m)if(m.hasOwnProperty(v)){var w="scale"===v?"1":"0";i.transform+=m[v].replace(/undefined/g,w)}return i}(t,n,e.isPath,e.pathLength))},aliasMap:{x:"translateX",y:"translateY",background:"fill"}}),yt=b({useCache:!1,onRead:function(t){return"scrollTop"===t?window.pageYOffset:window.pageXOffset},onRender:function(t){var e=t.scrollTop,r=void 0===e?0:e,n=t.scrollLeft,a=void 0===n?0:n;return window.scrollTo(a,r)}}),wt=new WeakMap,bt=function(t,n){var a;return t instanceof HTMLElement?a=function(t,r){return ht(e({element:t,enableHardwareAcceleration:!0,preparseOutput:!0},r))}(t,n):t instanceof SVGElement?a=function(t){var e=t.getBBox(),r={element:t,dimensions:{x:e.x,y:e.y,width:e.width,height:e.height},isPath:!1};return"path"===t.tagName&&(r.isPath=!0,r.pathLength=t.getTotalLength()),vt(r)}(t):"undefined"!=typeof window&&t===window&&(a=yt(t)),r(void 0!==a,"No valid node provided. Node must be HTMLElement, SVGElement or window."),wt.set(t,a),a},Ot=function(t,e){return wt.has(t)?wt.get(t):bt(t,e)};t.default=function(t,e){var r="string"==typeof t?document.querySelector(t):t;return Ot(r,e)},t.createStylerFactory=b,t.buildStyles=dt,Object.defineProperty(t,"__esModule",{value:!0})});

lib/index.js

@@ -5,3 +5,5 @@ 'use strict';
 
-var framesync = require('framesync');
+function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
+
+var sync = _interopDefault(require('framesync'));
 var styleValueTypes = require('style-value-types');
@@ -27,3 +29,3 @@ var tslib_1 = require('tslib');
                     hasChanged = true;
-                    framesync.onFrameRender(render);
+                    sync.render(render);
                 }
@@ -34,3 +36,3 @@ }
             if (forceRender === void 0) { forceRender = false; }
-            if (forceRender || hasChanged) {
+            if (forceRender === true || hasChanged) {
                 onRender(state, props, changedValues);
@@ -45,4 +47,4 @@ hasChanged = false;
                 var key = aliasMap[unmappedKey] || unmappedKey;
-                return (key)
-                    ? (useCache && state[key] !== undefined)
+                return key
+                    ? useCache && state[key] !== undefined
                         ? state[key]
@@ -70,3 +72,3 @@ : onRead(key, props)
             },
-            render: render,
+            render: render
         };
@@ -160,2 +162,3 @@ };
     scaleZ: styleValueTypes.scale,
+    skew: styleValueTypes.degrees,
     skewX: styleValueTypes.degrees,
@@ -162,0 +165,0 @@ skewY: styleValueTypes.degrees,

lib/viewport/index.d.ts

 import { Styler } from '../styler/types';
 export { Styler };
-declare const _default: (props?: import("styler/types").Props) => Styler;
+declare const _default: (props?: import("stylefire/src/styler/types").Props) => Styler;
 export default _default;

package.json

 {
   "name": "stylefire",
-  "version": "2.0.7",
+  "version": "2.1.0",
   "description": "Performant, simplified stylers for CSS, SVG, path and DOM scroll.",
@@ -18,3 +18,2 @@ "main": "lib/index.js",
     "lint": "tslint -c tslint.json 'src/**/*.{ts}'",
-    "test": "jest",
     "measure": "gzip -c dist/stylefire.min.js | wc -c",
@@ -55,15 +54,4 @@ "prepublishOnly": "yarn build"
   },
-  "jest": {
-    "moduleFileExtensions": [
-      "ts",
-      "tsx",
-      "js"
-    ],
-    "transform": {
-      ".(ts|tsx)$": "<rootDir>/node_modules/ts-jest/preprocessor.js"
-    },
-    "testRegex": "/_tests/.*\\.(ts|tsx|js)$"
-  },
   "dependencies": {
-    "framesync": "^3.1.8",
+    "framesync": "^4.0.0",
     "hey-listen": "^1.0.4",
@@ -70,0 +58,0 @@ "style-value-types": "^3.0.6",

README.md

@@ -1,10 +0,3 @@
-# <a href="https://popmotion.io/api/stylefire"><img src="https://user-images.githubusercontent.com/7850794/38307473-c62a39c6-380b-11e8-9d9c-91561cb49bba.png" height="74" width="250" alt="Stylefire" /></a>
+# Stylefire docs
 
-### Style-setters for HTML, SVG and the viewport, optimized for animation.
-
-[![npm version](https://img.shields.io/npm/v/stylefire.svg?style=flat-square)](https://www.npmjs.com/package/stylefire)
-[![npm downloads](https://img.shields.io/npm/dm/stylefire.svg?style=flat-square)](https://www.npmjs.com/package/stylefire)
-[![Twitter Follow](https://img.shields.io/twitter/follow/popmotionjs.svg?style=social&label=Follow)](http://twitter.com/popmotionjs)
-
-## [Visit the website](https://popmotion.io/stylefire)
-### [Full API documentation](https://popmotion.io/stylefire/api)
+The Stylefire docs can be found at https://popmotion.io/stylefire/

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

117686

increased by1.67%

Lines of code

2167

increased by2.85%

Worsened metrics

Number of lines in readme file

3

decreased by-72.73%

Dependency changes

• + Addedframesync@4.1.0(transitive)

• - Removedframesync@3.1.9(transitive)

• Updatedframesync@^4.0.0