Add showEditor and showOutput flags

src/EditorAndOutput.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import Message from './Message.vue';
+import SplitPane from './SplitPane.vue'
+import { computed } from 'vue'
+
+const props = defineProps<{
+  layout?: 'horizontal' | 'vertical'
+  layoutReverse?: boolean
+}>()
+
+const editorSlotName = computed(() => (props.layoutReverse ? 'right' : 'left'))
+const outputSlotName = computed(() => (props.layoutReverse ? 'left' : 'right'))
+</script>
+
+<template>
+  <!-- Editor and Output -->
+  <SplitPane v-if="$slots.editor && $slots.output" :layout="layout">
+    <template #[editorSlotName]>
+      <slot name="editor" />
+    </template>
+    <template #[outputSlotName]>
+      <slot name="output" />
+    </template>
+  </SplitPane>
+  <!-- Editor only -->
+  <slot v-else-if="$slots.editor" name="editor" />
+  <!-- Output only -->
+  <slot v-else-if="$slots.output" name="output" />
+  <!-- Warning -->
+  <Message v-else warn="Nothing to show with !showOutput and !showEditor" permanent />
+</template>

src/Message.vue

@@ -5,6 +5,7 @@ import type { CompilerError } from 'vue/compiler-sfc'
 const props = defineProps<{
   err?: string | Error | false
   warn?: string | Error
+  permanent?: boolean
 }>()
 
 const dismissed = ref(false)
@@ -38,7 +39,7 @@ function formatMessage(err: string | Error): string {
       :class="err ? 'err' : 'warn'"
     >
       <pre>{{ formatMessage(err || warn!) }}</pre>
-      <button class="dismiss" @click="dismissed = true">✕</button>
+      <button v-if="!props.permanent" class="dismiss" @click="dismissed = true">✕</button>
     </div>
   </Transition>
 </template>

src/Repl.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import SplitPane from './SplitPane.vue'
+import EditorAndOutput from './EditorAndOutput.vue'
 import Output from './output/Output.vue'
 import { type Store, useStore } from './store'
 import { computed, provide, toRefs, useTemplateRef } from 'vue'
@@ -17,6 +17,8 @@ export interface Props {
   editor: EditorComponentType
   store?: Store
   autoResize?: boolean
+  showEditor?: boolean
+  showOutput?: boolean
   showCompileOutput?: boolean
   showOpenSourceMap?: boolean
   showImportMap?: boolean
@@ -54,6 +56,8 @@ const props = withDefaults(defineProps<Props>(), {
   previewTheme: false,
   store: () => useStore(),
   autoResize: true,
+  showEditor: true,
+  showOutput: true,
   showCompileOutput: true,
   showOpenSourceMap: false,
   showImportMap: true,
@@ -76,9 +80,6 @@ const outputRef = useTemplateRef('output')
 
 props.store.init()
 
-const editorSlotName = computed(() => (props.layoutReverse ? 'right' : 'left'))
-const outputSlotName = computed(() => (props.layoutReverse ? 'left' : 'right'))
-
 provide(injectKeyProps, {
   ...toRefs(props),
   autoSave,
@@ -100,11 +101,11 @@ defineExpose({ reload })
 
 <template>
   <div class="vue-repl">
-    <SplitPane :layout="layout">
-      <template #[editorSlotName]>
+    <EditorAndOutput :layout="layout" :layout-reverse="layoutReverse">
+      <template v-if="showEditor" #editor>
         <EditorContainer :editor-component="editor" />
       </template>
-      <template #[outputSlotName]>
+      <template v-if="showOutput" #output>
         <Output
           ref="output"
           :editor-component="editor"
@@ -114,7 +115,7 @@ defineExpose({ reload })
           :ssr="!!props.ssr"
         />
       </template>
-    </SplitPane>
+    </EditorAndOutput>
   </div>
 </template>
 

test/main.ts

@@ -58,6 +58,8 @@ const App = {
         theme: theme.value,
         previewTheme: previewTheme.value,
         editor: MonacoEditor,
+        // showEditor: false,
+        // showOutput: false,
         showOpenSourceMap: true,
         // layout: 'vertical',
         ssr: true,