use-scroll-animate 4.0.0 → 4.0.1

package/dist/solid.cjs

@@ -24,16 +24,46 @@ function read(accessor) {
     const v = accessor?.();
     return (v && v !== true ? v : {});
 }
-function observe(el, options) {
-    const { instance, ...opts } = options;
-    const sa = getInstance(instance);
-    // Wait until the element is in the document (directives/refs run before insertion).
-    solidJs.onMount(() => sa.observe(el, opts));
-    solidJs.onCleanup(() => sa.unobserve(el));
+const CALLBACKS = ['onStart', 'onComplete', 'onEnter', 'onLeave', 'onProgress'];
+/** Callbacks always call the latest options' version. */
+function liveCallbacks(opts, latest) {
+    const out = { ...opts };
+    CALLBACKS.forEach((name) => {
+        if (typeof opts[name] === 'function')
+            out[name] = (...args) => latest()[name]?.(...args);
+    });
+    return out;
 }
-/** Directive: `<div use:scrollAnimate={{ animation: 'fade-in' }} />` */
+/**
+ * Directive: `<div use:scrollAnimate={{ animation: 'fade-in' }} />`.
+ * 4.0.1: the accessor is tracked — when signals it reads change, callbacks
+ * update right away and the other options are re-applied if the element has
+ * not animated yet (no manual `refresh()` needed).
+ */
 function scrollAnimate(el, accessor) {
-    observe(el, read(accessor));
+    let latest = {};
+    let mounted = false;
+    let sa = null;
+    const apply = () => {
+        const { instance, ...opts } = latest;
+        const record = sa?.getObservedElements().find((r) => r.element === el);
+        if (sa && record?.animated)
+            return; // finished: callbacks stay live
+        sa?.unobserve(el);
+        sa = getInstance(instance);
+        sa.observe(el, liveCallbacks(opts, () => latest));
+    };
+    solidJs.createRenderEffect(() => {
+        latest = read(accessor);
+        if (mounted)
+            apply();
+    });
+    // Wait until the element is in the document (directives/refs run before insertion).
+    solidJs.onMount(() => {
+        mounted = true;
+        apply();
+    });
+    solidJs.onCleanup(() => sa?.unobserve(el));
 }
 /** Directive: `<ul use:scrollStagger={{ stagger: 60, observeChildren: true }} />` */
 function scrollStagger(el, accessor) {

package/dist/solid.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"solid.cjs","sources":["../src/solid.ts"],"sourcesContent":["/**\n * use-scroll-animate - Solid integration\n *\n * ```tsx\n * import { scrollAnimate, scrollStagger, useScrollAnimate } from 'use-scroll-animate/solid';\n * false && scrollAnimate; // keep the directive import (TypeScript)\n *\n * <div use:scrollAnimate={{ animation: 'zoom-in' }}>…</div>\n * <ul use:scrollStagger={{ stagger: 60 }}>…</ul>\n * <div ref={useScrollAnimate({ animation: 'fade-in-up' })}>…</div>\n * ```\n *\n * `solid-js` is an optional peer dependency (only needed for this entry).\n */\n\nimport { onCleanup, onMount } from 'solid-js';\nimport type { AnimateOptions, ScrollAnimateInstance } from './types';\nimport { createScrollAnimate } from './core';\nimport { staggerChildren, type StaggerOptions } from './stagger';\n\nexport interface SolidScrollAnimateOptions extends AnimateOptions {\n  instance?: ScrollAnimateInstance;\n}\nexport interface SolidScrollStaggerOptions extends StaggerOptions {\n  instance?: ScrollAnimateInstance;\n}\n\ndeclare module 'solid-js' {\n  // eslint-disable-next-line @typescript-eslint/no-namespace\n  namespace JSX {\n    interface Directives {\n      scrollAnimate: SolidScrollAnimateOptions | true;\n      scrollStagger: SolidScrollStaggerOptions | true;\n    }\n  }\n}\n\nlet shared: ScrollAnimateInstance | null = null;\nconst getInstance = (own?: ScrollAnimateInstance) => own || shared || (shared = createScrollAnimate());\n\nfunction read<T>(accessor?: () => T | true | undefined): T {\n  const v = accessor?.();\n  return (v && v !== true ? v : {}) as T;\n}\n\nfunction observe(el: Element, options: SolidScrollAnimateOptions): void {\n  const { instance, ...opts } = options;\n  const sa = getInstance(instance);\n  // Wait until the element is in the document (directives/refs run before insertion).\n  onMount(() => sa.observe(el, opts));\n  onCleanup(() => sa.unobserve(el));\n}\n\n/** Directive: `<div use:scrollAnimate={{ animation: 'fade-in' }} />` */\nexport function scrollAnimate(el: Element, accessor?: () => SolidScrollAnimateOptions | true | undefined): void {\n  observe(el, read(accessor));\n}\n\n/** Directive: `<ul use:scrollStagger={{ stagger: 60, observeChildren: true }} />` */\nexport function scrollStagger(el: Element, accessor?: () => SolidScrollStaggerOptions | true | undefined): void {\n  const { instance, ...opts } = read<SolidScrollStaggerOptions>(accessor);\n  let stop: (() => void) | undefined;\n  onMount(() => {\n    stop = staggerChildren(el, opts, getInstance(instance));\n  });\n  onCleanup(() => stop?.());\n}\n\n/** Primitive returning a `ref` callback: `<div ref={useScrollAnimate({ animation: 'fade-in-up' })} />` */\nexport function useScrollAnimate(options: SolidScrollAnimateOptions = {}): (el: Element) => void {\n  let el: Element | undefined;\n  const { instance, ...opts } = options;\n  const sa = getInstance(instance);\n  onMount(() => el && sa.observe(el, opts));\n  onCleanup(() => el && sa.unobserve(el));\n  return (node: Element) => {\n    el = node;\n  };\n}\n"],"names":["createScrollAnimate","onMount","onCleanup","staggerChildren"],"mappings":";;;;;;AAAA;;;;;;;;;;;;;AAaG;AAwBH,IAAI,MAAM,GAAiC,IAAI;AAC/C,MAAM,WAAW,GAAG,CAAC,GAA2B,KAAK,GAAG,IAAI,MAAM,KAAK,MAAM,GAAGA,wBAAmB,EAAE,CAAC;AAEtG,SAAS,IAAI,CAAI,QAAqC,EAAA;AACpD,IAAA,MAAM,CAAC,GAAG,QAAQ,IAAI;AACtB,IAAA,QAAQ,CAAC,IAAI,CAAC,KAAK,IAAI,GAAG,CAAC,GAAG,EAAE;AAClC;AAEA,SAAS,OAAO,CAAC,EAAW,EAAE,OAAkC,EAAA;IAC9D,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,GAAG,OAAO;AACrC,IAAA,MAAM,EAAE,GAAG,WAAW,CAAC,QAAQ,CAAC;;AAEhC,IAAAC,eAAO,CAAC,MAAM,EAAE,CAAC,OAAO,CAAC,EAAE,EAAE,IAAI,CAAC,CAAC;IACnCC,iBAAS,CAAC,MAAM,EAAE,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC;AACnC;AAEA;AACM,SAAU,aAAa,CAAC,EAAW,EAAE,QAA6D,EAAA;IACtG,OAAO,CAAC,EAAE,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;AAC7B;AAEA;AACM,SAAU,aAAa,CAAC,EAAW,EAAE,QAA6D,EAAA;IACtG,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,GAAG,IAAI,CAA4B,QAAQ,CAAC;AACvE,IAAA,IAAI,IAA8B;IAClCD,eAAO,CAAC,MAAK;AACX,QAAA,IAAI,GAAGE,uBAAe,CAAC,EAAE,EAAE,IAAI,EAAE,WAAW,CAAC,QAAQ,CAAC,CAAC;AACzD,IAAA,CAAC,CAAC;IACFD,iBAAS,CAAC,MAAM,IAAI,IAAI,CAAC;AAC3B;AAEA;AACM,SAAU,gBAAgB,CAAC,OAAA,GAAqC,EAAE,EAAA;AACtE,IAAA,IAAI,EAAuB;IAC3B,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,GAAG,OAAO;AACrC,IAAA,MAAM,EAAE,GAAG,WAAW,CAAC,QAAQ,CAAC;AAChC,IAAAD,eAAO,CAAC,MAAM,EAAE,IAAI,EAAE,CAAC,OAAO,CAAC,EAAE,EAAE,IAAI,CAAC,CAAC;AACzC,IAAAC,iBAAS,CAAC,MAAM,EAAE,IAAI,EAAE,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC;IACvC,OAAO,CAAC,IAAa,KAAI;QACvB,EAAE,GAAG,IAAI;AACX,IAAA,CAAC;AACH;;;;;;"}
+{"version":3,"file":"solid.cjs","sources":["../src/solid.ts"],"sourcesContent":["/**\n * use-scroll-animate - Solid integration\n *\n * ```tsx\n * import { scrollAnimate, scrollStagger, useScrollAnimate } from 'use-scroll-animate/solid';\n * false && scrollAnimate; // keep the directive import (TypeScript)\n *\n * <div use:scrollAnimate={{ animation: 'zoom-in' }}>…</div>\n * <ul use:scrollStagger={{ stagger: 60 }}>…</ul>\n * <div ref={useScrollAnimate({ animation: 'fade-in-up' })}>…</div>\n * ```\n *\n * `solid-js` is an optional peer dependency (only needed for this entry).\n */\n\nimport { createRenderEffect, onCleanup, onMount } from 'solid-js';\nimport type { AnimateOptions, ScrollAnimateInstance } from './types';\nimport { createScrollAnimate } from './core';\nimport { staggerChildren, type StaggerOptions } from './stagger';\n\nexport interface SolidScrollAnimateOptions extends AnimateOptions {\n  instance?: ScrollAnimateInstance;\n}\nexport interface SolidScrollStaggerOptions extends StaggerOptions {\n  instance?: ScrollAnimateInstance;\n}\n\ndeclare module 'solid-js' {\n  // eslint-disable-next-line @typescript-eslint/no-namespace\n  namespace JSX {\n    interface Directives {\n      scrollAnimate: SolidScrollAnimateOptions | true;\n      scrollStagger: SolidScrollStaggerOptions | true;\n    }\n  }\n}\n\nlet shared: ScrollAnimateInstance | null = null;\nconst getInstance = (own?: ScrollAnimateInstance) => own || shared || (shared = createScrollAnimate());\n\nfunction read<T>(accessor?: () => T | true | undefined): T {\n  const v = accessor?.();\n  return (v && v !== true ? v : {}) as T;\n}\n\nconst CALLBACKS = ['onStart', 'onComplete', 'onEnter', 'onLeave', 'onProgress'] as const;\n\n/** Callbacks always call the latest options' version. */\nfunction liveCallbacks(opts: AnimateOptions, latest: () => AnimateOptions): AnimateOptions {\n  const out: AnimateOptions = { ...opts };\n  CALLBACKS.forEach((name) => {\n    if (typeof opts[name] === 'function') (out as any)[name] = (...args: unknown[]) => (latest()[name] as any)?.(...args);\n  });\n  return out;\n}\n\n/**\n * Directive: `<div use:scrollAnimate={{ animation: 'fade-in' }} />`.\n * 4.0.1: the accessor is tracked — when signals it reads change, callbacks\n * update right away and the other options are re-applied if the element has\n * not animated yet (no manual `refresh()` needed).\n */\nexport function scrollAnimate(el: Element, accessor?: () => SolidScrollAnimateOptions | true | undefined): void {\n  let latest: SolidScrollAnimateOptions = {};\n  let mounted = false;\n  let sa: ScrollAnimateInstance | null = null;\n  const apply = () => {\n    const { instance, ...opts } = latest;\n    const record = sa?.getObservedElements().find((r) => r.element === el);\n    if (sa && record?.animated) return; // finished: callbacks stay live\n    sa?.unobserve(el);\n    sa = getInstance(instance);\n    sa.observe(el, liveCallbacks(opts, () => latest));\n  };\n  createRenderEffect(() => {\n    latest = read<SolidScrollAnimateOptions>(accessor);\n    if (mounted) apply();\n  });\n  // Wait until the element is in the document (directives/refs run before insertion).\n  onMount(() => {\n    mounted = true;\n    apply();\n  });\n  onCleanup(() => sa?.unobserve(el));\n}\n\n/** Directive: `<ul use:scrollStagger={{ stagger: 60, observeChildren: true }} />` */\nexport function scrollStagger(el: Element, accessor?: () => SolidScrollStaggerOptions | true | undefined): void {\n  const { instance, ...opts } = read<SolidScrollStaggerOptions>(accessor);\n  let stop: (() => void) | undefined;\n  onMount(() => {\n    stop = staggerChildren(el, opts, getInstance(instance));\n  });\n  onCleanup(() => stop?.());\n}\n\n/** Primitive returning a `ref` callback: `<div ref={useScrollAnimate({ animation: 'fade-in-up' })} />` */\nexport function useScrollAnimate(options: SolidScrollAnimateOptions = {}): (el: Element) => void {\n  let el: Element | undefined;\n  const { instance, ...opts } = options;\n  const sa = getInstance(instance);\n  onMount(() => el && sa.observe(el, opts));\n  onCleanup(() => el && sa.unobserve(el));\n  return (node: Element) => {\n    el = node;\n  };\n}\n"],"names":["createScrollAnimate","createRenderEffect","onMount","onCleanup","staggerChildren"],"mappings":"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"}

package/dist/solid.d.cts

@@ -219,7 +219,12 @@ declare module 'solid-js' {
         }
     }
 }
