tachyon-dom 0.1.0

package/dist/runtime/attr.d.ts

@@ -0,0 +1,3 @@
+export declare const setAttributeValue: (element: Element, name: string, value: unknown) => void;
+export declare const setStyleValue: (element: Element, name: string, value: unknown) => void;
+export declare const setRef: (scope: Record<string, unknown>, expression: string, element: Element) => void;

package/dist/runtime/attr.js

@@ -0,0 +1,66 @@
+const dangerousPropertyNames = new Set(["innerhtml", "outerhtml", "srcdoc"]);
+const shouldReflectProperty = (name) => {
+    const normalized = name.toLowerCase();
+    return !normalized.startsWith("on") && !dangerousPropertyNames.has(normalized);
+};
+export const setAttributeValue = (element, name, value) => {
+    const reflectProperty = shouldReflectProperty(name);
+    if (value == null || value === false) {
+        element.removeAttribute(name);
+        if (reflectProperty && name in element) {
+            try {
+                const properties = element;
+                const current = properties[name];
+                if (typeof current === "boolean") {
+                    properties[name] = false;
+                }
+                else if (name === "value" && typeof current === "string") {
+                    properties[name] = "";
+                }
+            }
+            catch {
+                // Some readonly DOM properties throw on assignment.
+            }
+        }
+        return;
+    }
+    if (!reflectProperty) {
+        element.removeAttribute(name);
+        return;
+    }
+    if (value === true) {
+        element.setAttribute(name, "");
+    }
+    else {
+        element.setAttribute(name, String(value));
+    }
+    if (name in element) {
+        try {
+            element[name] = value;
+        }
+        catch {
+            // Some readonly DOM properties throw on assignment.
+        }
+    }
+};
+export const setStyleValue = (element, name, value) => {
+    if (!(element instanceof HTMLElement || element instanceof SVGElement)) {
+        return;
+    }
+    element.style.setProperty(name, value == null || value === false ? "" : String(value));
+};
+export const setRef = (scope, expression, element) => {
+    const parts = expression.split(".");
+    let current = scope;
+    for (const part of parts.slice(0, -1)) {
+        const next = current[part];
+        if (next == null || typeof next !== "object") {
+            return;
+        }
+        current = next;
+    }
+    const last = parts.at(-1);
+    if (last) {
+        current[last] = element;
+    }
+};

package/dist/runtime/class.d.ts

@@ -0,0 +1,2 @@
+export declare const elementAt: (root: Node, path: readonly number[]) => Element;
+export declare const setClassPresence: (element: Element, className: string, value: unknown) => void;

package/dist/runtime/class.js

@@ -0,0 +1,10 @@
+export const elementAt = (root, path) => {
+    let current = root;
+    for (const index of path) {
+        current = current.childNodes[index];
+    }
+    return current;
+};
+export const setClassPresence = (element, className, value) => {
+    element.classList.toggle(className, Boolean(value));
+};

package/dist/runtime/conditional.d.ts

