@svelterm/core 0.1.0 → 0.21.0

package/dist/src/debug/dom.d.ts

@@ -0,0 +1,17 @@
+/**
+ * DOM domain — tree inspection and live mutation over the debug
+ * protocol. Serialises the TermNode tree (tags, attributes, text), finds
+ * nodes by selector, reports box models, and edits attributes.
+ */
+import { type DebugContext } from './context.js';
+import type { DebugDomain } from './server.js';
+export declare class DomDomain implements DebugDomain {
+    private ctx;
+    constructor(ctx: DebugContext);
+    handle(method: string, params: Record<string, any>): any;
+    private firstMatch;
+    private node;
+    private boxModel;
+    private setAttribute;
+    private removeAttribute;
+}

package/dist/src/debug/dom.js

@@ -0,0 +1,92 @@
+/**
+ * DOM domain — tree inspection and live mutation over the debug
+ * protocol. Serialises the TermNode tree (tags, attributes, text), finds
+ * nodes by selector, reports box models, and edits attributes.
+ */
+import { matchesSelector } from '../css/selector.js';
+import { findNodeById } from './context.js';
+export class DomDomain {
+    ctx;
+    constructor(ctx) {
+        this.ctx = ctx;
+    }
+    handle(method, params) {
+        switch (method) {
+            case 'getDocument':
+                return { root: serialise(this.ctx.root) };
+            case 'querySelector':
+                return { nodeId: this.firstMatch(params.selector)?.id ?? null };
+            case 'getBoxModel':
+                return this.boxModel(params.nodeId);
+            case 'setAttribute':
+                return this.setAttribute(params.nodeId, params.name, params.value);
+            case 'removeAttribute':
+                return this.removeAttribute(params.nodeId, params.name);
+            default:
+                throw new Error(`DOM.${method} not implemented`);
+        }
+    }
+    firstMatch(selector) {
+        const walk = (node) => {
+            if (node.nodeType === 'element' && matchesSelector(node, selector))
+                return node;
+            for (const child of node.children) {
+                const found = walk(child);
+                if (found)
+                    return found;
+            }
+            return null;
+        };
+        for (const child of this.ctx.root.children) {
+            const found = walk(child);
+            if (found)
+                return found;
+        }
+        return null;
+    }
+    node(nodeId) {
+        const node = findNodeById(this.ctx.root, nodeId);
+        if (!node)
+            throw new Error(`No node with id ${nodeId}`);
+        return node;
+    }
+    boxModel(nodeId) {
+        const box = this.ctx.layout()?.get(nodeId);
+        if (!box)
+            throw new Error(`No layout for node ${nodeId}`);
+        return { x: box.x, y: box.y, width: box.width, height: box.height };
+    }
+    setAttribute(nodeId, name, value) {
+        const node = this.node(nodeId);
+        if (node.ctx)
+            node.ctx.onSetAttribute(node, name, value);
+        else
+            node.attributes.set(name, value);
+        this.ctx.requestRender?.();
+        return {};
+    }
+    removeAttribute(nodeId, name) {
+        const node = this.node(nodeId);
+        if (node.ctx)
+            node.ctx.onRemoveAttribute(node, name);
+        else
+            node.attributes.delete(name);
+        this.ctx.requestRender?.();
+        return {};
+    }
+}
+function serialise(node) {
+    const out = {
+        nodeId: node.id,
+        nodeType: node.nodeType,
+        children: node.children.map(serialise),
+    };
+    if (node.tag)
+        out.tag = node.tag;
+    if (node.nodeType === 'text')
+        out.text = node.text ?? '';
+    if (node.attributes.size > 0) {
+        out.attributes = Object.fromEntries(node.attributes);
+    }
+    return out;
+}

package/dist/src/devtools/DevTools.compiled.js

