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

package/dist/runtime/directives/bind.js

@@ -0,0 +1,244 @@
+import { effect, own, scope } from "../core/signal.js";
+// src/runtime/directives/bind.ts
+function bindText(node, get) {
+	let last;
+	effect(() => {
+		const v = get();
+		if (v !== last) {
+			last = v;
+			node.data = v == null ? "" : String(v);
+		}
+	});
+}
+/** The class a markup's class attribute holds.
+*
+* The attribute takes the shape the markup reads best: a list of parts,
+* where a part is a string of classes or an object of conditions.
+*
+*     class={["mb-4 text-sm text-muted", { "bg-primary": focused }]}
+*
+* A string is the classes themselves — plain text, so the build's
+* extractor sees them as they are. An object's keys are the classes and
+* its values the conditions; a key whose value is truthy is in.
+*
+* The values are live reads, so the class follows the state.
+*/
+function classOf(classes) {
+	const out = [];
+	const keys = [];
+	const groupOf = (core) => {
+		let match;
+		if (/^bg-(.+)$/.exec(core) !== null) return "bg";
+		if (/^text-(left|center|right|justify|start|end)$/.exec(core) !== null) return "text-align";
+		if (/^text-(.+)$/.exec(core) !== null) return "text-color";
+		if (/^type-(.+)$/.exec(core) !== null) return "type";
+		if (/^opacity-\d+$/.exec(core) !== null) return "opacity";
+		if (/^cursor-(.+)$/.exec(core) !== null) return "cursor";
+		if (/^-?scale-(.+)$/.exec(core) !== null) return "scale";
+		if (/^-?rotate-(.+)$/.exec(core) !== null) return "rotate";
+		if (/^shadow(?:-(.+))?$/.exec(core) !== null) return "shadow";
+		if (/^rounded(?:-(none|sm|md|lg|xl|2xl|3xl|full))?$/.exec(core) !== null) return "rounded";
+		if (/^border(?:-(0|2|4|8))?$/.exec(core) !== null) return "border-width";
+		if (/^border-(solid|dashed|dotted|double|none)$/.exec(core) !== null) return "border-style";
+		if (/^border-(?!t$|r$|b$|l$|x$|y$|s$|e$|t-|r-|b-|l-|x-|y-|s-|e-)(.+)$/.exec(core) !== null) return "border-color";
+		match = /^(p|px|py|pt|pr|pb|pl|ps|pe|m|mx|my|mt|mr|mb|ml|ms|me|gap|gap-x|gap-y|w|h|min-w|max-w|min-h|max-h|z)-(.+)$/.exec(core);
+		if (match !== null) return match[1];
+		if (/^(block|inline-block|inline|flex|inline-flex|grid|inline-grid|contents|hidden)$/.exec(core) !== null) return "display";
+		if (/^(static|relative|absolute|fixed|sticky)$/.exec(core) !== null) return "position";
+		return null;
+	};
+	const push = (text) => {
+		for (const token of text.split(/\s+/)) {
+			if (token.length === 0) continue;
+			const cut = token.lastIndexOf(":");
+			const variant = cut === -1 ? "" : token.slice(0, cut + 1);
+			const core = cut === -1 ? token : token.slice(cut + 1);
+			const group = groupOf(core);
+			if (group === null) {
+				out.push(token);
+				keys.push(null);
+				continue;
+			}
+			const conflictKey = variant + group;
+			const fill = /^bg-(.+)$/.exec(core)?.[1];
+			for (let index = out.length - 1; index >= 0; index--) if (keys[index] === conflictKey) {
+				if (fill !== void 0 && group === "bg" && (fill === "surface" || fill.startsWith("surface-") || fill === "transparent")) {
+					const prevFill = /^bg-(.+)$/.exec(out[index].slice(variant.length))?.[1];
+					if (prevFill !== void 0) {
+						const inkKey = `${variant}text-on-${prevFill}`;
+						const at = out.indexOf(inkKey);
+						if (at !== -1) {
+							out.splice(at, 1);
+							keys.splice(at, 1);
+							if (at <= index) index -= 1;
+						}
+					}
+				}
+				out.splice(index, 1);
+				keys.splice(index, 1);
+			}
+			out.push(token);
+			keys.push(conflictKey);
+		}
+	};
+	const part = (value) => {
+		if (typeof value === "string") {
+			push(value);
+			return;
+		}
+		if (Array.isArray(value)) {
+			for (const item of value) part(item);
+			return;
+		}
+		if (value !== null && typeof value === "object") for (const [name, condition] of Object.entries(value)) {
+			if (!condition) continue;
+			push(name);
+		}
+	};
+	part(classes);
+	return out.join(" ");
+}
+function bindAttr(el, name, get) {
+	let last = Symbol("init");
+	effect(() => {
+		const v = get();
+		if (Object.is(v, last)) return;
+		last = v;
+		if (v === void 0 || v === null || v === false) el.removeAttribute(name);
+		else if (v === true) el.setAttribute(name, "");
+		else el.setAttribute(name, String(v));
+	});
+}
+function bindProp(el, name, get) {
+	const view = el;
+	effect(() => {
+		view[name] = get();
+	});
+}
+function bindDynamic(el, name, get) {
+	if (el.tagName.includes("-")) bindProp(el, name, get);
+	else bindAttr(el, name, get);
+}
+function bindValue(el, source) {
+	const view = el;
+	let last = source();
+	view["value"] = last;
+	const onInput = () => {
+		const next = view["value"];
+		if (next === last) return;
+		last = next;
+		source.set(next);
+	};
+	el.addEventListener("input", onInput);
+	const stopInput = () => el.removeEventListener("input", onInput);
+	let stopEffect = () => {};
+	{
+		const owner = scope();
+		owner.run(() => effect(() => {
+			const next = source();
+			if (next === last) return;
+			last = next;
+			if (view["value"] !== next) view["value"] = next;
+		}));
+		const dispose = () => owner.dispose();
+		stopEffect = dispose;
+	}
+	const stop = () => {
+		stopInput();
+		stopEffect();
+	};
+	try {
+		own(stop);
+	} catch {}
+	return {
+		pull() {
+			const next = source();
+			if (next === last) return;
+			last = next;
+			if (view["value"] !== next) view["value"] = next;
+		},
+		stop
+	};
+}
+function bindChecked(el, source) {
+	let last = source();
+	el.checked = last;
+	const onInput = () => {
+		const next = el.checked;
+		if (next === last) return;
+		last = next;
+		source.set(next);
+	};
+	el.addEventListener("input", onInput);
+	const stopInput = () => el.removeEventListener("input", onInput);
+	let stopEffect = () => {};
+	{
+		const owner = scope();
+		owner.run(() => effect(() => {
+			const next = source();
+			if (next === last) return;
+			last = next;
+			el.checked = next;
+		}));
+		stopEffect = () => owner.dispose();
+	}
+	const stop = () => {
+		stopInput();
+		stopEffect();
+	};
+	try {
+		own(stop);
+	} catch {}
+	return {
+		pull() {
+			const next = source();
+			if (next === last) return;
+			last = next;
+			el.checked = next;
+		},
+		stop
+	};
+}
+/**
+* Light-DOM transclusion. At build start the element's existing children are
+* moved out and grouped by their `slot` attribute (`""` = default). A
+* `<slot name="x">` in markup resolves to its group; unmatched groups are
+* dropped (native slot behavior — unassigned nodes render nowhere).
+*
+* Why manual instead of shadow DOM: the preset styles light DOM, and every
+* selector in the system assumes it. Shadow would isolate correctly and
+* break everything else.
+*/
+const projectedSlots = /* @__PURE__ */ new WeakMap();
+function projectSlots(el) {
+	const cached = projectedSlots.get(el);
+	if (cached !== void 0) {
+		for (const node of [...el.childNodes]) {
+			if (node.nodeType === 8) continue;
+			el.removeChild(node);
+		}
+		return cached;
+	}
+	const groups = /* @__PURE__ */ new Map();
+	for (const node of [...el.childNodes]) {
+		if (node.nodeType === 8) continue;
+		const name = node instanceof Element ? node.getAttribute("slot") ?? "" : "";
+		const group = groups.get(name);
+		if (group !== void 0) group.push(node);
+		else groups.set(name, [node]);
+		el.removeChild(node);
+	}
+	projectedSlots.set(el, groups);
+	return groups;
+}
+/**
+* Places assigned nodes (moved, never cloned — state and listeners travel)
+* before `anchor`, or the fallback nodes when nothing was assigned.
+*/
+function placeSlot(host, anchor, assigned, fallback) {
+	const nodes = assigned !== void 0 && assigned.length > 0 ? assigned : fallback;
+	for (const n of nodes) if (n.parentNode !== host || n.nextSibling !== anchor) host.insertBefore(n, anchor);
+}
+export { bindAttr, bindChecked, bindDynamic, bindProp, bindText, bindValue, classOf, placeSlot, projectSlots };
+
+//# sourceMappingURL=bind.js.map

