From ebbc4625252fb4b76c5cabb77d5bfe8be4b5517a Mon Sep 17 00:00:00 2001
From: Dsaquel <noblet.ouwaysgta5@gmail.com>
Date: Fri, 20 Dec 2024 23:00:30 +0100
Subject: [PATCH 01/17] feat: init console :construction:

---
 src/output/Console.vue     |  20 +++++
 src/output/ConsoleLine.vue | 157 +++++++++++++++++++++++++++++++++++++
 src/output/JsonNode.vue    |  55 +++++++++++++
 src/output/JsonTree.vue    |  29 +++++++
 src/output/Preview.vue     |  41 +++++++---
 src/output/PreviewProxy.ts |   2 +
 src/types.ts               |   9 +++
 src/utils.ts               |  13 +++
 8 files changed, 314 insertions(+), 12 deletions(-)
 create mode 100644 src/output/Console.vue
 create mode 100644 src/output/ConsoleLine.vue
 create mode 100644 src/output/JsonNode.vue
 create mode 100644 src/output/JsonTree.vue

diff --git a/src/output/Console.vue b/src/output/Console.vue
new file mode 100644
index 00000000..1ac4605a
--- /dev/null
+++ b/src/output/Console.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { CommandData } from '../types';
+import ConsoleLine from './ConsoleLine.vue';
+
+
+const props = defineProps<{ logs: CommandData[] }>()
+
+</script>
+
+<template>
+  <div class="container">
+    <ConsoleLine v-for="(log, i) in logs" :log="log" :key="i" />
+  </div>
+</template>
+
+<style>
+.container {
+  position: relative;
+}
+</style>
diff --git a/src/output/ConsoleLine.vue b/src/output/ConsoleLine.vue
new file mode 100644
index 00000000..c6da9c18
--- /dev/null
+++ b/src/output/ConsoleLine.vue
@@ -0,0 +1,157 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { CommandData } from '../types';
+import JsonTree from './JsonTree.vue';
+
+defineProps<{ log: CommandData }>()
+const level = ref(1)
+//	function toggleGroupCollapse() {
+//		log.collapsed = !log.collapsed;
+//	}
+</script>
+
+<template>
+  <div 
+    v-if="log.level === 'table'"
+  >
+    <ConsoleTable :data="log.args[0]" :columns="log.args[1]" />
+  </div>
+  <div 
+    class="log console-{{ log.level }}" 
+    :style="{ paddingLeft: level * 15 + 'px' }" 
+  >
+    <span v-if="log.count && log.count > 1" class="count">{{ log.count }}x</span>
+
+    <div 
+      v-if="log.level === 'trace' || log.level === 'assert'" 
+      class="arrow" 
+    >▶</div>
+
+    <span v-if="log.level === 'assert'" class="assert">Assertion failed:</span>
+
+    <span v-if="log.level === 'clear'" class="info">Console was cleared</span>
+    <span v-if="log.level === 'unclonable'" class="info error">Message could not be cloned. Open devtools to see it</span>
+    <div v-if="log.level === 'group'" class="arrow" :class="{ expand: !log.collapsed }" @click="toggleGroupCollapse">▶</div>
+    <span v-if="log.level === 'group'" class="title">{{ log.label }}</span>
+
+    <span v-if="log.level.startsWith('system')">
+      <template v-for="arg in log.args">
+        {{ arg }}
+      </template>
+    </span>
+
+    <JSONNode v-if="log.level === 'table'" :value="log.args[0]" />
+    <template v-else>
+      <template v-for="arg in log.args">
+        <JsonTree :data="arg" />
+      </template>
+    </template>
+
+    <div 
+      v-for="(_, idx) in new Array(level - 1)" 
+      class="outline" 
+      :style="{ left: idx * 15 + 15 + 'px' }" 
+    />
+  </div>
+
+</template>
+
+<style>
+	.log {
+		border-bottom: 1px solid #eee;
+		padding: 5px 10px 0px;
+		display: flex;
+		position: relative;
+		font-size: 12px;
+		font-family: var(--font-mono);
+	}
+
+	.log > :global(*) {
+		margin-right: 10px;
+		font-family: var(--font-mono);
+	}
+
+	.console-warn, .console-system-warn {
+		background: #fffbe6;
+		border-color: #fff4c4;
+	}
+
+	.console-error, .console-assert {
+		background: #fff0f0;
+		border-color: #fed6d7;
+	}
+
+	.console-group, .arrow {
+		cursor: pointer;
+		user-select: none;
+	}
+
+	.console-trace, .console-assert {
+		border-bottom: none;
+	}
+
+	.console-assert + .trace {
+		background: #fff0f0;
+		border-color: #fed6d7;
+	}
+
+	.trace {
+		border-bottom: 1px solid #eee;
+		font-size: 12px;
+		font-family: var(--font-mono);
+		padding: 4px 0 2px;
+	}
+
+	.trace > :global(div) {
+		margin-left: 15px;
+	}
+
+	.count {
+		color: #999;
+		font-size: 12px;
+		line-height: 1.2;
+	}
+
+	.info {
+		color: #666;
+		font-family: var(--font) !important;
+		font-size: 12px;
+	}
+
+	.error {
+		color: #da106e; /* todo make this a var */
+	}
+
+	.outline {
+		border-left: 1px solid #9c9cab;
+		position: absolute;
+		top: 0;
+		bottom: -1px;
+	}
+
+	.arrow {
+		position: absolute;
+		font-size: 0.6em;
+		transition: 150ms;
+		transform-origin: 50% 50%;
+		transform: translateY(1px) translateX(-50%);
+	}
+
+	.arrow.expand {
+		transform: translateY(1px) translateX(-50%) rotateZ(90deg);
+	}
+
+	.title {
+		font-family: var(--font-mono);
+		font-size: 13px;
+		font-weight: bold;
+		padding-left: 11px;
+		height: 19px;
+	}
+
+	.assert {
+		padding-left: 11px;
+		font-weight: bold;
+		color: #da106e;
+	}
+</style>
diff --git a/src/output/JsonNode.vue b/src/output/JsonNode.vue
new file mode 100644
index 00000000..ff1b8aa0
--- /dev/null
+++ b/src/output/JsonNode.vue
@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import { word } from '../utils';
+defineProps({
+  key: {
+    key: String,
+    required: true,
+  },
+  value: Object as any,
+  marginOffset: {
+    type: Number,
+    default: 0,
+  },
+  open: Boolean,
+})
+</script>
+
+<template>
+
+  <div class="tree" :style="`margin-left: ${marginOffset}rem`">
+    <span v-if="open && key">
+      <
+    </span>
+    <span v-else-if="!open && key">
+      >
+    </span>
+    <span v-if="key" class="tree__title">
+      {{ key }}:
+    </span>
+    <span>
+      {{typeof value === 'object' && value ? word(Object.keys(value).length, 'property', 'properties') : value}}
+    </span>
+  </div>
+
+</template>
+
+<style>
+	.tree {
+    color: white;
+    cursor: 'pointer';
+    user-select: none;
+		margin-bottom: 1em;
+		display: flex;
+    align-items: center;
+		gap: 0.2em;
+	}
+
+	.tree__title{
+		font-weight: 500;
+	}
+
+	.block{
+		display:block;
+	}
+</style>
+
diff --git a/src/output/JsonTree.vue b/src/output/JsonTree.vue
new file mode 100644
index 00000000..6cb9229c
--- /dev/null
+++ b/src/output/JsonTree.vue
@@ -0,0 +1,29 @@
+
+<script setup lang="ts">
+import { computed, ref, type PropType } from 'vue'
+import JsonNode from './JsonNode.vue';
+import { parse } from '../utils';
+
+const props = defineProps({
+  key: {
+    key: String,
+    default: 'root',
+  },
+  data: Object as PropType<Record<string, any>>,
+  marginOffset: {
+    type: Number,
+    default: 1,
+  }
+})
+
+const open = ref(false)
+
+const entries = computed(() => parse(props.data))
+</script>
+
+<template>
+  <JsonNode :key="key" :value="data" :margin-offset="marginOffset" />
+  <template v-if="entries && open">
+    <JsonTree v-for="[k, v] in entries" :key="k" :data="v" :margin-offset="marginOffset + 1" />
+  </template>
+</template>
diff --git a/src/output/Preview.vue b/src/output/Preview.vue
index 19b0e93c..070958bb 100644
--- a/src/output/Preview.vue
+++ b/src/output/Preview.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import SplitPane from '../SplitPane.vue'
 import Message from '../Message.vue'
 import {
   type WatchStopHandle,
@@ -13,7 +14,8 @@ import {
 import srcdoc from './srcdoc.html?raw'
 import { PreviewProxy } from './PreviewProxy'
 import { compileModulesForPreview } from './moduleCompiler'
-import { injectKeyProps } from '../../src/types'
+import { CommandData, injectKeyProps } from '../../src/types'
+import Console from './Console.vue'
 
 const props = defineProps<{ show: boolean; ssr: boolean }>()
 
@@ -23,6 +25,7 @@ const { store, clearConsole, theme, previewTheme, previewOptions } =
 const containerRef = useTemplateRef('container')
 const runtimeError = ref<string>()
 const runtimeWarning = ref<string>()
+const logs = ref<CommandData[]>([])
 
 let sandbox: HTMLIFrameElement
 let proxy: PreviewProxy
@@ -146,6 +149,8 @@ function createSandbox() {
             .replace(/\[Vue warn\]:/, '')
             .trim()
         }
+      } else {
+        push_logs(log)
       }
     },
     on_console_group: (action: any) => {
@@ -159,6 +164,11 @@ function createSandbox() {
     },
   })
 
