@spinjs/components 0.1.0-preview.2 → 0.2.0-alpha.1

package/dist/runtime/syntax/display.js

@@ -0,0 +1,344 @@
+import { matchBrace, skipQuoted } from "./braces.js";
+// src/runtime/syntax/display.ts
+const WHITESPACE = /\s/;
+const NAME_STOP = /[\s=/>]/;
+/**
+* One balanced run from `i`: a quoted string or a brace block. Braces
+* match through the syntax owner's reader, so the viewer and the
+* compiler agree on where `{...}` ends; quotes are terminals the
+* compiler never nests.
+*/
+function scanRun(html, i) {
+	const open = html[i];
+	if (open === "\"" || open === "'" || open === "`") return skipQuoted(html, i, html.length);
+	if (open === "{") {
+		const close = matchBrace(html, i, html.length);
+		return close >= html.length ? html.length : close + 1;
+	}
+	return i;
+}
+/**
+* Example HTML, tokenized: tags, attribute names, string values, comments and
+* the text between them. Everything the markup spells is preserved exactly,
+* whitespace included, because the code view is the markup a consumer copies.
+*/
+function tokenizeHtml(html) {
+	const out = [];
+	const push = (type, value) => {
+		if (value !== "") out.push({
+			type,
+			value
+		});
+	};
+	let i = 0;
+	const pushTextRuns = (from, to) => {
+		let j = from;
+		while (j < to) {
+			const open = html.indexOf("{", j);
+			if (open === -1 || open >= to) {
+				push("text", html.slice(j, to));
+				return;
+			}
+			if (open > j) push("text", html.slice(j, open));
+			const stop = scanRun(html, open);
+			push("expr", html.slice(open, Math.min(stop, to)));
+			j = Math.min(stop, to);
+			if (stop >= to) return;
+		}
+	};
+	while (i < html.length) {
+		const lt = html.indexOf("<", i);
+		if (lt === -1) {
+			pushTextRuns(i, html.length);
+			break;
+		}
+		if (lt > i) pushTextRuns(i, lt);
+		if (html.startsWith("<!--", lt)) {
+			const end = html.indexOf("-->", lt + 4);
+			const stop = end === -1 ? html.length : end + 3;
+			push("comment", html.slice(lt, stop));
+			i = stop;
+			continue;
+		}
+		if (html.startsWith("<!", lt)) {
+			const end = html.indexOf(">", lt);
+			const stop = end === -1 ? html.length : end + 1;
+			push("comment", html.slice(lt, stop));
+			i = stop;
+			continue;
+		}
+		push("punct", "<");
+		i = lt + 1;
+		if (html[i] === "/") {
+			push("punct", "/");
+			i += 1;
+		}
+		let end = i;
+		while (end < html.length && !WHITESPACE.test(html[end]) && html[end] !== ">" && html[end] !== "/") end += 1;
+		push("tag", html.slice(i, end));
+		i = end;
+		while (i < html.length) {
+			const ch = html[i];
+			if (ch === ">") {
+				push("punct", ">");
+				i += 1;
+				break;
+			}
+			if (ch === "/" && html[i + 1] === ">") {
+				push("punct", "/>");
+				i += 2;
+				break;
+			}
+			if (WHITESPACE.test(ch)) {
+				let stop = i;
+				while (stop < html.length && WHITESPACE.test(html[stop])) stop += 1;
+				push("text", html.slice(i, stop));
+				i = stop;
+				continue;
+			}
+			if (ch === "/") {
+				push("punct", "/");
+				i += 1;
+				continue;
+			}
+			if (ch === "{") {
+				const stop = scanRun(html, i);
+				push("expr", html.slice(i, stop));
+				i = stop;
+				continue;
+			}
+			let attrEnd = i;
+			while (attrEnd < html.length && !NAME_STOP.test(html[attrEnd])) attrEnd += 1;
+			push("attr", html.slice(i, attrEnd));
+			i = attrEnd;
+			if (html[i] === "=") {
+				push("punct", "=");
+				i += 1;
+				if (html[i] === "\"" || html[i] === "'") {
+					const stop = scanRun(html, i);
+					push("string", html.slice(i, stop));
+					i = stop;
+				} else {
+					let stop = i;
+					while (stop < html.length && !WHITESPACE.test(html[stop]) && html[stop] !== ">") stop += 1;
+					push("string", html.slice(i, stop));
+					i = stop;
+				}
+			}
+		}
+	}
+	return out;
+}
+/**
+* Example markup, formatted for the code view.
+*
+* The examples are data — written to be read beside a rule, not by a
+* formatter — so they arrive with the indentation of the template literals
+* they were pieced together in: ten spaces of air before every variant, a
+* closing tag at column eight. The code view is the markup a consumer copies,
+* so it shows that markup as a consumer would write it: nested tags indented
+* one step per depth, runs of blank lines collapsed to a single break, and a
+* tag with more than two attributes spelled one attribute per line, so the
+* parts are visible instead of a wall.
+*
+* It is FORMATTING, not rewriting. The only text replaced is whitespace the
+* markup does not need; every tag, attribute name, attribute value and word
+* of content survives exactly as authored. Content whose whitespace IS its
+* meaning — a `<pre>`, a `<textarea>` — is copied through untouched, and text
+* that spells anything never moves onto a line of its own.
+*/
+const FORMAT_INDENT = "  ";
+/** Tags whose content is whitespace: never re-indented, never re-flowed. */
+const VERBATIM_TAGS = {
+	pre: true,
+	textarea: true,
+	listing: true
+};
+/** Tags that never take a close. */
+const VOID_TAGS = {
+	area: true,
+	base: true,
+	br: true,
+	col: true,
+	embed: true,
+	hr: true,
+	img: true,
+	input: true,
+	link: true,
+	meta: true,
+	param: true,
+	source: true,
+	track: true,
+	wbr: true
+};
+/**
+* Example HTML, parsed into a tree shallow enough to re-indent and no
+* deeper: an element, the text, and the two kinds of run that are copied
+* whole (comments and declarations). A close that matches nothing on the
+* stack is kept as raw text rather than guessed at.
+*/
+function parseForFormat(html) {
+	const roots = [];
+	const stack = [];
+	const parentChildren = () => stack.length === 0 ? roots : stack[stack.length - 1].children;
+	let i = 0;
+	while (i < html.length) {
+		const lt = html.indexOf("<", i);
+		if (lt === -1) {
+			parentChildren().push({
+				kind: "text",
+				text: html.slice(i)
+			});
+			break;
+		}
+		if (lt > i) parentChildren().push({
+			kind: "text",
+			text: html.slice(i, lt)
+		});
+		if (html.startsWith("<!--", lt)) {
+			const end = html.indexOf("-->", lt + 4);
+			const stop = end === -1 ? html.length : end + 3;
+			parentChildren().push({
+				kind: "raw",
+				text: html.slice(lt, stop)
+			});
+			i = stop;
+			continue;
+		}
+		if (html.startsWith("<!", lt)) {
+			const end = html.indexOf(">", lt);
+			const stop = end === -1 ? html.length : end + 1;
+			parentChildren().push({
+				kind: "raw",
+				text: html.slice(lt, stop)
+			});
+			i = stop;
+			continue;
+		}
+		if (html.startsWith("</", lt)) {
+			const end = html.indexOf(">", lt);
+			const stop = end === -1 ? html.length : end + 1;
+			const name = html.slice(lt + 2, stop - 1).trim().toLowerCase();
+			let match = -1;
+			for (let s = stack.length - 1; s >= 0; s--) if (stack[s].tag.toLowerCase() === name) {
+				match = s;
+				break;
+			}
+			if (match !== -1) stack.length = match;
+			else parentChildren().push({
+				kind: "raw",
+				text: html.slice(lt, stop)
+			});
+			i = stop;
+			continue;
+		}
+		i = lt + 1;
+		let nameEnd = i;
+		while (nameEnd < html.length && !WHITESPACE.test(html[nameEnd]) && html[nameEnd] !== ">" && html[nameEnd] !== "/") nameEnd += 1;
+		const tag = html.slice(i, nameEnd);
+		i = nameEnd;
+		const attrs = [];
+		let selfClose = false;
+		while (i < html.length) {
+			const ch = html[i];
+			if (WHITESPACE.test(ch)) {
+				i += 1;
+				continue;
+			}
+			if (ch === ">") {
+				i += 1;
+				break;
+			}
+			if (ch === "/") {
+				if (html[i + 1] === ">") {
+					selfClose = true;
+					i += 2;
+					break;
+				}
+				i += 1;
+				continue;
+			}
+			let attrEnd = i;
+			while (attrEnd < html.length && !NAME_STOP.test(html[attrEnd])) attrEnd += 1;
+			const name = html.slice(i, attrEnd);
+			i = attrEnd;
+			if (html[i] !== "=") {
+				attrs.push([name, void 0]);
+				continue;
+			}
+			i += 1;
+			const quote = html[i];
+			if (quote === "\"" || quote === "'" || quote === "{") {
+				const stop = scanRun(html, i);
+				attrs.push([name, html.slice(i, stop)]);
+				i = stop;
+			} else {
+				let stop = i;
+				while (stop < html.length && !WHITESPACE.test(html[stop]) && html[stop] !== ">") stop += 1;
+				attrs.push([name, stop > i ? `"${html.slice(i, stop)}"` : void 0]);
+				i = stop;
+			}
+		}
+		const element = {
+			kind: "element",
+			tag,
+			attrs,
+			children: [],
+			selfClose
+		};
+		parentChildren().push(element);
+		const lower = tag.toLowerCase();
+		if (!selfClose && VOID_TAGS[lower] !== true) {
+			if (VERBATIM_TAGS[lower] === true) {
+				const close = html.toLowerCase().indexOf(`</${lower}`, i);
+				const stop = close === -1 ? html.length : close;
+				element.raw = html.slice(i, stop);
+				if (close !== -1) {
+					const gt = html.indexOf(">", close);
+					i = gt === -1 ? html.length : gt + 1;
+				}
+			} else stack.push(element);
+		}
+	}
+	return roots;
+}
+/**
+* One open tag: the attributes on one line when there are two or fewer, one
+* per line — indented a step past the tag — when there are more, so a long
+* value has its own line instead of ploughing through its neighbours.
+*/
+function formatOpenTag(tag, attrs, depth) {
+	const spelled = attrs.map(([name, value]) => {
+		if (value === void 0) return name;
+		const cut = value.lastIndexOf(" ", 160);
+		return `${name}=${value.length > 160 ? `${value.slice(0, cut === -1 ? 160 : cut)}…(${value.length} chars)` : value}`;
+	});
+	if (spelled.length > 2 && spelled.every((s) => !s.includes("{"))) {
+		const pad = FORMAT_INDENT.repeat(depth + 1);
+		return `<${tag}\n${spelled.map((s) => `${pad}${s}`).join("\n")}\n${FORMAT_INDENT.repeat(depth)}`;
+	}
+	return `<${tag}${spelled.length === 0 ? "" : ` ${spelled.join(" ")}`}`;
+}
+function formatNode(node, depth) {
+	if (node.kind === "text" || node.kind === "raw") return node.text.length > 320 ? `${node.text.slice(0, 320)}…(${node.text.length} chars)` : node.text;
+	const pad = FORMAT_INDENT.repeat(depth);
+	const open = formatOpenTag(node.tag, node.attrs, depth);
+	if (node.raw !== void 0) return `${pad}${open}>${node.raw}</${node.tag}>`;
+	const close = node.selfClose ? "/>" : `</${node.tag}>`;
+	if (node.children.length === 0) return VOID_TAGS[node.tag.toLowerCase()] === true ? `${pad}${open}${node.selfClose ? "/>" : ">"}` : `${pad}${open}>${close}`;
+	if (node.children.some((c) => c.kind === "text" && !/^\s*$/.test(c.text))) return `${pad}${open}>${node.children.map((c) => formatNode(c, 0)).join("")}${close}`;
+	return `${pad}${open}>\n${node.children.filter((c) => c.kind !== "text" || !/^\s*$/.test(c.text)).map((c) => formatNode(c, depth + 1)).join("\n")}\n${pad}${close}`;
+}
+/**
+* Example HTML, formatted. Idempotent: formatting what was formatted
+* changes nothing, because it replaces whitespace-only runs and nothing
+* else.
+*/
+function formatExampleHtml(html) {
+	const roots = parseForFormat(html).filter((n) => n.kind !== "text" || !/^\s*$/.test(n.text));
+	const inline = roots.some((n) => n.kind === "text");
+	return roots.map((n) => formatNode(n, 0)).join(inline ? "" : "\n");
+}
+export { formatExampleHtml, tokenizeHtml };
+
+//# sourceMappingURL=display.js.map

