fix(vue-playground/doc-site): fix loading bug, fix build bug

Author: 2214962083

packages/doc-site/bundler.config.ts

@@ -21,7 +21,7 @@ export const bundlerConfig = {
         output: {
           inlineDynamicImports: false,
           manualChunks: {
-            monaco: ['monaco-editor', 'emmet-monaco-es']
+            monaco: ['monaco-editor']
           }
         }
       }

packages/vue-playground/src/playground/components/loading.vue

@@ -31,5 +31,12 @@ import {LoadingIcon} from './icon'
   max-width: 40px;
   height: 30%;
   max-height: 40px;
+  animation: loadingCircle 1s infinite linear;
+}
+
+@keyframes loadingCircle {
+  to {
+    transform: rotate(360deg);
+  }
 }
 </style>

packages/vue-playground/src/playground/components/preview.vue

@@ -5,6 +5,7 @@ export default defineComponent({
 </script>
 <script setup lang="ts">
 import Message from './message.vue'
+import Loading from './loading.vue'
 import {
   defineComponent,
   ref,
@@ -125,11 +126,13 @@ defineExpose({
     <div ref="container" class="vue-playground-preview-iframe-container"></div>
     <Message :err="runtimeError" />
     <Message v-if="!runtimeError" :warn="runtimeWarning" />
+    <Loading v-if="loading" />
   </div>
 </template>
 
 <style scoped>
 .vue-playground-preview {
+  position: relative;
   box-sizing: border-box;
   flex: 1;
   width: 100%;

packages/vue-playground/src/playground/playground.vue

@@ -118,22 +118,23 @@ defineExpose({
       ></Toolbar>
       <div class="vue-playground-content" :style="contentStyle">
         <Preview
+          ref="previewRef"
           :style="{
             borderTop: layoutDirection === 'EditorTopPreviewBottom' ? '1px solid var(--border-color)' : 'none',
             borderRight: layoutDirection === 'EditorRightPreviewLeft' ? '1px solid var(--border-color)' : 'none'
           }"
         ></Preview>
         <Editor
           v-show="showCode"
-          ref="EditorRef"
+          ref="editorRef"
           :life-cycle="lifeCycle"
           :style="{
             borderTop: layoutDirection === 'EditorBottomPreviewTop' ? '1px solid var(--border-color)' : 'none',
             borderRight: layoutDirection === 'EditorLeftPreviewRight' ? '1px solid var(--border-color)' : 'none'
           }"
         ></Editor>
       </div>
-      <Loading v-if="editorRef?.loading" />
+      <Loading v-if="!editorRef || editorRef.loading" />
     </div>
   </Portal>
 </template>

packages/vuepress-plugin-sandbox/build.config.ts

@@ -4,8 +4,10 @@ export default defineBuildConfig({
   entries: ['src/index', 'src/client', 'src/enhanceAppFile'],
   clean: true,
   declaration: true,
+  // externals: ['js-base64'],
   rollup: {
     emitCJS: true,
-    cjsBridge: true
+    cjsBridge: true,
+    inlineDependencies: true
   }
 })

packages/vuepress-plugin-sandbox/package.json

@@ -63,7 +63,6 @@
     "@vuepress/core": "2.0.0-beta.38",
     "@vuepress/markdown": "2.0.0-beta.38",
     "@vueuse/core": "^8.4.1",
-    "js-base64": "^3.7.2",
     "markdown-it": "^13.0.1",
     "markdown-it-container": "^3.0.0",
     "monaco-editor": "^0.33.0",
@@ -78,6 +77,7 @@
     "conventional-changelog-cli": "^2.2.2",
     "cross-env": "^7.0.3",
     "esno": "^0.14.1",
+    "js-base64": "^3.7.2",
     "jsdom": "^19.0.0",
     "rimraf": "^3.0.2",
     "superman-shared": "workspace:*",