-/** Directive: `<div use:scrollAnimate={{ animation: 'fade-in' }} />` */
+/**
+ * Directive: `<div use:scrollAnimate={{ animation: 'fade-in' }} />`.
+ * 4.0.1: the accessor is tracked — when signals it reads change, callbacks
+ * update right away and the other options are re-applied if the element has
+ * not animated yet (no manual `refresh()` needed).
+ */
 declare function scrollAnimate(el: Element, accessor?: () => SolidScrollAnimateOptions | true | undefined): void;
 /** Directive: `<ul use:scrollStagger={{ stagger: 60, observeChildren: true }} />` */
 declare function scrollStagger(el: Element, accessor?: () => SolidScrollStaggerOptions | true | undefined): void;

package/dist/solid.d.ts

@@ -219,7 +219,12 @@ declare module 'solid-js' {
         }
     }
 }
-/** Directive: `<div use:scrollAnimate={{ animation: 'fade-in' }} />` */
+/**
+ * Directive: `<div use:scrollAnimate={{ animation: 'fade-in' }} />`.
+ * 4.0.1: the accessor is tracked — when signals it reads change, callbacks
+ * update right away and the other options are re-applied if the element has
+ * not animated yet (no manual `refresh()` needed).
+ */
 declare function scrollAnimate(el: Element, accessor?: () => SolidScrollAnimateOptions | true | undefined): void;
 /** Directive: `<ul use:scrollStagger={{ stagger: 60, observeChildren: true }} />` */
 declare function scrollStagger(el: Element, accessor?: () => SolidScrollStaggerOptions | true | undefined): void;