@@ -0,0 +1,78 @@
+type TextBinding = {
+    kind: "text";
+    path: number[];
+    expression: string;
+    read?: (scope: Record<string, unknown>) => unknown;
+};
+type ClassBinding = {
+    kind: "class";
+    path: number[];
+    className: string;
+    expression: string;
+    read?: (scope: Record<string, unknown>) => unknown;
+};
+type EventBinding = {
+    kind: "event";
+    path: number[];
+    eventName: string;
+    handler: string;
+    read?: (scope: Record<string, unknown>) => unknown;
+};
+type AttributeBinding = {
+    kind: "attr";
+    path: number[];
+    name: string;
+    expression: string;
+    read?: (scope: Record<string, unknown>) => unknown;
+};
+type StyleBinding = {
+    kind: "style";
+    path: number[];
+    name: string;
+    expression: string;
+    read?: (scope: Record<string, unknown>) => unknown;
+};
+type RefBinding = {
+    kind: "ref";
+    path: number[];
+    expression: string;
+};
+type ModelBinding = {
+    kind: "model";
+    path: number[];
+    property: "value" | "checked";
+    expression: string;
+    read?: (scope: Record<string, unknown>) => unknown;
+    write?: (scope: Record<string, unknown>, value: unknown) => void;
+};
+type NestedListBinding = {
+    kind: "list";
+    signature?: string;
+    path: number[];
+    each: string;
+    key: string;
+    keyRead?: (scope: Record<string, unknown>) => unknown;
+    keyReadItem?: (item: unknown) => unknown;
+    itemName: string;
+    templateHtml: string;
+    bindings: ConditionalBinding[];
+    read?: (scope: Record<string, unknown>) => unknown;
+};
+type NestedConditionalBinding = {
+    kind: "if";
+    signature?: string;
+    path: number[];
+    test: string;
+    templateHtml: string;
+    bindings: ConditionalBinding[];
+    read?: (scope: Record<string, unknown>) => unknown;
+};
+type ConditionalBinding = TextBinding | ClassBinding | EventBinding | AttributeBinding | StyleBinding | RefBinding | ModelBinding | NestedListBinding | NestedConditionalBinding;
+export type ConditionalOptions = {
+    signature?: string;
+    templateHtml: string;
+    bindings: ConditionalBinding[];
+};
+export declare const nodeAt: (root: Node, path: readonly number[]) => Node;
+export declare const mountConditional: (root: Node, path: readonly number[], visible: unknown, scope: Record<string, unknown>, options: ConditionalOptions) => void;
+export {};

package/dist/runtime/conditional.js