package/dist/runtime/syntax/expand-groups.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Variant-group expansion for static markup (`data-[open]:(bg-x text-y)`
+ * → `data-[open]:bg-x data-[open]:text-y`).
+ *
+ * This mirrors core's `parseVariantGroup` for the shapes our markup uses,
+ * without dragging `@unocss/core` into the runtime graph: the element
+ * transform expands author spellings before emit (the DOM carries expanded
+ * tokens), while `?raw` sources and the class gate see the compact form.
+ * Nested groups expand inside out; separators are `:` then `-`, as in core.
+ */
+/** Expand variant groups in static text until none remain (nesting). */
+export declare function expandVariantGroups(source: string): string;

package/dist/runtime/syntax/expand-groups.js

@@ -0,0 +1,31 @@
+// src/runtime/syntax/expand-groups.ts
+/**
+* Variant-group expansion for static markup (`data-[open]:(bg-x text-y)`
+* → `data-[open]:bg-x data-[open]:text-y`).
+*
+* This mirrors core's `parseVariantGroup` for the shapes our markup uses,
+* without dragging `@unocss/core` into the runtime graph: the element
+* transform expands author spellings before emit (the DOM carries expanded
+* tokens), while `?raw` sources and the class gate see the compact form.
+* Nested groups expand inside out; separators are `:` then `-`, as in core.
+*/
+const GROUP = /([^\s:"'()]+):\(([^()]*)\)/g;
+/** Expand one level of `prefix:(a b)` groups in a class string. */
+function expandOnce(classes) {
+	return classes.replace(GROUP, (_match, prefix, body) => {
+		return body.split(/\s+/).filter((item) => item.length > 0).map((item) => `${prefix}:${item}`).join(" ");
+	});
+}
+/** Expand variant groups in static text until none remain (nesting). */
+function expandVariantGroups(source) {
+	let prev = source;
+	for (let depth = 0; depth < 5; depth++) {
+		const next = expandOnce(prev);
+		if (next === prev) return next;
+		prev = next;
+	}
+	return prev;
+}
+export { expandVariantGroups };
+
+//# sourceMappingURL=expand-groups.js.map

package/dist/runtime/syntax/ir.d.ts

@@ -0,0 +1,76 @@
+export interface Span {
+  readonly start: number;
+  readonly end: number;
+}
+export interface Diagnostic {
+  readonly code: string;
+  readonly message: string;
+  readonly span: Span;
+}
+export declare class ParseError extends Error {
+  readonly diagnostics: readonly Diagnostic[];
+  constructor(diagnostics: readonly Diagnostic[]);
+}
+export type AttrValue = {
+  readonly kind: "static";
+  readonly value: string;
+} | {
+  readonly kind: "expr";
+  readonly expr: string;
+  readonly span: Span;
+};
+export interface Attr {
+  readonly name: string;
+  readonly value: AttrValue;
+  readonly span: Span;
+}
+export interface EventBinding {
+  readonly event: string;
+  readonly handler: string;
+  readonly span: Span;
+}
+export interface ActionUse {
+  readonly name: string;
+  readonly param: string | undefined;
+  readonly span: Span;
+}
+export interface SpreadUse {
+  readonly expr: string;
+  readonly span: Span;
+}
+export interface ElementNode {
+  readonly kind: "element";
+  readonly tag: string;
+  readonly attrs: readonly Attr[];
+  readonly events: readonly EventBinding[];
+  readonly actions: readonly ActionUse[];
+  readonly spreads: readonly SpreadUse[];
+  readonly children: readonly Node[];
+  /** Conditional render: the `show={expr}` expression, evaluated per tick. */
+  readonly show?: string;
+  readonly span: Span;
+}
+export interface TextNode {
+  readonly kind: "text";
+  readonly parts: readonly ({
+    readonly kind: "static";
+    readonly value: string;
+  } | {
+    readonly kind: "expr";
+    readonly expr: string;
+    readonly span: Span;
+  })[];
+  readonly span: Span;
+}
+export interface ForNode {
+  readonly kind: "for";
+  readonly source: string;
+  readonly binding: string;
+  readonly key: string | undefined;
+  readonly body: readonly Node[];
+  readonly span: Span;
+}
+export type Node = ElementNode | TextNode | ForNode;
+export interface ComponentIr {
+  readonly nodes: readonly Node[];
+}

package/dist/runtime/syntax/ir.js

@@ -0,0 +1,11 @@
+// src/runtime/syntax/ir.ts
+var ParseError = class extends Error {
+	diagnostics;
+	constructor(diagnostics) {
+		super(diagnostics.map((d) => `${d.code}: ${d.message}`).join("\n"));
+		this.diagnostics = diagnostics;
+	}
+};
+export { ParseError };
+
+//# sourceMappingURL=ir.js.map

package/dist/runtime/syntax/parse.d.ts

@@ -0,0 +1,2 @@
+import { ComponentIr } from "./ir.js";
+export declare function parse(source: string): ComponentIr;