tachyon-dom 0.1.0

package/dist/runtime/router.js

@@ -0,0 +1,649 @@
+import { isClientHtml, rawHtml } from "./html.js";
+export { rawHtml } from "./html.js";
+const trimSlashes = (value) => value.replace(/^\/+|\/+$/g, "");
+const joinRoutePaths = (parent, child) => {
+    if (child === "*") {
+        return "*";
+    }
+    if (child.startsWith("/")) {
+        return child === "/" ? "/" : `/${trimSlashes(child)}`;
+    }
+    const joined = [trimSlashes(parent), trimSlashes(child)].filter(Boolean).join("/");
+    return joined ? `/${joined}` : "/";
+};
+const compileRoutePath = (path) => {
+    if (path === "*") {
+        return { regex: /^.*$/, names: [], wildcard: true };
+    }
+    const names = [];
+    const segments = trimSlashes(path).split("/").filter(Boolean);
+    if (segments.length === 0) {
+        return { regex: /^\/?$/, names, wildcard: false };
+    }
+    const source = segments
+        .map((segment) => {
+        if (segment.startsWith(":")) {
+            names.push(segment.slice(1));
+            return "([^/]+)";
+        }
+        if (segment === "*" || segment.startsWith("*")) {
+            names.push(segment.slice(1) || "wildcard");
+            return "(.*)";
+        }
+        return segment.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+    })
+        .join("/");
+    return { regex: new RegExp(`^/${source}/?$`), names, wildcard: false };
+};
+const routeSegmentScore = (segment) => {
+    if (segment === "*" || segment.startsWith("*")) {
+        return 0;
+    }
+    if (segment.startsWith(":")) {
+        return 1;
+    }
+    return 2;
+};
+const routeSpecificity = (path) => {
+    if (path === "*") {
+        return [-1, 0, 0];
+    }
+    const segments = trimSlashes(path).split("/").filter(Boolean);
+    const segmentScores = segments.map(routeSegmentScore);
+    return [
+        segmentScores.reduce((total, score) => total + score, 0),
+        segments.length,
+        segmentScores.filter((score) => score === 2).length,
+    ];
+};
+const compareCompiledClientRoutes = (left, right) => {
+    for (let index = 0; index < left.specificity.length; index += 1) {
+        const difference = (right.specificity[index] ?? 0) - (left.specificity[index] ?? 0);
+        if (difference !== 0) {
+            return difference;
+        }
+    }
+    return left.order - right.order;
+};
+const flattenClientRoutes = (routes, parentPath = "", parentBranch = [], orderOffset = { value: 0 }) => {
+    const entries = [];
+    for (const route of routes) {
+        const fullPath = joinRoutePaths(parentPath, route.path);
+        const compiled = compileRoutePath(fullPath);
+        const branch = [...parentBranch, route];
+        entries.push({
+            route,
+            branch,
+            fullPath,
+            order: orderOffset.value++,
+            names: compiled.names,
+            regex: compiled.regex,
+            specificity: routeSpecificity(fullPath),
+            wildcard: compiled.wildcard,
+        });
+        if (route.children) {
+            entries.push(...flattenClientRoutes(route.children, fullPath, branch, orderOffset));
+        }
+    }
+    return entries;
+};
+const compileClientRoutes = (routes) => flattenClientRoutes(routes).sort(compareCompiledClientRoutes);
+const matchClientRoute = (routes, pathname) => {
+    let fallback;
+    for (const routeEntry of routes) {
+        const match = routeEntry.regex.exec(pathname);
+        if (!match) {
+            continue;
+        }
+        const params = Object.fromEntries(routeEntry.names.map((name, index) => [name, decodeURIComponent(match[index + 1] ?? "")]));
+        const matched = { route: routeEntry.route, branch: routeEntry.branch, params };
+        if (routeEntry.wildcard) {
+            fallback = matched;
+            continue;
+        }
+        return matched;
+    }
+    return fallback;
+};
+const toUrl = (href, baseUrl) => new URL(href, baseUrl);
+const renderInto = (root, value) => {
+    root.replaceChildren();
+    if (isClientHtml(value)) {
+        root.innerHTML = value.toString();
+        return;
+    }
+    if (typeof value === "string") {
+        root.textContent = value;
+        return;
+    }
+    if (value instanceof DocumentFragment) {
+        root.appendChild(value);
+        return;
+    }
+    if (value instanceof Node) {
+        root.appendChild(value);
+        return;
+    }
+    root.append(...value);
+};
+const focusRouteContent = (root, selector) => {
+    const target = root.querySelector(selector);
+    if (target instanceof HTMLElement) {
+        target.focus({ preventScroll: true });
+    }
+};
+const managedHeadSelector = `[data-tachyon-head="route"]`;
+const maxScrollPositions = 50;
+const appendManagedHeadElement = (tagName, attributes) => {
+    const element = document.createElement(tagName);
+    element.setAttribute("data-tachyon-head", "route");
+    for (const [name, value] of Object.entries(attributes)) {
+        if (/^on/i.test(name)) {
+            continue;
+        }
+        element.setAttribute(name, value);
+    }
+    document.head.appendChild(element);
+};
+const applyHead = (descriptor) => {
+    document.head.querySelectorAll(managedHeadSelector).forEach((element) => element.remove());
+    if (!descriptor) {
+        return;
+    }
+    if (descriptor.title !== undefined) {
+        document.title = descriptor.title;
+    }
+    for (const meta of descriptor.metas ?? []) {
+        appendManagedHeadElement("meta", meta);
+    }
+    for (const link of descriptor.links ?? []) {
+        appendManagedHeadElement("link", link);
+    }
+    for (const script of descriptor.scripts ?? []) {
+        appendManagedHeadElement("script", script);
+    }
+};
+const routeTargetFor = (root, match, url, data) => {
+    const target = match.route.target;
+    if (!target) {
+        return root;
+    }
+    if (typeof target === "string") {
+        return root.querySelector(target) ?? root;
+    }
+    if (target instanceof Element) {
+        return target;
+    }
+    return target({ root, url, params: match.params, data }) ?? root;
+};
+const outletFor = (root) => root.querySelector("[data-tachyon-outlet], [data-tachyon-route-outlet], tachyon-outlet") ?? undefined;
+const isModifiedClick = (event) => event.defaultPrevented || event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;
+export const createClientRouter = (options) => {
+    const baseUrl = options.baseUrl ?? location.href;
+    const routes = compileClientRoutes(options.routes);
+    const scrollTo = options.scrollTo ??
+        ((x, y) => {
+            if (!navigator.userAgent.includes("jsdom")) {
+                window.scrollTo(x, y);
+            }
+        });
+    const focusSelector = options.focusSelector ?? "[autofocus],h1,[data-route-focus],main";
+    let controller;
+    let actionController;
+    let actionVersion = 0;
+    let currentNavigation = Promise.resolve();
+    const cache = new Map();
+    const layoutRoots = new WeakMap();
+    const prefetchControllers = new Map();
+    const eagerlyNavigated = new WeakSet();
+    const scrollPositions = new Map();
+    let nextScrollKey = 1;
+    const cacheKey = (url) => `${url.pathname}${url.search}`;
+    for (const entry of options.initialCache ?? []) {
+        cache.set(cacheKey(toUrl(entry.href, baseUrl)), entry.data);
+    }
+    const renderNotFound = (url) => {
+        renderInto(options.root, options.notFound ? options.notFound({ url }) : rawHtml(`<h1>Not Found</h1>`));
+    };
+    const renderError = (url, error) => {
+        renderInto(options.root, options.error ? options.error({ url, error }) : rawHtml(`<h1>Navigation Error</h1>`));
+    };
+    const loadData = async (url, match, signal) => {
+        const key = cacheKey(url);
+        if (options.cache && cache.has(key)) {
+            return cache.get(key);
+        }
+        const data = match.route.load ? await match.route.load({ url, params: match.params, signal }) : undefined;
+        if (options.cache && !signal.aborted) {
+            cache.set(key, data);
+        }
+        return data;
+    };
+    const updateA11y = (url, data) => {
+        if (options.title) {
+            document.title = options.title({ url, data });
+        }
+        if (options.liveRegion) {
+            options.liveRegion.textContent = `Navigated to ${url.pathname}`;
+        }
+    };
+    const updateHead = async (url, match, data, signal) => {
+        if (!match.route.head) {
+            applyHead(undefined);
+            return;
+        }
+        const descriptor = await match.route.head({ url, params: match.params, data, signal });
+        if (!signal.aborted) {
+            applyHead(descriptor);
+        }
+    };
+    const shouldUseViewTransition = (url, match, data) => {
+        const setting = options.viewTransition;
+        if (!setting) {
+            return false;
+        }
+        if (typeof document.startViewTransition !== "function") {
+            return false;
+        }
+        if (typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches) {
+            return false;
+        }
+        return typeof setting === "function" ? setting({ url, params: match.params, data }) : true;
+    };
+    const commitNavigation = async (url, match, data, rendered, navigateOptions, signal) => {
+        const target = routeTargetFor(options.root, match, url, data);
+        let committedTarget = target;
+        const renderNestedBranch = async () => {
+            let parentTarget = target;
+            for (const layoutRoute of match.branch.slice(0, -1)) {
+                let layoutRoot = layoutRoots.get(layoutRoute);
+                if (!layoutRoot?.isConnected) {
+                    const layoutValue = await layoutRoute.render({
+                        url,
+                        params: match.params,
+                        data,
+                        signal,
+                    });
+                    renderInto(parentTarget, layoutValue);
+                    layoutRoot = parentTarget.firstElementChild ?? parentTarget;
+                    layoutRoots.set(layoutRoute, layoutRoot);
+                }
+                const outlet = outletFor(layoutRoot);
+                if (!outlet) {
+                    throw new Error(`Nested client route ${layoutRoute.id ?? layoutRoute.path} must render a route outlet.`);
+                }
+                parentTarget = outlet;
+            }
+            renderInto(parentTarget, rendered);
+            committedTarget = parentTarget;
+        };
+        const commit = async () => {
+            if (match.branch.length > 1) {
+                await renderNestedBranch();
+            }
+            else {
+                renderInto(target, rendered);
+            }
+            await updateHead(url, match, data, signal);
+            if (signal.aborted) {
+                return;
+            }
+            restoreOrScroll(url, navigateOptions);
+            focusRouteContent(committedTarget, focusSelector);
+            updateA11y(url, data);
+        };
+        if (!shouldUseViewTransition(url, match, data)) {
+            await commit();
+            return;
+        }
+        const transition = document.startViewTransition?.(commit);
+        await (transition?.updateCallbackDone ?? transition?.finished ?? Promise.resolve());
+    };
+    const scrollKeyFor = (state) => {
+        if (!state || typeof state !== "object") {
+            return undefined;
+        }
+        const value = state.__tachyonScrollKey;
+        return typeof value === "number" ? value : undefined;
+    };
+    const ensureScrollState = () => {
+        const existing = scrollKeyFor(history.state);
+        if (existing !== undefined) {
+            return existing;
+        }
+        const key = nextScrollKey++;
+        history.replaceState({ ...(history.state && typeof history.state === "object" ? history.state : {}), __tachyonScrollKey: key }, "", location.href);
+        return key;
+    };
+    const currentScrollPosition = () => ({
+        x: window.scrollX ?? window.pageXOffset ?? 0,
+        y: window.scrollY ?? window.pageYOffset ?? 0,
+    });
+    const rememberScrollPosition = (key, position) => {
+        if (scrollPositions.has(key)) {
+            scrollPositions.delete(key);
+        }
+        scrollPositions.set(key, position);
+        while (scrollPositions.size > maxScrollPositions) {
+            const oldestKey = scrollPositions.keys().next().value;
+            if (oldestKey === undefined) {
+                return;
+            }
+            scrollPositions.delete(oldestKey);
+        }
+    };
+    const saveCurrentScrollPosition = () => {
+        rememberScrollPosition(ensureScrollState(), currentScrollPosition());
+    };
+    const writeHistory = (url, navigateOptions) => {
+        const state = {
+            ...(history.state && typeof history.state === "object" ? history.state : {}),
+            __tachyonScrollKey: navigateOptions.restoreScroll
+                ? (scrollKeyFor(history.state) ?? nextScrollKey++)
+                : nextScrollKey++,
+        };
+        if (navigateOptions.restoreScroll) {
+            return;
+        }
+        if (navigateOptions.replace) {
+            history.replaceState(state, "", url);
+        }
+        else if (location.pathname !== url.pathname || location.search !== url.search || location.hash !== url.hash) {
+            history.pushState(state, "", url);
+        }
+    };
+    const scrollHashIntoView = (url) => {
+        if (!url.hash) {
+            return false;
+        }
+        const id = decodeURIComponent(url.hash.slice(1));
+        const namedTarget = typeof CSS !== "undefined" && typeof CSS.escape === "function"
+            ? document.querySelector(`[name="${CSS.escape(id)}"]`)
+            : null;
+        const target = document.getElementById(id) ?? namedTarget;
+        if (target instanceof HTMLElement || target instanceof SVGElement) {
+            target.scrollIntoView();
+            return true;
+        }
+        return false;
+    };
+    const restoreOrScroll = (url, navigateOptions) => {
+        if (navigateOptions.restoreScroll) {
+            const key = scrollKeyFor(history.state);
+            const position = key === undefined ? undefined : scrollPositions.get(key);
+            if (key !== undefined && position) {
+                rememberScrollPosition(key, position);
+            }
+            scrollTo(position?.x ?? 0, position?.y ?? 0);
+            return;
+        }
+        if (!scrollHashIntoView(url)) {
+            scrollTo(0, 0);
+        }
+    };
+    const prefetch = async (href) => {
+        const url = toUrl(href, location.href || baseUrl);
+        const match = matchClientRoute(routes, url.pathname);
+        if (!match) {
+            return;
+        }
+        const key = cacheKey(url);
+        prefetchControllers.get(key)?.abort();
+        const prefetchController = new AbortController();
+        prefetchControllers.set(key, prefetchController);
+        try {
+            await loadData(url, match, prefetchController.signal);
+        }
+        finally {
+            if (prefetchControllers.get(key) === prefetchController) {
+                prefetchControllers.delete(key);
+            }
+        }
+    };
+    const revalidate = async (hrefs) => {
+        if (!hrefs) {
+            cache.clear();
+            prefetchControllers.forEach((controller) => controller.abort());
+            prefetchControllers.clear();
+        }
+        else if (typeof hrefs === "string") {
+            const key = cacheKey(toUrl(hrefs, location.href || baseUrl));
+            cache.delete(key);
+            prefetchControllers.get(key)?.abort();
+            prefetchControllers.delete(key);
+        }
+        else {
+            for (const href of hrefs) {
+                const key = cacheKey(toUrl(href, location.href || baseUrl));
+                cache.delete(key);
+                prefetchControllers.get(key)?.abort();
+                prefetchControllers.delete(key);
+            }
+        }
+        await navigate(location.pathname + location.search + location.hash, { replace: true });
+    };
+    const hrefsForAction = (url, match, response) => {
+        const policy = match.route.revalidateOnAction ?? "self";
+        if (policy === "all") {
+            return undefined;
+        }
+        if (policy === "self") {
+            return url.pathname + url.search;
+        }
+        if (typeof policy === "function") {
+            return policy({ url, response });
+        }
+        return policy;
+    };
+    const submit = async (href, init = {}) => {
+        const url = toUrl(href, location.href || baseUrl);
+        const match = matchClientRoute(routes, url.pathname);
+        if (!match?.route.action) {
+            throw new Error(`No action route matched ${url.pathname}.`);
+        }
+        actionController?.abort();
+        const nextActionController = new AbortController();
+        actionController = nextActionController;
+        const version = ++actionVersion;
+        const callerSignal = init.signal;
+        const abortFromCaller = () => nextActionController.abort(callerSignal?.reason);
+        if (callerSignal?.aborted) {
+            abortFromCaller();
+        }
+        else {
+            callerSignal?.addEventListener("abort", abortFromCaller, { once: true });
+        }
+        const request = new Request(url, { method: init.method ?? "POST", ...init, signal: nextActionController.signal });
+        try {
+            const response = await match.route.action({
+                url,
+                params: match.params,
+                signal: nextActionController.signal,
+                request,
+            });
+            if (nextActionController.signal.aborted || version !== actionVersion) {
+                return response;
+            }
+            const locationHeader = response.headers.get("location");
+            if (response.status >= 300 && response.status < 400 && locationHeader) {
+                await navigate(locationHeader, { replace: true });
+                return response;
+            }
+            await revalidate(hrefsForAction(url, match, response));
+            return response;
+        }
+        finally {
+            callerSignal?.removeEventListener("abort", abortFromCaller);
+            if (actionController === nextActionController) {
+                actionController = undefined;
+            }
+        }
+    };
+    const navigate = async (href, navigateOptions = {}) => {
+        controller?.abort();
+        actionController?.abort();
+        const nextController = new AbortController();
+        controller = nextController;
+        const url = toUrl(href, location.href || baseUrl);
+        if (!navigateOptions.restoreScroll) {
+            saveCurrentScrollPosition();
+        }
+        if (location.pathname === url.pathname && location.search === url.search && location.hash !== url.hash) {
+            writeHistory(url, navigateOptions);
+            restoreOrScroll(url, navigateOptions);
+            return;
+        }
+        const match = matchClientRoute(routes, url.pathname);
+        const task = (async () => {
+            if (!match) {
+                writeHistory(url, navigateOptions);
+                renderNotFound(url);
+                restoreOrScroll(url, navigateOptions);
+                focusRouteContent(options.root, focusSelector);
+                return;
+            }
+            let data;
+            try {
+                data = await loadData(url, match, nextController.signal);
+                if (nextController.signal.aborted) {
+                    return;
+                }
+                const rendered = await match.route.render({ url, params: match.params, data, signal: nextController.signal });
+                if (nextController.signal.aborted) {
+                    return;
+                }
+                writeHistory(url, navigateOptions);
+                await commitNavigation(url, match, data, rendered, navigateOptions, nextController.signal);
+            }
+            catch (error) {
+                if (!nextController.signal.aborted) {
+                    renderError(url, error);
+                }
+            }
+        })();
+        currentNavigation = task;
+        await task;
+    };
+    const routeLinkForEvent = (event) => {
+        if (!(event instanceof MouseEvent) || isModifiedClick(event)) {
+            return undefined;
+        }
+        const target = event.target instanceof Element ? event.target : undefined;
+        const link = target?.closest("a[href]");
+        if (!(link instanceof HTMLAnchorElement) || !options.root.contains(link)) {
+            return undefined;
+        }
+        if (link.target || link.hasAttribute("download")) {
+            return undefined;
+        }
+        const url = new URL(link.href);
+        if (url.origin !== location.origin || !matchClientRoute(routes, url.pathname)) {
+            return undefined;
+        }
+        return { link, url };
+    };
+    const onPointerDown = (event) => {
+        if (!options.eager) {
+            return;
+        }
+        const routeLink = routeLinkForEvent(event);
+        if (!routeLink || !cache.has(cacheKey(routeLink.url))) {
+            return;
+        }
+        event.preventDefault();
+        if (eagerlyNavigated.has(routeLink.link)) {
+            return;
+        }
+        eagerlyNavigated.add(routeLink.link);
+        void navigate(routeLink.url.pathname + routeLink.url.search + routeLink.url.hash);
+    };
+    const onClick = (event) => {
+        const routeLink = routeLinkForEvent(event);
+        if (!routeLink) {
+            return;
+        }
+        event.preventDefault();
+        if (eagerlyNavigated.has(routeLink.link)) {
+            eagerlyNavigated.delete(routeLink.link);
+            return;
+        }
+        void navigate(routeLink.url.pathname + routeLink.url.search + routeLink.url.hash);
+    };
+    const onPointerOver = (event) => {
+        const target = event.target instanceof Element ? event.target : undefined;
+        const link = target?.closest("a[href][data-prefetch]");
+        if (!(link instanceof HTMLAnchorElement) || !options.root.contains(link)) {
+            return;
+        }
+        const url = new URL(link.href);
+        if (url.origin === location.origin) {
+            void prefetch(url.pathname + url.search + url.hash);
+        }
+    };
+    const onPopState = () => {
+        void navigate(location.pathname + location.search + location.hash, { replace: true, restoreScroll: true });
+    };
+    return {
+        start: async () => {
+            options.root.addEventListener("click", onClick);
+            options.root.addEventListener("pointerdown", onPointerDown);
+            options.root.addEventListener("mousedown", onPointerDown);
+            options.root.addEventListener("pointerover", onPointerOver);
+            addEventListener("popstate", onPopState);
+            await navigate(location.pathname + location.search + location.hash, { replace: true });
+        },
+        navigate,
+        submit,
+        prefetch,
+        revalidate,
+        invalidate: (href) => {
+            if (!href) {
+                cache.clear();
+                prefetchControllers.forEach((prefetchController) => prefetchController.abort());
+                prefetchControllers.clear();
+                return;
+            }
+            const key = cacheKey(toUrl(href, location.href || baseUrl));
+            cache.delete(key);
+            prefetchControllers.get(key)?.abort();
+            prefetchControllers.delete(key);
+        },
+        settled: () => currentNavigation,
+        dispose: () => {
+            controller?.abort();
+            actionController?.abort();
+            prefetchControllers.forEach((prefetchController) => prefetchController.abort());
+            prefetchControllers.clear();
+            options.root.removeEventListener("click", onClick);
+            options.root.removeEventListener("pointerdown", onPointerDown);
+            options.root.removeEventListener("mousedown", onPointerDown);
+            options.root.removeEventListener("pointerover", onPointerOver);
+            removeEventListener("popstate", onPopState);
+        },
+    };
+};
+export const createRouteHotReloader = (options) => ({
+    accept: async (update = {}) => {
+        const href = update.href ?? options.currentPath?.() ?? `${location.pathname}${location.search}${location.hash}`;
+        options.invalidate(href);
+        await options.onUpdate?.({ ...update, href });
+        await options.navigate(href, { replace: true });
+    },
+});
+export const connectRouteHotReloader = (hot, reloader) => {
+    if (!hot) {
+        return () => undefined;
+    }
+    let disposed = false;
+    hot.on("tachyon-dom:routes-update", (payload) => {
+        if (!disposed) {
+            void reloader.accept(payload);
+        }
+    });
+    hot.dispose?.(() => {
+        disposed = true;
+    });
+    return () => {
+        disposed = true;
+    };
+};