@@ -0,0 +1,140 @@
+import { elementAt, setClassPresence } from "./class.js";
+import { setAttributeValue, setRef, setStyleValue } from "./attr.js";
+import { delegate } from "./event.js";
+import { bindControl, setControlValue } from "./form.js";
+import { mountKeyedList } from "./list.js";
+import { setText, textAt } from "./text.js";
+const states = new WeakMap();
+export const nodeAt = (root, path) => {
+    let current = root;
+    for (const index of path) {
+        current = current.childNodes[index];
+    }
+    return current;
+};
+const readPath = (scope, expression) => {
+    const parts = expression.split(".");
+    let current = scope;
+    for (const part of parts) {
+        if (current == null || typeof current !== "object") {
+            return undefined;
+        }
+        current = current[part];
+    }
+    return current;
+};
+const writePath = (scope, expression, value) => {
+    const parts = expression.split(".");
+    const property = parts.pop();
+    let current = scope;
+    for (const part of parts) {
+        current = current && typeof current === "object" ? current[part] : undefined;
+    }
+    if (property && current && typeof current === "object") {
+        current[property] = value;
+    }
+};
+const signatureFor = (options) => options.signature ?? JSON.stringify(options);
+const readBinding = (scope, binding) => (binding.read ? binding.read(scope) : readPath(scope, binding.expression));
+const readExpression = (scope, expression, read) => (read ? read(scope) : readPath(scope, expression));
+const readEvent = (scope, binding) => binding.read ? binding.read(scope) : readPath(scope, binding.handler);
+const writeBinding = (scope, binding, value) => {
+    if (binding.write) {
+        binding.write(scope, value);
+        return;
+    }
+    writePath(scope, binding.expression, value);
+};
+const cleanup = (state) => {
+    for (const cleanupFn of state.cleanups) {
+        cleanupFn();
+    }
+    state.cleanups.length = 0;
+    for (const node of state.nodes) {
+        node.parentNode?.removeChild(node);
+    }
+    state.nodes.length = 0;
+};
+const createNodes = (templateHtml) => {
+    const template = document.createElement("template");
+    template.innerHTML = templateHtml;
+    return Array.from(template.content.childNodes).map((node) => node.cloneNode(true));
+};
+const bindNodes = (anchor, state, scope, options) => {
+    state.scope = scope;
+    const firstElement = state.nodes.find((node) => node instanceof Element);
+    if (!firstElement) {
+        return;
+    }
+    for (const binding of options.bindings) {
+        if (binding.kind === "text") {
+            setText(textAt(firstElement, binding.path), readBinding(scope, binding));
+        }
+        else if (binding.kind === "class") {
+            setClassPresence(elementAt(firstElement, binding.path), binding.className, readBinding(scope, binding));
+        }
+        else if (binding.kind === "attr") {
+            setAttributeValue(elementAt(firstElement, binding.path), binding.name, readBinding(scope, binding));
+        }
+        else if (binding.kind === "style") {
+            setStyleValue(elementAt(firstElement, binding.path), binding.name, readBinding(scope, binding));
+        }
+        else if (binding.kind === "ref") {
+            setRef(scope, binding.expression, elementAt(firstElement, binding.path));
+        }
+        else if (binding.kind === "model") {
+            setControlValue(elementAt(firstElement, binding.path), binding.property, readBinding(scope, binding));
+        }
+        else if (binding.kind === "list") {
+            mountKeyedList(firstElement, binding.path, readExpression(scope, binding.each, binding.read), { ...binding, scope });
+        }
+        else if (binding.kind === "if") {
+            mountConditional(firstElement, binding.path, readExpression(scope, binding.test, binding.read), scope, binding);
+        }
+    }
+    if (state.cleanups.length === 0) {
+        for (const binding of options.bindings) {
+            if (binding.kind === "event") {
+                const listener = (event) => {
+                    const handler = readEvent(state.scope, binding);
+                    if (typeof handler === "function") {
+                        handler(event);
+                    }
+                };
+                state.cleanups.push(delegate(firstElement, binding.eventName, binding.path, listener));
+            }
+            else if (binding.kind === "model") {
+                const element = elementAt(firstElement, binding.path);
+                state.cleanups.push(bindControl(element, binding.property, () => readBinding(scope, binding), (value) => writeBinding(scope, binding, value)));
+            }
+        }
+    }
+    if (!firstElement.isConnected) {
+        anchor.after(...state.nodes);
+    }
+};
+export const mountConditional = (root, path, visible, scope, options) => {
+    const anchor = nodeAt(root, path);
+    if (!(anchor instanceof Comment)) {
+        return;
+    }
+    const signature = signatureFor(options);
+    const current = states.get(anchor);
+    if (!visible) {
+        if (current) {
+            cleanup(current);
+            states.delete(anchor);
+        }
+        return;
+    }
+    const state = current && current.signature === signature
+        ? current
+        : {
+            signature,
+            nodes: createNodes(options.templateHtml),
+            cleanups: [],
+            scope,
+        };
+    states.set(anchor, state);
+    bindNodes(anchor, state, scope, options);
+};

package/dist/runtime/enhancement.d.ts

@@ -0,0 +1,11 @@
+export type EnhancementCleanup = () => void;
+export type EnhancementInitializer = (root: Element) => void | EnhancementCleanup;
+export type EnhancementRegistry = {
+    register: (name: string, initializer: EnhancementInitializer) => () => void;
+    enhance: (root?: ParentNode) => number;
+    cleanup: (root?: ParentNode) => number;
+};
+export declare const createEnhancementRegistry: () => EnhancementRegistry;
+export declare const registerEnhancement: (name: string, initializer: EnhancementInitializer) => () => void;
+export declare const enhance: (root?: ParentNode) => number;
+export declare const cleanupEnhancements: (root?: ParentNode) => number;

package/dist/runtime/enhancement.js

