nuxtlabs / nuxt-component-meta

Gather Nuxt components metadata on build time and make them available on production.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Allow layers/modules to provide their meta

stafyniaksacha opened this issue · comments

To speedup startup with nuxt-component-meta, we could allow modules and layers to provide their precomputed meta.

Those won't change during dev since they are external libraries, so they don't requires HMR.

How does this look like?

Dealing with module can be simple, we could generate a file in dist folder when the module is built.
This file would contain the definition for components loaded by the module, and act as a cached result.

But for layers, If I get it, we don't have such build step and don't want to have one, right?

I'm wondering about using a whitelist for modules / layers instead of blacklist (see #53)

In layers we could do something like:

export default defineNuxtConfig({
  // declare components
  components: [
    {
      prefix: 'MyLayer',
      path: resolve('./components/ui'),
      global: true,
    },
    {
      prefix: 'MyLayer',
      path: resolve('./components/form'),
    },
  ],
  // add components to meta whitelist
  // @ts-ignore - module may not be installed
  componentMeta: {
    include: [(component: any) => {
      return component?.pascalName?.startWith('MyLayer') && component.global
    }]
  },
})

In modules we could do something like:

export default defineNuxtModule<ModuleOptions>({
  meta: {
    name: 'my-module',
    configKey: 'myModule'
  },
  setup (options, nuxt) {
    addComponentsDir({
      prefix: 'MyModule',
      path: resolve('./runtime/components/ui'),
      global: true,
    })
    addComponentsDir({
      prefix: 'MyModule',
      path: resolve('./runtime/components/form'),
    })

    nuxt.options.componentMeta ??= {}
    nuxt.options.componentMeta.include ??= []
    nuxt.options.componentMeta.include.push((component: any) => {
      return component?.pascalName?.startWith('MyModule') && component.global
    })

    // could we imagine populating precomputed meta here? (ex: with a cli)
    // npx nuxt-component-meta generate --path ./src/runtime/components --out ./src/meta.json
  }
})

For better DX, we can also whitelist all global component from top layer ?