From a4f546b2af51992edbd26affec572b5a4c40bdbd Mon Sep 17 00:00:00 2001 From: Anthony Fu Date: Fri, 17 Sep 2021 23:56:03 +0800 Subject: [PATCH 1/8] feat: use unplugin for loader --- package.json | 12 ++--- src/index.ts | 42 +++++---------- src/loader.ts | 96 ++++++++++++++++++++++------------ src/tagExtractor.ts | 31 ----------- test/unit/loader.test.ts | 54 ------------------- test/unit/tagExtractor.test.ts | 14 ----- yarn.lock | 15 +++++- 7 files changed, 97 insertions(+), 167 deletions(-) delete mode 100644 src/tagExtractor.ts delete mode 100644 test/unit/loader.test.ts delete mode 100644 test/unit/tagExtractor.test.ts diff --git a/package.json b/package.json index 07f1dd4..695078b 100644 --- a/package.json +++ b/package.json @@ -7,8 +7,7 @@ "exports": { ".": "./dist/index.js", "./*": "./*", - "./package.json": "./package.json", - "./loader": "./dist/loader.js" + "./package.json": "./package.json" }, "main": "dist/index.js", "types": "dist/index.d.ts", @@ -27,14 +26,14 @@ "test": "yarn lint && jest --verbose" }, "dependencies": { + "@rollup/pluginutils": "^4.1.1", "chalk": "^4.1.2", "chokidar": "^3.5.2", - "glob": "^7.1.7", "globby": "^11.0.4", + "magic-string": "^0.25.7", "scule": "^0.2.1", "semver": "^7.3.5", - "upath": "^2.0.1", - "vue-template-compiler": "^2.6.14" + "upath": "^2.0.1" }, "devDependencies": { "@babel/preset-env": "latest", @@ -56,7 +55,8 @@ "pug": "latest", "pug-plain-loader": "latest", "siroc": "0.15.0", - "standard-version": "latest" + "standard-version": "latest", + "unplugin": "^0.2.11" }, "peerDependencies": { "consola": "*" diff --git a/src/index.ts b/src/index.ts index 1df3fd4..ded736e 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,13 +1,13 @@ import fs from 'fs' import path from 'upath' import chokidar from 'chokidar' -import type { Configuration as WebpackConfig, Entry as WebpackEntry } from 'webpack' import type { Module } from '@nuxt/types/config' import consola from 'consola' import { requireNuxtVersion } from './compatibility' import { scanComponents } from './scan' import type { Options, ComponentsDir } from './types' +import { loader } from './loader' const isPureObjectOrString = (val: any) => (!Array.isArray(val) && typeof val === 'object') || typeof val === 'string' const getDir = (p: string) => fs.statSync(p).isDirectory() ? p : path.dirname(p) @@ -98,36 +98,22 @@ const componentsModule: Module = function () { consola.info('Using components loader to optimize imports') this.extendBuild((config) => { const vueRule = config.module?.rules.find(rule => rule.test?.toString().includes('.vue')) - if (!vueRule) { - throw new Error('Cannot find vue loader') - } - if (!vueRule.use) { - vueRule.use = [{ - loader: vueRule.loader!.toString(), - options: vueRule.options - }] - delete vueRule.loader - delete vueRule.options - } - if (!Array.isArray(vueRule!.use)) { - // @ts-ignore - vueRule.use = [vueRule.use] - } - - // @ts-ignore - vueRule!.use!.unshift({ - loader: require.resolve('./loader'), - options: { - getComponents: () => components + config.plugins = config.plugins || [] + config.plugins.push(loader.webpack({ + include: vueRule?.test as any, + findComponent (name) { + return components.find(component => component.kebabName === name || component.pascalName === name) } - }) + }) as any) }) - // Add Webpack entry for runtime installComponents function - nuxt.hook('webpack:config', (configs: WebpackConfig[]) => { - for (const config of configs.filter(c => ['client', 'modern', 'server'].includes(c.name!))) { - ((config.entry as WebpackEntry).app as string[]).unshift(path.resolve(__dirname, '../lib/installComponents.js')) - } + this.nuxt.hook('vite:extend', ({ config }: any) => { + config.plugins = config.plugins || [] + config.plugins.push(loader.vite({ + findComponent (name) { + return components.find(component => component.kebabName === name || component.pascalName === name) + } + })) }) } diff --git a/src/loader.ts b/src/loader.ts index e7149d2..450fd57 100644 --- a/src/loader.ts +++ b/src/loader.ts @@ -1,42 +1,72 @@ -import type { loader as WebpackLoader } from 'webpack' -import { extractTags } from './tagExtractor' -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.isAsync ? c.asyncImport : c.import}`).join(',') + '}' - - let newContent = '/* nuxt-component-imports */\n' - newContent += `installComponents(component, ${imports})\n` - - // Insert our modification before the HMR code - const hotReload = content.indexOf('/* hot reload */') - if (hotReload > -1) { - content = content.slice(0, hotReload) + newContent + '\n\n' + content.slice(hotReload) - } else { - content += '\n\n' + newContent - } +import { createUnplugin } from 'unplugin' +import MagicString from 'magic-string' +import { pascalCase } from 'scule' +import { createFilter } from '@rollup/pluginutils' +import type { FilterPattern } from '@rollup/pluginutils' +import { Component } from './types' + +export const DISABLE_COMMENT = '/* nuxt-components disabled */' - return content +export interface Options { + findComponent(name: string): Component | undefined + include?: FilterPattern + exclude?: FilterPattern } -export default async function loader (this: WebpackLoader.LoaderContext, content: string) { - this.async() - this.cacheable() +export const loader = createUnplugin((options) => { + const filter = createFilter( + options?.include || [/\.vue$/, /\.vue\?vue/], + options?.exclude || [/node_modules/, /\.git/, /\.nuxt/] + ) + + return { + name: 'nuxt-components-loader', + enforce: 'post', + + transformInclude (id) { + return filter(id) + }, + + async transform (code, id) { + const s = new MagicString(code) - if (!this.resourceQuery) { - this.addDependency(this.resourcePath) + let no = 0 + const componentPaths: string[] = [] + const head: string[] = [] - const { getComponents } = this.query - const nonAsyncComponents = getComponents().filter((c: Component) => c.isAsync !== true) + for (const match of code.matchAll(/_c\([\s\n\t]*['"](.+?)["']([,)])/g)) { + const [full, matchedName, append] = match - const tags = await extractTags(this.resourcePath) - const matchedComponents = matcher(tags, nonAsyncComponents) + if (match.index != null && matchedName && !matchedName.startsWith('_')) { + const start = match.index + const end = start + full.length + // debug(`| ${matchedName}`) + const name = pascalCase(matchedName) + componentPaths.push(name) + const component = await options!.findComponent(name) //, [sfcPath], matchedName) + if (component) { + const varName = `__nuxt_components_${no}` + head.push(`import ${varName} from "${component.filePath}"`) + no += 1 + s.overwrite(start, end, `_c(${varName}${append}`) + } + } + } - if (matchedComponents.length) { - content = install.call(this, content, matchedComponents) + // debug(`^ (${no})`) + + if (!head.length) { + return null + } + + s.prepend(`${DISABLE_COMMENT}${head.join(';')};`) + return { + code: s.toString(), + map: s.generateMap({ + source: id, + includeContent: true + }) + } } } - - this.callback(null, content) -} +}) diff --git a/src/tagExtractor.ts b/src/tagExtractor.ts deleted file mode 100644 index f519da5..0000000 --- a/src/tagExtractor.ts +++ /dev/null @@ -1,31 +0,0 @@ - -import { readFileSync } from 'fs' -import { - compile, - parseComponent, - ModuleOptions as CompilerModuleOptions -} from 'vue-template-compiler' - -export async function extractTags (resourcePath: string): Promise { - const tags = new Set() - const file = (await readFileSync(resourcePath)).toString('utf8') - const component = parseComponent(file) - - if (component.template) { - if (component.template.lang === 'pug') { - try { - const pug = require('pug') - component.template.content = pug.render(component.template.content, { filename: resourcePath }) - } catch (err) { /* Ignore compilation errors, they'll be picked up by other loaders */ } - } - compile(component.template.content, { - modules: [{ - postTransformNode: (el) => { - tags.add(el.tag) - } - } as CompilerModuleOptions] - }) - } - - return [...tags] -} diff --git a/test/unit/loader.test.ts b/test/unit/loader.test.ts deleted file mode 100644 index 9b9ead2..0000000 --- a/test/unit/loader.test.ts +++ /dev/null @@ -1,54 +0,0 @@ -import path from 'upath' -import { loader as WebpackLoader } from 'webpack' -import loader from '../../src/loader' -import { scanFixtureComponents } from './utils' - -let testLoader - -beforeAll(async () => { - const fixtureComponents = await scanFixtureComponents() - testLoader = async (context: object, content?: string | Buffer): Promise<{ content: typeof content }> => { - let finalContent: typeof content - - await loader.call({ - addDependency: (_file) => {}, - async: () => {}, - cacheable: (_bool) => {}, - callback: (_, newContent) => { finalContent = newContent }, - query: { - dependencies: [], - getComponents: () => fixtureComponents - }, - ...context - } as WebpackLoader.LoaderContext, content) - - return { content: finalContent } - } -}) - -function expectToContainImports (content: string) { - const fixturePath = p => path.resolve('test/fixture', p).replace(/\\/g, '\\\\') - expect(content).toContain(`require('${fixturePath('components/Foo.vue')}')`) - expect(content).toContain(`require('${fixturePath('components/0-base/1.Button.vue')}')`) - expect(content).toContain(`require('${fixturePath('components/icons/Home.vue')}')`) -} - -test('default', async () => { - const { content } = await testLoader({ resourcePath: path.resolve('test/fixture/pages/index.vue') }, 'test') - expectToContainImports(content) -}) - -test('hot reload', async () => { - const { content } = await testLoader({ resourcePath: path.resolve('test/fixture/pages/index.vue') }, '/* hot reload */') - expectToContainImports(content) -}) - -test('resourceQuery is truthy', async () => { - const { content } = await testLoader({ resourceQuery: 'something' }, 'test') - expect(content).toEqual('test') -}) - -test('no matched components', async () => { - const { content } = await testLoader({ resourcePath: path.resolve('test/fixture/pages/no-components.vue') }, 'test') - expect(content).toEqual('test') -}) diff --git a/test/unit/tagExtractor.test.ts b/test/unit/tagExtractor.test.ts deleted file mode 100644 index ff3b897..0000000 --- a/test/unit/tagExtractor.test.ts +++ /dev/null @@ -1,14 +0,0 @@ -import path from 'upath' -import { extractTags } from '../../src/tagExtractor' - -test('with template', async () => { - const tags = await extractTags(path.resolve('test/fixture/pages/index.vue')) - - expect(tags).toEqual(['Header', 'Foo', 'LazyBar', 'BaseButton', 'IconHome', 'MAwesome', 'Functional', 'NComponent', 'div']) -}) - -test('without template', async () => { - const tags = await extractTags(path.resolve('test/fixture/pages/no-template.vue')) - - expect(tags).toHaveLength(0) -}) diff --git a/yarn.lock b/yarn.lock index caf6c54..5d10c53 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1692,7 +1692,7 @@ estree-walker "^1.0.1" picomatch "^2.2.2" -"@rollup/pluginutils@^4.1.0": +"@rollup/pluginutils@^4.1.0", "@rollup/pluginutils@^4.1.1": version "4.1.1" resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-4.1.1.tgz#1d4da86dd4eded15656a57d933fda2b9a08d47ec" integrity sha512-clDjivHqWGXi7u+0d2r2sBi4Ie6VLEAzWMIkvJLnDmxoOhBYOTfzGbOQBA32THHm11/LiJbd01tJUpJsbshSWQ== @@ -11289,6 +11289,14 @@ unpipe@~1.0.0: resolved "https://registry.yarnpkg.com/unpipe/-/unpipe-1.0.0.tgz#b2bf4ee8514aae6165b4817829d21b2ef49904ec" integrity sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw= +unplugin@^0.2.11: + version "0.2.11" + resolved "https://registry.yarnpkg.com/unplugin/-/unplugin-0.2.11.tgz#f9f3f8b2b5a7c1b16325dbdea9568ee3652f6e49" + integrity sha512-PY8x+hG1smsF06chESP5BurwZN+tZK1tNjKsCXe4XFOfRCIOcrIPCrwBKwLSfeAdojVCtMjSpJ2e/l5QXNw16A== + dependencies: + upath "^2.0.1" + webpack-virtual-modules "^0.4.3" + unquote@~1.1.1: version "1.1.1" resolved "https://registry.yarnpkg.com/unquote/-/unquote-1.1.1.tgz#8fded7324ec6e88a0ff8b905e7c098cdc086d544" @@ -11643,6 +11651,11 @@ webpack-sources@^1.0.1, webpack-sources@^1.1.0, webpack-sources@^1.4.0, webpack- source-list-map "^2.0.0" source-map "~0.6.1" +webpack-virtual-modules@^0.4.3: + version "0.4.3" + resolved "https://registry.yarnpkg.com/webpack-virtual-modules/-/webpack-virtual-modules-0.4.3.tgz#cd597c6d51d5a5ecb473eea1983a58fa8a17ded9" + integrity sha512-5NUqC2JquIL2pBAAo/VfBP6KuGkHIZQXW/lNKupLPfhViwh8wNsu0BObtl09yuKZszeEUfbXz8xhrHvSG16Nqw== + webpack@^4.46.0: version "4.46.0" resolved "https://registry.yarnpkg.com/webpack/-/webpack-4.46.0.tgz#bf9b4404ea20a073605e0a011d188d77cb6ad542" From b43ff079c383a4107d8a130ae47502136e494b54 Mon Sep 17 00:00:00 2001 From: Anthony Fu Date: Sat, 18 Sep 2021 00:00:52 +0800 Subject: [PATCH 2/8] chore: cleanup --- lib/installComponents.js | 38 -------------------------------------- 1 file changed, 38 deletions(-) delete mode 100644 lib/installComponents.js diff --git a/lib/installComponents.js b/lib/installComponents.js deleted file mode 100644 index 31c83aa..0000000 --- a/lib/installComponents.js +++ /dev/null @@ -1,38 +0,0 @@ -global.installComponents = function (component, components) { - var options = typeof component.exports === 'function' - ? component.exports.extendOptions - : component.options - - if (typeof component.exports === 'function') { - options.components = component.exports.options.components - } - - options.components = options.components || {} - - for (var i in components) { - options.components[i] = options.components[i] || components[i] - } - - - if (options.functional) { - provideFunctionalComponents(component, options.components) - } -} - -var functionalPatchKey = '_functionalComponents' - -function provideFunctionalComponents(component, components) { - if (component.exports[functionalPatchKey]) { - return - } - component.exports[functionalPatchKey] = true - - var render = component.exports.render - component.exports.render = function (h, vm) { - return render(h, Object.assign({}, vm, { - _c: function (n, a, b) { - return vm._c(components[n] || n, a, b) - } - })) - } -} From 8541b0d09148e5b87440cc515b0fb1224f94b8e1 Mon Sep 17 00:00:00 2001 From: Anthony Fu Date: Fri, 24 Sep 2021 08:57:42 +0800 Subject: [PATCH 3/8] fix: prevent transforming twice --- src/loader.ts | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/src/loader.ts b/src/loader.ts index 450fd57..720c9af 100644 --- a/src/loader.ts +++ b/src/loader.ts @@ -28,11 +28,15 @@ export const loader = createUnplugin((options) => { }, async transform (code, id) { + if (code.includes(DISABLE_COMMENT)) { + return + } + const s = new MagicString(code) let no = 0 const componentPaths: string[] = [] - const head: string[] = [] + const prepend: string[] = [] for (const match of code.matchAll(/_c\([\s\n\t]*['"](.+?)["']([,)])/g)) { const [full, matchedName, append] = match @@ -40,26 +44,23 @@ export const loader = createUnplugin((options) => { if (match.index != null && matchedName && !matchedName.startsWith('_')) { const start = match.index const end = start + full.length - // debug(`| ${matchedName}`) const name = pascalCase(matchedName) componentPaths.push(name) - const component = await options!.findComponent(name) //, [sfcPath], matchedName) + const component = await options!.findComponent(name) if (component) { const varName = `__nuxt_components_${no}` - head.push(`import ${varName} from "${component.filePath}"`) + prepend.push(`import ${varName} from "${component.filePath}"`) no += 1 s.overwrite(start, end, `_c(${varName}${append}`) } } } - // debug(`^ (${no})`) - - if (!head.length) { + if (!prepend.length) { return null } - s.prepend(`${DISABLE_COMMENT}${head.join(';')};`) + s.prepend(`${DISABLE_COMMENT}${prepend.join(';')};`) return { code: s.toString(), map: s.generateMap({ From 2ad6770b48e76cf1897e5b01b82483b2d89f7eae Mon Sep 17 00:00:00 2001 From: Anthony Fu Date: Fri, 24 Sep 2021 08:58:43 +0800 Subject: [PATCH 4/8] chore: update types --- src/loader.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/loader.ts b/src/loader.ts index 720c9af..694c27f 100644 --- a/src/loader.ts +++ b/src/loader.ts @@ -8,7 +8,7 @@ import { Component } from './types' export const DISABLE_COMMENT = '/* nuxt-components disabled */' export interface Options { - findComponent(name: string): Component | undefined + findComponent(name: string): Component | void | Promise include?: FilterPattern exclude?: FilterPattern } From 8e0953a880ca1272780aa955f92027ea026edafd Mon Sep 17 00:00:00 2001 From: Anthony Fu Date: Fri, 24 Sep 2021 09:05:23 +0800 Subject: [PATCH 5/8] chore: switch to pathe --- package.json | 6 +++--- src/index.ts | 12 ++++++------ src/scan.ts | 2 +- test/unit/utils.ts | 16 ++++++++-------- yarn.lock | 15 ++++++++++----- 5 files changed, 28 insertions(+), 23 deletions(-) diff --git a/package.json b/package.json index 695078b..13c8730 100644 --- a/package.json +++ b/package.json @@ -31,9 +31,10 @@ "chokidar": "^3.5.2", "globby": "^11.0.4", "magic-string": "^0.25.7", + "pathe": "^0.0.2", "scule": "^0.2.1", "semver": "^7.3.5", - "upath": "^2.0.1" + "unplugin": "^0.2.14" }, "devDependencies": { "@babel/preset-env": "latest", @@ -55,8 +56,7 @@ "pug": "latest", "pug-plain-loader": "latest", "siroc": "0.15.0", - "standard-version": "latest", - "unplugin": "^0.2.11" + "standard-version": "latest" }, "peerDependencies": { "consola": "*" diff --git a/src/index.ts b/src/index.ts index ded736e..0889889 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,5 +1,5 @@ import fs from 'fs' -import path from 'upath' +import { dirname, resolve, relative } from 'pathe' import chokidar from 'chokidar' import type { Module } from '@nuxt/types/config' import consola from 'consola' @@ -10,7 +10,7 @@ import type { Options, ComponentsDir } from './types' import { loader } from './loader' const isPureObjectOrString = (val: any) => (!Array.isArray(val) && typeof val === 'object') || typeof val === 'string' -const getDir = (p: string) => fs.statSync(p).isDirectory() ? p : path.dirname(p) +const getDir = (p: string) => fs.statSync(p).isDirectory() ? p : dirname(p) const componentsModule: Module = function () { const { nuxt } = this @@ -46,7 +46,7 @@ const componentsModule: Module = function () { } } catch (err) { /* istanbul ignore next */ - nuxt.options.watch.push(path.resolve(nuxt.options.srcDir, 'components', 'global')) + nuxt.options.watch.push(resolve(nuxt.options.srcDir, 'components', 'global')) } const componentDirs = options.dirs.filter(isPureObjectOrString).map((dir) => { @@ -150,16 +150,16 @@ const componentsModule: Module = function () { ] for (const t of templates) { this[t.includes('plugin') ? 'addPlugin' : 'addTemplate']({ - src: path.resolve(__dirname, '../templates', t), + src: resolve(__dirname, '../templates', t), fileName: t.replace('_', '.'), options: { getComponents } }) } // Add CLI info to inspect discovered components - const componentsListFile = path.resolve(nuxt.options.buildDir, 'components/readme.md') + const componentsListFile = resolve(nuxt.options.buildDir, 'components/readme.md') // eslint-disable-next-line no-console - consola.info('Discovered Components:', path.relative(process.cwd(), componentsListFile)) + consola.info('Discovered Components:', relative(process.cwd(), componentsListFile)) }) } diff --git a/src/scan.ts b/src/scan.ts index e429be7..0a76ea4 100644 --- a/src/scan.ts +++ b/src/scan.ts @@ -1,4 +1,4 @@ -import { basename, extname, join, dirname, relative } from 'upath' +import { basename, extname, join, dirname, relative } from 'pathe' import globby from 'globby' import { pascalCase, splitByCase } from 'scule' import type { ScanDir, Component } from './types' diff --git a/test/unit/utils.ts b/test/unit/utils.ts index e05acf8..4c8e6fa 100644 --- a/test/unit/utils.ts +++ b/test/unit/utils.ts @@ -1,4 +1,4 @@ -import path from 'upath' +import { resolve } from 'pathe' import { scanComponents } from '../../src/scan' export const warn = console.warn = jest.fn() // eslint-disable-line no-console @@ -11,37 +11,37 @@ const ignorePatterns = [ ] export function scanFixtureComponents () { - const srcDir = path.resolve('test/fixture') + const srcDir = resolve('test/fixture') return scanComponents([ { - path: path.resolve(srcDir, 'components'), + path: resolve(srcDir, 'components'), pattern: '**/*.{vue,js,ts}', ignore: ignorePatterns }, { - path: path.resolve(srcDir, 'components/base'), + path: resolve(srcDir, 'components/base'), pattern: '**/*.{vue,js,ts}', prefix: 'base', ignore: ignorePatterns }, { - path: path.resolve(srcDir, 'components/no-prefix'), + path: resolve(srcDir, 'components/no-prefix'), pattern: '**/*.{vue,js,ts}', ignore: ignorePatterns, pathPrefix: false }, { - path: path.resolve(srcDir, 'components/global'), + path: resolve(srcDir, 'components/global'), pattern: '**/*.{vue,js,ts}', ignore: ignorePatterns }, { - path: path.resolve(srcDir, 'components/multifile'), + path: resolve(srcDir, 'components/multifile'), pattern: '**/*.{vue,js,ts}', ignore: ignorePatterns }, { - path: path.resolve(srcDir, 'components/icons'), + path: resolve(srcDir, 'components/icons'), pattern: '**/*.{vue,js,ts}', prefix: 'icon', ignore: ignorePatterns diff --git a/yarn.lock b/yarn.lock index 5d10c53..b1e3e58 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8530,6 +8530,11 @@ path-type@^4.0.0: resolved "https://registry.yarnpkg.com/path-type/-/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b" integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw== +pathe@^0.0.2: + version "0.0.2" + resolved "https://registry.yarnpkg.com/pathe/-/pathe-0.0.2.tgz#d690780e578a8127e1d65828387609c153afc309" + integrity sha512-mmK20YtPb4yXHlaPuOD/uPIpRu7iIK45GA/GiRSlNpIdfWDG5aEQmFT1HHtBmJB+t/6DvFOtOsEipsPA8Bx2cw== + pbkdf2@^3.0.3: version "3.1.2" resolved "https://registry.yarnpkg.com/pbkdf2/-/pbkdf2-3.1.2.tgz#dd822aa0887580e52f1a039dc3eda108efae3075" @@ -11289,12 +11294,12 @@ unpipe@~1.0.0: resolved "https://registry.yarnpkg.com/unpipe/-/unpipe-1.0.0.tgz#b2bf4ee8514aae6165b4817829d21b2ef49904ec" integrity sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw= -unplugin@^0.2.11: - version "0.2.11" - resolved "https://registry.yarnpkg.com/unplugin/-/unplugin-0.2.11.tgz#f9f3f8b2b5a7c1b16325dbdea9568ee3652f6e49" - integrity sha512-PY8x+hG1smsF06chESP5BurwZN+tZK1tNjKsCXe4XFOfRCIOcrIPCrwBKwLSfeAdojVCtMjSpJ2e/l5QXNw16A== +unplugin@^0.2.14: + version "0.2.14" + resolved "https://registry.yarnpkg.com/unplugin/-/unplugin-0.2.14.tgz#d3a3b79f3d575aa82ccf0b35066d3dfbc43d234f" + integrity sha512-6B9RUTJzvdMjJshEGyiBc2HRpVTaRiQ7WEJxgL/pwH4RZZWzb1if5YjjYHOhcY8v34x8fgbvRWKxD+kyiPG5Gg== dependencies: - upath "^2.0.1" + pathe "^0.0.2" webpack-virtual-modules "^0.4.3" unquote@~1.1.1: From 98244f1a1685ff95eb71df64e561e7b17514cdc2 Mon Sep 17 00:00:00 2001 From: Anthony Fu Date: Fri, 24 Sep 2021 09:23:00 +0800 Subject: [PATCH 6/8] fix: self referencing --- src/loader.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/loader.ts b/src/loader.ts index 694c27f..d4a2f06 100644 --- a/src/loader.ts +++ b/src/loader.ts @@ -4,7 +4,6 @@ import { pascalCase } from 'scule' import { createFilter } from '@rollup/pluginutils' import type { FilterPattern } from '@rollup/pluginutils' import { Component } from './types' - export const DISABLE_COMMENT = '/* nuxt-components disabled */' export interface Options { @@ -47,7 +46,7 @@ export const loader = createUnplugin((options) => { const name = pascalCase(matchedName) componentPaths.push(name) const component = await options!.findComponent(name) - if (component) { + if (component && !id.startsWith(component.filePath)) { const varName = `__nuxt_components_${no}` prepend.push(`import ${varName} from "${component.filePath}"`) no += 1 From b7cb2a716c3424b1599af3b0d1f1bcb2fd393379 Mon Sep 17 00:00:00 2001 From: Anthony Fu Date: Thu, 30 Sep 2021 16:33:01 +0800 Subject: [PATCH 7/8] chore: update deps --- package.json | 4 ++-- yarn.lock | 17 ++++++++--------- 2 files changed, 10 insertions(+), 11 deletions(-) diff --git a/package.json b/package.json index 13c8730..a6e3803 100644 --- a/package.json +++ b/package.json @@ -31,10 +31,10 @@ "chokidar": "^3.5.2", "globby": "^11.0.4", "magic-string": "^0.25.7", - "pathe": "^0.0.2", + "pathe": "^0.2.0", "scule": "^0.2.1", "semver": "^7.3.5", - "unplugin": "^0.2.14" + "unplugin": "^0.2.16" }, "devDependencies": { "@babel/preset-env": "latest", diff --git a/yarn.lock b/yarn.lock index b1e3e58..f9e3bf4 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8530,10 +8530,10 @@ path-type@^4.0.0: resolved "https://registry.yarnpkg.com/path-type/-/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b" integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw== -pathe@^0.0.2: - version "0.0.2" - resolved "https://registry.yarnpkg.com/pathe/-/pathe-0.0.2.tgz#d690780e578a8127e1d65828387609c153afc309" - integrity sha512-mmK20YtPb4yXHlaPuOD/uPIpRu7iIK45GA/GiRSlNpIdfWDG5aEQmFT1HHtBmJB+t/6DvFOtOsEipsPA8Bx2cw== +pathe@^0.2.0: + version "0.2.0" + resolved "https://registry.yarnpkg.com/pathe/-/pathe-0.2.0.tgz#30fd7bbe0a0d91f0e60bae621f5d19e9e225c339" + integrity sha512-sTitTPYnn23esFR3RlqYBWn4c45WGeLcsKzQiUpXJAyfcWkolvlYpV8FLo7JishK946oQwMFUCHXQ9AjGPKExw== pbkdf2@^3.0.3: version "3.1.2" @@ -11294,12 +11294,11 @@ unpipe@~1.0.0: resolved "https://registry.yarnpkg.com/unpipe/-/unpipe-1.0.0.tgz#b2bf4ee8514aae6165b4817829d21b2ef49904ec" integrity sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw= -unplugin@^0.2.14: - version "0.2.14" - resolved "https://registry.yarnpkg.com/unplugin/-/unplugin-0.2.14.tgz#d3a3b79f3d575aa82ccf0b35066d3dfbc43d234f" - integrity sha512-6B9RUTJzvdMjJshEGyiBc2HRpVTaRiQ7WEJxgL/pwH4RZZWzb1if5YjjYHOhcY8v34x8fgbvRWKxD+kyiPG5Gg== +unplugin@^0.2.16: + version "0.2.16" + resolved "https://registry.yarnpkg.com/unplugin/-/unplugin-0.2.16.tgz#6f34e9f5068ca3ec92a36b016f47b5ad8bb875ca" + integrity sha512-KkXatHba0baJszSHW+2e8EQU/5Bz7rYwzYXu8wUeq97tE6K3wvub+7OWSuRv04LttvzNLsJ2jXEyR35gofv74Q== dependencies: - pathe "^0.0.2" webpack-virtual-modules "^0.4.3" unquote@~1.1.1: From 539eb7d095153064b07b499bf0b918f3381023d1 Mon Sep 17 00:00:00 2001 From: Anthony Fu Date: Thu, 30 Sep 2021 16:51:16 +0800 Subject: [PATCH 8/8] chore: update tests --- src/loader.ts | 1 + test/unit/__snapshots__/loader.test.ts.snap | 8 ++++++ test/unit/loader.test.ts | 31 +++++++++++++++++++++ 3 files changed, 40 insertions(+) create mode 100644 test/unit/__snapshots__/loader.test.ts.snap create mode 100644 test/unit/loader.test.ts diff --git a/src/loader.ts b/src/loader.ts index d4a2f06..49094d1 100644 --- a/src/loader.ts +++ b/src/loader.ts @@ -4,6 +4,7 @@ import { pascalCase } from 'scule' import { createFilter } from '@rollup/pluginutils' import type { FilterPattern } from '@rollup/pluginutils' import { Component } from './types' + export const DISABLE_COMMENT = '/* nuxt-components disabled */' export interface Options { diff --git a/test/unit/__snapshots__/loader.test.ts.snap b/test/unit/__snapshots__/loader.test.ts.snap new file mode 100644 index 0000000..69a7110 --- /dev/null +++ b/test/unit/__snapshots__/loader.test.ts.snap @@ -0,0 +1,8 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`loader 1`] = ` +"/* nuxt-components disabled */import __nuxt_components_0 from \\"/Users/antfu/i/nuxt-components/test/fixture/components/Header.vue\\";import __nuxt_components_1 from \\"/Users/antfu/i/nuxt-components/test/fixture/components/Foo.vue\\";import __nuxt_components_2 from \\"/Users/antfu/i/nuxt-components/test/fixture/components/0-base/1.Button.vue\\";import __nuxt_components_3 from \\"/Users/antfu/i/nuxt-components/test/fixture/components/icons/Home.vue\\";import __nuxt_components_4 from \\"/Users/antfu/i/nuxt-components/test/fixture/components/functional/Functional.vue\\";import __nuxt_components_5 from \\"/Users/antfu/i/nuxt-components/test/fixture/components/NComponent.vue\\";function anonymous( +) { +with(this){return _c('div',[_c(__nuxt_components_0),_v(\\" \\"),_c(__nuxt_components_1),_v(\\" \\"),_c('LazyBar'),_v(\\" \\"),_c(__nuxt_components_2),_v(\\" \\"),_c(__nuxt_components_3),_v(\\" \\"),_c('MAwesome'),_v(\\" \\"),_c(__nuxt_components_4),_v(\\" \\"),_c(__nuxt_components_5)],1)} +}" +`; diff --git a/test/unit/loader.test.ts b/test/unit/loader.test.ts new file mode 100644 index 0000000..7d74c1f --- /dev/null +++ b/test/unit/loader.test.ts @@ -0,0 +1,31 @@ +import { promises as fs } from 'fs' +import { resolve } from 'path' +import { compileToFunctions } from 'vue-template-compiler' +import { loader, DISABLE_COMMENT } from '../../src/loader' +import { scanFixtureComponents } from './utils' + +test('loader', async () => { + const components = await scanFixtureComponents() + + const transform = (code:string) => loader.raw({ + findComponent (name) { + return components.find(i => i.pascalName === name || i.kebabName === name) + } + }, {} as any).transform.call(null, code, '') + + expect(await transform(DISABLE_COMMENT)).toBeFalsy() + + const compiledTemplate = compileToFunctions(` +
+
+ + + + + + + +
+ `).render.toString() + expect((await transform(compiledTemplate)).code).toMatchSnapshot() +})