/
assetImportMetaUrl.ts
114 lines (107 loc) · 3.95 KB
/
assetImportMetaUrl.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
import type { Plugin } from '../plugin'
import MagicString from 'magic-string'
import path from 'path'
import { fileToUrl } from './asset'
import type { ResolvedConfig } from '../config'
import { stringifyAsTemplateLiteral } from '../utils'
import { preloadHelperId } from './importAnalysisBuild'
import { emptyString } from '../cleanString'
/**
* Convert `new URL('./foo.png', import.meta.url)` to its resolved built URL
*
* Supports template string with dynamic segments:
* ```
* new URL(`./dir/${name}.png`, import.meta.url)
* // transformed to
* import.meta.globEager('./dir/**.png')[`./dir/${name}.png`].default
* ```
*/
export function assetImportMetaUrlPlugin(config: ResolvedConfig): Plugin {
return {
name: 'vite:asset-import-meta-url',
async transform(code, id, options) {
if (
!options?.ssr &&
id !== preloadHelperId &&
code.includes('new URL') &&
code.includes(`import.meta.url`)
) {
let s: MagicString | undefined
const assetImportMetaUrlRE =
/\bnew\s+URL\s*\(\s*('[^']+'|"[^"]+"|`[^`]+`)\s*,\s*import\.meta\.url\s*,?\s*\)/g
const cleanString = emptyString(code)
let match: RegExpExecArray | null
while ((match = assetImportMetaUrlRE.exec(cleanString))) {
const { 0: exp, 1: emptyUrl, index } = match
const urlStart = cleanString.indexOf(emptyUrl, index)
const urlEnd = urlStart + emptyUrl.length
const rawUrl = code.slice(urlStart, urlEnd)
if (!s) s = new MagicString(code)
// potential dynamic template string
if (rawUrl[0] === '`' && /\$\{/.test(rawUrl)) {
const ast = this.parse(rawUrl)
const templateLiteral = (ast as any).body[0].expression
if (templateLiteral.expressions.length) {
const pattern = buildGlobPattern(templateLiteral)
// Note: native import.meta.url is not supported in the baseline
// target so we use the global location here. It can be
// window.location or self.location in case it is used in a Web Worker.
// @see https://developer.mozilla.org/en-US/docs/Web/API/Window/self
s.overwrite(
index,
index + exp.length,
`new URL(import.meta.globEagerDefault(${JSON.stringify(
pattern
)})[${rawUrl}], self.location)`,
{ contentOnly: true }
)
continue
}
}
const url = rawUrl.slice(1, -1)
const file = path.resolve(path.dirname(id), url)
// Get final asset URL. Catch error if the file does not exist,
// in which we can resort to the initial URL and let it resolve in runtime
const builtUrl = await fileToUrl(file, config, this).catch(() => {
const rawExp = code.slice(index, index + exp.length)
config.logger.warnOnce(
`\n${rawExp} doesn't exist at build time, it will remain unchanged to be resolved at runtime`
)
return url
})
s.overwrite(
index,
index + exp.length,
`new URL(${stringifyAsTemplateLiteral(builtUrl)}, self.location)`,
{ contentOnly: true }
)
}
if (s) {
return {
code: s.toString(),
map: config.build.sourcemap ? s.generateMap({ hires: true }) : null
}
}
}
return null
}
}
}
function buildGlobPattern(ast: any) {
let pattern = ''
let lastElementIndex = -1
for (const exp of ast.expressions) {
for (let i = lastElementIndex + 1; i < ast.quasis.length; i++) {
const el = ast.quasis[i]
if (el.end < exp.start) {
pattern += el.value.raw
lastElementIndex = i
}
}
pattern += '**'
}
for (let i = lastElementIndex + 1; i < ast.quasis.length; i++) {
pattern += ast.quasis[i].value.raw
}
return pattern
}