nanime 0.0.8 → 0.0.11

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": ">=3.13.5 <5.0.0"
   },
-  "version": "0.0.8",
+  "version": "0.0.11",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/module.mjs

@@ -30,6 +30,7 @@ const module$1 = defineNuxtModule({
           "animejs/layout",
           "animejs/text",
           "animejs/draggable",
+          "animejs/timeline",
           "tailwind-merge",
           "@vueuse/core",
           "lodash-es"
@@ -51,6 +52,7 @@ const module$1 = defineNuxtModule({
     _nuxt.options.alias[`#${__configKey}/types`] = resolver.resolve("./runtime/app/utils/types");
     _nuxt.options.alias[`#${__configKey}/easings`] = resolver.resolve("./runtime/app/utils/easings");
     _nuxt.options.alias[`#${__configKey}/utils`] = resolver.resolve("./runtime/app/utils/index");
+    _nuxt.options.alias[`#${__configKey}/proxies/text`] = resolver.resolve("./runtime/app/utils/proxies/text");
   }
 });
 

package/dist/runtime/app/composables/useAnimatable.js

@@ -3,6 +3,7 @@ import { toReactive, tryOnScopeDispose, useMounted } from "@vueuse/core";
 import { shallowRef, toValue, watchEffect, nextTick } from "vue";
 import { normalizeAnimeTarget } from "../utils/normalize-targets.js";
 import { AnimationComponentFlags, getAnimationComponentFlag } from "../utils/normalizers/instance-management.js";
+import { markNanimeInstance } from "../utils/create-proxy.js";
 export function useAnimatable(target, options) {
   const flag = getAnimationComponentFlag();
   const animatable = shallowRef(createAnimatable({}, {}));
@@ -28,5 +29,7 @@ export function useAnimatable(target, options) {
       animatable.value = newAnimatable;
     });
   }
-  return toReactive(animatable);
+  const result = toReactive(animatable);
+  markNanimeInstance(result, animatable);
+  return result;
 }

package/dist/runtime/app/composables/useAnimate.js

@@ -3,6 +3,7 @@ import { shallowRef, toValue, watchEffect, nextTick } from "vue";
 import { normalizeAnimeTarget } from "../utils/normalize-targets.js";
 import { animate } from "animejs/animation";
 import { AnimationComponentFlags, getAnimationComponentFlag } from "../utils/normalizers/instance-management.js";
+import { markNanimeInstance } from "../utils/create-proxy.js";
 export function useAnimate(target, parameters) {
   const flag = getAnimationComponentFlag();
   const animation = shallowRef(animate({}, {}));
@@ -29,5 +30,7 @@ export function useAnimate(target, parameters) {
       animation.value = newAnimation;
     });
   }
-  return toReactive(animation);
+  const result = toReactive(animation);
+  markNanimeInstance(result, animation);
+  return result;
 }

package/dist/runtime/app/composables/useAnimeTimeline.d.ts

@@ -0,0 +1,12 @@
+import { type MaybeRefOrGetter } from 'vue';
+import type { TimelineParams } from 'animejs';
+import { type Timeline } from 'animejs/timeline';
+import { type ProxyReturns } from '../utils/create-proxy.js';
+/**
+ * Reactive timeline composable. Returns a proxied `Timeline` whose
+ * `.add()`, `.set()` and `.remove()` methods accept Vue template refs,
+ * component refs and `MaybeRefOrGetter` targets alongside raw selectors.
+ *
+ * Calls made before mount are buffered and replayed once the DOM is ready.
+ */
+export declare function useAnimeTimeline(parameters?: MaybeRefOrGetter<TimelineParams>): ProxyReturns<Timeline>;

package/dist/runtime/app/composables/useAnimeTimeline.js