@@ -0,0 +1,327 @@
+import $renderer from '@svelterm/core';
+import 'svelte/internal/disclose-version';
+import * as $ from 'svelte/internal/client';
+import { connectDebugClient, flattenTree } from './client.js';
+
+var root = $.from_tree([
+	[
+		'div',
+		null,
+		['span', { class: 'marker svelte-1dtdv2u' }, ' '],
+		' '
+	]
+]);
+
+var root_1 = $.from_tree([['div', { class: 'empty svelte-1dtdv2u' }, 'no nodes']]);
+var root_2 = $.from_tree([['div', { class: 'prop svelte-1dtdv2u' }, ' ']]);
+
+var root_3 = $.from_tree(
+	[
+		[
+			'div',
+			{ class: 'detail-title svelte-1dtdv2u' },
+			'computed style'
+		],
+		' ',,
+	],
+	1
+);
+
+var root_4 = $.from_tree(
+	[
+		['div', { class: 'detail-title svelte-1dtdv2u' }, 'box'],
+		' ',
+		['div', { class: 'prop svelte-1dtdv2u' }, ' '],
+		' ',
+		['div', { class: 'prop svelte-1dtdv2u' }, ' ']
+	],
+	1
+);
+
+var root_5 = $.from_tree([['div', { class: 'prop dim svelte-1dtdv2u' }, ' ']]);
+
+var root_6 = $.from_tree([
+	['div', { class: 'prop dim svelte-1dtdv2u' }, 'select a node']
+]);
+
+var root_7 = $.from_tree([
+	[
+		'div',
+		{ class: 'devtools svelte-1dtdv2u' },
+		['div', { class: 'header svelte-1dtdv2u' }, ' '],
+		' ',
+		[
+			'div',
+			{ class: 'panes svelte-1dtdv2u' },
+			[
+				'div',
+				{ class: 'tree svelte-1dtdv2u', tabindex: '0' },,
+				' ',,
+			],
+			' ',
+			[
+				'div',
+				{ class: 'detail svelte-1dtdv2u' },,
+				' ',,
+				' ',,
+				' ',,
+			]
+		]
+	]
+]);
+
+export default function DevTools($$anchor, $$props) {
+	var $$pop_renderer = $.push_renderer($renderer);
+
+	$.push($$props, true);
+
+	let port = $.prop($$props, 'port', 3, 9444);
+	let status = $.state('connecting…');
+	let doc = $.state(null);
+	let collapsed = $.state($.proxy(new Set()));
+	let selected = $.state(0);
+	let detail = $.state(null);
+	let client = null;
+	let rows = $.derived(() => $.get(doc) ? flattenTree($.get(doc).root, $.get(collapsed)) : []);
+
+	async function refresh() {
+		if (!client) return;
+
+		try {
+			$.set(doc, await client.request('DOM.getDocument').then((r) => r), true);
+
+			if ($.get(selected) >= $.get(rows).length) $.set(selected, Math.max(0, $.get(rows).length - 1), true);
+
+			$.set(status, `${$.get(rows).length} nodes`);
+			await loadDetail();
+		} catch(err) {
+			$.set(status, 'error: ' + (err?.message ?? err));
+		}
+	}
+
+	function toggleCollapse(row, force) {
+		if (!row?.hasChildren) return;
+
+		const next = new Set($.get(collapsed));
+		const shouldCollapse = force ?? !next.has(row.node.nodeId);
+
+		if (shouldCollapse) next.add(row.node.nodeId); else next.delete(row.node.nodeId);
+
+		$.set(collapsed, next, true);
+	}
+
+	async function loadDetail() {
+		const row = $.get(rows)[$.get(selected)];
+
+		if (!client || !row) {
+			$.set(detail, null);
+
+			return;
+		}
+
+		if (row.node.nodeType !== 'element') {
+			$.set(detail, { note: 'no style for non-element' }, true);
+
+			return;
+		}
+
+		try {
+			const [style, box] = await Promise.all([
+				client.request('CSS.getComputedStyle', { nodeId: row.node.nodeId }).catch(() => null),
+				client.request('DOM.getBoxModel', { nodeId: row.node.nodeId }).catch(() => null)
+			]);
+
+			$.set(detail, { style: style?.style, box }, true);
+		} catch {
+			$.set(detail, null);
+		}
+	}
+
+	// Style keys that are always their default and would just be noise.
+	const HIDE = new Set(['animationName', 'transitionProperty']);
+
+	function styleLines(style) {
+		if (!style) return [];
+
+		return Object.keys(style).filter((k) => !HIDE.has(k)).filter((k) => {
+			const v = style[k];
+
+			return v !== undefined && v !== null && v !== '' && v !== false && v !== 'default' && v !== 'none' && v !== 0 && v !== 'static' && v !== 'visible' && v !== 'normal';
+		}).map((k) => `${k}: ${style[k]}`);
+	}
+
+	function onkeydown(event) {
+		const key = event.data?.key ?? event.key;
+		const row = $.get(rows)[$.get(selected)];
+
+		if (key === 'ArrowDown') {
+			$.set(selected, Math.min($.get(rows).length - 1, $.get(selected) + 1), true);
+			loadDetail();
+		} else if (key === 'ArrowUp') {
+			$.set(selected, Math.max(0, $.get(selected) - 1), true);
+			loadDetail();
+		} else if (key === 'ArrowLeft') {
+			toggleCollapse(row, true);
+		} else if (key === 'ArrowRight') {
+			toggleCollapse(row, false);
+		} else if (key === 'Enter') {
+			toggleCollapse(row);
+		} else if (key === 'r') refresh();
+	}
+
+	async function connect(el) {
+		try {
+			client = await connectDebugClient(port());
+			$.set(status, 'connected');
+			await refresh();
+		} catch(err) {
+			$.set(status, `cannot connect on ${port()} — run the target app with run(App, { debug: true })`);
+		}
+
+		el.focus?.();
+
+		return () => client?.close();
+	}
+
+	var div = root_7();
+	var div_1 = $.child(div);
+	var text = $.child(div_1);
+
+	$.reset(div_1);
+
+	var div_2 = $.sibling(div_1, 2);
+	var div_3 = $.child(div_2);
+	var node = $.child(div_3);
+
+	$.each(node, 17, () => $.get(rows), $.index, ($$anchor, row, index) => {
+		var div_4 = root();
+		let classes;
+		var span = $.child(div_4);
+		var text_1 = $.child(span, true);
+
+		$.reset(span);
+
+		var text_2 = $.sibling(span, 1, true);
+
+		$.reset(div_4);
+
+		$.template_effect(() => {
+			classes = $.set_class(div_4, 0, 'node svelte-1dtdv2u', null, classes, { sel: index === $.get(selected) });
+			$.set_style(div_4, `padding-left: ${$.get(row).depth * 2}cell;`);
+			$.set_text(text_1, $.get(row).hasChildren ? $.get(row).collapsed ? '▸' : '▾' : ' ');
+			$.set_text(text_2, $.get(row).label);
+		});
+
+		$.append($$anchor, div_4);
+	});
+
+	var node_1 = $.sibling(node, 2);
+
+	{
+		var consequent = ($$anchor) => {
+			var div_5 = root_1();
+
+			$.append($$anchor, div_5);
+		};
+
+		$.if(node_1, ($$render) => {
+			if ($.get(rows).length === 0) $$render(consequent);
+		});
+	}
+
+	$.reset(div_3);
+	$.attach(div_3, () => connect);
+
+	var div_6 = $.sibling(div_3, 2);
+	var node_2 = $.child(div_6);
+
+	{
+		var consequent_1 = ($$anchor) => {
+			var fragment = root_3();
+			var node_3 = $.sibling($.first_child(fragment), 2);
+
+			$.each(node_3, 17, () => styleLines($.get(detail).style), $.index, ($$anchor, line) => {
+				var div_7 = root_2();
+				var text_3 = $.child(div_7, true);
+
+				$.reset(div_7);
+				$.template_effect(() => $.set_text(text_3, $.get(line)));
+				$.append($$anchor, div_7);
+			});
+
+			$.append($$anchor, fragment);
+		};
+
+		$.if(node_2, ($$render) => {
+			if ($.get(detail)?.style) $$render(consequent_1);
+		});
+	}
+
+	var node_4 = $.sibling(node_2, 2);
+
+	{
+		var consequent_2 = ($$anchor) => {
+			var fragment_1 = root_4();
+			var div_8 = $.sibling($.first_child(fragment_1), 2);
+			var text_4 = $.child(div_8);
+
+			$.reset(div_8);
+
+			var div_9 = $.sibling(div_8, 2);
+			var text_5 = $.child(div_9);
+
+			$.reset(div_9);
+
+			$.template_effect(() => {
+				$.set_text(text_4, `x ${$.get(detail).box.x ?? ''}  y ${$.get(detail).box.y ?? ''}`);
+				$.set_text(text_5, `w ${$.get(detail).box.width ?? ''}  h ${$.get(detail).box.height ?? ''}`);
+			});
+
+			$.append($$anchor, fragment_1);
+		};
+
+		$.if(node_4, ($$render) => {
+			if ($.get(detail)?.box) $$render(consequent_2);
+		});
+	}
+
+	var node_5 = $.sibling(node_4, 2);
+
+	{
+		var consequent_3 = ($$anchor) => {
+			var div_10 = root_5();
+			var text_6 = $.child(div_10, true);
+
+			$.reset(div_10);
+			$.template_effect(() => $.set_text(text_6, $.get(detail).note));
+			$.append($$anchor, div_10);
+		};
+
+		$.if(node_5, ($$render) => {
+			if ($.get(detail)?.note) $$render(consequent_3);
+		});
+	}
+
+	var node_6 = $.sibling(node_5, 2);
+
+	{
+		var consequent_4 = ($$anchor) => {
+			var div_11 = root_6();
+
+			$.append($$anchor, div_11);
+		};
+
+		$.if(node_6, ($$render) => {
+			if (!$.get(detail)) $$render(consequent_4);
+		});
+	}
+
+	$.reset(div_6);
+	$.reset(div_2);
+	$.reset(div);
+	$.template_effect(() => $.set_text(text, `svelterm devtools · ${$.get(status) ?? ''} · ↑↓ select · ←→ fold · r refresh · Ctrl+C quit`));
+	$.event('keydown', div, onkeydown);
+	$.append($$anchor, div);
+	$.pop();
+	$$pop_renderer();
+}