+  function push_logs(log: CommandData) {
+    //current_log_group.push(last_console_event = log);
+    logs.value.push(log)
+  }
+
   sandbox.addEventListener('load', () => {
     proxy.handle_links()
     stopUpdateWatcher = watchEffect(updatePreview)
@@ -285,17 +295,24 @@ defineExpose({ reload, container: containerRef })
 </script>
 
 <template>
-  <div
-    v-show="show"
-    ref="container"
-    class="iframe-container"
-    :class="{ [theme]: previewTheme }"
-  />
-  <Message :err="(previewOptions?.showRuntimeError ?? true) && runtimeError" />
-  <Message
-    v-if="!runtimeError && (previewOptions?.showRuntimeWarning ?? true)"
-    :warn="runtimeWarning"
-  />
+  <SplitPane layout="vertical">
+    <template #left>
+      <div
+        v-show="show"
+        ref="container"
+        class="iframe-container"
+        :class="{ [theme]: previewTheme }"
+      />
+      <Message :err="(previewOptions?.showRuntimeError ?? true) && runtimeError" />
+      <Message
+        v-if="!runtimeError && (previewOptions?.showRuntimeWarning ?? true)"
+        :warn="runtimeWarning"
+      />
+    </template>
+    <template #right>
+       <Console :logs="logs" />
+    </template>
+  </SplitPane>
 </template>
 
 <style scoped>
diff --git a/src/output/PreviewProxy.ts b/src/output/PreviewProxy.ts
index 178dafda..d435ed45 100644
--- a/src/output/PreviewProxy.ts
+++ b/src/output/PreviewProxy.ts
@@ -30,6 +30,8 @@ export class PreviewProxy {
     return new Promise((resolve, reject) => {
       const cmd_id = uid++
 
+      //console.log('resolve', resolve)
+      //console.log('reject', reject)
       this.pending_cmds.set(cmd_id, { resolve, reject })
 
       this.iframe.contentWindow!.postMessage({ action, cmd_id, args }, '*')
diff --git a/src/types.ts b/src/types.ts
index 19b8c609..0820d3eb 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -8,6 +8,15 @@ export interface EditorProps {
   readonly?: boolean
   mode?: EditorMode
 }
+export type ConsoleLevel = 'clear' | 'log' | 'info' | 'dir' | 'warn' | 'error' | 'table' | 'group' | 'unclonable' | 'assert'
+export interface CommandData{
+  action: 'console' | 'cmd_error' | 'cmd_ok' | 'error' | 'unhandledrejection'
+  args: string[]
+  level: ConsoleLevel
+  stack?: string
+  label?: string
+  count?: number
+}
 export interface EditorEmits {
   (e: 'change', code: string): void
 }
diff --git a/src/utils.ts b/src/utils.ts
index 3b453ca1..2db3bc5c 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -31,3 +31,16 @@ export function atou(base64: string): string {
   // https://base64.guru/developers/javascript/examples/unicode-strings
   return decodeURIComponent(escape(binary))
 }
+
+export function parse(value: any = false) {
+	value = value ?? false
+	if (typeof value === 'object') {
+		return Object.entries(value) as [string, any][]
+	}
+	return false
+}
+
+export function word(total: number, singular: string, plural: string) {
+	const choose = total > 1 ? plural : singular
+	return `${total} ${choose}`
+}

From 653f041c3da171e3992169072bfe4ec7b38f486f Mon Sep 17 00:00:00 2001
From: Dsaquel <noblet.ouwaysgta5@gmail.com>
Date: Sun, 22 Dec 2024 14:36:15 +0100
Subject: [PATCH 02/17] chore: stack console args :construction:

---
 src/output/Console.vue     |   8 +-
 src/output/ConsoleLine.vue | 267 ++++++++++++++++++++-----------------
 src/output/JsonNode.vue    |  98 +++++++++-----
 src/output/JsonTree.vue    |  42 ++++--
 src/output/Preview.vue     |   6 +-
 src/types.ts               |  14 +-
 src/utils.ts               |  19 ++-
 test/main.ts               |   2 +-
 8 files changed, 273 insertions(+), 183 deletions(-)

diff --git a/src/output/Console.vue b/src/output/Console.vue
index 1ac4605a..b87d35a3 100644
--- a/src/output/Console.vue
+++ b/src/output/Console.vue
@@ -1,10 +1,8 @@
 <script setup lang="ts">
-import { CommandData } from '../types';
-import ConsoleLine from './ConsoleLine.vue';
-
-
-const props = defineProps<{ logs: CommandData[] }>()
+import { CommandData } from '../types'
+import ConsoleLine from './ConsoleLine.vue'
 
+defineProps<{ logs: CommandData[] }>()
 </script>
 
 <template>
diff --git a/src/output/ConsoleLine.vue b/src/output/ConsoleLine.vue
index c6da9c18..210c5bc8 100644
--- a/src/output/ConsoleLine.vue
+++ b/src/output/ConsoleLine.vue
@@ -1,37 +1,45 @@
 <script setup lang="ts">
-import { ref } from 'vue';
-import { CommandData } from '../types';
-import JsonTree from './JsonTree.vue';
+import { ref } from 'vue'
+import { CommandData } from '../types'
+import JsonTree from './JsonTree.vue'
+import JsonNode from './JsonNode.vue'
 
 defineProps<{ log: CommandData }>()
 const level = ref(1)
 //	function toggleGroupCollapse() {
 //		log.collapsed = !log.collapsed;
 //	}
+//<ConsoleTable :data="log.args[0]" :columns="log.args[1]" />
 </script>
 
 <template>
-  <div 
-    v-if="log.level === 'table'"
+  <div v-if="log.level === 'table'">table desu</div>
+  <div
+    :class="`log console-${log.level}`"
+    :style="{ paddingLeft: level * 15 + 'px' }"
   >
-    <ConsoleTable :data="log.args[0]" :columns="log.args[1]" />
-  </div>
-  <div 
-    class="log console-{{ log.level }}" 
-    :style="{ paddingLeft: level * 15 + 'px' }" 
-  >
-    <span v-if="log.count && log.count > 1" class="count">{{ log.count }}x</span>
+    <span v-if="log.count && log.count > 1" class="count"
+      >{{ log.count }}x</span
+    >
 
-    <div 
-      v-if="log.level === 'trace' || log.level === 'assert'" 
-      class="arrow" 
-    >▶</div>
+    <div v-if="log.level === 'trace' || log.level === 'assert'" class="arrow">
+      ▶
+    </div>
 
     <span v-if="log.level === 'assert'" class="assert">Assertion failed:</span>
 
     <span v-if="log.level === 'clear'" class="info">Console was cleared</span>
-    <span v-if="log.level === 'unclonable'" class="info error">Message could not be cloned. Open devtools to see it</span>
-    <div v-if="log.level === 'group'" class="arrow" :class="{ expand: !log.collapsed }" @click="toggleGroupCollapse">▶</div>
+    <span v-if="log.level === 'unclonable'" class="info error"
+      >Message could not be cloned. Open devtools to see it</span
+    >
+    <div
+      v-if="log.level === 'group'"
+      class="arrow"
+      :class="{ expand: !log.collapsed }"
+      @click="toggleGroupCollapse"
+    >
+      ▶
+    </div>
     <span v-if="log.level === 'group'" class="title">{{ log.label }}</span>
 
     <span v-if="log.level.startsWith('system')">
@@ -40,118 +48,129 @@ const level = ref(1)
       </template>
     </span>
 
-    <JSONNode v-if="log.level === 'table'" :value="log.args[0]" />
+    <JsonNode
+      v-if="log.level === 'table'"
+      :value="log.args[0]"
+      :margin-offset="0"
+    />
     <template v-else>
-      <template v-for="arg in log.args">
-        <JsonTree :data="arg" />
-      </template>
+      <JsonTree
+        v-for="arg in log.args"
+        :data="arg"
+        :margin-offset="0"
+        :increment="0"
+      />
     </template>
 
-    <div 
-      v-for="(_, idx) in new Array(level - 1)" 
-      class="outline" 
-      :style="{ left: idx * 15 + 15 + 'px' }" 
+    <div
+      v-for="(_, idx) in new Array(level - 1)"
+      class="outline"
+      :style="{ left: idx * 15 + 15 + 'px' }"
     />
   </div>
-
 </template>
 
 <style>
-	.log {
-		border-bottom: 1px solid #eee;
-		padding: 5px 10px 0px;
-		display: flex;
-		position: relative;
-		font-size: 12px;
-		font-family: var(--font-mono);
-	}
-
-	.log > :global(*) {
-		margin-right: 10px;
-		font-family: var(--font-mono);
-	}
-
-	.console-warn, .console-system-warn {
-		background: #fffbe6;
-		border-color: #fff4c4;
-	}
-
-	.console-error, .console-assert {
-		background: #fff0f0;
-		border-color: #fed6d7;
-	}
-
-	.console-group, .arrow {
-		cursor: pointer;
-		user-select: none;
-	}
-
-	.console-trace, .console-assert {
-		border-bottom: none;
-	}
-
-	.console-assert + .trace {
-		background: #fff0f0;
-		border-color: #fed6d7;
-	}
-
-	.trace {
-		border-bottom: 1px solid #eee;
-		font-size: 12px;
-		font-family: var(--font-mono);
-		padding: 4px 0 2px;
-	}
-
-	.trace > :global(div) {
-		margin-left: 15px;
-	}
-
-	.count {
-		color: #999;
-		font-size: 12px;
-		line-height: 1.2;
-	}
-
-	.info {
-		color: #666;
-		font-family: var(--font) !important;
-		font-size: 12px;
-	}
-
-	.error {
-		color: #da106e; /* todo make this a var */
-	}
-
-	.outline {
-		border-left: 1px solid #9c9cab;
-		position: absolute;
-		top: 0;
-		bottom: -1px;
-	}
-
-	.arrow {
-		position: absolute;
-		font-size: 0.6em;
-		transition: 150ms;
-		transform-origin: 50% 50%;
-		transform: translateY(1px) translateX(-50%);
-	}
-
-	.arrow.expand {
-		transform: translateY(1px) translateX(-50%) rotateZ(90deg);
-	}
-
-	.title {
-		font-family: var(--font-mono);
-		font-size: 13px;
-		font-weight: bold;
-		padding-left: 11px;
-		height: 19px;
-	}
-
-	.assert {
-		padding-left: 11px;
-		font-weight: bold;
-		color: #da106e;
-	}
+.log {
+  border-bottom: 1px solid #eee;
+  padding: 5px 10px;
+  display: flex;
+  position: relative;
+  font-size: 0.8rem;
+  font-family: var(--font-mono);
+  flex-wrap: wrap;
+}
+
+.log > * {
+  /* margin-right: 10px; */
+  font-family: var(--font-mono);
+}
+
+.console-warn,
+.console-system-warn {
+  background: #fffbe6;
+  border-color: #fff4c4;
+}
+
+.console-error,
+.console-assert {
+  background: #fff0f0;
+  border-color: #fed6d7;
+}
+
+.console-group,
+.arrow {
+  cursor: pointer;
+  user-select: none;
+}
+
+.console-trace,
+.console-assert {
+  border-bottom: none;
+}
+
+.console-assert + .trace {
+  background: #fff0f0;
+  border-color: #fed6d7;
+}
+
+.trace {
+  border-bottom: 1px solid #eee;
+  font-size: 0.8rem;
+  font-family: var(--font-mono);
+  padding: 4px 0 2px;
+}
+
+.trace > div {
+  margin-left: 15px;
+}
+
+.count {
+  color: #999;
+  font-size: 0.8rem;
+  line-height: 1.2;
+}
+
+.info {
+  color: #666;
+  font-family: var(--font) !important;
+  font-size: 0.8rem;
+}
+
+.error {
+  color: #da106e; /* todo make this a var */
+}
+
+.outline {
+  border-left: 1px solid #9c9cab;
+  position: absolute;
+  top: 0;
+  bottom: -1px;
+}
+
+.arrow {
+  position: absolute;
+  font-size: 0.6em;
+  transition: 150ms;
+  transform-origin: 50% 50%;
+  transform: translateY(1px) translateX(-50%);
+}
+
+.arrow.expand {
+  transform: translateY(1px) translateX(-50%) rotateZ(90deg);
+}
+
+.title {
+  font-family: var(--font-mono);
+  font-size: 1em;
+  font-weight: bold;
+  padding-left: 11px;
+  height: 19px;
+}
+
+.assert {
+  padding-left: 11px;
+  font-weight: bold;
+  color: #da106e;
+}
 </style>
diff --git a/src/output/JsonNode.vue b/src/output/JsonNode.vue
index ff1b8aa0..558148f3 100644
--- a/src/output/JsonNode.vue
+++ b/src/output/JsonNode.vue
@@ -1,55 +1,87 @@
 <script setup lang="ts">
-import { word } from '../utils';
-defineProps({
-  key: {
+import { computed, watchEffect } from 'vue'
+import { isObject, parse, word } from '../utils'
+const emits = defineEmits<{
+  click: []
+}>()
+const props = defineProps({
+  keyData: {
     key: String,
     required: true,
   },
-  value: Object as any,
+  value: [Object, Number, String],
   marginOffset: {
     type: Number,
     default: 0,
   },
   open: Boolean,
 })
+
+const renderValue = computed(() => {
+  const value = props.value
+  if (Array.isArray(value)) return value
+  if (isObject(value)) {
+    const t = value as any
+    for (const k in t) if (isObject(t[k])) return '{...}'
+  }
+  return value
+})
+
+watchEffect(() => console.log(props.marginOffset))
 </script>
 
 <template>
-
-  <div class="tree" :style="`margin-left: ${marginOffset}rem`">
-    <span v-if="open && key">
-      <
-    </span>
-    <span v-else-if="!open && key">
-      >
-    </span>
-    <span v-if="key" class="tree__title">
-      {{ key }}:
-    </span>
+  <div
+    class="tree"
+    :style="`margin-left: ${marginOffset}rem`"
+    @click="emits('click')"
+  >
+    <svg
+      v-if="Object.keys(parse(value)).length > 0"
+      :class="{ open }"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlns:xlink="http://www.w3.org/1999/xlink"
+      version="1.1"
+      viewBox="0 0 960 560"
+      enable-background="new 0 0 960 560"
+    >
+      <path
+        d="M480,344.181L268.869,131.889c-15.756-15.859-41.3-15.859-57.054,0c-15.754,15.857-15.754,41.57,0,57.431l237.632,238.937   c8.395,8.451,19.562,12.254,30.553,11.698c10.993,0.556,22.159-3.247,30.555-11.698l237.631-238.937   c15.756-15.86,15.756-41.571,0-57.431s-41.299-15.859-57.051,0L480,344.181z "
+      />
+    </svg>
+    <span v-if="keyData !== 'root'" class="tree__title"> {{ keyData }}: </span>
     <span>
-      {{typeof value === 'object' && value ? word(Object.keys(value).length, 'property', 'properties') : value}}
+      {{ renderValue }}
     </span>
   </div>
-
 </template>
 
 <style>
-	.tree {
-    color: white;
-    cursor: 'pointer';
-    user-select: none;
-		margin-bottom: 1em;
-		display: flex;
-    align-items: center;
-		gap: 0.2em;
-	}
+.tree {
+  color: white;
+  cursor: pointer;
+  user-select: none;
+  /* margin-bottom: 1em; */
+  display: flex;
+  align-items: center;
+  gap: 0.2em;
+  svg {
+    transition: all 200ms;
+    width: 1em;
+    height: 1em;
+    fill: currentColor;
+  }
 
-	.tree__title{
-		font-weight: 500;
-	}
+  svg:not(.open) {
+    transform: rotate(-90deg);
+  }
+}
 
-	.block{
-		display:block;
-	}
-</style>
+.tree__title {
+  font-weight: 500;
+}
 
+.block {
+  display: block;
+}
+</style>
diff --git a/src/output/JsonTree.vue b/src/output/JsonTree.vue
index 6cb9229c..acc572a2 100644
--- a/src/output/JsonTree.vue
+++ b/src/output/JsonTree.vue
@@ -1,19 +1,22 @@
-
 <script setup lang="ts">
-import { computed, ref, type PropType } from 'vue'
-import JsonNode from './JsonNode.vue';
-import { parse } from '../utils';
+import { computed, ref } from 'vue'
+import JsonNode from './JsonNode.vue'
+import { parse } from '../utils'
 
 const props = defineProps({
-  key: {
+  keyData: {
     key: String,
     default: 'root',
   },
-  data: Object as PropType<Record<string, any>>,
+  data: [Object, Number, String],
   marginOffset: {
     type: Number,
     default: 1,
-  }
+  },
+  increment: {
+    type: Number,
+    default: 1,
+  },
 })
 
 const open = ref(false)
@@ -22,8 +25,29 @@ const entries = computed(() => parse(props.data))
 </script>
 
 <template>
-  <JsonNode :key="key" :value="data" :margin-offset="marginOffset" />
+  &nbsp;
+  <JsonNode
+    :keyData="keyData"
+    :value="data"
+    :margin-offset="marginOffset"
+    :open="open"
+    @click="open = !open"
+  />
   <template v-if="entries && open">
-    <JsonTree v-for="[k, v] in entries" :key="k" :data="v" :margin-offset="marginOffset + 1" />
+    <div class="hah">
+      <JsonTree
+        v-for="[k, v] in entries"
+        :key="k"
+        :data="v"
+        :margin-offset="marginOffset + increment"
+      />
+    </div>
   </template>
 </template>
+
+<style>
+.hah {
+  display: inline-block;
+  width: 100%;
+}
+</style>
diff --git a/src/output/Preview.vue b/src/output/Preview.vue
index 070958bb..642a59d1 100644
--- a/src/output/Preview.vue
+++ b/src/output/Preview.vue
@@ -303,14 +303,16 @@ defineExpose({ reload, container: containerRef })
         class="iframe-container"
         :class="{ [theme]: previewTheme }"
       />
-      <Message :err="(previewOptions?.showRuntimeError ?? true) && runtimeError" />
+      <Message
+        :err="(previewOptions?.showRuntimeError ?? true) && runtimeError"
+      />
       <Message
         v-if="!runtimeError && (previewOptions?.showRuntimeWarning ?? true)"
         :warn="runtimeWarning"
       />
     </template>
     <template #right>
-       <Console :logs="logs" />
+      <Console :logs="logs" />
     </template>
   </SplitPane>
 </template>
diff --git a/src/types.ts b/src/types.ts
index 0820d3eb..564ef7bd 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -8,8 +8,18 @@ export interface EditorProps {
   readonly?: boolean
   mode?: EditorMode
 }
-export type ConsoleLevel = 'clear' | 'log' | 'info' | 'dir' | 'warn' | 'error' | 'table' | 'group' | 'unclonable' | 'assert'
-export interface CommandData{
+export type ConsoleLevel =
+  | 'clear'
+  | 'log'
+  | 'info'
+  | 'dir'
+  | 'warn'
+  | 'error'
+  | 'table'
+  | 'group'
+  | 'unclonable'
+  | 'assert'
+export interface CommandData {
   action: 'console' | 'cmd_error' | 'cmd_ok' | 'error' | 'unhandledrejection'
   args: string[]
   level: ConsoleLevel
diff --git a/src/utils.ts b/src/utils.ts
index 2db3bc5c..2e673f12 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -33,14 +33,19 @@ export function atou(base64: string): string {
 }
 
 export function parse(value: any = false) {
-	value = value ?? false
-	if (typeof value === 'object') {
-		return Object.entries(value) as [string, any][]
-	}
-	return false
+  value = value ?? false
+  if (typeof value === 'object') {
+    return Object.entries(value) as [string, any][]
+  }
+  return false
 }
 
 export function word(total: number, singular: string, plural: string) {
-	const choose = total > 1 ? plural : singular
-	return `${total} ${choose}`
+  const choose = total > 1 ? plural : singular
+  return `${total} ${choose}`
+}
+
+export function isObject(value: any) {
+  const type = typeof value
+  return value != null && (type == 'object' || type == 'function')
 }
diff --git a/test/main.ts b/test/main.ts
index 85cce24f..8e4c3f3f 100644
--- a/test/main.ts
+++ b/test/main.ts
@@ -59,7 +59,7 @@ const App = {
         previewTheme: previewTheme.value,
         editor: MonacoEditor,
         // layout: 'vertical',
-        ssr: true,
+        ssr: false,
         sfcOptions: {
           script: {
             // inlineTemplate: false

From 859e216781b57229f003f88bab19515a2f27991f Mon Sep 17 00:00:00 2001
From: Dsaquel <noblet.ouwaysgta5@gmail.com>
Date: Sun, 22 Dec 2024 17:02:18 +0100
Subject: [PATCH 03/17] chore: wip

---
 src/output/ConsoleLine.vue |  1 -
 src/output/JsonNode.vue    | 13 +++++--------
 src/output/JsonTree.vue    | 12 ++++--------
 3 files changed, 9 insertions(+), 17 deletions(-)

diff --git a/src/output/ConsoleLine.vue b/src/output/ConsoleLine.vue
index 210c5bc8..103d9b56 100644
--- a/src/output/ConsoleLine.vue
+++ b/src/output/ConsoleLine.vue
@@ -58,7 +58,6 @@ const level = ref(1)
         v-for="arg in log.args"
         :data="arg"
         :margin-offset="0"
-        :increment="0"
       />
     </template>
 
diff --git a/src/output/JsonNode.vue b/src/output/JsonNode.vue
index 558148f3..81776c1c 100644
--- a/src/output/JsonNode.vue
+++ b/src/output/JsonNode.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, watchEffect } from 'vue'
-import { isObject, parse, word } from '../utils'
+import {  parse, isObject } from '../utils'
 const emits = defineEmits<{
   click: []
 }>()
@@ -17,6 +17,7 @@ const props = defineProps({
   open: Boolean,
 })
 
+
 const renderValue = computed(() => {
   const value = props.value
   if (Array.isArray(value)) return value
@@ -27,13 +28,13 @@ const renderValue = computed(() => {
   return value
 })
 
-watchEffect(() => console.log(props.marginOffset))
+const huh = computed(() => isObject(props.value) && props.keyData !== 'root' ? props.marginOffset - 1 : props.marginOffset)
 </script>
 
 <template>
   <div
     class="tree"
-    :style="`margin-left: ${marginOffset}rem`"
+    :style="`margin-left: ${huh}rem`"
     @click="emits('click')"
   >
     <svg
@@ -50,17 +51,13 @@ watchEffect(() => console.log(props.marginOffset))
       />
     </svg>
     <span v-if="keyData !== 'root'" class="tree__title"> {{ keyData }}: </span>
-    <span>
-      {{ renderValue }}
-    </span>
+    <span>{{ renderValue }}</span>
   </div>
 </template>
 
 <style>
 .tree {
   color: white;
-  cursor: pointer;
-  user-select: none;
   /* margin-bottom: 1em; */
   display: flex;
   align-items: center;
diff --git a/src/output/JsonTree.vue b/src/output/JsonTree.vue
index acc572a2..d9ee0624 100644
--- a/src/output/JsonTree.vue
+++ b/src/output/JsonTree.vue
@@ -13,10 +13,6 @@ const props = defineProps({
     type: Number,
     default: 1,
   },
-  increment: {
-    type: Number,
-    default: 1,
-  },
 })
 
 const open = ref(false)
@@ -25,7 +21,6 @@ const entries = computed(() => parse(props.data))
 </script>
 
 <template>
-  &nbsp;
   <JsonNode
     :keyData="keyData"
     :value="data"
@@ -36,10 +31,11 @@ const entries = computed(() => parse(props.data))
   <template v-if="entries && open">
     <div class="hah">
       <JsonTree
-        v-for="[k, v] in entries"
-        :key="k"
+        v-for="([k, v], idx) in entries"
+        :key="idx"
+        :key-data="k"
         :data="v"
-        :margin-offset="marginOffset + increment"
+        :margin-offset="marginOffset + 1"
       />
     </div>
   </template>

From 54b315f498d98f0ed8e63d6d11cec0d4011e2c6f Mon Sep 17 00:00:00 2001
From: Dsaquel <noblet.ouwaysgta5@gmail.com>
Date: Wed, 15 Jan 2025 22:49:28 +0100
Subject: [PATCH 04/17] feat: add luna console test

---
 package.json               |   6 +-
 pnpm-lock.yaml             |  53 +++++++++++
 src/Repl.vue               |   5 ++
 src/output/Console.vue     |  18 ----
 src/output/ConsoleLine.vue | 175 -------------------------------------
 src/output/JsonNode.vue    |  84 ------------------
 src/output/JsonTree.vue    |  49 -----------
 src/output/Preview.vue     |  30 ++++---
 8 files changed, 79 insertions(+), 341 deletions(-)
 delete mode 100644 src/output/Console.vue
 delete mode 100644 src/output/ConsoleLine.vue
 delete mode 100644 src/output/JsonNode.vue
 delete mode 100644 src/output/JsonTree.vue

diff --git a/package.json b/package.json
index 9eeb3d03..331abbf1 100644
--- a/package.json
+++ b/package.json
@@ -105,6 +105,10 @@
     "vite-plugin-dts": "^4.2.3",
     "vscode-uri": "^3.0.8",
     "vue": "^3.5.11",
-    "vue-tsc": "~2.1.6"
+    "vue-tsc": "~2.1.6",
+    "luna-console": "^1.3.5",
+    "luna-data-grid": "^1.3.0",
+    "luna-dom-viewer": "^1.4.0",
+    "luna-object-viewer": "^0.3.1"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0783cf3a..5d394b77 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -7,6 +7,19 @@ settings:
 importers:
 
   .:
+    dependencies:
+      luna-console:
+        specifier: ^1.3.5
+        version: 1.3.5(luna-data-grid@1.3.0)(luna-dom-viewer@1.4.0)(luna-object-viewer@0.3.1)
+      luna-data-grid:
+        specifier: ^1.3.0
+        version: 1.3.0
+      luna-dom-viewer:
+        specifier: ^1.4.0
+        version: 1.4.0
+      luna-object-viewer:
+        specifier: ^0.3.1
+        version: 0.3.1
     devDependencies:
       '@babel/standalone':
         specifier: ^7.25.7
@@ -1654,6 +1667,9 @@ packages:
     resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
     engines: {node: '>= 0.8.0'}
 
+  licia@1.46.0:
+    resolution: {integrity: sha512-Zms2AjJB+KdqUKFF87J5J/w9DwXnGN/lKlbjpRgvaPf0BIQ0mOZ/2lX4E79zwNafHGMUq5RtN54FN6Af5G92cA==}
+
   lilconfig@3.1.2:
     resolution: {integrity: sha512-eop+wDAvpItUys0FWkHIKeC9ybYrTGbU41U5K7+bttZZeohvnY7M9dZ5kB21GNWiFT2q1OoPTvncPCgSOVO5ow==}
     engines: {node: '>=14'}
@@ -1698,6 +1714,22 @@ packages:
     resolution: {integrity: sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==}
     engines: {node: '>=10'}
 
+  luna-console@1.3.5:
+    resolution: {integrity: sha512-Ac4g4y5AwTABPZpw/y5TEVpZxA7yA9w/BRmWKCdO3Qr0M/BTGxbjjH6UTWPcKIUfu3QO+cBsmK6+qL+OBZQb9A==}
+    peerDependencies:
+      luna-data-grid: ^1.0.0
+      luna-dom-viewer: ^1.4.0
+      luna-object-viewer: ^0.3.1
+
+  luna-data-grid@1.3.0:
+    resolution: {integrity: sha512-lB6ym/F+iS1yQ2sBZL10yWS+IhivmfE9sFuPZO0WeUveBQkDUkEbfPnm8fMiVxl7qUP6khevRlBaR6qfn9veXQ==}
+
+  luna-dom-viewer@1.4.0:
+    resolution: {integrity: sha512-T7nbFh0z/NmEMhyffp5BycG79eCAsD/8VGyCSzlMeGMjSMfQocPzeGk8miAedfPzGzmkrMseRfWpq+XEbI5Cng==}
+
+  luna-object-viewer@0.3.1:
+    resolution: {integrity: sha512-byynxixA8aAzSg9LymFDzPPrhKCPBOiELnOGxuztAXmes7W7OFqGkiLSyV8ECDvRimF1WewVmyOdxyhsLVquFg==}
+
   magic-string@0.30.11:
     resolution: {integrity: sha512-+Wri9p0QHMy+545hKww7YAu5NyzF8iomPL/RQazugQ9+Ez4Ic3mERMd8ZTX5rfK944j+560ZJi8iAwgak1Ac7A==}
 
@@ -4180,6 +4212,8 @@ snapshots:
       prelude-ls: 1.2.1
       type-check: 0.4.0
 
+  licia@1.46.0: {}
+
   lilconfig@3.1.2: {}
 
   lines-and-columns@1.2.4: {}
@@ -4239,6 +4273,25 @@ snapshots:
     dependencies:
       yallist: 4.0.0
 
+  luna-console@1.3.5(luna-data-grid@1.3.0)(luna-dom-viewer@1.4.0)(luna-object-viewer@0.3.1):
+    dependencies:
+      licia: 1.46.0
+      luna-data-grid: 1.3.0
+      luna-dom-viewer: 1.4.0
+      luna-object-viewer: 0.3.1
+
+  luna-data-grid@1.3.0:
+    dependencies:
+      licia: 1.46.0
+
+  luna-dom-viewer@1.4.0:
+    dependencies:
+      licia: 1.46.0
+
+  luna-object-viewer@0.3.1:
+    dependencies:
+      licia: 1.46.0
+
   magic-string@0.30.11:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.0
diff --git a/src/Repl.vue b/src/Repl.vue
index 66138ec7..b6b8bee1 100644
--- a/src/Repl.vue
+++ b/src/Repl.vue
@@ -9,6 +9,11 @@ import {
   injectKeyProps,
 } from './types'
 import EditorContainer from './editor/EditorContainer.vue'
+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'
+
 import type * as monaco from 'monaco-editor-core'
 
 export interface Props {
diff --git a/src/output/Console.vue b/src/output/Console.vue
deleted file mode 100644
index b87d35a3..00000000
--- a/src/output/Console.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<script setup lang="ts">
-import { CommandData } from '../types'
-import ConsoleLine from './ConsoleLine.vue'
-
-defineProps<{ logs: CommandData[] }>()
-</script>
-
-<template>
-  <div class="container">
-    <ConsoleLine v-for="(log, i) in logs" :log="log" :key="i" />
-  </div>
-</template>
-
-<style>
-.container {
-  position: relative;
-}
-</style>
diff --git a/src/output/ConsoleLine.vue b/src/output/ConsoleLine.vue
deleted file mode 100644
index 103d9b56..00000000
--- a/src/output/ConsoleLine.vue
+++ /dev/null
@@ -1,175 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-import { CommandData } from '../types'
-import JsonTree from './JsonTree.vue'
-import JsonNode from './JsonNode.vue'
-
-defineProps<{ log: CommandData }>()
-const level = ref(1)
-//	function toggleGroupCollapse() {
-//		log.collapsed = !log.collapsed;
-//	}
-//<ConsoleTable :data="log.args[0]" :columns="log.args[1]" />
-</script>
-
-<template>
-  <div v-if="log.level === 'table'">table desu</div>
-  <div
-    :class="`log console-${log.level}`"
-    :style="{ paddingLeft: level * 15 + 'px' }"
-  >
-    <span v-if="log.count && log.count > 1" class="count"
-      >{{ log.count }}x</span
-    >
-
-    <div v-if="log.level === 'trace' || log.level === 'assert'" class="arrow">
-      ▶
-    </div>
-
-    <span v-if="log.level === 'assert'" class="assert">Assertion failed:</span>
-
-    <span v-if="log.level === 'clear'" class="info">Console was cleared</span>
-    <span v-if="log.level === 'unclonable'" class="info error"
-      >Message could not be cloned. Open devtools to see it</span
-    >
-    <div
-      v-if="log.level === 'group'"
-      class="arrow"
-      :class="{ expand: !log.collapsed }"
-      @click="toggleGroupCollapse"
-    >
-      ▶
-    </div>
-    <span v-if="log.level === 'group'" class="title">{{ log.label }}</span>
-
-    <span v-if="log.level.startsWith('system')">
-      <template v-for="arg in log.args">
-        {{ arg }}
-      </template>
-    </span>
-
-    <JsonNode
-      v-if="log.level === 'table'"
-      :value="log.args[0]"
-      :margin-offset="0"
-    />
-    <template v-else>
-      <JsonTree
-        v-for="arg in log.args"
-        :data="arg"
-        :margin-offset="0"
-      />
-    </template>
-
-    <div
-      v-for="(_, idx) in new Array(level - 1)"
-      class="outline"
-      :style="{ left: idx * 15 + 15 + 'px' }"
-    />
-  </div>
-</template>
-
-<style>
-.log {
-  border-bottom: 1px solid #eee;
-  padding: 5px 10px;
-  display: flex;
-  position: relative;
-  font-size: 0.8rem;
-  font-family: var(--font-mono);
-  flex-wrap: wrap;
-}
-
-.log > * {
-  /* margin-right: 10px; */
-  font-family: var(--font-mono);
-}
-
-.console-warn,
-.console-system-warn {
-  background: #fffbe6;
-  border-color: #fff4c4;
-}
-
-.console-error,
-.console-assert {
-  background: #fff0f0;
-  border-color: #fed6d7;
-}
-
-.console-group,
-.arrow {
-  cursor: pointer;
-  user-select: none;
-}
-
-.console-trace,
-.console-assert {
-  border-bottom: none;
-}
-
-.console-assert + .trace {
-  background: #fff0f0;
-  border-color: #fed6d7;
-}
-
-.trace {
-  border-bottom: 1px solid #eee;
-  font-size: 0.8rem;
-  font-family: var(--font-mono);
-  padding: 4px 0 2px;
-}
-
-.trace > div {
-  margin-left: 15px;
-}
-
-.count {
-  color: #999;
-  font-size: 0.8rem;
-  line-height: 1.2;
-}
-
-.info {
-  color: #666;
-  font-family: var(--font) !important;
-  font-size: 0.8rem;
-}
-
-.error {
-  color: #da106e; /* todo make this a var */
-}
-
-.outline {
-  border-left: 1px solid #9c9cab;
-  position: absolute;
-  top: 0;
-  bottom: -1px;
-}
-
-.arrow {
-  position: absolute;
-  font-size: 0.6em;
-  transition: 150ms;
-  transform-origin: 50% 50%;
-  transform: translateY(1px) translateX(-50%);
-}
-
-.arrow.expand {
-  transform: translateY(1px) translateX(-50%) rotateZ(90deg);
-}
-
-.title {
-  font-family: var(--font-mono);
-  font-size: 1em;
-  font-weight: bold;
-  padding-left: 11px;
-  height: 19px;
-}
-
-.assert {
-  padding-left: 11px;
-  font-weight: bold;
-  color: #da106e;
-}
-</style>
diff --git a/src/output/JsonNode.vue b/src/output/JsonNode.vue
deleted file mode 100644
index 81776c1c..00000000
--- a/src/output/JsonNode.vue
+++ /dev/null
@@ -1,84 +0,0 @@
-<script setup lang="ts">
-import { computed, watchEffect } from 'vue'
-import {  parse, isObject } from '../utils'
-const emits = defineEmits<{
-  click: []
-}>()
-const props = defineProps({
-  keyData: {
-    key: String,
-    required: true,
-  },
-  value: [Object, Number, String],
-  marginOffset: {
-    type: Number,
-    default: 0,
-  },
-  open: Boolean,
-})
-
-
-const renderValue = computed(() => {
-  const value = props.value
-  if (Array.isArray(value)) return value
-  if (isObject(value)) {
-    const t = value as any
-    for (const k in t) if (isObject(t[k])) return '{...}'
-  }
-  return value
-})
-
-const huh = computed(() => isObject(props.value) && props.keyData !== 'root' ? props.marginOffset - 1 : props.marginOffset)
-</script>
-
-<template>
-  <div
-    class="tree"
-    :style="`margin-left: ${huh}rem`"
-    @click="emits('click')"
-  >
-    <svg
-      v-if="Object.keys(parse(value)).length > 0"
-      :class="{ open }"
-      xmlns="http://www.w3.org/2000/svg"
-      xmlns:xlink="http://www.w3.org/1999/xlink"
-      version="1.1"
-      viewBox="0 0 960 560"
-      enable-background="new 0 0 960 560"
-    >
-      <path
-        d="M480,344.181L268.869,131.889c-15.756-15.859-41.3-15.859-57.054,0c-15.754,15.857-15.754,41.57,0,57.431l237.632,238.937   c8.395,8.451,19.562,12.254,30.553,11.698c10.993,0.556,22.159-3.247,30.555-11.698l237.631-238.937   c15.756-15.86,15.756-41.571,0-57.431s-41.299-15.859-57.051,0L480,344.181z "
-      />
-    </svg>
-    <span v-if="keyData !== 'root'" class="tree__title"> {{ keyData }}: </span>
-    <span>{{ renderValue }}</span>
-  </div>
-</template>
-
-<style>
-.tree {
-  color: white;
-  /* margin-bottom: 1em; */
-  display: flex;
-  align-items: center;
-  gap: 0.2em;
-  svg {
-    transition: all 200ms;
-    width: 1em;
-    height: 1em;
-    fill: currentColor;
-  }
-
-  svg:not(.open) {
-    transform: rotate(-90deg);
-  }
-}
-
-.tree__title {
-  font-weight: 500;
-}
-
-.block {
-  display: block;
-}
-</style>
diff --git a/src/output/JsonTree.vue b/src/output/JsonTree.vue
deleted file mode 100644
index d9ee0624..00000000
--- a/src/output/JsonTree.vue
+++ /dev/null
@@ -1,49 +0,0 @@
-<script setup lang="ts">
-import { computed, ref } from 'vue'
-import JsonNode from './JsonNode.vue'
-import { parse } from '../utils'
-
-const props = defineProps({
-  keyData: {
-    key: String,
-    default: 'root',
-  },
-  data: [Object, Number, String],
-  marginOffset: {
-    type: Number,
-    default: 1,
-  },
-})
-
-const open = ref(false)
-
-const entries = computed(() => parse(props.data))
-</script>
-
-<template>
-  <JsonNode
-    :keyData="keyData"
-    :value="data"
-    :margin-offset="marginOffset"
-    :open="open"
-    @click="open = !open"
-  />
-  <template v-if="entries && open">
-    <div class="hah">
-      <JsonTree
-        v-for="([k, v], idx) in entries"
-        :key="idx"
-        :key-data="k"
-        :data="v"
-        :margin-offset="marginOffset + 1"
-      />
-    </div>
-  </template>
-</template>
-
-<style>
-.hah {
-  display: inline-block;
-  width: 100%;
-}
-</style>
diff --git a/src/output/Preview.vue b/src/output/Preview.vue
index 642a59d1..bf5038cf 100644
--- a/src/output/Preview.vue
+++ b/src/output/Preview.vue
@@ -11,11 +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 { CommandData, injectKeyProps } from '../../src/types'
-import Console from './Console.vue'
+import { injectKeyProps } from '../../src/types'
 
 const props = defineProps<{ show: boolean; ssr: boolean }>()
 
@@ -23,16 +23,21 @@ const { store, clearConsole, theme, previewTheme, previewOptions } =
   inject(injectKeyProps)!
 
 const containerRef = useTemplateRef('container')
+const consoleContainerRef = useTemplateRef('console-container')
 const runtimeError = ref<string>()
 const runtimeWarning = ref<string>()
-const logs = ref<CommandData[]>([])
 
 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
+  lunaConsole = new LunaConsole(consoleContainerRef.value, { theme: 'dark' })
+})
 
 // reset sandbox when import map changes
 watch(
@@ -142,6 +147,7 @@ function createSandbox() {
         } 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
@@ -149,26 +155,22 @@ function createSandbox() {
             .replace(/\[Vue warn\]:/, '')
             .trim()
         }
+        lunaConsole.warn(...log.args)
       } else {
-        push_logs(log)
+        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)
     },
   })
 
-  function push_logs(log: CommandData) {
-    //current_log_group.push(last_console_event = log);
-    logs.value.push(log)
-  }
-
   sandbox.addEventListener('load', () => {
     proxy.handle_links()
     stopUpdateWatcher = watchEffect(updatePreview)
@@ -312,7 +314,7 @@ defineExpose({ reload, container: containerRef })
       />
     </template>
     <template #right>
-      <Console :logs="logs" />
+      <div ref="console-container" />
     </template>
   </SplitPane>
 </template>

From bbf1943b38fd5efcff2006803c7ae9f6f40b2004 Mon Sep 17 00:00:00 2001
From: Dsaquel <noblet.ouwaysgta5@gmail.com>
Date: Sat, 12 Apr 2025 15:09:17 +0200
Subject: [PATCH 05/17] improve console

---
 pnpm-lock.yaml         | 73 ++++++++++++++++++++++--------------------
 src/Repl.vue           |  6 ++--
 src/output/Preview.vue | 11 +++++--
 src/output/Sandbox.vue | 67 +++++++++++++++++++++++++++++++++-----
 src/output/srcdoc.html | 31 ++++--------------
 5 files changed, 117 insertions(+), 71 deletions(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 27edfa91..973cb12e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -7,19 +7,6 @@ settings:
 importers:
 
   .:
-    dependencies:
-      luna-console:
-        specifier: ^1.3.5
-        version: 1.3.5(luna-data-grid@1.3.0)(luna-dom-viewer@1.4.0)(luna-object-viewer@0.3.1)
-      luna-data-grid:
-        specifier: ^1.3.0
-        version: 1.3.0
-      luna-dom-viewer:
-        specifier: ^1.4.0
-        version: 1.4.0
-      luna-object-viewer:
-        specifier: ^0.3.1
-        version: 0.3.1
     devDependencies:
       '@babel/standalone':
         specifier: ^7.26.9
@@ -90,6 +77,18 @@ importers:
       lint-staged:
         specifier: ^15.4.3
         version: 15.4.3
+      luna-console:
+        specifier: ^1.3.5
+        version: 1.3.5(luna-data-grid@1.4.1)(luna-dom-viewer@1.8.2)(luna-object-viewer@0.3.1)
+      luna-data-grid:
+        specifier: ^1.3.0
+        version: 1.4.1
+      luna-dom-viewer:
+        specifier: ^1.4.0
+        version: 1.8.2
+      luna-object-viewer:
+        specifier: ^0.3.1
+        version: 0.3.1
       monaco-editor-core:
         specifier: ^0.52.2
         version: 0.52.2
@@ -1684,11 +1683,11 @@ packages:
     resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
     engines: {node: '>= 0.8.0'}
 
-  licia@1.46.0:
-    resolution: {integrity: sha512-Zms2AjJB+KdqUKFF87J5J/w9DwXnGN/lKlbjpRgvaPf0BIQ0mOZ/2lX4E79zwNafHGMUq5RtN54FN6Af5G92cA==}
+  licia@1.48.0:
+    resolution: {integrity: sha512-bBWiT5CSdEtwuAHiYTJ74yItCjIFdHi4xiFk6BRDfKa+sdCpkUHp69YKb5udNOJlHDzFjNjcMgNZ/+wQIHrB8A==}
 
-  lilconfig@3.1.2:
-    resolution: {integrity: sha512-eop+wDAvpItUys0FWkHIKeC9ybYrTGbU41U5K7+bttZZeohvnY7M9dZ5kB21GNWiFT2q1OoPTvncPCgSOVO5ow==}
+  lilconfig@3.1.3:
+    resolution: {integrity: sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==}
     engines: {node: '>=14'}
 
   lines-and-columns@1.2.4:
@@ -1738,17 +1737,21 @@ packages:
       luna-dom-viewer: ^1.4.0
       luna-object-viewer: ^0.3.1
 
-  luna-data-grid@1.3.0:
-    resolution: {integrity: sha512-lB6ym/F+iS1yQ2sBZL10yWS+IhivmfE9sFuPZO0WeUveBQkDUkEbfPnm8fMiVxl7qUP6khevRlBaR6qfn9veXQ==}
+  luna-data-grid@1.4.1:
+    resolution: {integrity: sha512-Blo7PP+86LBaiCie5hNeXxQgpodMQGD2ReczFvn2NXZhV6FVKLQC3TL2avSqCsFmIXon09w1zzJVhdh+fVhpCQ==}
 
-  luna-dom-viewer@1.4.0:
-    resolution: {integrity: sha512-T7nbFh0z/NmEMhyffp5BycG79eCAsD/8VGyCSzlMeGMjSMfQocPzeGk8miAedfPzGzmkrMseRfWpq+XEbI5Cng==}
+  luna-dom-viewer@1.8.2:
+    resolution: {integrity: sha512-37yiSYLBeu2TyHp1iQMVrYsAkH4X5Hkn0UYIaTlvTTEc6uSdu5aBI67zHnuXV2FVmOoa0kJhFK/GsUKsFibaCQ==}
 
   luna-object-viewer@0.3.1:
     resolution: {integrity: sha512-byynxixA8aAzSg9LymFDzPPrhKCPBOiELnOGxuztAXmes7W7OFqGkiLSyV8ECDvRimF1WewVmyOdxyhsLVquFg==}
 
-  magic-string@0.30.11:
-    resolution: {integrity: sha512-+Wri9p0QHMy+545hKww7YAu5NyzF8iomPL/RQazugQ9+Ez4Ic3mERMd8ZTX5rfK944j+560ZJi8iAwgak1Ac7A==}
+  magic-string@0.30.17:
+    resolution: {integrity: sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA==}
+
+  math-intrinsics@1.1.0:
+    resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
+    engines: {node: '>= 0.4'}
 
   mdast-util-to-hast@13.2.0:
     resolution: {integrity: sha512-QGYKEuUsYT9ykKBCMOEDLsU5JRObWQusAolFMeko/tYPufNkRffBAQjIE+99jbA87xv6FgmjLtwjh9wBWajwAA==}
@@ -4254,9 +4257,9 @@ snapshots:
       prelude-ls: 1.2.1
       type-check: 0.4.0
 
-  licia@1.46.0: {}
+  licia@1.48.0: {}
 
-  lilconfig@3.1.2: {}
+  lilconfig@3.1.3: {}
 
   lines-and-columns@1.2.4: {}
 
@@ -4315,26 +4318,26 @@ snapshots:
     dependencies:
       yallist: 4.0.0
 
-  luna-console@1.3.5(luna-data-grid@1.3.0)(luna-dom-viewer@1.4.0)(luna-object-viewer@0.3.1):
+  luna-console@1.3.5(luna-data-grid@1.4.1)(luna-dom-viewer@1.8.2)(luna-object-viewer@0.3.1):
     dependencies:
-      licia: 1.46.0
-      luna-data-grid: 1.3.0
-      luna-dom-viewer: 1.4.0
+      licia: 1.48.0
+      luna-data-grid: 1.4.1
+      luna-dom-viewer: 1.8.2
       luna-object-viewer: 0.3.1
 
-  luna-data-grid@1.3.0:
+  luna-data-grid@1.4.1:
     dependencies:
-      licia: 1.46.0
+      licia: 1.48.0
 
-  luna-dom-viewer@1.4.0:
+  luna-dom-viewer@1.8.2:
     dependencies:
-      licia: 1.46.0
+      licia: 1.48.0
 
   luna-object-viewer@0.3.1:
     dependencies:
-      licia: 1.46.0
+      licia: 1.48.0
 
-  magic-string@0.30.11:
+  magic-string@0.30.17:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.0
 
diff --git a/src/Repl.vue b/src/Repl.vue
index b6b8bee1..2aa68276 100644
--- a/src/Repl.vue
+++ b/src/Repl.vue
@@ -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);
 }
 
diff --git a/src/output/Preview.vue b/src/output/Preview.vue
index 20c6f37d..c9fc19e1 100644
--- a/src/output/Preview.vue
+++ b/src/output/Preview.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>
diff --git a/src/output/Sandbox.vue b/src/output/Sandbox.vue
index eba9c688..e6add4e0 100644
--- a/src/output/Sandbox.vue
+++ b/src/output/Sandbox.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,15 +173,13 @@ 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
@@ -173,16 +187,19 @@ function createSandbox() {
             .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>
diff --git a/src/output/srcdoc.html b/src/output/srcdoc.html
index 189c19ca..aabc617f 100644
--- a/src/output/srcdoc.html
+++ b/src/output/srcdoc.html
@@ -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) },
-                    '*',
-                  )
-                }
               }
             }
           },

From bc2f076177e45058e1501335e66022fa4e89ea4d Mon Sep 17 00:00:00 2001
From: Dsaquel <noblet.ouwaysgta5@gmail.com>
Date: Sat, 12 Apr 2025 15:12:44 +0200
Subject: [PATCH 06/17] minor tweaks

---
 src/output/PreviewProxy.ts |  2 --
 src/types.ts               | 19 -------------------
 src/utils.ts               | 18 ------------------
 test/main.ts               |  3 ++-
 4 files changed, 2 insertions(+), 40 deletions(-)

diff --git a/src/output/PreviewProxy.ts b/src/output/PreviewProxy.ts
index d435ed45..178dafda 100644
--- a/src/output/PreviewProxy.ts
+++ b/src/output/PreviewProxy.ts
@@ -30,8 +30,6 @@ export class PreviewProxy {
     return new Promise((resolve, reject) => {
       const cmd_id = uid++
 
-      //console.log('resolve', resolve)
-      //console.log('reject', reject)
       this.pending_cmds.set(cmd_id, { resolve, reject })
 
       this.iframe.contentWindow!.postMessage({ action, cmd_id, args }, '*')
diff --git a/src/types.ts b/src/types.ts
index 564ef7bd..19b8c609 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -8,25 +8,6 @@ export interface EditorProps {
   readonly?: boolean
   mode?: EditorMode
 }
-export type ConsoleLevel =
-  | 'clear'
-  | 'log'
-  | 'info'
-  | 'dir'
-  | 'warn'
-  | 'error'
-  | 'table'
-  | 'group'
-  | 'unclonable'
-  | 'assert'
-export interface CommandData {
-  action: 'console' | 'cmd_error' | 'cmd_ok' | 'error' | 'unhandledrejection'
-  args: string[]
-  level: ConsoleLevel
-  stack?: string
-  label?: string
-  count?: number
-}
 export interface EditorEmits {
   (e: 'change', code: string): void
 }
diff --git a/src/utils.ts b/src/utils.ts
index 2e673f12..3b453ca1 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -31,21 +31,3 @@ export function atou(base64: string): string {
   // https://base64.guru/developers/javascript/examples/unicode-strings
   return decodeURIComponent(escape(binary))
 }
-
-export function parse(value: any = false) {
-  value = value ?? false
-  if (typeof value === 'object') {
-    return Object.entries(value) as [string, any][]
-  }
-  return false
-}
-
-export function word(total: number, singular: string, plural: string) {
-  const choose = total > 1 ? plural : singular
-  return `${total} ${choose}`
-}
-
-export function isObject(value: any) {
-  const type = typeof value
-  return value != null && (type == 'object' || type == 'function')
-}
diff --git a/test/main.ts b/test/main.ts
index 8e4c3f3f..8a5dcde7 100644
--- a/test/main.ts
+++ b/test/main.ts
@@ -59,7 +59,8 @@ const App = {
         previewTheme: previewTheme.value,
         editor: MonacoEditor,
         // layout: 'vertical',
-        ssr: false,
+        ssr: true,
+        showConsole: true,
         sfcOptions: {
           script: {
             // inlineTemplate: false

From ba6a7dc565d0f3e1a8adb91529b3e88c3c30bbb6 Mon Sep 17 00:00:00 2001
From: Dsaquel <noblet.ouwaysgta5@gmail.com>
Date: Mon, 14 Apr 2025 14:46:41 +0200
Subject: [PATCH 07/17] chore: deplace LunaConsole to `Output.vue`

---
 src/output/Output.vue  | 83 ++++++++++++++++++++++++++++++++++++++++--
 src/output/Preview.vue | 19 +++++-----
 src/output/Sandbox.vue | 72 +++++-------------------------------
 3 files changed, 99 insertions(+), 75 deletions(-)

diff --git a/src/output/Output.vue b/src/output/Output.vue
index 62085293..1eafa568 100644
--- a/src/output/Output.vue
+++ b/src/output/Output.vue
@@ -1,6 +1,16 @@
 <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 OutputModes,
@@ -13,8 +23,36 @@ 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',
+  })
+  lunaWatcher ??= watch(() => store.value.activeFile.code, clearLunaConsole)
+  lunaWatcher.resume()
+}
+
 const modes = computed(() =>
   props.showCompileOutput
     ? (['preview', 'js', 'css', 'ssr'] as const)
@@ -33,8 +71,14 @@ const mode = computed<OutputModes>({
   },
 })
 
+function clearLunaConsole() {
+  console.log('clear')
+  lunaConsole.value?.clear(true)
+}
+
 function reload() {
   previewRef.value?.reload()
+  clearLunaConsole()
 }
 
 defineExpose({ reload, previewRef })
@@ -53,7 +97,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"
+          :luna-console="lunaConsole"
+          :show="mode === 'preview'"
+          :ssr="ssr"
+        />
+      </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 +153,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>
diff --git a/src/output/Preview.vue b/src/output/Preview.vue
index c9fc19e1..e0593802 100644
--- a/src/output/Preview.vue
+++ b/src/output/Preview.vue
@@ -2,17 +2,16 @@
 import { computed, inject, useTemplateRef } from 'vue'
 import { injectKeyProps } from '../../src/types'
 import Sandbox from './Sandbox.vue'
+import LunaConsole from 'luna-console'
 
-const props = defineProps<{ show: boolean; ssr: boolean }>()
+const props = defineProps<{
+  show: boolean
+  ssr: boolean
+  lunaConsole?: LunaConsole
+}>()
 
-const {
-  store,
-  clearConsole,
-  showConsole,
-  theme,
-  previewTheme,
-  previewOptions,
-} = inject(injectKeyProps)!
+const { store, clearConsole, theme, previewTheme, previewOptions } =
+  inject(injectKeyProps)!
 
 const sandboxTheme = computed(() =>
   previewTheme.value ? theme.value : undefined,
@@ -35,7 +34,7 @@ defineExpose({
     :theme="sandboxTheme"
     :preview-options="previewOptions"
     :ssr="props.ssr"
-    :show-console="showConsole"
     :clear-console="clearConsole"
+    :luna-console="props.lunaConsole"
   />
 </template>
diff --git a/src/output/Sandbox.vue b/src/output/Sandbox.vue
index e6add4e0..d6e838ca 100644
--- a/src/output/Sandbox.vue
+++ b/src/output/Sandbox.vue
@@ -14,10 +14,8 @@ import {
 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 { injectKeyProps } from '../types'
-
 import type { Store } from '../store'
 
 export interface SandboxProps {
@@ -25,7 +23,6 @@ export interface SandboxProps {
   show?: boolean
   ssr?: boolean
   clearConsole?: boolean
-  showConsole?: boolean
   theme?: 'dark' | 'light'
   previewOptions?: {
     headHTML?: string
@@ -40,13 +37,13 @@ export interface SandboxProps {
   }
   /** @default true */
   autoStoreInit?: boolean
+  lunaConsole?: LunaConsole
 }
 
 const props = withDefaults(defineProps<SandboxProps>(), {
   show: true,
   ssr: false,
   theme: 'light',
-  showConsole: false,
   clearConsole: true,
   previewOptions: () => ({}),
   autoStoreInit: true,
@@ -59,26 +56,15 @@ 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()
-  if (!consoleContainerRef.value) return
-  if (props.showConsole) {
-    lunaConsole = new LunaConsole(consoleContainerRef.value, {
-      theme: keyProps?.theme.value || 'light',
-    })
-    watch(() => store.value.activeFile.code, clearLunaConsole)
-  }
-})
+onMounted(createSandbox)
 
 // reset sandbox when import map changes
 watch(
@@ -173,13 +159,14 @@ function createSandbox() {
       runtimeError.value = 'Uncaught (in promise): ' + error.message
     },
     on_console: (log: any) => {
+      const lc = props.lunaConsole
       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)
+        lc?.error(...log.args)
       } else if (log.level === 'warn') {
         if (log.args[0].toString().includes('[Vue warn]')) {
           runtimeWarning.value = log.args
@@ -187,19 +174,19 @@ function createSandbox() {
             .replace(/\[Vue warn\]:/, '')
             .trim()
         }
-        lunaConsole.warn(...log.args)
+        lc?.warn(...log.args)
       } else {
-        lunaConsole.log(...log.args)
+        lc?.log(...log.args)
       }
     },
     on_console_group: (action: any) => {
-      lunaConsole.group(action.label)
+      props.lunaConsole?.group(action.label)
     },
     on_console_group_end: () => {
-      lunaConsole.groupEnd()
+      props.lunaConsole?.groupEnd()
     },
     on_console_group_collapsed: (action: any) => {
-      lunaConsole.groupCollapsed(action.label)
+      props.lunaConsole?.groupCollapsed(action.label)
     },
   })
 
@@ -318,38 +305,18 @@ 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"
-    :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)"
@@ -368,23 +335,4 @@ 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>

From f73080ed4c5ede9f7ff1efdf39f1dfaea326d808 Mon Sep 17 00:00:00 2001
From: Noblet Ouways <91417411+Dsaquel@users.noreply.github.com>
Date: Mon, 14 Apr 2025 14:51:22 +0200
Subject: [PATCH 08/17] Update src/output/Sandbox.vue

---
 src/output/Sandbox.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/output/Sandbox.vue b/src/output/Sandbox.vue
index d6e838ca..de01cd4b 100644
--- a/src/output/Sandbox.vue
+++ b/src/output/Sandbox.vue
@@ -15,9 +15,8 @@ import LunaConsole from 'luna-console'
 import srcdoc from './srcdoc.html?raw'
 import { PreviewProxy } from './PreviewProxy'
 import { compileModulesForPreview } from './moduleCompiler'
-import { injectKeyProps } from '../types'
 import type { Store } from '../store'
-
+import { injectKeyProps } from '../types'
 export interface SandboxProps {
   store: Store
   show?: boolean

From 049595387130f31a0285714ebaab723641b6f215 Mon Sep 17 00:00:00 2001
From: Noblet Ouways <91417411+Dsaquel@users.noreply.github.com>
Date: Mon, 14 Apr 2025 14:51:30 +0200
Subject: [PATCH 09/17] Update src/output/Output.vue

---
 src/output/Output.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/output/Output.vue b/src/output/Output.vue
index 1eafa568..f9ac6f5a 100644
--- a/src/output/Output.vue
+++ b/src/output/Output.vue
@@ -72,7 +72,6 @@ const mode = computed<OutputModes>({
 })
 
 function clearLunaConsole() {
-  console.log('clear')
   lunaConsole.value?.clear(true)
 }
 

From 4e6d0afad6e9d6fc115f1a1df1376b28a5d2dada Mon Sep 17 00:00:00 2001
From: Dsaquel <noblet.ouwaysgta5@gmail.com>
Date: Wed, 16 Apr 2025 22:36:57 +0200
Subject: [PATCH 10/17] chore: deplace console

---
 src/output/Output.vue  |  7 ++++++-
 src/output/Preview.vue |  7 +++----
 src/output/Sandbox.vue | 34 +++++++++++++++++----------------
 src/output/srcdoc.html | 43 ++++++++++++++++++++++++------------------
 src/types.ts           | 26 +++++++++++++++++++++++++
 5 files changed, 78 insertions(+), 39 deletions(-)

diff --git a/src/output/Output.vue b/src/output/Output.vue
index f9ac6f5a..e0e0df9d 100644
--- a/src/output/Output.vue
+++ b/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>
diff --git a/src/output/Preview.vue b/src/output/Preview.vue
index e0593802..d082113c 100644
--- a/src/output/Preview.vue
+++ b/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>
diff --git a/src/output/Sandbox.vue b/src/output/Sandbox.vue
index de01cd4b..ab56111d 100644
--- a/src/output/Sandbox.vue
+++ b/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)
     },
   })
 
diff --git a/src/output/srcdoc.html b/src/output/srcdoc.html
index aabc617f..e7d821cb 100644
--- a/src/output/srcdoc.html
+++ b/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`],
               },
               '*',
             )
diff --git a/src/types.ts b/src/types.ts
index 19b8c609..5021fba1 100644
--- a/src/types.ts
+++ b/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

From 83ba6836376b22a98d5b6d5725a1967dd6f7da24 Mon Sep 17 00:00:00 2001
From: Dsaquel <noblet.ouwaysgta5@gmail.com>
Date: Wed, 16 Apr 2025 23:05:05 +0200
Subject: [PATCH 11/17] chore: tweaks

---
 src/Repl.vue           |  4 ----
 src/output/Output.vue  | 11 ++++++++++-
 src/output/srcdoc.html | 17 +++++++----------
 3 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/src/Repl.vue b/src/Repl.vue
index 2aa68276..cfda0337 100644
--- a/src/Repl.vue
+++ b/src/Repl.vue
@@ -9,10 +9,6 @@ import {
   injectKeyProps,
 } from './types'
 import EditorContainer from './editor/EditorContainer.vue'
-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'
 
 import type * as monaco from 'monaco-editor-core'
 
diff --git a/src/output/Output.vue b/src/output/Output.vue
index e0e0df9d..7bd2a595 100644
--- a/src/output/Output.vue
+++ b/src/output/Output.vue
@@ -50,7 +50,16 @@ function createConsole() {
   lunaConsole.value = new LunaConsole(consoleContainerRef.value, {
     theme: theme.value || 'light',
   })
-  lunaWatcher ??= watch(() => store.value.activeFile.code, clearLunaConsole)
+  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()
 }
 
diff --git a/src/output/srcdoc.html b/src/output/srcdoc.html
index e7d821cb..f3e924d1 100644
--- a/src/output/srcdoc.html
+++ b/src/output/srcdoc.html
@@ -168,21 +168,18 @@
               }
               original(...args)
 
-              const clonnable = await new Promise((res) => {
-                try {
-                  structuredClone(args)
-                  res(true)
-                } catch {
-                  res(false)
-                }
-              })
+              const postMessage = () =>
+                parent.postMessage({ action: 'console', level, args }, '*')
 
-              if (!clonnable)
+              try {
+                postMessage()
+              } catch {
                 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 }, '*')
+                postMessage()
+              }
             }
           },
         )

From 150946f5643582816c09abf56b0bdc5217c75f00 Mon Sep 17 00:00:00 2001
From: Dsaquel <noblet.ouwaysgta5@gmail.com>
Date: Thu, 17 Apr 2025 13:10:26 +0200
Subject: [PATCH 12/17] chore: deplace LunaConsole

---
 src/Repl.vue               | 16 ++++++-
 src/output/LunaConsole.vue | 62 ++++++++++++++++++++++++++
 src/output/Output.vue      | 91 +++-----------------------------------
 src/output/Preview.vue     |  5 +--
 src/output/Sandbox.vue     | 20 ++++-----
 src/output/srcdoc.html     |  2 +-
 src/store.ts               | 11 ++++-
 src/types.ts               |  2 +
 8 files changed, 108 insertions(+), 101 deletions(-)
 create mode 100644 src/output/LunaConsole.vue

diff --git a/src/Repl.vue b/src/Repl.vue
index cfda0337..17fd97b3 100644
--- a/src/Repl.vue
+++ b/src/Repl.vue
@@ -2,8 +2,9 @@
 import SplitPane from './SplitPane.vue'
 import Output from './output/Output.vue'
 import { type Store, useStore } from './store'
-import { computed, provide, toRefs, useTemplateRef } from 'vue'
+import { computed, provide, toRefs, useTemplateRef, watchEffect } from 'vue'
 import {
+  type ConsoleComponentType,
   type EditorComponentType,
   injectKeyPreviewRef,
   injectKeyProps,
@@ -16,6 +17,7 @@ export interface Props {
   theme?: 'dark' | 'light'
   previewTheme?: boolean
   editor: EditorComponentType
+  console?: ConsoleComponentType
   store?: Store
   autoResize?: boolean
   showCompileOutput?: boolean
@@ -57,6 +59,7 @@ const props = withDefaults(defineProps<Props>(), {
   showCompileOutput: true,
   showImportMap: true,
   showTsConfig: true,
+  showConsole: false,
   clearConsole: true,
   layoutReverse: false,
   ssr: false,
@@ -69,6 +72,15 @@ const props = withDefaults(defineProps<Props>(), {
 if (!props.editor) {
   throw new Error('The "editor" prop is now required.')
 }
+watchEffect(() => {
+  if (!!props.showConsole && !props.console)
+    throw new Error(
+      'If you want to enable a console "console" prop is required.',
+    )
+})
+const consoleWrapper = computed<ConsoleComponentType>(
+  () => props.console ?? (() => ({})),
+)
 
 const outputRef = useTemplateRef('output')
 
@@ -79,6 +91,7 @@ const outputSlotName = computed(() => (props.layoutReverse ? 'left' : 'right'))
 
 provide(injectKeyProps, {
   ...toRefs(props),
+  console: consoleWrapper,
   autoSave,
 })
 provide(
@@ -106,6 +119,7 @@ defineExpose({ reload })
         <Output
           ref="output"
           :editor-component="editor"
+          :console-component="consoleWrapper"
           :show-compile-output="props.showCompileOutput"
           :ssr="!!props.ssr"
         />
diff --git a/src/output/LunaConsole.vue b/src/output/LunaConsole.vue
new file mode 100644
index 00000000..98c39183
--- /dev/null
+++ b/src/output/LunaConsole.vue
@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { inject, 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-data-grid/luna-data-grid.css'
+import 'luna-dom-viewer/luna-dom-viewer.css'
+import 'luna-console/luna-console.css'
+
+const { store, theme } = inject(injectKeyProps)!
+const lunaRef = useTemplateRef('luna-ref')
+const lunaConsole = ref<LunaConsole>()
+
+onMounted(() => {
+  if (!lunaRef.value) return
+  lunaConsole.value = new LunaConsole(lunaRef.value, {
+    theme: theme.value || 'light',
+  })
+  store.value.executeLog = ({ logLevel, data = [] }: LogPayload) => {
+    ;(lunaConsole.value?.[logLevel] as any)?.(...data)
+  }
+})
+
+function clearLunaConsole() {
+  lunaConsole.value?.clear(true)
+}
+
+watch(() => store.value.activeFile.code, clearLunaConsole)
+</script>
+
+<template>
+  <div class="console-container">
+    <div ref="luna-ref" />
+    <button class="clear-btn" @click="clearLunaConsole">clear</button>
+  </div>
+</template>
+
+<style scoped>
+.console-container {
+  height: 100%;
+  width: 100%;
+}
+.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>
diff --git a/src/output/Output.vue b/src/output/Output.vue
index 7bd2a595..4d16aeb0 100644
--- a/src/output/Output.vue
+++ b/src/output/Output.vue
@@ -1,67 +1,23 @@
 <script setup lang="ts">
 import Preview from './Preview.vue'
 import SplitPane from '../SplitPane.vue'
+import { computed, inject, useTemplateRef } from 'vue'
 import {
-  computed,
-  inject,
-  onMounted,
-  ref,
-  useTemplateRef,
-  watch,
-  type WatchHandle,
-} from 'vue'
-import LunaConsole from 'luna-console'
-import {
+  type ConsoleComponentType,
   type EditorComponentType,
-  type LogPayload,
   type OutputModes,
   injectKeyProps,
 } from '../types'
 
 const props = defineProps<{
   editorComponent: EditorComponentType
+  consoleComponent: ConsoleComponentType
   showCompileOutput?: boolean
   ssr: boolean
 }>()
 
-const { store, showConsole, theme } = inject(injectKeyProps)!
+const { store, showConsole } = 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
@@ -81,17 +37,9 @@ 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()
+  //clearLunaConsole()
 }
 
 defineExpose({ reload, previewRef })
@@ -112,16 +60,10 @@ defineExpose({ reload, previewRef })
   <div class="output-container">
     <SplitPane v-if="showConsole" layout="vertical">
       <template #left>
-        <Preview
-          ref="preview"
-          :show="mode === 'preview'"
-          :ssr="ssr"
-          @log="onLog"
-        />
+        <Preview ref="preview" :show="mode === 'preview'" :ssr="ssr" />
       </template>
       <template #right>
-        <div ref="console-container" />
-        <button class="clear-btn" @click="clearLunaConsole">clear</button>
+        <props.consoleComponent />
       </template>
     </SplitPane>
     <Preview v-else ref="preview" :show="mode === 'preview'" :ssr="ssr" />
@@ -166,23 +108,4 @@ 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>
diff --git a/src/output/Preview.vue b/src/output/Preview.vue
index d082113c..0b37fdb9 100644
--- a/src/output/Preview.vue
+++ b/src/output/Preview.vue
@@ -1,13 +1,12 @@
 <script setup lang="ts">
 import { computed, inject, useTemplateRef } from 'vue'
-import { injectKeyProps, SandboxEmits } from '../../src/types'
+import { injectKeyProps } from '../../src/types'
 import Sandbox from './Sandbox.vue'
 
 const props = defineProps<{
   show: boolean
   ssr: boolean
 }>()
-const emit = defineEmits<SandboxEmits>()
 
 const { store, clearConsole, theme, previewTheme, previewOptions } =
   inject(injectKeyProps)!
@@ -34,6 +33,6 @@ defineExpose({
     :preview-options="previewOptions"
     :ssr="props.ssr"
     :clear-console="clearConsole"
-    @log="(p) => emit('log', p)"
+    @log="store.executeLog"
   />
 </template>
diff --git a/src/output/Sandbox.vue b/src/output/Sandbox.vue
index ab56111d..00e6c7a1 100644
--- a/src/output/Sandbox.vue
+++ b/src/output/Sandbox.vue
@@ -167,18 +167,16 @@ function createSandbox() {
         } else if (!maybeMsg.includes('%c Cannot clone the message')) {
           runtimeError.value = maybeMsg
         }
-        doLog('warn', log.args)
-      } else if (log.level === '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)
+      } 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) => {
       doLog('group', action.label)
diff --git a/src/output/srcdoc.html b/src/output/srcdoc.html
index f3e924d1..b05017d2 100644
--- a/src/output/srcdoc.html
+++ b/src/output/srcdoc.html
@@ -156,7 +156,7 @@
         ;['clear', 'log', 'info', 'dir', 'warn', 'error', 'table'].forEach(
           (level) => {
             const original = console[level]
-            console[level] = async (...args) => {
+            console[level] = (...args) => {
               const msg = args[0]
               if (typeof msg === 'string') {
                 if (
diff --git a/src/store.ts b/src/store.ts
index 2508b679..c4462e16 100644
--- a/src/store.ts
+++ b/src/store.ts
@@ -16,7 +16,7 @@ import type {
   SFCScriptCompileOptions,
   SFCTemplateCompileOptions,
 } from 'vue/compiler-sfc'
-import type { OutputModes } from './types'
+import type { LogPayload, OutputModes } from './types'
 import type { editor } from 'monaco-editor-core'
 import { type ImportMap, mergeImportMap, useVueImportMap } from './import-map'
 
@@ -48,6 +48,7 @@ export function useStore(
     typescriptVersion = ref('latest'),
     dependencyVersion = ref(Object.create(null)),
     reloadLanguageTools = ref(),
+    executeLog = ref(),
   }: Partial<StoreState> = {},
   serializedState?: string,
 ): ReplStore {
@@ -389,6 +390,7 @@ export function useStore(
     deserialize,
     getFiles,
     setFiles,
+    executeLog,
   })
   return store
 }
@@ -440,6 +442,11 @@ export type StoreState = ToRefs<{
   /** \{ dependencyName: version \} */
   dependencyVersion: Record<string, string>
   reloadLanguageTools?: (() => void) | undefined
+  /**
+   * If you enabled "showConsole" and have a custom "console" then you must provide this function.
+   * @param payload - payload of a console static method output
+   */
+  executeLog?: (payload: LogPayload) => void
 }>
 
 export interface ReplStore extends UnwrapRef<StoreState> {
@@ -463,6 +470,7 @@ export interface ReplStore extends UnwrapRef<StoreState> {
   deserialize(serializedState: string, checkBuiltinImportMap?: boolean): void
   getFiles(): Record<string, string>
   setFiles(newFiles: Record<string, string>, mainFile?: string): Promise<void>
+  executeLog?(payload: LogPayload): void
 }
 
 export type Store = Pick<
@@ -487,6 +495,7 @@ export type Store = Pick<
   | 'renameFile'
   | 'getImportMap'
   | 'getTsConfig'
+  | 'executeLog'
 >
 
 export class File {
diff --git a/src/types.ts b/src/types.ts
index 5021fba1..9d063c55 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -39,6 +39,8 @@ export interface SandboxEmits {
 }
 export type EditorComponentType = Component<EditorProps>
 
+export type ConsoleComponentType = Component
+
 export type OutputModes = 'preview' | EditorMode
 
 export const injectKeyProps: InjectionKey<

From 3d2d04e9472cf5bd6aa3a3b6f61e3fe16ca515ee Mon Sep 17 00:00:00 2001
From: Dsaquel <noblet.ouwaysgta5@gmail.com>
Date: Thu, 17 Apr 2025 13:22:36 +0200
Subject: [PATCH 13/17] chore: drop luna-dom-viewer

---
 package.json               | 1 -
 pnpm-lock.yaml             | 3 ---
 src/output/LunaConsole.vue | 1 -
 3 files changed, 5 deletions(-)

diff --git a/package.json b/package.json
index 00a532c8..713d5d91 100644
--- a/package.json
+++ b/package.json
@@ -113,7 +113,6 @@
     "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"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 973cb12e..ce24aef1 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -83,9 +83,6 @@ importers:
       luna-data-grid:
         specifier: ^1.3.0
         version: 1.4.1
-      luna-dom-viewer:
-        specifier: ^1.4.0
-        version: 1.8.2
       luna-object-viewer:
         specifier: ^0.3.1
         version: 0.3.1
diff --git a/src/output/LunaConsole.vue b/src/output/LunaConsole.vue
index 98c39183..708bc2ba 100644
--- a/src/output/LunaConsole.vue
+++ b/src/output/LunaConsole.vue
@@ -4,7 +4,6 @@ import LunaConsole from 'luna-console'
 import { type LogPayload, injectKeyProps } from '../types'
 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'
 
 const { store, theme } = inject(injectKeyProps)!

From 809522251014764120eb9c0769a5ea6a27f0c216 Mon Sep 17 00:00:00 2001
From: Dsaquel <noblet.ouwaysgta5@gmail.com>
Date: Fri, 18 Apr 2025 00:27:18 +0200
Subject: [PATCH 14/17] chore: handles logs to be part of plugin

---
 src/output/Sandbox.vue |   2 +-
 src/output/srcdoc.html | 189 +++++++++++------------------------------
 src/types.ts           |   1 +
 3 files changed, 53 insertions(+), 139 deletions(-)

diff --git a/src/output/Sandbox.vue b/src/output/Sandbox.vue
index 00e6c7a1..69779c71 100644
--- a/src/output/Sandbox.vue
+++ b/src/output/Sandbox.vue
@@ -164,7 +164,7 @@ function createSandbox() {
       if (log.level === 'error') {
         if (maybeMsg instanceof Error) {
           runtimeError.value = maybeMsg.message
-        } else if (!maybeMsg.includes('%c Cannot clone the message')) {
+        } else if (!maybeMsg?.startsWith('[vue-repl]')) {
           runtimeError.value = maybeMsg
         }
       } else if (
diff --git a/src/output/srcdoc.html b/src/output/srcdoc.html
index b05017d2..b536467a 100644
--- a/src/output/srcdoc.html
+++ b/src/output/srcdoc.html
@@ -153,36 +153,51 @@
             )
           }
         })
-        ;['clear', 'log', 'info', 'dir', 'warn', 'error', 'table'].forEach(
-          (level) => {
-            const original = console[level]
-            console[level] = (...args) => {
-              const msg = args[0]
-              if (typeof msg === 'string') {
-                if (
-                  msg.includes('You are running a development build of Vue') ||
-                  msg.includes('You are running the esm-bundler build of Vue')
-                ) {
-                  return
-                }
+        const errorColorStr = 'color: #fb2c36'
+        const errorMsg = 'please open the devtool to see correctly this log'
+        ;[
+          'clear',
+          'log',
+          'info',
+          'dir',
+          'warn',
+          'error',
+          'table',
+          'debug',
+          'time',
+          'timeLog',
+          'timeEnd',
+          'assert',
+          'count',
+          'countReset',
+        ].forEach((level) => {
+          const original = console[level]
+          console[level] = async (...args) => {
+            const msg = args[0]
+            if (typeof msg === 'string') {
+              if (
+                msg.includes('You are running a development build of Vue') ||
+                msg.includes('You are running the esm-bundler build of Vue')
+              ) {
+                return
               }
-              original(...args)
-
-              const postMessage = () =>
-                parent.postMessage({ action: 'console', level, args }, '*')
-
-              try {
-                postMessage()
-              } catch {
+            }
+            original(...args)
+            const postMessage = () =>
+              parent.postMessage({ action: 'console', level, args }, '*')
+            try {
+              postMessage()
+            } catch {
+              args = args.map(toString)
+              if (!args?.[0]?.startsWith('[Vue warn]'))
                 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',
+                  `[vue-repl]: %c Cannot clone the message, ${errorMsg}. Supported types are listed here: https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Structured_clone_algorithm#javascript_types`,
+                  errorColorStr,
                 ]
-                postMessage()
-              }
+              postMessage()
             }
-          },
-        )
+          }
+        })
         ;[
           { method: 'group', action: 'console_group' },
           { method: 'groupEnd', action: 'console_group_end' },
@@ -195,119 +210,17 @@
             original(label)
           }
         })
