tachyon-dom 0.1.0

package/dist/runtime/signal.js

@@ -0,0 +1,275 @@
+const signalBrand = Symbol("tachyon.signal");
+let activeEffect;
+let batchDepth = 0;
+let flushing = false;
+const pendingComputedEffects = new Set();
+const pendingEffects = new Set();
+const cleanup = (runner) => {
+    for (const child of Array.from(runner.children)) {
+        disposeRunner(child);
+    }
+    runner.children.clear();
+    for (const dependency of runner.dependencies) {
+        dependency.delete(runner);
+    }
+    runner.dependencies.clear();
+};
+const disposeRunner = (runner) => {
+    if (runner.disposed) {
+        return;
+    }
+    runner.disposed = true;
+    cleanup(runner);
+    runner.parent?.children.delete(runner);
+};
+const track = (subscribers) => {
+    if (activeEffect && !activeEffect.disposed) {
+        subscribers.add(activeEffect);
+        activeEffect.dependencies.add(subscribers);
+    }
+};
+const flushPendingEffects = () => {
+    if (flushing) {
+        return;
+    }
+    flushing = true;
+    try {
+        while (pendingComputedEffects.size > 0 || pendingEffects.size > 0) {
+            const runner = pendingComputedEffects.values().next().value ?? pendingEffects.values().next().value;
+            if (!runner) {
+                break;
+            }
+            if (runner.computed) {
+                pendingComputedEffects.delete(runner);
+            }
+            else {
+                pendingEffects.delete(runner);
+            }
+            runner.run();
+        }
+    }
+    finally {
+        flushing = false;
+    }
+};
+const scheduleFlush = () => {
+    if (batchDepth === 0 && !activeEffect) {
+        flushPendingEffects();
+    }
+};
+const notify = (subscribers) => {
+    const snapshot = Array.from(subscribers);
+    for (const subscriber of snapshot) {
+        if (!subscriber.disposed) {
+            if (subscriber.computed) {
+                pendingComputedEffects.add(subscriber);
+            }
+            else {
+                pendingEffects.add(subscriber);
+            }
+        }
+    }
+    scheduleFlush();
+};
+export const isSignal = (value) => typeof value === "function" && value[signalBrand] === true;
+export function read(value) {
+    return isSignal(value) ? value() : value;
+}
+export const untrack = (fn) => {
+    const previous = activeEffect;
+    activeEffect = undefined;
+    try {
+        return fn();
+    }
+    finally {
+        activeEffect = previous;
+    }
+};
+export const batch = (fn) => {
+    batchDepth++;
+    try {
+        return fn();
+    }
+    finally {
+        batchDepth--;
+        scheduleFlush();
+    }
+};
+export const createSignal = (initial) => {
+    let current = initial;
+    const subscribers = new Set();
+    const signal = (() => {
+        track(subscribers);
+        return current;
+    });
+    Object.defineProperty(signal, signalBrand, { value: true });
+    signal.set = (value) => {
+        if (Object.is(current, value)) {
+            return;
+        }
+        current = value;
+        notify(subscribers);
+    };
+    signal.update = (updater) => signal.set(updater(current));
+    return signal;
+};
+export const createMemo = (fn) => {
+    const value = createSignal(undefined);
+    createEffect(() => {
+        value.set(fn());
+    }, true);
+    const memo = (() => value());
+    Object.defineProperty(memo, signalBrand, { value: true });
+    return memo;
+};
+export const createStore = (initial) => {
+    const values = { ...initial };
+    const subscribers = new Map();
+    const subscribersFor = (property) => {
+        let set = subscribers.get(property);
+        if (!set) {
+            set = new Set();
+            subscribers.set(property, set);
+        }
+        return set;
+    };
+    return new Proxy(values, {
+        get(target, property, receiver) {
+            if (property === Symbol.toStringTag) {
+                return "TachyonStore";
+            }
+            track(subscribersFor(property));
+            return Reflect.get(target, property, receiver);
+        },
+        set(target, property, value, receiver) {
+            const previous = Reflect.get(target, property, receiver);
+            if (Object.is(previous, value)) {
+                return true;
+            }
+            const didSet = Reflect.set(target, property, value, receiver);
+            if (didSet) {
+                notify(subscribersFor(property));
+            }
+            return didSet;
+        },
+    });
+};
+const createEffect = (fn, computed) => {
+    const parent = activeEffect && !activeEffect.disposed ? activeEffect : undefined;
+    const runner = {
+        disposed: false,
+        computed,
+        dependencies: new Set(),
+        children: new Set(),
+        parent,
+        run: () => {
+            if (runner.disposed) {
+                return;
+            }
+            cleanup(runner);
+            const previous = activeEffect;
+            activeEffect = runner;
+            try {
+                fn();
+            }
+            finally {
+                activeEffect = previous;
+                if (!previous) {
+                    scheduleFlush();
+                }
+            }
+        },
+    };
+    parent?.children.add(runner);
+    runner.run();
+    return () => disposeRunner(runner);
+};
+export const effect = (fn) => createEffect(fn, false);
+export const catchError = (fn, onError) => effect(() => {
+    try {
+        fn();
+    }
+    catch (error) {
+        onError(error);
+    }
+});
+export const createResource = (source, fetcher) => {
+    const data = createSignal(undefined);
+    const error = createSignal(undefined);
+    const loading = createSignal(true);
+    let current;
+    let version = 0;
+    let disposed = false;
+    let controller;
+    let disposeTracking;
+    let hasSource = false;
+    let lastSource;
+    const sourceValue = () => (isSignal(source) ? source() : source);
+    const run = (value = sourceValue()) => {
+        if (disposed) {
+            return Promise.resolve(undefined);
+        }
+        if (loading() && current && hasSource && Object.is(lastSource, value)) {
+            return current;
+        }
+        hasSource = true;
+        lastSource = value;
+        controller?.abort();
+        const nextController = new AbortController();
+        controller = nextController;
+        const runVersion = ++version;
+        batch(() => {
+            loading.set(true);
+            error.set(undefined);
+        });
+        current = Promise.resolve()
+            .then(() => fetcher(value, { signal: nextController.signal }))
+            .then((value) => {
+            if (!disposed && runVersion === version) {
+                batch(() => {
+                    data.set(value);
+                    error.set(undefined);
+                    loading.set(false);
+                });
+            }
+            return value;
+        }, (reason) => {
+            if (!disposed && runVersion === version) {
+                batch(() => {
+                    error.set(reason);
+                    loading.set(false);
+                });
+            }
+            return undefined;
+        });
+        return current;
+    };
+    if (isSignal(source)) {
+        disposeTracking = effect(() => {
+            const value = source();
+            if (!hasSource || !Object.is(lastSource, value)) {
+                void untrack(() => run(value));
+            }
+        });
+    }
+    else {
+        void run();
+    }
+    return {
+        data,
+        error,
+        loading,
+        refetch: run,
+        dispose: () => {
+            if (disposed) {
+                return;
+            }
+            disposed = true;
+            version += 1;
+            controller?.abort();
+            disposeTracking?.();
+            current = undefined;
+            loading.set(false);
+        },
+    };
+};

