+
()
-const { store } = inject(injectKeyProps)!
+const { store, showConsole } = inject(injectKeyProps)!
const previewRef = useTemplateRef('preview')
const modes = computed(() => {
const outputModes: OutputModes[] = ['preview']
@@ -51,6 +57,9 @@ function openSourceMap() {
function reload() {
previewRef.value?.reload()
+ store.value.clearConsole?.()
+
+
}
defineExpose({ reload, previewRef })
@@ -69,7 +78,15 @@ defineExpose({ reload, previewRef })
-
+
+
+
+
+
+
+
+
+
diff --git a/packages/vue-repl/src/output/Sandbox.vue b/packages/vue-repl/src/output/Sandbox.vue
index c62f480..8c969f0 100644
--- a/packages/vue-repl/src/output/Sandbox.vue
+++ b/packages/vue-repl/src/output/Sandbox.vue
@@ -15,7 +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 { type LogLevel, type SandboxEmits, injectKeyProps } from '../types'
import { getVersions, isVaporSupported } from '../import-map'
export interface SandboxProps {
@@ -47,6 +47,10 @@ const props = withDefaults(defineProps
(), {
previewOptions: () => ({}),
autoStoreInit: true,
})
+
+const emit = defineEmits()
+
+
const { store, theme, clearConsole, previewOptions } = toRefs(props)
const keyProps = inject(injectKeyProps)
@@ -132,6 +136,9 @@ 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,33 +164,33 @@ function createSandbox() {
}
runtimeError.value = 'Uncaught (in promise): ' + error.message
},
- on_console: (log: any) => {
- if (log.duplicate) {
- return
- }
+ on_console: (log: any) => {
+ 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]
- }
- } else if (log.level === 'warn') {
- if (log.args[0].toString().includes('[Vue warn]')) {
- runtimeWarning.value = log.args
- .join('')
- .replace(/\[Vue warn\]:/, '')
- .trim()
+ if (maybeMsg instanceof Error) {
+ runtimeError.value = maybeMsg.message
+ } else if (!maybeMsg?.startsWith('[vue-repl]')) {
+ runtimeError.value = maybeMsg
}
+ } 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) => {
- // 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)
},
})
@@ -348,12 +355,7 @@ defineExpose({ reload, container: containerRef })
-
+
+import { inject, nextTick, 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-dom-viewer/luna-dom-viewer.css'
+import 'luna-data-grid/luna-data-grid.css'
+import 'luna-console/luna-console.css'
+import toEl from 'licia/toEl'
+
+
+const { store, theme } = inject(injectKeyProps)!
+const lunaRef = useTemplateRef('luna-ref')
+const lunaConsole = ref()
+
+onMounted(() => {
+ if (!lunaRef.value) return
+ lunaConsole.value = new LunaConsole(lunaRef.value, {
+ theme: theme.value || 'light',
+ })
+ store.value.executeLog = ({ logLevel, data = [] }: LogPayload) => {
+ const deserialized = data.map(deserializeMessage)
+ ;(lunaConsole.value?.[logLevel] as any)?.(...deserialized)
+ // Ensure theme is applied after log (for late-rendered viewers)
+ updateLunaThemeClass(theme.value || 'light')
+ }
+ store.value.clearConsole = clearLunaConsole
+})
+
+// Watch for theme changes and update LunaConsole theme reactively
+watch(
+ () => theme.value,
+ (newTheme) => {
+ if (lunaConsole.value) {
+ lunaConsole.value.setOption('theme', newTheme || 'light')
+ // Update theme class on root and sub-viewers
+ updateLunaThemeClass(newTheme || 'light')
+ }
+ },
+ { immediate: true }
+)
+
+async function updateLunaThemeClass(theme: string) {
+ // Helper to update theme classes
+ function applyTheme() {
+ const root = lunaRef.value
+ if (!root) return
+ root.classList.remove('luna-console-theme-dark', 'luna-console-theme-light')
+ root.classList.add(`luna-console-theme-${theme}`)
+
+ const viewerTypes = ['object-viewer', 'dom-viewer', 'data-grid']
+ for (const type of viewerTypes) {
+ // Update theme class on all theme-marked elements
+ const themeEls = root.querySelectorAll(`[class*="luna-${type}-theme-"]`)
+ themeEls.forEach(el => {
+ el.classList.remove(`luna-${type}-theme-dark`, `luna-${type}-theme-light`)
+ el.classList.add(`luna-${type}-theme-${theme}`)
+ })
+ }
+ }
+ // Run immediately
+ applyTheme()
+ // Run again after DOM updates using Vue's nextTick
+ await nextTick()
+ applyTheme()
+}
+
+function clearLunaConsole() {
+ lunaConsole.value?.clear(true)
+}
+
+// maybe make this configurable, but don't do it by default
+// watch(() => store.value.activeFile.code, clearLunaConsole)
+
+/**
+ * Lossless deserialization:
+ * - Recreates primitives as-is
+ * - Returns enriched objects for complex types (with __type metadata)
+ * - Keeps outerHTML, function source, accessor info, etc.
+ */
+function deserializeMessage(arg: any): any {
+ if (arg === null || arg === undefined) return arg
+ if (typeof arg !== 'object' || !arg.__type) return arg
+
+ switch (arg.__type) {
+ case 'undefined':
+ return undefined
+
+ case 'function': {
+ // Approximated with a Function constructor (non-invocable stub)
+ const fn = new Function(`/* [Function ${arg.name}] */`)
+ ; (fn as any).__isStub = true
+ ; (fn as any).__preview = `[Function ${arg.name}]${arg.isNative ? ' [native]' : ''}`
+ return fn
+ }
+
+ case 'symbol':
+ return Symbol(arg.description ?? '')
+
+ case 'bigint':
+ try {
+ return BigInt(arg.value)
+ } catch {
+ return Object(`BigInt(${arg.value})`) // fallback object wrapper
+ }
+
+ case 'date':
+ return arg.invalid ? new Date('Invalid Date') : new Date(arg.value).toString()
+
+ case 'regexp':
+ return new RegExp(arg.source, arg.flags)
+
+ case 'error': {
+ const e = new Error(arg.message)
+ e.name = arg.name
+ ; (e as any).stack = arg.stack
+ return e
+ }
+
+ case 'dom': {
+ if (arg.outerHTML) {
+ const el = toEl(arg.outerHTML)
+ Object.defineProperty(el, '__preview', {
+ value: arg.outerHTML.replace(/\n/g, ''), // one-liner preview
+ enumerable: false,
+ })
+ return el
+ }
+ if (arg.nodeType === 3 && arg.textContent) {
+ return document.createTextNode(arg.textContent)
+ }
+ return `[DOM ${arg.tagName || 'Unknown'}]`
+ }
+
+ case 'vue_component':
+ return `[VueComponent ${arg.name}]`
+
+ case 'array': {
+ const items = arg.items?.map(deserializeMessage) ?? []
+ if (arg.truncated) {
+ items.push(`...and ${arg.truncated} more items`)
+ }
+ return items
+ }
+
+ case 'object': {
+ const out: Record = {}
+ for (const key in arg.properties) {
+ const prop = arg.properties[key]
+ if (prop && 'value' in prop) {
+ out[key] = deserializeMessage(prop.value)
+ }
+ }
+ if (arg.truncatedProperties) {
+ out['__truncated__'] = `${arg.truncatedProperties} more properties`
+ }
+ // Method, not property
+ Object.defineProperty(out, 'toString', {
+ value: () => `[Object ${arg.constructor}]`,
+ enumerable: false,
+ })
+ return out
+ }
+
+ case 'circular':
+ return `[Circular ${arg.path ?? ''}]`
+
+ case 'accessor':
+ return `[Getter/Setter]`
+
+ default:
+ return `[Unrecognized ${arg.__type}]`
+ }
+}
+
+
+
+
+
+ Console
+
+
+
+