package/dist/src/devtools/DevTools.css.js

@@ -0,0 +1 @@
+export const css = "\n    .devtools.svelte-1dtdv2u {\n        display: flex;\n        flex-direction: column;\n        height: 100%;\n    }\n\n    .header.svelte-1dtdv2u {\n        background: light-dark(#e0e0d8, #26415c);\n        color: light-dark(#0a3055, #cfe6ff);\n        padding: 0 1cell;\n    }\n\n    .panes.svelte-1dtdv2u {\n        display: flex;\n        flex-grow: 1;\n    }\n\n    .tree.svelte-1dtdv2u {\n        width: 50%;\n        overflow: auto;\n        border-right: single;\n        border-color: light-dark(#bbbbbb, #444444);\n    }\n\n    .node.svelte-1dtdv2u {\n        color: light-dark(#333333, #cccccc);\n    }\n\n    .marker.svelte-1dtdv2u {\n        color: light-dark(#999999, #777777);\n    }\n\n    .node.sel.svelte-1dtdv2u {\n        background: light-dark(#d5e5f5, #26415c);\n        color: cyan;\n        font-weight: bold;\n    }\n\n    .detail.svelte-1dtdv2u {\n        width: 50%;\n        padding: 0 1cell;\n    }\n\n    .detail-title.svelte-1dtdv2u {\n        color: yellow;\n        font-weight: bold;\n    }\n\n    .prop.svelte-1dtdv2u {\n        color: light-dark(#333333, #cccccc);\n    }\n\n    .prop.dim.svelte-1dtdv2u,\n    .empty.svelte-1dtdv2u {\n        color: light-dark(#888888, #666666);\n        padding: 0 1cell;\n    }\n"