package/dist/runtime/store.d.ts

@@ -0,0 +1 @@
+export { createStore } from "./signal.js";

package/dist/runtime/store.js

@@ -0,0 +1 @@
+export { createStore } from "./signal.js";

package/dist/runtime/stream-client.d.ts

@@ -0,0 +1,8 @@
+export declare const readTextStreamChunks: (stream: ReadableStream<Uint8Array>) => Promise<string[]>;
+export type DeferredDataChunk = {
+    id: string;
+    key: string;
+    value: unknown;
+};
+export declare const applyDeferredDataChunk: (root: ParentNode, chunk: DeferredDataChunk) => boolean;
+export declare const readDeferredDataScript: <T = unknown>(root: ParentNode, id: string) => T | undefined;

package/dist/runtime/stream-client.js

@@ -0,0 +1,33 @@
+export const readTextStreamChunks = async (stream) => {
+    const reader = stream.getReader();
+    const decoder = new TextDecoder();
+    const chunks = [];
+    while (true) {
+        const result = await reader.read();
+        if (result.done) {
+            const trailing = decoder.decode();
+            if (trailing) {
+                chunks.push(trailing);
+            }
+            return chunks;
+        }
+        chunks.push(decoder.decode(result.value, { stream: true }));
+    }
+};
+const escapeSelectorValue = (value) => value.replaceAll("\\", "\\\\").replaceAll(`"`, `\\"`);
+export const applyDeferredDataChunk = (root, chunk) => {
+    const selector = `[data-tachyon-deferred-target="${escapeSelectorValue(`${chunk.id}:${chunk.key}`)}"]`;
+    const target = root.querySelector(selector);
+    if (!target) {
+        return false;
+    }
+    target.textContent = typeof chunk.value === "string" ? chunk.value : JSON.stringify(chunk.value);
+    return true;
+};
+export const readDeferredDataScript = (root, id) => {
+    const script = Array.from(root.querySelectorAll(`script[type="application/json"][data-tachyon-deferred]`)).find((candidate) => candidate.getAttribute("data-tachyon-deferred") === id);
+    if (!script) {
+        return undefined;
+    }
+    return JSON.parse(script.textContent ?? "null");
+};