@@ -0,0 +1,70 @@
+const enhancementAttribute = "data-td-enhance";
+const rootsFor = (root) => {
+    const elements = [];
+    if (root instanceof Element && root.hasAttribute(enhancementAttribute)) {
+        elements.push(root);
+    }
+    elements.push(...Array.from(root.querySelectorAll(`[${enhancementAttribute}]`)));
+    return elements;
+};
+const enhancementNamesFor = (element) => (element.getAttribute(enhancementAttribute) ?? "")
+    .split(/\s+/)
+    .map((name) => name.trim())
+    .filter(Boolean);
+export const createEnhancementRegistry = () => {
+    const initializers = new Map();
+    const initialized = new WeakMap();
+    return {
+        register: (name, initializer) => {
+            if (initializers.has(name)) {
+                throw new Error(`Enhancement is already registered: ${name}`);
+            }
+            initializers.set(name, initializer);
+            return () => {
+                initializers.delete(name);
+            };
+        },
+        enhance: (root = document) => {
+            let count = 0;
+            for (const element of rootsFor(root)) {
+                const active = initialized.get(element) ?? new Map();
+                for (const name of enhancementNamesFor(element)) {
+                    if (active.has(name)) {
+                        continue;
+                    }
+                    const initializer = initializers.get(name);
+                    if (!initializer) {
+                        continue;
+                    }
+                    const cleanup = initializer(element);
+                    active.set(name, cleanup || undefined);
+                    count += 1;
+                }
+                if (active.size > 0) {
+                    initialized.set(element, active);
+                }
+            }
+            return count;
+        },
+        cleanup: (root = document) => {
+            let count = 0;
+            for (const element of rootsFor(root)) {
+                const active = initialized.get(element);
+                if (!active) {
+                    continue;
+                }
+                for (const cleanup of active.values()) {
+                    cleanup?.();
+                    count += 1;
+                }
+                active.clear();
+                initialized.delete(element);
+            }
+            return count;
+        },
+    };
+};
+const defaultRegistry = createEnhancementRegistry();
+export const registerEnhancement = defaultRegistry.register;
+export const enhance = defaultRegistry.enhance;
+export const cleanupEnhancements = defaultRegistry.cleanup;

package/dist/runtime/error-boundary.d.ts

@@ -0,0 +1,8 @@
+import { type ClientHtml } from "./html.js";
+type ErrorBoundaryRenderValue = string | ClientHtml | Node | readonly Node[] | DocumentFragment;
+export type ErrorBoundaryOptions = {
+    render: (root: Element) => void;
+    fallback: (error: unknown) => ErrorBoundaryRenderValue;
+};
+export declare const createErrorBoundary: (root: Element, options: ErrorBoundaryOptions) => (() => void);
+export {};

package/dist/runtime/error-boundary.js

@@ -0,0 +1,27 @@
+import { catchError } from "./signal.js";
+import { isClientHtml } from "./html.js";
+const renderValue = (root, value) => {
+    root.replaceChildren();
+    if (typeof value === "string") {
+        root.textContent = value;
+        return;
+    }
+    if (isClientHtml(value)) {
+        root.innerHTML = value.toString();
+        return;
+    }
+    if (value instanceof DocumentFragment) {
+        root.appendChild(value);
+        return;
+    }
+    if (value instanceof Node) {
+        root.appendChild(value);
+        return;
+    }
+    root.append(...value);
+};
+export const createErrorBoundary = (root, options) => catchError(() => {
+    options.render(root);
+}, (error) => {
+    renderValue(root, options.fallback(error));
+});

package/dist/runtime/event.d.ts

@@ -0,0 +1 @@
+export declare const delegate: (root: Element, eventName: string, path: readonly number[], handler: EventListener) => (() => void);

package/dist/runtime/event.js

@@ -0,0 +1,11 @@
+export const delegate = (root, eventName, path, handler) => {
+    let target = root;
+    for (const index of path) {
+        target = target.childNodes[index];
+    }
+    if (!(target instanceof Element)) {
+        return () => undefined;
+    }
+    target.addEventListener(eventName, handler);
+    return () => target.removeEventListener(eventName, handler);
+};

package/dist/runtime/form.d.ts

