feat(vuepress-plugin-sandbox,vue-playground): init vuepress-plugin-sandbox, add life cycle supports

Author: 2214962083

packages/doc-site/.vuepress/clientAppEnhance.ts

@@ -0,0 +1,54 @@
+import {defineClientAppEnhance} from '@vuepress/client'
+import {configLoadSandbox} from 'vuepress-plugin-sandbox/client'
+
+export default defineClientAppEnhance(() => {
+  configLoadSandbox(preOptions => {
+    return {
+      ...preOptions,
+      lifeCycle: {
+        loadWorkers: async () => {
+          await Promise.all([
+            // load workers
+            (async () => {
+              const [
+                {default: EditorWorker},
+                {default: JsonWorker},
+                {default: HtmlWorker},
+                {default: TsWorker},
+                {default: CssWorker}
+              ] = await Promise.all([
+                import('monaco-editor/esm/vs/editor/editor.worker?worker'),
+                import('monaco-editor/esm/vs/language/json/json.worker?worker'),
+                import('monaco-editor/esm/vs/language/html/html.worker?worker'),
+                import('monaco-editor/esm/vs/language/typescript/ts.worker?worker'),
+                import('monaco-editor/esm/vs/language/css/css.worker?worker')
+              ])
+
+              self.MonacoEnvironment = {
+                getWorker: function (workerId, label) {
+                  switch (label) {
+                    case 'json':
+                      return new JsonWorker()
+                    case 'css':
+                    case 'scss':
+                    case 'less':
+                      return new CssWorker()
+                    case 'html':
+                    case 'handlebars':
+                    case 'razor':
+                      return new HtmlWorker()
+                    case 'typescript':
+                    case 'javascript':
+                      return new TsWorker()
+                    default:
+                      return new EditorWorker()
+                  }
+                }
+              }
+            })()
+          ])
+        }
+      }
+    }
+  }, self)
+})

packages/doc-site/.vuepress/plugins/index.ts

@@ -5,7 +5,7 @@ import {ShikiPluginOptions} from '@vuepress/plugin-shiki'
 import {path} from '@vuepress/utils'
 import {PluginConfig} from 'vuepress'
 import {isProd} from '../utils/common'
-import {demoPlugin} from './vuepress-plugin-demo'
+// import {demoPlugin} from './vuepress-plugin-demo'
 
 const pathResolve = (..._path: string[]) => path.resolve(__dirname, ..._path)
 
@@ -81,7 +81,8 @@ const vuepressPlugins: PluginConfig[] = [
       componentsDir: pathResolve('../components')
     }
   ],
