fix: update preview debug & dependencies

package.json

@@ -19,11 +19,11 @@
     "@vue/compiler-sfc": "^3.2.47",
     "acorn": "^8.8.2",
     "acorn-walk": "^8.2.0",
-    "core-js": "^3.30.1",
+    "core-js": "^3.30.2",
     "debounce": "^1.2.1",
     "hash-sum": "^2.0.0",
     "prismjs": "^1.29.0",
-    "vue-inbrowser-compiler-sucrase": "^4.72.0",
+    "vue-inbrowser-compiler-sucrase": "^4.72.1",
     "vue-inbrowser-prismjs-highlighter": "^4.69.1",
     "vue-prism-editor": "^2.0.0-alpha.2"
   },
@@ -32,7 +32,7 @@
     "@types/debounce": "^1.2.1",
     "@types/hash-sum": "^1.0.0",
     "@types/jsdom": "^21.1.1",
-    "@types/node": "^20.0.0",
+    "@types/node": "^20.1.0",
     "@types/prismjs": "^1.26.0",
     "@uivjs/vue-github-corners": "^1.0.1",
     "@vitejs/plugin-vue": "^4.2.1",

src/Preview.vue

@@ -161,7 +161,9 @@ export default defineComponent({
             } : {},
             scopeAttribute
         );
-        this.compiledCodeForDebug = JSON.stringify(renderedComponent)
+        if(this.debug){
+          this.compiledCodeForDebug = Object.entries(renderedComponent).map(([key, code]) => typeof code === 'string' ? `<${key}>\n${code}\n</${key}>` : '').join("\n\n")
+        }
         style = renderedComponent.style;
         if (renderedComponent.script) {
           // if the compiled code contains a script it might be "just" a script