From c0aac41f14a9e935080cc8d7a08fccf4191bc7bd Mon Sep 17 00:00:00 2001
From: Steven John <stevenjpx2@gmail.com>
Date: Mon, 6 May 2024 21:17:42 +0530
Subject: [PATCH] feat(directives): add new directives (#6)

---
 playground/app.vue                            |  14 +--
 src/runtime/functions/plugin.ts               | 101 +++++++++++++++---
 src/runtime/functions/use-gsap/index.ts       |   1 +
 .../use-split-text-animation/index.ts         |   3 +-
 4 files changed, 93 insertions(+), 26 deletions(-)

diff --git a/playground/app.vue b/playground/app.vue
index 370be4e..380e339 100644
--- a/playground/app.vue
+++ b/playground/app.vue
@@ -131,19 +131,7 @@ const onAfterEnterBendy = async () => {
       }"
     >
       <h1
-        v-text-animate="{
-          baked: true,
-          options: {
-            splitBy: 'lines',
-            animationOptions: { translate: true },
-            splitOptions: {
-              wrapping: {
-                select: 'lines',
-                wrapClass: 'inline-block overflow-hidden',
-              },
-            },
-          },
-        }"
+        v-text-animate-baked-lines="['opacity', 'blur']"
         :style="{
           fontSize: '25vw',
           textAlign: 'left',
diff --git a/src/runtime/functions/plugin.ts b/src/runtime/functions/plugin.ts
index 19c0443..f92290b 100644
--- a/src/runtime/functions/plugin.ts
+++ b/src/runtime/functions/plugin.ts
@@ -1,21 +1,98 @@
+import { directiveHooks } from "@vueuse/core";
 import { defineNuxtPlugin } from "#app";
-import nuggetBakedPresets from "#build/nugget/presets.mjs";
-import { type AnimationOptions, DirectiveOptions } from "../baked";
-import { vAos } from "./use-animate-on-scroll/directive";
-import { vFromTo } from "./use-gsap/directive";
-import { vTextAnimate } from "./use-split-text-animation/directive";
+import type { BakedPresets } from "#build/types/nugget";
+import type { UseBakedAnimationOptions } from "../baked";
+import {
+  type UseBakedAnimateOnScrollOptions,
+  useBakedAnimateOnScroll,
+  vAos,
+} from "./use-animate-on-scroll";
+import { useBakedFromTo, vFromTo } from "./use-gsap";
+import {
+  type UseBakedSplitTextAnimationOptions,
+  useBakedSplitTextAnimation,
+  vTextAnimate,
+} from "./use-split-text-animation";
+
+type BakedPresetsArray = (keyof {
+  [P in keyof BakedPresets as
+    | P
+    | (BakedPresets[P] extends infer V
+        ? V extends string
+          ? `${P}:${V}`
+          : never
+        : never)]: true;
+})[];
+
+const transformBakedArrayToObject = <const T extends BakedPresetsArray>(v: T) =>
+  Object.fromEntries(
+    v.map((val) => {
+      const [key, value] = val.split(":");
+      return [key, value === undefined ? true : value];
+    }),
+  ) as {
+    [P in T[number] as P extends `${infer K}:${string}`
+      ? K
+      : P]: P extends `${string}:${infer V}` ? V : true;
+  };
 
 export default defineNuxtPlugin((nuxt) => {
   const app = nuxt.vueApp;
 
-  for (const key in nuggetBakedPresets) {
-    const typedKey = key as keyof AnimationOptions;
-    nuggetBakedPresets;
+  app.directive("text-animate", vTextAnimate);
+
+  app.directive<HTMLElement, UseBakedSplitTextAnimationOptions>(
+    "text-animate-baked",
+    {
+      [directiveHooks.mounted]: (el, binding) => {
+        useBakedSplitTextAnimation(el, binding.value);
+      },
+    },
+  );
+
+  for (const splitBy of ["lines", "words", "chars"] as const) {
+    app.directive<HTMLElement, BakedPresetsArray>(
+      `text-animate-baked-${splitBy}`,
+      {
+        [directiveHooks.mounted]: (el, binding) => {
+          useBakedSplitTextAnimation(el, {
+            splitBy,
+            animationOptions: transformBakedArrayToObject(binding.value),
+          });
+        },
+      },
+    );
   }
 
-  app.directive("yo", (el, binding) => {});
+  app.directive("aos", vAos);
+
+  app.directive<HTMLElement, UseBakedAnimateOnScrollOptions>("aos-baked", {
+    [directiveHooks.mounted]: (el, binding) => {
+      useBakedAnimateOnScroll(el, binding.value);
+    },
+  });
+
+  app.directive<HTMLElement, BakedPresetsArray>("aos-baked-animate", {
+    [directiveHooks.mounted]: (el, binding) => {
+      useBakedAnimateOnScroll(el, {
+        animationOptions: transformBakedArrayToObject(binding.value),
+      });
+    },
+  });
+
+  app.directive("from-to", vFromTo);
+
+  app.directive<HTMLElement, UseBakedAnimationOptions>("from-to-baked", {
+    [directiveHooks.mounted]: (el, binding) => {
+      useBakedFromTo(el, binding.value);
+    },
+  });
 
-  nuxt.vueApp.directive("text-animate", vTextAnimate);
-  nuxt.vueApp.directive("aos", vAos);
-  nuxt.vueApp.directive("from-to", vFromTo);
+  app.directive<HTMLElement, BakedPresetsArray>("from-to-baked-animate", {
+    [directiveHooks.mounted]: (el, binding) => {
+      useBakedFromTo(el, {
+        animationOptions: transformBakedArrayToObject(binding.value),
+      });
+    },
+  });
 });
diff --git a/src/runtime/functions/use-gsap/index.ts b/src/runtime/functions/use-gsap/index.ts
index fd22bb6..5ce9e1c 100644
--- a/src/runtime/functions/use-gsap/index.ts
+++ b/src/runtime/functions/use-gsap/index.ts
@@ -99,3 +99,4 @@ export function useGsap(plugins: object[] = [ScrollTrigger]) {
 export type UseGsapReturn = ReturnType<typeof useGsap>;
 
 export * from "./baked";
+export * from "./directive";
diff --git a/src/runtime/functions/use-split-text-animation/index.ts b/src/runtime/functions/use-split-text-animation/index.ts
index 006f9a4..a3649ff 100644
--- a/src/runtime/functions/use-split-text-animation/index.ts
+++ b/src/runtime/functions/use-split-text-animation/index.ts
@@ -2,8 +2,8 @@ import type { MaybeComputedElementRef } from "@vueuse/core";
 import { useSplitText } from "#imports";
 import type { Simplify } from "../../types";
 import {
-  useAnimateOnScroll,
   type UseAnimateOnScrollOptions,
+  useAnimateOnScroll,
 } from "../use-animate-on-scroll";
 
 export type PartialSplitTextAnimationOptions = {
@@ -58,3 +58,4 @@ export function useSplitTextAnimation(
 }
 
 export * from "./baked";
+export * from "./directive";