nuxtlabs / nuxt-component-meta

Gather Nuxt components metadata on build time and make them available on production.
69 stars 6 forks source link

Allow layers/modules to provide their meta #51

Open stafyniaksacha opened 1 year ago

stafyniaksacha commented 1 year ago

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.

Atinux commented 1 year ago

How does this look like?

stafyniaksacha commented 1 year ago

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?

stafyniaksacha commented 1 year ago

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 ?