Zengtudor/Nuxt
1
0
Fork 0
mirror of https://github.com/nuxt/nuxt.git synced 2024-11-22 13:45:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(vite): respect baseURL for public assets in dev (#28482)

Browse Source
This commit is contained in:
Daniel Roe 2024-08-09 13:46:38 +01:00
parent 60a209b2d9
commit f6e56fd3b2
No known key found for this signature in database
GPG Key ID: CBC814C393D93268
2 changed files with 85 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

125
packages/vite/src/plugins/public-dirs.ts
View File

@ -1,77 +1,112 @@
import { existsSync } from 'node:fs'
import { useNitro } from '@nuxt/kit'
import { createUnplugin } from 'unplugin'
import type { UnpluginOptions } from 'unplugin'
import { withLeadingSlash, withTrailingSlash } from 'ufo'
import { dirname, relative } from 'pathe'
import MagicString from 'magic-string'
import { isCSSRequest } from 'vite'
const PREFIX = 'virtual:public?'
const CSS_URL_RE = /url\((\/[^)]+)\)/g
const CSS_URL_SINGLE_RE = /url\(\/[^)]+\)/
export const VitePublicDirsPlugin = createUnplugin((options: { sourcemap?: boolean }) => {
interface VitePublicDirsPluginOptions {
dev?: boolean
sourcemap?: boolean
baseURL?: string
}
export const VitePublicDirsPlugin = createUnplugin((options: VitePublicDirsPluginOptions) => {
const { resolveFromPublicAssets } = useResolveFromPublicAssets()
return {
name: 'nuxt:vite-public-dir-resolution',
const devTransformPlugin: UnpluginOptions = {
name: 'nuxt:vite-public-dir-resolution-dev',
vite: {
load: {
enforce: 'pre',
handler (id) {
if (id.startsWith(PREFIX)) {
return `import { publicAssetsURL } from '#internal/nuxt/paths';export default publicAssetsURL(${JSON.stringify(decodeURIComponent(id.slice(PREFIX.length)))})`
}
},
},
resolveId: {
enforce: 'post',
handler (id) {
if (id === '/__skip_vite' || id[0] !== '/' || id.startsWith('/@fs')) { return }
if (resolveFromPublicAssets(id)) {
return PREFIX + encodeURIComponent(id)
}
},
},
renderChunk (code, chunk) {
if (!chunk.facadeModuleId?.includes('?inline&used')) { return }
transform (code, id) {
if (!isCSSRequest(id) || !CSS_URL_SINGLE_RE.test(code)) { return }
const s = new MagicString(code)
const q = code.match(/(?<= = )['"`]/)?.[0] || '"'
for (const [full, url] of code.matchAll(CSS_URL_RE)) {
if (url && resolveFromPublicAssets(url)) {
s.replace(full, `url(${q} + publicAssetsURL(${q}${url}${q}) + ${q})`)
s.replace(full, `url(${options.baseURL}${url})`)
}
}
if (s.hasChanged()) {
s.prepend(`import { publicAssetsURL } from '#internal/nuxt/paths';`)
return {
code: s.toString(),
map: options.sourcemap ? s.generateMap({ hires: true }) : undefined,
}
}
},
generateBundle (_outputOptions, bundle) {
for (const file in bundle) {
const chunk = bundle[file]!
if (!file.endsWith('.css') || chunk.type !== 'asset') { continue }
let css = chunk.source.toString()
let wasReplaced = false
for (const [full, url] of css.matchAll(CSS_URL_RE)) {
if (url && resolveFromPublicAssets(url)) {
const relativeURL = relative(withLeadingSlash(dirname(file)), url)
css = css.replace(full, `url(${relativeURL})`)
wasReplaced = true
}
}
if (wasReplaced) {
chunk.source = css
}
}
},
},
}
return [
...(options.dev && options.baseURL && options.baseURL !== '/' ? [devTransformPlugin] : []),
{
name: 'nuxt:vite-public-dir-resolution',
vite: {
load: {
enforce: 'pre',
handler (id) {
if (id.startsWith(PREFIX)) {
return `import { publicAssetsURL } from '#internal/nuxt/paths';export default publicAssetsURL(${JSON.stringify(decodeURIComponent(id.slice(PREFIX.length)))})`
}
},
},
resolveId: {
enforce: 'post',
handler (id) {
if (id === '/__skip_vite' || id[0] !== '/' || id.startsWith('/@fs')) { return }
if (resolveFromPublicAssets(id)) {
return PREFIX + encodeURIComponent(id)
}
},
},
renderChunk (code, chunk) {
if (!chunk.facadeModuleId?.includes('?inline&used')) { return }
const s = new MagicString(code)
const q = code.match(/(?<= = )['"`]/)?.[0] || '"'
for (const [full, url] of code.matchAll(CSS_URL_RE)) {
if (url && resolveFromPublicAssets(url)) {
s.replace(full, `url(${q} + publicAssetsURL(${q}${url}${q}) + ${q})`)
}
}
if (s.hasChanged()) {
s.prepend(`import { publicAssetsURL } from '#internal/nuxt/paths';`)
return {
code: s.toString(),
map: options.sourcemap ? s.generateMap({ hires: true }) : undefined,
}
}
},
generateBundle (_outputOptions, bundle) {
for (const file in bundle) {
const chunk = bundle[file]!
if (!file.endsWith('.css') || chunk.type !== 'asset') { continue }
let css = chunk.source.toString()
let wasReplaced = false
for (const [full, url] of css.matchAll(CSS_URL_RE)) {
if (url && resolveFromPublicAssets(url)) {
const relativeURL = relative(withLeadingSlash(dirname(file)), url)
css = css.replace(full, `url(${relativeURL})`)
wasReplaced = true
}
}
if (wasReplaced) {
chunk.source = css
}
}
},
},
},
]
})
export function useResolveFromPublicAssets () {

6
packages/vite/src/vite.ts
View File

@ -100,7 +100,11 @@ export const bundle: NuxtBuilder['bundle'] = async (nuxt) => {
},
plugins: [
// add resolver for files in public assets directories
VitePublicDirsPlugin.vite({ sourcemap: !!nuxt.options.sourcemap.server }),
VitePublicDirsPlugin.vite({
dev: nuxt.options.dev,
sourcemap: !!nuxt.options.sourcemap.server,
baseURL: nuxt.options.app.baseURL,
}),
composableKeysPlugin.vite({
sourcemap: !!nuxt.options.sourcemap.server || !!nuxt.options.sourcemap.client,
rootDir: nuxt.options.rootDir,