@@ -0,0 +1,51 @@
+import { tryOnScopeDispose, useMounted } from "@vueuse/core";
+import { shallowRef, toValue, watch, nextTick } from "vue";
+import { createTimeline } from "animejs/timeline";
+import { normalizeAnimeTarget } from "../utils/normalize-targets.js";
+import { createBufferedProxy, resolveNanimeInstance } from "../utils/create-proxy.js";
+import { AnimationComponentFlags, getAnimationComponentFlag } from "../utils/normalizers/instance-management.js";
+const CHAINABLE_METHODS = /* @__PURE__ */ new Set(["add", "set", "remove", "call", "label", "sync"]);
+const TARGET_METHODS = /* @__PURE__ */ new Set(["set", "remove"]);
+function isPlainObject(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+export function useAnimeTimeline(parameters) {
+  const flag = getAnimationComponentFlag();
+  const mounted = useMounted();
+  const timeline = shallowRef(null);
+  const { proxy, flushBuffer } = createBufferedProxy(timeline, {
+    chainableMethods: CHAINABLE_METHODS,
+    transformArgs: (method, args) => {
+      if (method === "add" && args.length >= 2 && isPlainObject(args[1])) {
+        return [normalizeAnimeTarget(args[0]), ...args.slice(1)];
+      }
+      if (TARGET_METHODS.has(method)) {
+        return [normalizeAnimeTarget(args[0]), ...args.slice(1)];
+      }
+      if (method === "sync" && args.length >= 1) {
+        return [resolveNanimeInstance(args[0]), ...args.slice(1)];
+      }
+      return args;
+    }
+  });
+  if (flag === AnimationComponentFlags.Watchable) {
+    watch(
+      [mounted, () => toValue(parameters)],
+      () => {
+        if (!mounted.value) return;
+        if (timeline.value) timeline.value.revert();
+        timeline.value = createTimeline(toValue(parameters) || {});
+        flushBuffer();
+      }
+    );
+  } else {
+    nextTick(() => {
+      timeline.value = createTimeline(toValue(parameters) || {});
+      flushBuffer();
+    });
+  }
+  tryOnScopeDispose(() => {
+    timeline.value?.revert();
+  });
+  return proxy;
+}

package/dist/runtime/app/composables/useScambleText.d.ts

@@ -0,0 +1,5 @@
+import { type MaybeRefOrGetter } from 'vue';
+import { normalizeAnimeTarget } from '../utils/normalize-targets.js';
+import type { AnimationParams, ScrambleTextParams } from 'animejs';
+import { type JSAnimation } from 'animejs/animation';
+export declare function useScrambleText(target: Parameters<typeof normalizeAnimeTarget>[0], animationOptions?: MaybeRefOrGetter<AnimationParams>, scrambleOptions?: MaybeRefOrGetter<ScrambleTextParams>): JSAnimation;

package/dist/runtime/app/composables/useScambleText.js

@@ -0,0 +1,41 @@
+import { toReactive, tryOnScopeDispose, useMounted } from "@vueuse/core";
+import { shallowRef, toValue, watchEffect, nextTick } from "vue";
+import { normalizeAnimeTarget } from "../utils/normalize-targets.js";
+import { animate } from "animejs/animation";
+import { scrambleText } from "animejs/text";
+import { AnimationComponentFlags, getAnimationComponentFlag } from "../utils/normalizers/instance-management.js";
+import { markNanimeInstance } from "../utils/create-proxy.js";
+export function useScrambleText(target, animationOptions, scrambleOptions) {
+  const flag = getAnimationComponentFlag();
+  const animation = shallowRef(animate({}, {}));
+  const mounted = useMounted();
+  function buildParams() {
+    const anim = toValue(animationOptions) || {};
+    const scramble = toValue(scrambleOptions) || {};
+    return {
+      ...anim,
+      innerHTML: scrambleText(scramble)
+    };
+  }
+  if (flag === AnimationComponentFlags.Watchable) {
+    watchEffect(() => {
+      if (!mounted.value) return;
+      const targets = normalizeAnimeTarget(target);
+      if (!targets) return;
+      if (animation.value) animation.value.revert();
+      animation.value = animate(targets, buildParams());
+    });
+    tryOnScopeDispose(() => {
+      animation.value?.revert();
+    });
+  } else {
+    nextTick(() => {
+      const targets = normalizeAnimeTarget(target);
+      if (!targets) return;
+      animation.value = animate(targets, buildParams());
+    });
+  }
+  const result = toReactive(animation);
+  markNanimeInstance(result, animation);
+  return result;
+}

package/dist/runtime/app/composables/useWaapiAnimate.js

@@ -3,6 +3,7 @@ import { shallowRef, toValue, watchEffect, nextTick } from "vue";
 import { normalizeWaapiAnimeTarget } from "../utils/normalize-targets.js";
 import { waapi } from "animejs/waapi";
 import { AnimationComponentFlags, getAnimationComponentFlag } from "../utils/normalizers/instance-management.js";
+import { markNanimeInstance } from "../utils/create-proxy.js";
 export function useWaapiAnimate(target, parameters) {
   const flag = getAnimationComponentFlag();
   const animation = shallowRef(waapi.animate([], {}));
@@ -27,5 +28,7 @@ export function useWaapiAnimate(target, parameters) {
       animation.value = newAnimation;
     });
   }
