tachyon-dom 0.1.0

package/dist/runtime/list.js

@@ -0,0 +1,424 @@
+import { setClassPresence } from "./class.js";
+import { setAttributeValue, setRef, setStyleValue } from "./attr.js";
+import { setText } from "./text.js";
+import { bindControl, setControlValue } from "./form.js";
+import { mountConditional } from "./conditional.js";
+import { createSignal, effect, untrack } from "./signal.js";
+const listStates = new WeakMap();
+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 readItemPath = (item, expression, itemName) => {
+    if (expression === itemName) {
+        return item;
+    }
+    const prefix = `${itemName}.`;
+    if (!expression.startsWith(prefix)) {
+        return undefined;
+    }
+    return readPath(item, expression.slice(prefix.length));
+};
+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 readBinding = (scope, binding) => (binding.read ? binding.read(scope) : readPath(scope, binding.expression));
+const readHandler = (scope, binding) => binding.read ? binding.read(scope) : readPath(scope, binding.handler);
+const scopedItem = (itemName, item, scope) => ({ ...scope, [itemName]: item });
+const nodeAt = (root, path) => {
+    let current = root;
+    for (const index of path) {
+        current = current.childNodes[index];
+    }
+    return current;
+};
+const nodeAtRecord = (record, path) => {
+    if (record.nodes.length <= 1) {
+        return nodeAt(record.element, path);
+    }
+    const [firstIndex, ...rest] = path;
+    const root = record.nodes[firstIndex ?? 0] ?? record.element;
+    return nodeAt(root, rest);
+};
+const createTemplate = (templateHtml) => {
+    const template = document.createElement("template");
+    template.innerHTML = templateHtml;
+    return template;
+};
+const optionsSignature = (options) => options.signature ??
+    JSON.stringify({
+        key: options.key,
+        itemName: options.itemName,
+        templateHtml: options.templateHtml,
+        bindings: options.bindings,
+    });
+const cleanupListState = (state) => {
+    for (const cleanup of state.cleanups) {
+        cleanup();
+    }
+    state.cleanups.length = 0;
+    state.records.forEach(cleanupRecord);
+    state.records.clear();
+};
+const cleanupNestedListStates = (node) => {
+    if (!(node instanceof Element)) {
+        return;
+    }
+    const state = listStates.get(node);
+    if (state) {
+        cleanupListState(state);
+        listStates.delete(node);
+    }
+    for (const child of Array.from(node.childNodes)) {
+        cleanupNestedListStates(child);
+    }
+};
+const getListState = (container, options) => {
+    const current = listStates.get(container);
+    if (current && current.options === options) {
+        return current;
+    }
+    const signature = optionsSignature(options);
+    if (current && current.signature === signature) {
+        current.options = options;
+        return current;
+    }
+    if (current) {
+        cleanupListState(current);
+    }
+    const template = createTemplate(options.templateHtml);
+    const elementIndices = Array.from(template.content.childNodes).flatMap((node, index) => node instanceof Element ? [index] : []);
+    const next = {
+        signature,
+        options,
+        templateHtml: options.templateHtml,
+        records: new Map(),
+        recordsByElement: new WeakMap(),
+        template,
+        elementIndices,
+        cleanups: [],
+    };
+    listStates.set(container, next);
+    return next;
+};
+const cleanupRecord = (record) => {
+    for (const cleanup of record.cleanups) {
+        cleanup();
+    }
+    record.cleanups.length = 0;
+    for (const node of record.nodes) {
+        cleanupNestedListStates(node);
+        node.parentNode?.removeChild(node);
+    }
+};
+const shouldApplyValue = (record, index, value) => {
+    if (Object.is(record.lastValues[index], value)) {
+        return false;
+    }
+    record.lastValues[index] = value;
+    return true;
+};
+const applyRowBinding = (record, scope, options, binding, index) => {
+    record.revision();
+    if (binding.kind === "text") {
+        const value = readBinding(scope, binding);
+        if (shouldApplyValue(record, index, value)) {
+            setText(nodeAtRecord(record, binding.path), value);
+        }
+    }
+    else if (binding.kind === "class") {
+        const value = readBinding(scope, binding);
+        if (shouldApplyValue(record, index, value)) {
+            setClassPresence(nodeAtRecord(record, binding.path), binding.className, value);
+        }
+    }
+    else if (binding.kind === "attr") {
+        const value = readBinding(scope, binding);
+        if (shouldApplyValue(record, index, value)) {
+            setAttributeValue(nodeAtRecord(record, binding.path), binding.name, value);
+        }
+    }
+    else if (binding.kind === "style") {
+        const value = readBinding(scope, binding);
+        if (shouldApplyValue(record, index, value)) {
+            setStyleValue(nodeAtRecord(record, binding.path), binding.name, value);
+        }
+    }
+    else if (binding.kind === "ref") {
+        setRef(scope, binding.expression, nodeAtRecord(record, binding.path));
+    }
+    else if (binding.kind === "model") {
+        const value = readBinding(scope, binding);
+        if (shouldApplyValue(record, index, value)) {
+            setControlValue(nodeAtRecord(record, binding.path), binding.property, value);
+        }
+    }
+    else if (binding.kind === "list") {
+        const eachBinding = binding.read ? { expression: binding.each, read: binding.read } : { expression: binding.each };
+        const value = readBinding(scope, eachBinding);
+        mountKeyedList(record.element, binding.path, value, { ...binding, scope });
+    }
+    else if (binding.kind === "if") {
+        const testBinding = binding.read ? { expression: binding.test, read: binding.read } : { expression: binding.test };
+        const value = readBinding(scope, testBinding);
+        mountConditional(record.element, binding.path, value, scope, binding);
+    }
+};
+const bindRowBindings = (record, options) => {
+    const rowBindings = options.bindings
+        .map((binding, index) => ({ binding, index }))
+        .filter((entry) => entry.binding.kind !== "event");
+    if (rowBindings.length === 0) {
+        return;
+    }
+    record.cleanups.push(untrack(() => effect(() => {
+        for (const { binding, index } of rowBindings) {
+            applyRowBinding(record, record.scope, options, binding, index);
+        }
+    })));
+};
+const bindRowEvents = (record, options) => {
+    const delegateKeys = new Set();
+    for (const binding of options.bindings) {
+        if (binding.kind !== "event") {
+            continue;
+        }
+        const delegateKey = `${binding.eventName}:${binding.path.join(".")}:${binding.handler}`;
+        if (delegateKeys.has(delegateKey)) {
+            continue;
+        }
+        delegateKeys.add(delegateKey);
+        const target = nodeAtRecord(record, binding.path);
+        if (!(target instanceof Element)) {
+            continue;
+        }
+        const listener = (event) => {
+            const handler = readHandler(record.scope, binding);
+            if (typeof handler === "function") {
+                handler(event);
+            }
+        };
+        target.addEventListener(binding.eventName, listener);
+        record.cleanups.push(() => target.removeEventListener(binding.eventName, listener));
+    }
+};
+const bindRowControls = (record, options) => {
+    for (const binding of options.bindings) {
+        if (binding.kind !== "model") {
+            continue;
+        }
+        const element = nodeAtRecord(record, binding.path);
+        record.cleanups.push(bindControl(element, binding.property, () => readBinding(record.scope, binding), (value) => {
+            if (binding.write) {
+                binding.write(record.scope, value);
+                return;
+            }
+            writePath(record.scope, binding.expression, value);
+        }));
+    }
+};
+const keyFor = (item, options) => {
+    const key = options.keyReadItem
+        ? options.keyReadItem(item)
+        : options.keyRead
+            ? options.keyRead(scopedItem(options.itemName, item, options.scope))
+            : readItemPath(item, options.key, options.itemName);
+    if (typeof key === "string" || typeof key === "number" || typeof key === "symbol") {
+        return key;
+    }
+    return String(key);
+};
+const isProductionEnvironment = () => typeof process !== "undefined" && process.env.NODE_ENV === "production";
+const warnDuplicateKey = (key, options) => {
+    if (isProductionEnvironment() || typeof console.warn !== "function") {
+        return;
+    }
+    const location = options.signature ? ` ${options.signature}` : "";
+    console.warn(`Duplicate key ${JSON.stringify(String(key))} in keyed <for> list${location}. Later items with the same key were skipped.`);
+};
+const createRecord = (state, key, item, options, existingElements) => {
+    const nodes = Array.from(state.template.content.childNodes).map((node) => node.cloneNode(true));
+    if (existingElements) {
+        state.elementIndices.forEach((nodeIndex, elementIndex) => {
+            const existing = existingElements[elementIndex];
+            if (existing)
+                nodes[nodeIndex] = existing;
+        });
+    }
+    const element = nodes.find((node) => node instanceof Element);
+    if (!element) {
+        return undefined;
+    }
+    const scope = scopedItem(options.itemName, item, options.scope);
+    const record = {
+        key,
+        element,
+        nodes,
+        scope,
+        cleanups: [],
+        lastValues: [],
+        item,
+        revision: createSignal(0),
+    };
+    for (const node of nodes) {
+        if (node instanceof Element) {
+            state.recordsByElement.set(node, record);
+        }
+    }
+    bindRowEvents(record, options);
+    bindRowBindings(record, options);
+    untrack(() => bindRowControls(record, options));
+    return record;
+};
+const updateRecord = (record, item, options) => {
+    if (options.scope) {
+        Object.assign(record.scope, options.scope);
+    }
+    record.scope[options.itemName] = item;
+    record.item = item;
+    record.revision.update((value) => value + 1);
+};
+const moveBefore = (container, node, before) => {
+    const movableContainer = container;
+    if (typeof movableContainer.moveBefore === "function") {
+        try {
+            movableContainer.moveBefore(node, before);
+            return;
+        }
+        catch (error) {
+            if (!(error instanceof DOMException && error.name === "HierarchyRequestError")) {
+                throw error;
+            }
+        }
+    }
+    container.insertBefore(node, before);
+};
+const longestIncreasingSubsequencePositions = (values) => {
+    const predecessors = Array(values.length).fill(-1);
+    const tails = [];
+    const tailPositions = [];
+    for (let index = 0; index < values.length; index++) {
+        const value = values[index];
+        if (value < 0) {
+            continue;
+        }
+        let low = 0;
+        let high = tails.length;
+        while (low < high) {
+            const middle = (low + high) >> 1;
+            if (tails[middle] < value) {
+                low = middle + 1;
+            }
+            else {
+                high = middle;
+            }
+        }
+        if (low > 0) {
+            predecessors[index] = tailPositions[low - 1];
+        }
+        tails[low] = value;
+        tailPositions[low] = index;
+    }
+    const positions = new Set();
+    let cursor = tailPositions[tails.length - 1] ?? -1;
+    while (cursor >= 0) {
+        positions.add(cursor);
+        cursor = predecessors[cursor];
+    }
+    return positions;
+};
+const positionRecords = (container, orderedRecords, previousRecords) => {
+    const previousOrder = new Map();
+    Array.from(previousRecords.keys()).forEach((key, index) => previousOrder.set(key, index));
+    const stablePositions = longestIncreasingSubsequencePositions(orderedRecords.map((record) => previousOrder.get(record.key) ?? -1));
+    let anchor = null;
+    for (let index = orderedRecords.length - 1; index >= 0; index--) {
+        const record = orderedRecords[index];
+        if (stablePositions.has(index)) {
+            anchor = record.nodes[0] ?? anchor;
+            continue;
+        }
+        for (let nodeIndex = record.nodes.length - 1; nodeIndex >= 0; nodeIndex--) {
+            const node = record.nodes[nodeIndex];
+            if (node.parentNode !== container || node.nextSibling !== anchor) {
+                moveBefore(container, node, anchor);
+            }
+            anchor = node;
+        }
+    }
+};
+export const mountKeyedList = (root, path, items, options) => {
+    const container = nodeAt(root, path);
+    if (!(container instanceof Element)) {
+        return;
+    }
+    const state = getListState(container, options);
+    if (!items) {
+        state.records.forEach((record) => {
+            cleanupRecord(record);
+            state.recordsByElement.delete(record.element);
+        });
+        state.records.clear();
+        return;
+    }
+    const nextRecords = new Map();
+    const orderedRecords = [];
+    const serverElements = Array.from(container.children);
+    const canAdoptServerRows = state.records.size === 0
+        && state.elementIndices.length > 0
+        && serverElements.length >= items.length * state.elementIndices.length;
+    const seenKeys = new Set();
+    for (const item of items) {
+        const key = keyFor(item, options);
+        if (seenKeys.has(key)) {
+            warnDuplicateKey(key, options);
+            continue;
+        }
+        seenKeys.add(key);
+        const existing = state.records.get(key);
+        const adoptable = canAdoptServerRows
+            ? serverElements.slice(orderedRecords.length * state.elementIndices.length, (orderedRecords.length + 1) * state.elementIndices.length)
+            : undefined;
+        const record = existing ?? createRecord(state, key, item, options, adoptable);
+        if (!record) {
+            continue;
+        }
+        if (existing) {
+            updateRecord(record, item, options);
+        }
+        nextRecords.set(key, record);
+        orderedRecords.push(record);
+    }
+    state.records.forEach((record, key) => {
+        if (!nextRecords.has(key)) {
+            cleanupRecord(record);
+            for (const node of record.nodes) {
+                if (node instanceof Element) {
+                    state.recordsByElement.delete(node);
+                }
+            }
+        }
+    });
+    if (canAdoptServerRows) {
+        container.replaceChildren(...orderedRecords.flatMap((record) => record.nodes));
+    }
+    else {
+        positionRecords(container, orderedRecords, state.records);
+    }
+    state.records = nextRecords;
+};