package/dist/runtime/directives/for.d.ts

@@ -0,0 +1,12 @@
+export interface RenderedItem {
+  nodes: Node[];
+  cleanup?: () => void;
+  update?: (item: unknown, index: number) => void;
+}
+export interface BindForOptions<T> {
+  anchor: Comment;
+  items: () => readonly T[];
+  key: (item: T, index: number) => unknown;
+  render: (item: T, index: number) => RenderedItem;
+}
+export declare function bindFor<T>(opts: BindForOptions<T>): () => void;

package/dist/runtime/directives/for.js

@@ -0,0 +1,104 @@
+import { effect, own, scope, untrack } from "../core/signal.js";
+// src/runtime/directives/for.ts
+function bindFor(opts) {
+	const { anchor, items, key, render } = opts;
+	const parent = () => anchor.parentNode;
+	let cells = [];
+	let index = /* @__PURE__ */ new Map();
+	let last;
+	const sync = (list) => {
+		const host = parent();
+		if (host === null) return;
+		const next = new Array(list.length);
+		for (let i = 0; i < list.length; i++) {
+			const item = list[i];
+			const k = key(item, i);
+			const bucket = index.get(k);
+			const hit = bucket !== void 0 && bucket.at < bucket.cells.length ? bucket.cells[bucket.at++] : void 0;
+			if (hit !== void 0) {
+				hit.item = item;
+				next[i] = hit;
+			} else {
+				const owner = scope();
+				let rendered;
+				untrack(() => {
+					owner.run(() => {
+						rendered = render(item, i);
+					});
+				});
+				const nodes = [...rendered.nodes];
+				for (const n of nodes) host.insertBefore(n, anchor);
+				next[i] = {
+					key: k,
+					item,
+					rendered,
+					nodes,
+					owner
+				};
+			}
+		}
+		const dead = [];
+		const keep = /* @__PURE__ */ new Set();
+		for (const cell of next) for (const n of cell.nodes) keep.add(n);
+		for (const cell of cells) {
+			let alive = false;
+			for (const n of cell.nodes) if (keep.has(n)) {
+				alive = true;
+				break;
+			}
+			if (!alive) dead.push(cell);
+		}
+		let cursor = anchor;
+		for (let idx = next.length - 1; idx >= 0; idx--) {
+			const cell = next[idx];
+			if (cell.nodes.length === 0) continue;
+			for (let k = cell.nodes.length - 1; k >= 0; k--) {
+				const n = cell.nodes[k];
+				if (n.parentNode !== host) host.insertBefore(n, cursor);
+				else if (n.nextSibling !== cursor) host.insertBefore(n, cursor);
+				cursor = n;
+			}
+		}
+		for (let i = 0; i < next.length; i++) {
+			const cell = next[i];
+			cell.rendered.update?.(cell.item, i);
+		}
+		for (const cell of dead) {
+			for (const n of cell.nodes) if (n.parentNode === host) host.removeChild(n);
+			cell.rendered.cleanup?.();
+			cell.owner.dispose();
+		}
+		cells = next;
+		const rebuilt = /* @__PURE__ */ new Map();
+		for (const cell of next) {
+			const bucket = rebuilt.get(cell.key);
+			if (bucket === void 0) rebuilt.set(cell.key, {
+				cells: [cell],
+				at: 0
+			});
+			else bucket.cells.push(cell);
+		}
+		index = rebuilt;
+	};
+	effect(() => {
+		const v = items();
+		if (v !== last) {
+			last = v;
+			sync(v ?? []);
+		}
+	});
+	const stop = () => {
+		for (const cell of cells) {
+			cell.rendered.cleanup?.();
+			cell.owner.dispose();
+		}
+		cells = [];
+	};
+	try {
+		own(stop);
+	} catch {}
+	return stop;
+}
+export { bindFor };
+
+//# sourceMappingURL=for.js.map