-
-        const timers = new Map()
-        const original_time = console.time
-        const original_timelog = console.timeLog
-        const original_timeend = console.timeEnd
-
-        console.time = (label = 'default') => {
-          original_time(label)
-          timers.set(label, performance.now())
-        }
-        console.timeLog = (label = 'default') => {
-          original_timelog(label)
-          const now = performance.now()
-          if (timers.has(label)) {
-            parent.postMessage(
-              {
-                action: 'console',
-                level: 'log',
-                args: [`${label}: ${now - timers.get(label)}ms`],
-              },
-              '*',
-            )
-          } else {
-            parent.postMessage(
-              {
-                action: 'console',
-                level: 'warn',
-                args: [`Timer '${label}' does not exist`],
-              },
-              '*',
-            )
-          }
-        }
-        console.timeEnd = (label = 'default') => {
-          original_timeend(label)
-          const now = performance.now()
-          if (timers.has(label)) {
-            parent.postMessage(
-              {
-                action: 'console',
-                level: 'log',
-                args: [`${label}: ${now - timers.get(label)}ms`],
-              },
-              '*',
-            )
-          } else {
-            parent.postMessage(
-              {
-                action: 'console',
-                level: 'warn',
-                args: [`Timer '${label}' does not exist`],
-              },
-              '*',
-            )
+        ;['profile', 'profileEnd', 'trace', 'dirXml'].forEach((level) => {
+          const original = console[level]
+          console[level] = () => {
+            original()
+            const args = [
+              `[vue-repl]: %c Cannot handle "${level}" log, ${errorMsg}.`,
+              errorColorStr,
+            ]
+            parent.postMessage({ action: 'console', level: 'log', args }, '*')
           }
-          timers.delete(label)
-        }
-
-        const original_assert = console.assert
-        console.assert = (condition, ...args) => {
-          if (condition) {
-            const stack = new Error().stack
-            parent.postMessage(
-              { action: 'console', level: 'assert', args, stack },
-              '*',
-            )
-          }
-          original_assert(condition, ...args)
-        }
-
-        const counter = new Map()
-        const original_count = console.count
-        const original_countreset = console.countReset
-
-        console.count = (label = 'default') => {
-          counter.set(label, (counter.get(label) || 0) + 1)
-          parent.postMessage(
-            {
-              action: 'console',
-              level: 'log',
-              args: [`${label}: ${counter.get(label)}`],
-            },
-            '*',
-          )
-          original_count(label)
-        }
-
-        console.countReset = (label = 'default') => {
-          if (counter.has(label)) {
-            counter.set(label, 0)
-          } else {
-            parent.postMessage(
-              {
-                action: 'console',
-                level: 'warn',
-                args: [`Count for '${label}' does not exist`],
-              },
-              '*',
-            )
-          }
-          original_countreset(label)
-        }
-
-        const original_trace = console.trace
-
-        console.trace = (...args) => {
-          const stack = new Error().stack
-          parent.postMessage(
-            { action: 'console', level: 'trace', args, stack },
-            '*',
-          )
-          original_trace(...args)
-        }
+        })
 
         function toString(value) {
           if (value instanceof Error) {
diff --git a/src/types.ts b/src/types.ts
index 9d063c55..c20eb86b 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -9,6 +9,7 @@ export interface EditorProps {
   mode?: EditorMode
 }
 export type LogLevel =
+  | 'clear'
   | 'log'
   | 'error'
   | 'warn'

From d436fef9aac7da5a6c3d667a46956e1bcd2115bf Mon Sep 17 00:00:00 2001
From: Dsaquel <noblet.ouwaysgta5@gmail.com>
Date: Fri, 18 Apr 2025 00:40:41 +0200
Subject: [PATCH 15/17] chore: externalize clearConsole

---
 src/output/LunaConsole.vue | 1 +
 src/output/Output.vue      | 2 +-
 src/store.ts               | 8 ++++++++
 3 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/output/LunaConsole.vue b/src/output/LunaConsole.vue
index 708bc2ba..75e3dca9 100644
--- a/src/output/LunaConsole.vue
+++ b/src/output/LunaConsole.vue
@@ -18,6 +18,7 @@ onMounted(() => {
   store.value.executeLog = ({ logLevel, data = [] }: LogPayload) => {
     ;(lunaConsole.value?.[logLevel] as any)?.(...data)
   }
+  store.value.clearConsole = clearLunaConsole
 })
 
 function clearLunaConsole() {
diff --git a/src/output/Output.vue b/src/output/Output.vue
index 4d16aeb0..931b5470 100644
--- a/src/output/Output.vue
+++ b/src/output/Output.vue
@@ -39,7 +39,7 @@ const mode = computed<OutputModes>({
 
 function reload() {
   previewRef.value?.reload()
-  //clearLunaConsole()
+  store.value.clearConsole?.()
 }
 
 defineExpose({ reload, previewRef })
diff --git a/src/store.ts b/src/store.ts
index c4462e16..393c0552 100644
--- a/src/store.ts
+++ b/src/store.ts
@@ -49,6 +49,7 @@ export function useStore(
     dependencyVersion = ref(Object.create(null)),
     reloadLanguageTools = ref(),
     executeLog = ref(),
+    clearConsole = ref(),
   }: Partial<StoreState> = {},
   serializedState?: string,
 ): ReplStore {
@@ -391,6 +392,7 @@ export function useStore(
     getFiles,
     setFiles,
     executeLog,
+    clearConsole,
   })
   return store
 }
@@ -447,6 +449,10 @@ export type StoreState = ToRefs<{
    * @param payload - payload of a console static method output
    */
   executeLog?: (payload: LogPayload) => void
+  /**
+   * If you enabled "showConsole" and have a custom "console" then you must provide this function.
+   */
+  clearConsole?: () => void
 }>
 
 export interface ReplStore extends UnwrapRef<StoreState> {
@@ -471,6 +477,7 @@ export interface ReplStore extends UnwrapRef<StoreState> {
   getFiles(): Record<string, string>
   setFiles(newFiles: Record<string, string>, mainFile?: string): Promise<void>
   executeLog?(payload: LogPayload): void
+  clearConsole?(): void
 }
 
 export type Store = Pick<
@@ -496,6 +503,7 @@ export type Store = Pick<
   | 'getImportMap'
   | 'getTsConfig'
   | 'executeLog'
+  | 'clearConsole'
 >
 
 export class File {

From b8a7a51aee40c80262d6bfffe9b49adcc53400d9 Mon Sep 17 00:00:00 2001
From: Dsaquel <noblet.ouwaysgta5@gmail.com>
Date: Fri, 18 Apr 2025 01:12:54 +0200
Subject: [PATCH 16/17] chore: set in exports & doc

---
 README.md              | 16 ++++++++++++++++
 package.json           |  5 +++++
 src/output/srcdoc.html |  2 +-
 vite.config.ts         |  1 +
 4 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index b529b203..5f790799 100644
--- a/README.md
+++ b/README.md
@@ -51,6 +51,22 @@ import Monaco from '@vue/repl/monaco-editor'
 </template>
 ```
 
+### With Luna Console (4.5.2)
+
+Console UI to print console logs.
+**Be aware**: Because we are getting logs that pass into a `postMessage` they are some types/logs that are currently not supported such as elements html, declared functions, `console.trace()`, etc... More of the supported types [here](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Structured_clone_algorithm#things_that_dont_work_with_structured_clone).
+
+```vue
+<script setup>
+import { Repl } from '@vue/repl'
+import LunaConsole from '@vue/repl/luna-console'
+</script>
+
+<template>
+  <Repl showConsole :console="LunaConsole" />
+</template>
+```
+
 ## Advanced Usage
 
 Customize the behavior of the REPL by manually initializing the store.
diff --git a/package.json b/package.json
index 713d5d91..a02536bd 100644
--- a/package.json
+++ b/package.json
@@ -26,6 +26,11 @@
       "import": "./dist/codemirror-editor.js",
       "require": null
     },
+    "./luna-console": {
+      "types": "./dist/luna-console.d.ts",
+      "import": "./dist/luna-console.js",
+      "require": null
+    },
     "./core": {
       "types": "./dist/core.d.ts",
       "import": "./dist/core.js",
diff --git a/src/output/srcdoc.html b/src/output/srcdoc.html
index b536467a..1b6e7be1 100644
--- a/src/output/srcdoc.html
+++ b/src/output/srcdoc.html
@@ -172,7 +172,7 @@
           'countReset',
         ].forEach((level) => {
           const original = console[level]
-          console[level] = async (...args) => {
+          console[level] = (...args) => {
             const msg = args[0]
             if (typeof msg === 'string') {
               if (
diff --git a/vite.config.ts b/vite.config.ts
index 1b007b87..9036bf3b 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -60,6 +60,7 @@ export default mergeConfig(base, {
         core: './src/core.ts',
         'monaco-editor': './src/editor/MonacoEditor.vue',
         'codemirror-editor': './src/editor/CodeMirrorEditor.vue',
+        'luna-console': './src/output/LunaConsole.vue',
       },
       formats: ['es'],
       fileName: () => '[name].js',

From b55497611c7db48c446f044e1e56b57c980167f3 Mon Sep 17 00:00:00 2001
From: Dsaquel <noblet.ouwaysgta5@gmail.com>
Date: Fri, 18 Apr 2025 01:26:53 +0200
Subject: [PATCH 17/17] chore: deplace actions console to intern store

---
 src/store.ts | 13 ++-----------
 1 file changed, 2 insertions(+), 11 deletions(-)

diff --git a/src/store.ts b/src/store.ts
index 393c0552..6af3a79c 100644
--- a/src/store.ts
+++ b/src/store.ts
@@ -48,8 +48,6 @@ export function useStore(
     typescriptVersion = ref('latest'),
     dependencyVersion = ref(Object.create(null)),
     reloadLanguageTools = ref(),
-    executeLog = ref(),
-    clearConsole = ref(),
   }: Partial<StoreState> = {},
   serializedState?: string,
 ): ReplStore {
@@ -355,6 +353,8 @@ export function useStore(
   }
   activeFilename ||= ref(mainFile.value)
   const activeFile = computed(() => files.value[activeFilename.value])
+  const executeLog = ref()
+  const clearConsole = ref()
 
   applyBuiltinImportMap()
 
@@ -444,15 +444,6 @@ export type StoreState = ToRefs<{
   /** \{ dependencyName: version \} */
   dependencyVersion: Record<string, string>
   reloadLanguageTools?: (() => void) | undefined
-  /**
-   * If you enabled "showConsole" and have a custom "console" then you must provide this function.
-   * @param payload - payload of a console static method output
-   */
-  executeLog?: (payload: LogPayload) => void
-  /**
-   * If you enabled "showConsole" and have a custom "console" then you must provide this function.
-   */
-  clearConsole?: () => void
 }>
 
 export interface ReplStore extends UnwrapRef<StoreState> {