feat: multiple dirs, prefix, watch & transpile support

[kevinmarrec]

Multiple dirs support which each having :

• required path -> Where to look for components
• optional pattern (default: '**/*.{builder.supportedExtensions}')
• optional ignore (default: patterns ignored by default by nuxt (.nuxtignore, tests, etc..))
• optional prefix (default: '') -> Add prefix to component names
• optional watch option (default: true) -> Watch directory for changes
• optional transpile option (default: false) -> Transpile directory (build.transpile)

Dynamic imports (lazy loading) support (with lazy prefix)

Top level options (components key in config)

TODO

• Update docs

[kevinmarrec]

=> Tested on my work app

Sounds there is a condition that is not met in my work app to have builder.ignore.ignore existing.

Investigating...

[kevinmarrec]

EDIT : Found the issue, it's cause I'm using nuxt-edge for nuxt/components, and there has been a change nuxt/nuxt#7132 not released on 2.x yet.

So builder.ignore.ignore is undefined if there isn't .nuxtignore on Nuxt <= 2.12.

Gonna just add checks to fix it :)

[pi0]

Nicee works!

[kevinmarrec]

@pi0 Thanks for the detailed review, will do updates accordingly 😊

[atinux]

Awesome work @kevinmarrec

One question, what if I want:

• components/bases/ -> prefix with Base
• components/icons/ -> prefix with Icon
• components/ -> no dir prefix (all the others)

Should this work?

export default {
  components: [
     { path: '@/components/bases/', prefix: 'Base' },
     { path: '@/components/icons/', prefix: 'Icons' },
     '@/components')
  ]
}

While avoiding to register @/components/bases/ and @/components/icons without prefixes?

[pi0]

@atinux Nice challenge :p

I think we can easily satisfy that by:

• Sorting directories to scan by their path* length (so parents are always after childs)
• Skip components that were already discovered

• paths may be better to prerolved so all are absolute

[kevinmarrec]

@atinux Indeed nice challenge 😁
@pi0 Makes sense and thanks for the hints.

Yep I can sort directly after paths are resolved with Nuxt resolvePath, so that's path length is calculated based on absolute path here.

And indeed then make the scanning function skip files that already have been handled by previous loops on other child paths :)

[kevinmarrec]