refactor: export VuePreview only one sfc

Author: litingyes

README.md

@@ -39,14 +39,14 @@ export default defineConfig({
 
 // .vitepress/theme/index.ts
 import DefaultTheme from 'vitepress/theme'
-import { VuePreviewWrapper } from 'vite-plugin-vue-preview'
+import { VuePreview } from 'vite-plugin-vue-preview'
 import 'vite-plugin-vue-preview/dist/style.css'
 
 export default {
   ...DefaultTheme,
   enhanceApp(ctx) {
     DefaultTheme.enhanceApp(ctx)
-    ctx.app.component('VuePreviewWrapper', VuePreviewWrapper)
+    ctx.app.component('VuePreview', VuePreview)
   },
 }
 ```

src/components/VuePreviewWrapper.vue src/components/VuePreview.vuesrc/components/VuePreviewWrapper.vue renamed to src/components/VuePreview.vue

@@ -1,9 +1,9 @@
 <template>
-    <VuePreview :store="store"></VuePreview>
+    <Repl :store="store"></Repl>
 </template>
 
 <script lang="ts" setup>
-import { ReplStore, VuePreview } from './vue-repl'
+import { ReplStore, Repl } from './vue-repl'
 import { provide, watch } from 'vue'
 
 export interface Props {

src/components/vue-repl/VuePreview.vue src/components/vue-repl/Repl.vuesrc/components/vue-repl/VuePreview.vue renamed to src/components/vue-repl/Repl.vue

@@ -1,6 +1,6 @@
-export { default as VuePreview } from './VuePreview.vue'
+export { default as Repl } from './Repl.vue'
 export { default as Preview } from './output/Preview.vue'
 export { ReplStore, File } from './store'
 export { compileFile } from './transform'
-export type { Props as ReplProps } from './VuePreview.vue'
+export type { Props as ReplProps } from './Repl.vue'
 export type { Store, StoreOptions, SFCOptions, StoreState } from './store'

src/components/vue-repl/index.ts

@@ -1,6 +1 @@
-import VuePreviewWrapper from './components/VuePreviewWrapper.vue'
-export * from './components/vue-repl'
-
-export {
-  VuePreviewWrapper,
-}
+export { default as VuePreview } from './components/VuePreview.vue'

src/index.ts

@@ -4,7 +4,7 @@ const end = '```'
 const getCode = (code: string) => {
   code = code.replace(start, '')
   code = code.replace(end, '')
-  return ` <VuePreviewWrapper code="${code}"></VuePreviewWrapper>\n`
+  return ` <VuePreview code="${code}"></VuePreview>\n`
 }
 
 export default function VuePreviewPlugin() {

src/plugin.ts

@@ -1,11 +1,11 @@
 import DefaultTheme from 'vitepress/theme'
-import { VuePreviewWrapper } from '../../../../dist'
+import { VuePreview } from '../../../../dist'
 import '../../../../dist/style.css'
 
 export default {
   ...DefaultTheme,
   enhanceApp(ctx) {
     DefaultTheme.enhanceApp(ctx)
-    ctx.app.component('VuePreviewWrapper', VuePreviewWrapper)
+    ctx.app.component('VuePreview', VuePreview)
   },
 }

test/vitepress/.vitepress/theme/index.ts

@@ -2,11 +2,4 @@
 
 ```vue preview
 <template>Test Vitepress</template>
-```
-
-<hr />
-
-
-```vue preview
-<template>Test Vitepress2</template>
 ```

test/vitepress/index.md

@@ -2,23 +2,15 @@
 import { provide } from 'vue'
 
 import '../../../dist/style.css'
-import { VuePreview, ReplStore, VuePreviewWrapper } from '../../../dist'
-
-const store = new ReplStore({ code: '<template><div>TEST</div></template>' });
-
-provide('store', store)
-provide('clear-console', true)
+import { VuePreview } from '../../../dist'
 
 const code = '<template><div>TEST VuePreviewWrapper</div></template>'
 </script>
 
 <template>
     <div class="demo-sfc">
         <div class="demo-sfc__item">
-            <VuePreview :store="store" ssr></VuePreview>
-        </div>
-        <div class="demo-sfc__item">
-            <VuePreviewWrapper :code="code"></VuePreviewWrapper>
+            <VuePreview :code="code"></VuePreview>
         </div>
     </div>
 </template>
@@ -29,11 +21,6 @@ const code = '<template><div>TEST VuePreviewWrapper</div></template>'
     padding-top: 100px;
     width: 1000px;
     display: flex;
-    gap: 100px;
     justify-content: center;
-
-    &__item {
-        width: 400px;
-    }
 }
 </style>