fix(playground): add import map plugin (#4874)

Jungzl · web-flow · commit a587cf69d078 · 2025-08-12T09:34:19.000Z
diff --git a/playground/src/auto-imports.d.ts b/playground/src/auto-imports.d.ts
@@ -382,6 +382,7 @@ declare module 'vue' {
     readonly createInjectionState: UnwrapRef<typeof import('@vueuse/core')['createInjectionState']>
     readonly createProjection: UnwrapRef<typeof import('@vueuse/math')['createProjection']>
     readonly createReactiveFn: UnwrapRef<typeof import('@vueuse/core')['createReactiveFn']>
+    readonly createRef: UnwrapRef<typeof import('@vueuse/core')['createRef']>
     readonly createReusableTemplate: UnwrapRef<typeof import('@vueuse/core')['createReusableTemplate']>
     readonly createSharedComposable: UnwrapRef<typeof import('@vueuse/core')['createSharedComposable']>
     readonly createTemplatePromise: UnwrapRef<typeof import('@vueuse/core')['createTemplatePromise']>
diff --git a/playground/vite-plugin-import-map.ts b/playground/vite-plugin-import-map.ts
@@ -0,0 +1,35 @@
+import type { Plugin } from 'vite'
+
+const CDN_BASE = 'https://esm.sh/'
+
+const BABEL_HELPER_GLOBALS_IMPORT_MAPS = [
+  '@babel/helper-globals/data/builtin-lower.json',
+  '@babel/helper-globals/data/builtin-upper.json',
+]
+
+export function importMapPlugin(): Plugin {
+  return {
+    name: 'import-map-plugin',
+    apply: 'build',
+    transformIndexHtml(html: string) {
+      // Create import map script tag
+      const importMapScript = `<script type="importmap">
+{
+  "imports": ${JSON.stringify(BABEL_HELPER_GLOBALS_IMPORT_MAPS.reduce<Record<string, string>>(
+    (acc, cur) => {
+      acc[cur] = `${CDN_BASE}${cur}`
+      return acc
+    },
+    {},
+  ), null, 2)}
+}
+</script>`
+
+      // Insert the import map before any other scripts
+      return html.replace(
+        /<head>/,
+        `<head>\n${importMapScript}`,
+      )
+    },
+  }
+}
diff --git a/playground/vite.config.ts b/playground/vite.config.ts
@@ -6,6 +6,7 @@ import Components from 'unplugin-vue-components/vite'
 import { defineConfig } from 'vite'
 import Inspect from 'vite-plugin-inspect'
 import { alias } from '../alias'
+import { importMapPlugin } from './vite-plugin-import-map'
 
 const git = SimpleGit()
 
@@ -49,6 +50,7 @@ export default defineConfig({
       vueTemplate: true,
       dts: 'src/auto-imports.d.ts',
     }),
+    importMapPlugin(),
   ],
   optimizeDeps: {
     exclude: [
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