@@ -0,0 +1,41 @@
+export type BoundControl = HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement;
+export declare const setControlValue: (element: BoundControl, property: "value" | "checked", value: unknown) => void;
+export declare const bindControl: (element: Element, property: "value" | "checked", read: () => unknown, write: (value: unknown) => void) => (() => void);
+export type EnhancedFormContext = {
+    form: HTMLFormElement;
+    request: Request;
+    formData: FormData;
+};
+export type FormFieldRule = {
+    required?: boolean;
+    pattern?: RegExp;
+    minLength?: number;
+    maxLength?: number;
+    message?: string;
+    validate?: (value: string, formData: FormData) => string | undefined | null;
+};
+export type FormValidationResult = {
+    ok: true;
+    values: Record<string, FormDataEntryValue | FormDataEntryValue[]>;
+} | {
+    ok: false;
+    errors: Record<string, string>;
+};
+export type EnhanceFormOptions = {
+    validate?: (context: EnhancedFormContext) => FormValidationResult | Promise<FormValidationResult>;
+    submit?: (context: EnhancedFormContext) => Response | Promise<Response>;
+    onInvalid?: (context: EnhancedFormContext & {
+        errors: Record<string, string>;
+    }) => void | Promise<void>;
+    onSuccess?: (context: EnhancedFormContext & {
+        response: Response;
+    }) => void | Promise<void>;
+    onError?: (context: EnhancedFormContext & {
+        error: unknown;
+    }) => void | Promise<void>;
+    navigate?: (href: string, options?: {
+        replace?: boolean;
+    }) => void | Promise<void>;
+};
+export declare const validateFormData: (formData: FormData, rules: Record<string, FormFieldRule>) => FormValidationResult;
+export declare const enhanceForm: (form: HTMLFormElement, options?: EnhanceFormOptions) => (() => void);

package/dist/runtime/form.js

