From 711b49260d7aa20e69f16d381d7037a428e24777 Mon Sep 17 00:00:00 2001 From: pooya parsa Date: Sat, 30 May 2020 14:47:40 +0200 Subject: [PATCH 01/10] feat: support dirOptions.extensions --- src/index.ts | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/index.ts b/src/index.ts index 57f2f91..e532e64 100644 --- a/src/index.ts +++ b/src/index.ts @@ -25,6 +25,7 @@ declare module '@nuxt/types/config/hooks' { export interface ComponentsDir extends ScanDir { watch?: boolean + extensions?: string[] transpile?: 'auto' | boolean } @@ -64,11 +65,14 @@ export default function () { console.warn('Components directory not found: `' + dirPath + '`') } + const extensions = dirOptions.extensions || builder.supportedExtensions + return { ...dirOptions, enabled, path: dirPath, - pattern: dirOptions.pattern || `**/*.{${builder.supportedExtensions.join(',')}}`, + extensions, + pattern: dirOptions.pattern || `**/*.{${extensions.join(',')}}`, ignore: nuxtIgnorePatterns.concat(dirOptions.ignore || []), transpile: (transpile === 'auto' ? dirPath.includes('node_modules') : transpile) } From c9108b5a54b0928bea5cbbdc2603081fd4a40bdc Mon Sep 17 00:00:00 2001 From: pooya parsa Date: Sat, 30 May 2020 14:48:50 +0200 Subject: [PATCH 02/10] test: update fixture for multi-file --- test/fixture/components/multifile/ComponentC.js | 0 test/fixture/components/multifile/ComponentC.vue | 0 test/fixture/nuxt.config.ts | 2 +- 3 files changed, 1 insertion(+), 1 deletion(-) create mode 100644 test/fixture/components/multifile/ComponentC.js create mode 100644 test/fixture/components/multifile/ComponentC.vue diff --git a/test/fixture/components/multifile/ComponentC.js b/test/fixture/components/multifile/ComponentC.js new file mode 100644 index 0000000..e69de29 diff --git a/test/fixture/components/multifile/ComponentC.vue b/test/fixture/components/multifile/ComponentC.vue new file mode 100644 index 0000000..e69de29 diff --git a/test/fixture/nuxt.config.ts b/test/fixture/nuxt.config.ts index b3a45b4..6f6acfd 100644 --- a/test/fixture/nuxt.config.ts +++ b/test/fixture/nuxt.config.ts @@ -11,7 +11,7 @@ const config: Configuration = { components: { dirs: [ - '~/components', + { path: '~/components', extensions: ['vue'] }, '~/non-existent', { path: '@/components/base', prefix: 'Base' }, { path: '@/components/icons', prefix: 'Icon', transpile: true /* Only for coverage purpose */ } From 11bcdc091b6dca531089ea1d0652bfe2afce1337 Mon Sep 17 00:00:00 2001 From: pooya parsa Date: Sat, 30 May 2020 14:49:29 +0200 Subject: [PATCH 03/10] test: make multifile fixture using index --- test/fixture/components/multifile/{ComponentC.js => index.js} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename test/fixture/components/multifile/{ComponentC.js => index.js} (100%) diff --git a/test/fixture/components/multifile/ComponentC.js b/test/fixture/components/multifile/index.js similarity index 100% rename from test/fixture/components/multifile/ComponentC.js rename to test/fixture/components/multifile/index.js From 7bd8895f7bee1909655f1df864840302eebe087b Mon Sep 17 00:00:00 2001 From: pooya parsa Date: Sat, 30 May 2020 14:54:49 +0200 Subject: [PATCH 04/10] docs: add extensions --- README.md | 22 ++++++++++++++++++++-- 1 file changed, 20 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 530735d..a418cc7 100755 --- a/README.md +++ b/README.md @@ -163,12 +163,30 @@ Path (absolute or relative) to the directory containing your components. You can use nuxt aliases (`~` or `@`) to refer to directories inside project or directly use a npm package path similar to require. +#### extensions + +- Type: `Array` +- Default: + - Extensions supported by nuxt builder (`builder.supportedExtensions`) + - Default supported extensions `**/*.{vue,js}` or `**/*.{vue,js,ts,tsx}` depending on your environment + +**Example:** Support multi-file component structure + +If you prefer to split your SFCs into `.js`, `.vue` and `.css`, you can only enable `.vue` files to be scanned: + +```js +// nuxt.config.js +export default { + components: [ + { path: '~/components', extensions: ['vue'] } + ] +} +``` + #### pattern - Type: `string` ([glob pattern]( https://github.com/isaacs/node-glob#glob-primer)) - Default: `**/*.${extensions.join(',')}` - - `extensions` being Nuxt `builder.supportedExtensions` - - Resulting in `**/*.{vue,js}` or `**/*.{vue,js,ts,tsx}` depending on your environment Accept Pattern that will be run against specified `path`. From f6173dbe918461b65a5c19f22faf2579ca44ec6d Mon Sep 17 00:00:00 2001 From: pooya parsa Date: Sat, 30 May 2020 14:56:01 +0200 Subject: [PATCH 05/10] docs: simplify prefix section --- README.md | 11 +++-------- 1 file changed, 3 insertions(+), 8 deletions(-) diff --git a/README.md b/README.md index a418cc7..d675068 100755 --- a/README.md +++ b/README.md @@ -210,15 +210,10 @@ Example below adds `awesome-`/`Awesome` prefix to the name of components in `awe ```js // nuxt.config.js export default { - components: { - dirs: [ + components: [ '~/components', - { - path: '~/components/awesome/', - prefix: 'awesome' - } - ] - } + { path: '~/components/awesome/', prefix: 'awesome' } + ] } ``` From 200d4b9007c236de55e7df8fbf794ef7370b88ea Mon Sep 17 00:00:00 2001 From: pooya parsa Date: Mon, 1 Jun 2020 13:26:16 +0200 Subject: [PATCH 06/10] docs: simplify --- README.md | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index d675068..c274012 100755 --- a/README.md +++ b/README.md @@ -127,10 +127,7 @@ If you want to keep the filename as `Bar.vue`, consider using the `prefix` optio ```js components: [ '~/components/', - { - path: '~/components/foo/', - prefix: 'foo' - } + { path: '~/components/foo/', prefix: 'foo' } ] ``` @@ -174,6 +171,15 @@ You can use nuxt aliases (`~` or `@`) to refer to directories inside project or If you prefer to split your SFCs into `.js`, `.vue` and `.css`, you can only enable `.vue` files to be scanned: +``` +├── src +│ └── components +│ └── componentC +│ └── componentC.vue +│ └── componentC.js +│ └── componentC.scss +``` + ```js // nuxt.config.js export default { From 16d4bff5125749eaa912eae4c972173dbdcbd998 Mon Sep 17 00:00:00 2001 From: pooya parsa Date: Mon, 1 Jun 2020 13:31:16 +0200 Subject: [PATCH 07/10] docs: fix --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index c274012..718439c 100755 --- a/README.md +++ b/README.md @@ -165,7 +165,7 @@ You can use nuxt aliases (`~` or `@`) to refer to directories inside project or - Type: `Array` - Default: - Extensions supported by nuxt builder (`builder.supportedExtensions`) - - Default supported extensions `**/*.{vue,js}` or `**/*.{vue,js,ts,tsx}` depending on your environment + - Default supported extensions `['vue', 'js']` or `['vue', 'js', 'ts', 'tsx']` depending on your environment **Example:** Support multi-file component structure From df84ec601c3104e0d2bbf599741af94877f5bbc1 Mon Sep 17 00:00:00 2001 From: pooya parsa Date: Mon, 1 Jun 2020 13:32:16 +0200 Subject: [PATCH 08/10] test: update expectedComponents --- test/unit/scanner.test.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/test/unit/scanner.test.ts b/test/unit/scanner.test.ts index c1bcbd3..0f28a73 100644 --- a/test/unit/scanner.test.ts +++ b/test/unit/scanner.test.ts @@ -5,6 +5,7 @@ test('scanner', async () => { const expectedComponents = [ 'BaseButton', + 'ComponentC', 'BaseSecondButton', 'IconHome', 'Bar', From 204ad116e9d85d8d4a2fe3f70e954b9d30f667d8 Mon Sep 17 00:00:00 2001 From: pooya parsa Date: Mon, 1 Jun 2020 13:52:27 +0200 Subject: [PATCH 09/10] fix: add trailing , to pattern fixing glob issue --- src/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/index.ts b/src/index.ts index e532e64..c616d27 100644 --- a/src/index.ts +++ b/src/index.ts @@ -72,7 +72,7 @@ export default function () { enabled, path: dirPath, extensions, - pattern: dirOptions.pattern || `**/*.{${extensions.join(',')}}`, + pattern: dirOptions.pattern || `**/*.{${extensions.join(',')},}`, ignore: nuxtIgnorePatterns.concat(dirOptions.ignore || []), transpile: (transpile === 'auto' ? dirPath.includes('node_modules') : transpile) } From 6b90404bdd01eccd8cdf66a18776f20c307cb408 Mon Sep 17 00:00:00 2001 From: pooya parsa Date: Mon, 1 Jun 2020 13:52:58 +0200 Subject: [PATCH 10/10] test: update fixture --- .../components/multifile/{ => ComponentC}/ComponentC.vue | 0 test/fixture/components/multifile/{ => ComponentC}/index.js | 0 test/fixture/nuxt.config.ts | 3 ++- 3 files changed, 2 insertions(+), 1 deletion(-) rename test/fixture/components/multifile/{ => ComponentC}/ComponentC.vue (100%) rename test/fixture/components/multifile/{ => ComponentC}/index.js (100%) diff --git a/test/fixture/components/multifile/ComponentC.vue b/test/fixture/components/multifile/ComponentC/ComponentC.vue similarity index 100% rename from test/fixture/components/multifile/ComponentC.vue rename to test/fixture/components/multifile/ComponentC/ComponentC.vue diff --git a/test/fixture/components/multifile/index.js b/test/fixture/components/multifile/ComponentC/index.js similarity index 100% rename from test/fixture/components/multifile/index.js rename to test/fixture/components/multifile/ComponentC/index.js diff --git a/test/fixture/nuxt.config.ts b/test/fixture/nuxt.config.ts index 6f6acfd..03dc7e2 100644 --- a/test/fixture/nuxt.config.ts +++ b/test/fixture/nuxt.config.ts @@ -11,7 +11,8 @@ const config: Configuration = { components: { dirs: [ - { path: '~/components', extensions: ['vue'] }, + '~/components', + { path: '~/components/multifile', extensions: ['vue'] }, '~/non-existent', { path: '@/components/base', prefix: 'Base' }, { path: '@/components/icons', prefix: 'Icon', transpile: true /* Only for coverage purpose */ }