nanime 0.0.7 → 0.0.10

package/dist/module.json

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

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

@@ -1,21 +1,32 @@
 import { createAnimatable } from "animejs/animatable";
-import { tryOnScopeDispose, useMounted } from "@vueuse/core";
-import { shallowReactive, toValue, watchEffect } from "vue";
+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";
 export function useAnimatable(target, options) {
+  const flag = getAnimationComponentFlag();
+  const animatable = shallowRef(createAnimatable({}, {}));
   const mounted = useMounted();
-  const animatable = shallowReactive(createAnimatable({}, {}));
-  let oldTarget;
-  watchEffect(() => {
-    if (!mounted.value) return;
-    const targets = normalizeAnimeTarget(target);
-    if (oldTarget === targets) return;
-    oldTarget = targets;
-    const newAnimatable = createAnimatable(targets, toValue(options) || {});
-    Object.assign(animatable, newAnimatable);
-  });
-  tryOnScopeDispose(() => {
-    animatable.revert();
-  });
-  return animatable;
+  if (flag === AnimationComponentFlags.Watchable) {
+    let oldTarget;
+    watchEffect(() => {
+      if (!mounted.value) return;
+      const targets = normalizeAnimeTarget(target);
+      if (oldTarget === targets) return;
+      oldTarget = targets;
+      const newAnimatable = createAnimatable(targets, toValue(options) || {});
+      animatable.value = newAnimatable;
+    });
+    tryOnScopeDispose(() => {
+      animatable.value.revert();
+    });
+  } else {
+    nextTick(() => {
+      const targets = normalizeAnimeTarget(target);
+      if (!targets) return;
+      const newAnimatable = createAnimatable(targets, toValue(options) || {});
+      animatable.value = newAnimatable;
+    });
+  }
+  return toReactive(animatable);
 }

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

@@ -2,4 +2,4 @@ import { type MaybeRefOrGetter } from 'vue';
 import { normalizeAnimeTarget } from '../utils/normalize-targets.js';
 import type { AnimationParams } from 'animejs';
 import { type JSAnimation } from 'animejs/animation';
-export declare function useAnimate(target: Parameters<typeof normalizeAnimeTarget>[0], options?: MaybeRefOrGetter<AnimationParams>): JSAnimation;
+export declare function useAnimate(target: Parameters<typeof normalizeAnimeTarget>[0], parameters?: MaybeRefOrGetter<AnimationParams>): JSAnimation;

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

@@ -1,22 +1,33 @@
 import { toReactive, tryOnScopeDispose, useMounted } from "@vueuse/core";
-import { shallowRef, toValue, watchEffect } from "vue";
+import { shallowRef, toValue, watchEffect, nextTick } from "vue";
 import { normalizeAnimeTarget } from "../utils/normalize-targets.js";
 import { animate } from "animejs/animation";
-export function useAnimate(target, options) {
-  const mounted = useMounted();
+import { AnimationComponentFlags, getAnimationComponentFlag } from "../utils/normalizers/instance-management.js";
+export function useAnimate(target, parameters) {
+  const flag = getAnimationComponentFlag();
   const animation = shallowRef(animate({}, {}));
-  let oldTarget;
-  watchEffect(() => {
-    if (!mounted.value) return;
-    const targets = normalizeAnimeTarget(target);
-    if (oldTarget === targets) return;
-    if (animation.value) animation.value.revert();
-    oldTarget = targets;
-    const newAnimation = animate(targets, toValue(options) || {});
-    animation.value = newAnimation;
-  });
-  tryOnScopeDispose(() => {
-    animation.value?.revert();
-  });
+  const mounted = useMounted();
+  if (flag === AnimationComponentFlags.Watchable) {
+    let oldTarget;
+    watchEffect(() => {
+      if (!mounted.value) return;
+      const targets = normalizeAnimeTarget(target);
+      if (oldTarget === targets) return;
+      if (animation.value) animation.value.revert();
+      oldTarget = targets;
+      const newAnimation = animate(targets, toValue(parameters) || {});
+      animation.value = newAnimation;
+    });
+    tryOnScopeDispose(() => {
+      animation.value?.revert();
+    });
+  } else {
+    nextTick(() => {
+      const targets = normalizeAnimeTarget(target);
+      if (!targets) return;
+      const newAnimation = animate(targets, toValue(parameters) || {});
+      animation.value = newAnimation;
+    });
+  }
   return toReactive(animation);
 }

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

@@ -56,7 +56,6 @@ export function useDraggable(target, options) {
         x: resolveAxis(options?.x),
         y: resolveAxis(options?.y)
       });
-      console.log("initializing");
       dragController.value = dragEngine;
     },
     {

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,38 @@
+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";
+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());
+    });
+  }
+  return toReactive(animation);
+}

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