package/dist/src/devtools/client.d.ts

@@ -0,0 +1,36 @@
+/**
+ * Debug-protocol client for the DevTools TUI: a request/response wrapper
+ * over the WebSocket the debug server exposes. Pure logic (tree
+ * flattening) is separated so it can be unit-tested without a socket.
+ */
+export interface DebugClient {
+    request(method: string, params?: Record<string, unknown>): Promise<any>;
+    close(): void;
+}
+export interface SerialNode {
+    nodeId: number;
+    nodeType: string;
+    tag?: string;
+    text?: string;
+    attributes?: Record<string, string>;
+    children: SerialNode[];
+}
+export interface FlatNode {
+    node: SerialNode;
+    depth: number;
+    /** A one-line label: `<div.card#main>` / `"text"` / `<!--comment-->`. */
+    label: string;
+    /** True if this node has children (so it can collapse). */
+    hasChildren: boolean;
+    /** True if collapsed — its subtree is hidden from the flattened list. */
+    collapsed: boolean;
+}
+/** Connect to a debug server on 127.0.0.1:port. */
+export declare function connectDebugClient(port: number): Promise<DebugClient>;
+/**
+ * Flatten the tree depth-first into indented, labelled rows. Nodes whose
+ * id is in `collapsed` render but their subtrees are hidden.
+ */
+export declare function flattenTree(root: SerialNode, collapsed?: Set<number>): FlatNode[];
+/** A compact one-line label for a node. */
+export declare function labelFor(node: SerialNode): string;

package/dist/src/devtools/client.js

