feat: support importMap props in plugin

Author: litingyes

src/VuePreview.vue

@@ -28,7 +28,7 @@ export interface Props {
       useCode?: string
     }
   }
-  importMap: Record<string, string>
+  importMap?: Record<string, string> | string
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -63,38 +63,22 @@ const msg = ref('vite-plugin-vue-preview')
 </template>
 `.trim()
 
-if (!props.code) {
-  store.setFiles({
-    [defaultMainFile]: welcomeCode,
-  })
-}
-else if (props.encode) {
-  store.setFiles({
-    [defaultMainFile]: decodeURIComponent(props.code),
-  })
-}
-else {
-  store.setFiles({
-    [defaultMainFile]: props.code,
-  })
-}
+const files: Record<string, string> = {}
 
-if (props.importMap) {
-  const files = store.getFiles()
-  const importMapCode = files[importMapFile]
+if (!props.code)
+  files[defaultMainFile] = welcomeCode
+else if (props.encode)
+  files[defaultMainFile] = decodeURIComponent(props.code)
+else
+  files[defaultMainFile] = props.code
 
-  if (importMapCode) {
-    const importMapObj: { imports: Record<string, string> } = JSON.parse(importMapCode!)
-    Object.assign(importMapObj.imports, props.importMap)
-    files[importMapFile] = JSON.stringify(importMapObj, null, 2)
-  }
-  else {
-    files[importMapFile] = JSON.stringify({ imports: props.importMap }, null, 2)
-  }
-
-  store.setFiles(files)
+if (props.importMap) {
+  const importMap = typeof props.importMap === 'string' ? JSON.parse(decodeURIComponent(props.importMap)) : props.importMap
+  files[importMapFile] = JSON.stringify({ imports: importMap }, null, 2)
 }
 
+store.setFiles(files)
+
 onMounted(() => {
   if (props.clearConsole)
     // eslint-disable-next-line no-console

src/plugin.ts

@@ -9,9 +9,11 @@ function getCode(code: string, options?: VuePreviewPluginOptions) {
   let expandProps = ''
 
   if (options?.props?.previewBodyStyle)
-    expandProps += ` previewBodyStyle="${encodeURIComponent(JSON.stringify(options?.props?.previewBodyStyle))}"`
+    expandProps += ` previewBodyStyle="${encodeURIComponent(JSON.stringify(options.props.previewBodyStyle))}"`
   if (options?.props?.previewAppStyle)
-    expandProps += ` previewAppStyle="${encodeURIComponent(JSON.stringify(options?.props?.previewAppStyle))}"`
+    expandProps += ` previewAppStyle="${encodeURIComponent(JSON.stringify(options.props.previewAppStyle))}"`
+  if (options?.props?.importMap)
+    expandProps += ` importMap="${encodeURIComponent(JSON.stringify(options.props.importMap))}"`
 
   return code.trim() ? `<VuePreview code="${str}" ${expandProps} encode ssr></VuePreview>\n` : '<VuePreview ssr></VuePreview>\n'
 }
@@ -20,6 +22,7 @@ interface VuePreviewPluginOptions {
   props?: {
     previewBodyStyle?: Props['previewBodyStyle']
     previewAppStyle?: Props['previewAppStyle']
+    importMap?: Record<string, string>
   }
 }
 

test/vue/src/DemoSfc.vue

@@ -4,22 +4,22 @@ import { VuePreview } from '../../../src'
 
 const code = encodeURIComponent(`
 <script setup>
-import { ref } from 'vue'
+import { isString } from '@vue/shared'
 
-const msg = ref('test props')
+const res = isString('@vue/shared')
 <\/script>
 
 <template>
-  <h1>{{ msg }}</h1>
-  <input v-model="msg">
+  <h1>Test ImportMap</h1>
+  <div>Result: {{res}}</div>
 </template>
 `.trim(),
 )
 </script>
 
 <template>
   <div class="demo-sfc">
-    <VuePreview :code="code" encode :preview-body-style="{ background: 'red' }" :preview-app-style="{ background: 'yellow' }" />
+    <VuePreview :code="code" :clear-console="false" encode :import-map="{ '@vue/shared': 'https://unpkg.com/@vue/shared@latest/dist/shared.esm-bundler.js' }" />
   </div>
 </template>