Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings

Commit a587cf6

Browse filesBrowse files
authored
fix(playground): add import map plugin (#4874)
1 parent e297e42 commit a587cf6
Copy full SHA for a587cf6

File tree

Expand file treeCollapse file tree

4 files changed

+86
-120
lines changed
Open diff view settings
Filter options
Expand file treeCollapse file tree

4 files changed

+86
-120
lines changed
Open diff view settings
Collapse file

‎playground/src/auto-imports.d.ts‎

Copy file name to clipboardExpand all lines: playground/src/auto-imports.d.ts
+1Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -382,6 +382,7 @@ declare module 'vue' {
382382
readonly createInjectionState: UnwrapRef<typeof import('@vueuse/core')['createInjectionState']>
383383
readonly createProjection: UnwrapRef<typeof import('@vueuse/math')['createProjection']>
384384
readonly createReactiveFn: UnwrapRef<typeof import('@vueuse/core')['createReactiveFn']>
385+
readonly createRef: UnwrapRef<typeof import('@vueuse/core')['createRef']>
385386
readonly createReusableTemplate: UnwrapRef<typeof import('@vueuse/core')['createReusableTemplate']>
386387
readonly createSharedComposable: UnwrapRef<typeof import('@vueuse/core')['createSharedComposable']>
387388
readonly createTemplatePromise: UnwrapRef<typeof import('@vueuse/core')['createTemplatePromise']>
Collapse file
+35Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import type { Plugin } from 'vite'
2+
3+
const CDN_BASE = 'https://esm.sh/'
4+
5+
const BABEL_HELPER_GLOBALS_IMPORT_MAPS = [
6+
'@babel/helper-globals/data/builtin-lower.json',
7+
'@babel/helper-globals/data/builtin-upper.json',
8+
]
9+
10+
export function importMapPlugin(): Plugin {
11+
return {
12+
name: 'import-map-plugin',
13+
apply: 'build',
14+
transformIndexHtml(html: string) {
15+
// Create import map script tag
16+
const importMapScript = `<script type="importmap">
17+
{
18+
"imports": ${JSON.stringify(BABEL_HELPER_GLOBALS_IMPORT_MAPS.reduce<Record<string, string>>(
19+
(acc, cur) => {
20+
acc[cur] = `${CDN_BASE}${cur}`
21+
return acc
22+
},
23+
{},
24+
), null, 2)}
25+
}
26+
</script>`
27+
28+
// Insert the import map before any other scripts
29+
return html.replace(
30+
/<head>/,
31+
`<head>\n${importMapScript}`,
32+
)
33+
},
34+
}
35+
}
Collapse file

‎playground/vite.config.ts‎

Copy file name to clipboardExpand all lines: playground/vite.config.ts
+2Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import Components from 'unplugin-vue-components/vite'
66
import { defineConfig } from 'vite'
77
import Inspect from 'vite-plugin-inspect'
88
import { alias } from '../alias'
9+
import { importMapPlugin } from './vite-plugin-import-map'
910

1011
const git = SimpleGit()
1112

@@ -49,6 +50,7 @@ export default defineConfig({
4950
vueTemplate: true,
5051
dts: 'src/auto-imports.d.ts',
5152
}),
53+
importMapPlugin(),
5254
],
5355
optimizeDeps: {
5456
exclude: [

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.