react-animatable - npm Package Compare versions

Comparing version 0.15.0 to 0.15.1

lib/core/utils.d.ts

@@ -14,2 +14,2 @@ export declare const noop: () => void;
 export declare const toArray: <T>(items: T | T[]) => T[];
-export declare const uniqBy: <T extends string | number>(items: T[]) => T[];
+export declare const uniq: <T extends string | number>(items: T[]) => T[];

lib/index.js

 "use client";
-var e=require("react/jsx-runtime"),t=require("react");const n=Object.keys,r=Object.assign,i=Array.isArray,s=(e={},t={})=>{const r=n(e);return r.length===n(t).length&&r.every((n=>e[n]===t[n]))},o=e=>e.reduce(((e,t,n)=>(e[t.key||n]=t,e)),{}),u=t.createContext("update"),c=t.createContext((()=>{})),l=({t:n,i:r})=>{const[i,s]=t.useState(!0),o=t.useRef(!1),l="exit"!==n||!!o.current&&i;return t.useEffect((()=>{"enter"===n&&s(!0)}),[n]),e.jsx(u.Provider,{value:n,children:e.jsx(c.Provider,{value:t.useCallback((e=>{2===e?s(!1):o.current=1===e}),[]),children:l?r:null})})},a=(e,t,n,r)=>{const i={fill:"both",...n};try{return new Animation(new KeyframeEffect(e,t,i),r)}catch(n){return e.animate(t,i)}},f=(e,t={})=>{e.playbackRate<0&&"finished"===e.playState&&x(e,(e=>-e)),t.restart&&y(e,0),e.play()},p=e=>{e&&e.reverse()},d=e=>{e&&e.cancel()},m=e=>{e&&e.finish()},v=e=>{e&&e.pause()},y=(e,t)=>{e&&(e.currentTime="function"==typeof t?t(e.effect.getComputedTiming().endTime):t)},x=(e,t)=>{e&&e.updatePlaybackRate("function"==typeof t?t(e.playbackRate):t)},_=(e,t)=>e?new Promise((n=>{e.onfinish=()=>{("finish"===t&&e.playbackRate>0||"reverseFinish"===t&&e.playbackRate<0)&&n()}})):Promise.resolve(),h=e=>{const n=t.useRef();return n.current||(n.current=e())},w="undefined"!=typeof window?t.useLayoutEffect:t.useEffect,b=e=>{const n=t.useRef(e);return w((()=>{n.current=e}),[e]),n},g=new WeakMap,j=e=>g.get(e),k=(e,t,n)=>{return"function"==typeof t?t(getComputedStyle(e),n):i(r=t)?r:[r];var r},F=(...e)=>{const n=b(e),[i,o]=h((()=>{let e,t=null;const i=r=>{if(!t)return;const[i,o={}]=n.current,{timeline:u,...c}=o,l=e;return((e,t,n)=>{const r=n&&j(n);if(r){if(g.delete(n),((e,t)=>{return n=e.o,r=t.o,n.length===r.length&&n.every(((e,t)=>s(e,r[t])))&&s(e.u,t.u);var n,r})(t,n))return g.set(t,r),r;r.cancel()}const i=a(e,t.o,t.u,t.l);return g.set(t,i),i})(t,e={o:k(t,i,r),u:c,l:null==u?void 0:u.p()},l)},o=()=>{var t,n;e&&(null===(n=j(t=e))||void 0===n||n.cancel(),g.delete(t))},u=r((e=>{(t=e)||o()}),{play:(...e)=>{const t=i((e[0]||{}).args);return t&&f(t),u},reverse:()=>(e&&p(j(e)),u),cancel:()=>(e&&d(j(e)),u),finish:()=>(e&&m(j(e)),u),pause:()=>(e&&v(j(e)),u),setTime:t=>{let r=e&&j(e);if(!r){const[e]=n.current;if("function"==typeof e)return u;r=i(void 0)}return y(r,t),u},setPlaybackRate:t=>(e&&x(j(e),t),u),waitFor:t=>_(e&&j(e),t).then((()=>u))});return[u,()=>o]}));return t.useEffect(o,[]),i},P=(e,t,n)=>{const r=()=>{var i;const s=null===(i=e.effect)||void 0===i?void 0:i.getComputedTiming();s&&(null!=s.progress&&t()(s,n),"running"===e.playState&&requestAnimationFrame(r))};e.ready.then(r)};exports.TransitionGroup=({children:n})=>{const r=t.useRef(null),i=r.current||[],s=t.Children.map(n,(e=>e));t.useEffect((()=>{r.current=s}));const u=o(s),c=o(i),a=[];return i.forEach(((t,n)=>{const r=t.key||n;u[r]?a.push(e.jsx(l,{t:"update",i:u[r]},r)):a.push(e.jsx(l,{t:"exit",i:t},r))})),s.forEach(((t,n)=>{const r=t.key||n;c[r]||a.push(e.jsx(l,{t:"enter",i:t},r))})),e.jsx(t.Fragment,{children:a})},exports.useAnimation=F,exports.useAnimationFunction=(e,n)=>{const r=b(e),i=b(n),[o,u]=h((()=>{const e=()=>r.current;let t;const n=(n={})=>{const r=i.current;if(t){const[i,o]=t;if(s(r,o))return"running"!==i.playState&&P(i,e,n.args),i;i.cancel()}const o=a(null,null,r);return P(o,e,n.args),t=[o,r],o},o=()=>null==t?void 0:t[0],u={play:(...e)=>(f(n(e[0]),e[0]),u),reverse:()=>(p(n()),u),cancel:()=>(d(o()),u),finish:()=>(m(o()),u),pause:()=>(v(o()),u),setTime:e=>(y(o(),e),u),setPlaybackRate:e=>(x(o(),e),u),waitFor:e=>_(o(),e).then((()=>u))};return[u,u.cancel]}));return t.useEffect((()=>u),[]),o},exports.useScrollTimeline=(e={})=>{const t=b(e);return h((()=>{let e;return r((t=>{e=t}),{m:1,p:()=>{const{axis:n}=t.current;return new ScrollTimeline({source:e||document.documentElement,axis:n})}})}))},exports.useTransitionAnimation=e=>{const r=n(e),i=r.reduce(((t,n)=>{const r=e[n];return r?(t[n]=F(r[0],r[1]),t):t}),{}),s=b(i),[o,l]=h((()=>{const e=e=>{n(s.current).forEach((t=>e(s.current[t])))};return[t=>{e((e=>{e(t)}))},()=>{e((e=>{e.cancel()}))}]}));t.useEffect((()=>l),[]);const a=t.useContext(u),f=t.useContext(c);return w((()=>{r.includes("exit")?f(1):f(0)}),r),w((()=>{var e;"update"===a&&(null===(e=s.current[a])||void 0===e||e.play())})),w((()=>{var e;"update"!==a&&(null===(e=s.current[a])||void 0===e||e.play().waitFor("finish").then((()=>{"exit"===a&&f(2)})).catch((()=>{})))}),[a]),o},exports.useViewTimeline=(e={})=>{const t=b(e);return h((()=>{let e;return r((t=>{e=t}),{m:2,p:()=>{const{axis:n,inset:r}=t.current;return new ViewTimeline({subject:e||document.documentElement,axis:n,inset:r})}})}))};
+var e=require("react/jsx-runtime"),t=require("react");const n=()=>{},r=Object.keys,i=Object.assign,s=Array.isArray,o=(e={},t={})=>{const n=r(e);return n.length===r(t).length&&n.every((n=>e[n]===t[n]))},u=e=>e.reduce(((e,t,n)=>(e[t.key||n]=t,e)),{}),c=t.createContext("update"),l=t.createContext(n),a=({t:n,i:r})=>{const[i,s]=t.useState(!0),o=t.useRef(!1),u="exit"!==n||!!o.current&&i;return t.useEffect((()=>{"enter"===n&&s(!0)}),[n]),e.jsx(c.Provider,{value:n,children:e.jsx(l.Provider,{value:t.useCallback((e=>{2===e?s(!1):o.current=1===e}),[]),children:u?r:null})})},f=(e,t,n,r)=>{const i={fill:"both",...n};try{return new Animation(new KeyframeEffect(e,t,i),r)}catch(n){return e.animate(t,i)}},p=(e,t={})=>{e.playbackRate<0&&"finished"===e.playState&&_(e,(e=>-e)),t.restart&&x(e,0),e.play()},d=e=>{e&&e.reverse()},m=e=>{e&&e.cancel()},v=e=>{e&&e.finish()},y=e=>{e&&e.pause()},x=(e,t)=>{e&&(e.currentTime="function"==typeof t?t(e.effect.getComputedTiming().endTime):t)},_=(e,t)=>{e&&e.updatePlaybackRate("function"==typeof t?t(e.playbackRate):t)},h=(e,t)=>e?new Promise((n=>{e.onfinish=()=>{("finish"===t&&e.playbackRate>0||"reverseFinish"===t&&e.playbackRate<0)&&n()}})):Promise.resolve(),w=e=>{const n=t.useRef();return n.current||(n.current=e())},b="undefined"!=typeof window?t.useLayoutEffect:t.useEffect,g=e=>{const n=t.useRef(e);return b((()=>{n.current=e}),[e]),n},j=new WeakMap,k=e=>j.get(e),F=(e,t,n)=>{return"function"==typeof t?t(getComputedStyle(e),n):s(r=t)?r:[r];var r},P=(...e)=>{const n=g(e),[r,s]=w((()=>{let e,t=null;const r=r=>{if(!t)return;const[i,s={}]=n.current,{timeline:u,...c}=s,l=e;return((e,t,n)=>{const r=n&&k(n);if(r){if(j.delete(n),((e,t)=>{return n=e.o,r=t.o,n.length===r.length&&n.every(((e,t)=>o(e,r[t])))&&o(e.u,t.u);var n,r})(t,n))return j.set(t,r),r;r.cancel()}const i=f(e,t.o,t.u,t.l);return j.set(t,i),i})(t,e={o:F(t,i,r),u:c,l:null==u?void 0:u.p()},l)},s=()=>{var t,n;e&&(null===(n=k(t=e))||void 0===n||n.cancel(),j.delete(t))},u=i((e=>{(t=e)||s()}),{play:(...e)=>{const t=r((e[0]||{}).args);return t&&p(t),u},reverse:()=>(e&&d(k(e)),u),cancel:()=>(e&&m(k(e)),u),finish:()=>(e&&v(k(e)),u),pause:()=>(e&&y(k(e)),u),setTime:t=>{let i=e&&k(e);if(!i){const[e]=n.current;if("function"==typeof e)return u;i=r(void 0)}return x(i,t),u},setPlaybackRate:t=>(e&&_(k(e),t),u),waitFor:t=>h(e&&k(e),t).then((()=>u))});return[u,()=>s]}));return t.useEffect(s,[]),r},T=(e,t,n)=>{const r=()=>{var i;const s=null===(i=e.effect)||void 0===i?void 0:i.getComputedTiming();s&&(null!=s.progress&&t()(s,n),"running"===e.playState&&requestAnimationFrame(r))};e.ready.then(r)};exports.TransitionGroup=({children:n})=>{const r=t.useRef(null),i=r.current||[],s=t.Children.map(n,(e=>e));t.useEffect((()=>{r.current=s}));const o=u(s),c=u(i),l=[];return i.forEach(((t,n)=>{const r=t.key||n;o[r]?l.push(e.jsx(a,{t:"update",i:o[r]},r)):l.push(e.jsx(a,{t:"exit",i:t},r))})),s.forEach(((t,n)=>{const r=t.key||n;c[r]||l.push(e.jsx(a,{t:"enter",i:t},r))})),e.jsx(t.Fragment,{children:l})},exports.useAnimation=P,exports.useAnimationFunction=(e,n)=>{const r=g(e),i=g(n),[s,u]=w((()=>{const e=()=>r.current;let t;const n=(n={})=>{const r=i.current;if(t){const[i,s]=t;if(o(r,s))return"running"!==i.playState&&T(i,e,n.args),i;i.cancel()}const s=f(null,null,r);return T(s,e,n.args),t=[s,r],s},s=()=>null==t?void 0:t[0],u={play:(...e)=>(p(n(e[0]),e[0]),u),reverse:()=>(d(n()),u),cancel:()=>(m(s()),u),finish:()=>(v(s()),u),pause:()=>(y(s()),u),setTime:e=>(x(s(),e),u),setPlaybackRate:e=>(_(s(),e),u),waitFor:e=>h(s(),e).then((()=>u))};return[u,u.cancel]}));return t.useEffect((()=>u),[]),s},exports.useScrollTimeline=(e={})=>{const t=g(e);return w((()=>{let e;return i((t=>{e=t}),{m:1,p:()=>{const{axis:n}=t.current;return new ScrollTimeline({source:e||document.documentElement,axis:n})}})}))},exports.useTransitionAnimation=e=>{const i=r(e),s=i.reduce(((t,n)=>{const r=e[n];return r?(t[n]=P(r[0],r[1]),t):t}),{}),o=g(s),[u,a]=w((()=>{const e=e=>{r(o.current).forEach((t=>e(o.current[t])))};return[t=>{e((e=>{e(t)}))},()=>{e((e=>{e.cancel()}))}]}));t.useEffect((()=>a),[]);const f=t.useContext(c),p=t.useContext(l);return b((()=>{i.includes("exit")?p(1):p(0)}),i),b((()=>{var e;"update"===f&&(null===(e=o.current[f])||void 0===e||e.play())})),b((()=>{var e;"update"!==f&&(null===(e=o.current[f])||void 0===e||e.play().waitFor("finish").then((()=>{"exit"===f&&p(2)})).catch(n))}),[f]),u},exports.useViewTimeline=(e={})=>{const t=g(e);return w((()=>{let e;return i((t=>{e=t}),{m:2,p:()=>{const{axis:n,inset:r}=t.current;return new ViewTimeline({subject:e||document.documentElement,axis:n,inset:r})}})}))};
 //# sourceMappingURL=index.js.map

