docs: update content about import map prop

Author: litingyes

README.md

@@ -49,6 +49,8 @@ interface Props {
   previewBodyStyle: Partial<CSSStyleDeclaration> | string
   // Styling of the root component in the iframe element
   previewAppStyle?: Partial<CSSStyleDeclaration> | string
+  // Third-party dependencies (CDN) that can be introduced by the demo component
+  importMap?: Record<string, string> | string
 }
 ```
 
@@ -78,7 +80,7 @@ interface Props {
 ```TS
 import { createApp } from 'vue'
 import { VuePreview } from 'vite-plugin-vue-preview'
-import 'vite-plugin-vue-preview/dist/style.css'
+import 'vite-plugin-vue-preview/style.css'
 
 const app = createApp()
 
@@ -102,7 +104,7 @@ export default defineConfig({
 // .vitepress/theme/index.ts
 import DefaultTheme from 'vitepress/theme'
 import { VuePreview } from 'vite-plugin-vue-preview'
-import 'vite-plugin-vue-preview/dist/style.css'
+import 'vite-plugin-vue-preview/style.css'
 
 export default {
   ...DefaultTheme,
@@ -148,6 +150,9 @@ export default defineConfig({
         alignItems: 'center',
         flexDirection: 'column',
       },
+      importMap: {
+        '@vue/shared': 'https://unpkg.com/@vue/shared@latest/dist/shared.esm-bundler.js',
+      },
     },
   })],
 })

README.zh-CN.md

@@ -49,6 +49,8 @@ interface Props {
   previewBodyStyle: Partial<CSSStyleDeclaration> | string
   // iframe 元素中根组件的样式
   previewAppStyle?: Partial<CSSStyleDeclaration> | string
+  // demo 组件可引入的第三方依赖（CDN）
+  importMap?: Record<string, string> | string
 }
 ```
 
@@ -78,7 +80,7 @@ interface Props {
 ```TS
 import { createApp } from 'vue'
 import { VuePreview } from 'vite-plugin-vue-preview'
-import 'vite-plugin-vue-preview/dist/style.css'
+import 'vite-plugin-vue-preview/style.css'
 
 const app = createApp()
 
@@ -101,7 +103,7 @@ export default defineConfig({
 // .vitepress/theme/index.ts
 import DefaultTheme from 'vitepress/theme'
 import { VuePreview } from 'vite-plugin-vue-preview'
-import 'vite-plugin-vue-preview/dist/style.css'
+import 'vite-plugin-vue-preview/style.css'
 
 export default {
   ...DefaultTheme,
@@ -147,6 +149,9 @@ export default defineConfig({
         alignItems: 'center',
         flexDirection: 'column',
       },
+      importMap: {
+        '@vue/shared': 'https://unpkg.com/@vue/shared@latest/dist/shared.esm-bundler.js',
+      },
     },
   })],
 })

test/vitepress/index.md

@@ -13,8 +13,13 @@ A Vite plugin made for previewing and editing Vue components in Markdown and, of
 
 <!-- #region demo -->
 ```vue preview
+<script lang="ts" setup>
+import { isSpecialBooleanAttr } from '@vue/shared'
+</script>
+
 <template>
   <h1>Demo: vite-plugin-vue-preview</h1>
+  <span>readonly is special boolean attr: {{ isSpecialBooleanAttr('readonly') }}</span>
 </template>
 ```
 <!-- #endregion demo -->
@@ -49,6 +54,8 @@ interface Props {
   previewBodyStyle: Partial<CSSStyleDeclaration> | string
   // Styling of the root component in the iframe element
   previewAppStyle?: Partial<CSSStyleDeclaration> | string
+  // Third-party dependencies (CDN) that can be introduced by the demo component
+  importMap?: Record<string, string> | string
 }
 ```
 
@@ -78,7 +85,7 @@ interface Props {
 ```TS
 import { createApp } from 'vue'
 import { VuePreview } from 'vite-plugin-vue-preview'
-import 'vite-plugin-vue-preview/dist/style.css'
+import 'vite-plugin-vue-preview/style.css'
 
 const app = createApp()
 
@@ -102,7 +109,7 @@ export default defineConfig({
 // .vitepress/theme/index.ts
 import DefaultTheme from 'vitepress/theme'
 import { VuePreview } from 'vite-plugin-vue-preview'
-import 'vite-plugin-vue-preview/dist/style.css'
+import 'vite-plugin-vue-preview/style.css'
 
 export default {
   ...DefaultTheme,
@@ -140,6 +147,9 @@ export default defineConfig({
         alignItems: 'center',
         flexDirection: 'column',
       },
+      importMap: {
+        '@vue/shared': 'https://unpkg.com/@vue/shared@latest/dist/shared.esm-bundler.js',
+      },
     },
   })],
 })

test/vitepress/vite.config.ts

@@ -15,6 +15,9 @@ export default defineConfig({
         alignItems: 'center',
         flexDirection: 'column',
       },
+      importMap: {
+        '@vue/shared': 'https://unpkg.com/@vue/shared@latest/dist/shared.esm-bundler.js',
+      },
     },
   })],
 })

test/vitepress/zh/index.md

@@ -13,8 +13,13 @@
 
 <!-- #region demo -->
 ```vue preview
+<script lang="ts" setup>
+import { isSpecialBooleanAttr } from '@vue/shared'
+</script>
+
 <template>
   <h1>演示： vite-plugin-vue-preview</h1>
+  <span>readonly is special boolean attr: {{ isSpecialBooleanAttr('readonly') }}</span>
 </template>
 ```
 <!-- #endregion demo -->
@@ -49,6 +54,8 @@ interface Props {
   previewBodyStyle: Partial<CSSStyleDeclaration> | string
   // iframe 元素中根组件的样式
   previewAppStyle?: Partial<CSSStyleDeclaration> | string
+  // demo 组件可引入的第三方依赖（CDN）
+  importMap?: Record<string, string> | string
 }
 ```
 
@@ -78,7 +85,7 @@ interface Props {
 ```TS
 import { createApp } from 'vue'
 import { VuePreview } from 'vite-plugin-vue-preview'
-import 'vite-plugin-vue-preview/dist/style.css'
+import 'vite-plugin-vue-preview/style.css'
 
 const app = createApp()
 
@@ -101,7 +108,7 @@ export default defineConfig({
 // .vitepress/theme/index.ts
 import DefaultTheme from 'vitepress/theme'
 import { VuePreview } from 'vite-plugin-vue-preview'
-import 'vite-plugin-vue-preview/dist/style.css'
+import 'vite-plugin-vue-preview/style.css'
 
 export default {
   ...DefaultTheme,
@@ -139,6 +146,9 @@ export default defineConfig({
         alignItems: 'center',
         flexDirection: 'column',
       },
+      importMap: {
+        '@vue/shared': 'https://unpkg.com/@vue/shared@latest/dist/shared.esm-bundler.js',
+      },
     },
   })],
 })