package/dist/runtime/text.d.ts

@@ -0,0 +1,2 @@
+export declare const textAt: (root: Node, path: readonly number[]) => Text;
+export declare const setText: (text: Text, value: unknown) => void;

package/dist/runtime/text.js

@@ -0,0 +1,10 @@
+export const textAt = (root, path) => {
+    let current = root;
+    for (const index of path) {
+        current = current.childNodes[index];
+    }
+    return current;
+};
+export const setText = (text, value) => {
+    text.nodeValue = value == null ? "" : String(value);
+};

package/dist/runtime/virtual-list.d.ts

@@ -0,0 +1,15 @@
+export type VirtualizedListOptions<T> = {
+    scroller: HTMLElement;
+    items: readonly T[];
+    itemHeight: number;
+    renderItem: (item: T, index: number) => Element;
+    getKey?: (item: T, index: number) => PropertyKey;
+    viewportHeight?: number | (() => number);
+    overscan?: number;
+};
+export type VirtualizedList<T> = {
+    update: (items: readonly T[]) => void;
+    scrollToIndex: (index: number) => void;
+    destroy: () => void;
+};
+export declare const createVirtualizedList: <T>(options: VirtualizedListOptions<T>) => VirtualizedList<T>;

package/dist/runtime/virtual-list.js

@@ -0,0 +1,89 @@
+const viewportHeightFor = (options) => {
+    if (typeof options.viewportHeight === "function") {
+        return options.viewportHeight();
+    }
+    return options.viewportHeight ?? options.scroller.clientHeight;
+};
+const clamp = (value, min, max) => Math.max(min, Math.min(max, value));
+export const createVirtualizedList = (options) => {
+    const overscan = options.overscan ?? 3;
+    let items = [...options.items];
+    let rendered = new Map();
+    let lastRangeKey = "";
+    let animationFrame;
+    const spacer = document.createElement("div");
+    const windowEl = document.createElement("div");
+    spacer.style.position = "relative";
+    windowEl.style.position = "absolute";
+    windowEl.style.insetInline = "0";
+    windowEl.style.insetBlockStart = "0";
+    options.scroller.replaceChildren(spacer);
+    const renderWindow = (force = false) => {
+        const viewportHeight = viewportHeightFor(options);
+        const visibleCount = Math.ceil(viewportHeight / options.itemHeight);
+        const start = clamp(Math.floor(options.scroller.scrollTop / options.itemHeight) - overscan, 0, items.length);
+        const end = clamp(start + visibleCount + overscan * 2, start, items.length);
+        const rangeKey = `${start}:${end}:${items.length}`;
+        if (!force && rangeKey === lastRangeKey) {
+            return;
+        }
+        lastRangeKey = rangeKey;
+        spacer.style.height = `${items.length * options.itemHeight}px`;
+        windowEl.style.transform = `translateY(${start * options.itemHeight}px)`;
+        const nextRendered = new Map();
+        const nextElements = [];
+        for (let index = start; index < end; index++) {
+            const item = items[index];
+            const key = options.getKey?.(item, index) ?? index;
+            const element = rendered.get(key) ?? options.renderItem(item, index);
+            element.setAttribute("data-tachyon-virtual-item", String(key));
+            element.setAttribute("aria-posinset", String(index + 1));
+            element.setAttribute("aria-setsize", String(items.length));
+            nextRendered.set(key, element);
+            nextElements.push(element);
+        }
+        rendered = nextRendered;
+        windowEl.replaceChildren(...nextElements);
+        if (!windowEl.parentNode) {
+            spacer.appendChild(windowEl);
+        }
+    };
+    const scheduleRenderWindow = () => {
+        if (animationFrame !== undefined) {
+            return;
+        }
+        if (typeof requestAnimationFrame !== "function") {
+            renderWindow();
+            return;
+        }
+        animationFrame = requestAnimationFrame(() => {
+            animationFrame = undefined;
+            renderWindow();
+        });
+    };
+    const onScroll = () => scheduleRenderWindow();
+    options.scroller.addEventListener("scroll", onScroll, { passive: true });
+    const resizeObserver = typeof ResizeObserver === "undefined" ? undefined : new ResizeObserver(() => renderWindow());
+    resizeObserver?.observe(options.scroller);
+    renderWindow();
+    return {
+        update: (nextItems) => {
+            items = [...nextItems];
+            rendered = new Map();
+            lastRangeKey = "";
+            renderWindow(true);
+        },
+        scrollToIndex: (index) => {
+            options.scroller.scrollTop = clamp(index, 0, Math.max(0, items.length - 1)) * options.itemHeight;
+            renderWindow(true);
+        },
+        destroy: () => {
+            if (animationFrame !== undefined && typeof cancelAnimationFrame === "function") {
+                cancelAnimationFrame(animationFrame);
+            }
+            options.scroller.removeEventListener("scroll", onScroll);
+            resizeObserver?.disconnect();
+            options.scroller.replaceChildren();
+        },
+    };
+};