package/dist/runtime/directives/if.d.ts

@@ -0,0 +1,10 @@
+export interface BranchRender {
+  nodes: Node[];
+  cleanup?: () => void;
+}
+export interface BindIfOptions {
+  anchor: Comment;
+  test: () => number;
+  branches: Array<() => BranchRender>;
+}
+export declare function bindIf(opts: BindIfOptions): () => void;

package/dist/runtime/directives/if.js

@@ -0,0 +1,45 @@
+import { effect, own, scope, untrack } from "../core/signal.js";
+// src/runtime/directives/if.ts
+function bindIf(opts) {
+	const { anchor, test, branches } = opts;
+	let nodes = [];
+	let cleanup;
+	let owner;
+	let last;
+	const teardown = () => {
+		cleanup?.();
+		cleanup = void 0;
+		owner?.dispose();
+		owner = void 0;
+		const host = anchor.parentNode;
+		if (host !== null) {
+			for (const n of nodes) if (n.parentNode === host) host.removeChild(n);
+		}
+		nodes = [];
+	};
+	effect(() => {
+		const v = test();
+		if (v === last) return;
+		last = v;
+		teardown();
+		if (v < 0 || v >= branches.length) return;
+		const next = scope();
+		owner = next;
+		let rendered;
+		next.run(() => untrack(() => {
+			rendered = branches[v]();
+		}));
+		cleanup = rendered.cleanup;
+		nodes = rendered.nodes;
+		const host = anchor.parentNode;
+		if (host !== null) for (const n of nodes) host.insertBefore(n, anchor);
+	});
+	const stop = () => teardown();
+	try {
+		own(stop);
+	} catch {}
+	return stop;
+}
+export { bindIf };
+
+//# sourceMappingURL=if.js.map