package/dist/runtime/portal.d.ts

@@ -0,0 +1,6 @@
+export type PortalHandle = {
+    target: Element;
+    nodes: Node[];
+    remove: () => void;
+};
+export declare const mountPortal: (target: Element, nodes: readonly Node[]) => PortalHandle;

package/dist/runtime/portal.js

@@ -0,0 +1,12 @@
+export const mountPortal = (target, nodes) => {
+    target.append(...nodes);
+    return {
+        target,
+        nodes: [...nodes],
+        remove: () => {
+            for (const node of nodes) {
+                node.parentNode?.removeChild(node);
+            }
+        },
+    };
+};

package/dist/runtime/router.d.ts

@@ -0,0 +1,102 @@
+import { type ClientHtml } from "./html.js";
+export { rawHtml, type ClientHtml } from "./html.js";
+export type ClientRouteParams = Record<string, string>;
+export type ClientRouteContext<Data = unknown> = {
+    url: URL;
+    params: ClientRouteParams;
+    data: Data;
+    signal: AbortSignal;
+};
+type ClientRenderValue = string | ClientHtml | Node | readonly Node[] | DocumentFragment;
+export type ClientHeadDescriptor = {
+    title?: string;
+    metas?: Array<Record<string, string>>;
+    links?: Array<Record<string, string>>;
+    scripts?: Array<Record<string, string>>;
+};
+export type ClientRouteDefinition<Data = unknown> = {
+    id?: string;
+    path: string;
+    children?: readonly ClientRouteDefinition[];
+    target?: string | Element | ((context: {
+        root: Element;
+        url: URL;
+        params: ClientRouteParams;
+        data: Data;
+    }) => Element | undefined | null);
+    load?: (context: Omit<ClientRouteContext<Data>, "data">) => Data | Promise<Data>;
+    head?: (context: ClientRouteContext<Data>) => ClientHeadDescriptor | Promise<ClientHeadDescriptor>;
+    action?: (context: Omit<ClientRouteContext<Data>, "data"> & {
+        request: Request;
+    }) => Response | Promise<Response>;
+    revalidateOnAction?: "self" | "all" | readonly string[] | ((context: {
+        url: URL;
+        response: Response;
+    }) => readonly string[]);
+    render: (context: ClientRouteContext<Data>) => ClientRenderValue | Promise<ClientRenderValue>;
+};
+export type ClientRouterOptions = {
+    root: Element;
+    routes: readonly ClientRouteDefinition[];
+    baseUrl?: string;
+    notFound?: (context: {
+        url: URL;
+    }) => ClientRenderValue;
+    error?: (context: {
+        url: URL;
+        error: unknown;
+    }) => ClientRenderValue;
+    scrollTo?: (x: number, y: number) => void;
+    focusSelector?: string;
+    cache?: boolean;
+    initialCache?: readonly {
+        href: string;
+        data: unknown;
+    }[];
+    eager?: boolean;
+    liveRegion?: Element;
+    title?: (context: {
+        url: URL;
+        data: unknown;
+    }) => string;
+    viewTransition?: boolean | ((context: {
+        url: URL;
+        params: ClientRouteParams;
+        data: unknown;
+    }) => boolean);
+};
+export type ClientRouter = {
+    start: () => Promise<void>;
+    navigate: (href: string, options?: {
+        replace?: boolean;
+    }) => Promise<void>;
+    submit: (href: string, init?: RequestInit) => Promise<Response>;
+    prefetch: (href: string) => Promise<void>;
+    revalidate: (hrefs?: string | readonly string[]) => Promise<void>;
+    invalidate: (href?: string) => void;
+    settled: () => Promise<void>;
+    dispose: () => void;
+};
+export type RouteHotReloader = {
+    accept: (update?: {
+        routeIds?: readonly string[];
+        href?: string;
+    }) => Promise<void>;
+};
+export type RouteHotReloaderOptions = Pick<ClientRouter, "invalidate" | "navigate"> & {
+    currentPath?: () => string;
+    onUpdate?: (update: {
+        routeIds?: readonly string[];
+        href: string;
+    }) => void | Promise<void>;
+};
+export type RouteHotApi = {
+    on: (event: "tachyon-dom:routes-update", callback: (payload: {
+        routeIds?: readonly string[];
+        href?: string;
+    }) => void) => void;
+    dispose?: (callback: () => void) => void;
+};
+export declare const createClientRouter: (options: ClientRouterOptions) => ClientRouter;
+export declare const createRouteHotReloader: (options: RouteHotReloaderOptions) => RouteHotReloader;
+export declare const connectRouteHotReloader: (hot: RouteHotApi | undefined, reloader: RouteHotReloader) => (() => void);