refactor: remove use of #imports in files

package.json

@@ -43,22 +43,23 @@
     "test:watch": "vitest watch"
   },
   "dependencies": {
-    "@nuxt/kit": "^3.9.1",
+    "@nuxt/kit": "^3.11.2",
+    "@vueuse/nuxt": "^10.9.0",
+    "@vueuse/shared": "^10.9.0",
+    "@vueuse/core": "^10.9.0",
     "split-type": "^0.3.4",
-    "typescript": "^5.3.3",
-    "@vueuse/nuxt": "^10.7.1"
+    "typescript": "^5.4.5"
   },
   "devDependencies": {
     "@nuxt/devtools": "latest",
     "@nuxt/eslint-config": "^0.2.0",
     "@nuxt/module-builder": "^0.5.5",
-    "@nuxt/schema": "^3.9.1",
-    "@nuxt/test-utils": "^3.9.0",
-    "@types/node": "^18.19.5",
-    "@vueuse/core": "^10.7.1",
+    "@nuxt/schema": "^3.11.2",
+    "@nuxt/test-utils": "^3.12.1",
+    "@types/node": "^18.19.33",
     "changelogen": "^0.5.5",
-    "eslint": "^8.56.0",
-    "nuxt": "^3.9.1",
+    "eslint": "^8.57.0",
+    "nuxt": "^3.11.2",
     "vitest": "^0.33.0"
   }
-}
+}

playground/app.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { ref, useSplitText, useTimeoutFn } from "#imports";
-import SplitText from "../dist/runtime/component.vue";
+import { ref, useTimeoutFn } from "#imports";
+import { useSplitText, vSplitText } from "../src/module";
+import { SplitText } from "#build/components";
 import { promiseTimeout } from "@vueuse/core";
-import { vSplitText } from "../src/runtime/directive";
 
 const useWords = ref(true);
 const pRef = ref<HTMLParagraphElement | null>(null);
@@ -26,9 +26,7 @@ const log = console.log;
 </script>
 
 <template>
-  <p ref="pRef">
-    Nuxt module playground!
-  </p>
+  <p ref="pRef">Nuxt module playground!</p>
   <split-text
     lines
     :words="useWords"

src/module.ts

@@ -1,16 +1,16 @@
 import {
-  defineNuxtModule,
+  addComponent,
+  addImports,
   addPlugin,
   createResolver,
+  defineNuxtModule,
   installModule,
-  addImports,
-  addComponent,
 } from "@nuxt/kit";
 
 import { name, version } from "../package.json";
 
 // Module options TypeScript interface definition