package/dist/runtime/directives/load.d.ts

@@ -0,0 +1,13 @@
+import { ElementAction } from "./use.js";
+import { Node } from "../syntax/ir.js";
+import { Handle } from "../scope/table.js";
+export interface LoaderActions {
+  readonly [name: string]: ElementAction<unknown>;
+}
+export interface LoaderScope {
+  readonly [name: string]: unknown;
+}
+export declare function load(source: string, actions: LoaderActions, values: LoaderScope, onUnknown?: "throw" | "skip", resolve?: (handle: Handle) => unknown): {
+  nodes: Node[];
+  dispose(): void;
+};

package/dist/runtime/directives/load.js

@@ -0,0 +1,119 @@
+import { bindAttr, bindText } from "./bind.js";
+import { bindSpread } from "./spread.js";
+import { on, runAction } from "./use.js";
+import { scope } from "../core/signal.js";
+import { bindFor } from "./for.js";
+import { parse } from "../syntax/parse.js";
+// src/runtime/directives/load.ts
+function resolve(value) {
+	if (typeof value === "function" && value.length === 0) try {
+		return value();
+	} catch {
+		return;
+	}
+	return value;
+}
+function readExpr(expr, values) {
+	const names = Object.keys(values);
+	const args = names.map((name) => values[name]);
+	try {
+		return resolve(new Function(...names, `return (${expr});`)(...args));
+	} catch {
+		return;
+	}
+}
+function callExpr(expr, values) {
+	const fn = readExpr(expr, values);
+	if (typeof fn === "function") return fn;
+	return () => void 0;
+}
+function wire(root, ir, actions, values, _parts) {
+	const walk = (nodes, mount, _target, rowScope) => {
+		const active = rowScope ?? values;
+		for (const node of nodes) {
+			if (node.kind === "text") {
+				if (!node.parts.some((part) => part.kind === "expr")) {
+					const text = node.parts.map((part) => part.kind === "static" ? part.value : "").join("");
+					if (text.length > 0) mount.appendChild(document.createTextNode(text));
+					continue;
+				}
+				const t = document.createTextNode("");
+				mount.appendChild(t);
+				bindText(t, () => {
+					let out = "";
+					for (const part of node.parts) if (part.kind === "static") out += part.value;
+					else {
+						const v = readExpr(part.expr, active);
+						out += v == null ? "" : String(v);
+					}
+					return out;
+				});
+				continue;
+			}
+			if (node.kind === "for") {
+				const anchor = document.createComment("for");
+				mount.appendChild(anchor);
+				bindFor({
+					anchor,
+					items: () => readExpr(node.source, active) ?? [],
+					key: node.key !== void 0 ? (item, i) => readExpr(node.key, {
+						...active,
+						[node.binding]: item,
+						i
+					}) : (_item, i) => i,
+					render: (item) => {
+						const frag = document.createDocumentFragment();
+						const rowScope = {
+							...active,
+							[node.binding]: item
+						};
+						walk(node.body, frag, [], rowScope);
+						return { nodes: [...frag.childNodes] };
+					}
+				});
+				continue;
+			}
+			const el = document.createElement(node.tag);
+			for (const attr of node.attrs) if (attr.value.kind === "static") el.setAttribute(attr.name, attr.value.value);
+			else {
+				const expr = attr.value.expr;
+				bindAttr(el, attr.name, () => readExpr(expr, active));
+			}
+			for (const ev of node.events) {
+				const handler = callExpr(ev.handler, active);
+				on(el, ev.event, (e) => handler(e));
+			}
+			for (const use of node.actions) {
+				const action = actions[use.name];
+				if (typeof action === "function") {
+					if (use.param !== void 0) runAction(el, action, () => readExpr(use.param, active));
+					else runAction(el, action, void 0);
+				}
+			}
+			for (const spread of node.spreads) bindSpread(el, () => readExpr(spread.expr, active));
+			mount.appendChild(el);
+			walk(node.children, el, [], active);
+		}
+	};
+	walk(ir.nodes, root, _parts);
+}
+function load(source, actions, values, onUnknown = "skip", resolve) {
+	const ir = parse(source);
+	const frag = document.createDocumentFragment();
+	const owner = scope();
+	const effectiveValues = resolve ? {
+		...values,
+		"@@resolve": resolve
+	} : values;
+	const stop = owner.run(() => {
+		wire(frag, ir, actions, effectiveValues, []);
+		return () => owner.dispose();
+	});
+	return {
+		nodes: [...frag.childNodes],
+		dispose: stop
+	};
+}
+export { load };
+
+//# sourceMappingURL=load.js.map

