@webstudio-is/sdk-components-animation 0.268.0 → 0.270.0
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/lib/components.js +1 -1
- package/package.json +9 -9
package/lib/components.js
CHANGED
|
@@ -52,7 +52,7 @@
|
|
|
52
52
|
}
|
|
53
53
|
}
|
|
54
54
|
`,_(G,{children:[A("style",{dangerouslySetInnerHTML:{__html:r}}),A("noscript",{children:A("style",{dangerouslySetInnerHTML:{__html:i}})})]})},qt=e=>{const n=e.getAnimations().map(r=>{var i;return{id:r.id,name:Ot(r.id),progress:(i=r.effect)==null?void 0:i.getComputedTiming().progress}}),t=[...new Map(n.map(({id:r,name:i,progress:s})=>s==null?[r,`${i}: idle`]:[r,`${i}: ${(s*100).toFixed(1)}%`])).values()];if(t.length===0)return"";const o=Math.max(...t.map(r=>r.length));return t.map(r=>{const i=r.lastIndexOf(" ");if(i===-1)return r.padEnd(o);const s=r.substring(0,i),a=r.substring(i+1),c=o-r.length;return`${s}${" ".repeat(c+1)}${a}`}).join(`
|
|
55
|
-
`)},Rt=R(({debug:e=!1,children:n,action:t,[et]:o,...r},i)=>{const s=ee(),a=ie(s),[c,u]=j(0),[m,l]=j(0),f=O(t?.isPinned),{renderer:d,breakpoints:y,onError:h}=te(ne),g=O(y);P(()=>{const p=new AbortController;return document.addEventListener("visibilitychange",()=>{document.visibilityState==="visible"&&u(w=>w+1)},{signal:p.signal,once:!0}),()=>{p.abort()}},[]),P(()=>{if(d!=="canvas")return;const p=document.querySelector('style[data-webstudio="user-styles"]');if(p===null){console.error('Style element with attribute `data-webstudio="user-styles"` not found');return}if(!(p instanceof HTMLStyleElement))return;let w=Le(p);const v=new MutationObserver(()=>{const C=Le(p);C.symmetricDifference(w).size!==0&&(u(L=>L+1),w=C)});return v.observe(p,{childList:!0,subtree:!0,characterData:!0}),()=>{v.disconnect()}},[a,d]),P(()=>{if(d===void 0)return;const p=new AbortController;return window.addEventListener("resize",()=>{u(w=>w+1)},{signal:p.signal}),()=>{p.abort()}},[a,d]),P(()=>{t?.isPinned!==f.current&&(f.current=t?.isPinned,t!=null&&t.isPinned&&(l(p=>p+1),u(p=>p+1)))},[t?.isPinned]),P(()=>{d!==void 0&&g.current===y&&(g.current=y,u(p=>p+1))},[y,d]),P(()=>{const p=Fe(a),w=document.querySelector(p);if(w===null){console.error(`Element with selector ${p} not found`);return}const v=new MutationObserver(C=>{const L=new Set;C.forEach(T=>{T.type==="childList"&&(T.addedNodes.forEach(E=>{E instanceof HTMLElement&&E.tagName==="STYLE"||E instanceof HTMLElement&&E.tagName==="NOSCRIPT"||L.add(E)}),T.removedNodes.forEach(E=>{L.delete(E)}))}),L.size>0&&u(T=>T+1)});return v.observe(w,{childList:!0,subtree:!1}),w.parentElement!==null&&v.observe(w.parentElement,{childList:!0,subtree:!1}),()=>{v.disconnect()}},[a,m]);const M=d==="canvas",$=M?(t?.isPinned??!1)||(o??!1):!0,x=d===void 0?!1:t?.debug??!1,S=d==="canvas"&&Y.count(n)===0,b=S?"Add the instances you want to animate.":n;return _(G,{children:[t&&$&&A(nt,{fallback:A(Oe,{id:a,action:t,reason:"Client Only"}),children:_(Ye,{fallback:A(Oe,{id:a,action:t,reason:"Suspense"}),children:[_(Ze,{fallback:null,onError:p=>{console.error("Polyfill loading error",p)},children:[A(ot,{}),e&&A(at,{}),d==="canvas"&&A(Pt,{})]}),A(Wt,{id:a,action:t,breakpoints:y,isCanvas:M,onError:h},`${c}`),x&&A(bt,{selector:pe(a),getContent:qt},`${c}-debug`)]})}),Ke("div",{ref:i,[X]:a,...r,style:S?void 0:{display:"contents"},key:m},b)]})}),Ve=(e,n,t)=>{const o=[],r=[];let i;const s=()=>{const m=r.every(Boolean);m!==i&&(e(m),i=m)};let a=n,c=oe("nearest",a);const u=[];for(;c;){const m=o.length;r.push(!1);const l=c===document.scrollingElement?document:c,f=new IntersectionObserver(d=>{d.forEach(y=>{r[m]=y.isIntersecting}),s()},{root:l,rootMargin:t});f.observe(a),o.push(f),u.push(()=>{f.unobserve(a),f.disconnect()}),a=c,c=oe("nearest",a)}return()=>{u.forEach(m=>{m()})}},Ht=e=>{let n;const t=()=>{e(),n=requestAnimationFrame(t)};return n=requestAnimationFrame(t),()=>{cancelAnimationFrame(n)}},_t=String.raw,he=R(({children:e,...n},t)=>{const o=O(null),r=O(null),i=ee(),s=ie(i),a=`${s}-sample`,[c]=j(()=>new Map),[u]=j(()=>_t`
|
|
55
|
+
`)},Rt=R(({debug:e=!1,children:n,action:t,[et]:o,...r},i)=>{const s=ee(),a=ie(s),[c,u]=j(0),[m,l]=j(0),f=O(t?.isPinned),{renderer:d,breakpoints:y,onError:h}=te(ne),g=O(y);P(()=>{const p=new AbortController;return document.addEventListener("visibilitychange",()=>{document.visibilityState==="visible"&&u(w=>w+1)},{signal:p.signal,once:!0}),()=>{p.abort()}},[]),P(()=>{if(d!=="canvas")return;const p=document.querySelector('style[data-webstudio="user-styles"]');if(p===null){console.error('Style element with attribute `data-webstudio="user-styles"` not found');return}if(!(p instanceof HTMLStyleElement))return;let w=Le(p);const v=new MutationObserver(()=>{const C=Le(p);C.symmetricDifference(w).size!==0&&(u(L=>L+1),w=C)});return v.observe(p,{childList:!0,subtree:!0,characterData:!0}),()=>{v.disconnect()}},[a,d]),P(()=>{if(d===void 0)return;const p=new AbortController;return window.addEventListener("resize",()=>{u(w=>w+1)},{signal:p.signal}),()=>{p.abort()}},[a,d]),P(()=>{t?.isPinned!==f.current&&(f.current=t?.isPinned,t!=null&&t.isPinned&&(l(p=>p+1),u(p=>p+1)))},[t?.isPinned]),P(()=>{d!==void 0&&g.current===y&&(g.current=y,u(p=>p+1))},[y,d]),P(()=>{const p=Fe(a),w=document.querySelector(p);if(w===null){console.error(`Element with selector ${p} not found`);return}const v=new MutationObserver(C=>{const L=new Set;C.forEach(T=>{T.type==="childList"&&(T.addedNodes.forEach(E=>{E instanceof HTMLElement&&E.tagName==="STYLE"||E instanceof HTMLElement&&E.tagName==="NOSCRIPT"||L.add(E)}),T.removedNodes.forEach(E=>{L.delete(E)}))}),L.size>0&&u(T=>T+1)});return v.observe(w,{childList:!0,subtree:!1}),d!==void 0&&w.parentElement!==null&&v.observe(w.parentElement,{childList:!0,subtree:!1}),()=>{v.disconnect()}},[a,m,d]);const M=d==="canvas",$=M?(t?.isPinned??!1)||(o??!1):!0,x=d===void 0?!1:t?.debug??!1,S=d==="canvas"&&Y.count(n)===0,b=S?"Add the instances you want to animate.":n;return _(G,{children:[t&&$&&A(nt,{fallback:A(Oe,{id:a,action:t,reason:"Client Only"}),children:_(Ye,{fallback:A(Oe,{id:a,action:t,reason:"Suspense"}),children:[_(Ze,{fallback:null,onError:p=>{console.error("Polyfill loading error",p)},children:[A(ot,{}),e&&A(at,{}),d==="canvas"&&A(Pt,{})]}),A(Wt,{id:a,action:t,breakpoints:y,isCanvas:M,onError:h},`${c}`),x&&A(bt,{selector:pe(a),getContent:qt},`${c}-debug`)]})}),Ke("div",{ref:i,[X]:a,...r,style:S?void 0:{display:"contents"},key:m},b)]})}),Ve=(e,n,t)=>{const o=[],r=[];let i;const s=()=>{const m=r.every(Boolean);m!==i&&(e(m),i=m)};let a=n,c=oe("nearest",a);const u=[];for(;c;){const m=o.length;r.push(!1);const l=c===document.scrollingElement?document:c,f=new IntersectionObserver(d=>{d.forEach(y=>{r[m]=y.isIntersecting}),s()},{root:l,rootMargin:t});f.observe(a),o.push(f),u.push(()=>{f.unobserve(a),f.disconnect()}),a=c,c=oe("nearest",a)}return()=>{u.forEach(m=>{m()})}},Ht=e=>{let n;const t=()=>{e(),n=requestAnimationFrame(t)};return n=requestAnimationFrame(t),()=>{cancelAnimationFrame(n)}},_t=String.raw,he=R(({children:e,...n},t)=>{const o=O(null),r=O(null),i=ee(),s=ie(i),a=`${s}-sample`,[c]=j(()=>new Map),[u]=j(()=>_t`
|
|
56
56
|
#${s} {
|
|
57
57
|
position: fixed;
|
|
58
58
|
visibility: hidden;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@webstudio-is/sdk-components-animation",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.270.0",
|
|
4
4
|
"description": "Webstudio components for animation",
|
|
5
5
|
"author": "Webstudio <github@webstudio.is>",
|
|
6
6
|
"homepage": "https://webstudio.is",
|
|
@@ -44,10 +44,10 @@
|
|
|
44
44
|
"nanostores": "^0.11.3",
|
|
45
45
|
"react-error-boundary": "^5.0.0",
|
|
46
46
|
"shallow-equal": "^3.1.0",
|
|
47
|
-
"@webstudio-is/
|
|
48
|
-
"@webstudio-is/
|
|
49
|
-
"@webstudio-is/
|
|
50
|
-
"@webstudio-is/sdk": "0.
|
|
47
|
+
"@webstudio-is/icons": "0.270.0",
|
|
48
|
+
"@webstudio-is/react-sdk": "0.270.0",
|
|
49
|
+
"@webstudio-is/css-engine": "0.270.0",
|
|
50
|
+
"@webstudio-is/sdk": "0.270.0"
|
|
51
51
|
},
|
|
52
52
|
"devDependencies": {
|
|
53
53
|
"@types/react": "^18.2.70",
|
|
@@ -60,12 +60,12 @@
|
|
|
60
60
|
"type-fest": "^4.37.0",
|
|
61
61
|
"vitest": "^3.1.2",
|
|
62
62
|
"zod": "^3.24.2",
|
|
63
|
-
"@webstudio-is/css-data": "0.268.0",
|
|
64
63
|
"@webstudio-is/design-system": "0.0.0",
|
|
65
|
-
"@webstudio-is/
|
|
64
|
+
"@webstudio-is/css-data": "0.270.0",
|
|
66
65
|
"@webstudio-is/sdk-cli": "^0.94.0",
|
|
67
|
-
"@webstudio-is/
|
|
68
|
-
"@webstudio-is/
|
|
66
|
+
"@webstudio-is/generate-arg-types": "0.0.0",
|
|
67
|
+
"@webstudio-is/sdk-components-react": "0.270.0",
|
|
68
|
+
"@webstudio-is/template": "0.270.0",
|
|
69
69
|
"@webstudio-is/tsconfig": "1.0.7"
|
|
70
70
|
},
|
|
71
71
|
"scripts": {
|