nanime 0.0.5 → 0.0.8

package/dist/module.json

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

package/dist/module.mjs

@@ -48,8 +48,9 @@ const module$1 = defineNuxtModule({
     }
     _nuxt.options.alias[`#${__configKey}/composables`] = resolver.resolve("./runtime/app/composables");
     _nuxt.options.alias[`#${__configKey}/components`] = resolver.resolve("./runtime/app/components");
-    _nuxt.options.alias[`#${__configKey}/utils`] = resolver.resolve("./runtime/app/utils");
+    _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");
   }
 });
 

package/dist/runtime/app/components/transition/Slide.vue

@@ -1,8 +1,8 @@
 <script setup>
-import { TransitionGroup, Transition } from "vue";
+import { TransitionGroup, Transition, nextTick, unref, useTemplateRef, computed } from "vue";
 import { isStandardEase, isWaapiEase } from "./types";
 import { animate, utils, waapi } from "animejs";
-import { nextTick, unref, useAnimeLayout, useTemplateRef, computed } from "#imports";
+import { useAnimeLayout } from "../../composables/useLayout";
 import { normalizeAxis, normalizeDuration, normalizeOffset } from "../../utils/transitions/normalizers";
 const props = defineProps({
   duration: { type: [Number, Array, Object], required: false, default: () => ({

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

@@ -1,4 +1,4 @@
-import { type MaybeRefOrGetter } from '#imports';
+import { type MaybeRefOrGetter } from 'vue';
 import { normalizeAnimeTarget } from '../utils/normalize-targets.js';
 import type { AnimatableObject, AnimatableParams } from 'animejs';
 export declare function useAnimatable(target: Parameters<typeof normalizeAnimeTarget>[0], options?: MaybeRefOrGetter<AnimatableParams>): AnimatableObject;

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 "#imports";
+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

@@ -1,5 +1,5 @@
-import { type MaybeRefOrGetter } from '#imports';
+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 "#imports";
+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

@@ -1,5 +1,5 @@
 import { tryOnScopeDispose, useMounted } from "@vueuse/core";
-import { nextTick, shallowRef, toValue, watch, watchPostEffect } from "#imports";
+import { nextTick, shallowRef, toValue, watch, watchPostEffect } from "vue";
 import { normalizeAnimeTarget, normalizeDraggableContainer, normalizeLayoutTarget } from "../utils/normalize-targets.js";
 import { createDraggable } from "animejs/draggable";
 import { createProxy } from "../utils/create-proxy.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/useLayout.d.ts

@@ -1,4 +1,4 @@
-import { type MaybeRef, type MaybeRefOrGetter } from '#imports';
+import { type MaybeRef, type MaybeRefOrGetter } from 'vue';
 import { type AutoLayoutParams, type LayoutAnimationParams } from 'animejs/layout';
 import { normalizeLayoutTarget } from '../utils/normalize-targets.js';
 export declare function useAnimeLayout(target: MaybeRef<Parameters<typeof normalizeLayoutTarget>[0]>, options?: MaybeRefOrGetter<AutoLayoutParams>): {

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

@@ -1,4 +1,4 @@
-import { computed, shallowRef, toValue, watchEffect } from "#imports";
+import { computed, shallowRef, toValue, watchEffect } from "vue";
 import { createLayout } from "animejs/layout";
 import { normalizeLayoutTarget } from "../utils/normalize-targets.js";
 import { extractNonFunctionProperties } from "../utils/extract-props.js";

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

@@ -1,50 +1,12 @@
-import { type MaybeRef, type MaybeRefOrGetter } from '#imports';
+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: {
-            close: () => NodeJS.Timeout;
-            hasRef: () => boolean;
-            ref: () => NodeJS.Timeout;
-            refresh: () => NodeJS.Timeout;
-            unref: () => NodeJS.Timeout;
-            _onTimeout: (...args: any[]) => void;
-            [Symbol.toPrimitive]: () => number;
-            [Symbol.dispose]: () => void;
-        };
-        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 "#imports";
+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

@@ -1,5 +1,5 @@
-import { type MaybeRefOrGetter } from '#imports';
+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 "#imports";
+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/create-proxy.js

@@ -1,4 +1,4 @@
-import { unref, isRef, reactive } from "#imports";
+import { unref, isRef, reactive } from "vue";
 export function createProxy(objectRef) {
   const proxy = new Proxy({}, {
     get(_, p, receiver) {

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/normalize-targets.d.ts

@@ -1,4 +1,4 @@
-import { type MaybeRef } from '#imports';
+import { type MaybeRef } from 'vue';
 import type { MaybeElementRef, VueInstance } from '@vueuse/core';
 import type { TargetsParam, DOMTargetsParam, DOMTargetSelector, DraggableParams } from 'animejs';
 type WaapiElementTargets = VueInstance | HTMLElement | HTMLElement[] | SVGElement | SVGElement[] | NodeList | string | null;

package/dist/runtime/app/utils/normalize-targets.js

@@ -1,4 +1,4 @@
-import { isReactive, toValue } from "#imports";
+import { isReactive, toValue } from "vue";
 function isVueInstance(value) {
   return value !== null && typeof value === "object" && "$el" in value;
 }

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/normalizers/make-reffable.d.ts

@@ -1,4 +1,4 @@
-import { type MaybeRefOrGetter } from '#imports';
+import { type MaybeRefOrGetter } from 'vue';
 export type MaybeRefOrArgsGetter<T, Args> = MaybeRefOrGetter<T> | ((data: Args) => T);
 export type MakeRefable<T, K extends keyof T, Args> = {
     [P in keyof T]?: P extends K ? MaybeRefOrArgsGetter<T[P], Args> : T[P];

package/dist/runtime/app/utils/normalizers/make-reffable.js

@@ -1,4 +1,4 @@
-import { toValue } from "#imports";
+import { toValue } from "vue";
 export function normalizeReffable(value, args) {
   if (typeof value === "function") {
     return value(args);

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nanime",
-  "version": "0.0.5",
+  "version": "0.0.8",
   "description": "Nuxt module for animejs integration and transitions",
   "repository": {
     "type": "git",
@@ -38,6 +38,12 @@
     "defu": "^6.1.4",
     "vue": "^3.5.27"
   },
+  "peerDependencies": {
+    "@vueuse/core": "^13.0.0",
+    "animejs": "^4.3.5",
+    "defu": "^6.1.4",
+    "vue": "^3.5.0"
+  },
   "devDependencies": {
     "@nuxt/devtools": "^3.1.1",
     "@nuxt/eslint-config": "^1.13.0",
@@ -58,7 +64,6 @@
     "vue-tsc": "^3.2.4"
   },
   "scripts": {
-    "postinstall": "lefthook install",
     "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",