feat: export extend editor-container

Author: litingyes

src/editor/EditorContainer.vue

@@ -9,18 +9,9 @@ import type { EditorComponentType } from './types'
 
 const SHOW_ERROR_KEY = 'repl_show_error'
 
-export interface Props {
+const props = defineProps<{
   editorComponent: EditorComponentType
-  hideFileSelector?: Boolean
-}
-
-// const props = defineProps<{
-//   editorComponent: EditorComponentType
-// }>()
-
-const props = withDefaults(defineProps<Props>(), {
-  hideFileSelector: () => false,
-})
+}>()
 
 const store = inject('store') as Store
 const showMessage = ref(getItem())
@@ -44,7 +35,7 @@ watch(showMessage, () => {
 </script>
 
 <template>
-  <FileSelector v-if="!props.hideFileSelector" />
+  <FileSelector />
   <div class="editor-container">
     <props.editorComponent
       @change="onChange"

src/extend/EditorContainer.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import Message from '../Message.vue'
+import { debounce } from '../utils'
+import { inject, ref, watch } from 'vue'
+import { Store } from '../store'
+import MessageToggle from '../editor/MessageToggle.vue'
+import MonacoEditor from '../editor/MonacoEditor.vue'
+
+const SHOW_ERROR_KEY = 'repl_show_error'
+
+const store = inject('store') as Store
+const showMessage = ref(getItem())
+
+const onChange = debounce((code: string) => {
+  store.state.activeFile.code = code
+}, 250)
+
+function setItem() {
+  localStorage.setItem(SHOW_ERROR_KEY, showMessage.value ? 'true' : 'false')
+}
+
+function getItem() {
+  const item = localStorage.getItem(SHOW_ERROR_KEY)
+  return !(item === 'false')
+}
+
+watch(showMessage, () => {
+  setItem()
+})
+</script>
+
+<template>
+  <div class="editor-container">
+    <MonacoEditor
+      @change="onChange"
+      :value="store.state.activeFile.code"
+      :filename="store.state.activeFile.filename"
+    />
+    <Message v-show="showMessage" :err="store.state.errors[0]" />
+    <MessageToggle v-model="showMessage" />
+  </div>
+</template>
+
+<style scoped>
+.editor-container {
+  height: 100%;
+  overflow: hidden;
+  position: relative;
+}
+</style>

src/index.ts

@@ -2,9 +2,10 @@ export { default as Repl } from './Repl.vue'
 export { default as Preview } from './output/Preview.vue'
 export { ReplStore, File, defaultMainFile, importMapFile } from './store'
 export { compileFile } from './transform'
+export { default as EditorContainer } from './editor/EditorContainer.vue'
 export { default as CodeMirrorEditor } from './editor/CodeMirrorEditor.vue'
 export { default as MonacoEditor } from './editor/MonacoEditor.vue'
-export { default as EditorContainer } from './editor/EditorContainer.vue'
+export { default as ExtendEditorContainer } from './extend/EditorContainer.vue'
 export type { Props as ReplProps } from './Repl.vue'
 export type { Store, StoreOptions, SFCOptions, StoreState } from './store'
 export type { OutputModes } from './output/types'

src/monaco/Monaco.vue

@@ -144,7 +144,7 @@ onMounted(async () => {
     const lineHeight = editorInstance.getOption(
       monaco.editor.EditorOption.lineHeight
     )
-    editorHeight.value = (lineCount + 1) * lineHeight + 'px'
+    editorHeight.value = lineCount * lineHeight + 'px'
   })
 
   updateEditorHeight()

test/VuePreview.vue

@@ -1,7 +1,13 @@
 <script setup lang="ts">
 import type { PreviewUpdateFlag, Store } from '../src'
-import { MonacoEditor, Preview, ReplStore, defaultMainFile } from '../src'
-import { computed, onMounted, provide, ref } from 'vue'
+import {
+  ExtendEditorContainer,
+  Preview,
+  ReplStore,
+  defaultMainFile,
+  importMapFile,
+} from '../src'
+import { computed, onMounted, provide, ref, toRef } from 'vue'
 import { useClipboard, useDebounceFn, useElementHover } from '@vueuse/core'
 import Copy from './icons/Copy.vue'
 import Copied from './icons/Copied.vue'
@@ -27,6 +33,8 @@ export interface Props {
       useCode?: string
     }
   }
+  importMap?: Record<string, string> | string
+  theme?: 'dark' | 'light'
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -44,6 +52,7 @@ const props = withDefaults(defineProps<Props>(), {
       useCode: '',
     },
   }),
+  theme: 'light',
 })
 
 const { store } = props
@@ -61,20 +70,22 @@ const msg = ref('vite-plugin-vue-preview')
 </template>
 `.trim()
 
-if (!props.code) {
-  store.setFiles({
-    [defaultMainFile]: welcomeCode,
-  })
-} else if (props.encode) {
-  store.setFiles({
-    [defaultMainFile]: decodeURIComponent(props.code),
-  })
-} else {
-  store.setFiles({
-    [defaultMainFile]: props.code,
-  })
+const files: Record<string, string> = {}
+
+if (!props.code) files[defaultMainFile] = welcomeCode
+else if (props.encode) files[defaultMainFile] = decodeURIComponent(props.code)
+else files[defaultMainFile] = props.code
+
+if (props.importMap) {
+  const importMap =
+    typeof props.importMap === 'string'
+      ? JSON.parse(decodeURIComponent(props.importMap))
+      : props.importMap
+  files[importMapFile] = JSON.stringify({ imports: importMap }, null, 2)
 }
 
+store.setFiles(files)
+
 onMounted(() => {
   if (props.clearConsole)
     // eslint-disable-next-line no-console
@@ -96,6 +107,7 @@ provide('store', store)
 provide('autoresize', props.autoResize)
 provide('clear-console', props.clearConsole)
 provide('preview-options', props.previewOptions)
+provide('theme', toRef(props, 'theme'))
 
 const { copy, copied } = useClipboard({
   source: store.state.activeFile.code,
@@ -159,11 +171,7 @@ const isHover = useElementHover(vuePreviewContainerRef)
         </div>
       </Transition>
     </div>
-    <MonacoEditor
-      :value="store.state.activeFile.code"
-      :filename="store.state.activeFile.filename"
-      @change="onChange"
-    />
+    <ExtendEditorContainer />
   </div>
 </template>
 
@@ -253,6 +261,10 @@ const isHover = useElementHover(vuePreviewContainerRef)
     max-height: v-bind('maxHeightForCode');
     transition: max-height 0.3s;
   }
+
+  .editor-container {
+    height: 400px;
+  }
 }
 
 .vue-preview-slide-down-enter-active,

test/app.vue

@@ -0,0 +1,7 @@
+<template>
+  <VuePreview />
+</template>
+
+<script lang="ts" setup>
+import VuePreview from './VuePreview.vue'
+</script>

test/main.ts

@@ -1,14 +1,5 @@
-import { createApp, h } from 'vue'
-import VuePreview from './VuePreview.vue'
+import { createApp } from 'vue'
+import App from './app.vue'
 ;(window as any).process = { env: {} }
 
-const App = {
-  setup() {
-    return () =>
-      h(VuePreview, {
-        ssr: true,
-      })
-  },
-}
-
 createApp(App).mount('#app')