feat: show import maps

package.json

@@ -22,7 +22,7 @@
   },
   "dependencies": {
     "@unocss/reset": "^0.53.3",
-    "@vue/repl": "^2.1.3",
+    "@vue/repl": "^2.3.0",
     "@vueuse/core": "^10.2.0",
     "element-plus": "^2.3.7",
     "semver": "^7.5.3",
@@ -47,7 +47,7 @@
     "unplugin-auto-import": "^0.16.4",
     "unplugin-vue-components": "^0.25.1",
     "vite": "^4.3.9",
-    "vite-plugin-inspect": "^0.7.28",
+    "vite-plugin-inspect": "^0.7.29",
     "vite-plugin-mkcert": "^1.15.0",
     "vue-tsc": "^1.8.1"
   }

src/App.vue

@@ -3,7 +3,6 @@ import { Repl, type SFCOptions } from '@vue/repl'
 import Monaco from '@vue/repl/monaco-editor'
 import { type ImportMap } from '@/utils/import-map'
 import { type UserOptions } from '@/composables/store'
-import { IS_DEV } from '@/constants'
 
 const loading = ref(true)
 
@@ -36,7 +35,7 @@ if (pr) {
       'element-plus/': 'unsupported',
     },
   }
-  store.state.files[USER_IMPORT_MAP].code = JSON.stringify(map, undefined, 2)
+  store.state.files[IMPORT_MAP].code = JSON.stringify(map, undefined, 2)
   const url = `${location.origin}${location.pathname}#${store.serialize()}`
   history.replaceState({}, '', url)
 }
@@ -76,7 +75,6 @@ watchEffect(() => history.replaceState({}, '', `#${store.serialize()}`))
       auto-resize
       :sfc-options="sfcOptions"
       :clear-console="false"
-      :show-import-map="store.userOptions.value.showHidden || IS_DEV"
       @keydown="handleKeydown"
     />
   </div>
@@ -95,7 +93,7 @@ body {
 }
 
 .vue-repl {
-  height: calc(100vh - var(--nav-height));
+  height: calc(100vh - var(--nav-height)) !important;
 }
 
 .dark .vue-repl,

src/auto-imports.d.ts

@@ -7,7 +7,8 @@ declare global {
   const EffectScope: typeof import('vue')['EffectScope']
   const ElMessage: typeof import('element-plus/es')['ElMessage']
   const ElMessageBox: typeof import('element-plus/es')['ElMessageBox']
-  const USER_IMPORT_MAP: typeof import('./composables/store')['USER_IMPORT_MAP']
+  const IMPORT_MAP: typeof import('./composables/store')['IMPORT_MAP']
+  const LEGACY_IMPORT_MAP: typeof import('./composables/store')['LEGACY_IMPORT_MAP']
   const asyncComputed: typeof import('@vueuse/core')['asyncComputed']
   const autoResetRef: typeof import('@vueuse/core')['autoResetRef']
   const computed: typeof import('vue')['computed']

src/composables/store.ts

@@ -26,8 +26,8 @@ export type SerializeState = Record<string, string> & {
 const MAIN_FILE = 'src/PlaygroundMain.vue'
 const APP_FILE = 'src/App.vue'
 const ELEMENT_PLUS_FILE = 'src/element-plus.js'
-const IMPORT_MAP = 'import-map.json'
-export const USER_IMPORT_MAP = 'src/import_map.json'
+const LEGACY_IMPORT_MAP = 'src/import_map.json'
+export const IMPORT_MAP = 'import-map.json'
 
 export const useStore = (initial: Initial) => {
   const versions = reactive(
@@ -58,7 +58,7 @@ export const useStore = (initial: Initial) => {
     genImportMap(versions, nightly.value)
   )
   const userImportMap = computed<ImportMap>(() => {
-    const code = state.files[USER_IMPORT_MAP]?.code.trim()
+    const code = state.files[IMPORT_MAP]?.code.trim()
     if (!code) return {}
     let map: ImportMap = {}
     try {
@@ -88,17 +88,6 @@ export const useStore = (initial: Initial) => {
     renameFile,
   })
 
-  watch(
-    importMap,
-    (content) => {
-      state.files[IMPORT_MAP] = new File(
-        IMPORT_MAP,
-        JSON.stringify(content, undefined, 2),
-        hideFile.value
-      )
-    },
-    { immediate: true, deep: true }
-  )
   watch(
     () => versions.elementPlus,
     (version) => {
@@ -108,7 +97,7 @@ export const useStore = (initial: Initial) => {
         hideFile.value
       )
       state.files[ELEMENT_PLUS_FILE] = file
-      compileFile(store, file)
+      compileFile(store, file).then((errs) => (state.errors = errs))
     },
     { immediate: true }
   )
@@ -138,11 +127,14 @@ export const useStore = (initial: Initial) => {
   async function init() {
     await setVueVersion(versions.vue)
 
+    state.errors = []
     for (const file of Object.values(state.files)) {
-      compileFile(store, file)
+      compileFile(store, file).then((errs) => state.errors.push(...errs))
     }
 
-    watchEffect(() => compileFile(store, state.activeFile))
+    watchEffect(() =>
+      compileFile(store, state.activeFile).then((errs) => (state.errors = errs))
+    )
   }
 
   function getFiles() {
@@ -173,16 +165,19 @@ export const useStore = (initial: Initial) => {
         if (!filename.startsWith('src/') && filename !== IMPORT_MAP) {
           filename = `src/${filename}`
         }
+        if (filename === LEGACY_IMPORT_MAP) {
+          filename = IMPORT_MAP
+        }
         files[filename] = new File(filename, file as string)
       }
       userOptions.value = saved._o || {}
     } else {
       files[APP_FILE] = new File(APP_FILE, welcomeCode)
     }
     files[MAIN_FILE] = new File(MAIN_FILE, mainCode, hideFile.value)
-    if (!files[USER_IMPORT_MAP]) {
-      files[USER_IMPORT_MAP] = new File(
-        USER_IMPORT_MAP,
+    if (!files[IMPORT_MAP]) {
+      files[IMPORT_MAP] = new File(
+        IMPORT_MAP,
         JSON.stringify({ imports: {} }, undefined, 2)
       )
     }
@@ -219,9 +214,7 @@ export const useStore = (initial: Initial) => {
 
     if (
       file.hidden ||
-      [APP_FILE, MAIN_FILE, ELEMENT_PLUS_FILE, USER_IMPORT_MAP].includes(
-        oldFilename
-      )
+      [APP_FILE, MAIN_FILE, ELEMENT_PLUS_FILE, IMPORT_MAP].includes(oldFilename)
     ) {
       state.errors = [`Cannot rename ${oldFilename}`]
       return
@@ -252,7 +245,6 @@ export const useStore = (initial: Initial) => {
         APP_FILE,
         ELEMENT_PLUS_FILE,
         IMPORT_MAP,
-        USER_IMPORT_MAP,
       ].includes(filename)
     ) {
       ElMessage.warning(
@@ -297,13 +289,6 @@ export const useStore = (initial: Initial) => {
     versions.elementPlus = version
   }
 
-  watch(
-    () => state.files[IMPORT_MAP].code,
-    () => {
-      state.resetFlip = !state.resetFlip
-    }
-  )
-
   return {
     ...store,