@@ -0,0 +1,167 @@
+export const setControlValue = (element, property, value) => {
+    if (property === "checked" && element instanceof HTMLInputElement) {
+        element.checked = Boolean(value);
+        return;
+    }
+    element.value = value == null ? "" : String(value);
+};
+export const bindControl = (element, property, read, write) => {
+    if (!(element instanceof HTMLInputElement ||
+        element instanceof HTMLTextAreaElement ||
+        element instanceof HTMLSelectElement)) {
+        return () => undefined;
+    }
+    const control = element;
+    setControlValue(control, property, read());
+    const eventName = property === "checked" ? "change" : "input";
+    let composing = false;
+    const commit = () => {
+        write(property === "checked" && control instanceof HTMLInputElement ? control.checked : control.value);
+    };
+    const listener = (event) => {
+        if (property === "value" && (event.isComposing || composing)) {
+            return;
+        }
+        commit();
+    };
+    const onCompositionStart = () => {
+        composing = true;
+    };
+    const onCompositionEnd = () => {
+        composing = false;
+        commit();
+    };
+    control.addEventListener(eventName, listener);
+    if (property === "value") {
+        control.addEventListener("compositionstart", onCompositionStart);
+        control.addEventListener("compositionend", onCompositionEnd);
+    }
+    return () => {
+        control.removeEventListener(eventName, listener);
+        control.removeEventListener("compositionstart", onCompositionStart);
+        control.removeEventListener("compositionend", onCompositionEnd);
+    };
+};
+const formMethod = (form) => (form.getAttribute("method") || "get").toUpperCase();
+const formAction = (form) => new URL(form.getAttribute("action") || location.href, location.href);
+const requestForForm = (form, formData) => {
+    const method = formMethod(form);
+    const url = formAction(form);
+    if (method === "GET") {
+        for (const [name, value] of formData) {
+            url.searchParams.append(name, String(value));
+        }
+        return new Request(url, { method });
+    }
+    return new Request(url, { method, body: formData });
+};
+const valuesForFormData = (formData) => {
+    const values = {};
+    for (const [name, value] of formData) {
+        const current = values[name];
+        if (current === undefined) {
+            values[name] = value;
+        }
+        else if (Array.isArray(current)) {
+            current.push(value);
+        }
+        else {
+            values[name] = [current, value];
+        }
+    }
+    return values;
+};
+const fieldStringValue = (formData, name) => {
+    const value = formData.get(name);
+    return typeof File !== "undefined" && value instanceof File ? value.name : String(value ?? "");
+};
+export const validateFormData = (formData, rules) => {
+    const errors = {};
+    for (const [name, rule] of Object.entries(rules)) {
+        const value = fieldStringValue(formData, name);
+        const message = rule.message ?? `${name} is invalid.`;
+        if (rule.required && value.trim() === "") {
+            errors[name] = message;
+            continue;
+        }
+        if (rule.minLength !== undefined && value.length < rule.minLength) {
+            errors[name] = message;
+            continue;
+        }
+        if (rule.maxLength !== undefined && value.length > rule.maxLength) {
+            errors[name] = message;
+            continue;
+        }
+        if (rule.pattern && !rule.pattern.test(value)) {
+            errors[name] = message;
+            continue;
+        }
+        const customError = rule.validate?.(value, formData);
+        if (customError) {
+            errors[name] = customError;
+        }
+    }
+    return Object.keys(errors).length > 0 ? { ok: false, errors } : { ok: true, values: valuesForFormData(formData) };
+};
+const isSettableControl = (element) => element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement || element instanceof HTMLSelectElement;
+const clearCustomValidity = (form) => {
+    for (const element of Array.from(form.elements)) {
+        if (isSettableControl(element)) {
+            element.setCustomValidity("");
+            element.removeAttribute("aria-invalid");
+        }
+    }
+};
+const namedControl = (form, name) => Array.from(form.elements).find((element) => isSettableControl(element) && element.name === name);
+const applyValidationErrors = (form, errors) => {
+    let firstInvalid;
+    for (const [name, message] of Object.entries(errors)) {
+        const control = namedControl(form, name);
+        if (!control) {
+            continue;
+        }
+        control.setCustomValidity(message);
+        control.setAttribute("aria-invalid", "true");
+        firstInvalid ??= control;
+    }
+    firstInvalid?.focus();
+    form.reportValidity();
+};
+export const enhanceForm = (form, options = {}) => {
+    const submit = options.submit ?? ((context) => fetch(context.request));
+    const listener = (event) => {
+        if (event.defaultPrevented) {
+            return;
+        }
+        event.preventDefault();
+        clearCustomValidity(form);
+        if (!form.noValidate && !form.checkValidity()) {
+            form.reportValidity();
+            return;
+        }
+        const formData = event.submitter instanceof HTMLElement ? new FormData(form, event.submitter) : new FormData(form);
+        const request = requestForForm(form, formData);
+        const context = { form, request, formData };
+        void (async () => {
+            try {
+                const validation = await options.validate?.(context);
+                if (validation && !validation.ok) {
+                    applyValidationErrors(form, validation.errors);
+                    await options.onInvalid?.({ ...context, errors: validation.errors });
+                    return;
+                }
+                const response = await submit(context);
+                const locationHeader = response.headers.get("location");
+                if (response.redirected || (response.status >= 300 && response.status < 400 && locationHeader)) {
+                    await options.navigate?.(locationHeader ?? response.url, { replace: true });
+                }
+                await options.onSuccess?.({ ...context, response });
+            }
+            catch (error) {
+                await options.onError?.({ ...context, error });
+            }
+        })();
+    };
+    form.addEventListener("submit", listener);
+    return () => form.removeEventListener("submit", listener);
+};

package/dist/runtime/fragment.d.ts

@@ -0,0 +1,6 @@
+export type FragmentHandle = {
+    nodes: Node[];
+    remove: () => void;
+};
+export declare const createFragmentNodes: (templateHtml: string) => Node[];
+export declare const mountFragment: (parent: ParentNode, before: Node | null, nodes: readonly Node[]) => FragmentHandle;

package/dist/runtime/fragment.js

@@ -0,0 +1,18 @@
+export const createFragmentNodes = (templateHtml) => {
+    const template = document.createElement("template");
+    template.innerHTML = templateHtml;
+    return Array.from(template.content.childNodes).map((node) => node.cloneNode(true));
+};
+export const mountFragment = (parent, before, nodes) => {
+    for (const node of nodes) {
+        parent.insertBefore(node, before);
+    }
+    return {
+        nodes: [...nodes],
+        remove: () => {
+            for (const node of nodes) {
+                node.parentNode?.removeChild(node);
+            }
+        },
+    };
+};