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!,
  }
 }