improve console

Author: Dsaquel

pnpm-lock.yaml

@@ -25,6 +25,7 @@ export interface Props {
   showCompileOutput?: boolean
   showImportMap?: boolean
   showTsConfig?: boolean
+  showConsole?: boolean
   clearConsole?: boolean
   layout?: 'horizontal' | 'vertical'
   layoutReverse?: boolean
@@ -132,8 +133,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/Repl.vue

@@ -5,8 +5,14 @@ import Sandbox from './Sandbox.vue'
 
 const props = defineProps<{ show: boolean; ssr: boolean }>()
 
-const { store, clearConsole, theme, previewTheme, previewOptions } =
-  inject(injectKeyProps)!
+const {
+  store,
+  clearConsole,
+  showConsole,
+  theme,
+  previewTheme,
+  previewOptions,
+} = inject(injectKeyProps)!
 
 const sandboxTheme = computed(() =>
   previewTheme.value ? theme.value : undefined,
@@ -29,6 +35,7 @@ defineExpose({
     :theme="sandboxTheme"
     :preview-options="previewOptions"
     :ssr="props.ssr"
+    :show-console="showConsole"
     :clear-console="clearConsole"
   />
 </template>

src/output/Preview.vue

@@ -11,17 +11,21 @@ import {
   watch,
   watchEffect,
 } from 'vue'
+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 type { Store } from '../store'
 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
@@ -42,6 +46,7 @@ const props = withDefaults(defineProps<SandboxProps>(), {
   show: true,
   ssr: false,
   theme: 'light',
+  showConsole: false,
   clearConsole: true,
   previewOptions: () => ({}),
   autoStoreInit: true,
@@ -54,15 +59,26 @@ 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)
+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)
+  }
+})
 
 // reset sandbox when import map changes
 watch(
@@ -157,32 +173,33 @@ function createSandbox() {
       runtimeError.value = 'Uncaught (in promise): ' + error.message
     },
     on_console: (log: any) => {
-      if (log.duplicate) {
-        return
-      }
       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)
       } 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)
+      } else {
+        lunaConsole.log(...log.args)
       }
     },
     on_console_group: (action: any) => {
-      // group_logs(action.label, false);
+      lunaConsole.group(action.label)
     },
     on_console_group_end: () => {
-      // ungroup_logs();
+      lunaConsole.groupEnd()
     },
     on_console_group_collapsed: (action: any) => {
-      // group_logs(action.label, true);
+      lunaConsole.groupCollapsed(action.label)
     },
   })
 
@@ -301,18 +318,33 @@ 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"
@@ -336,4 +368,23 @@ 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>

src/output/Sandbox.vue

@@ -6,8 +6,9 @@
         color-scheme: dark;
       }
       body {
-        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;
       }
     </style>
     <!-- PREVIEW-OPTIONS-HEAD-HTML -->
@@ -152,9 +153,6 @@
             )
           }
         })
-
-        let previous = { level: null, args: null }
-
         ;['clear', 'log', 'info', 'dir', 'warn', 'error', 'table'].forEach(
           (level) => {
             const original = console[level]
@@ -170,28 +168,13 @@
               }
 
               original(...args)
-
-              const stringifiedArgs = stringify(args)
-              if (
-                previous.level === level &&
-                previous.args &&
-                previous.args === stringifiedArgs
-              ) {
+              try {
+                parent.postMessage({ action: 'console', level, args }, '*')
+              } catch (err) {
                 parent.postMessage(
-                  { action: 'console', level, duplicate: true },
+                  { action: 'console', level, args: args.map(toString) },
                   '*',
                 )
-              } else {
-                previous = { level, args: stringifiedArgs }
-
-                try {
-                  parent.postMessage({ action: 'console', level, args }, '*')
-                } catch (err) {
-                  parent.postMessage(
-                    { action: 'console', level, args: args.map(toString) },
-                    '*',
-                  )
-                }
               }
             }
           },