@webstir-io/webstir 0.1.1 → 0.1.2

package/assets/features/client_nav/client_nav.ts

@@ -1,8 +1,25 @@
+import {
+    buildEnhancedFormRequest,
+    normalizeFormEnctype,
+    normalizeFormMethod,
+    resolveEnhancedFormResponse,
+    resolveFragmentResponseMetadata,
+    resolveFragmentInsertionBehavior
+} from './form-enhancement.js';
+import {
+    cssEscape,
+    executeScripts,
+    focusAutofocus,
+    resolveDocumentNavigationResponse,
+    syncHead
+} from './document-navigation.js';
+
 export {};
 
 /**
- * Minimal PJAX-style navigation: swaps the <main> content, updates title/URL,
- * and restores scroll/focus.
+ * Minimal document navigation enhancement: swaps the <main> content, updates
+ * title/URL, restores scroll/focus, and can consume fragment responses from
+ * enhanced POST forms.
  *
  * Opt out per-link with:
  * - data-no-client-nav
@@ -23,11 +40,7 @@ export function enableClientNav(): void {
             return;
         }
 
-        const setting = link.getAttribute('data-client-nav');
-        const optOut = link.hasAttribute('data-no-client-nav')
-            || setting === 'off'
-            || setting === 'false';
-        if (optOut) {
+        if (hasClientNavOptOut(link)) {
             return;
         }
 
@@ -49,6 +62,28 @@ export function enableClientNav(): void {
         await renderUrl(link.href, { pushHistory: true });
     });
 
+    document.addEventListener('submit', async (event) => {
+        const target = event.target;
+        if (!(target instanceof HTMLFormElement)) {
+            return;
+        }
+
+        if (target.hasAttribute(BYPASS_ATTR)) {
+            target.removeAttribute(BYPASS_ATTR);
+            return;
+        }
+
+        const submitEvent = event as SubmitEvent;
+        const submitter = getSubmitter(submitEvent);
+        const submission = createEnhancedFormSubmission(target, submitter);
+        if (!submission) {
+            return;
+        }
+
+        event.preventDefault();
+        await submitForm(target, submitter, submission);
+    });
+
     window.addEventListener('popstate', async () => {
         await renderUrl(window.location.href, { pushHistory: false });
     });
@@ -58,7 +93,14 @@ let activeRequestId = 0;
 let activeController: AbortController | null = null;
 const DYNAMIC_ATTR = 'data-webstir-dynamic';
 const DYNAMIC_VALUE = 'client-nav';
+const BYPASS_ATTR = 'data-webstir-client-nav-bypass';
 const BASE_PATH = resolveBasePath();
+const DOM_RUNTIME = {
+    dynamicAttr: DYNAMIC_ATTR,
+    dynamicValue: DYNAMIC_VALUE,
+    withBasePath,
+    stripBasePath
+} as const;
 
 function resolveBasePath(): string {
     const raw = document.documentElement?.getAttribute('data-webstir-base') ?? '';
@@ -103,15 +145,7 @@ function stripBasePath(value: string): string {
 }
 
 async function renderUrl(url: string, { pushHistory }: { pushHistory: boolean }): Promise<void> {
-    activeRequestId += 1;
-    const requestId = activeRequestId;
-
-    if (activeController) {
-        activeController.abort();
-    }
-
-    const controller = new AbortController();
-    activeController = controller;
+    const { controller, requestId } = beginRequest();
 
     let response: Response;
     try {
@@ -128,20 +162,111 @@ async function renderUrl(url: string, { pushHistory }: { pushHistory: boolean })
         return;
     }
 
-    if (!response.ok) {
+    const resolution = resolveDocumentNavigationResponse({
+        ok: response.ok,
+        contentType: response.headers.get('content-type')
+    });
+    if (resolution.kind === 'navigate') {
         window.location.href = url;
         return;
     }
 
+    await renderDocumentResponse(response, requestId, {
+        pushHistory,
+        url
+    });
+}
+
+async function submitForm(
+    form: HTMLFormElement,
+    submitter: HTMLButtonElement | HTMLInputElement | null,
+    submission: { readonly url: string; readonly init: RequestInit }
+): Promise<void> {
+    const { controller, requestId } = beginRequest();
+
+    let response: Response;
+    try {
+        response = await fetch(submission.url, {
+            ...submission.init,
+            signal: controller.signal
+        });
+    } catch {
+        if (controller.signal.aborted) {
+            return;
+        }
+
+        submitFormNatively(form, submitter);
+        return;
+    }
+
+    if (requestId !== activeRequestId) {
+        return;
+    }
+
+    const metadata = resolveFragmentResponseMetadata(response.headers);
+    const fragmentTarget = metadata.kind === 'fragment'
+        ? resolveFragmentTarget(metadata.fragment.target, metadata.fragment.selector)
+        : null;
+    const resolution = resolveEnhancedFormResponse({
+        metadata,
+        hasFragmentTarget: fragmentTarget !== null,
+        contentType: response.headers.get('content-type'),
+        redirected: response.redirected,
+        responseUrl: response.url,
+        requestUrl: submission.url
+    });
+
+    if (resolution.kind === 'fragment') {
+        await handleFragmentResponse(response, requestId, resolution.fragment, fragmentTarget);
+        return;
+    }
+
+    if (resolution.kind === 'document') {
+        await renderDocumentResponse(response, requestId, {
+            pushHistory: true,
+            url: response.url || submission.url
+        });
+        return;
+    }
+
+    window.location.href = resolution.location;
+}
+
+function beginRequest(): { readonly controller: AbortController; readonly requestId: number } {
+    activeRequestId += 1;
+    const requestId = activeRequestId;
+
+    if (activeController) {
+        activeController.abort();
+    }
+
+    const controller = new AbortController();
+    activeController = controller;
+
+    return { controller, requestId };
+}
+
+async function renderDocumentResponse(
+    response: Response,
+    requestId: number,
+    options: { readonly pushHistory: boolean; readonly url: string }
+): Promise<void> {
     const html = await response.text();
     if (requestId !== activeRequestId) {
         return;
     }
 
+    await renderDocumentHtml(html, options);
+}
+
+async function renderDocumentHtml(
+    html: string,
+    options: { readonly pushHistory: boolean; readonly url: string }
+): Promise<void> {
     const parser = new DOMParser();
     const doc = parser.parseFromString(html, 'text/html');
 
-    await syncHead(doc, url);
+    await syncHead(doc, options.url, DOM_RUNTIME);
 
     const newMain = doc.querySelector('main');
     const currentMain = document.querySelector('main');
@@ -154,316 +279,296 @@ async function renderUrl(url: string, { pushHistory }: { pushHistory: boolean })
         document.title = newTitle.textContent;
     }
 
-    if (pushHistory) {
-        window.history.pushState({}, '', url);
+    if (options.pushHistory) {
+        window.history.pushState({}, '', options.url);
     }
     window.scrollTo({ top: 0, behavior: 'smooth' });
-    const focusTarget = document.querySelector('[autofocus]');
-    if (focusTarget instanceof HTMLElement) {
-        focusTarget.focus();
-    }
+    focusAutofocus(document);
 
-    executeScripts(document.querySelector('main'));
-    window.dispatchEvent(new CustomEvent('webstir:client-nav', { detail: { url } }));
+    executeScripts(document.querySelector('main'), DOM_RUNTIME);
+    window.dispatchEvent(new CustomEvent('webstir:client-nav', { detail: { url: options.url } }));
 }
 
-enableClientNav();
-
-async function syncHead(doc: Document, url: string): Promise<void> {
-    const head = document.head;
-    const newHead = doc.head;
-    if (!head || !newHead) {
-        return;
+function getSubmitter(event: SubmitEvent): HTMLButtonElement | HTMLInputElement | null {
+    const candidate = event.submitter;
+    if (candidate instanceof HTMLButtonElement || candidate instanceof HTMLInputElement) {
+        return candidate;
     }
+    return null;
+}
 
-    const preservedClientNav = head.querySelector('script[data-webstir="client-nav"]');
-    const preservedAppCss = Array.from(head.querySelectorAll<HTMLLinkElement>('link[rel="stylesheet"]'))
-        .find((link) => isAppStylesheetHref(link.getAttribute('href'))) ?? null;
-
-    for (const element of Array.from(head.querySelectorAll(`script[${DYNAMIC_ATTR}="${DYNAMIC_VALUE}"]`))) {
-        element.remove();
+function createEnhancedFormSubmission(
+    form: HTMLFormElement,
+    submitter: HTMLButtonElement | HTMLInputElement | null
+): { readonly url: string; readonly init: RequestInit } | null {
+    if (hasClientNavOptOut(form) || hasClientNavOptOut(submitter)) {
+        return null;
     }
 
-    for (const script of Array.from(head.querySelectorAll('script[src]'))) {
-        const src = script.getAttribute('src') ?? '';
-        const normalizedSrc = stripBasePath(src);
-        if (script === preservedClientNav) {
-            continue;
-        }
-        if (normalizedSrc === '/hmr.js' || normalizedSrc === '/refresh.js') {
-            continue;
-        }
-        if (normalizedSrc.startsWith('/pages/')) {
-            script.remove();
-        }
+    const target = resolveFormTarget(form, submitter);
+    if (target && target !== '_self') {
+        return null;
     }
 
-    const desiredStyles = new Map<string, string>();
-    for (const link of Array.from(newHead.querySelectorAll<HTMLLinkElement>('link[rel="stylesheet"]'))) {
-        const href = link.getAttribute('href');
-        if (!href) {
-            continue;
-        }
-        const resolved = resolveUrl(href, url);
-        if (!resolved) {
-            continue;
-        }
-        const key = stripBasePath(stripQueryAndHash(resolved));
-        const finalHref = key === '/app/app.css' && preservedAppCss
-            ? (preservedAppCss.getAttribute('href') ?? resolved)
-            : withBasePath(resolved);
-        desiredStyles.set(key, finalHref);
+    const method = resolveFormMethod(form, submitter);
+    if (normalizeFormMethod(method) !== 'POST') {
+        return null;
     }
 
-    if (preservedAppCss) {
-        const appHref = preservedAppCss.getAttribute('href') ?? withBasePath('/app/app.css');
-        desiredStyles.set('/app/app.css', appHref);
+    const enctype = resolveFormEnctype(form, submitter);
+    const action = resolveFormAction(form, submitter);
+    if (new URL(action).origin !== window.location.origin) {
+        return null;
     }
+    const formData = createFormData(form, submitter);
 
-    const existingStyles = new Map<string, HTMLLinkElement>();
-    const staleStyles: HTMLLinkElement[] = [];
-    for (const link of Array.from(head.querySelectorAll<HTMLLinkElement>('link[rel="stylesheet"]'))) {
-        const key = normalizeStylesheetKey(link.getAttribute('href'), window.location.href);
-        if (!key) {
-            link.remove();
-            continue;
-        }
-        if (desiredStyles.has(key)) {
-            if (!existingStyles.has(key)) {
-                existingStyles.set(key, link);
-            }
-            continue;
-        }
-        staleStyles.push(link);
-    }
+    return buildEnhancedFormRequest({
+        action,
+        method,
+        enctype,
+        formData
+    });
+}
 
-    const pendingStyles: HTMLLinkElement[] = [];
-    for (const [key, href] of desiredStyles.entries()) {
-        if (existingStyles.has(key)) {
-            continue;
-        }
-        const next = document.createElement('link');
-        next.rel = 'stylesheet';
-        next.href = href;
-        head.appendChild(next);
-        existingStyles.set(key, next);
-        pendingStyles.push(next);
-    }
-
-    const stylesReady = pendingStyles.length > 0
-        ? waitForStylesheets(pendingStyles)
-        : Promise.resolve();
-    if (staleStyles.length > 0) {
-        void stylesReady.then(() => {
-            requestAnimationFrame(() => {
-                for (const link of staleStyles) {
-                    link.remove();
-                }
-            });
-        });
+function hasClientNavOptOut(element: Element | null): boolean {
+    if (!element) {
+        return false;
     }
 
-    syncCriticalStyles(head, newHead);
+    const setting = element.getAttribute('data-client-nav');
+    return element.hasAttribute('data-no-client-nav')
+        || setting === 'off'
+        || setting === 'false';
+}
 
-    for (const script of Array.from(newHead.querySelectorAll('script[src]'))) {
-        const src = script.getAttribute('src');
-        if (!src) {
-            continue;
-        }
-        if (src === '/clientNav.js' || src.endsWith('/clientNav.js')) {
-            continue;
-        }
-        if (src === '/hmr.js' || src === '/refresh.js') {
-            continue;
-        }
+function resolveFormAction(form: HTMLFormElement, submitter: HTMLButtonElement | HTMLInputElement | null): string {
+    const override = submitter?.getAttribute('formaction')?.trim();
+    const action = override || form.getAttribute('action')?.trim() || window.location.href;
+    return new URL(action, window.location.href).href;
+}
 
-        const resolved = resolveUrl(src, url);
-        if (!resolved) {
-            continue;
-        }
+function resolveFormMethod(form: HTMLFormElement, submitter: HTMLButtonElement | HTMLInputElement | null): string {
+    return submitter?.getAttribute('formmethod') || form.getAttribute('method') || form.method || 'GET';
+}
+
+function resolveFormEnctype(form: HTMLFormElement, submitter: HTMLButtonElement | HTMLInputElement | null): string {
+    const override = submitter?.getAttribute('formenctype');
+    return normalizeFormEnctype(override || form.getAttribute('enctype') || form.enctype);
+}
+
+function resolveFormTarget(form: HTMLFormElement, submitter: HTMLButtonElement | HTMLInputElement | null): string {
+    return submitter?.getAttribute('formtarget') || form.getAttribute('target') || form.target || '';
+}
 
-        const next = document.createElement('script');
-        const type = script.getAttribute('type');
-        if (type) {
-            next.type = type;
+function createFormData(
+    form: HTMLFormElement,
+    submitter: HTMLButtonElement | HTMLInputElement | null
+): FormData {
+    try {
+        if (submitter) {
+            return new FormData(form, submitter);
         }
-        next.src = resolved;
-        next.setAttribute(DYNAMIC_ATTR, DYNAMIC_VALUE);
-        head.appendChild(next);
+    } catch {
+        // Fall through to the broader FormData constructor.
     }
 
-    if (preservedClientNav && !head.contains(preservedClientNav)) {
-        head.appendChild(preservedClientNav);
+    const formData = new FormData(form);
+    if (submitter?.name && !formData.has(submitter.name)) {
+        formData.append(submitter.name, submitter.value);
     }
-
-    await stylesReady;
+    return formData;
 }
 
-function executeScripts(container: Element | null): void {
-    if (!container) {
+async function handleFragmentResponse(
+    response: Response,
+    requestId: number,
+    fragment: {
+        readonly target: string;
+        readonly selector?: string;
+        readonly mode: 'replace' | 'append' | 'prepend';
+    },
+    target: Element | null
+): Promise<void> {
+    if (!target) {
         return;
     }
 
-    const scripts = Array.from(container.querySelectorAll('script'));
-    for (const script of scripts) {
-        const src = script.getAttribute('src');
-        const type = script.getAttribute('type');
-
-        const normalizedSrc = src ? stripBasePath(src) : '';
-        if (normalizedSrc && (normalizedSrc === '/clientNav.js' || normalizedSrc.endsWith('/clientNav.js'))) {
-            script.remove();
-            continue;
-        }
-        if (normalizedSrc === '/hmr.js' || normalizedSrc === '/refresh.js') {
-            script.remove();
-            continue;
-        }
+    const html = await response.text();
+    if (requestId !== activeRequestId) {
+        return;
+    }
 
-        const next = document.createElement('script');
-        if (type) {
-            next.type = type;
+    const appliedFragment = applyFragmentHtml(target, html, fragment);
+    focusInsertedAutofocus(appliedFragment.focusRoots);
+    window.dispatchEvent(new CustomEvent('webstir:fragment-update', {
+        detail: {
+            target: fragment.target,
+            selector: fragment.selector,
+            mode: fragment.mode
         }
+    }));
+}
 
-        if (src) {
-            const resolved = resolveUrl(src, window.location.href);
-            if (resolved) {
-                next.src = resolved;
-            }
-        } else if (script.textContent) {
-            next.textContent = script.textContent;
-        }
+function resolveFragmentTarget(target: string, selector?: string): Element | null {
+    if (selector) {
+        return document.querySelector(selector);
+    }
 
-        script.replaceWith(next);
+    const byId = document.getElementById(target);
+    if (byId) {
+        return byId;
     }
+
+    return document.querySelector(`[data-webstir-fragment-target="${cssEscape(target)}"]`);
 }
 
-function resolveUrl(value: string, baseUrl: string): string | null {
-    try {
-        const trimmed = String(value ?? '').trim();
-        const [path, suffix] = splitPathSuffix(trimmed);
-        if (path && !path.startsWith('/') && !path.startsWith('http:') && !path.startsWith('https:')) {
-            if (path === 'index.js' || path === 'index.css') {
-                const pageName = getPageNameFromUrl(baseUrl);
-                return withBasePath(`/pages/${pageName}/${path}${suffix}`);
-            }
+function applyFragmentHtml(target: Element, html: string, fragment: {
+    readonly target: string;
+    readonly selector?: string;
+    readonly mode: 'replace' | 'append' | 'prepend';
+}): { readonly focusRoots: readonly Element[] } {
+    const template = document.createElement('template');
+    template.innerHTML = html;
+    const insertedRoots = Array.from(template.content.children);
+    const insertionBehavior = resolveFragmentInsertionBehavior({
+        mode: fragment.mode,
+        target: fragment.target,
+        hasMeaningfulSiblingContent: hasMeaningfulSiblingContent(template.content, insertedRoots[0] ?? null),
+        roots: insertedRoots.map((root) => ({
+            id: root.id,
+            fragmentTarget: root.getAttribute('data-webstir-fragment-target'),
+            matchesSelector: elementMatchesSelector(root, fragment.selector)
+        }))
+    });
+
+    if (insertionBehavior === 'replace-target') {
+        target.replaceWith(template.content);
+        executeInsertedScripts(insertedRoots);
+        return { focusRoots: insertedRoots };
+    }
+
+    if (insertionBehavior === 'append-matching-root-children' || insertionBehavior === 'prepend-matching-root-children') {
+        const { content, roots } = extractMatchingRootChildren(template.content);
+        if (insertionBehavior === 'append-matching-root-children') {
+            target.append(content);
+        } else {
+            target.prepend(content);
         }
+        executeInsertedScripts(roots);
+        return { focusRoots: roots };
+    }
 
-        const resolved = new URL(value, baseUrl);
-        return withBasePath(resolved.pathname + resolved.search + resolved.hash);
-    } catch {
-        return null;
+    if (insertionBehavior === 'append-payload') {
+        target.append(template.content);
+    } else if (insertionBehavior === 'prepend-payload') {
+        target.prepend(template.content);
+    } else {
+        target.replaceChildren(template.content);
     }
+
+    executeInsertedScripts(insertedRoots);
+    return { focusRoots: insertedRoots };
 }
 
-function normalizeStylesheetKey(href: string | null, baseUrl: string): string | null {
-    const resolved = resolveUrl(href ?? '', baseUrl);
-    if (!resolved) {
-        return null;
+function elementMatchesSelector(element: Element, selector: string | undefined): boolean {
+    if (!selector) {
+        return false;
     }
-    return stripBasePath(stripQueryAndHash(resolved));
-}
 
-function stripQueryAndHash(value: string): string {
-    return value.split(/[?#]/)[0] ?? value;
+    try {
+        return element.matches(selector);
+    } catch {
+        return false;
+    }
 }
 
-function waitForStylesheets(links: HTMLLinkElement[], timeoutMs = 2000): Promise<void> {
-    if (links.length === 0) {
-        return Promise.resolve();
-    }
-
-    return new Promise((resolve) => {
-        let remaining = links.length;
-        let done = false;
-        const finish = () => {
-            if (done) {
-                return;
-            }
-            done = true;
-            resolve();
-        };
-
-        const timer = window.setTimeout(finish, timeoutMs);
-        const handle = () => {
-            if (done) {
-                return;
-            }
-            remaining -= 1;
-            if (remaining <= 0) {
-                window.clearTimeout(timer);
-                finish();
-            }
-        };
-
-        for (const link of links) {
-            if (link.sheet) {
-                handle();
-                continue;
-            }
-            link.addEventListener('load', handle, { once: true });
-            link.addEventListener('error', handle, { once: true });
+function hasMeaningfulSiblingContent(content: DocumentFragment, root: Element | null): boolean {
+    for (const node of Array.from(content.childNodes)) {
+        if (node === root || node instanceof Comment) {
+            continue;
         }
-    });
+        if (node instanceof Text && !node.textContent?.trim()) {
+            continue;
+        }
+        return true;
+    }
+    return false;
 }
 
-function syncCriticalStyles(head: HTMLHeadElement, newHead: HTMLHeadElement): void {
-    for (const style of Array.from(head.querySelectorAll<HTMLStyleElement>('style[data-critical]'))) {
-        style.remove();
+function extractMatchingRootChildren(content: DocumentFragment): {
+    readonly content: DocumentFragment;
+    readonly roots: readonly Element[];
+} {
+    const fragment = document.createDocumentFragment();
+    const roots: Element[] = [];
+    const root = content.firstElementChild;
+    if (!root) {
+        return { content: fragment, roots };
+    }
+
+    while (root.firstChild) {
+        const node = root.firstChild;
+        fragment.append(node);
+        if (node instanceof Element) {
+            roots.push(node);
+        }
     }
 
-    for (const style of Array.from(newHead.querySelectorAll<HTMLStyleElement>('style[data-critical]'))) {
-        const next = document.createElement('style');
-        for (const attribute of Array.from(style.attributes)) {
-            next.setAttribute(attribute.name, attribute.value);
-        }
-        if (style.textContent) {
-            next.textContent = style.textContent;
+    return { content: fragment, roots };
+}
+
+function executeInsertedScripts(roots: readonly Element[]): void {
+    for (const root of roots) {
+        if (root.tagName.toLowerCase() === 'script') {
+            executeTopLevelScriptRoot(root as HTMLScriptElement);
+            continue;
         }
-        head.appendChild(next);
+        executeScripts(root, DOM_RUNTIME);
     }
 }
 
-function splitPathSuffix(value: string): [string, string] {
-    const [path, suffix = ''] = value.split(/(?=[?#])/);
-    return [path ?? '', suffix ?? ''];
-}
+function executeTopLevelScriptRoot(script: HTMLScriptElement): void {
+    const wrapper = document.createElement('div');
+    wrapper.append(script.cloneNode(true));
+    executeScripts(wrapper, DOM_RUNTIME);
 
-function isAppStylesheetHref(href: string | null): boolean {
-    if (!href) {
-        return false;
+    const replacement = wrapper.querySelector('script');
+    if (replacement) {
+        script.replaceWith(replacement);
+        return;
     }
 
-    try {
-        const normalized = stripBasePath(new URL(href, window.location.origin).pathname);
-        return normalized === '/app/app.css';
-    } catch {
-        const trimmed = href.trim();
-        if (!trimmed) {
-            return false;
-        }
-        const [path] = trimmed.split(/[?#]/);
-        return stripBasePath(path) === '/app/app.css';
-    }
+    script.remove();
 }
 
-function getPageNameFromUrl(url: string): string {
-    try {
-        const pathname = stripBasePath(new URL(url, window.location.href).pathname);
-        const trimmed = pathname.replace(/^\/+|\/+$/g, '');
-        if (!trimmed) {
-            return 'home';
+function focusInsertedAutofocus(roots: readonly Element[]): void {
+    for (const root of roots) {
+        if (root instanceof HTMLElement && root.hasAttribute('autofocus')) {
+            root.focus();
+            return;
         }
 
-        const firstSegment = trimmed.split('/')[0];
-        return firstSegment || 'home';
-    } catch {
-        return 'home';
+        const descendant = root.querySelector('[autofocus]');
+        if (descendant instanceof HTMLElement) {
+            descendant.focus();
+            return;
+        }
     }
 }
 
-function cssEscape(value: string): string {
-    if (typeof CSS !== 'undefined' && typeof (CSS as { escape?: (value: string) => string }).escape === 'function') {
-        return (CSS as { escape: (value: string) => string }).escape(value);
+function submitFormNatively(
+    form: HTMLFormElement,
+    submitter: HTMLButtonElement | HTMLInputElement | null
+): void {
+    form.setAttribute(BYPASS_ATTR, 'true');
+    if (submitter && typeof form.requestSubmit === 'function') {
+        form.requestSubmit(submitter);
+        return;
     }
-    return value.replace(/[\"\\\\]/g, '\\\\$&');
+    window.setTimeout(() => {
+        form.removeAttribute(BYPASS_ATTR);
+    }, 0);
+    form.submit();
 }
+
+enableClientNav();