Zengtudor/Nuxt
1
0
Fork 0
mirror of https://github.com/nuxt/nuxt.git synced 2025-01-31 15:50:32 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(nuxt3): improve component loading behaviour (#3782)

Browse Source 
* fix: don't import multiple copies of the same component

* fix: match components by pascal case

* Update packages/nuxt3/src/components/loader.ts

Co-authored-by: pooya parsa <pyapar@gmail.com>

Co-authored-by: pooya parsa <pyapar@gmail.com>
This commit is contained in:
Daniel Roe 2022-03-18 18:42:40 +00:00 committed by GitHub
parent 73ee41cb58
commit 53fbca77d4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 9 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
packages/nuxt3/src/components/loader.ts
View File

@ -4,6 +4,7 @@ import { parseQuery, parseURL } from 'ufo'
import { Component } from '@nuxt/schema' import { Component } from '@nuxt/schema'
import { genImport } from 'knitwork' import { genImport } from 'knitwork'
import MagicString from 'magic-string' import MagicString from 'magic-string'
import { pascalCase } from 'scule'
interface LoaderOptions { interface LoaderOptions {
getComponents(): Component[] getComponents(): Component[]
@ -24,13 +25,14 @@ export const loaderPlugin = createUnplugin((options: LoaderOptions) => ({
} }
})) }))
function findComponent (components: Component[], name:string) { function findComponent (components: Component[], name: string) {
return components.find(({ pascalName, kebabName }) => [pascalName, kebabName].includes(name)) const id = pascalCase(name).replace(/["']/g, '')
return components.find(component => id === component.pascalName)
} }
function transform (code: string, id: string, components: Component[]) { function transform (code: string, id: string, components: Component[]) {
let num = 0 let num = 0
let imports = '' const imports = new Set<string>()
const map = new Map<Component, string>() const map = new Map<Component, string>()
const s = new MagicString(code) const s = new MagicString(code)
@ -40,15 +42,15 @@ function transform (code: string, id: string, components: Component[]) {
if (component) { if (component) {
const identifier = map.get(component) || `__nuxt_component_${num++}` const identifier = map.get(component) || `__nuxt_component_${num++}`
map.set(component, identifier) map.set(component, identifier)
imports += genImport(component.filePath, [{ name: component.export, as: identifier }]) imports.add(genImport(component.filePath, [{ name: component.export, as: identifier }]))
return ` ${identifier}` return ` ${identifier}`
} }
// no matched // no matched
return full return full
}) })
if (imports) { if (imports.size) {
s.prepend(imports + '\n') s.prepend([...imports, ''].join('\n'))
} }
if (s.hasChanged()) { if (s.hasChanged()) {

7
packages/nuxt3/src/components/scan.ts
View File

@ -3,12 +3,7 @@ import { globby } from 'globby'
import { pascalCase, splitByCase } from 'scule' import { pascalCase, splitByCase } from 'scule'
import type { Component, ComponentsDir } from '@nuxt/schema' import type { Component, ComponentsDir } from '@nuxt/schema'
import { isIgnored } from '@nuxt/kit' import { isIgnored } from '@nuxt/kit'
import { hyphenate } from '@vue/shared'
// vue@2 src/shared/util.js
// TODO: update to vue3?
function hyphenate (str: string): string {
return str.replace(/\B([A-Z])/g, '-$1').toLowerCase()
}
/** /**
* Scan the components inside different components folders * Scan the components inside different components folders