chore: deplace console

Author: Dsaquel

src/output/Output.vue

@@ -13,6 +13,7 @@ import {
 import LunaConsole from 'luna-console'
 import {
   type EditorComponentType,
+  type LogPayload,
   type OutputModes,
   injectKeyProps,
 } from '../types'
@@ -71,6 +72,10 @@ const mode = computed<OutputModes>({
   },
 })
 
+function onLog({ logLevel, data = [] }: LogPayload) {
+  ;(lunaConsole.value?.[logLevel] as any)?.(...data)
+}
+
 function clearLunaConsole() {
   lunaConsole.value?.clear(true)
 }
@@ -100,9 +105,9 @@ defineExpose({ reload, previewRef })
       <template #left>
         <Preview
           ref="preview"
-          :luna-console="lunaConsole"
           :show="mode === 'preview'"
           :ssr="ssr"
+          @log="onLog"
         />
       </template>
       <template #right>

src/output/Preview.vue

@@ -1,14 +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'
-import LunaConsole from 'luna-console'
 
 const props = defineProps<{
   show: boolean
   ssr: boolean
-  lunaConsole?: LunaConsole
 }>()
+const emit = defineEmits<SandboxEmits>()
 
 const { store, clearConsole, theme, previewTheme, previewOptions } =
   inject(injectKeyProps)!
@@ -35,6 +34,6 @@ defineExpose({
     :preview-options="previewOptions"
     :ssr="props.ssr"
     :clear-console="clearConsole"
-    :luna-console="props.lunaConsole"
+    @log="(p) => emit('log', p)"
   />
 </template>

src/output/Sandbox.vue

@@ -11,12 +11,11 @@ import {
   watch,
   watchEffect,
 } from 'vue'
-import LunaConsole from 'luna-console'
 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
@@ -36,7 +35,6 @@ export interface SandboxProps {
   }
   /** @default true */
   autoStoreInit?: boolean
-  lunaConsole?: LunaConsole
 }
 
 const props = withDefaults(defineProps<SandboxProps>(), {
@@ -47,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)
@@ -131,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;
@@ -158,34 +160,34 @@ function createSandbox() {
       runtimeError.value = 'Uncaught (in promise): ' + error.message
     },
     on_console: (log: any) => {
-      const lc = props.lunaConsole
+      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
         }
-        lc?.error(...log.args)
+        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()
         }
-        lc?.warn(...log.args)
+        doLog('warn', log.args)
       } else {
-        lc?.log(...log.args)
+        doLog(log.level || 'log', log.args)
       }
     },
     on_console_group: (action: any) => {
-      props.lunaConsole?.group(action.label)
+      doLog('group', action.label)
     },
     on_console_group_end: () => {
-      props.lunaConsole?.groupEnd()
+      doLog('groupEnd')
     },
     on_console_group_collapsed: (action: any) => {
-      props.lunaConsole?.groupCollapsed(action.label)
+      doLog('groupCollapsed', 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] = (...args) => {
+            console[level] = async (...args) => {
               const msg = args[0]
               if (typeof msg === 'string') {
                 if (
@@ -166,16 +166,23 @@
                   return
                 }
               }
-
               original(...args)
-              try {
-                parent.postMessage({ action: 'console', level, args }, '*')
-              } catch (err) {
-                parent.postMessage(
-                  { action: 'console', level, args: args.map(toString) },
-                  '*',
-                )
-              }
+
+              const clonnable = await new Promise((res) => {
+                try {
+                  structuredClone(args)
+                  res(true)
+                } catch {
+                  res(false)
+                }
+              })
+
+              if (!clonnable)
+                args = [
+                  '%c Cannot clone the message, please open the devtool to see corretly this log. Supported types are listed here: https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Structured_clone_algorithm#javascript_types',
+                  'color: #fb2c36',
+                ]
+              parent.postMessage({ action: 'console', level, args }, '*')
             }
           },
         )
@@ -208,7 +215,7 @@
             parent.postMessage(
               {
                 action: 'console',
-                level: 'system-log',
+                level: 'log',
                 args: [`${label}: ${now - timers.get(label)}ms`],
               },
               '*',
@@ -217,7 +224,7 @@
             parent.postMessage(
               {
                 action: 'console',
-                level: 'system-warn',
+                level: 'warn',
                 args: [`Timer '${label}' does not exist`],
               },
               '*',
@@ -231,7 +238,7 @@
             parent.postMessage(
               {
                 action: 'console',
-                level: 'system-log',
+                level: 'log',
                 args: [`${label}: ${now - timers.get(label)}ms`],
               },
               '*',
@@ -240,7 +247,7 @@
             parent.postMessage(
               {
                 action: 'console',
-                level: 'system-warn',
+                level: 'warn',
                 args: [`Timer '${label}' does not exist`],
               },
               '*',
@@ -270,8 +277,8 @@
           parent.postMessage(
             {
               action: 'console',
-              level: 'system-log',
-              args: `${label}: ${counter.get(label)}`,
+              level: 'log',
+              args: [`${label}: ${counter.get(label)}`],
             },
             '*',
           )
@@ -285,8 +292,8 @@
             parent.postMessage(
               {
                 action: 'console',
-                level: 'system-warn',
-                args: `Count for '${label}' does not exist`,
+                level: 'warn',
+                args: [`Count for '${label}' does not exist`],
               },
               '*',
             )

src/types.ts

@@ -8,9 +8,35 @@ export interface EditorProps {
   readonly?: boolean
   mode?: EditorMode
 }
+export type LogLevel =
+  | 'log'
+  | 'error'
+  | 'warn'
+  | 'group'
+  | 'groupCollapsed'
+  | 'groupEnd'
+  | 'assert'
+  | 'count'
+  | 'countReset'
+  | 'debug'
+  | 'dir'
+  | 'info'
+  | 'table'
+  | 'time'
+  | 'timeEnd'
+  | 'timeLog'
+  | 'warn'
+
+export interface LogPayload {
+  logLevel: LogLevel
+  data?: any[]
+}
 export interface EditorEmits {
   (e: 'change', code: string): void
 }
+export interface SandboxEmits {
+  (e: 'log', payload: LogPayload): void
+}
 export type EditorComponentType = Component<EditorProps>
 
 export type OutputModes = 'preview' | EditorMode