package/dist/runtime/signal.d.ts

@@ -0,0 +1,30 @@
+declare const signalBrand: unique symbol;
+export type Accessor<T> = (() => T) & {
+    readonly [signalBrand]: true;
+};
+export type Signal<T> = Accessor<T> & {
+    set: (value: T) => void;
+    update: (updater: (value: T) => T) => void;
+};
+export declare const isSignal: (value: unknown) => value is Accessor<unknown>;
+export declare function read<T>(value: Accessor<T>): T;
+export declare function read<T>(value: T): T;
+export declare const untrack: <T>(fn: () => T) => T;
+export declare const batch: <T>(fn: () => T) => T;
+export declare const createSignal: <T>(initial: T) => Signal<T>;
+export declare const createMemo: <T>(fn: () => T) => Accessor<T>;
+export declare const createStore: <T extends Record<PropertyKey, unknown>>(initial: T) => T;
+export declare const effect: (fn: () => void) => (() => void);
+export declare const catchError: (fn: () => void, onError: (error: unknown) => void) => (() => void);
+export type Resource<T> = {
+    data: Accessor<T | undefined>;
+    error: Accessor<unknown | undefined>;
+    loading: Accessor<boolean>;
+    refetch: () => Promise<T | undefined>;
+    dispose: () => void;
+};
+export type ResourceFetcherContext = {
+    signal: AbortSignal;
+};
+export declare const createResource: <Source, T>(source: Source | Accessor<Source>, fetcher: (source: Source, context: ResourceFetcherContext) => Promise<T> | T) => Resource<T>;
+export {};