feat: add more customization options (#274)

Co-authored-by: wangleping <[email protected]>

Author: lecepin

src/Repl.vue

@@ -28,6 +28,11 @@ export interface Props {
       importCode?: string
       useCode?: string
     }
+    showRuntimeError?: boolean
+    showRuntimeWarning?: boolean
+  }
+  editorOptions?: {
+    ShowErrorText?: string
   }
 }
 
@@ -51,8 +56,13 @@ const props = withDefaults(defineProps<Props>(), {
       importCode: '',
       useCode: '',
     },
+    showRuntimeError: true,
+    showRuntimeWarning: true,
   }),
   layout: 'horizontal',
+  editorOptions: () => ({
+    ShowErrorText: 'Show Error',
+  }),
 })
 
 if (!props.editor) {
@@ -73,6 +83,7 @@ provide('import-map', toRef(props, 'showImportMap'))
 provide('tsconfig', toRef(props, 'showTsConfig'))
 provide('clear-console', toRef(props, 'clearConsole'))
 provide('preview-options', props.previewOptions)
+provide('editor-options', props.editorOptions)
 provide('theme', toRef(props, 'theme'))
 provide('preview-theme', toRef(props, 'previewTheme'))
 provide('preview-ref', () => outputRef.value?.previewRef?.container)

src/editor/MessageToggle.vue

@@ -1,10 +1,14 @@
 <script setup lang="ts">
+import { inject } from 'vue'
+import type { Props } from '../Repl.vue'
+
+const editorOptions = inject<Props['editorOptions']>('editor-options')
 const visible = defineModel<boolean>()
 </script>
 
 <template>
   <div class="wrapper" @click="visible = !visible">
-    <span>Show Error</span>
+    <span>{{ editorOptions?.ShowErrorText }}</span>
     <div class="toggle" :class="[{ active: modelValue }]">
       <div class="indicator" />
     </div>

src/output/Preview.vue

@@ -296,8 +296,8 @@ defineExpose({ reload, container })
     class="iframe-container"
     :class="{ [theme]: previewTheme }"
   />
-  <Message :err="runtimeError" />
-  <Message v-if="!runtimeError" :warn="runtimeWarning" />
+  <Message :err="runtimeError && previewOptions?.showRuntimeError" />
+  <Message v-if="!runtimeError && previewOptions?.showRuntimeWarning" :warn="runtimeWarning" />
 </template>
 
 <style scoped>