feat(Output): add console

package.json

@@ -110,6 +110,10 @@
     "vite-plugin-dts": "^4.5.0",
     "vscode-uri": "^3.1.0",
     "vue": "^3.5.13",
-    "vue-tsc": "~2.2.2"
+    "vue-tsc": "~2.2.2",
+    "luna-console": "^1.3.5",
+    "luna-data-grid": "^1.3.0",
+    "luna-dom-viewer": "^1.4.0",
+    "luna-object-viewer": "^0.3.1"
   }
 }

src/Repl.vue

@@ -9,6 +9,7 @@ import {
   injectKeyProps,
 } from './types'
 import EditorContainer from './editor/EditorContainer.vue'
+
 import type * as monaco from 'monaco-editor-core'
 
 export interface Props {
@@ -20,6 +21,7 @@ export interface Props {
   showCompileOutput?: boolean
   showImportMap?: boolean
   showTsConfig?: boolean
+  showConsole?: boolean
   clearConsole?: boolean
   layout?: 'horizontal' | 'vertical'
   layoutReverse?: boolean
@@ -127,8 +129,9 @@ defineExpose({ reload })
   margin: 0;
   overflow: hidden;
   font-size: 13px;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
-    Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  font-family:
+    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
+    Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
   background-color: var(--bg-soft);
 }
 

src/output/Output.vue

@@ -1,8 +1,19 @@
 <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 LogPayload,
   type OutputModes,
   injectKeyProps,
 } from '../types'
@@ -13,8 +24,45 @@ 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',
+  })
+  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
     ? (['preview', 'js', 'css', 'ssr'] as const)
@@ -33,8 +81,17 @@ 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()
 }
 
 defineExpose({ reload, previewRef })
@@ -53,7 +110,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"
+          :show="mode === 'preview'"
+          :ssr="ssr"
+          @log="onLog"
+        />
+      </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 +166,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

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

src/output/Sandbox.vue

@@ -15,8 +15,7 @@ import srcdoc from './srcdoc.html?raw'
 import { PreviewProxy } from './PreviewProxy'
 import { compileModulesForPreview } from './moduleCompiler'
 import type { Store } from '../store'
-import { injectKeyProps } from '../types'
-
+import { injectKeyProps, type LogLevel, type SandboxEmits } from '../types'
 export interface SandboxProps {
   store: Store
   show?: boolean
@@ -46,6 +45,9 @@ const props = withDefaults(defineProps<SandboxProps>(), {
   previewOptions: () => ({}),
   autoStoreInit: true,
 })
+
+const emit = defineEmits<SandboxEmits>()
+
 const { store, theme, clearConsole, previewOptions } = toRefs(props)
 
 const keyProps = inject(injectKeyProps)
@@ -130,7 +132,8 @@ function createSandbox() {
     )
   sandbox.srcdoc = sandboxSrc
   containerRef.value?.appendChild(sandbox)
-
+  const doLog = (logLevel: LogLevel, data?: any) =>
+    emit('log', { logLevel, data })
   proxy = new PreviewProxy(sandbox, {
     on_fetch_progress: (progress: any) => {
       // pending_imports = progress;
@@ -157,32 +160,34 @@ function createSandbox() {
       runtimeError.value = 'Uncaught (in promise): ' + error.message
     },
     on_console: (log: any) => {
-      if (log.duplicate) {
-        return
-      }
+      const maybeMsg = log.args[0]
       if (log.level === 'error') {
-        if (log.args[0] instanceof Error) {
-          runtimeError.value = log.args[0].message
-        } else {
-          runtimeError.value = log.args[0]
+        if (maybeMsg instanceof Error) {
+          runtimeError.value = maybeMsg.message
+        } else if (!maybeMsg.includes('%c Cannot clone the message')) {
+          runtimeError.value = maybeMsg
         }
+        doLog('warn', log.args)
       } else if (log.level === 'warn') {
-        if (log.args[0].toString().includes('[Vue 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)
       }
     },
     on_console_group: (action: any) => {
-      // group_logs(action.label, false);
+      doLog('group', action.label)
     },
     on_console_group_end: () => {
-      // ungroup_logs();
+      doLog('groupEnd')
     },
     on_console_group_collapsed: (action: any) => {
-      // group_logs(action.label, true);
+      doLog('groupCollapsed', action.label)
     },
   })
 
@@ -312,12 +317,7 @@ defineExpose({ reload, container: containerRef })
 </script>
 
 <template>
-  <div
-    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)"