feat: isolate packages

packages/index.ts

@@ -0,0 +1,15 @@
+import { App } from 'vue'
+
+import SfcSandbox from './sandbox/index.vue'
+import SplitPane from './components/SplitPane.vue'
+import LoadingMask from './components/LoadingMask.vue'
+
+export const install = (app: App): void => {
+  app.component('SfcSandbox', SfcSandbox)
+  app.component('SplitPane', SplitPane)
+  app.component('LoadingMask', LoadingMask)
+}
+
+export { SfcSandbox, SplitPane }
+
+export default install

src/components/sandbox/SandboxEditor.vue → packages/sandbox/SandboxEditor.vue

@@ -12,7 +12,7 @@ import { ref, computed, defineProps, onMounted, inject, Ref } from 'vue'
 // import FileSelector from './FileSelector.vue'
 import CodeMirror from './codemirror/index.vue'
 import Message from './Message.vue'
-import { compileModules, store, addFile, changeFile } from '../../plugins/sfc2esm.esm'
+import { compileModules, store, addFile, changeFile } from '../plugins/sfc2esm.esm'
 import { debounce } from './utils'
 import { ES_MODULES, IS_LOADING_PREVIEW } from './types'
 

src/components/sandbox/SandboxPreview.vue → packages/sandbox/SandboxPreview.vue

@@ -12,7 +12,7 @@ import type { WatchStopHandle } from 'vue'
 
 import srcdoc from './srcdoc.html'
 import { ReplProxy } from './ReplProxy'
-import { store, generateHashId } from '../../plugins/sfc2esm.esm'
+import { store, generateHashId } from '../plugins/sfc2esm.esm'
 import { IMPORT_MAPS_KEY, EXTERNALS_KEY, IS_LOADING_PREVIEW, ImportMaps, ES_MODULES } from './types'
 
 const container = ref()

src/components/sandbox/index.vue → packages/sandbox/index.vue

@@ -19,10 +19,10 @@
 
 <script setup lang="ts">
 import { computed, defineProps, provide, ref, watch } from 'vue'
-import SplitPane from '../splte-pane/index.vue'
+import SplitPane from '../components/SplitPane.vue'
 import SandboxEditor from './SandboxEditor.vue'
 import SandboxPreview from './SandboxPreview.vue'
-import LoadingMask from './LoadingMask.vue'
+import LoadingMask from '../components/LoadingMask.vue'
 
 import { IMPORT_MAPS_KEY, EXTERNALS_KEY, IS_LOADING_PREVIEW, ES_MODULES } from './types'
 

src/App.vue

@@ -1,24 +1,24 @@
 <template>
   <div class="wrapper">
     <!-- [ESM] default case -->
-    <sandbox v-bind="defaultAttrs" />
+    <sfc-sandbox v-bind="defaultAttrs" />
 
     <!-- [CDN] echarts case -->
-    <sandbox v-bind="echartsAttrs" />
+    <sfc-sandbox v-bind="echartsAttrs" />
 
     <!-- [ESM] ve-charts case -->
     <!-- <sandbox v-bind="veChartsAttrs" /> -->
 
     <!-- [ESM] Vue3 component case -->
-    <sandbox v-bind="digitAnimationAttrs" />
+    <sfc-sandbox v-bind="digitAnimationAttrs" />
 
     <!-- [ESM] React component case -->
     <!-- <sandbox v-bind="revueAttrs" /> -->
   </div>
 </template>
 
 <script setup lang="ts">
-import Sandbox from './components/sandbox/index.vue'
+import SfcSandbox from '../packages/sandbox/index.vue'
 import { SFC_CODE_ESM as defaultCode } from './constants/default.demo.js'
 import { SFC_CODE_CDN as echartsCode } from './constants/echarts.demo.js'
 import { SFC_CODE_ESM as veChartsCode } from './constants/ve-charts.demo.js'

src/components/HelloWorld.vue

@@ -0,0 +1,13 @@
+<template>
+  <div></div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>

tsconfig.json

@@ -33,11 +33,12 @@
     "src/**/*.tsx",
     "src/**/*.vue",
     "tests/**/*.ts",
-    "tests/**/*.tsx"
+    "tests/**/*.tsx",
+    "scripts/**/*.ts"
   ],
   "exclude": [
     "node_modules",
-    "src/components/sandbox/*.ts",
-    "src/components/sfc2esm/*.ts"
+    "packages/sandbox/*.ts",
+    "packages/plugins/*.ts"
   ]
 }