chore: safer import registrations

Author: harlan-zw

client/app.vue

@@ -4,7 +4,7 @@ import { registry } from '../src/registry'
 import { devtools, getScriptSize, humanFriendlyTimestamp, reactive, ref, urlToOrigin } from '#imports'
 import { msToHumanReadable } from '~/utils/formatting'
 
-const scriptRegistry = registry(s => s)
+const scriptRegistry = await registry()
 
 const scripts = ref({})
 const scriptSizes = reactive<Record<string, string>>({})

docs/app/pages/index.vue

@@ -2,7 +2,6 @@
 import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
 import { useScriptsRegistry } from '~/composables/useScriptsRegistry'
 
-const registry = useScriptsRegistry()
 const breakpoints = useBreakpoints(breakpointsTailwind)
 
 useSeoMeta({
@@ -62,6 +61,7 @@ declare global {
     }
   }
 }
+const registry = await useScriptsRegistry()
 
 const confettiEl = ref()
 const { onLoaded } = useScript({

docs/app/pages/scripts/index.vue

@@ -44,7 +44,7 @@ useSeoMeta({
 })
 
 // group by category
-const scriptsCategories = useScriptsRegistry().reduce((acc, script) => {
+const scriptsCategories = (await useScriptsRegistry()).reduce((acc, script) => {
   if (!acc[script.category])
     acc[script.category] = []
   acc[script.category].push({

src/devtools.ts

@@ -5,8 +5,8 @@ import { useNuxt } from '@nuxt/kit'
 import type { ModuleOptions } from './module'
 import { DEVTOOLS_UI_LOCAL_PORT, DEVTOOLS_UI_ROUTE } from './constants'
 
-export function setupDevToolsUI(options: ModuleOptions, resolve: Resolver['resolve'], nuxt: Nuxt = useNuxt()) {
-  const clientPath = resolve('./client')
+export async function setupDevToolsUI(options: ModuleOptions, resolve: Resolver['resolvePath'], nuxt: Nuxt = useNuxt()) {
+  const clientPath = await resolve('./client')
   const isProductionBuild = existsSync(clientPath)
 
   // Serve production-built client (used when package is published)

src/module.ts

@@ -105,10 +105,10 @@ export default defineNuxtModule<ModuleOptions>({
     debug: false,
   },
   async setup(config, nuxt) {
-    const { resolve } = createResolver(import.meta.url)
-    const { version, name } = await readPackageJSON(resolve('../package.json'))
-    nuxt.options.alias['#nuxt-scripts-validator'] = resolve(`./runtime/validation/${(nuxt.options.dev || nuxt.options._prepare) ? 'valibot' : 'mock'}`)
-    nuxt.options.alias['#nuxt-scripts'] = resolve('./runtime')
+    const { resolvePath } = createResolver(import.meta.url)
+    const { version, name } = await readPackageJSON(await resolvePath('../package.json'))
+    nuxt.options.alias['#nuxt-scripts-validator'] = await resolvePath(`./runtime/validation/${(nuxt.options.dev || nuxt.options._prepare) ? 'valibot' : 'mock'}`)
+    nuxt.options.alias['#nuxt-scripts'] = await resolvePath('./runtime')
     logger.level = (config.debug || nuxt.options.debug) ? 4 : 3
     if (!config.enabled) {
       // TODO fallback to useHead?
@@ -129,23 +129,36 @@ export default defineNuxtModule<ModuleOptions>({
       defaultScriptOptions: config.defaultScriptOptions,
     }
     addImportsDir([
-      resolve('./runtime/composables'),
+      await resolvePath('./runtime/composables'),
     ])
 
     addComponentsDir({
-      path: resolve('./runtime/components'),
+      path: await resolvePath('./runtime/components'),
     })
 
-    const scripts = registry(resolve)
+    const scripts = await registry(resolvePath) as (RegistryScript & { _importRegistered?: boolean })[]
+
+    for (const script of scripts) {
+      if (script.import?.name) {
+        addImports({ priority: 2, ...script.import })
+        script._importRegistered = true
+      }
+    }
+
     nuxt.hooks.hook('modules:done', async () => {
       const registryScripts = [...scripts]
 
       // @ts-expect-error nuxi prepare is broken to generate these types, possibly because of the runtime path
       await nuxt.hooks.callHook('scripts:registry', registryScripts)
-      const registryScriptsWithImport = registryScripts.filter(i => !!i.import?.name) as Required<RegistryScript>[]
-      addImports(registryScriptsWithImport.map(i => i.import))
+
+      for (const script of registryScripts) {
+        if (script.import?.name && !script._importRegistered) {
+          addImports({ priority: 3, ...script.import })
+        }
+      }
 
       // compare the registryScripts to the original registry to find new scripts
+      const registryScriptsWithImport = registryScripts.filter(i => !!i.import?.name) as Required<RegistryScript>[]
       const newScripts = registryScriptsWithImport.filter(i => !scripts.some(r => r.import?.name === i.import.name))
 
       // augment types to support the integrations registry
@@ -215,6 +228,6 @@ ${newScripts.map((i) => {
     })
 
     if (nuxt.options.dev)
-      setupDevToolsUI(config, resolve)
+      setupDevToolsUI(config, resolvePath)
   },
 })