fix: sourcemap support for nuxt:components-loader (#3439)

This commit is contained in:
Anthony Fu 2022-03-01 03:20:41 +08:00 committed by GitHub
parent 17bf70ae1c
commit 3888b0c338
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 21 additions and 6 deletions

View File

@ -49,6 +49,7 @@
"hash-sum": "^2.0.0", "hash-sum": "^2.0.0",
"hookable": "^5.1.1", "hookable": "^5.1.1",
"knitwork": "^0.1.0", "knitwork": "^0.1.0",
"magic-string-extra": "^0.1.2",
"mlly": "^0.4.3", "mlly": "^0.4.3",
"murmurhash-es": "^0.1.1", "murmurhash-es": "^0.1.1",
"nitropack": "npm:nitropack-edge@latest", "nitropack": "npm:nitropack-edge@latest",

View File

@ -2,6 +2,7 @@ import { createUnplugin } from 'unplugin'
import { parseQuery, parseURL } from 'ufo' 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-extra'
interface LoaderOptions { interface LoaderOptions {
getComponents(): Component[] getComponents(): Component[]
@ -17,8 +18,8 @@ export const loaderPlugin = createUnplugin((options: LoaderOptions) => ({
// from `type=template` (in Webpack) and bare `.vue` file (in Vite) // from `type=template` (in Webpack) and bare `.vue` file (in Vite)
return pathname.endsWith('.vue') && (query.type === 'template' || !search) return pathname.endsWith('.vue') && (query.type === 'template' || !search)
}, },
transform (code) { transform (code, id) {
return transform(code, options.getComponents()) return transform(code, id, options.getComponents())
} }
})) }))
@ -26,13 +27,14 @@ function findComponent (components: Component[], name:string) {
return components.find(({ pascalName, kebabName }) => [pascalName, kebabName].includes(name)) return components.find(({ pascalName, kebabName }) => [pascalName, kebabName].includes(name))
} }
function transform (content: string, components: Component[]) { function transform (code: string, id: string, components: Component[]) {
let num = 0 let num = 0
let imports = '' let imports = ''
const map = new Map<Component, string>() const map = new Map<Component, string>()
const s = new MagicString(code)
// replace `_resolveComponent("...")` to direct import // replace `_resolveComponent("...")` to direct import
const newContent = content.replace(/ _resolveComponent\("(.*?)"\)/g, (full, name) => { s.replace(/ _resolveComponent\("(.*?)"\)/g, (full, name) => {
const component = findComponent(components, name) const component = findComponent(components, name)
if (component) { if (component) {
const identifier = map.get(component) || `__nuxt_component_${num++}` const identifier = map.get(component) || `__nuxt_component_${num++}`
@ -44,7 +46,9 @@ function transform (content: string, components: Component[]) {
return full return full
}) })
if (!imports || newContent === content) { return } if (imports) {
s.prepend(imports + '\n')
}
return `${imports}\n${newContent}` return s.toRollupResult(true, { source: id, includeContent: true })
} }

View File

@ -13761,6 +13761,15 @@ __metadata:
languageName: node languageName: node
linkType: hard linkType: hard
"magic-string-extra@npm:^0.1.2":
version: 0.1.2
resolution: "magic-string-extra@npm:0.1.2"
dependencies:
magic-string: ^0.25.7
checksum: 196dec128985162ff559752dd28f358bacd203e9e9e2bcb7d3eb8a1cdacc8a60ce1d49709f31de16f594adb60566959dbb04750560c3cbc872f520d062dba0ee
languageName: node
linkType: hard
"magic-string@npm:^0.25.7": "magic-string@npm:^0.25.7":
version: 0.25.7 version: 0.25.7
resolution: "magic-string@npm:0.25.7" resolution: "magic-string@npm:0.25.7"
@ -15418,6 +15427,7 @@ __metadata:
hash-sum: ^2.0.0 hash-sum: ^2.0.0
hookable: ^5.1.1 hookable: ^5.1.1
knitwork: ^0.1.0 knitwork: ^0.1.0
magic-string-extra: ^0.1.2
mlly: ^0.4.3 mlly: ^0.4.3
murmurhash-es: ^0.1.1 murmurhash-es: ^0.1.1
nitropack: "npm:nitropack-edge@latest" nitropack: "npm:nitropack-edge@latest"