chore: deplace LunaConsole to Output.vue

Author: Dsaquel

src/output/Output.vue

@@ -1,6 +1,16 @@
 <script setup lang="ts">
 import Preview from './Preview.vue'
-import { computed, inject, useTemplateRef } from 'vue'
+import SplitPane from '../SplitPane.vue'
+import {
+  computed,
+  inject,
+  onMounted,
+  ref,
+  useTemplateRef,
+  watch,
+  type WatchHandle,
+} from 'vue'
+import LunaConsole from 'luna-console'
 import {
   type EditorComponentType,
   type OutputModes,
@@ -13,8 +23,36 @@ const props = defineProps<{
   ssr: boolean
 }>()
 
-const { store } = inject(injectKeyProps)!
+const { store, showConsole, theme } = inject(injectKeyProps)!
 const previewRef = useTemplateRef('preview')
+const consoleContainerRef = useTemplateRef('console-container')
+const lunaConsole = ref<LunaConsole>()
+let lunaWatcher: WatchHandle | undefined = undefined
+
+onMounted(createConsole)
+
+watch(
+  showConsole,
+  (val) => {
+    if (val) {
+      createConsole()
+    } else {
+      lunaConsole.value = undefined
+      lunaWatcher?.stop()
+    }
+  },
+  { flush: 'post' },
+)
+
+function createConsole() {
+  if (!consoleContainerRef.value || lunaConsole.value) return
+  lunaConsole.value = new LunaConsole(consoleContainerRef.value, {
+    theme: theme.value || 'light',
+  })
+  lunaWatcher ??= watch(() => store.value.activeFile.code, clearLunaConsole)
+  lunaWatcher.resume()
+}
+
 const modes = computed(() =>
   props.showCompileOutput
     ? (['preview', 'js', 'css', 'ssr'] as const)
@@ -33,8 +71,14 @@ const mode = computed<OutputModes>({
   },
 })
 
+function clearLunaConsole() {
+  console.log('clear')
+  lunaConsole.value?.clear(true)
+}
+
 function reload() {
   previewRef.value?.reload()
+  clearLunaConsole()
 }
 
 defineExpose({ reload, previewRef })
@@ -53,7 +97,21 @@ defineExpose({ reload, previewRef })
   </div>
 
   <div class="output-container">
-    <Preview ref="preview" :show="mode === 'preview'" :ssr="ssr" />
+    <SplitPane v-if="showConsole" layout="vertical">
+      <template #left>
+        <Preview
+          ref="preview"
+          :luna-console="lunaConsole"
+          :show="mode === 'preview'"
+          :ssr="ssr"
+        />
+      </template>
+      <template #right>
+        <div ref="console-container" />
+        <button class="clear-btn" @click="clearLunaConsole">clear</button>
+      </template>
+    </SplitPane>
+    <Preview v-else ref="preview" :show="mode === 'preview'" :ssr="ssr" />
     <props.editorComponent
       v-if="mode !== 'preview'"
       readonly
@@ -95,4 +153,23 @@ button.active {
   color: var(--color-branding-dark);
   border-bottom: 3px solid var(--color-branding-dark);
 }
+.luna-console-theme-dark {
+  background-color: var(--bg) !important;
+}
+.clear-btn {
+  position: absolute;
+  font-size: 18px;
+  font-family: var(--font-code);
+  color: #999;
+  top: 10px;
+  right: 10px;
+  z-index: 99;
+  padding: 8px 10px 6px;
+  background-color: var(--bg);
+  border-radius: 4px;
+  border: 1px solid var(--border);
+  &:hover {
+    color: var(--color-branding);
+  }
+}
 </style>

src/output/Preview.vue

@@ -2,17 +2,16 @@
 import { computed, inject, useTemplateRef } from 'vue'
 import { injectKeyProps } from '../../src/types'
 import Sandbox from './Sandbox.vue'
+import LunaConsole from 'luna-console'
 
-const props = defineProps<{ show: boolean; ssr: boolean }>()
+const props = defineProps<{
+  show: boolean
+  ssr: boolean
+  lunaConsole?: LunaConsole
+}>()
 
-const {
-  store,
-  clearConsole,
-  showConsole,
-  theme,
-  previewTheme,
-  previewOptions,
-} = inject(injectKeyProps)!
+const { store, clearConsole, theme, previewTheme, previewOptions } =
+  inject(injectKeyProps)!
 
 const sandboxTheme = computed(() =>
   previewTheme.value ? theme.value : undefined,
@@ -35,7 +34,7 @@ defineExpose({
     :theme="sandboxTheme"
     :preview-options="previewOptions"
     :ssr="props.ssr"
-    :show-console="showConsole"
     :clear-console="clearConsole"
+    :luna-console="props.lunaConsole"
   />
 </template>

src/output/Sandbox.vue

@@ -14,18 +14,15 @@ import {
 import LunaConsole from 'luna-console'
 import srcdoc from './srcdoc.html?raw'
 import { PreviewProxy } from './PreviewProxy'
-import SplitPane from '../SplitPane.vue'
 import { compileModulesForPreview } from './moduleCompiler'
 import { injectKeyProps } from '../types'
-
 import type { Store } from '../store'
 
 export interface SandboxProps {
   store: Store
   show?: boolean
   ssr?: boolean
   clearConsole?: boolean
-  showConsole?: boolean
   theme?: 'dark' | 'light'
   previewOptions?: {
     headHTML?: string
@@ -40,13 +37,13 @@ export interface SandboxProps {
   }
   /** @default true */
   autoStoreInit?: boolean
+  lunaConsole?: LunaConsole
 }
 
 const props = withDefaults(defineProps<SandboxProps>(), {
   show: true,
   ssr: false,
   theme: 'light',
-  showConsole: false,
   clearConsole: true,
   previewOptions: () => ({}),
   autoStoreInit: true,
@@ -59,26 +56,15 @@ if (keyProps === undefined && props.autoStoreInit) {
 }
 
 const containerRef = useTemplateRef('container')
-const consoleContainerRef = useTemplateRef('console-container')
 const runtimeError = ref<string>()
 const runtimeWarning = ref<string>()
 
 let sandbox: HTMLIFrameElement
-let lunaConsole: LunaConsole
 let proxy: PreviewProxy
 let stopUpdateWatcher: WatchStopHandle | undefined
 
 // create sandbox on mount
-onMounted(() => {
-  createSandbox()
-  if (!consoleContainerRef.value) return
-  if (props.showConsole) {
-    lunaConsole = new LunaConsole(consoleContainerRef.value, {
-      theme: keyProps?.theme.value || 'light',
-    })
-    watch(() => store.value.activeFile.code, clearLunaConsole)
-  }
-})
+onMounted(createSandbox)
 
 // reset sandbox when import map changes
 watch(
@@ -173,33 +159,34 @@ function createSandbox() {
       runtimeError.value = 'Uncaught (in promise): ' + error.message
     },
     on_console: (log: any) => {
+      const lc = props.lunaConsole
       if (log.level === 'error') {
         if (log.args[0] instanceof Error) {
           runtimeError.value = log.args[0].message
         } else {
           runtimeError.value = log.args[0]
         }
-        lunaConsole.error(...log.args)
+        lc?.error(...log.args)
       } else if (log.level === 'warn') {
         if (log.args[0].toString().includes('[Vue warn]')) {
           runtimeWarning.value = log.args
             .join('')
             .replace(/\[Vue warn\]:/, '')
             .trim()
         }
-        lunaConsole.warn(...log.args)
+        lc?.warn(...log.args)
       } else {
-        lunaConsole.log(...log.args)
+        lc?.log(...log.args)
       }
     },
     on_console_group: (action: any) => {
-      lunaConsole.group(action.label)
+      props.lunaConsole?.group(action.label)
     },
     on_console_group_end: () => {
-      lunaConsole.groupEnd()
+      props.lunaConsole?.groupEnd()
     },
     on_console_group_collapsed: (action: any) => {
-      lunaConsole.groupCollapsed(action.label)
+      props.lunaConsole?.groupCollapsed(action.label)
     },
   })
 
@@ -318,38 +305,18 @@ async function updatePreview() {
   }
 }
 
-function clearLunaConsole() {
-  lunaConsole?.clear(true)
-}
-
 /**
  * Reload the preview iframe
  */
 function reload() {
   sandbox.contentWindow?.location.reload()
-  clearLunaConsole()
 }
 
 defineExpose({ reload, container: containerRef })
 </script>
 
 <template>
-  <SplitPane v-if="show && showConsole" layout="vertical">
-    <template #left>
-      <div ref="container" class="iframe-container" :class="theme" />
-    </template>
-    <template #right>
-      <div ref="console-container" />
-      <button class="clear-btn" @click="clearLunaConsole">clear</button>
-    </template>
-  </SplitPane>
-  <div
-    v-if="!showConsole"
-    v-show="props.show"
-    ref="container"
-    class="iframe-container"
-    :class="theme"
-  />
+  <div v-show="show" ref="container" class="iframe-container" :class="theme" />
   <Message :err="(previewOptions?.showRuntimeError ?? true) && runtimeError" />
   <Message
     v-if="!runtimeError && (previewOptions?.showRuntimeWarning ?? true)"
@@ -368,23 +335,4 @@ defineExpose({ reload, container: containerRef })
 .iframe-container.dark :deep(iframe) {
   background-color: #1e1e1e;
 }
-.luna-console-theme-dark {
-  background-color: var(--bg) !important;
-}
-.clear-btn {
-  position: absolute;
-  font-size: 18px;
-  font-family: var(--font-code);
-  color: #999;
-  top: 10px;
-  right: 10px;
-  z-index: 99;
-  padding: 8px 10px 6px;
-  background-color: var(--bg);
-  border-radius: 4px;
-  border: 1px solid var(--border);
-  &:hover {
-    color: var(--color-branding);
-  }
-}
 </style>