package/dist/security.d.ts

@@ -0,0 +1,27 @@
+import { type TrustedHtml } from "./router.js";
+export type CsrfOptions = {
+    token: string;
+    headerName?: string;
+    fieldName?: string;
+};
+export type SanitizeHtmlOptions = {
+    allowedTags?: readonly string[];
+    allowedAttributes?: readonly string[];
+    allowedUrlOrigins?: readonly string[];
+    adapter?: HtmlSanitizer;
+};
+export type HtmlSanitizer = (markup: string) => TrustedHtml;
+/**
+ * Best-effort allowlist sanitizer for constrained backend HTML.
+ *
+ * This fallback is intentionally small and regex-based; it is not a browser-grade sanitizer for arbitrary
+ * attacker-controlled HTML. Pass a vetted adapter such as DOMPurify through `options.adapter` for user-generated,
+ * CMS, imported, or otherwise untrusted markup.
+ */
+export declare const sanitizeHtml: (markup: string, options?: SanitizeHtmlOptions) => TrustedHtml;
+export declare const createHtmlSanitizer: (adapter: {
+    sanitize: (markup: string) => string | TrustedHtml;
+}) => HtmlSanitizer;
+export declare const createCsrfToken: (seed?: string) => string;
+export declare const csrfInput: (token: string, fieldName?: string) => TrustedHtml;
+export declare const verifyCsrfRequest: (request: Request, options: CsrfOptions) => Promise<boolean>;

package/dist/security.js