-  demoPlugin()
+  // demoPlugin()
+  ['vuepress-plugin-sandbox', {}]
 ]
 
 if (isProd) {

packages/doc-site/package.json

@@ -26,7 +26,8 @@
     "path-browserify": "^1.0.1",
     "sucrase": "^3.21.0",
     "theme-vitesse": "^0.4.9",
-    "vue-router": "^4.0.15"
+    "vue-router": "^4.0.15",
+    "vuepress-plugin-sandbox": "workspace:*"
   },
   "devDependencies": {
     "@vuepress/bundler-vite": "2.0.0-beta.39",

packages/vue-playground/src/index.ts

@@ -1 +1,2 @@
 export * from './playground'
+export * from './core/store'

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

@@ -5,35 +5,55 @@ export default defineComponent({
 </script>
 <script setup lang="ts">
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import {ref, defineComponent, inject, computed} from 'vue'
-import {debounce} from '../../core'
+import {ref, defineComponent, inject, computed, PropType, toRefs} from 'vue'
+import {debounce, File} from '../../core'
 import {STORE_INJECT_KEY} from '../constants'
 import {useMonaco} from '../hooks/useMonaco'
+import {EditorExpose, PlaygroundLifeCycle} from '../utils/types-helper'
 import FileManageBar from './file-manage-bar.vue'
 import Message from './message.vue'
 
+const props = defineProps({
+  lifeCycle: {
+    type: Object as PropType<PlaygroundLifeCycle>
+  }
+})
+
 interface Emits {
   (e: 'change', value: string): void
 }
 
 const emit = defineEmits<Emits>()
 
+const {lifeCycle} = toRefs(props)
 const store = inject(STORE_INJECT_KEY)!
 
 const editorEl = ref<HTMLElement>()
 const files = computed(() => Object.values(store.state.files))
 const activeFile = computed(() => store.state.activeFile)
 
-const {getEditor, onChange, isDark, toggleDark} = useMonaco(editorEl, {
+const {getEditor, onChange, isDark, toggleDark, disposeEditor} = useMonaco(editorEl, {
+  lifeCycle,
   files,
   activeFile
 })
 
 const handleChange = debounce(({newCode, activeFile}: {newCode: string; activeFile: File}) => {
   store.state.activeFile.code = newCode
+  lifeCycle?.value?.onCodeChange?.({
+    newCode,
+    activeFile
+  })
   emit('change', newCode)
 }, 250)
 
+defineExpose({
+  getEditor,
+  isDark,
+  toggleDark,
+  disposeEditor
+} as EditorExpose)
+
 onChange(handleChange)
 </script>
 

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

@@ -19,6 +19,7 @@ import {
 } from 'vue'
 import {Preview, PreviewProxy} from '../../core/'
 import {CLEAR_CONSOLE_INJECT_KEY, STORE_INJECT_KEY} from '../constants'
+import {PreviewExpose} from '../utils/types-helper'
 
 const store = inject(STORE_INJECT_KEY)!
 const clearConsole = computed(() => unref(inject(CLEAR_CONSOLE_INJECT_KEY)))
@@ -85,6 +86,11 @@ watch(
 onUnmounted(() => {
   proxy.destroy()
 })
+
+defineExpose({
+  container,
+  sandboxIframe: preview.sandboxEl
+} as PreviewExpose)
 </script>
 
 <template>

packages/vue-playground/src/playground/constants.ts

@@ -2,10 +2,11 @@ import {MaybeRef} from '@vueuse/core'
 import {InjectionKey} from 'vue'
 import {Store} from '../core'
 
-export const FILE_BASE_URL = 'file:///root/'
-export const PROJECT_ID_PREFIX = 'project'
-export const DEFAULT_FILE_NAME = 'comp.vue'
-export const IMPORT_JSON_NAME = 'import-map.json'
+export const PLAYGROUND_COMPONENT_NAME = 'Playground' as const
+export const FILE_BASE_URL = 'file:///root/' as const
+export const PROJECT_ID_PREFIX = 'project' as const
+export const DEFAULT_FILE_NAME = 'comp.vue' as const
+export const IMPORT_JSON_NAME = 'import-map.json' as const
 export const STORE_INJECT_KEY = '__store__' as unknown as InjectionKey<Store>
 export const CLEAR_CONSOLE_INJECT_KEY = '__clear_console__' as unknown as InjectionKey<MaybeRef<boolean>>
 export const SHOW_IMPORT_MAP_INJECT_KEY = '__show_import_map__' as unknown as InjectionKey<MaybeRef<boolean>>

packages/vue-playground/src/playground/hooks/useMonaco.ts

@@ -1,4 +1,4 @@
-import {generateProjectId, mustBeRef} from './../utils/common'
+/* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable @typescript-eslint/no-empty-function */
 import {ref, Ref, unref, watch} from 'vue'
 import {tryOnScopeDispose, MaybeRef, createEventHook, tryOnUnmounted, EventHookOn} from '@vueuse/core'
@@ -9,10 +9,11 @@ import {setupMonaco} from '../monaco'
 import {File} from '../../core'
 import {useMonacoModels} from './useMonacoModels'
 import {toggleDark, isDark} from './index'
-
-import {MonacoEditor} from '../utils/types-helper'
+import {CreateEditorOptions, MonacoEditor, PlaygroundLifeCycle} from '../utils/types-helper'
+import {generateProjectId, mustBeRef} from '../utils/common'
 
 export interface UseMonacoOptions {
+  lifeCycle?: MaybeRef<PlaygroundLifeCycle | undefined>
   activeFile: MaybeRef<File>
   files: MaybeRef<File[]>
 }
@@ -35,9 +36,15 @@ export function useMonaco(target: Ref<HTMLElement | undefined>, options: UseMona
   const getEditor = () => editor
 
   const init = async () => {
-    const {monaco} = await setupMonaco()
+    const lifeCycle = unref(options.lifeCycle)
+
+    await lifeCycle?.beforeLoadMonaco?.()
+
+    const {monaco} = await setupMonaco(lifeCycle)
     if (!monaco) return
 
+    await lifeCycle?.afterLoadMonaco?.(monaco)
+
     monaco.editor.defineTheme('vitesse-dark', darkTheme as unknown as MonacoEditor.IStandaloneThemeData)
     monaco.editor.defineTheme('vitesse-light', lightTheme as unknown as MonacoEditor.IStandaloneThemeData)
     const {getModels, modelUpdateId} = useMonacoModels({
@@ -51,11 +58,13 @@ export function useMonaco(target: Ref<HTMLElement | undefined>, options: UseMona
 
     watch(
       target,
-      () => {
+      async () => {
         const el = unref(target)
         if (!el) return
 
-        editor = monaco.editor.create(el, {
+        await lifeCycle?.beforeCreateEditor?.(monaco)
+
+        const defaultEditorOptions: CreateEditorOptions = {
           tabSize: 2,
           insertSpaces: true,
           autoClosingQuotes: 'always',
@@ -67,12 +76,25 @@ export function useMonaco(target: Ref<HTMLElement | undefined>, options: UseMona
           minimap: {
             enabled: true
           }
-        }) as MonacoEditor.IStandaloneCodeEditor
+        }
+
+        const editorOptions =
+          (await lifeCycle?.loadEditorOption?.(monaco, defaultEditorOptions)) || defaultEditorOptions
+
+        editor = monaco.editor.create(el, editorOptions) as MonacoEditor.IStandaloneCodeEditor
+
+        const _destroyEditor = addEditor(editor)
+        disposeEditor.value = async () => {
+          await lifeCycle?.beforeDestroyEditor?.(monaco, editor as any)
+          _destroyEditor()
+          await lifeCycle?.afterDestroyEditor?.(monaco)
+        }
 
-        disposeEditor.value = addEditor(editor)
         isSetup.value = true
         editorUpdateId.value++
 
+        await lifeCycle?.afterCreateEditor?.(monaco, editor as any)
+
         // editor.value.onDidFocusEditorText(() => {
         //   editor.value?.updateOptions({
         //     scrollbar: {

packages/vue-playground/src/playground/index.ts

@@ -1,2 +1,3 @@
 export {default as Playground} from './playground.vue'
 export * from './constants'
+export * from './utils/types-helper'

packages/vue-playground/src/playground/monaco/language.ts

@@ -1,16 +1,9 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import {FILE_BASE_URL} from '../constants'
-import {Monaco} from '../utils/types-helper'
+import {Monaco, PlaygroundLifeCycle, Tsconfig, TsLib} from '../utils/types-helper'
 
-interface TsLib {
-  content: string
-  filePath?: string
-}
-
-type Tsconfig = Parameters<typeof monaco.languages.typescript.typescriptDefaults.setCompilerOptions>[0]
-
-export async function setLanguage(monaco: Monaco) {
-  const tsconfig: Tsconfig = {
+export async function setLanguage(monaco: Monaco, lifeCycle?: PlaygroundLifeCycle) {
+  const defaultTsconfig: Tsconfig = {
     ...monaco.languages.typescript.typescriptDefaults.getCompilerOptions(),
     target: monaco.languages.typescript.ScriptTarget.ESNext,
     baseUrl: FILE_BASE_URL,
@@ -37,6 +30,8 @@ export async function setLanguage(monaco: Monaco) {
     typeRoots: ['node_modules/@types']
   }
 
+  const tsconfig = (await lifeCycle?.loadTsconfig?.(monaco, defaultTsconfig)) || defaultTsconfig
+
   // ts
   monaco.languages.typescript.typescriptDefaults.setCompilerOptions(tsconfig)
 
@@ -71,7 +66,7 @@ export async function setLanguage(monaco: Monaco) {
     import('./runtime.d.ts?raw')
   ])
 
-  const tsLibs: TsLib[] = [
+  const defaultTsLibs: TsLib[] = [
     {content: runtimeTypes},
     {content: `declare module '@vue/shared' { ${vueSharedTypes} }`},
     {content: `declare module '@vue/runtime-core' { ${vueRuntimeCoreTypes} }`},
@@ -80,6 +75,8 @@ export async function setLanguage(monaco: Monaco) {
     {content: `declare module 'vue' { ${vueTypes} }`}
   ]
 
+  const tsLibs = (await lifeCycle?.loadTsLibs?.(monaco, defaultTsLibs)) || defaultTsLibs
+
   tsLibs.forEach(lib => {
     monaco.languages.typescript.typescriptDefaults.addExtraLib(lib.content, lib.filePath)
   })