motion - npm Package Compare versions

Comparing version 6.0.1-alpha.11 to 6.0.1-alpha.12

dist/es/index.js

 export { animate } from './targets/dom/animate.js';
 export { animateValue } from './targets/dom/animate-value.js';
-export { spring } from './generators/spring.js';
+export { spring } from './generators/spring/index.js';
 export { animated } from './targets/react/index.js';

dist/motion.cjs.js

@@ -318,2 +318,34 @@ 'use strict';
 
+var floatRegex = /(-)?([\d]*\.?[\d])+/g;
+function parseNumberString(value) {
+    if (typeof value === "string" && parseFloat(value).toString() === value) {
+        return parseFloat(value);
+    }
+    return value;
+}
+var getUnit = function (v) { return v.replace(floatRegex, ""); };
+function makeAnimatable(from, to) {
+    from = parseNumberString(from);
+    to = parseNumberString(to);
+    // If both numbers, animate
+    if (typeof from === "number" && typeof to === "number")
+        return { from: from, to: to };
+    // If one is a number and the other is a unit type
+    if (typeof from === "number" &&
+        typeof to !== "number" &&
+        !isNaN(parseFloat(to))) {
+        var unit_1 = getUnit(to);
+        return { from: from, to: parseFloat(to), toValueType: function (v) { return v + unit_1; } };
+    }
+    else if (typeof from === "string") {
+        var mixer_1 = popmotion.mixComplex(from, to);
+        return {
+            from: 0,
+            to: 100,
+            toValueType: function (v) { return mixer_1(v / 100); },
+        };
+    }
+    return false;
+}
+
 var defaultStiffness = 100.0;
@@ -331,3 +363,3 @@ var defaultDamping = 10.0;
 };
