@infinityfx/lively 4.0.0-beta.10 → 4.0.0-beta.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/animatable.js +1 -1
- package/dist/hooks/use-scroll.js +1 -1
- package/dist/hooks/use-viewport.js +1 -1
- package/dist/layout/layout-group.js +1 -1
- package/dist/layout/morph.js +1 -1
- package/dist/types/animatable.d.ts +0 -1
- package/dist/types/core/clip.d.ts +1 -2
- package/dist/types/core/utils.d.ts +0 -1
- package/dist/types/hooks/use-audio.d.ts +0 -1
- package/dist/types/hooks/use-path.d.ts +0 -1
- package/dist/types/hooks/use-scroll.d.ts +0 -1
- package/dist/types/hooks/use-viewport.d.ts +0 -1
- package/dist/types/hooks/use-visible.d.ts +0 -1
- package/dist/types/layout/layout-group.d.ts +2 -2
- package/package.json +9 -9
- package/dist/hooks/use-mount-effect.js +0 -2
- package/dist/hooks/use-mount-effect.js.map +0 -1
- package/dist/types/hooks/use-mount-effect.d.ts +0 -3
package/dist/animatable.js
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import{__rest as e}from"tslib";import{jsx as n}from"react/jsx-runtime";import{createContext as r,useRef as t,use as i,useMemo as
|
|
2
|
+
import{__rest as e}from"tslib";import{jsx as n}from"react/jsx-runtime";import{createContext as r,useRef as t,use as i,useMemo as a,useCallback as o,useImperativeHandle as s,useEffect as u,useLayoutEffect as l,Children as c,isValidElement as d,cloneElement as m}from"react";import p from"./core/clip.js";import f from"./core/timeline.js";import{merge as h,pick as v,combineRefs as g}from"./core/utils.js";const y=r(null);function b(r){const b=t(null),j=t([]),x=i(y),w=r.inherit&&x?h({},r,v(x,["group","animations","triggers","animate","initial","stagger","staggerLimit","deform","disabled","paused"])):r,{id:O="",inherit:L,triggers:k=[],disabled:E,adaptive:z=!1,manual:A=!1,paused:C}=w,M=void 0!==r.order?r.order:(L&&(null==x?void 0:x.index)||0)+1,D=t([]),T=a((()=>{const e={animate:p.from(w.animate,w.initial)};for(const n in w.animations)e[n]=p.from(w.animations[n],w.initial);return e}),[]),V=t(new f(Object.assign(Object.assign({},w),{mountClips:k.reduce(((e,{name:n,on:r})=>("mount"===r&&e.push(T[n||"animate"]),e)),[])}))),q=o(((e,n={},t=1)=>{var i;const a=T[e];if(E||M>1&&t<2)return 0;h(n,{reverse:null==a?void 0:a.reverse});let o=0,s=n.delay||0,u=a?V.current.time(a):0;for(const r of j.current)(null===(i=r.current)||void 0===i?void 0:i.inherit)&&(o=Math.max(r.current.play(e,h({delay:s+u},n),t+1),o));const l=(n.reverse?o:s)*(M/t);return a&&V.current.add(a,h({delay:l},n)),r.onAnimationEnd&&setTimeout(r.onAnimationEnd.bind({},e),1e3*(u+l)),u+l}),[E,M]);function B(n,r={}){let t=0;for(let i of k){const{name:a,on:o}=i,s=e(i,["name","on"]);o===n&&(t=Math.max(q(a||"animate",h(s,r)),t))}return t}return s(g(b,r.ref),(()=>({play:q,trigger:B,timeline:V.current,children:j.current,inherit:L,adaptive:z,group:w.group,id:O})),[k]),u((()=>V.current.pause(!(!C&&!E))),[C,E]),u((()=>{for(let n=0;n<k.length;n++){let r=k[n],{name:t,on:i}=r,a=e(r,["name","on"]);if("string"==typeof i)continue;const o="boolean"==typeof i?i:i.called,s=D.current[n];void 0!==s&&o&&o!==s&&q(t||"animate",a),D.current[n]=o}}),[k]),l((()=>{const e=()=>V.current.cache();return V.current.link(w.animate),window.addEventListener("resize",e),null==x||x.add(b),document.fonts.ready.then((()=>{A||V.current.mounted||B("mount",{immediate:!0}),V.current.mounted=!0})),()=>{window.removeEventListener("resize",e),V.current.unlink(),null==x||x.remove(b)}}),[]),n(y,{value:Object.assign(Object.assign({},r.passthrough?x:Object.assign({index:M},w)),{add:e=>{r.passthrough&&(null==x||x.add(e)),j.current.includes(e)||j.current.push(e)},remove:e=>{r.passthrough&&(null==x||x.remove(e));const n=j.current.indexOf(e)||-1;n>=0&&j.current.splice(n,1)}}),children:c.map(r.children,(e=>d(e)?m(e,{ref:g((e=>V.current.insert(e)),e.props.ref),pathLength:1,style:h({backfaceVisibility:"hidden",willChange:"transform"},e.props.style,T.animate.initial,{strokeDasharray:1}),"data-lively-offset-boundary":!(!["x","y"].some((e=>{var n;return null===(n=r.cachable)||void 0===n?void 0:n.includes(e)}))&&void 0!==r.cachable)||void 0}):e))})}b.isLively=!0;export{y as AnimatableContext,b as default};
|
|
3
3
|
//# sourceMappingURL=animatable.js.map
|
package/dist/hooks/use-scroll.js
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import t
|
|
2
|
+
import{useLayoutEffect as t}from"react";import e from"./use-link.js";function r({restore:r=0,target:o}={}){const n=e({x:0,y:0,top:0,left:0});return t((()=>{const t=(null==o?void 0:o.current)?o.current:window;function e(t){const e=(null==o?void 0:o.current)||document.documentElement,r=e.scrollLeft,l=r/(e.scrollWidth-e.clientWidth||1),c=e.scrollTop,i=c/(e.scrollHeight-e.clientHeight||1);n.set({x:l,y:i,top:c,left:r},{duration:t})}e(r);const l=()=>e();return t.addEventListener("scroll",l),()=>t.removeEventListener("scroll",l)}),[o]),n}export{r as default};
|
|
3
3
|
//# sourceMappingURL=use-scroll.js.map
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import{useRef as e}from"react";import
|
|
2
|
+
import{useRef as e,useLayoutEffect as n}from"react";import t from"./use-link.js";function r(r=.5){const i=e(null),o=t([-1,-1]);return n((()=>{function e(){if(!i.current)return;const{x:e,y:n,width:t,height:d}=i.current.getBoundingClientRect();o.set([(e+t*r)/(window.innerWidth+2*t*(r-.5)),(n+d*r)/(window.innerHeight+2*d*(r-.5))])}return e(),window.addEventListener("scroll",e),window.addEventListener("resize",e),()=>{window.removeEventListener("scroll",e),window.removeEventListener("resize",e)}}),[r]),[i,o]}export{r as default};
|
|
3
3
|
//# sourceMappingURL=use-viewport.js.map
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import{jsx as e}from"react/jsx-runtime";import{useRef as n,useState as r,
|
|
2
|
+
import{jsx as e}from"react/jsx-runtime";import{useRef as n,useState as r,useLayoutEffect as t,Children as o,isValidElement as c,cloneElement as i}from"react";import u from"../animatable.js";import{Groups as d}from"./morph.js";function s(e,n,r=[]){const t="nodes"in e?e.nodes:e;for(let e=0;e<t.length;e++){const o=[...r,e];let c=n(t[e],o);if(c||(c=s(t[e].nodes,n,o)),c)return c}}function l(e,n){return s(e,((e,r)=>{if(e.key===n)return r}))||null}function a(e,n){let r=e[n[0]];for(let e=1;e<n.length&&r;e++)r=r.nodes[n[e]];return r}function m(e,n,r,t){var o;const c=n[n.length-1],i=n.length>1?null===(o=a(e,n.slice(0,-1)))||void 0===o?void 0:o.nodes:e;i&&(t?i.splice(c,r,t):i.splice(c,r))}function f({tree:e,nodes:n,mounting:r,partialIndex:t=[],keys:u=new Set}){return o.forEach(n,((n,o)=>{const d=c(n),s=d&&(Array.isArray(n.props.children)||c(n.props.children)),m=d&&n.type.isLively&&"id"in n.props,p=[...t,o],h=s&&!m?i(n,void 0,[]):n,y=m?n.props.id:"$l."+p.join("");if(m){const n=l(e,y);if(null===n)r.set(y,{node:h,index:p});else{const r=a(e,n);r&&(r.node=h)}}else{const n=a(e,p);n&&n.key.startsWith("$l.")?n.node=h:r.set(y,{node:h,index:p})}s&&!m&&f({tree:e,nodes:n.props.children,mounting:r,partialIndex:p,keys:u}),u.add(y)})),u}function p(e){return e.map((e=>c(e.node)?e.nodes.length?i(e.node,{key:e.key},p(e.nodes)):i(e.node,{key:e.key}):e.node))}function h({children:o,transition:c,initialMount:i=!0}){var a;const h=n(!i),y=n(null),[g,v]=r({}),k=n([]),x=n(new Map),w=n(void 0),j=n(0),E=n(new Set),z=f({tree:k.current,nodes:o,mounting:x.current});if(x.current.forEach(((e,n)=>{z.has(n)||x.current.delete(n)})),s(k.current,(e=>{z.has(e.key)||E.current.add(e.key)})),E.current.size&&y.current){for(const e of y.current.children){const n=null===(a=e.current)||void 0===a?void 0:a.id,r=E.current.has(n);if(e.current&&(r&&z.has(n)&&(e.current.timeline.mounted=!0,E.current.delete(n)),r&&e.current.timeline.mounted)){const n=Date.now()+1e3*e.current.trigger("unmount",{immediate:!0});if(j.current=Math.max(j.current,n),e.current.group){const n=d[e.current.group].get(e.current.timeline);n&&(n.state="unmounted")}e.current.timeline.mounted=!1}}const e=j.current-Date.now();clearTimeout(w.current);const n=(e=!0)=>{E.current.forEach((e=>{const n=l(k.current,e);n&&m(k.current,n,1)})),E.current.clear(),e&&v({})};e>0?w.current=setTimeout(n,e):n(!1)}return!E.current.size&&x.current.size&&(x.current.forEach((({node:e,index:n},r)=>{m(k.current,n,0,{key:r,node:e,nodes:[]})})),x.current.clear()),t((()=>{var e;if(y.current){for(const n of y.current.children)h.current&&n.current&&(n.current.timeline.mounted=!0),(null===(e=n.current)||void 0===e?void 0:e.id)&&n.current.timeline.mounted&&n.current.adaptive&&null!==l(k.current,n.current.id)&&n.current.timeline.transition(void 0,c);h.current=!1}})),e(u,{ref:y,passthrough:!0,cachable:[],children:p(k.current)})}export{h as default};
|
|
3
3
|
//# sourceMappingURL=layout-group.js.map
|
package/dist/layout/morph.js
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import{__rest as t}from"tslib";import{jsx as e}from"react/jsx-runtime";import{use as
|
|
2
|
+
import{__rest as t}from"tslib";import{jsx as e}from"react/jsx-runtime";import{use as r,useRef as n,useLayoutEffect as o}from"react";import i,{AnimatableContext as u}from"../animatable.js";import{combineRefs as s}from"../core/utils.js";const a={};function m(m){var{children:l,group:c,transition:d}=m,f=t(m,["children","group","transition"]);const p=r(u),g=(null==p?void 0:p.group)?`${p.group}.${c}`:c;g in a||(a[g]=new Map);const v=n(null);return o((()=>{var t,e;const r=null===(t=v.current)||void 0===t?void 0:t.timeline;if(!r)return;if(a[g].has(r)){a[g].get(r).state="mounted"}else a[g].set(r,{state:"mounted"});const n=Array.from(a[g].entries()).find((([t,e])=>"unmounted"===e.state));return n&&!r.mounted?(r.transition(n[0],d),n[1].state="collected"):r.mounted||null===(e=v.current)||void 0===e||e.trigger("mount"),r.mounted=!0,()=>{const t=a[g].get(r);t.state="unmounted",setTimeout((()=>t.state="collected"),1)}}),[]),e(i,Object.assign({},f,{group:g,manual:!0,ref:s(v,f.ref),children:l}))}m.isLively=!0;export{a as Groups,m as default};
|
|
3
3
|
//# sourceMappingURL=morph.js.map
|
|
@@ -1,7 +1,6 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
1
|
import { Link } from "./link";
|
|
3
2
|
import type Track from "./track";
|
|
4
|
-
export type Easing = 'linear' | 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'step-start' | 'step-end';
|
|
3
|
+
export type Easing = 'linear' | 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'step-start' | 'step-end' | (string & {});
|
|
5
4
|
export type AnimatableKey = keyof React.CSSProperties | 'strokeLength';
|
|
6
5
|
export type AnimatableKeyframe = string | number | null | {
|
|
7
6
|
value?: string | number;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
1
|
import type { TransitionOptions } from "../core/track";
|
|
3
|
-
export default function LayoutGroup({ children, transition }: {
|
|
2
|
+
export default function LayoutGroup({ children, transition, initialMount }: {
|
|
4
3
|
children: React.ReactNode;
|
|
5
4
|
transition?: Omit<TransitionOptions, 'reverse'>;
|
|
5
|
+
initialMount?: boolean;
|
|
6
6
|
}): import("react/jsx-runtime").JSX.Element;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@infinityfx/lively",
|
|
3
|
-
"version": "4.0.0-beta.
|
|
3
|
+
"version": "4.0.0-beta.12",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "Feature complete, lightweight react animation library.",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -52,25 +52,25 @@
|
|
|
52
52
|
"watch": "rollup -c -w"
|
|
53
53
|
},
|
|
54
54
|
"dependencies": {
|
|
55
|
-
"tslib": "^2.6.
|
|
55
|
+
"tslib": "^2.6.3"
|
|
56
56
|
},
|
|
57
57
|
"peerDependencies": {
|
|
58
58
|
"react": ">=19.0.0",
|
|
59
59
|
"react-dom": ">=19.0.0"
|
|
60
60
|
},
|
|
61
61
|
"devDependencies": {
|
|
62
|
-
"@rollup/plugin-commonjs": "^
|
|
62
|
+
"@rollup/plugin-commonjs": "^26.0.1",
|
|
63
63
|
"@rollup/plugin-node-resolve": "^15.2.3",
|
|
64
64
|
"@rollup/plugin-terser": "^0.4.4",
|
|
65
65
|
"@rollup/plugin-typescript": "^11.1.6",
|
|
66
|
-
"@types/react": "npm:types-react@^19.0.0-rc.
|
|
67
|
-
"@types/react-dom": "npm:types-react-dom@^19.0.0-rc.
|
|
68
|
-
"react": "^19.0.0-rc-
|
|
69
|
-
"react-dom": "^19.0.0-rc-
|
|
70
|
-
"rollup": "^4.
|
|
66
|
+
"@types/react": "npm:types-react@^19.0.0-rc.1",
|
|
67
|
+
"@types/react-dom": "npm:types-react-dom@^19.0.0-rc.1",
|
|
68
|
+
"react": "^19.0.0-rc-ab2135c7-20240724",
|
|
69
|
+
"react-dom": "^19.0.0-rc-ab2135c7-20240724",
|
|
70
|
+
"rollup": "^4.18.0",
|
|
71
71
|
"rollup-plugin-delete": "^2.0.0",
|
|
72
72
|
"rollup-plugin-preserve-directives": "^0.4.0",
|
|
73
|
-
"typescript": "^5.
|
|
73
|
+
"typescript": "^5.5.2"
|
|
74
74
|
},
|
|
75
75
|
"sideEffects": false
|
|
76
76
|
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"use-mount-effect.js","sources":["../../src/hooks/use-mount-effect.ts"],"sourcesContent":[null],"names":["useMountEffect","window","useEffect","useLayoutEffect"],"mappings":"uDAEA,MAAMA,EAAmC,oBAAXC,OAAyBC,EAAYC"}
|