@@ -1,41 +1,12 @@
-import { type MaybeRef, type MaybeRefOrGetter } from 'vue';
+import { type ComputedRef, type MaybeRef, type MaybeRefOrGetter, type Ref } from 'vue';
 import { splitText, type TextSplitter } from 'animejs/text';
 import { normalizeSplitTextTarget } from '../utils/normalize-targets.js';
-export declare function useSplitText(target: MaybeRef<Parameters<typeof normalizeSplitTextTarget>[0]>, parameters?: MaybeRefOrGetter<Parameters<typeof splitText>[1]>): {
-    lines: import("vue").ShallowRef<HTMLElement[], HTMLElement[]>;
-    words: import("vue").ShallowRef<HTMLElement[], HTMLElement[]>;
-    chars: import("vue").ShallowRef<HTMLElement[], HTMLElement[]>;
-    properties: import("vue").ComputedRef<import("../utils/extract-props.js").NonFunctionProperties<{
-        debug: boolean;
-        includeSpaces: boolean;
-        accessible: boolean;
-        linesOnly: boolean;
-        lineTemplate: string | false | import("animejs").SplitFunctionValue;
-        wordTemplate: string | false | import("animejs").SplitFunctionValue;
-        charTemplate: string | false | import("animejs").SplitFunctionValue;
-        $target: HTMLElement;
-        html: string;
-        lines: any[];
-        words: any[];
-        chars: any[];
-        effects: any[];
-        effectsCleanups: any[];
-        cache: string;
-        ready: boolean;
-        width: number;
-        resizeTimeout: NodeJS.Timeout;
-        resizeObserver: {
-            disconnect: () => void;
-            observe: (target: Element, options?: ResizeObserverOptions) => void;
-            unobserve: (target: Element) => void;
-        };
-        addEffect: (effect: (...args: any[]) => import("animejs").Tickable | (() => void)) => void | TextSplitter;
-        revert: () => TextSplitter;
-        splitNode: (node: Node) => void;
-        split: (clearCache?: boolean) => TextSplitter;
-        refresh: () => void;
-    }> | undefined>;
-    revert: () => TextSplitter | undefined;
-    split: () => TextSplitter | undefined;
-    refresh: () => void | undefined;
+import { type NonFunctionProperties, type OnlyFunctionProperties } from '../utils/extract-props.js';
+type SplitText = {
+    [x in 'lines' | 'words' | 'chars']: Ref<HTMLElement[]>;
+} & {
+    properties: ComputedRef<NonFunctionProperties<TextSplitter> | undefined>;
+    methods: ComputedRef<OnlyFunctionProperties<TextSplitter> | undefined>;
 };
+export declare function useSplitText(target: MaybeRef<Parameters<typeof normalizeSplitTextTarget>[0]>, parameters?: MaybeRefOrGetter<Parameters<typeof splitText>[1]>): SplitText;
+export {};

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

@@ -1,7 +1,7 @@
 import { computed, nextTick, ref, shallowRef, toValue, watchEffect } from "vue";
 import { splitText } from "animejs/text";
 import { normalizeSplitTextTarget } from "../utils/normalize-targets.js";
-import { extractNonFunctionProperties } from "../utils/extract-props.js";
+import { extractNonFunctionProperties, extractOnlyFunctionProperties } from "../utils/extract-props.js";
 import { tryOnScopeDispose, useMounted } from "@vueuse/core";
 export function useSplitText(target, parameters) {
   const mounted = useMounted();
@@ -41,8 +41,6 @@ export function useSplitText(target, parameters) {
     words,
     chars,
     properties: computed(() => splitter.value ? extractNonFunctionProperties(splitter.value) : void 0),
-    revert: () => splitter.value?.revert(),
-    split: () => splitter.value?.split(),
-    refresh: () => splitter.value?.refresh()
+    methods: computed(() => splitter.value ? extractOnlyFunctionProperties(splitter.value) : void 0)
   };
 }

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

@@ -2,4 +2,4 @@ import { type MaybeRefOrGetter } from 'vue';
 import type { WAAPIAnimationParams } from 'animejs';
 import { normalizeWaapiAnimeTarget } from '../utils/normalize-targets.js';
 import { type WAAPIAnimation } from 'animejs/waapi';
-export declare function useWaapiAnimate(target: Parameters<typeof normalizeWaapiAnimeTarget>[0], options?: MaybeRefOrGetter<WAAPIAnimationParams>): WAAPIAnimation;
+export declare function useWaapiAnimate(target: Parameters<typeof normalizeWaapiAnimeTarget>[0], parameters?: MaybeRefOrGetter<WAAPIAnimationParams>): WAAPIAnimation;

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

@@ -1,19 +1,31 @@
 import { toReactive, tryOnScopeDispose, useMounted } from "@vueuse/core";
-import { shallowRef, toValue, watchEffect } from "vue";
+import { shallowRef, toValue, watchEffect, nextTick } from "vue";
 import { normalizeWaapiAnimeTarget } from "../utils/normalize-targets.js";
 import { waapi } from "animejs/waapi";
-export function useWaapiAnimate(target, options) {
-  const mounted = useMounted();
+import { AnimationComponentFlags, getAnimationComponentFlag } from "../utils/normalizers/instance-management.js";
+export function useWaapiAnimate(target, parameters) {
+  const flag = getAnimationComponentFlag();
   const animation = shallowRef(waapi.animate([], {}));
-  watchEffect(() => {
-    const targets = normalizeWaapiAnimeTarget(target);
-    if (!mounted.value || !targets) return;
-    if (animation.value) animation.value.revert();
-    const newAnimation = waapi.animate(targets, toValue(options) || {});
-    animation.value = newAnimation;
-  });
-  tryOnScopeDispose(() => {
-    animation.value?.revert();
-  });
+  const mounted = useMounted();
+  if (flag === AnimationComponentFlags.Watchable) {
+    watchEffect(() => {
+      const targets = normalizeWaapiAnimeTarget(target);
+      if (!mounted.value || !targets) return;
+      if (animation.value) animation.value.revert();
+      const newAnimation = waapi.animate(targets, toValue(parameters) || {});
+      animation.value = newAnimation;
+    });
+    tryOnScopeDispose(() => {
+      animation.value?.revert();
+    });
+  } else {
+    nextTick(() => {
+      const targets = normalizeWaapiAnimeTarget(target);
+      if (!targets) return;
+      if (animation.value) animation.value.revert();
+      const newAnimation = waapi.animate(targets, toValue(parameters) || {});
+      animation.value = newAnimation;
+    });
+  }
   return toReactive(animation);
 }

package/dist/runtime/app/utils/extract-props.d.ts

@@ -3,4 +3,9 @@ type NonFunctionKeys<T> = {
 }[keyof T];
 export type NonFunctionProperties<T> = Pick<T, NonFunctionKeys<T>>;
 export declare function extractNonFunctionProperties<T extends object>(obj: T): NonFunctionProperties<T>;
+type FunctionKeys<T> = {
+    [K in keyof T]: T[K] extends Function ? K : never;
+}[keyof T];
+export type OnlyFunctionProperties<T> = Pick<T, FunctionKeys<T>>;
+export declare function extractOnlyFunctionProperties<T extends object>(obj: T): OnlyFunctionProperties<T>;
 export {};

package/dist/runtime/app/utils/extract-props.js

@@ -11,3 +11,16 @@ export function extractNonFunctionProperties(obj) {
   }
   return result;
 }
+export function extractOnlyFunctionProperties(obj) {
+  if (!obj || typeof obj !== "object") return {};
+  const result = {};
+  for (const key in obj) {
+    if (Object.prototype.hasOwnProperty.call(obj, key)) {
+      const value = obj[key];
+      if (typeof value === "function") {
+        result[key] = value;
+      }
+    }
+  }
+  return result;
+}

package/dist/runtime/app/utils/normalizers/instance-management.d.ts

@@ -0,0 +1,5 @@
+export declare enum AnimationComponentFlags {
+    Watchable = 0,
+    Instant = 1
+}
+export declare function getAnimationComponentFlag(): AnimationComponentFlags;

package/dist/runtime/app/utils/normalizers/instance-management.js

@@ -0,0 +1,10 @@
+import { getCurrentInstance } from "vue";
+export var AnimationComponentFlags = /* @__PURE__ */ ((AnimationComponentFlags2) => {
+  AnimationComponentFlags2[AnimationComponentFlags2["Watchable"] = 0] = "Watchable";
+  AnimationComponentFlags2[AnimationComponentFlags2["Instant"] = 1] = "Instant";
+  return AnimationComponentFlags2;
+})(AnimationComponentFlags || {});
+export function getAnimationComponentFlag() {
+  return getCurrentInstance() ? 0 /* Watchable */ : 1 /* Instant */;
+}
+;

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, } from 'animejs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nanime",
-  "version": "0.0.7",
+  "version": "0.0.10",
   "description": "Nuxt module for animejs integration and transitions",
   "repository": {
     "type": "git",
@@ -32,40 +32,48 @@
     "playground",
     "docs"
   ],
+  "scripts": {
+    "prepack": "nuxt-module-build build",
+    "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": "nuxt typecheck",
+    "clean": "rm -rf playground/.nuxt docs/.nuxt playground/.output docs/.output .nuxt"
+  },
   "dependencies": {
-    "@vueuse/core": "^14.1.0",
-    "animejs": "^4.3.5",
+    "@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.4.0",
     "defu": "^6.1.4",
-    "vue": "^3.5.27"
+    "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"
+}