fix(module): await component registration

[cernymatej]

🔗 Linked issue

❓ Type of change

• 📖 Documentation (updates to the documentation, readme or JSdoc annotations)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality like performance)
• ✨ New feature (a non-breaking change that adds functionality)
• 🧹 Chore (updates to the build process or auxiliary tools and libraries)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

Since the promises in the component registration were not being awaited, it could cause some components to not be registered for auto-imports.

📸 Screenshots (if appropriate)

📝 Checklist

• I have linked an issue or discussion.
• I have updated the documentation accordingly.

[sadeghbarati]

Hi 👋

simple way is just don't use shadcn-nuxt. right? cause the shadcn-nuxt goal is to auto-import the components in the ui directory

if you don't want auto-import for ui just don't use it

or if you want to disabled auto-import fully use

export default defineNuxtConfig({
  imports: {
    autoImport: false,
    scan: false,
  }
})

or if you want to disable auto-import only for ui dir you can use

export default defineNuxtConfig({
  hooks: {
    'components:dirs'(dirs) {
      dirs.unshift({
        path: '@/components/ui',
        extensions: [],
      })
    },
  }
})

[cernymatej]

Hmm, I guess yeah, since it currently doesn't do anything else 😄
But it's probably a good idea to await it, isn't it?

[sadeghbarati]

await what line of code can you point it?

[cernymatej]

https://github.com/unovue/shadcn-vue/pull/1398/files#diff-e8b52a811377c3181637938504d1ac1400a62288c80a9a73aae897ac6fee3457R64

currently, there's just a foreach, and I think that in some cases, only some of the components will get registered for auto-imports

shadcn-vue/packages/module/src/module.ts

Lines 56 to 60 in d90434f

	try {
	readdirSync(componentsPath)
	.forEach(async (dir) => {
	try {
	const filePath = await resolvePath(join(COMPONENT_DIR_PATH, dir, 'index'), { extensions: ['.ts', '.js'] })

(depending on how long other modules take to install)

[sadeghbarati]

Right, await must be in the setup scope, could you remove autoImport code and replace this block of code, Thanks

Details

try {
  const componentPromises = readdirSync(componentsPath)
    .map(async (dir) => {
      try {
        const filePath = await resolvePath(join(COMPONENT_DIR_PATH, dir, 'index'), { extensions: ['.ts', '.js'] })
        const content = readFileSync(filePath, { encoding: 'utf8' })
        const ast = parseSync(filePath, content, {
          sourceType: 'module',
        })

        const exportedKeys: string[] = ast.program.body
          .filter(node => node.type === 'ExportNamedDeclaration')
          // @ts-expect-error parse return any
          .flatMap(node => node.specifiers?.map(specifier => specifier.exported?.name) || [])
          .filter((key: string) => /^[A-Z]/.test(key))

        exportedKeys.forEach((key) => {
          addComponent({
            name: `${prefix}${key}`, // name of the component to be used in vue templates
            export: key, // (optional) if the component is a named (rather than default) export
            filePath: resolve(filePath),
            priority: 1,
          })
        })
      }
      catch (err) {
        if (err instanceof Error)
          console.warn('Module error: ', err.message)
      }
    })

  await Promise.all(componentPromises)
}
catch (err) {
  if (err instanceof Error)
    console.warn(err.message)
}

[sadeghbarati]

Thank You