Skip to content

Commit 4e6d0af

Browse files
DsaquelDsaquel
committed
chore: deplace console
1 parent 0495953 commit 4e6d0af

File tree

5 files changed

+78
-39
lines changed

5 files changed

+78
-39
lines changed

‎src/output/Output.vue‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import {
1313
import LunaConsole from 'luna-console'
1414
import {
1515
type EditorComponentType,
16+
type LogPayload,
1617
type OutputModes,
1718
injectKeyProps,
1819
} from '../types'
@@ -71,6 +72,10 @@ const mode = computed<OutputModes>({
7172
},
7273
})
7374
75+
function onLog({ logLevel, data = [] }: LogPayload) {
76+
;(lunaConsole.value?.[logLevel] as any)?.(...data)
77+
}
78+
7479
function clearLunaConsole() {
7580
lunaConsole.value?.clear(true)
7681
}
@@ -100,9 +105,9 @@ defineExpose({ reload, previewRef })
100105
<template #left>
101106
<Preview
102107
ref="preview"
103-
:luna-console="lunaConsole"
104108
:show="mode === 'preview'"
105109
:ssr="ssr"
110+
@log="onLog"
106111
/>
107112
</template>
108113
<template #right>

‎src/output/Preview.vue‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,13 @@
11
<script setup lang="ts">
22
import { computed, inject, useTemplateRef } from 'vue'
3-
import { injectKeyProps } from '../../src/types'
3+
import { injectKeyProps, SandboxEmits } from '../../src/types'
44
import Sandbox from './Sandbox.vue'
5-
import LunaConsole from 'luna-console'
65
76
const props = defineProps<{
87
show: boolean
98
ssr: boolean
10-
lunaConsole?: LunaConsole
119
}>()
10+
const emit = defineEmits<SandboxEmits>()
1211
1312
const { store, clearConsole, theme, previewTheme, previewOptions } =
1413
inject(injectKeyProps)!
@@ -35,6 +34,6 @@ defineExpose({
3534
:preview-options="previewOptions"
3635
:ssr="props.ssr"
3736
:clear-console="clearConsole"
38-
:luna-console="props.lunaConsole"
37+
@log="(p) => emit('log', p)"
3938
/>
4039
</template>

‎src/output/Sandbox.vue‎

Lines changed: 18 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,11 @@ import {
1111
watch,
1212
watchEffect,
1313
} from 'vue'
14-
import LunaConsole from 'luna-console'
1514
import srcdoc from './srcdoc.html?raw'
1615
import { PreviewProxy } from './PreviewProxy'
1716
import { compileModulesForPreview } from './moduleCompiler'
1817
import type { Store } from '../store'
19-
import { injectKeyProps } from '../types'
18+
import { injectKeyProps, type LogLevel, type SandboxEmits } from '../types'
2019
export interface SandboxProps {
2120
store: Store
2221
show?: boolean
@@ -36,7 +35,6 @@ export interface SandboxProps {
3635
}
3736
/** @default true */
3837
autoStoreInit?: boolean
39-
lunaConsole?: LunaConsole
4038
}
4139
4240
const props = withDefaults(defineProps<SandboxProps>(), {
@@ -47,6 +45,9 @@ const props = withDefaults(defineProps<SandboxProps>(), {
4745
previewOptions: () => ({}),
4846
autoStoreInit: true,
4947
})
48+
49+
const emit = defineEmits<SandboxEmits>()
50+
5051
const { store, theme, clearConsole, previewOptions } = toRefs(props)
5152
5253
const keyProps = inject(injectKeyProps)
@@ -131,7 +132,8 @@ function createSandbox() {
131132
)
132133
sandbox.srcdoc = sandboxSrc
133134
containerRef.value?.appendChild(sandbox)
134-
135+
const doLog = (logLevel: LogLevel, data?: any) =>
136+
emit('log', { logLevel, data })
135137
proxy = new PreviewProxy(sandbox, {
136138
on_fetch_progress: (progress: any) => {
137139
// pending_imports = progress;
@@ -158,34 +160,34 @@ function createSandbox() {
158160
runtimeError.value = 'Uncaught (in promise): ' + error.message
159161
},
160162
on_console: (log: any) => {
161-
const lc = props.lunaConsole
163+
const maybeMsg = log.args[0]
162164
if (log.level === 'error') {
163-
if (log.args[0] instanceof Error) {
164-
runtimeError.value = log.args[0].message
165-
} else {
166-
runtimeError.value = log.args[0]
165+
if (maybeMsg instanceof Error) {
166+
runtimeError.value = maybeMsg.message
167+
} else if (!maybeMsg.includes('%c Cannot clone the message')) {
168+
runtimeError.value = maybeMsg
167169
}
168-
lc?.error(...log.args)
170+
doLog('warn', log.args)
169171
} else if (log.level === 'warn') {
170-
if (log.args[0].toString().includes('[Vue warn]')) {
172+
if (maybeMsg.toString().includes('[Vue warn]')) {
171173
runtimeWarning.value = log.args
172174
.join('')
173175
.replace(/\[Vue warn\]:/, '')
174176
.trim()
175177
}
176-
lc?.warn(...log.args)
178+
doLog('warn', log.args)
177179
} else {
178-
lc?.log(...log.args)
180+
doLog(log.level || 'log', log.args)
179181
}
180182
},
181183
on_console_group: (action: any) => {
182-
props.lunaConsole?.group(action.label)
184+
doLog('group', action.label)
183185
},
184186
on_console_group_end: () => {
185-
props.lunaConsole?.groupEnd()
187+
doLog('groupEnd')
186188
},
187189
on_console_group_collapsed: (action: any) => {
188-
props.lunaConsole?.groupCollapsed(action.label)
190+
doLog('groupCollapsed', action.label)
189191
},
190192
})
191193

‎src/output/srcdoc.html‎

Lines changed: 25 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -156,7 +156,7 @@
156156
;['clear', 'log', 'info', 'dir', 'warn', 'error', 'table'].forEach(
157157
(level) => {
158158
const original = console[level]
159-
console[level] = (...args) => {
159+
console[level] = async (...args) => {
160160
const msg = args[0]
161161
if (typeof msg === 'string') {
162162
if (
@@ -166,16 +166,23 @@
166166
return
167167
}
168168
}
169-
170169
original(...args)
171-
try {
172-
parent.postMessage({ action: 'console', level, args }, '*')
173-
} catch (err) {
174-
parent.postMessage(
175-
{ action: 'console', level, args: args.map(toString) },
176-
'*',
177-
)
178-
}
170+
171+
const clonnable = await new Promise((res) => {
172+
try {
173+
structuredClone(args)
174+
res(true)
175+
} catch {
176+
res(false)
177+
}
178+
})
179+
180+
if (!clonnable)
181+
args = [
182+
'%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',
183+
'color: #fb2c36',
184+
]
185+
parent.postMessage({ action: 'console', level, args }, '*')
179186
}
180187
},
181188
)
@@ -208,7 +215,7 @@
208215
parent.postMessage(
209216
{
210217
action: 'console',
211-
level: 'system-log',
218+
level: 'log',
212219
args: [`${label}: ${now - timers.get(label)}ms`],
213220
},
214221
'*',
@@ -217,7 +224,7 @@
217224
parent.postMessage(
218225
{
219226
action: 'console',
220-
level: 'system-warn',
227+
level: 'warn',
221228
args: [`Timer '${label}' does not exist`],
222229
},
223230
'*',
@@ -231,7 +238,7 @@
231238
parent.postMessage(
232239
{
233240
action: 'console',
234-
level: 'system-log',
241+
level: 'log',
235242
args: [`${label}: ${now - timers.get(label)}ms`],
236243
},
237244
'*',
@@ -240,7 +247,7 @@
240247
parent.postMessage(
241248
{
242249
action: 'console',
243-
level: 'system-warn',
250+
level: 'warn',
244251
args: [`Timer '${label}' does not exist`],
245252
},
246253
'*',
@@ -270,8 +277,8 @@
270277
parent.postMessage(
271278
{
272279
action: 'console',
273-
level: 'system-log',
274-
args: `${label}: ${counter.get(label)}`,
280+
level: 'log',
281+
args: [`${label}: ${counter.get(label)}`],
275282
},
276283
'*',
277284
)
@@ -285,8 +292,8 @@
285292
parent.postMessage(
286293
{
287294
action: 'console',
288-
level: 'system-warn',
289-
args: `Count for '${label}' does not exist`,
295+
level: 'warn',
296+
args: [`Count for '${label}' does not exist`],
290297
},
291298
'*',
292299
)

‎src/types.ts‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,35 @@ export interface EditorProps {
88
readonly?: boolean
99
mode?: EditorMode
1010
}
11+
export type LogLevel =
12+
| 'log'
13+
| 'error'
14+
| 'warn'
15+
| 'group'
16+
| 'groupCollapsed'
17+
| 'groupEnd'
18+
| 'assert'
19+
| 'count'
20+
| 'countReset'
21+
| 'debug'
22+
| 'dir'
23+
| 'info'
24+
| 'table'
25+
| 'time'
26+
| 'timeEnd'
27+
| 'timeLog'
28+
| 'warn'
29+
30+
export interface LogPayload {
31+
logLevel: LogLevel
32+
data?: any[]
33+
}
1134
export interface EditorEmits {
1235
(e: 'change', code: string): void
1336
}
37+
export interface SandboxEmits {
38+
(e: 'log', payload: LogPayload): void
39+
}
1440
export type EditorComponentType = Component<EditorProps>
1541

1642
export type OutputModes = 'preview' | EditorMode

0 commit comments

Comments
 (0)