feat(directives): add new directives (#6)

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',

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),
+ });
+ },
+ });
 });

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";

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";