fix: split monaco out

Author: Kingwl

src/Repl.vue

@@ -1,9 +1,11 @@
 <script setup lang="ts">
 import SplitPane from './SplitPane.vue'
-import Editor from './editor/Editor.vue'
 import Output from './output/Output.vue'
 import { Store, ReplStore, SFCOptions } from './store'
 import { provide, toRef } from 'vue'
+import { EditorComponentType } from './types';
+import EditorContainer from './editor/EditorContainer.vue';
+import CodeMirrorEditor from './editor/CodeMirrorEditor.vue';
 
 interface Props {
   store?: Store
@@ -13,14 +15,16 @@ interface Props {
   clearConsole?: boolean
   sfcOptions?: SFCOptions
   layout?: string
+  editor?: EditorComponentType
 }
 
 const props = withDefaults(defineProps<Props>(), {
   store: () => new ReplStore(),
   autoResize: true,
   showCompileOutput: true,
   showImportMap: true,
-  clearConsole: true
+  clearConsole: true,
+  editor: CodeMirrorEditor
 })
 
 props.store.options = props.sfcOptions
@@ -35,10 +39,13 @@ provide('clear-console', toRef(props, 'clearConsole'))
   <div class="vue-repl">
     <SplitPane :layout="layout">
       <template #left>
-        <Editor />
+        <EditorContainer :editor-component="editor" />
       </template>
       <template #right>
-        <Output :showCompileOutput="props.showCompileOutput" />
+        <Output
+          :showCompileOutput="props.showCompileOutput"
+          :editor-component="editor"
+        />
       </template>
     </SplitPane>
   </div>

src/editor/CodeMirrorEditor.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import CodeMirror from '../codemirror/CodeMirror.vue'
+import { computed } from 'vue'
+
+const props = defineProps<{
+  value: string;
+  filename: string;
+  readonly?: boolean
+}>()
+
+const emits = defineEmits<{
+  (e: 'change', code: string): void;
+}>()
+
+const onChange = (code: string) => {
+  emits('change', code)
+}
+
+const activeMode = computed(() => {
+  const filename = props.filename
+  return filename.endsWith('.vue') || filename.endsWith('.html')
+    ? 'htmlmixed'
+    : filename.endsWith('.css')
+    ? 'css'
+    : 'javascript'
+})
+</script>
+
+<template>
+  <CodeMirror
+    @change="onChange"
+    :value="value"
+    :mode="activeMode"
+  />
+</template>
+

src/editor/Editor.vue renamed to src/editor/EditorContainer.vue

@@ -1,41 +1,32 @@
 <script setup lang="ts">
 import FileSelector from './FileSelector.vue'
-import Monaco from '../monaco/Monaco.vue'
 import Message from '../Message.vue'
-import { computed, inject } from 'vue'
+import { debounce } from '../utils'
+import { inject, toRef } from 'vue'
 import { Store } from '../store'
+import { EditorComponentType } from '../types'
+
+const props = defineProps<{
+    editorComponent: EditorComponentType
+}>()
+
+const EditorComponent = toRef(props, 'editorComponent')
 
 const store = inject('store') as Store
 
-const onChange = (code: string) => {
+const onChange = debounce((code: string) => {
   store.state.activeFile.code = code
-}
+}, 250)
 
-const language = computed(() => {
-  const { filename } = store.state.activeFile
-  if (filename.endsWith('.vue')) {
-    return 'vue'
-  }
-  if (filename.endsWith('.html')) {
-    return 'html'
-  }
-  if (filename.endsWith('.css')) {
-    return 'css'
-  }
-  if (filename.endsWith('.ts')) {
-    return 'typescript'
-  }
-  return 'javascript'
-})
 </script>
 
 <template>
   <FileSelector />
   <div class="editor-container">
-    <Monaco
+    <EditorComponent
+      @change="onChange"
       :value="store.state.activeFile.code"
-      :language="language"
-      @save="onChange"
+      :filename="store.state.activeFile.filename"
     />
     <Message :err="store.state.errors[0]" />
   </div>

src/editor/MonacoEditor.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import Monaco from '../monaco/Monaco.vue'
+import { computed } from 'vue'
+
+const props = defineProps<{
+  value: string;
+  filename: string;
+  readonly?: boolean
+}>()
+
+const emits = defineEmits<{
+  (e: 'change', code: string): void;
+}>()
+
+const onChange = (code: string) => {
+  emits('change', code)
+}
+
+const language = computed(() => {
+  const filename = props.filename;
+  if (filename.endsWith('.vue')) {
+    return 'vue'
+  }
+  if (filename.endsWith('.html')) {
+    return 'html'
+  }
+  if (filename.endsWith('.css')) {
+    return 'css'
+  }
+  if (filename.endsWith('.ts')) {
+    return 'typescript'
+  }
+  return 'javascript'
+})
+</script>
+
+<template>
+  <Monaco
+    :value="value"
+    :language="language"
+    @save="onChange"
+  />
+</template>

src/output/Output.vue

@@ -1,14 +1,17 @@
 <script setup lang="ts">
 import Preview from './Preview.vue'
-import Monaco from '../monaco/Monaco.vue'
 import { Store } from '../store'
-import { inject, ref, computed } from 'vue'
+import { inject, ref, computed, toRef } from 'vue'
 import type { OutputModes } from './types'
+import { EditorComponentType } from '../types'
 
 const props = defineProps<{
   showCompileOutput?: boolean
+  editorComponent: EditorComponentType
 }>()
 
+const EditorComponent = toRef(props, 'editorComponent')
+
 const store = inject('store') as Store
 const modes = computed(() =>
   props.showCompileOutput
@@ -36,10 +39,10 @@ const mode = ref<OutputModes>(
 
   <div class="output-container">
     <Preview :show="mode === 'preview'" />
-    <Monaco
+    <EditorComponent
       v-if="mode !== 'preview'"
       readonly
-      :language="mode === 'css' ? 'css' : 'javascript'"
+      :filename="mode === 'css' ? 'a.css' : 'a.js'"
       :value="store.state.activeFile.compiled[mode]"
     />
   </div>

src/types.ts

@@ -0,0 +1,13 @@
+import { Component } from "vue";
+
+interface EditorProps {
+    value: string;
+    filename: string;
+    readonly?: boolean
+}
+
+interface EditorEmits {
+    (e: 'change', code: string): void
+}
+
+export type EditorComponentType = Component<EditorProps, EditorEmits>;

test/main.ts

@@ -1,5 +1,6 @@
 import { createApp, h, watchEffect } from 'vue'
 import { Repl, ReplStore } from '../src'
+// import MonacoEditor from '../src/editor/MonacoEditor.vue'
 
 ;(window as any).process = { env: {} }
 
@@ -35,7 +36,8 @@ const App = {
     return () =>
       h(Repl, {
         store,
-        layout: 'vertical'
+        layout: 'vertical',
+        // editor: MonacoEditor
         // showCompileOutput: false,
         // showImportMap: false
       })

tsconfig.json

@@ -15,6 +15,7 @@
     "esModuleInterop": true,
     "removeComments": false,
     "lib": ["esnext", "dom"],
+    "jsx": "preserve",
     "rootDir": "."
   },
   "include": ["src", "test", "vite.config.ts"]

vite.config.ts

@@ -28,9 +28,13 @@ export default defineConfig({
     lib: {
       entry: './src/index.ts',
       formats: ['es'],
-      fileName: () => 'vue-repl.js'
+      fileName: () => '[name].js'
     },
     rollupOptions: {
+      input: {
+        'vue-repl': './src/index.ts',
+        'vue-repl-monaco-editor': './src/editor/MonacoEditor.vue',
+      },
       external: ['vue', 'vue/compiler-sfc']
     }
   }