fix: ensure imported editor can be passed as prop without type error

Author: yyx990803

package.json

@@ -11,19 +11,19 @@
   "types": "dist/repl.d.ts",
   "exports": {
     ".": {
+      "types": "./dist/repl.d.ts",
       "import": "./dist/vue-repl.js",
-      "require": "./dist/ssr-stub.js",
-      "types": "./dist/repl.d.ts"
+      "require": "./dist/ssr-stub.js"
     },
     "./monaco-editor": {
+      "types": "./dist/editor-types.d.ts",
       "import": "./dist/monaco-editor.js",
-      "require": null,
-      "types": "./dist/MonacoEditor.vue.d.ts"
+      "require": null
     },
     "./codemirror-editor": {
+      "types": "./dist/editor-types.d.ts",
       "import": "./dist/codemirror-editor.js",
-      "require": null,
-      "types": "./dist/CodeMirrorEditor.vue.d.ts"
+      "require": null
     },
     "./style.css": "./dist/style.css",
     "./dist/style.css": "./dist/style.css"

scripts/cleanup.js

@@ -1,16 +1,6 @@
 // This file is executed from npm script with project root as cwd.
 import fs from 'node:fs'
 
-fs.renameSync(
-  'dist/src/editor/CodeMirrorEditor.vue.d.ts',
-  'dist/CodeMirrorEditor.vue.d.ts'
-)
-
-fs.renameSync(
-  'dist/src/editor/MonacoEditor.vue.d.ts',
-  'dist/MonacoEditor.vue.d.ts'
-)
-
-fs.renameSync('dist/src/editor/types.d.ts', 'dist/types.d.ts')
+fs.renameSync('dist/src/editor/types.d.ts', 'dist/editor-types.d.ts')
 
 fs.rmSync('dist/src', { recursive: true })

src/Repl.vue

@@ -3,7 +3,7 @@ import SplitPane from './SplitPane.vue'
 import Output from './output/Output.vue'
 import { Store, ReplStore, SFCOptions } from './store'
 import { provide, toRef } from 'vue'
-import { EditorComponentType } from './editor/types'
+import type EditorComponentType from './editor/types'
 import EditorContainer from './editor/EditorContainer.vue'
 
 export interface Props {

src/editor/EditorContainer.vue

@@ -4,7 +4,7 @@ import Message from '../Message.vue'
 import { debounce } from '../utils'
 import { inject } from 'vue'
 import { Store } from '../store'
-import { EditorComponentType } from './types'
+import type EditorComponentType from './types'
 
 const props = defineProps<{
   editorComponent: EditorComponentType

src/editor/types.ts

@@ -13,6 +13,8 @@ interface EditorEmits {
   (e: 'change', code: string): void
 }
 
-export type EditorComponentType = Component<EditorProps, EditorEmits> & {
+type EditorComponentType = Component<EditorProps, EditorEmits> & {
   editorType: 'monaco' | 'codemirror'
 }
+
+export default EditorComponentType

src/output/Output.vue

@@ -3,7 +3,7 @@ import Preview from './Preview.vue'
 import { Store } from '../store'
 import { inject, ref, computed } from 'vue'
 import type { OutputModes } from './types'
-import { EditorComponentType } from '../editor/types'
+import type EditorComponentType from '../editor/types'
 
 const props = defineProps<{
   editorComponent: EditorComponentType

test/main.ts

@@ -2,6 +2,7 @@ import { createApp, h, watchEffect } from 'vue'
 import { Repl, ReplStore } from '../src'
 import MonacoEditor from '../src/editor/MonacoEditor.vue'
 // import CodeMirrorEditor from '../src/editor/CodeMirrorEditor.vue'
+import EditorComponentType from '../src/editor/types'
 ;(window as any).process = { env: {} }
 
 const App = {
@@ -37,10 +38,9 @@ const App = {
     // store.setVueVersion('3.2.8')
 
     return () =>
-      //@ts-ignore
       h(Repl, {
         store,
-        editor: MonacoEditor,
+        editor: MonacoEditor as any as EditorComponentType,
         // layout: 'vertical',
         ssr: true,
         sfcOptions: {