add more configuration props

Author: yyx990803

src/Repl.vue

@@ -5,18 +5,23 @@ import Output from './output/Output.vue'
 import { ReplStore } from './store'
 import { provide } from 'vue'
 
-const props = withDefaults(
-  defineProps<{
-    store?: ReplStore
-    showCompileOutput?: boolean
-  }>(),
-  {
-    store: () => new ReplStore(),
-    showCompileOutput: false
-  }
-)
+interface Props {
+  store?: ReplStore
+  autoResize?: boolean
+  showCompileOutput?: boolean
+  showImportMap?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  store: () => new ReplStore(),
+  autoResize: true,
+  showCompileOutput: true,
+  showImportMap: true
+})
 
 provide('store', props.store)
+provide('autoresize', props.autoResize)
+provide('import-map', props.showImportMap)
 </script>
 
 <template>

src/codemirror/CodeMirror.vue

@@ -3,28 +3,27 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, watchEffect } from 'vue'
+import { ref, onMounted, watchEffect, inject } from 'vue'
+import { debounce } from '../utils'
 import CodeMirror from './codemirror'
 
-const el = ref()
+interface Props {
+  mode?: string
+  value?: string
+  readonly?: boolean
+}
 
-const props = defineProps({
-  mode: {
-    type: String,
-    default: 'htmlmixed'
-  },
-  value: {
-    type: String,
-    default: ''
-  },
-  readonly: {
-    type: Boolean,
-    default: false
-  }
+const props = withDefaults(defineProps<Props>(), {
+  mode: 'htmlmixed',
+  value: '',
+  readonly: false
 })
 
 const emit = defineEmits<(e: 'change', value: string) => void>()
 
+const el = ref()
+const needAutoResize = inject('autoresize')
+
 onMounted(() => {
   const addonOptions = {
     autoCloseBrackets: true,
@@ -57,6 +56,12 @@ onMounted(() => {
   setTimeout(() => {
     editor.refresh()
   }, 50)
+
+  if (needAutoResize) {
+    window.addEventListener('resize', debounce(() => {
+      editor.refresh()
+    }))
+  }
 })
 </script>
 

src/editor/FileSelector.vue

@@ -7,6 +7,7 @@ const store = inject('store') as ReplStore
 const pending = ref(false)
 const pendingFilename = ref('Comp.vue')
 const importMapFile = 'import-map.json'
+const showImportMap = inject<boolean>('import-map')
 const files = computed(() =>
   Object.keys(store.state.files).filter((f) => f !== importMapFile)
 )
@@ -70,6 +71,7 @@ function doneAddFile() {
     </div>
     <button class="add" @click="startAddFile">+</button>
     <div
+      v-if="showImportMap"
       class="file import-map"
       :class="{ active: store.state.activeFilename === importMapFile }"
       @click="store.setActive(importMapFile)"

test/main.ts

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