@@ -0,0 +1,76 @@
+/**
+ * Debug-protocol client for the DevTools TUI: a request/response wrapper
+ * over the WebSocket the debug server exposes. Pure logic (tree
+ * flattening) is separated so it can be unit-tested without a socket.
+ */
+/** Connect to a debug server on 127.0.0.1:port. */
+export async function connectDebugClient(port) {
+    const { WebSocket } = await import('ws');
+    const ws = new WebSocket(`ws://127.0.0.1:${port}`);
+    await new Promise((resolve, reject) => {
+        ws.on('open', () => resolve());
+        ws.on('error', (err) => reject(err));
+    });
+    let nextId = 1;
+    const pending = new Map();
+    ws.on('message', (data) => {
+        try {
+            const msg = JSON.parse(data.toString());
+            const entry = pending.get(msg.id);
+            if (!entry)
+                return;
+            pending.delete(msg.id);
+            if (msg.error)
+                entry.reject(new Error(msg.error.message));
+            else
+                entry.resolve(msg.result);
+        }
+        catch { /* ignore malformed */ }
+    });
+    return {
+        request(method, params = {}) {
+            const id = nextId++;
+            return new Promise((resolve, reject) => {
+                pending.set(id, { resolve, reject });
+                ws.send(JSON.stringify({ id, method, params }));
+            });
+        },
+        close() { ws.close(); },
+    };
+}
+/**
+ * Flatten the tree depth-first into indented, labelled rows. Nodes whose
+ * id is in `collapsed` render but their subtrees are hidden.
+ */
+export function flattenTree(root, collapsed = new Set()) {
+    const out = [];
+    const walk = (node, depth) => {
+        const isCollapsed = collapsed.has(node.nodeId);
+        out.push({
+            node, depth, label: labelFor(node),
+            hasChildren: node.children.length > 0,
+            collapsed: isCollapsed,
+        });
+        if (isCollapsed)
+            return;
+        for (const child of node.children)
+            walk(child, depth + 1);
+    };
+    walk(root, 0);
+    return out;
+}
+/** A compact one-line label for a node. */
+export function labelFor(node) {
+    if (node.nodeType === 'text') {
+        const text = (node.text ?? '').trim().replace(/\s+/g, ' ');
+        return text ? `"${truncate(text, 40)}"` : '(whitespace)';
+    }
+    if (node.nodeType === 'comment')
+        return '<!--comment-->';
+    const cls = node.attributes?.class ? '.' + node.attributes.class.split(/\s+/).join('.') : '';
+    const id = node.attributes?.id ? '#' + node.attributes.id : '';
+    return `<${node.tag ?? '?'}${id}${cls}>`;
+}
+function truncate(text, max) {
+    return text.length <= max ? text : text.slice(0, max - 1) + '…';
+}

package/dist/src/framelog.d.ts

@@ -0,0 +1,54 @@
+/**
+ * FrameLog — an append-only log of frames for inline mode. Each frame is
+ * a mounted component; archiving hands its rows to the terminal's
+ * scrollback and frees the component, so a long session's memory tracks
+ * what's live, not the whole history.
+ *
+ * The host element should be the first content on screen (frames release
+ * from the top). To update a frame after append, pass a `$state` object
+ * as its props and mutate it — or use `update()`, which assigns onto that
+ * same object.
+ */
+import { TermNode } from './renderer/node.js';
+interface InlineHooks {
+    /** Hand the top n screen rows of the live area to scrollback. */
+    releaseTop(n: number): void;
+}
+/** Called by run() in inline mode so FrameLogs can archive rows. */
+export declare function registerInlineHooks(root: TermNode, hooks: InlineHooks): void;
+interface FrameLogDeps {
+    mount: (component: any, options: any) => object;
+    unmount: (app: object) => void;
+    renderer: unknown;
+}
+export declare class FrameLog {
+    private host;
+    private deps;
+    private frames;
+    private nextId;
+    constructor(host: TermNode, deps?: FrameLogDeps);
+    /** Mount a component as a new frame at the bottom of the log. */
+    append<P extends Record<string, unknown>>(component: unknown, props: P): number;
+    /**
+     * Assign new values onto the frame's props object. Reaches the
+     * component only when the props were created with `$state`.
+     */
+    update(id: number, partial: Record<string, unknown>): void;
+    /**
+     * Archive every frame up to and including `id`: their rows stay on
+     * the terminal and scroll into history; their components unmount.
+     */
+    archive(id: number): void;
+    /** Remove a frame outright — its rows clear and the log reflows. */
+    remove(id: number): void;
+    /** IDs of the frames still live, in order. */
+    liveFrames(): number[];
+    private dispose;
+    private rootHooks;
+}
+/**
+ * A FrameLog bound to a host element — from a component, grab the node
+ * with `bind:this` and create the log once on mount.
+ */
+export declare function createFrameLog(host: TermNode): FrameLog;
+export {};