-var spring = function (_a) {
+var createSpringGenerator = function (_a) {
     var _b = _a === void 0 ? {} : _a, _c = _b.stiffness, stiffness = _c === void 0 ? defaultStiffness : _c, _d = _b.damping, damping = _d === void 0 ? 10.0 : _d, _e = _b.mass, mass = _e === void 0 ? 1.0 : _e, _f = _b.from, from = _f === void 0 ? 0 : _f, _g = _b.to, to = _g === void 0 ? 1 : _g, _h = _b.velocity, velocity = _h === void 0 ? 0.0 : _h, _j = _b.restSpeed, restSpeed = _j === void 0 ? 2 : _j, _k = _b.restDelta, restDelta = _k === void 0 ? 0.1 : _k;
@@ -382,2 +414,63 @@ velocity = velocity ? -(velocity / 1000) : 0.0;
 
+/**
+ * The resolution of pregenerated keyframes in milliseconds
+ */
+var pregenerationResolution = 10;
+/**
+ * The max number of pregenerated keyframes. With pregenerationResolution this
+ * gives us a maximum duration of two seconds.
+ *
+ * It could be possible to remove this limit if we polyfill some repeat
+ * logic and generate a new set of keyframes each iteration.
+ *
+ * Alternatively, because individual keyframes (being CSS variables) run
+ * on the main thread, it could also be possible simple to run these
+ * animations synchronously.
+ */
+var maxPregeneratedKeyframes = 200;
+var spring = function (stiffness, damping, mass, velocity) {
+    if (stiffness === void 0) { stiffness = 200; }
+    if (damping === void 0) { damping = 15; }
+    if (mass === void 0) { mass = 1; }
+    return ({
+        isAnimationGenerator: true,
+        generate: function (definition) {
+            var _a;
+            if (definition.length > 2)
+                return false;
+            var keyframes = [];
+            var animatable = makeAnimatable(definition.length === 1 ? 0 : definition[0], (_a = definition[1]) !== null && _a !== void 0 ? _a : definition[0]);
+            if (animatable === false)
+                return false;
+            var from = animatable.from, to = animatable.to, toValueType = animatable.toValueType;
+            var generator = createSpringGenerator({
+                stiffness: stiffness,
+                damping: damping,
+                mass: mass,
+                velocity: velocity,
+                from: from,
+                to: to,
+            });
+            var isComplete = false;
+            var numPregeneratedKeyframes = 0;
+            var t = 0;
+            while (!isComplete) {
+                numPregeneratedKeyframes++;
+                var _b = generator.next(t), value = _b.value, done = _b.done;
+                keyframes.push(toValueType ? toValueType(value) : value);
+                t += pregenerationResolution;
+                if (numPregeneratedKeyframes > maxPregeneratedKeyframes) {
+                    // TODO Warn in development mode
+                    isComplete = true;
+                }
+                else {
+                    isComplete = done;
+                }
+            }
+            // TODO Return generator or set to element
+            return { keyframes: keyframes, duration: t };
+        },
+    });
+};
+
 function hasChanged(a, b) {
@@ -384,0 +477,0 @@ if (typeof a !== typeof b)

dist/motion.min.js

@@ -1,1 +0,1 @@
-!function(n,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],t):t((n="undefined"!=typeof globalThis?globalThis:n||self).Motion={},n.React)}(this,(function(n,t){"use strict";var e=new WeakMap;function r(n){return e.has(n)||e.set(n,{activeTransforms:[],activeAnimations:{}}),e.get(n)}var i=["","X","Y","Z"],a={x:"translateX",y:"translateY",z:"translateZ"},o={syntax:"<angle>",initialValue:"0deg",toDefaultUnit:function(n){return n+"deg"}},u={translate:{syntax:"<length-percentage>",initialValue:"0px",toDefaultUnit:function(n){return n+"px"}},rotate:o,scale:{syntax:"<number>",initialValue:1},skew:o},f=new Map,c=function(n){return"--motion-"+n},s=["x","y","z"];function l(n,t){return s.indexOf(n)-s.indexOf(t)}["translate","scale","rotate","skew"].forEach((function(n){i.forEach((function(t){s.push(n+t),f.set(c(n+t),u[n])}))}));var v=new Set(s),y=function(n){return v.has(n)},d=function(n){return n.sort(l).reduce(p,"").trim()},p=function(n,t){return n+" "+t+"(var("+c(t)+"))"},h="undefined"!=typeof CSS&&Object.hasOwnProperty.call(CSS,"registerProperty"),m=new Set;var g=function(){},b=function(n){return 1e3*n};var w=function(){return(w=Object.assign||function(n){for(var t,e=1,r=arguments.length;e<r;e++)for(var i in t=arguments[e])Object.prototype.hasOwnProperty.call(t,i)&&(n[i]=t[i]);return n}).apply(this,arguments)};function x(n,t){var e="function"==typeof Symbol&&n[Symbol.iterator];if(!e)return n;var r,i,a=e.call(n),o=[];try{for(;(void 0===t||t-- >0)&&!(r=a.next()).done;)o.push(r.value)}catch(n){i={error:n}}finally{try{r&&!r.done&&(e=a.return)&&e.call(a)}finally{if(i)throw i.error}}return o}function O(n,t,e){if(e||2===arguments.length)for(var r,i=0,a=t.length;i<a;i++)!r&&i in t||(r||(r=Array.prototype.slice.call(t,0,i)),r[i]=t[i]);return n.concat(r||t)}var A=function(n){return Array.isArray(n)&&"number"!=typeof n[0]},P=function(n){return function(n){return Array.isArray(n)&&"number"==typeof n[0]}(n)?S(n):n},S=function(n){var t=x(n,4);return"cubic-bezier("+t[0]+", "+t[1]+", "+t[2]+", "+t[3]+")"};function j(n,t,e,i){var o,u=void 0===i?{}:i,s=u.duration,l=void 0===s?.3:s,v=u.delay,p=void 0===v?0:v,w=u.endDelay,x=void 0===w?0:w,O=u.repeat,S=void 0===O?0:O,j=u.easing,M=void 0===j?"ease":j,E=u.direction,D=u.offset,k=r(n),R=!0,T=g;if(e=Array.isArray(e)?e:[e],y(t)&&(a[t]&&(t=a[t]),function(n,t){var e,i,a=r(n).activeTransforms;i=t,-1===(e=a).indexOf(i)&&e.push(i),n.style.transform=d(a)}(n,t),t=c(t)),function(n,t){n.activeAnimations[t]&&(!function(n){n.commitStyles(),n.cancel()}(n.activeAnimations[t]),n.activeAnimations[t]=void 0)}(k,t),function(n){return"object"==typeof n&&n.isAnimationGenerator}(M)){var U=M.generate(e);M="linear",!1!==U&&(e=U.keyframes,l=U.duration)}var V=f.get(t);V&&V.toDefaultUnit&&(e=e.map((function(n){return"number"==typeof n?V.toDefaultUnit(n):n})));var C=e[e.length-1];if(!function(n){return n.startsWith("--")}(t)?T=function(){return n.style[t]=C}:(T=function(){return n.style.setProperty(t,C)},h?function(n){if(!m.has(n)){m.add(n);try{var t=f.has(n)?f.get(n):{},e=t.syntax,r=t.initialValue;CSS.registerProperty({name:n,inherits:!1,syntax:e,initialValue:r})}catch(n){}}}(t):R=!1),R){var q=n.animate(((o={})[t]=e,o.offset=D,o.easing=A(M)?function(n){return n.map(P)}(M):void 0,o),{delay:b(p),duration:b(l),endDelay:b(x),easing:A(M)?void 0:P(M),direction:E,iterations:S+1});return k.activeAnimations[t]=q,q.finished.then(T).catch(g),q}T()}var M=function(n,t){return n[t]?w(w({},n),n[t]):n};var E={get:function(n,t){var e;switch(t){case"finished":return n.finished;case"currentTime":case"playbackRate":return null===(e=n.animations[0])||void 0===e?void 0:e[t];case"stop":return function(){return n.animations.forEach(stop)};default:return function(){return n.animations.forEach((function(n){return n[t]()}))}}},set:function(n,t,e){switch(t){case"currentTime":case"playbackRate":for(var r=0;r<n.animations.length;r++)n.animations[r][t]=e;return!0}return!1}};function D(n,e,r,i,a,o){var u=t.useRef(e);t.useEffect((function(){if(r){var t={};if(new Set(O(O([],x(Object.keys(r)),!1),x(Object.keys(u.current)),!1)).forEach((function(n){var e,i,a=r[n];(e=a,i=u.current[n],typeof e==typeof i&&(Array.isArray(e)&&Array.isArray(i)?function(n,t){var e=t.length;if(e!==n.length)return!1;for(var r=0;r<e;r++)if(t[r]!==n[r])return!1;return!0}(e,i):e===i))||(t[n]=a)})),Object.keys(t).length&&n.current){null==a||a(t);var e=[];for(var f in t){var c=j(n.current,f,t[f],i);c&&e.push(c)}Promise.all(e.map((function(n){return n.finished}))).then((function(){return null==o?void 0:o(t)})).catch(g)}u.current=r}}))}function k(n,e){var r=x(t.useState(!1),2),i=r[0],a=r[1];return i&&Object.assign(n,e),a}function R(n){return t.forwardRef((function(e,r){var i=e.options,o=void 0===i?{}:i,u=e.style,s=e.initial,l=e.hover,v=e.press,p=e.onStart,h=e.onComplete,m=function(n,t){var e={};for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&t.indexOf(r)<0&&(e[r]=n[r]);if(null!=n&&"function"==typeof Object.getOwnPropertySymbols){var i=0;for(r=Object.getOwnPropertySymbols(n);i<r.length;i++)t.indexOf(r[i])<0&&Object.prototype.propertyIsEnumerable.call(n,r[i])&&(e[r[i]]=n[r[i]])}return e}(e,["options","style","initial","hover","press","onStart","onComplete"]),g=t.useRef(null);g.current||(g.current=function(n){var t={},e=[];for(var r in n){var i=n[r];y(r)&&(a[r]&&(r=a[r]),e.push(r),r=c(r));var o=Array.isArray(i)?i[0]:i,u=f.get(r);u&&u.toDefaultUnit&&(o="number"==typeof i?u.toDefaultUnit(i):i),t[r]=o}return e.length&&(t.transform=d(e)),t}(w(w({},s),u)));var b=w(w({},s),u),x=function(n,t,e){var r=void 0===e?{}:e,i=r.onPointerEnter,a=r.onPointerLeave,o=k(n,t);return t?{onPointerEnter:function(n){null==i||i(n),o(!0)},onPointerLeave:function(n){null==a||a(n),o(!1)}}:{}}(b,l,m),O=function(n,t,e){var r=(void 0===e?{}:e).onPointerDown,i=k(n,t);if(!t)return{};var a=function(){i(!1),window.removeEventListener("pointerup",a)};return{onPointerDown:function(n){null==r||r(n),i(!0),window.addEventListener("pointerup",a)}}}(b,v,m),A=t.useRef(null);return D(A,w(w({},u),s),b,o,p,h),t.createElement(n,Object.assign({},m,x,O,{style:g.current,ref:A}))}))}var T=new Map,U=new Proxy({},{get:function(n,t){return T.has(t)||T.set(t,R(t)),T.get(t)}});n.animate=function(n,t,e){var r={animations:[]};for(var i in t){var a=M(e,i),o=j(n,i,t[i],a);o&&r.animations.push(o)}return r.finished=Promise.all(r.animations.map((function(n){return n.finished}))),new Proxy(r,E)},n.animateValue=j,n.animated=U,n.spring=function(n){var t=void 0===n?{}:n,e=t.stiffness,r=void 0===e?100:e,i=t.damping,a=void 0===i?10:i,o=t.mass,u=void 0===o?1:o,f=t.from,c=void 0===f?0:f,s=t.to,l=void 0===s?1:s,v=t.velocity,y=void 0===v?0:v,d=t.restSpeed,p=void 0===d?2:d,h=t.restDelta,m=void 0===h?.1:h;y=y?-y/1e3:0;var g,b=function(n,t,e){return void 0===n&&(n=100),void 0===t&&(t=10),void 0===e&&(e=1),t/(2*Math.sqrt(n*e))}(r,a,u),w=l-c,x=Math.sqrt(r/u)/1e3,O=function(n,t){return n*Math.sqrt(1-t*t)}(x,b),A={done:!1,value:c,velocity:y};return g=b<1?function(n){return l-Math.exp(-b*x*n)*((b*x*w-y)/O*Math.sin(O*n)+w*Math.cos(O*n))}:function(n){return l-Math.exp(-x*n)*(w+(y+x*w)*n)},{next:function(n){A.value=g(n),A.velocity=0===n?y:function(n,t,e){var r=Math.max(t-5,0);return function(n,t){return t?n*(1e3/t):0}(e-n(r),5)}(g,n,A.value);var t=Math.abs(A.velocity)<=p,e=Math.abs(l-A.value)<=m;return A.done=t&&e,A}}},Object.defineProperty(n,"__esModule",{value:!0})}));
+!function(r,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],t):t((r="undefined"!=typeof globalThis?globalThis:r||self).Motion={},r.React)}(this,(function(r,t){"use strict";var n=new WeakMap;function e(r){return n.has(r)||n.set(r,{activeTransforms:[],activeAnimations:{}}),n.get(r)}var a=["","X","Y","Z"],o={x:"translateX",y:"translateY",z:"translateZ"},i={syntax:"<angle>",initialValue:"0deg",toDefaultUnit:function(r){return r+"deg"}},u={translate:{syntax:"<length-percentage>",initialValue:"0px",toDefaultUnit:function(r){return r+"px"}},rotate:i,scale:{syntax:"<number>",initialValue:1},skew:i},s=new Map,f=function(r){return"--motion-"+r},c=["x","y","z"];function l(r,t){return c.indexOf(r)-c.indexOf(t)}["translate","scale","rotate","skew"].forEach((function(r){a.forEach((function(t){c.push(r+t),s.set(f(r+t),u[r])}))}));var v=new Set(c),p=function(r){return v.has(r)},d=function(r){return r.sort(l).reduce(m,"").trim()},m=function(r,t){return r+" "+t+"(var("+f(t)+"))"},h="undefined"!=typeof CSS&&Object.hasOwnProperty.call(CSS,"registerProperty"),y=new Set;var g=function(){},b=function(r){return 1e3*r};var x=function(){return(x=Object.assign||function(r){for(var t,n=1,e=arguments.length;n<e;n++)for(var a in t=arguments[n])Object.prototype.hasOwnProperty.call(t,a)&&(r[a]=t[a]);return r}).apply(this,arguments)};function w(r,t){var n="function"==typeof Symbol&&r[Symbol.iterator];if(!n)return r;var e,a,o=n.call(r),i=[];try{for(;(void 0===t||t-- >0)&&!(e=o.next()).done;)i.push(e.value)}catch(r){a={error:r}}finally{try{e&&!e.done&&(n=o.return)&&n.call(o)}finally{if(a)throw a.error}}return i}function O(r,t,n){if(n||2===arguments.length)for(var e,a=0,o=t.length;a<o;a++)!e&&a in t||(e||(e=Array.prototype.slice.call(t,0,a)),e[a]=t[a]);return r.concat(e||t)}var A=function(r){return Array.isArray(r)&&"number"!=typeof r[0]},M=function(r){return function(r){return Array.isArray(r)&&"number"==typeof r[0]}(r)?P(r):r},P=function(r){var t=w(r,4);return"cubic-bezier("+t[0]+", "+t[1]+", "+t[2]+", "+t[3]+")"};function S(r,t,n,a){var i,u=void 0===a?{}:a,c=u.duration,l=void 0===c?.3:c,v=u.delay,m=void 0===v?0:v,x=u.endDelay,w=void 0===x?0:x,O=u.repeat,P=void 0===O?0:O,S=u.easing,j=void 0===S?"ease":S,k=u.direction,E=u.offset,D=e(r),F=!0,T=g;if(n=Array.isArray(n)?n:[n],p(t)&&(o[t]&&(t=o[t]),function(r,t){var n,a,o=e(r).activeTransforms;a=t,-1===(n=o).indexOf(a)&&n.push(a),r.style.transform=d(o)}(r,t),t=f(t)),function(r,t){r.activeAnimations[t]&&(!function(r){r.commitStyles(),r.cancel()}(r.activeAnimations[t]),r.activeAnimations[t]=void 0)}(D,t),function(r){return"object"==typeof r&&r.isAnimationGenerator}(j)){var V=j.generate(n);j="linear",!1!==V&&(n=V.keyframes,l=V.duration)}var R=s.get(t);R&&R.toDefaultUnit&&(n=n.map((function(r){return"number"==typeof r?R.toDefaultUnit(r):r})));var C=n[n.length-1];if(!function(r){return r.startsWith("--")}(t)?T=function(){return r.style[t]=C}:(T=function(){return r.style.setProperty(t,C)},h?function(r){if(!y.has(r)){y.add(r);try{var t=s.has(r)?s.get(r):{},n=t.syntax,e=t.initialValue;CSS.registerProperty({name:r,inherits:!1,syntax:n,initialValue:e})}catch(r){}}}(t):F=!1),F){var N=r.animate(((i={})[t]=n,i.offset=E,i.easing=A(j)?function(r){return r.map(M)}(j):void 0,i),{delay:b(m),duration:b(l),endDelay:b(w),easing:A(j)?void 0:M(j),direction:k,iterations:P+1});return D.activeAnimations[t]=N,N.finished.then(T).catch(g),N}T()}var j=function(r,t){return r[t]?x(x({},r),r[t]):r};var k={get:function(r,t){var n;switch(t){case"finished":return r.finished;case"currentTime":case"playbackRate":return null===(n=r.animations[0])||void 0===n?void 0:n[t];case"stop":return function(){return r.animations.forEach(stop)};default:return function(){return r.animations.forEach((function(r){return r[t]()}))}}},set:function(r,t,n){switch(t){case"currentTime":case"playbackRate":for(var e=0;e<r.animations.length;e++)r.animations[e][t]=n;return!0}return!1}},E=function(r,t,n){return-n*r+n*t+r},D=function(r,t){return function(n){return Math.max(Math.min(n,t),r)}},F=function(r){return r%1?Number(r.toFixed(5)):r},T=/(-)?([\d]*\.?[\d])+/g,V=/(#[0-9a-f]{6}|#[0-9a-f]{3}|#(?:[0-9a-f]{2}){2,4}|(rgb|hsl)a?\((-?[\d\.]+%?[,\s]+){2,3}\s*\/*\s*[\d\.]+%?\))/gi,R=/^(#[0-9a-f]{3}|#(?:[0-9a-f]{2}){2,4}|(rgb|hsl)a?\((-?[\d\.]+%?[,\s]+){2,3}\s*\/*\s*[\d\.]+%?\))$/i;function C(r){return"string"==typeof r}var N={test:function(r){return"number"==typeof r},parse:parseFloat,transform:function(r){return r}},U=x(x({},N),{transform:D(0,1)});x(x({},N),{default:1});var q,I=(q="%",{test:function(r){return C(r)&&r.endsWith(q)&&1===r.split(" ").length},parse:parseFloat,transform:function(r){return""+r+q}});x(x({},I),{parse:function(r){return I.parse(r)/100},transform:function(r){return I.transform(100*r)}});var L=function(r,t){return function(n){return Boolean(C(n)&&R.test(n)&&n.startsWith(r)||t&&Object.prototype.hasOwnProperty.call(n,t))}},W=function(r,t,n){return function(e){var a;if(!C(e))return e;var o=e.match(T),i=o[0],u=o[1],s=o[2],f=o[3];return(a={})[r]=parseFloat(i),a[t]=parseFloat(u),a[n]=parseFloat(s),a.alpha=void 0!==f?parseFloat(f):1,a}},z={test:L("hsl","hue"),parse:W("hue","saturation","lightness"),transform:function(r){var t=r.hue,n=r.saturation,e=r.lightness,a=r.alpha,o=void 0===a?1:a;return"hsla("+Math.round(t)+", "+I.transform(F(n))+", "+I.transform(F(e))+", "+F(U.transform(o))+")"}},G=D(0,255),$=x(x({},N),{transform:function(r){return Math.round(G(r))}}),B={test:L("rgb","red"),parse:W("red","green","blue"),transform:function(r){var t=r.red,n=r.green,e=r.blue,a=r.alpha,o=void 0===a?1:a;return"rgba("+$.transform(t)+", "+$.transform(n)+", "+$.transform(e)+", "+F(U.transform(o))+")"}};var X={test:L("#"),parse:function(r){var t="",n="",e="",a="";return r.length>5?(t=r.substr(1,2),n=r.substr(3,2),e=r.substr(5,2),a=r.substr(7,2)):(t=r.substr(1,1),n=r.substr(2,1),e=r.substr(3,1),a=r.substr(4,1),t+=t,n+=n,e+=e,a+=a),{red:parseInt(t,16),green:parseInt(n,16),blue:parseInt(e,16),alpha:a?parseInt(a,16)/255:1}},transform:B.transform},Y=function(r){return B.test(r)||X.test(r)||z.test(r)},Z=function(r){return B.test(r)?B.parse(r):z.test(r)?z.parse(r):X.parse(r)},_=function(r){return C(r)?r:r.hasOwnProperty("red")?B.transform(r):z.transform(r)},H="${c}",J="${n}";function K(r){var t=[],n=0,e=r.match(V);e&&(n=e.length,r=r.replace(V,H),t.push.apply(t,e.map(Z)));var a=r.match(T);return a&&(r=r.replace(T,J),t.push.apply(t,a.map(N.parse))),{values:t,numColors:n,tokenised:r}}function Q(r){return K(r).values}function rr(r){var t=K(r),n=t.values,e=t.numColors,a=t.tokenised,o=n.length;return function(r){for(var t=a,n=0;n<o;n++)t=t.replace(n<e?H:J,n<e?_(r[n]):F(r[n]));return t}}var tr=function(r){return"number"==typeof r?0:r};var nr={test:function(r){var t,n,e,a;return isNaN(r)&&C(r)&&(null!==(n=null===(t=r.match(T))||void 0===t?void 0:t.length)&&void 0!==n?n:0)+(null!==(a=null===(e=r.match(V))||void 0===e?void 0:e.length)&&void 0!==a?a:0)>0},parse:Q,createTransformer:rr,getAnimatableNone:function(r){var t=Q(r);return rr(r)(t.map(tr))}},er=function(r,t,n){var e=r*r,a=t*t;return Math.sqrt(Math.max(0,n*(a-e)+e))},ar=[X,B,z],or=function(r){return ar.find((function(t){return t.test(r)}))},ir=function(r,t){return function(n){return t(r(n))}};function ur(r,t){return"number"==typeof r?function(n){return E(r,t,n)}:Y(r)?function(r,t){var n=or(r),e=or(t);n.transform,e.transform;var a=n.parse(r),o=e.parse(t),i=x({},a),u=n===z?E:er;return function(r){for(var t in i)"alpha"!==t&&(i[t]=u(a[t],o[t],r));return i.alpha=E(a.alpha,o.alpha,r),n.transform(i)}}(r,t):fr(r,t)}function sr(r){for(var t=nr.parse(r),n=t.length,e=0,a=0,o=0,i=0;i<n;i++)e||"number"==typeof t[i]?e++:void 0!==t[i].hue?o++:a++;return{parsed:t,numNumbers:e,numRGB:a,numHSL:o}}var fr=function(r,t){var n,e,a,o,i,u=nr.createTransformer(t),s=sr(r),f=sr(t);return function(){for(var r=[],t=0;t<arguments.length;t++)r[t]=arguments[t];return r.reduce(ir)}((n=s.parsed,e=f.parsed,a=O([],n),o=a.length,i=n.map((function(r,t){return ur(r,e[t])})),function(r){for(var t=0;t<o;t++)a[t]=i[t](r);return a}),u)};var cr=/(-)?([\d]*\.?[\d])+/g;function lr(r){return"string"==typeof r&&parseFloat(r).toString()===r?parseFloat(r):r}function vr(r,t){if(r=lr(r),t=lr(t),"number"==typeof r&&"number"==typeof t)return{from:r,to:t};if("number"==typeof r&&"number"!=typeof t&&!isNaN(parseFloat(t))){var n=t.replace(cr,"");return{from:r,to:parseFloat(t),toValueType:function(r){return r+n}}}if("string"==typeof r){var e=fr(r,t);return{from:0,to:100,toValueType:function(r){return e(r/100)}}}return!1}var pr=function(r){var t=void 0===r?{}:r,n=t.stiffness,e=void 0===n?100:n,a=t.damping,o=void 0===a?10:a,i=t.mass,u=void 0===i?1:i,s=t.from,f=void 0===s?0:s,c=t.to,l=void 0===c?1:c,v=t.velocity,p=void 0===v?0:v,d=t.restSpeed,m=void 0===d?2:d,h=t.restDelta,y=void 0===h?.1:h;p=p?-p/1e3:0;var g,b=function(r,t,n){return void 0===r&&(r=100),void 0===t&&(t=10),void 0===n&&(n=1),t/(2*Math.sqrt(r*n))}(e,o,u),x=l-f,w=Math.sqrt(e/u)/1e3,O=function(r,t){return r*Math.sqrt(1-t*t)}(w,b),A={done:!1,value:f,velocity:p};return g=b<1?function(r){return l-Math.exp(-b*w*r)*((b*w*x-p)/O*Math.sin(O*r)+x*Math.cos(O*r))}:function(r){return l-Math.exp(-w*r)*(x+(p+w*x)*r)},{next:function(r){A.value=g(r),A.velocity=0===r?p:function(r,t,n){var e=Math.max(t-5,0);return function(r,t){return t?r*(1e3/t):0}(n-r(e),5)}(g,r,A.value);var t=Math.abs(A.velocity)<=m,n=Math.abs(l-A.value)<=y;return A.done=t&&n,A}}};function dr(r,n,e,a,o,i){var u=t.useRef(n);t.useEffect((function(){if(e){var t={};if(new Set(O(O([],w(Object.keys(e)),!1),w(Object.keys(u.current)),!1)).forEach((function(r){var n,a,o=e[r];(n=o,a=u.current[r],typeof n==typeof a&&(Array.isArray(n)&&Array.isArray(a)?function(r,t){var n=t.length;if(n!==r.length)return!1;for(var e=0;e<n;e++)if(t[e]!==r[e])return!1;return!0}(n,a):n===a))||(t[r]=o)})),Object.keys(t).length&&r.current){null==o||o(t);var n=[];for(var s in t){var f=S(r.current,s,t[s],a);f&&n.push(f)}Promise.all(n.map((function(r){return r.finished}))).then((function(){return null==i?void 0:i(t)})).catch(g)}u.current=e}}))}function mr(r,n){var e=w(t.useState(!1),2),a=e[0],o=e[1];return a&&Object.assign(r,n),o}function hr(r){return t.forwardRef((function(n,e){var a=n.options,i=void 0===a?{}:a,u=n.style,c=n.initial,l=n.hover,v=n.press,m=n.onStart,h=n.onComplete,y=function(r,t){var n={};for(var e in r)Object.prototype.hasOwnProperty.call(r,e)&&t.indexOf(e)<0&&(n[e]=r[e]);if(null!=r&&"function"==typeof Object.getOwnPropertySymbols){var a=0;for(e=Object.getOwnPropertySymbols(r);a<e.length;a++)t.indexOf(e[a])<0&&Object.prototype.propertyIsEnumerable.call(r,e[a])&&(n[e[a]]=r[e[a]])}return n}(n,["options","style","initial","hover","press","onStart","onComplete"]),g=t.useRef(null);g.current||(g.current=function(r){var t={},n=[];for(var e in r){var a=r[e];p(e)&&(o[e]&&(e=o[e]),n.push(e),e=f(e));var i=Array.isArray(a)?a[0]:a,u=s.get(e);u&&u.toDefaultUnit&&(i="number"==typeof a?u.toDefaultUnit(a):a),t[e]=i}return n.length&&(t.transform=d(n)),t}(x(x({},c),u)));var b=x(x({},c),u),w=function(r,t,n){var e=void 0===n?{}:n,a=e.onPointerEnter,o=e.onPointerLeave,i=mr(r,t);return t?{onPointerEnter:function(r){null==a||a(r),i(!0)},onPointerLeave:function(r){null==o||o(r),i(!1)}}:{}}(b,l,y),O=function(r,t,n){var e=(void 0===n?{}:n).onPointerDown,a=mr(r,t);if(!t)return{};var o=function(){a(!1),window.removeEventListener("pointerup",o)};return{onPointerDown:function(r){null==e||e(r),a(!0),window.addEventListener("pointerup",o)}}}(b,v,y),A=t.useRef(null);return dr(A,x(x({},u),c),b,i,m,h),t.createElement(r,Object.assign({},y,w,O,{style:g.current,ref:A}))}))}var yr=new Map,gr=new Proxy({},{get:function(r,t){return yr.has(t)||yr.set(t,hr(t)),yr.get(t)}});r.animate=function(r,t,n){var e={animations:[]};for(var a in t){var o=j(n,a),i=S(r,a,t[a],o);i&&e.animations.push(i)}return e.finished=Promise.all(e.animations.map((function(r){return r.finished}))),new Proxy(e,k)},r.animateValue=S,r.animated=gr,r.spring=function(r,t,n,e){return void 0===r&&(r=200),void 0===t&&(t=15),void 0===n&&(n=1),{isAnimationGenerator:!0,generate:function(a){var o;if(a.length>2)return!1;var i=[],u=vr(1===a.length?0:a[0],null!==(o=a[1])&&void 0!==o?o:a[0]);if(!1===u)return!1;for(var s=u.from,f=u.to,c=u.toValueType,l=pr({stiffness:r,damping:t,mass:n,velocity:e,from:s,to:f}),v=!1,p=0,d=0;!v;){p++;var m=l.next(d),h=m.value,y=m.done;i.push(c?c(h):h),d+=10,v=p>200||y}return{keyframes:i,duration:d}}}},Object.defineProperty(r,"__esModule",{value:!0})}));

dist/motion.umd.js

@@ -381,2 +381,298 @@ (function (global, factory) {
 
+    var invariant = function () { };
+    {
+        invariant = function (check, message) {
+            if (!check) {
+                throw new Error(message);
+            }
+        };
+    }
+
+    var mix = function (from, to, progress) {
+        return -progress * from + progress * to + from;
+    };
+
+    var clamp = function (min, max) { return function (v) {
+        return Math.max(Math.min(v, max), min);
+    }; };
+    var sanitize = function (v) { return (v % 1 ? Number(v.toFixed(5)) : v); };
+    var floatRegex$1 = /(-)?([\d]*\.?[\d])+/g;
+    var colorRegex = /(#[0-9a-f]{6}|#[0-9a-f]{3}|#(?:[0-9a-f]{2}){2,4}|(rgb|hsl)a?\((-?[\d\.]+%?[,\s]+){2,3}\s*\/*\s*[\d\.]+%?\))/gi;
+    var singleColorRegex = /^(#[0-9a-f]{3}|#(?:[0-9a-f]{2}){2,4}|(rgb|hsl)a?\((-?[\d\.]+%?[,\s]+){2,3}\s*\/*\s*[\d\.]+%?\))$/i;
+    function isString(v) {
+        return typeof v === 'string';
+    }
+
+    var number = {
+        test: function (v) { return typeof v === 'number'; },
+        parse: parseFloat,
+        transform: function (v) { return v; },
+    };
+    var alpha = __assign(__assign({}, number), { transform: clamp(0, 1) });
+    __assign(__assign({}, number), { default: 1 });
+
+    var createUnitType = function (unit) { return ({
+        test: function (v) {
+            return isString(v) && v.endsWith(unit) && v.split(' ').length === 1;
+        },
+        parse: parseFloat,
+        transform: function (v) { return "" + v + unit; },
+    }); };
+    var percent = createUnitType('%');
+    __assign(__assign({}, percent), { parse: function (v) { return percent.parse(v) / 100; }, transform: function (v) { return percent.transform(v * 100); } });
+
+    var isColorString = function (type, testProp) { return function (v) {
+        return Boolean((isString(v) && singleColorRegex.test(v) && v.startsWith(type)) ||
+            (testProp && Object.prototype.hasOwnProperty.call(v, testProp)));
+    }; };
+    var splitColor = function (aName, bName, cName) { return function (v) {
+        var _a;
+        if (!isString(v))
+            return v;
+        var _b = v.match(floatRegex$1), a = _b[0], b = _b[1], c = _b[2], alpha = _b[3];
+        return _a = {},
+            _a[aName] = parseFloat(a),
+            _a[bName] = parseFloat(b),
+            _a[cName] = parseFloat(c),
+            _a.alpha = alpha !== undefined ? parseFloat(alpha) : 1,
+            _a;
+    }; };
+
+    var hsla = {
+        test: isColorString('hsl', 'hue'),
+        parse: splitColor('hue', 'saturation', 'lightness'),
+        transform: function (_a) {
+            var hue = _a.hue, saturation = _a.saturation, lightness = _a.lightness, _b = _a.alpha, alpha$1 = _b === void 0 ? 1 : _b;
+            return ('hsla(' +
+                Math.round(hue) +
+                ', ' +
+                percent.transform(sanitize(saturation)) +
+                ', ' +
+                percent.transform(sanitize(lightness)) +
+                ', ' +
+                sanitize(alpha.transform(alpha$1)) +
+                ')');
+        },
+    };
+
+    var clampRgbUnit = clamp(0, 255);
+    var rgbUnit = __assign(__assign({}, number), { transform: function (v) { return Math.round(clampRgbUnit(v)); } });
+    var rgba = {
+        test: isColorString('rgb', 'red'),
+        parse: splitColor('red', 'green', 'blue'),
+        transform: function (_a) {
+            var red = _a.red, green = _a.green, blue = _a.blue, _b = _a.alpha, alpha$1 = _b === void 0 ? 1 : _b;
+            return 'rgba(' +
+                rgbUnit.transform(red) +
+                ', ' +
+                rgbUnit.transform(green) +
+                ', ' +
+                rgbUnit.transform(blue) +
+                ', ' +
+                sanitize(alpha.transform(alpha$1)) +
+                ')';
+        },
+    };
+
+    function parseHex(v) {
+        var r = '';
+        var g = '';
+        var b = '';
+        var a = '';
+        if (v.length > 5) {
+            r = v.substr(1, 2);
+            g = v.substr(3, 2);
+            b = v.substr(5, 2);
+            a = v.substr(7, 2);
+        }
+        else {
+            r = v.substr(1, 1);
+            g = v.substr(2, 1);
+            b = v.substr(3, 1);
+            a = v.substr(4, 1);
+            r += r;
+            g += g;
+            b += b;
+            a += a;
+        }
+        return {
+            red: parseInt(r, 16),
+            green: parseInt(g, 16),
+            blue: parseInt(b, 16),
+            alpha: a ? parseInt(a, 16) / 255 : 1,
+        };
+    }
+    var hex = {
+        test: isColorString('#'),
+        parse: parseHex,
+        transform: rgba.transform,
+    };
+
+    var color = {
+        test: function (v) { return rgba.test(v) || hex.test(v) || hsla.test(v); },
+        parse: function (v) {
+            if (rgba.test(v)) {
+                return rgba.parse(v);
+            }
+            else if (hsla.test(v)) {
+                return hsla.parse(v);
+            }
+            else {
+                return hex.parse(v);
+            }
+        },
+        transform: function (v) {
+            return isString(v)
+                ? v
+                : v.hasOwnProperty('red')
+                    ? rgba.transform(v)
+                    : hsla.transform(v);
+        },
+    };
+
+    var colorToken = '${c}';
+    var numberToken = '${n}';
+    function test(v) {
+        var _a, _b, _c, _d;
+        return (isNaN(v) &&
+            isString(v) &&
+            ((_b = (_a = v.match(floatRegex$1)) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) + ((_d = (_c = v.match(colorRegex)) === null || _c === void 0 ? void 0 : _c.length) !== null && _d !== void 0 ? _d : 0) > 0);
+    }
+    function analyse$1(v) {
+        var values = [];
+        var numColors = 0;
+        var colors = v.match(colorRegex);
+        if (colors) {
+            numColors = colors.length;
+            v = v.replace(colorRegex, colorToken);
+            values.push.apply(values, colors.map(color.parse));
+        }
+        var numbers = v.match(floatRegex$1);
+        if (numbers) {
+            v = v.replace(floatRegex$1, numberToken);
+            values.push.apply(values, numbers.map(number.parse));
+        }
+        return { values: values, numColors: numColors, tokenised: v };
+    }
+    function parse(v) {
+        return analyse$1(v).values;
+    }
+    function createTransformer(v) {
+        var _a = analyse$1(v), values = _a.values, numColors = _a.numColors, tokenised = _a.tokenised;
+        var numValues = values.length;
+        return function (v) {
+            var output = tokenised;
+            for (var i = 0; i < numValues; i++) {
+                output = output.replace(i < numColors ? colorToken : numberToken, i < numColors ? color.transform(v[i]) : sanitize(v[i]));
+            }
+            return output;
+        };
+    }
+    var convertNumbersToZero = function (v) {
+        return typeof v === 'number' ? 0 : v;
+    };
+    function getAnimatableNone(v) {
+        var parsed = parse(v);
+        var transformer = createTransformer(v);
+        return transformer(parsed.map(convertNumbersToZero));
+    }
+    var complex = { test: test, parse: parse, createTransformer: createTransformer, getAnimatableNone: getAnimatableNone };
+
+    var mixLinearColor = function (from, to, v) {
+        var fromExpo = from * from;
+        var toExpo = to * to;
+        return Math.sqrt(Math.max(0, v * (toExpo - fromExpo) + fromExpo));
+    };
+    var colorTypes = [hex, rgba, hsla];
+    var getColorType = function (v) {
+        return colorTypes.find(function (type) { return type.test(v); });
+    };
+    var notAnimatable = function (color) {
+        return "'" + color + "' is not an animatable color. Use the equivalent color code instead.";
+    };
+    var mixColor = function (from, to) {
+        var fromColorType = getColorType(from);
+        var toColorType = getColorType(to);
+        invariant(!!fromColorType, notAnimatable(from));
+        invariant(!!toColorType, notAnimatable(to));
+        invariant(fromColorType.transform === toColorType.transform, "Both colors must be hex/RGBA, OR both must be HSLA.");
+        var fromColor = fromColorType.parse(from);
+        var toColor = toColorType.parse(to);
+        var blended = __assign({}, fromColor);
+        var mixFunc = fromColorType === hsla ? mix : mixLinearColor;
+        return function (v) {
+            for (var key in blended) {
+                if (key !== "alpha") {
+                    blended[key] = mixFunc(fromColor[key], toColor[key], v);
+                }
+            }
+            blended.alpha = mix(fromColor.alpha, toColor.alpha, v);
+            return fromColorType.transform(blended);
+        };
+    };
+
+    var isNum = function (v) { return typeof v === 'number'; };
+
+    var combineFunctions = function (a, b) { return function (v) { return b(a(v)); }; };
+    var pipe = function () {
+        var transformers = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            transformers[_i] = arguments[_i];
+        }
+        return transformers.reduce(combineFunctions);
+    };
+
+    function getMixer(origin, target) {
+        if (isNum(origin)) {
+            return function (v) { return mix(origin, target, v); };
+        }
+        else if (color.test(origin)) {
+            return mixColor(origin, target);
+        }
+        else {
+            return mixComplex(origin, target);
+        }
+    }
+    var mixArray = function (from, to) {
+        var output = __spreadArray([], from);
+        var numValues = output.length;
+        var blendValue = from.map(function (fromThis, i) { return getMixer(fromThis, to[i]); });
+        return function (v) {
+            for (var i = 0; i < numValues; i++) {
+                output[i] = blendValue[i](v);
+            }
+            return output;
+        };
+    };
+    function analyse(value) {
+        var parsed = complex.parse(value);
+        var numValues = parsed.length;
+        var numNumbers = 0;
+        var numRGB = 0;
+        var numHSL = 0;
+        for (var i = 0; i < numValues; i++) {
+            if (numNumbers || typeof parsed[i] === "number") {
+                numNumbers++;
+            }
+            else {
+                if (parsed[i].hue !== undefined) {
+                    numHSL++;
+                }
+                else {
+                    numRGB++;
+                }
+            }
+        }
+        return { parsed: parsed, numNumbers: numNumbers, numRGB: numRGB, numHSL: numHSL };
+    }
+    var mixComplex = function (origin, target) {
+        var template = complex.createTransformer(target);
+        var originStats = analyse(origin);
+        var targetStats = analyse(target);
+        invariant(originStats.numHSL === targetStats.numHSL &&
+            originStats.numRGB === targetStats.numRGB &&
+            originStats.numNumbers >= targetStats.numNumbers, "Complex values '" + origin + "' and '" + target + "' too different to mix. Ensure all colors are of the same type.");
+        return pipe(mixArray(originStats.parsed, targetStats.parsed), template);
+    };
+
     function velocityPerSecond(velocity, frameDuration) {
@@ -386,2 +682,34 @@ return frameDuration ? velocity * (1000 / frameDuration) : 0;
 
+    var floatRegex = /(-)?([\d]*\.?[\d])+/g;
+    function parseNumberString(value) {
+        if (typeof value === "string" && parseFloat(value).toString() === value) {
+            return parseFloat(value);
+        }
+        return value;
+    }
+    var getUnit = function (v) { return v.replace(floatRegex, ""); };
+    function makeAnimatable(from, to) {
+        from = parseNumberString(from);
+        to = parseNumberString(to);
+        // If both numbers, animate
+        if (typeof from === "number" && typeof to === "number")
+            return { from: from, to: to };
+        // If one is a number and the other is a unit type
+        if (typeof from === "number" &&
+            typeof to !== "number" &&
+            !isNaN(parseFloat(to))) {
+            var unit_1 = getUnit(to);
+            return { from: from, to: parseFloat(to), toValueType: function (v) { return v + unit_1; } };
+        }
+        else if (typeof from === "string") {
+            var mixer_1 = mixComplex(from, to);
+            return {
+                from: 0,
+                to: 100,
+                toValueType: function (v) { return mixer_1(v / 100); },
+            };
+        }
+        return false;
+    }
+
     var defaultStiffness = 100.0;
@@ -399,3 +727,3 @@ var defaultDamping = 10.0;
     };
-    var spring = function (_a) {
+    var createSpringGenerator = function (_a) {
         var _b = _a === void 0 ? {} : _a, _c = _b.stiffness, stiffness = _c === void 0 ? defaultStiffness : _c, _d = _b.damping, damping = _d === void 0 ? 10.0 : _d, _e = _b.mass, mass = _e === void 0 ? 1.0 : _e, _f = _b.from, from = _f === void 0 ? 0 : _f, _g = _b.to, to = _g === void 0 ? 1 : _g, _h = _b.velocity, velocity = _h === void 0 ? 0.0 : _h, _j = _b.restSpeed, restSpeed = _j === void 0 ? 2 : _j, _k = _b.restDelta, restDelta = _k === void 0 ? 0.1 : _k;
@@ -450,2 +778,63 @@ velocity = velocity ? -(velocity / 1000) : 0.0;
 
+    /**
+     * The resolution of pregenerated keyframes in milliseconds
+     */
+    var pregenerationResolution = 10;
+    /**
+     * The max number of pregenerated keyframes. With pregenerationResolution this
+     * gives us a maximum duration of two seconds.
+     *
+     * It could be possible to remove this limit if we polyfill some repeat
+     * logic and generate a new set of keyframes each iteration.
+     *
+     * Alternatively, because individual keyframes (being CSS variables) run
+     * on the main thread, it could also be possible simple to run these
+     * animations synchronously.
+     */
+    var maxPregeneratedKeyframes = 200;
+    var spring = function (stiffness, damping, mass, velocity) {
+        if (stiffness === void 0) { stiffness = 200; }
+        if (damping === void 0) { damping = 15; }
+        if (mass === void 0) { mass = 1; }
+        return ({
+            isAnimationGenerator: true,
+            generate: function (definition) {
+                var _a;
+                if (definition.length > 2)
+                    return false;
+                var keyframes = [];
+                var animatable = makeAnimatable(definition.length === 1 ? 0 : definition[0], (_a = definition[1]) !== null && _a !== void 0 ? _a : definition[0]);
+                if (animatable === false)
+                    return false;
+                var from = animatable.from, to = animatable.to, toValueType = animatable.toValueType;
+                var generator = createSpringGenerator({
+                    stiffness: stiffness,
+                    damping: damping,
+                    mass: mass,
+                    velocity: velocity,
+                    from: from,
+                    to: to,
+                });
+                var isComplete = false;
+                var numPregeneratedKeyframes = 0;
+                var t = 0;
+                while (!isComplete) {
+                    numPregeneratedKeyframes++;
+                    var _b = generator.next(t), value = _b.value, done = _b.done;
+                    keyframes.push(toValueType ? toValueType(value) : value);
+                    t += pregenerationResolution;
+                    if (numPregeneratedKeyframes > maxPregeneratedKeyframes) {
+                        // TODO Warn in development mode
+                        isComplete = true;
+                    }
+                    else {
+                        isComplete = done;
+                    }
+                }
+                // TODO Return generator or set to element
+                return { keyframes: keyframes, duration: t };
+            },
+        });
+    };
+
     function hasChanged(a, b) {
@@ -452,0 +841,0 @@ if (typeof a !== typeof b)

package.json

 {
   "name": "motion",
-  "version": "6.0.1-alpha.11",
+  "version": "6.0.1-alpha.12",
   "description": "The Motion library for the web",
@@ -8,3 +8,3 @@ "author": "Matt Perry",
   "module": "dist/es/index.js",
-  "types": "dist/types/index.d.ts",
+  "types": "types/index.d.ts",
   "exports": {
@@ -27,3 +27,3 @@ ".": "./dist/es/index.js",
   "scripts": {
-    "build": "tsc -p . && rollup -c && bundlesize",
+    "build": "rm -rf lib dist types && tsc -p . && rollup -c && bundlesize",
     "test": "jest --coverage --config jest.config.json --maxWorkers=2",
@@ -123,3 +123,3 @@ "test-react": "",
       "path": "./dist/motion.min.js",
-      "maxSize": "4 kB"
+      "maxSize": "5 kB"
     },
@@ -126,0 +126,0 @@ {

Fixed alerts

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Number of low quality alerts

3

-50%

Worsened metrics

Total package byte prevSize

289424

-13.6%

Number of package files

105

-50.24%

Lines of code

7505

-13.65%

No dependency changes