-export interface ModuleOptions {}
+export type ModuleOptions = Record<string, never>;
 
 export default defineNuxtModule<ModuleOptions>({
   meta: {
@@ -38,3 +38,10 @@ export default defineNuxtModule<ModuleOptions>({
     await installModule("@vueuse/nuxt", {});
   },
 });
+
+export { vSplitText } from "./runtime/directive";
+export { useSplitText } from "./runtime/composable";
+export type {
+  UseSplitTextReturn,
+  UseSplitTextOptions,
+} from "./runtime/composable";

src/runtime/component.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { computed, ref, toRefs, useSplitText, watch } from "#imports";
+import { computed, ref, toRefs, watch } from "vue";
 import { TypesValue, type TypesValueTuple } from "./types";
-import type { UseSplitTextOptions } from "./composable";
-import SplitType from "split-type";
+import { useSplitText, type UseSplitTextOptions } from "./composable";
+import type SplitType from "split-type";
 
 const props = withDefaults(
   defineProps<{
@@ -77,10 +77,7 @@ defineExpose({ el: compRef });
 </script>
 
 <template>
-  <component
-    :is="props.as"
-    ref="compRef"
-  >
+  <component :is="props.as" ref="compRef">
     <slot :instance="instance" />
   </component>
 </template>

src/runtime/composable.ts

@@ -1,21 +1,17 @@
+import type { MaybeComputedElementRef } from "@vueuse/core";
+import {
+  tryOnScopeDispose,
+  unrefElement,
+  useDebounceFn,
+  useEventListener,
+} from "@vueuse/core";
 import {
-  type TypesValue,
-  type SplitTypeOptions,
   default as SplitType,
+  type SplitTypeOptions,
+  type TypesValue,
 } from "split-type";
+import { type ComputedRef, type Ref, computed, ref, watch } from "vue";
 import type { TypeOptions } from "./types";
-import {
-  unrefElement,
-  useEventListener,
-  tryOnScopeDispose,
-  computed,
-  watch,
-  useDebounceFn,
-  type ComputedRef,
-  ref,
-  type Ref,
-} from "#imports";
-import type { MaybeComputedElementRef } from "@vueuse/core";
 
 export type UseSplitTextOptions = {
   /** The types of splits to apply to the target element
@@ -105,32 +101,34 @@ export function useSplitText(
   target: MaybeComputedElementRef,
   options: UseSplitTextOptions,
 ): UseSplitTextReturn {
-  const instance = ref<SplitType | undefined>(),
-    lines = computed(() => instance.value?.lines),
-    words = computed(() => instance.value?.words),
-    chars = computed(() => instance.value?.chars),
-    split = (options: Partial<SplitTypeOptions>) => {
-      instance.value?.split(options);
-      if (!!instance.value && !!wrapping) wrapFn(instance.value);
-    },
-    revert = () => instance.value?.revert(),
-    { splitBy, wrapping, onComplete } = options,
-    wrapFn = (instance: SplitType) => {
-      if ((["chars", "words"] as const).every((sp) => splitBy.includes(sp)))
-        instance.words?.forEach((el) => (el.style.display = "inline-flex"));
+  const instance = ref<SplitType | undefined>();
+  const lines = computed(() => instance.value?.lines);
+  const words = computed(() => instance.value?.words);
+  const chars = computed(() => instance.value?.chars);
+  const split = (options: Partial<SplitTypeOptions>) => {
+    instance.value?.split(options);
+    if (!!instance.value && !!wrapping) wrapFn(instance.value);
+  };
+  const revert = () => instance.value?.revert();
+  const { splitBy, wrapping, onComplete } = options;
+  const wrapFn = (instance: SplitType) => {
+    if ((["chars", "words"] as const).every((sp) => splitBy.includes(sp)))
+      for (const el of instance.words ?? []) {
+        el.style.display = "inline-flex";
+      }
 
-      if (!wrapping) return;
-      instance[wrapping.select]?.forEach((childEl, index) => {
-        const wrapEl = document.createElement(wrapping.wrapType ?? "span");
-        if (wrapping.selectElClass)
-          childEl.classList.add(...wrapping.selectElClass.split(" "));
-        if (wrapping.wrapClass)
-          wrapEl.classList.add(...wrapping.wrapClass.split(" "));
-        wrapEl.dataset[`${wrapping.select}Index`] = `${index}`;
-        childEl.parentNode?.appendChild(wrapEl);
-        wrapEl.appendChild(childEl);
-      });
-    };
+    if (!wrapping) return;
+    instance[wrapping.select]?.forEach((childEl, index) => {
+      const wrapEl = document.createElement(wrapping.wrapType ?? "span");
+      if (wrapping.selectElClass)
+        childEl.classList.add(...wrapping.selectElClass.split(" "));
+      if (wrapping.wrapClass)
+        wrapEl.classList.add(...wrapping.wrapClass.split(" "));
+      wrapEl.dataset[`${wrapping.select}Index`] = `${index}`;
+      childEl.parentNode?.appendChild(wrapEl);
+      wrapEl.appendChild(childEl);
+    });
+  };
 
   watch(
     () => unrefElement(target),

src/runtime/directive.ts

@@ -1,8 +1,8 @@
-import type { ObjectDirective } from "nuxt/dist/app/compat/capi";
-import { useSplitText } from "./composable";
-import type { UseSplitTextOptions } from "./composable";
 import { directiveHooks } from "@vueuse/core";
 import type SplitType from "split-type";
+import type { ObjectDirective } from "vue";
+import { useSplitText } from "./composable";
+import type { UseSplitTextOptions } from "./composable";
 
 type VSplitTextOptions = UseSplitTextOptions & {
   /** Callback when the split is complete */

src/runtime/types.ts

@@ -1,9 +1,5 @@
-import type {
-  ComponentPublicInstance,
-  MaybeRef,
-  MaybeRefOrGetter,
-} from "#imports";
-import type { Mutable } from "@vueuse/core";
+import type { MaybeRef, MaybeRefOrGetter, Mutable } from "@vueuse/core";
+import type { ComponentPublicInstance } from "vue";
 
 type StringedCombination<
   T extends string[],
@@ -31,3 +27,5 @@ export type MaybeElementRef<T extends MaybeElement = MaybeElement> =
 export type MaybeComputedElementRef<T extends MaybeElement = MaybeElement> =
   MaybeRefOrGetter<T>;
 export type MaybeElement = HTMLElement | VueInstance | undefined | null;
+
+export type { UseSplitTextReturn, UseSplitTextOptions } from "./composable";