Feat: add chobitsu (Chrome Devtools) for preview

package.json

@@ -91,5 +91,8 @@
     "vite-plugin-dts": "^3.6.4",
     "vue": "^3.4.3",
     "vue-tsc": "1.9.0-alpha.3"
+  },
+  "dependencies": {
+    "chobitsu": "^1.4.6"
   }
 }

src/SplitPane.vue

@@ -2,7 +2,10 @@
 import { ref, reactive, computed, inject } from 'vue'
 import { Store } from './store'
 
-const props = defineProps<{ layout?: 'horizontal' | 'vertical' }>()
+const props = defineProps<{
+  layout?: 'horizontal' | 'vertical'
+  defaultSplit?: number
+}>()
 const isVertical = computed(() => props.layout === 'vertical')
 
 const container = ref()
@@ -13,7 +16,7 @@ const showOutput = ref(store.initialShowOutput)
 
 const state = reactive({
   dragging: false,
-  split: 50,
+  split: props.defaultSplit ?? 50,
 })
 
 const boundSplit = computed(() => {

src/editor/types.ts

@@ -1,5 +1,5 @@
-import CodeMirrorEditor from "./CodeMirrorEditor.vue";
-import MonacoEditor from "./MonacoEditor.vue";
+import CodeMirrorEditor from './CodeMirrorEditor.vue'
+import MonacoEditor from './MonacoEditor.vue'
 
 export type EditorComponentType = typeof CodeMirrorEditor | typeof MonacoEditor
 

src/monaco/Monaco.vue

@@ -43,7 +43,7 @@ const lang = computed(() => (props.mode === 'css' ? 'css' : 'javascript'))
 
 const replTheme = inject<Ref<'dark' | 'light'>>('theme')!
 onMounted(async () => {
-  const theme = await import('./highlight').then(r => r.registerHighlighter())
+  const theme = await import('./highlight').then((r) => r.registerHighlighter())
   ready.value = true
   await nextTick()
 

src/monaco/highlight.ts

@@ -7,17 +7,16 @@ import langVue from 'shikiji/langs/vue.mjs'
 import themeDark from 'shikiji/themes/dark-plus.mjs'
 import themeLight from 'shikiji/themes/light-plus.mjs'
 
-
 export async function registerHighlighter() {
   const highlighter = await getHighlighterCore({
     themes: [themeDark, themeLight],
     langs: [langVue],
-    loadWasm: getWasmInlined
+    loadWasm: getWasmInlined,
   })
   monaco.languages.register({ id: 'vue' })
   shikijiToMonaco(highlighter, monaco)
   return {
     light: themeLight.name!,
-    dark: themeDark.name!
+    dark: themeDark.name!,
   }
 }