diff --git a/sites/svelte-5-preview/src/lib/Output/console/ConsoleLine.svelte b/sites/svelte-5-preview/src/lib/Output/console/ConsoleLine.svelte
index f990cdc1be..36635c7130 100644
--- a/sites/svelte-5-preview/src/lib/Output/console/ConsoleLine.svelte
+++ b/sites/svelte-5-preview/src/lib/Output/console/ConsoleLine.svelte
@@ -4,11 +4,101 @@
/** @type {import('./console').Log} */
export let log;
- export let depth = 1;
+ export let depth = 0;
function toggle_group_collapse() {
log.collapsed = !log.collapsed;
}
+
+ let style;
+
+ /** @param {string} text */
+ function sanitize_css(text) {
+ style ??= document.createElement('span').style;
+ style.cssText = text;
+
+ for (const key in style) {
+ const value = style[key];
+ if (typeof value === 'string' && value.includes('url(')) {
+ style[key] = value.replace(/url\([^)]+\)/g, '');
+ }
+ }
+
+ style.position = 'static';
+ return style.cssText;
+ }
+
+ /** @param {any[]} [args] */
+ function format_args(args = []) {
+ if (args.length === 0) return args;
+
+ if (typeof args[0] !== 'string') {
+ return args.map((value) => ({ type: 'value', value }));
+ }
+
+ args = args.slice();
+
+ const parts = args.shift().split(/(%[sdifoOc])/g);
+
+ const formatted = [];
+
+ if (parts[0] !== '') {
+ formatted.push({ type: 'value', value: parts[0] });
+ }
+
+ for (let i = 1; i < parts.length; i += 2) {
+ const type = parts[i];
+ const next = parts[i + 1];
+ const value = args.shift();
+
+ switch (type) {
+ case '%s':
+ formatted.push({ type: 'value', value: String(value), formatted: true });
+ break;
+
+ case '%d':
+ case '%i':
+ formatted.push({
+ type: 'value',
+ value: typeof value === 'symbol' ? NaN : parseInt(value, 10),
+ formatted: true
+ });
+ break;
+
+ case '%f':
+ formatted.push({
+ type: 'value',
+ value: typeof value === 'symbol' ? NaN : parseFloat(value),
+ formatted: true
+ });
+ break;
+
+ case '%o':
+ case '%O':
+ formatted.push({ type: 'value', value, formatted: true });
+ break;
+
+ case '%c':
+ formatted.push({
+ type: 'style',
+ style: sanitize_css(String(value)),
+ value: next,
+ formatted: true
+ });
+ break;
+ }
+
+ if (type !== '%c' && next !== '') {
+ formatted.push({ type: 'value', value: next, formatted: true });
+ }
+ }
+
+ for (const value of args) {
+ formatted.push({ type: 'value', value });
+ }
+
+ return formatted;
+ }
{#if log.command === 'table'}
@@ -39,9 +129,18 @@
{:else if log.command === 'table'}