From ba8ef4806cf2271342301f352aca71d982a9ad28 Mon Sep 17 00:00:00 2001 From: Pooya Parsa Date: Thu, 8 Jul 2021 14:17:14 +0200 Subject: [PATCH 01/12] feat: explicit `.lazy` component names --- package.json | 2 +- src/scan.ts | 5 +++++ src/types.ts | 1 + templates/components/index.js | 16 ++++++++-------- templates/components/plugin.js | 17 +---------------- .../components/global/{Big.vue => Big.lazy.vue} | 0 test/fixture/nuxt.config.ts | 4 ++++ 7 files changed, 20 insertions(+), 25 deletions(-) rename test/fixture/components/global/{Big.vue => Big.lazy.vue} (100%) diff --git a/package.json b/package.json index f9d6893..35af333 100644 --- a/package.json +++ b/package.json @@ -19,7 +19,7 @@ ], "scripts": { "build": "siroc build", - "dev": "nuxt-ts test/fixture", + "dev": "nuxt dev test/fixture", "lint": "eslint --ext .ts,.js,.vue .", "prepare": "yarn link && yarn link @nuxt/components", "prepublishOnly": "yarn build", diff --git a/src/scan.ts b/src/scan.ts index 4a11fce..a64aa69 100644 --- a/src/scan.ts +++ b/src/scan.ts @@ -39,6 +39,10 @@ export async function scanComponents (dirs: ScanDir[], srcDir: string): Promise< if (fileName.toLowerCase() === 'index') { fileName = pathPrefix === false ? basename(dirname(filePath)) : '' /* inherits from path */ } + const isLazy = fileName.endsWith('.lazy') + if (isLazy) { + fileName = fileName.slice(0, -5) + } const fileNameParts = splitByCase(fileName) const componentNameParts: string[] = [] @@ -72,6 +76,7 @@ export async function scanComponents (dirs: ScanDir[], srcDir: string): Promise< kebabName, chunkName, shortPath, + isLazy, import: '', asyncImport: '', export: 'default', diff --git a/src/types.ts b/src/types.ts index f59c983..af5289d 100644 --- a/src/types.ts +++ b/src/types.ts @@ -3,6 +3,7 @@ export interface Component { kebabName: string import: string asyncImport: string + isLazy: boolean export: string filePath: string shortPath: string diff --git a/templates/components/index.js b/templates/components/index.js index 494a6d7..12cfdbf 100644 --- a/templates/components/index.js +++ b/templates/components/index.js @@ -1,17 +1,17 @@ import { wrapFunctional } from './utils' <%= options.getComponents().map(c => { - const exp = c.pascalName === c.export ? c.pascalName : `${c.export} as ${c.pascalName}` - return `export { ${exp} } from '../${relativeToBuild(c.filePath)}'` -}).join('\n') %> - -<%= options.getComponents().map(c => { - const exp = c.export === 'default' ? `c.default || c` : `c['${c.export}']` const magicComments = [ `webpackChunkName: "${c.chunkName}"`, c.prefetch === true || typeof c.prefetch === 'number' ? `webpackPrefetch: ${c.prefetch}` : false, c.preload === true || typeof c.preload === 'number' ? `webpackPreload: ${c.preload}` : false, ].filter(Boolean).join(', ') - - return `export const Lazy${c.pascalName} = import('../${relativeToBuild(c.filePath)}' /* ${magicComments} */).then(c => wrapFunctional(${exp}))` + if (c.isLazy) { + const exp = c.export === 'default' ? `c.default || c` : `c['${c.export}']` + const lazyImport = `import('../${relativeToBuild(c.filePath)}' /* ${magicComments} */).then(c => wrapFunctional(${exp}))` + return `export const Lazy${c.pascalName}${c.isLazy ? ` = ${c.pascalName}` : '' } = ${lazyImport}` + } else { + const exp = c.export === 'default' ? `default as ${c.pascalName}` : c.pascalName + return `export { ${exp} } from '../${relativeToBuild(c.filePath)}'` + } }).join('\n') %> diff --git a/templates/components/plugin.js b/templates/components/plugin.js index 3bdefa5..121bdcf 100644 --- a/templates/components/plugin.js +++ b/templates/components/plugin.js @@ -1,20 +1,5 @@ import Vue from 'vue' -import { wrapFunctional } from './utils' - -<% const components = options.getComponents() %> - -const components = { -<%= components.map(c => { - const exp = c.export === 'default' ? `c.default || c` : `c['${c.export}']` - const magicComments = [ - `webpackChunkName: "${c.chunkName}"`, - c.prefetch === true || typeof c.prefetch === 'number' ? `webpackPrefetch: ${c.prefetch}` : false, - c.preload === true || typeof c.preload === 'number' ? `webpackPreload: ${c.preload}` : false, - ].filter(Boolean).join(', ') - - return ` ${c.pascalName.replace(/^Lazy/, '')}: () => import('../${relativeToBuild(c.filePath)}' /* ${magicComments} */).then(c => wrapFunctional(${exp}))` -}).join(',\n') %> -} +import * as components from './index' for (const name in components) { Vue.component(name, components[name]) diff --git a/test/fixture/components/global/Big.vue b/test/fixture/components/global/Big.lazy.vue similarity index 100% rename from test/fixture/components/global/Big.vue rename to test/fixture/components/global/Big.lazy.vue diff --git a/test/fixture/nuxt.config.ts b/test/fixture/nuxt.config.ts index 52a8a64..a8b0888 100644 --- a/test/fixture/nuxt.config.ts +++ b/test/fixture/nuxt.config.ts @@ -8,6 +8,10 @@ const config: NuxtConfig = { nuxtComponents ], + typescript: { + typeCheck: false + }, + components: [ '~/components', { path: '~/components/global', global: true }, From 7762077aff4722b008b88a2776695e542de7291c Mon Sep 17 00:00:00 2001 From: Pooya Parsa Date: Thu, 8 Jul 2021 14:47:13 +0200 Subject: [PATCH 02/12] dev check --- templates/components/index.js | 4 ++-- templates/components/plugin.js | 5 ++++- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/templates/components/index.js b/templates/components/index.js index 12cfdbf..ee1eab2 100644 --- a/templates/components/index.js +++ b/templates/components/index.js @@ -6,10 +6,10 @@ import { wrapFunctional } from './utils' c.prefetch === true || typeof c.prefetch === 'number' ? `webpackPrefetch: ${c.prefetch}` : false, c.preload === true || typeof c.preload === 'number' ? `webpackPreload: ${c.preload}` : false, ].filter(Boolean).join(', ') - if (c.isLazy) { + if (c.isLazy || !nuxtOptions.dev) { const exp = c.export === 'default' ? `c.default || c` : `c['${c.export}']` const lazyImport = `import('../${relativeToBuild(c.filePath)}' /* ${magicComments} */).then(c => wrapFunctional(${exp}))` - return `export const Lazy${c.pascalName}${c.isLazy ? ` = ${c.pascalName}` : '' } = ${lazyImport}` + return `export const ${c.pascalName} = ${lazyImport}` } else { const exp = c.export === 'default' ? `default as ${c.pascalName}` : c.pascalName return `export { ${exp} } from '../${relativeToBuild(c.filePath)}'` diff --git a/templates/components/plugin.js b/templates/components/plugin.js index 121bdcf..0df6262 100644 --- a/templates/components/plugin.js +++ b/templates/components/plugin.js @@ -3,5 +3,8 @@ import * as components from './index' for (const name in components) { Vue.component(name, components[name]) - Vue.component('Lazy' + name, components[name]) + const lazyName = 'Lazy' + name + if (!lazyName in components) { + Vue.component(lazyName, components[name]) + } } From 3866cb03a5c54eaef492578a7aeef060f520908d Mon Sep 17 00:00:00 2001 From: Pooya Parsa Date: Thu, 8 Jul 2021 14:51:55 +0200 Subject: [PATCH 03/12] feat: support isLazy === false --- templates/components/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/templates/components/index.js b/templates/components/index.js index ee1eab2..15b9f77 100644 --- a/templates/components/index.js +++ b/templates/components/index.js @@ -6,7 +6,7 @@ import { wrapFunctional } from './utils' c.prefetch === true || typeof c.prefetch === 'number' ? `webpackPrefetch: ${c.prefetch}` : false, c.preload === true || typeof c.preload === 'number' ? `webpackPreload: ${c.preload}` : false, ].filter(Boolean).join(', ') - if (c.isLazy || !nuxtOptions.dev) { + if (c.isLazy || (!nuxtOptions.dev /* prod */ && c.isLazy !== false)) { const exp = c.export === 'default' ? `c.default || c` : `c['${c.export}']` const lazyImport = `import('../${relativeToBuild(c.filePath)}' /* ${magicComments} */).then(c => wrapFunctional(${exp}))` return `export const ${c.pascalName} = ${lazyImport}` From 056f042b53314f646fa6da6f5ab5ccb6b4447483 Mon Sep 17 00:00:00 2001 From: Pooya Parsa Date: Thu, 8 Jul 2021 14:55:05 +0200 Subject: [PATCH 04/12] allow inheriting isLazy from dir --- src/scan.ts | 4 ++-- src/types.ts | 1 + 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/scan.ts b/src/scan.ts index a64aa69..8f9b426 100644 --- a/src/scan.ts +++ b/src/scan.ts @@ -17,7 +17,7 @@ export async function scanComponents (dirs: ScanDir[], srcDir: string): Promise< const filePaths = new Set() const scannedPaths: string[] = [] - for (const { path, pattern, ignore = [], prefix, extendComponent, pathPrefix, level, prefetch = false, preload = false } of dirs.sort(sortDirsByPathLength)) { + for (const { path, pattern, ignore = [], prefix, extendComponent, pathPrefix, level, prefetch = false, preload = false, isLazy: dirIsLazy } of dirs.sort(sortDirsByPathLength)) { const resolvedNames = new Map() for (const _file of await globby(pattern!, { cwd: path, ignore })) { @@ -39,7 +39,7 @@ export async function scanComponents (dirs: ScanDir[], srcDir: string): Promise< if (fileName.toLowerCase() === 'index') { fileName = pathPrefix === false ? basename(dirname(filePath)) : '' /* inherits from path */ } - const isLazy = fileName.endsWith('.lazy') + const isLazy = fileName.endsWith('.lazy') ? true : dirIsLazy if (isLazy) { fileName = fileName.slice(0, -5) } diff --git a/src/types.ts b/src/types.ts index af5289d..083cc2a 100644 --- a/src/types.ts +++ b/src/types.ts @@ -21,6 +21,7 @@ export interface ScanDir { pattern?: string | string[] ignore?: string[] prefix?: string + isLazy?: boolean /** @deprecated */ global?: boolean | 'dev' pathPrefix?: boolean From 32ec4cdfd0cf23f9d26e79781aa634d25c764d5e Mon Sep 17 00:00:00 2001 From: Pooya Parsa Date: Thu, 8 Jul 2021 14:58:33 +0200 Subject: [PATCH 05/12] fix lazy removal --- src/scan.ts | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/scan.ts b/src/scan.ts index 8f9b426..69ec6d7 100644 --- a/src/scan.ts +++ b/src/scan.ts @@ -40,9 +40,7 @@ export async function scanComponents (dirs: ScanDir[], srcDir: string): Promise< fileName = pathPrefix === false ? basename(dirname(filePath)) : '' /* inherits from path */ } const isLazy = fileName.endsWith('.lazy') ? true : dirIsLazy - if (isLazy) { - fileName = fileName.slice(0, -5) - } + fileName = fileName.replace(/\.lazy$/, '') const fileNameParts = splitByCase(fileName) const componentNameParts: string[] = [] From 5f3c50d2ab9285f63f99b7bd9936c1509a9ea299 Mon Sep 17 00:00:00 2001 From: Pooya Parsa Date: Thu, 8 Jul 2021 15:08:33 +0200 Subject: [PATCH 06/12] refactor: rename tro async --- src/scan.ts | 8 ++++---- src/types.ts | 3 +-- templates/components/index.js | 6 +++--- templates/components/plugin.js | 5 +---- .../components/global/{Big.lazy.vue => Big.async.vue} | 0 test/fixture/nuxt.config.ts | 2 +- 6 files changed, 10 insertions(+), 14 deletions(-) rename test/fixture/components/global/{Big.lazy.vue => Big.async.vue} (100%) diff --git a/src/scan.ts b/src/scan.ts index 69ec6d7..a1dc29c 100644 --- a/src/scan.ts +++ b/src/scan.ts @@ -17,7 +17,7 @@ export async function scanComponents (dirs: ScanDir[], srcDir: string): Promise< const filePaths = new Set() const scannedPaths: string[] = [] - for (const { path, pattern, ignore = [], prefix, extendComponent, pathPrefix, level, prefetch = false, preload = false, isLazy: dirIsLazy } of dirs.sort(sortDirsByPathLength)) { + for (const { path, pattern, ignore = [], prefix, extendComponent, pathPrefix, level, prefetch = false, preload = false, async: dirAsync } of dirs.sort(sortDirsByPathLength)) { const resolvedNames = new Map() for (const _file of await globby(pattern!, { cwd: path, ignore })) { @@ -39,8 +39,8 @@ export async function scanComponents (dirs: ScanDir[], srcDir: string): Promise< if (fileName.toLowerCase() === 'index') { fileName = pathPrefix === false ? basename(dirname(filePath)) : '' /* inherits from path */ } - const isLazy = fileName.endsWith('.lazy') ? true : dirIsLazy - fileName = fileName.replace(/\.lazy$/, '') + const isAsync = fileName.endsWith('.async') ? true : dirAsync + fileName = fileName.replace(/\.async$/, '') const fileNameParts = splitByCase(fileName) const componentNameParts: string[] = [] @@ -74,7 +74,7 @@ export async function scanComponents (dirs: ScanDir[], srcDir: string): Promise< kebabName, chunkName, shortPath, - isLazy, + isAsync, import: '', asyncImport: '', export: 'default', diff --git a/src/types.ts b/src/types.ts index 083cc2a..1652790 100644 --- a/src/types.ts +++ b/src/types.ts @@ -3,7 +3,6 @@ export interface Component { kebabName: string import: string asyncImport: string - isLazy: boolean export: string filePath: string shortPath: string @@ -21,7 +20,7 @@ export interface ScanDir { pattern?: string | string[] ignore?: string[] prefix?: string - isLazy?: boolean + async?: boolean /** @deprecated */ global?: boolean | 'dev' pathPrefix?: boolean diff --git a/templates/components/index.js b/templates/components/index.js index 15b9f77..f69b17a 100644 --- a/templates/components/index.js +++ b/templates/components/index.js @@ -6,10 +6,10 @@ import { wrapFunctional } from './utils' c.prefetch === true || typeof c.prefetch === 'number' ? `webpackPrefetch: ${c.prefetch}` : false, c.preload === true || typeof c.preload === 'number' ? `webpackPreload: ${c.preload}` : false, ].filter(Boolean).join(', ') - if (c.isLazy || (!nuxtOptions.dev /* prod */ && c.isLazy !== false)) { + if (c.async || (!nuxtOptions.dev /* prod */ && c.async !== false)) { const exp = c.export === 'default' ? `c.default || c` : `c['${c.export}']` - const lazyImport = `import('../${relativeToBuild(c.filePath)}' /* ${magicComments} */).then(c => wrapFunctional(${exp}))` - return `export const ${c.pascalName} = ${lazyImport}` + const asyncImport = `import('../${relativeToBuild(c.filePath)}' /* ${magicComments} */).then(c => wrapFunctional(${exp}))` + return `export const ${c.pascalName} = ${asyncImport}` } else { const exp = c.export === 'default' ? `default as ${c.pascalName}` : c.pascalName return `export { ${exp} } from '../${relativeToBuild(c.filePath)}'` diff --git a/templates/components/plugin.js b/templates/components/plugin.js index 0df6262..121bdcf 100644 --- a/templates/components/plugin.js +++ b/templates/components/plugin.js @@ -3,8 +3,5 @@ import * as components from './index' for (const name in components) { Vue.component(name, components[name]) - const lazyName = 'Lazy' + name - if (!lazyName in components) { - Vue.component(lazyName, components[name]) - } + Vue.component('Lazy' + name, components[name]) } diff --git a/test/fixture/components/global/Big.lazy.vue b/test/fixture/components/global/Big.async.vue similarity index 100% rename from test/fixture/components/global/Big.lazy.vue rename to test/fixture/components/global/Big.async.vue diff --git a/test/fixture/nuxt.config.ts b/test/fixture/nuxt.config.ts index a8b0888..5e3bfb5 100644 --- a/test/fixture/nuxt.config.ts +++ b/test/fixture/nuxt.config.ts @@ -14,7 +14,7 @@ const config: NuxtConfig = { components: [ '~/components', - { path: '~/components/global', global: true }, + { path: '~/components/global', global: true, async: false }, { path: '~/components/no-prefix', pathPrefix: false }, { path: '~/components/multifile', extensions: ['vue'] }, '~/non-existent', From f16435d4673cdb7aaf6b369b29118ebea8524690 Mon Sep 17 00:00:00 2001 From: Pooya Parsa Date: Thu, 8 Jul 2021 15:10:56 +0200 Subject: [PATCH 07/12] force lazy behavior for Lazy* components --- templates/components/plugin.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/templates/components/plugin.js b/templates/components/plugin.js index 121bdcf..3394d07 100644 --- a/templates/components/plugin.js +++ b/templates/components/plugin.js @@ -3,5 +3,5 @@ import * as components from './index' for (const name in components) { Vue.component(name, components[name]) - Vue.component('Lazy' + name, components[name]) + Vue.component('Lazy' + name, () => Promise.resolve(components[name])) } From 256e7dbefefb9ad2f076f41c50b727b474593ce0 Mon Sep 17 00:00:00 2001 From: Pooya Parsa Date: Thu, 8 Jul 2021 15:23:46 +0200 Subject: [PATCH 08/12] refactor: rename to isAsync --- src/index.ts | 1 + src/scan.ts | 4 ++-- src/types.ts | 4 ++-- templates/components/index.js | 2 +- test/fixture/nuxt.config.ts | 2 +- 5 files changed, 7 insertions(+), 6 deletions(-) diff --git a/src/index.ts b/src/index.ts index 10fc6db..36f4ba8 100644 --- a/src/index.ts +++ b/src/index.ts @@ -74,6 +74,7 @@ const componentsModule: Module = function () { path: dirPath, extensions, pattern: dirOptions.pattern || `**/*.{${extensions.join(',')},}`, + isAsync: dirOptions.isAsync ?? !nuxt.options.dev /* async only for prod by default */, // TODO: keep test/unit/utils.ts updated ignore: [ '**/*.stories.{js,ts,jsx,tsx}', // ignore storybook files diff --git a/src/scan.ts b/src/scan.ts index a1dc29c..ca2ac61 100644 --- a/src/scan.ts +++ b/src/scan.ts @@ -17,7 +17,7 @@ export async function scanComponents (dirs: ScanDir[], srcDir: string): Promise< const filePaths = new Set() const scannedPaths: string[] = [] - for (const { path, pattern, ignore = [], prefix, extendComponent, pathPrefix, level, prefetch = false, preload = false, async: dirAsync } of dirs.sort(sortDirsByPathLength)) { + for (const { path, pattern, ignore = [], prefix, extendComponent, pathPrefix, level, prefetch = false, preload = false, isAsync: dirIsAsync } of dirs.sort(sortDirsByPathLength)) { const resolvedNames = new Map() for (const _file of await globby(pattern!, { cwd: path, ignore })) { @@ -39,7 +39,7 @@ export async function scanComponents (dirs: ScanDir[], srcDir: string): Promise< if (fileName.toLowerCase() === 'index') { fileName = pathPrefix === false ? basename(dirname(filePath)) : '' /* inherits from path */ } - const isAsync = fileName.endsWith('.async') ? true : dirAsync + const isAsync = fileName.endsWith('.async') ? true : dirIsAsync fileName = fileName.replace(/\.async$/, '') const fileNameParts = splitByCase(fileName) diff --git a/src/types.ts b/src/types.ts index 1652790..bf2197a 100644 --- a/src/types.ts +++ b/src/types.ts @@ -6,7 +6,7 @@ export interface Component { export: string filePath: string shortPath: string - async?: boolean + isAsync?: boolean chunkName: string /** @deprecated */ global: boolean @@ -20,7 +20,7 @@ export interface ScanDir { pattern?: string | string[] ignore?: string[] prefix?: string - async?: boolean + isAsync?: boolean /** @deprecated */ global?: boolean | 'dev' pathPrefix?: boolean diff --git a/templates/components/index.js b/templates/components/index.js index f69b17a..6ebd6bd 100644 --- a/templates/components/index.js +++ b/templates/components/index.js @@ -6,7 +6,7 @@ import { wrapFunctional } from './utils' c.prefetch === true || typeof c.prefetch === 'number' ? `webpackPrefetch: ${c.prefetch}` : false, c.preload === true || typeof c.preload === 'number' ? `webpackPreload: ${c.preload}` : false, ].filter(Boolean).join(', ') - if (c.async || (!nuxtOptions.dev /* prod */ && c.async !== false)) { + if (c.isAsync) { const exp = c.export === 'default' ? `c.default || c` : `c['${c.export}']` const asyncImport = `import('../${relativeToBuild(c.filePath)}' /* ${magicComments} */).then(c => wrapFunctional(${exp}))` return `export const ${c.pascalName} = ${asyncImport}` diff --git a/test/fixture/nuxt.config.ts b/test/fixture/nuxt.config.ts index 5e3bfb5..1950b48 100644 --- a/test/fixture/nuxt.config.ts +++ b/test/fixture/nuxt.config.ts @@ -14,7 +14,7 @@ const config: NuxtConfig = { components: [ '~/components', - { path: '~/components/global', global: true, async: false }, + { path: '~/components/global', global: true, isAsync: false }, { path: '~/components/no-prefix', pathPrefix: false }, { path: '~/components/multifile', extensions: ['vue'] }, '~/non-existent', From 53776ed996512f731edfa8ced473037c01318bc1 Mon Sep 17 00:00:00 2001 From: Pooya Parsa Date: Wed, 11 Aug 2021 13:35:03 +0200 Subject: [PATCH 09/12] fix: respect async in loader --- src/loader.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/loader.ts b/src/loader.ts index e454332..124d66e 100644 --- a/src/loader.ts +++ b/src/loader.ts @@ -4,7 +4,7 @@ import { matcher } from './scan' import type { Component } from './types' function install (this: WebpackLoader.LoaderContext, content: string, components: Component[]) { - const imports = '{' + components.map(c => `${c.pascalName}: ${c.import}`).join(',') + '}' + const imports = '{' + components.map(c => `${c.pascalName}: ${c.isAsync ? c.asyncImport : c.import}`).join(',') + '}' let newContent = '/* nuxt-component-imports */\n' newContent += `installComponents(component, ${imports})\n` From afb0c74c325f7c0a63d64a18666b1f7b42089201 Mon Sep 17 00:00:00 2001 From: Pooya Parsa Date: Wed, 11 Aug 2021 13:40:35 +0200 Subject: [PATCH 10/12] show async flag in markdown --- templates/components/readme_md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/templates/components/readme_md b/templates/components/readme_md index 58b82e8..0100fe6 100644 --- a/templates/components/readme_md +++ b/templates/components/readme_md @@ -11,6 +11,7 @@ const components = options.getComponents() const list = components.map(c => { const pascalName = c.pascalName.replace(/^Lazy/, '') const kebabName = c.kebabName.replace(/^lazy-/, '') - return `- \`<${pascalName}>\` | \`<${kebabName}>\` (${c.shortPath})` + const tags = c.isAsync ? ' [async]' : '' + return `- \`<${pascalName}>\` | \`<${kebabName}>\` (${c.shortPath})${tags}` }) %><%= list.join('\n') %> From 7a631a4988e595fb4f04ef6dad29bc21b6ad7bf9 Mon Sep 17 00:00:00 2001 From: Pooya Parsa Date: Wed, 11 Aug 2021 13:43:08 +0200 Subject: [PATCH 11/12] docs: add `isAsync` option --- README.md | 74 +++++++++++++++++++++++++------------------------------ 1 file changed, 34 insertions(+), 40 deletions(-) diff --git a/README.md b/README.md index 079d7f2..33b3744 100755 --- a/README.md +++ b/README.md @@ -72,6 +72,7 @@ See [live demo](https://codesandbox.io/s/nuxt-components-cou9k) or [video exampl ### Lazy Imports Nuxt by default does code-splitting per page and components. But sometimes we also need to lazy load them: + - Component size is rather big (or has big dependencies imported) like a text-editor - Component is rendered conditionally with `v-if` or being in a modal @@ -88,18 +89,18 @@ You now can easily import a component on-demand: ``` @@ -127,10 +128,7 @@ For clarity, it is recommended that component file name matches its name. You ca If for any reason different prefix is desired, we can add specific directory with the `prefix` option: (See [directories](#directories) section) ```js -components: [ - '~/components/', - { path: '~/components/foo/', prefix: 'foo' } -] +components: ['~/components/', { path: '~/components/foo/', prefix: 'foo' }] ``` ## Overwriting Components @@ -169,7 +167,7 @@ export default { components: [ '~/components', // shortcut to { path: '~/components' } { path: '~/components/awesome/', prefix: 'awesome' } - ], + ] } ``` @@ -210,15 +208,13 @@ If you prefer to split your SFCs into `.js`, `.vue` and `.css`, you can only ena ```js // nuxt.config.js export default { - components: [ - { path: '~/components', extensions: ['vue'] } - ] + components: [{ path: '~/components', extensions: ['vue'] }] } ``` #### pattern -- Type: `string` ([glob pattern]( https://github.com/isaacs/node-glob#glob-primer)) +- Type: `string` ([glob pattern](https://github.com/isaacs/node-glob#glob-primer)) - Default: `**/*.${extensions.join(',')}` Accept Pattern that will be run against specified `path`. @@ -226,7 +222,7 @@ Accept Pattern that will be run against specified `path`. #### ignore - Type: `Array` -- Items: `string` ([glob pattern]( https://github.com/isaacs/node-glob#glob-primer)) +- Items: `string` ([glob pattern](https://github.com/isaacs/node-glob#glob-primer)) - Default: `[]` Ignore patterns that will be run against specified `path`. @@ -244,8 +240,8 @@ Example below adds `awesome-`/`Awesome` prefix to the name of components in `awe // nuxt.config.js export default { components: [ - '~/components', - { path: '~/components/awesome/', prefix: 'awesome' } + '~/components', + { path: '~/components/awesome/', prefix: 'awesome' } ] } ``` @@ -261,7 +257,7 @@ components/ ``` @@ -298,7 +294,7 @@ Level are use to define a hint when overwriting the components which have the sa export default { components: [ '~/components', // default level is 0 - { path: 'my-theme/components', level: 1 } + { path: 'my-theme/components', level: 1 } ] } ``` @@ -314,9 +310,7 @@ These properties are used in production to configure how [components with `Lazy` ```js export default { - components: [ - { path: 'my-theme/components', prefetch: true } - ] + components: [{ path: 'my-theme/components', prefetch: true }] } ``` @@ -330,6 +324,13 @@ const componets = { } ``` +#### isAsync + +- Type: Boolean +- Default: `false` unless component name ends with `.async.vue` + +This flag indicates, component should be loaded async (with a seperate chunk) regardless of using `Lazy` prefix or not. + ## Migration guide ## `v1` to `v2` @@ -337,9 +338,9 @@ const componets = { Starting with `nuxt@2.15`, Nuxt uses `@nuxt/components` v2: - All components are globally available so you can move `components/global/` -to `components/` and `global: true` is not required anymore + to `components/` and `global: true` is not required anymore - Full path inside `components` is used to prefix component names. If you were structing your -components in multiple directories, should either add prefix or register in `components` section of `nuxt.config` or use new `pathPrefix` option. + components in multiple directories, should either add prefix or register in `components` section of `nuxt.config` or use new `pathPrefix` option. **Example:** @@ -363,7 +364,7 @@ export default { '~/components/templates', '~/components/atoms', '~/components/molecules', - '~/components/organisms', + '~/components/organisms' ] } ``` @@ -393,8 +394,8 @@ Then in `awesome-ui/nuxt.js` you can use the `components:dir` hook: ```js import { join } from 'path' -export default function () { - this.nuxt.hook('components:dirs', (dirs) => { +export default function() { + this.nuxt.hook('components:dirs', dirs => { // Add ./components dir to the list dirs.push({ path: join(__dirname, 'components'), @@ -408,10 +409,7 @@ That's it! Now in your project, you can import your ui library as a Nuxt module ```js export default { - buildModules: [ - '@nuxt/components', - 'awesome-ui/nuxt' - ] + buildModules: ['@nuxt/components', 'awesome-ui/nuxt'] } ``` @@ -438,15 +436,11 @@ Next: publish your `awesome-ui` module to [npm](https://www.npmjs.com) and share [npm-version-src]: https://img.shields.io/npm/v/@nuxt/components/latest.svg?style=flat-square [npm-version-href]: https://npmjs.com/package/@nuxt/components - [npm-downloads-src]: https://img.shields.io/npm/dt/@nuxt/components.svg?style=flat-square [npm-downloads-href]: https://npmjs.com/package/@nuxt/components - [github-actions-ci-src]: https://img.shields.io/github/workflow/status/nuxt/typescript/test?label=ci&style=flat-square [github-actions-ci-href]: https://github.com/nuxt/components/actions?query=workflow%3Aci - [codecov-src]: https://img.shields.io/codecov/c/github/nuxt/components.svg?style=flat-square [codecov-href]: https://codecov.io/gh/nuxt/components - [license-src]: https://img.shields.io/npm/l/@nuxt/components.svg?style=flat-square [license-href]: https://npmjs.com/package/@nuxt/components From 0e935181d1095f5a55b036fd7f820afc21497eee Mon Sep 17 00:00:00 2001 From: Pooya Parsa Date: Wed, 11 Aug 2021 13:44:42 +0200 Subject: [PATCH 12/12] chore: fix type error --- src/scan.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/scan.ts b/src/scan.ts index ca2ac61..18e8c82 100644 --- a/src/scan.ts +++ b/src/scan.ts @@ -68,7 +68,7 @@ export async function scanComponents (dirs: ScanDir[], srcDir: string): Promise< const shortPath = relative(srcDir, filePath) const chunkName = 'components/' + kebabName - let component = { + let component: Component = { filePath, pascalName, kebabName,