package/dist/runtime/directives/spread.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Reactive prop application from a live reader.
+ *
+ * Loader-owned effect: called from emitted code in build scope. The reader
+ * re-runs when a signal it reads moves, plus on insertion. Handlers (on*)
+ * are skipped — actions own those.
+ */
+export declare function bindActionProps(el: Element, read: () => Record<string, unknown>): void;
+/**
+ * Reactive spread application from a live reader.
+ *
+ * Same lifecycle as bindActionProps (signal-driven), but `on*`
+ * function values attach as event listeners instead of being skipped —
+ * the bag owns its handlers. Listener names are the lowercased slice(2)
+ * of the key; a camelCase name (`onFocus`) is already the DOM spelling.
+ */
+export declare function bindSpread(el: Element, read: () => Record<string, unknown>): () => void;

package/dist/runtime/directives/spread.js

@@ -0,0 +1,121 @@
+import { effect, signal, untrack } from "../core/signal.js";
+import { runAction } from "../actions/action.js";
+import { ACTIONS } from "../actions/index.js";
+import { runInElement } from "../scope/element.js";
+import { toStyleString } from "../core/style.js";
+// src/runtime/directives/spread.ts
+/**
+* Properties written through the IDL rather than as content attributes.
+*/
+const ASSIGNABLE = /* @__PURE__ */ new Set([
+	"value",
+	"checked",
+	"selected",
+	"tabIndex"
+]);
+/**
+* Whether the element declares the name as a writable property. A
+* declared prop crosses through its accessor — an array or an object
+* cannot travel as an attribute, and the element's grammar owns the
+* coercion. A getter-only property (the DOM's `form`, say) stays on the
+* attribute path: writing it would throw.
+*/
+const hasAccessor = (el, name) => {
+	let target = el;
+	while (target !== null) {
+		const desc = Object.getOwnPropertyDescriptor(target, name);
+		if (desc !== void 0) return typeof desc.set === "function";
+		target = Object.getPrototypeOf(target);
+	}
+	return false;
+};
+/**
+* Reactive prop application from a live reader.
+*
+* Loader-owned effect: called from emitted code in build scope. The reader
+* re-runs when a signal it reads moves, plus on insertion. Handlers (on*)
+* are skipped — actions own those.
+*/
+function bindActionProps(el, read) {
+	let last = {};
+	effect(() => {
+		const props = read();
+		for (const name of Object.keys(last)) if (!(name in props) && !name.startsWith("on")) el.removeAttribute(name);
+		for (const [name, value] of Object.entries(props)) {
+			if (name.startsWith("on")) continue;
+			if (!ASSIGNABLE.has(name) && Object.is(value, last[name])) continue;
+			if (ASSIGNABLE.has(name)) el[name] = value;
+			else if (name.startsWith("aria-") && (value === true || value === false)) el.setAttribute(name, value === true ? "true" : "false");
+			else if (value === void 0 || value === null || value === false) el.removeAttribute(name);
+			else if (value === true) el.setAttribute(name, "");
+			else el.setAttribute(name, String(value));
+		}
+		last = props;
+	});
+}
+/**
+* Reactive spread application from a live reader.
+*
+* Same lifecycle as bindActionProps (signal-driven), but `on*`
+* function values attach as event listeners instead of being skipped —
+* the bag owns its handlers. Listener names are the lowercased slice(2)
+* of the key; a camelCase name (`onFocus`) is already the DOM spelling.
+*/
+function bindSpread(el, read) {
+	let last = {};
+	const attached = /* @__PURE__ */ new Map();
+	const latest = signal({});
+	const attachedActions = /* @__PURE__ */ new Set();
+	effect(() => {
+		const props = read();
+		for (const name of Object.keys(last)) {
+			const directive = name.startsWith("use:");
+			if (!(name in props) && !name.startsWith("on") && !directive) el.removeAttribute(name);
+		}
+		const seen = /* @__PURE__ */ new Set();
+		const EVENT_ALIASES = { doubleclick: "dblclick" };
+		for (const [name, value] of Object.entries(props)) {
+			if (name.startsWith("on") && typeof value === "function") {
+				const type = EVENT_ALIASES[name.slice(2).toLowerCase()] ?? name.slice(2).toLowerCase();
+				const listener = value;
+				seen.add(type);
+				if (attached.get(type) !== listener) {
+					const prev = attached.get(type);
+					if (prev !== void 0) el.removeEventListener(type, prev);
+					el.addEventListener(type, listener);
+					attached.set(type, listener);
+				}
+				continue;
+			}
+			if (name.startsWith("use:")) continue;
+			if (Object.is(value, last[name])) continue;
+			if (name === "style") el.setAttribute("style", toStyleString(value));
+			else if (ASSIGNABLE.has(name) || hasAccessor(el, name)) el[name] = value;
+			else if (name.startsWith("aria-") && typeof value === "boolean") el.setAttribute(name, String(value));
+			else if (value === void 0 || value === null || value === false) el.removeAttribute(name);
+			else if (value === true) el.setAttribute(name, "");
+			else el.setAttribute(name, String(value));
+		}
+		for (const [type, fn] of attached) if (!seen.has(type)) {
+			el.removeEventListener(type, fn);
+			attached.delete(type);
+		}
+		last = props;
+		latest(props);
+		for (const name of Object.keys(props)) {
+			if (!name.startsWith("use:") || name.length <= 4) continue;
+			if (attachedActions.has(name)) continue;
+			const action = ACTIONS[name.slice(4)];
+			if (typeof action !== "function") continue;
+			attachedActions.add(name);
+			runInElement(el, () => untrack(() => runAction(el, action, () => {
+				const entry = latest()[name];
+				return typeof entry === "function" ? entry() : entry;
+			})));
+		}
+	});
+	return () => {};
+}
+export { bindActionProps, bindSpread };
+
+//# sourceMappingURL=spread.js.map