-  return toReactive(animation);
+  const result = toReactive(animation);
+  markNanimeInstance(result, animation);
+  return result;
 }

package/dist/runtime/app/utils/create-proxy.d.ts

@@ -1,4 +1,23 @@
 import type { Ref, UnwrapNestedRefs } from 'vue';
+/**
+ * Symbol used to identify nanime proxy objects and retrieve
+ * the underlying raw anime.js instance ref.
+ * Accessible via proxy[NANIME_INSTANCE] on createProxy / createBufferedProxy returns.
+ */
+export declare const NANIME_INSTANCE: unique symbol;
+/**
+ * Registers a toReactive-based return value so that
+ * `resolveNanimeInstance` can extract the raw anime.js instance.
+ */
+export declare function markNanimeInstance<T>(proxy: object, instanceRef: Ref<T>): void;
+/**
+ * Extracts the raw anime.js instance from a nanime proxy,
+ * or returns the value unchanged if it isn't a proxy.
+ *
+ * Checks the NANIME_INSTANCE symbol first (createProxy / createBufferedProxy),
+ * then falls back to the WeakMap registry (toReactive-based composables).
+ */
+export declare function resolveNanimeInstance<T>(value: unknown): T;
 export type SafeFunctions<T> = {
     [K in keyof T]: T[K] extends (...args: any[]) => any ? ((...args: Parameters<T[K]>) => ReturnType<T[K]>) | undefined : T[K];
 };
@@ -7,3 +26,19 @@ export type ProxyReturns<T> = SafeFunctions<Exclude<UnwrapNestedRefs<T>, null |
  * Converts the object to a reactive version, and stubs null / undefined values
  */
 export declare function createProxy<T = object | null>(objectRef: Ref<T>): ProxyReturns<T>;
+export interface BufferedProxyOptions {
+    /** Methods that support chaining and should be buffered when instance is null */
+    chainableMethods: Set<string>;
+    /** Transform args before passing to the real method (e.g. normalize targets) */
+    transformArgs?: (method: string, args: any[]) => any[];
+}
+/**
+ * Like `createProxy`, but with two additions:
+ * 1. Chainable methods are buffered when the ref is null and replayed on flush.
+ * 2. An optional `transformArgs` hook rewrites arguments before each call
+ *    (used to normalize Vue ref targets into DOM targets).
+ */
+export declare function createBufferedProxy<T>(objectRef: Ref<T | null>, options: BufferedProxyOptions): {
+    proxy: ProxyReturns<T>;
+    flushBuffer: () => void;
+};

package/dist/runtime/app/utils/create-proxy.js

@@ -1,7 +1,23 @@
 import { unref, isRef, reactive } from "vue";