package/dist/solid.js

@@ -1,4 +1,4 @@
-import { onMount, onCleanup } from 'solid-js';
+import { createRenderEffect, onMount, onCleanup } from 'solid-js';
 import { c as createScrollAnimate } from './chunks/core-mV_TPgG_.js';
 import { s as staggerChildren } from './chunks/stagger-BFAhKknX.js';
 
@@ -22,16 +22,46 @@ function read(accessor) {
     const v = accessor?.();
     return (v && v !== true ? v : {});
 }
-function observe(el, options) {
-    const { instance, ...opts } = options;
-    const sa = getInstance(instance);
-    // Wait until the element is in the document (directives/refs run before insertion).
-    onMount(() => sa.observe(el, opts));
-    onCleanup(() => sa.unobserve(el));
+const CALLBACKS = ['onStart', 'onComplete', 'onEnter', 'onLeave', 'onProgress'];
+/** Callbacks always call the latest options' version. */
+function liveCallbacks(opts, latest) {
+    const out = { ...opts };
+    CALLBACKS.forEach((name) => {
+        if (typeof opts[name] === 'function')
+            out[name] = (...args) => latest()[name]?.(...args);
+    });
+    return out;
 }
-/** Directive: `<div use:scrollAnimate={{ animation: 'fade-in' }} />` */
+/**
+ * Directive: `<div use:scrollAnimate={{ animation: 'fade-in' }} />`.
+ * 4.0.1: the accessor is tracked — when signals it reads change, callbacks
+ * update right away and the other options are re-applied if the element has
+ * not animated yet (no manual `refresh()` needed).
+ */
 function scrollAnimate(el, accessor) {
-    observe(el, read(accessor));
+    let latest = {};
+    let mounted = false;
+    let sa = null;
+    const apply = () => {
+        const { instance, ...opts } = latest;
+        const record = sa?.getObservedElements().find((r) => r.element === el);
+        if (sa && record?.animated)
+            return; // finished: callbacks stay live
+        sa?.unobserve(el);
+        sa = getInstance(instance);
+        sa.observe(el, liveCallbacks(opts, () => latest));
+    };
+    createRenderEffect(() => {
+        latest = read(accessor);
+        if (mounted)
+            apply();
+    });
+    // Wait until the element is in the document (directives/refs run before insertion).
+    onMount(() => {
+        mounted = true;
+        apply();
+    });
+    onCleanup(() => sa?.unobserve(el));
 }
 /** Directive: `<ul use:scrollStagger={{ stagger: 60, observeChildren: true }} />` */
 function scrollStagger(el, accessor) {

package/dist/solid.js.map

@@ -1 +1 @@
-{"version":3,"file":"solid.js","sources":["../src/solid.ts"],"sourcesContent":["/**\n * use-scroll-animate - Solid integration\n *\n * ```tsx\n * import { scrollAnimate, scrollStagger, useScrollAnimate } from 'use-scroll-animate/solid';\n * false && scrollAnimate; // keep the directive import (TypeScript)\n *\n * <div use:scrollAnimate={{ animation: 'zoom-in' }}>…</div>\n * <ul use:scrollStagger={{ stagger: 60 }}>…</ul>\n * <div ref={useScrollAnimate({ animation: 'fade-in-up' })}>…</div>\n * ```\n *\n * `solid-js` is an optional peer dependency (only needed for this entry).\n */\n\nimport { onCleanup, onMount } from 'solid-js';\nimport type { AnimateOptions, ScrollAnimateInstance } from './types';\nimport { createScrollAnimate } from './core';\nimport { staggerChildren, type StaggerOptions } from './stagger';\n\nexport interface SolidScrollAnimateOptions extends AnimateOptions {\n  instance?: ScrollAnimateInstance;\n}\nexport interface SolidScrollStaggerOptions extends StaggerOptions {\n  instance?: ScrollAnimateInstance;\n}\n\ndeclare module 'solid-js' {\n  // eslint-disable-next-line @typescript-eslint/no-namespace\n  namespace JSX {\n    interface Directives {\n      scrollAnimate: SolidScrollAnimateOptions | true;\n      scrollStagger: SolidScrollStaggerOptions | true;\n    }\n  }\n}\n\nlet shared: ScrollAnimateInstance | null = null;\nconst getInstance = (own?: ScrollAnimateInstance) => own || shared || (shared = createScrollAnimate());\n\nfunction read<T>(accessor?: () => T | true | undefined): T {\n  const v = accessor?.();\n  return (v && v !== true ? v : {}) as T;\n}\n\nfunction observe(el: Element, options: SolidScrollAnimateOptions): void {\n  const { instance, ...opts } = options;\n  const sa = getInstance(instance);\n  // Wait until the element is in the document (directives/refs run before insertion).\n  onMount(() => sa.observe(el, opts));\n  onCleanup(() => sa.unobserve(el));\n}\n\n/** Directive: `<div use:scrollAnimate={{ animation: 'fade-in' }} />` */\nexport function scrollAnimate(el: Element, accessor?: () => SolidScrollAnimateOptions | true | undefined): void {\n  observe(el, read(accessor));\n}\n\n/** Directive: `<ul use:scrollStagger={{ stagger: 60, observeChildren: true }} />` */\nexport function scrollStagger(el: Element, accessor?: () => SolidScrollStaggerOptions | true | undefined): void {\n  const { instance, ...opts } = read<SolidScrollStaggerOptions>(accessor);\n  let stop: (() => void) | undefined;\n  onMount(() => {\n    stop = staggerChildren(el, opts, getInstance(instance));\n  });\n  onCleanup(() => stop?.());\n}\n\n/** Primitive returning a `ref` callback: `<div ref={useScrollAnimate({ animation: 'fade-in-up' })} />` */\nexport function useScrollAnimate(options: SolidScrollAnimateOptions = {}): (el: Element) => void {\n  let el: Element | undefined;\n  const { instance, ...opts } = options;\n  const sa = getInstance(instance);\n  onMount(() => el && sa.observe(el, opts));\n  onCleanup(() => el && sa.unobserve(el));\n  return (node: Element) => {\n    el = node;\n  };\n}\n"],"names":[],"mappings":";;;;AAAA;;;;;;;;;;;;;AAaG;AAwBH,IAAI,MAAM,GAAiC,IAAI;AAC/C,MAAM,WAAW,GAAG,CAAC,GAA2B,KAAK,GAAG,IAAI,MAAM,KAAK,MAAM,GAAG,mBAAmB,EAAE,CAAC;AAEtG,SAAS,IAAI,CAAI,QAAqC,EAAA;AACpD,IAAA,MAAM,CAAC,GAAG,QAAQ,IAAI;AACtB,IAAA,QAAQ,CAAC,IAAI,CAAC,KAAK,IAAI,GAAG,CAAC,GAAG,EAAE;AAClC;AAEA,SAAS,OAAO,CAAC,EAAW,EAAE,OAAkC,EAAA;IAC9D,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,GAAG,OAAO;AACrC,IAAA,MAAM,EAAE,GAAG,WAAW,CAAC,QAAQ,CAAC;;AAEhC,IAAA,OAAO,CAAC,MAAM,EAAE,CAAC,OAAO,CAAC,EAAE,EAAE,IAAI,CAAC,CAAC;IACnC,SAAS,CAAC,MAAM,EAAE,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC;AACnC;AAEA;AACM,SAAU,aAAa,CAAC,EAAW,EAAE,QAA6D,EAAA;IACtG,OAAO,CAAC,EAAE,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;AAC7B;AAEA;AACM,SAAU,aAAa,CAAC,EAAW,EAAE,QAA6D,EAAA;IACtG,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,GAAG,IAAI,CAA4B,QAAQ,CAAC;AACvE,IAAA,IAAI,IAA8B;IAClC,OAAO,CAAC,MAAK;AACX,QAAA,IAAI,GAAG,eAAe,CAAC,EAAE,EAAE,IAAI,EAAE,WAAW,CAAC,QAAQ,CAAC,CAAC;AACzD,IAAA,CAAC,CAAC;IACF,SAAS,CAAC,MAAM,IAAI,IAAI,CAAC;AAC3B;AAEA;AACM,SAAU,gBAAgB,CAAC,OAAA,GAAqC,EAAE,EAAA;AACtE,IAAA,IAAI,EAAuB;IAC3B,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,GAAG,OAAO;AACrC,IAAA,MAAM,EAAE,GAAG,WAAW,CAAC,QAAQ,CAAC;AAChC,IAAA,OAAO,CAAC,MAAM,EAAE,IAAI,EAAE,CAAC,OAAO,CAAC,EAAE,EAAE,IAAI,CAAC,CAAC;AACzC,IAAA,SAAS,CAAC,MAAM,EAAE,IAAI,EAAE,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC;IACvC,OAAO,CAAC,IAAa,KAAI;QACvB,EAAE,GAAG,IAAI;AACX,IAAA,CAAC;AACH;;;;"}
+{"version":3,"file":"solid.js","sources":["../src/solid.ts"],"sourcesContent":["/**\n * use-scroll-animate - Solid integration\n *\n * ```tsx\n * import { scrollAnimate, scrollStagger, useScrollAnimate } from 'use-scroll-animate/solid';\n * false && scrollAnimate; // keep the directive import (TypeScript)\n *\n * <div use:scrollAnimate={{ animation: 'zoom-in' }}>…</div>\n * <ul use:scrollStagger={{ stagger: 60 }}>…</ul>\n * <div ref={useScrollAnimate({ animation: 'fade-in-up' })}>…</div>\n * ```\n *\n * `solid-js` is an optional peer dependency (only needed for this entry).\n */\n\nimport { createRenderEffect, onCleanup, onMount } from 'solid-js';\nimport type { AnimateOptions, ScrollAnimateInstance } from './types';\nimport { createScrollAnimate } from './core';\nimport { staggerChildren, type StaggerOptions } from './stagger';\n\nexport interface SolidScrollAnimateOptions extends AnimateOptions {\n  instance?: ScrollAnimateInstance;\n}\nexport interface SolidScrollStaggerOptions extends StaggerOptions {\n  instance?: ScrollAnimateInstance;\n}\n\ndeclare module 'solid-js' {\n  // eslint-disable-next-line @typescript-eslint/no-namespace\n  namespace JSX {\n    interface Directives {\n      scrollAnimate: SolidScrollAnimateOptions | true;\n      scrollStagger: SolidScrollStaggerOptions | true;\n    }\n  }\n}\n\nlet shared: ScrollAnimateInstance | null = null;\nconst getInstance = (own?: ScrollAnimateInstance) => own || shared || (shared = createScrollAnimate());\n\nfunction read<T>(accessor?: () => T | true | undefined): T {\n  const v = accessor?.();\n  return (v && v !== true ? v : {}) as T;\n}\n\nconst CALLBACKS = ['onStart', 'onComplete', 'onEnter', 'onLeave', 'onProgress'] as const;\n\n/** Callbacks always call the latest options' version. */\nfunction liveCallbacks(opts: AnimateOptions, latest: () => AnimateOptions): AnimateOptions {\n  const out: AnimateOptions = { ...opts };\n  CALLBACKS.forEach((name) => {\n    if (typeof opts[name] === 'function') (out as any)[name] = (...args: unknown[]) => (latest()[name] as any)?.(...args);\n  });\n  return out;\n}\n\n/**\n * Directive: `<div use:scrollAnimate={{ animation: 'fade-in' }} />`.\n * 4.0.1: the accessor is tracked — when signals it reads change, callbacks\n * update right away and the other options are re-applied if the element has\n * not animated yet (no manual `refresh()` needed).\n */\nexport function scrollAnimate(el: Element, accessor?: () => SolidScrollAnimateOptions | true | undefined): void {\n  let latest: SolidScrollAnimateOptions = {};\n  let mounted = false;\n  let sa: ScrollAnimateInstance | null = null;\n  const apply = () => {\n    const { instance, ...opts } = latest;\n    const record = sa?.getObservedElements().find((r) => r.element === el);\n    if (sa && record?.animated) return; // finished: callbacks stay live\n    sa?.unobserve(el);\n    sa = getInstance(instance);\n    sa.observe(el, liveCallbacks(opts, () => latest));\n  };\n  createRenderEffect(() => {\n    latest = read<SolidScrollAnimateOptions>(accessor);\n    if (mounted) apply();\n  });\n  // Wait until the element is in the document (directives/refs run before insertion).\n  onMount(() => {\n    mounted = true;\n    apply();\n  });\n  onCleanup(() => sa?.unobserve(el));\n}\n\n/** Directive: `<ul use:scrollStagger={{ stagger: 60, observeChildren: true }} />` */\nexport function scrollStagger(el: Element, accessor?: () => SolidScrollStaggerOptions | true | undefined): void {\n  const { instance, ...opts } = read<SolidScrollStaggerOptions>(accessor);\n  let stop: (() => void) | undefined;\n  onMount(() => {\n    stop = staggerChildren(el, opts, getInstance(instance));\n  });\n  onCleanup(() => stop?.());\n}\n\n/** Primitive returning a `ref` callback: `<div ref={useScrollAnimate({ animation: 'fade-in-up' })} />` */\nexport function useScrollAnimate(options: SolidScrollAnimateOptions = {}): (el: Element) => void {\n  let el: Element | undefined;\n  const { instance, ...opts } = options;\n  const sa = getInstance(instance);\n  onMount(() => el && sa.observe(el, opts));\n  onCleanup(() => el && sa.unobserve(el));\n  return (node: Element) => {\n    el = node;\n  };\n}\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "use-scroll-animate",
-  "version": "4.0.0",
+  "version": "4.0.1",
   "description": "A lightweight, high-performance, dependency-free scroll animation library and animated UI components (Web Components) for the web and Windows web-view apps.",
   "type": "module",
   "main": "./dist/index.cjs",