Zengtudor/Nuxt
1
0
Fork 0
mirror of https://github.com/nuxt/nuxt.git synced 2024-11-11 08:33:53 +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 { genImport } from 'knitwork'
import MagicString from 'magic-string'
import { pascalCase } from 'scule'
interface LoaderOptions {
getComponents(): Component[]
@ -24,13 +25,14 @@ export const loaderPlugin = createUnplugin((options: LoaderOptions) => ({
}
}))
function findComponent (components: Component[], name:string) {
return components.find(({ pascalName, kebabName }) => [pascalName, kebabName].includes(name))
function findComponent (components: Component[], name: string) {
const id = pascalCase(name).replace(/["']/g, '')
return components.find(component => id === component.pascalName)
}
function transform (code: string, id: string, components: Component[]) {
let num = 0
let imports = ''
const imports = new Set<string>()
const map = new Map<Component, string>()
const s = new MagicString(code)
@ -40,15 +42,15 @@ function transform (code: string, id: string, components: Component[]) {
if (component) {
const identifier = map.get(component) || `__nuxt_component_${num++}`
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}`
}
// no matched
return full
})
if (imports) {
s.prepend(imports + '\n')
if (imports.size) {
s.prepend([...imports, ''].join('\n'))
}
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 type { Component, ComponentsDir } from '@nuxt/schema'
import { isIgnored } from '@nuxt/kit'
// vue@2 src/shared/util.js
// TODO: update to vue3?
function hyphenate (str: string): string {
return str.replace(/\B([A-Z])/g, '-$1').toLowerCase()
}
import { hyphenate } from '@vue/shared'
/**
* Scan the components inside different components folders