+export const NANIME_INSTANCE = Symbol.for("nanime-instance");
+const nanimeRegistry = /* @__PURE__ */ new WeakMap();
+export function markNanimeInstance(proxy, instanceRef) {
+  nanimeRegistry.set(proxy, instanceRef);
+}
+export function resolveNanimeInstance(value) {
+  if (value && typeof value === "object") {
+    if (NANIME_INSTANCE in value) {
+      return value[NANIME_INSTANCE].value;
+    }
+    const ref = nanimeRegistry.get(value);
+    if (ref) return ref.value;
+  }
+  return value;
+}
 export function createProxy(objectRef) {
   const proxy = new Proxy({}, {
     get(_, p, receiver) {
+      if (p === NANIME_INSTANCE) return objectRef;
       if (!objectRef.value) return void 0;
       return unref(Reflect.get(objectRef.value, p, receiver));
     },
@@ -18,6 +34,7 @@ export function createProxy(objectRef) {
       return Reflect.deleteProperty(objectRef.value, p);
     },
     has(_, p) {
+      if (p === NANIME_INSTANCE) return true;
       if (!objectRef.value) return true;
       return Reflect.has(objectRef.value, p);
     },
@@ -35,3 +52,73 @@ export function createProxy(objectRef) {
   });
   return reactive(proxy);
 }
+export function createBufferedProxy(objectRef, options) {
+  const { chainableMethods, transformArgs } = options;
+  const buffer = [];
+  function applyMethod(instance, method, args) {
+    const transformed = transformArgs ? transformArgs(method, args) : args;
+    const fn = instance[method];
+    if (typeof fn === "function") {
+      fn.apply(instance, transformed);
+    }
+  }
+  function flushBuffer() {
+    if (!objectRef.value) return;
+    for (const entry of buffer) {
+      applyMethod(objectRef.value, entry.method, entry.args);
+    }
+    buffer.length = 0;
+  }
+  const proxy = new Proxy({}, {
+    get(_, p, receiver) {
+      if (p === NANIME_INSTANCE) return objectRef;
+      if (typeof p === "symbol") {
+        if (!objectRef.value) return void 0;
+        return Reflect.get(objectRef.value, p);
+      }
+      if (chainableMethods.has(p)) {
+        return (...args) => {
+          if (!objectRef.value) {
+            buffer.push({ method: p, args });
+          } else {
+            applyMethod(objectRef.value, p, args);
+          }
+          return receiver;
+        };
+      }
+      if (!objectRef.value) return void 0;
+      const val = Reflect.get(objectRef.value, p);
+      if (typeof val === "function") return val.bind(objectRef.value);
+      return unref(val);
+    },
+    set(_, p, value) {
+      if (!objectRef.value) return true;
+      if (isRef(objectRef.value[p]) && !isRef(value))
+        objectRef.value[p].value = value;
+      else
+        objectRef.value[p] = value;
+      return true;
+    },
+    deleteProperty(_, p) {
+      if (!objectRef.value) return true;
+      return Reflect.deleteProperty(objectRef.value, p);
+    },
+    has(_, p) {
+      if (p === NANIME_INSTANCE) return true;
+      if (!objectRef.value) return false;
+      return Reflect.has(objectRef.value, p);
+    },
+    ownKeys() {
+      if (!objectRef.value) return [];
+      return Object.keys(objectRef.value);
+    },
+    getOwnPropertyDescriptor() {
+      if (!objectRef.value) return void 0;
+      return {
+        enumerable: true,
+        configurable: true
+      };
+    }
+  });
+  return { proxy: reactive(proxy), flushBuffer };
+}

package/dist/runtime/app/utils/proxies/text.d.ts

@@ -0,0 +1,2 @@
+export { scrambleText } from 'animejs/text';
+export type { ScrambleTextParams } from 'animejs';

package/dist/runtime/app/utils/proxies/text.js

@@ -0,0 +1 @@
+export { scrambleText } from "animejs/text";

package/dist/runtime/app/utils/types.d.ts

@@ -1 +1 @@
-export type { AnimationParams, TargetsParam, AutoLayoutParams, EasingParam, LayoutAnimationParams, WAAPIEasingParam, Draggable, DraggableAxisParam, DraggableParams, WAAPIAnimationParams, DOMTargetsParam, DOMTargetSelector, AnimatableObject, AnimatableParams, } from 'animejs';
+export type { AnimationParams, TargetsParam, EasingParam, WAAPIEasingParam, Draggable, DraggableAxisParam, DraggableParams, WAAPIAnimationParams, DOMTargetsParam, DOMTargetSelector, AnimatableObject, AnimatableParams, ScrambleTextParams, TimelineParams, } from 'animejs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nanime",
-  "version": "0.0.8",
+  "version": "0.0.11",
   "description": "Nuxt module for animejs integration and transitions",
   "repository": {
     "type": "git",
@@ -32,46 +32,52 @@
     "playground",
     "docs"
   ],
+  "scripts": {
+    "prepack": "nuxt-module-build build",
+    "dev": "npm run dev:prepare && nuxi dev playground",
+    "dev:build": "nuxi build playground",
+    "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground",
+    "release": "npm run lint && npm run test && npm run prepack && changelogen --release && npm publish && git push --follow-tags",
+    "build": "pnpm prepare && npm run prepack",
+    "prepare": "nuxt-module-build prepare",
+    "docs:build": "pnpm -C docs build",
+    "docs:prepare": "pnpm -C docs prepare",
+    "lint": "eslint .",
+    "test": "vitest run",
+    "test:watch": "vitest watch",
+    "test:types": "nuxt typecheck",
+    "clean": "rm -rf playground/.nuxt docs/.nuxt playground/.output docs/.output .nuxt"
+  },
   "dependencies": {
-    "@vueuse/core": "^14.1.0",
-    "animejs": "^4.3.5",
-    "defu": "^6.1.4",
-    "vue": "^3.5.27"
+    "@vueuse/core": "^14.3.0",
+    "animejs": "^4.4.1",
+    "defu": "^6.1.7",
+    "vue": "^3.5.34"
   },
   "peerDependencies": {
-    "@vueuse/core": "^13.0.0",
-    "animejs": "^4.3.5",
+    "@vueuse/core": ">=13.0.0",
+    "animejs": "^4.4.0",
     "defu": "^6.1.4",
     "vue": "^3.5.0"
   },
   "devDependencies": {
-    "@nuxt/devtools": "^3.1.1",
-    "@nuxt/eslint-config": "^1.13.0",
-    "@nuxt/kit": "^4.3.0",
+    "@nuxt/devtools": "^3.2.4",
+    "@nuxt/eslint-config": "^1.15.2",
+    "@nuxt/kit": "^4.4.6",
     "@nuxt/module-builder": "^1.0.2",
-    "@nuxt/schema": "^4.3.0",
+    "@nuxt/schema": "^4.4.6",
     "@nuxt/test-utils": "^3.23.0",
     "@types/node": "latest",
-    "@vue/test-utils": "^2.4.6",
+    "@vue/test-utils": "^2.4.10",
     "@vueuse/nuxt": "14.1.0",
     "changelogen": "^0.6.2",
-    "eslint": "^9.39.2",
-    "happy-dom": "^20.4.0",
-    "lefthook": "^2.0.16",
-    "nuxt": "^4.3.0",
+    "eslint": "^9.39.4",
+    "happy-dom": "^20.9.0",
+    "lefthook": "^2.1.8",
+    "nuxt": "^4.4.6",
     "typescript": "~5.9.3",
-    "vitest": "^4.0.18",
-    "vue-tsc": "^3.2.4"
+    "vitest": "^3.2.4",
+    "vue-tsc": "^3.3.1"
   },
-  "scripts": {
-    "dev": "npm run dev:prepare && nuxt dev playground",
-    "dev:build": "nuxt build playground",
-    "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxt prepare playground",
-    "release": "npm run lint && npm run test && npm run prepack && changelogen --release && npm publish && git push --follow-tags",
-    "lint": "eslint .",
-    "test": "vitest run",
-    "test:watch": "vitest watch",
-    "test:types": "vue-tsc --noEmit && cd playground && vue-tsc --noEmit",
-    "clean": "rm -rf playground/.nuxt docs/.nuxt playground/.output docs/.output .nuxt"
-  }
-}
+  "packageManager": "pnpm@10.15.0+sha512.486ebc259d3e999a4e8691ce03b5cac4a71cbeca39372a9b762cb500cfdf0873e2cb16abe3d951b1ee2cf012503f027b98b6584e4df22524e0c7450d9ec7aa7b"
+}