chore: deplace LunaConsole

Author: Dsaquel

src/Repl.vue

@@ -2,8 +2,9 @@
 import SplitPane from './SplitPane.vue'
 import Output from './output/Output.vue'
 import { type Store, useStore } from './store'
-import { computed, provide, toRefs, useTemplateRef } from 'vue'
+import { computed, provide, toRefs, useTemplateRef, watchEffect } from 'vue'
 import {
+  type ConsoleComponentType,
   type EditorComponentType,
   injectKeyPreviewRef,
   injectKeyProps,
@@ -16,6 +17,7 @@ export interface Props {
   theme?: 'dark' | 'light'
   previewTheme?: boolean
   editor: EditorComponentType
+  console?: ConsoleComponentType
   store?: Store
   autoResize?: boolean
   showCompileOutput?: boolean
@@ -57,6 +59,7 @@ const props = withDefaults(defineProps<Props>(), {
   showCompileOutput: true,
   showImportMap: true,
   showTsConfig: true,
+  showConsole: false,
   clearConsole: true,
   layoutReverse: false,
   ssr: false,
@@ -69,6 +72,15 @@ const props = withDefaults(defineProps<Props>(), {
 if (!props.editor) {
   throw new Error('The "editor" prop is now required.')
 }
+watchEffect(() => {
+  if (!!props.showConsole && !props.console)
+    throw new Error(
+      'If you want to enable a console "console" prop is required.',
+    )
+})
+const consoleWrapper = computed<ConsoleComponentType>(
+  () => props.console ?? (() => ({})),
+)
 
 const outputRef = useTemplateRef('output')
 
@@ -79,6 +91,7 @@ const outputSlotName = computed(() => (props.layoutReverse ? 'left' : 'right'))
 
 provide(injectKeyProps, {
   ...toRefs(props),
+  console: consoleWrapper,
   autoSave,
 })
 provide(
@@ -106,6 +119,7 @@ defineExpose({ reload })
         <Output
           ref="output"
           :editor-component="editor"
+          :console-component="consoleWrapper"
           :show-compile-output="props.showCompileOutput"
           :ssr="!!props.ssr"
         />

src/output/LunaConsole.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { inject, onMounted, ref, useTemplateRef, watch } from 'vue'
+import LunaConsole from 'luna-console'
+import { type LogPayload, injectKeyProps } from '../types'
+import 'luna-object-viewer/luna-object-viewer.css'
+import 'luna-data-grid/luna-data-grid.css'
+import 'luna-dom-viewer/luna-dom-viewer.css'
+import 'luna-console/luna-console.css'
+
+const { store, theme } = inject(injectKeyProps)!
+const lunaRef = useTemplateRef('luna-ref')
+const lunaConsole = ref<LunaConsole>()
+
+onMounted(() => {
+  if (!lunaRef.value) return
+  lunaConsole.value = new LunaConsole(lunaRef.value, {
+    theme: theme.value || 'light',
+  })
+  store.value.executeLog = ({ logLevel, data = [] }: LogPayload) => {
+    ;(lunaConsole.value?.[logLevel] as any)?.(...data)
+  }
+})
+
+function clearLunaConsole() {
+  lunaConsole.value?.clear(true)
+}
+
+watch(() => store.value.activeFile.code, clearLunaConsole)
+</script>
+
+<template>
+  <div class="console-container">
+    <div ref="luna-ref" />
+    <button class="clear-btn" @click="clearLunaConsole">clear</button>
+  </div>
+</template>
+
+<style scoped>
+.console-container {
+  height: 100%;
+  width: 100%;
+}
+.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/Output.vue

@@ -1,67 +1,23 @@
 <script setup lang="ts">
 import Preview from './Preview.vue'
 import SplitPane from '../SplitPane.vue'
+import { computed, inject, useTemplateRef } from 'vue'
 import {
-  computed,
-  inject,
-  onMounted,
-  ref,
-  useTemplateRef,
-  watch,
-  type WatchHandle,
-} from 'vue'
-import LunaConsole from 'luna-console'
-import {
+  type ConsoleComponentType,
   type EditorComponentType,
-  type LogPayload,
   type OutputModes,
   injectKeyProps,
 } from '../types'
 
 const props = defineProps<{
   editorComponent: EditorComponentType
+  consoleComponent: ConsoleComponentType
   showCompileOutput?: boolean
   ssr: boolean
 }>()
 
-const { store, showConsole, theme } = inject(injectKeyProps)!
+const { store, showConsole } = 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',
-  })
-  if (!lunaWatcher) {
-    const consoleStyles = [
-      import('luna-object-viewer/luna-object-viewer.css'),
-      import('luna-data-grid/luna-data-grid.css'),
-      import('luna-dom-viewer/luna-dom-viewer.css'),
-      import('luna-console/luna-console.css'),
-    ]
-    Promise.all(consoleStyles)
-    lunaWatcher = watch(() => store.value.activeFile.code, clearLunaConsole)
-  }
-  lunaWatcher.resume()
-}
 
 const modes = computed(() =>
   props.showCompileOutput
@@ -81,17 +37,9 @@ const mode = computed<OutputModes>({
   },
 })
 
-function onLog({ logLevel, data = [] }: LogPayload) {
-  ;(lunaConsole.value?.[logLevel] as any)?.(...data)
-}
-
-function clearLunaConsole() {
-  lunaConsole.value?.clear(true)
-}
-
 function reload() {
   previewRef.value?.reload()
-  clearLunaConsole()
+  //clearLunaConsole()
 }
 
 defineExpose({ reload, previewRef })
@@ -112,16 +60,10 @@ defineExpose({ reload, previewRef })
   <div class="output-container">
     <SplitPane v-if="showConsole" layout="vertical">
       <template #left>
-        <Preview
-          ref="preview"
-          :show="mode === 'preview'"
-          :ssr="ssr"
-          @log="onLog"
-        />
+        <Preview ref="preview" :show="mode === 'preview'" :ssr="ssr" />
       </template>
       <template #right>
-        <div ref="console-container" />
-        <button class="clear-btn" @click="clearLunaConsole">clear</button>
+        <props.consoleComponent />
       </template>
     </SplitPane>
     <Preview v-else ref="preview" :show="mode === 'preview'" :ssr="ssr" />
@@ -166,23 +108,4 @@ 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

@@ -1,13 +1,12 @@
 <script setup lang="ts">
 import { computed, inject, useTemplateRef } from 'vue'
-import { injectKeyProps, SandboxEmits } from '../../src/types'
+import { injectKeyProps } from '../../src/types'
 import Sandbox from './Sandbox.vue'
 
 const props = defineProps<{
   show: boolean
   ssr: boolean
 }>()
-const emit = defineEmits<SandboxEmits>()
 
 const { store, clearConsole, theme, previewTheme, previewOptions } =
   inject(injectKeyProps)!
@@ -34,6 +33,6 @@ defineExpose({
     :preview-options="previewOptions"
     :ssr="props.ssr"
     :clear-console="clearConsole"
-    @log="(p) => emit('log', p)"
+    @log="store.executeLog"
   />
 </template>

src/output/Sandbox.vue

@@ -167,18 +167,16 @@ function createSandbox() {
         } else if (!maybeMsg.includes('%c Cannot clone the message')) {
           runtimeError.value = maybeMsg
         }
-        doLog('warn', log.args)
-      } else if (log.level === 'warn') {
-        if (maybeMsg.toString().includes('[Vue warn]')) {
-          runtimeWarning.value = log.args
-            .join('')
-            .replace(/\[Vue warn\]:/, '')
-            .trim()
-        }
-        doLog('warn', log.args)
-      } else {
-        doLog(log.level || 'log', log.args)
+      } else if (
+        log.level === 'warn' &&
+        maybeMsg.toString().includes('[Vue warn]')
+      ) {
+        runtimeWarning.value = log.args
+          .join('')
+          .replace(/\[Vue warn\]:/, '')
+          .trim()
       }
+      doLog(log.level || 'log', log.args)
     },
     on_console_group: (action: any) => {
       doLog('group', action.label)

src/output/srcdoc.html

@@ -156,7 +156,7 @@
         ;['clear', 'log', 'info', 'dir', 'warn', 'error', 'table'].forEach(
           (level) => {
             const original = console[level]
-            console[level] = async (...args) => {
+            console[level] = (...args) => {
               const msg = args[0]
               if (typeof msg === 'string') {
                 if (

src/store.ts

@@ -16,7 +16,7 @@ import type {
   SFCScriptCompileOptions,
   SFCTemplateCompileOptions,
 } from 'vue/compiler-sfc'
-import type { OutputModes } from './types'
+import type { LogPayload, OutputModes } from './types'
 import type { editor } from 'monaco-editor-core'
 import { type ImportMap, mergeImportMap, useVueImportMap } from './import-map'
 
@@ -48,6 +48,7 @@ export function useStore(
     typescriptVersion = ref('latest'),
     dependencyVersion = ref(Object.create(null)),
     reloadLanguageTools = ref(),
+    executeLog = ref(),
   }: Partial<StoreState> = {},
   serializedState?: string,
 ): ReplStore {
@@ -389,6 +390,7 @@ export function useStore(
     deserialize,
     getFiles,
     setFiles,
+    executeLog,
   })
   return store
 }
@@ -440,6 +442,11 @@ export type StoreState = ToRefs<{
   /** \{ dependencyName: version \} */
   dependencyVersion: Record<string, string>
   reloadLanguageTools?: (() => void) | undefined
+  /**
+   * If you enabled "showConsole" and have a custom "console" then you must provide this function.
+   * @param payload - payload of a console static method output
+   */
+  executeLog?: (payload: LogPayload) => void
 }>
 
 export interface ReplStore extends UnwrapRef<StoreState> {
@@ -463,6 +470,7 @@ export interface ReplStore extends UnwrapRef<StoreState> {
   deserialize(serializedState: string, checkBuiltinImportMap?: boolean): void
   getFiles(): Record<string, string>
   setFiles(newFiles: Record<string, string>, mainFile?: string): Promise<void>
+  executeLog?(payload: LogPayload): void
 }
 
 export type Store = Pick<
@@ -487,6 +495,7 @@ export type Store = Pick<
   | 'renameFile'
   | 'getImportMap'
   | 'getTsConfig'
+  | 'executeLog'
 >
 
 export class File {

src/types.ts

@@ -39,6 +39,8 @@ export interface SandboxEmits {
 }
 export type EditorComponentType = Component<EditorProps>
 
+export type ConsoleComponentType = Component
+
 export type OutputModes = 'preview' | EditorMode
 
 export const injectKeyProps: InjectionKey<