@@ -0,0 +1,173 @@
+import { unsafeHtml } from "./router.js";
+import { timingSafeEqual } from "./constant-time.js";
+const defaultAllowedTags = [
+    "a",
+    "article",
+    "aside",
+    "b",
+    "blockquote",
+    "br",
+    "button",
+    "code",
+    "div",
+    "em",
+    "footer",
+    "form",
+    "h1",
+    "h2",
+    "h3",
+    "h4",
+    "h5",
+    "h6",
+    "header",
+    "i",
+    "img",
+    "input",
+    "label",
+    "li",
+    "main",
+    "nav",
+    "ol",
+    "option",
+    "p",
+    "pre",
+    "section",
+    "select",
+    "small",
+    "span",
+    "strong",
+    "textarea",
+    "ul",
+];
+const defaultAllowedAttributes = [
+    "action",
+    "alt",
+    "aria-label",
+    "aria-labelledby",
+    "checked",
+    "class",
+    "data-prefetch",
+    "disabled",
+    "for",
+    "href",
+    "id",
+    "method",
+    "name",
+    "placeholder",
+    "role",
+    "src",
+    "type",
+    "value",
+];
+const escapeAttribute = (value) => value.replaceAll("&", "&amp;").replaceAll(`"`, "&quot;").replaceAll("<", "&lt;");
+const escapeText = (value) => value
+    .replaceAll("&", "&amp;")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;")
+    .replaceAll(`"`, "&quot;")
+    .replaceAll("'", "&#39;");
+const isSafeUrl = (value, allowedOrigins = []) => {
+    const controlCharacterPattern = /[\u0000-\u001F\u007F]/;
+    if (controlCharacterPattern.test(value)) {
+        return false;
+    }
+    const trimmed = value.trim().toLowerCase();
+    if (trimmed.startsWith("/") && !trimmed.startsWith("//")) {
+        try {
+            const decoded = decodeURIComponent(trimmed);
+            return !decoded.startsWith("//") && !decoded.includes("\\") && !controlCharacterPattern.test(decoded);
+        }
+        catch {
+            return false;
+        }
+    }
+    if (trimmed.startsWith("#") || trimmed.startsWith("mailto:")) {
+        return true;
+    }
+    try {
+        const url = new URL(value);
+        return (url.protocol === "https:" || url.protocol === "http:") && allowedOrigins.includes(url.origin);
+    }
+    catch {
+        return false;
+    }
+};
+const sanitizeAttributes = (raw, allowedAttributes, allowedUrlOrigins) => Array.from(raw.matchAll(/([:\w-]+)(?:\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s"'=<>`]+)))?/g))
+    .flatMap((match) => {
+    const name = match[1]?.toLowerCase();
+    if (!name || name.startsWith("on") || !allowedAttributes.has(name)) {
+        return [];
+    }
+    const value = match[2] ?? match[3] ?? match[4] ?? "";
+    if ((name === "href" || name === "src" || name === "action") && value && !isSafeUrl(value, allowedUrlOrigins)) {
+        return [];
+    }
+    return value === "" ? [` ${name}`] : [` ${name}="${escapeAttribute(value)}"`];
+})
+    .join("");
+/**
+ * Best-effort allowlist sanitizer for constrained backend HTML.
+ *
+ * This fallback is intentionally small and regex-based; it is not a browser-grade sanitizer for arbitrary
+ * attacker-controlled HTML. Pass a vetted adapter such as DOMPurify through `options.adapter` for user-generated,
+ * CMS, imported, or otherwise untrusted markup.
+ */
+export const sanitizeHtml = (markup, options = {}) => {
+    if (options.adapter) {
+        return options.adapter(markup);
+    }
+    const allowedTags = new Set(options.allowedTags ?? defaultAllowedTags);
+    const allowedAttributes = new Set(options.allowedAttributes ?? defaultAllowedAttributes);
+    const allowedUrlOrigins = options.allowedUrlOrigins ?? [];
+    const withoutScripts = markup.replace(/<script\b[^>]*>[\s\S]*?<\/script>/gi, "");
+    const tagPattern = /<\/?([a-zA-Z][\w:-]*)([^>]*)>/g;
+    let sanitized = "";
+    let lastIndex = 0;
+    for (const match of withoutScripts.matchAll(tagPattern)) {
+        const index = match.index ?? 0;
+        sanitized += escapeText(withoutScripts.slice(lastIndex, index));
+        lastIndex = index + match[0].length;
+        const rawName = match[1] ?? "";
+        const rawAttributes = match[2] ?? "";
+        const name = rawName.toLowerCase();
+        if (!allowedTags.has(name)) {
+            continue;
+        }
+        if (match[0].startsWith("</")) {
+            sanitized += `</${name}>`;
+        }
+        else {
+            sanitized += `<${name}${sanitizeAttributes(rawAttributes, allowedAttributes, allowedUrlOrigins)}>`;
+        }
+    }
+    sanitized += escapeText(withoutScripts.slice(lastIndex));
+    return unsafeHtml(sanitized);
+};
+export const createHtmlSanitizer = (adapter) => (markup) => {
+    const result = adapter.sanitize(markup);
+    return typeof result === "string" ? unsafeHtml(result) : result;
+};
+export const createCsrfToken = (seed) => {
+    if (seed !== undefined) {
+        return seed;
+    }
+    const bytes = new Uint8Array(24);
+    crypto.getRandomValues(bytes);
+    return Array.from(bytes, (byte) => byte.toString(16).padStart(2, "0")).join("");
+};
+export const csrfInput = (token, fieldName = "_csrf") => unsafeHtml(`<input type="hidden" name="${escapeAttribute(fieldName)}" value="${escapeAttribute(token)}">`);
+export const verifyCsrfRequest = async (request, options) => {
+    const headerName = options.headerName ?? "x-csrf-token";
+    const fieldName = options.fieldName ?? "_csrf";
+    if (await timingSafeEqual(request.headers.get(headerName), options.token)) {
+        return true;
+    }
+    const contentType = request.headers.get("content-type") ?? "";
+    if (contentType.includes("application/x-www-form-urlencoded") ||
+        contentType.includes("multipart/form-data") ||
+        contentType.includes("text/plain")) {
+        const form = await request.clone().formData();
+        return await timingSafeEqual(form.get(fieldName), options.token);
+    }
+    return false;
+};