lib/react/types/index.d.ts

 import { GetKeyframeFunction, TypedKeyframe, TypedKeyframeEffectOptions } from "../../core";
-import { SCROLL_TIMELINE, VIEW_TIMELINE } from "./internal";
 export interface AnimationOptions extends TypedKeyframeEffectOptions {
@@ -12,12 +11,4 @@ timeline?: TimelineDefinition;
     (el: Element | null): void;
-    /**
-     * @private
-     */
-    _type: typeof SCROLL_TIMELINE | typeof VIEW_TIMELINE;
-    /**
-     * @private
-     */
-    _get: () => AnimationTimeline;
 }
 export type ScrollTimelineAxis = "block" | "inline" | "y" | "x";
 export type ViewTimelineInset = "auto" | (string & {});

package.json

 {
   "name": "react-animatable",
-  "version": "0.15.0",
+  "version": "0.15.1",
   "description": "Tiny(~1kB) animation hooks for React, built on Web Animations API.",
@@ -34,3 +34,3 @@ "main": "lib/index.js",
     "@babel/plugin-transform-react-pure-annotations": "7.22.5",
-    "@chakra-ui/react": "2.8.0",
+    "@chakra-ui/react": "2.8.1",
     "@compiled/react": "0.14.0",
@@ -49,5 +49,5 @@ "@compiled/webpack-loader": "0.9.6",
     "@mui/material": "5.10.16",
-    "@rollup/plugin-babel": "6.0.3",
+    "@rollup/plugin-babel": "6.0.4",
     "@rollup/plugin-terser": "^0.4.1",
-    "@rollup/plugin-typescript": "11.1.3",
+    "@rollup/plugin-typescript": "11.1.4",
     "@size-limit/preset-small-lib": "^8.2.6",
@@ -65,5 +65,5 @@ "@storybook/addon-storysource": "7.4.0",
     "concurrently": "7.2.2",
-    "esbuild": "0.19.2",
+    "esbuild": "0.19.4",
     "esbuild-loader": "4.0.2",
-    "framer-motion": "10.16.2",
+    "framer-motion": "10.16.4",
     "jest": "29.0.2",
@@ -70,0 +70,0 @@ "jest-environment-jsdom": "29.0.2",

README.md

@@ -19,6 +19,4 @@ # react-animatable
 
-Animating something in React can be complicated than we expected, even with today's popular libraries. [In my previous works](#my-previous-experiments-deprecated), I tried finding out proper way to define animation in React but they didn't succeed.
+Animating something in React can be complicated than we expected, even with today's popular libraries. [Web Animations API (WAAPI)](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API) looks like a brand-new promising way, because it's performant, it doesn't need JS runtime, it doesn't mutate style of DOM so it will not conflict with React's state, and it will become more convenient in the future ([ScrollTimeline](https://developer.mozilla.org/en-US/docs/Web/API/ScrollTimeline) and [ViewTimeline](https://developer.mozilla.org/en-US/docs/Web/API/ViewTimeline) is an example). However using raw WAAPI with React is bit tricky and having risks of memory leak. This library is what to solve the problem.
 
-[Web Animations API (WAAPI)](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API) looks like a promising way, because it's performant, it doesn't need JS runtime, it doesn't mutate style of DOM so it will not conflict with React's state, and it will become more convenient in the future ([ScrollTimeline](https://developer.mozilla.org/en-US/docs/Web/API/ScrollTimeline) and [ViewTimeline](https://developer.mozilla.org/en-US/docs/Web/API/ViewTimeline) is an example). However using raw WAAPI with React is bit tricky and having risks of memory leak. This library is what to solve the problem.
-
 ## Demo
@@ -25,0 +23,0 @@

No alert changes

Improved metrics

Total package byte prevSize

141838

increased by11.53%

Worsened metrics

Lines of code

271

decreased by-3.21%

Number of lines in readme file

256

decreased by-0.78%

No dependency changes