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 @@ {

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

Worsened metrics

Total package byte prevSize

289424

decreased by-13.6%

Number of package files

105

decreased by-50.24%

Lines of code

7505

decreased by-13.65%

No dependency changes