@chidchanun/bcp 0.1.8 → 0.1.9

package/packages/client/src/router-v2.tsx

@@ -51,9 +51,9 @@ export interface LinkProps
     scroll?: boolean;
 }
 
-interface NavigationPayload {
+interface NavigationRoutePayload {
     route?: string;
-    params?: Record<string, string>;
+    params?: Record<string, unknown>;
     clientScript: string;
     clientImports: string[];
     title: string;
@@ -62,6 +62,17 @@ interface NavigationPayload {
     loadingHtml: string | null;
 }
 
+interface NavigationRedirectPayload {
+    redirect: {
+        location: string;
+        status: number;
+    };
+}
+
+type NavigationPayload =
+    | NavigationRoutePayload
+    | NavigationRedirectPayload;
+
 interface BcpDevConfig {
     eventsPath: string;
     clientScript: string;
@@ -102,6 +113,12 @@ declare global {
 let navigationController:
     AbortController | null = null;
 
+let navigationSequence =
+    0;
+
+const MAX_REDIRECTS =
+    10;
+
 export async function navigate(
     href: string,
     options: NavigationOptions = {}
@@ -354,13 +371,31 @@ async function loadNavigation(
     target: URL,
     options: NavigationOptions & {
         fromHistory?: boolean;
+        redirectCount?: number;
     }
 ): Promise<void> {
     ensureNavigationRuntime();
+
+    const redirectCount =
+        options.redirectCount ??
+        0;
+
+    if (
+        redirectCount >
+        MAX_REDIRECTS
+    ) {
+        throw new Error(
+            `BCP Framework: navigation exceeded ${MAX_REDIRECTS} redirects.`
+        );
+    }
+
     navigationController?.abort();
 
     const controller =
         new AbortController();
+    const navigationId =
+        ++navigationSequence;
+
     navigationController =
         controller;
 
@@ -383,6 +418,8 @@ async function loadNavigation(
                 )}`,
                 {
                     method: "GET",
+                    credentials:
+                        "same-origin",
                     headers: {
                         Accept:
                             "application/json",
@@ -394,6 +431,11 @@ async function loadNavigation(
                 }
             );
 
+        assertCurrentNavigation(
+            controller,
+            navigationId
+        );
+
         if (!response.ok) {
             window.location.assign(
                 target.href
@@ -406,6 +448,11 @@ async function loadNavigation(
                 response
             );
 
+        assertCurrentNavigation(
+            controller,
+            navigationId
+        );
+
         if (!payload) {
             window.location.assign(
                 target.href
@@ -413,6 +460,54 @@ async function loadNavigation(
             return;
         }
 
+        if (
+            isNavigationRedirectPayload(
+                payload
+            )
+        ) {
+            const redirectTarget =
+                new URL(
+                    payload.redirect.location,
+                    target.href
+                );
+
+            if (
+                redirectTarget.origin !==
+                window.location.origin
+            ) {
+                window.location.assign(
+                    redirectTarget.href
+                );
+                return;
+            }
+
+            const redirectedOptions =
+                options.fromHistory
+                    ? {
+                        replace:
+                            true,
+                        scroll:
+                            options.scroll,
+                        fromHistory:
+                            false,
+                        redirectCount:
+                            redirectCount +
+                            1,
+                    }
+                    : {
+                        ...options,
+                        redirectCount:
+                            redirectCount +
+                            1,
+                    };
+
+            await loadNavigation(
+                redirectTarget,
+                redirectedOptions
+            );
+            return;
+        }
+
         setNavigationState({
             targetRoute:
                 payload.route ??
@@ -425,8 +520,15 @@ async function loadNavigation(
         preloadClientImports(
             payload.clientImports
         );
+
+        assertCurrentNavigation(
+            controller,
+            navigationId
+        );
+
         applyNavigationPayload(
-            payload
+            payload,
+            navigationId
         );
 
         if (!options.fromHistory) {
@@ -443,11 +545,29 @@ async function loadNavigation(
             target
         );
         await restartDevRuntime();
+
+        assertCurrentNavigation(
+            controller,
+            navigationId
+        );
+
         await importClientBundle(
-            payload.clientScript
+            payload.clientScript,
+            navigationId
+        );
+
+        assertCurrentNavigation(
+            controller,
+            navigationId
         );
+
         await waitForNextPaint();
 
+        assertCurrentNavigation(
+            controller,
+            navigationId
+        );
+
         if (options.scroll !== false) {
             if (target.hash) {
                 scrollToHash(
@@ -463,7 +583,9 @@ async function loadNavigation(
     } finally {
         if (
             navigationController ===
-            controller
+                controller &&
+            navigationId ===
+                navigationSequence
         ) {
             navigationController =
                 null;
@@ -479,28 +601,41 @@ async function parseNavigationPayload(
     try {
         const payload =
             await response.json() as
-            Partial<NavigationPayload>;
+            Record<string, unknown>;
 
         if (
-            typeof payload.clientScript !==
+            isNavigationRedirectPayload(
+                payload
+            )
+        ) {
+            return payload;
+        }
+
+        const routePayload =
+            payload as Partial<
+                NavigationRoutePayload
+            >;
+
+        if (
+            typeof routePayload.clientScript !==
                 "string" ||
-            typeof payload.title !==
+            typeof routePayload.title !==
                 "string" ||
-            typeof payload.version !==
+            typeof routePayload.version !==
                 "number" ||
             !(
-                payload.loadingHtml === null ||
-                typeof payload.loadingHtml ===
+                routePayload.loadingHtml === null ||
+                typeof routePayload.loadingHtml ===
                     "string"
             ) ||
             !(
-                payload.clientImports ===
+                routePayload.clientImports ===
                     undefined ||
                 (
                     Array.isArray(
-                        payload.clientImports
+                        routePayload.clientImports
                     ) &&
-                    payload.clientImports.every(
+                    routePayload.clientImports.every(
                         (item) =>
                             typeof item ===
                             "string"
@@ -508,10 +643,22 @@ async function parseNavigationPayload(
                 )
             ) ||
             !(
-                payload.metadata === undefined ||
-                payload.metadata === null ||
+                routePayload.metadata === undefined ||
+                routePayload.metadata === null ||
                 isResolvedMetadata(
-                    payload.metadata
+                    routePayload.metadata
+                )
+            ) ||
+            !(
+                routePayload.params === undefined ||
+                (
+                    typeof routePayload.params ===
+                        "object" &&
+                    routePayload.params !==
+                        null &&
+                    !Array.isArray(
+                        routePayload.params
+                    )
                 )
             )
         ) {
@@ -520,29 +667,29 @@ async function parseNavigationPayload(
 
         return {
             route:
-                payload.route,
+                routePayload.route,
             params:
-                payload.params ?? {},
+                routePayload.params ?? {},
             clientScript:
                 stripQuery(
-                    payload.clientScript
+                    routePayload.clientScript
                 ),
             clientImports:
                 (
-                    payload.clientImports ??
+                    routePayload.clientImports ??
                     []
                 ).map(
                     stripQuery
                 ),
             title:
-                payload.title,
+                routePayload.title,
             metadata:
-                payload.metadata ??
+                routePayload.metadata ??
                 null,
             version:
-                payload.version,
+                routePayload.version,
             loadingHtml:
-                payload.loadingHtml,
+                routePayload.loadingHtml,
         };
     } catch {
         return null;
@@ -550,7 +697,8 @@ async function parseNavigationPayload(
 }
 
 function applyNavigationPayload(
-    payload: NavigationPayload
+    payload: NavigationRoutePayload,
+    navigationId: number
 ): void {
     if (
         !document.getElementById(
@@ -582,6 +730,7 @@ function applyNavigationPayload(
                 payload.params ?? {},
             metadata:
                 payload.metadata,
+            navigationId,
         });
 
     if (payload.metadata) {
@@ -644,7 +793,7 @@ function preloadClientImports(
 }
 
 function updateDevConfig(
-    payload: NavigationPayload,
+    payload: NavigationRoutePayload,
     target: URL
 ): void {
     const config =
@@ -747,7 +896,8 @@ async function restartDevRuntime(): Promise<void> {
 }
 
 async function importClientBundle(
-    clientScript: string
+    clientScript: string,
+    navigationId: number
 ): Promise<void> {
     const separator =
         clientScript.includes("?")
@@ -758,7 +908,82 @@ async function importClientBundle(
         clientScript +
         separator +
         "bcp-nav=" +
-        Date.now()
+        encodeURIComponent(
+            navigationId
+        )
+    );
+}
+
+function assertCurrentNavigation(
+    controller: AbortController,
+    navigationId: number
+): void {
+    if (
+        controller.signal.aborted ||
+        navigationController !==
+            controller ||
+        navigationId !==
+            navigationSequence
+    ) {
+        throw new DOMException(
+            "Navigation aborted.",
+            "AbortError"
+        );
+    }
+}
+
+function isNavigationRedirectPayload(
+    value: unknown
+): value is NavigationRedirectPayload {
+    if (
+        typeof value !==
+            "object" ||
+        value === null
+    ) {
+        return false;
+    }
+
+    const redirect =
+        (
+            value as {
+                redirect?: unknown;
+            }
+        ).redirect;
+
+    if (
+        typeof redirect !==
+            "object" ||
+        redirect === null
+    ) {
+        return false;
+    }
+
+    const candidate =
+        redirect as {
+            location?: unknown;
+            status?: unknown;
+        };
+
+    return (
+        typeof candidate.location ===
+            "string" &&
+        typeof candidate.status ===
+            "number" &&
+        isRedirectStatus(
+            candidate.status
+        )
+    );
+}
+
+function isRedirectStatus(
+    status: number
+): boolean {
+    return (
+        status === 301 ||
+        status === 302 ||
+        status === 303 ||
+        status === 307 ||
+        status === 308
     );
 }
 

package/packages/server/src/dev-navigation-target.ts

@@ -0,0 +1,188 @@
+import * as http from "node:http";
+import path from "node:path";
+
+import {
+    matchRoute,
+    scanRoutes,
+} from "../../router/src/index.js";
+
+import {
+    resolveNavigationPayload,
+} from "./navigation-payload.js";
+
+import {
+    attachLoaderDataToParams,
+    executePageLoader,
+} from "./page-loader.js";
+
+import {
+    createNavigationJsonResponse,
+    createNavigationRedirectResponse,
+} from "./navigation-response.js";
+
+import {
+    applyResponseCookies,
+    runWithRequestContext,
+} from "./request-context.js";
+
+export async function createDevNavigationTargetResponse(
+    req: http.IncomingMessage,
+    rootDirectory: string,
+    target: URL
+): Promise<Response | null> {
+    const routes =
+        scanRoutes(
+            path.join(
+                rootDirectory,
+                "app"
+            )
+        );
+
+    const match =
+        matchRoute(
+            routes,
+            normalizePathname(
+                target.pathname
+            )
+        );
+
+    if (!match) {
+        return null;
+    }
+
+    const request =
+        createNavigationRequest(
+            req,
+            target
+        );
+
+    return runWithRequestContext(
+        request,
+        async () => {
+            const loaderExecution =
+                await executePageLoader(
+                    match.route.filePath,
+                    match.params,
+                    target,
+                    Date.now()
+                );
+
+            if (
+                loaderExecution.response
+            ) {
+                const loaderResponse =
+                    applyResponseCookies(
+                        loaderExecution.response
+                    );
+
+                return (
+                    createNavigationRedirectResponse(
+                        loaderResponse
+                    ) ??
+                    loaderResponse
+                );
+            }
+
+            const payload =
+                await resolveNavigationPayload(
+                    rootDirectory,
+                    target.pathname,
+                    {
+                        allowLoaderRoute:
+                            true,
+                    }
+                );
+
+            if (!payload) {
+                return createNavigationJsonResponse(
+                    {
+                        error:
+                            "Route not found.",
+                    },
+                    {
+                        status:
+                            404,
+                    }
+                );
+            }
+
+            payload.params =
+                attachLoaderDataToParams(
+                    match.params,
+                    loaderExecution
+                );
+
+            return applyResponseCookies(
+                createNavigationJsonResponse(
+                    payload
+                )
+            );
+        },
+        {
+            remoteAddress:
+                req.socket
+                    .remoteAddress ??
+                null,
+        }
+    );
+}
+
+function createNavigationRequest(
+    req: http.IncomingMessage,
+    target: URL
+): Request {
+    const headers =
+        new Headers();
+
+    for (
+        const [key, value]
+        of Object.entries(
+            req.headers
+        )
+    ) {
+        if (value === undefined) {
+            continue;
+        }
+
+        if (Array.isArray(value)) {
+            for (const item of value) {
+                headers.append(
+                    key,
+                    item
+                );
+            }
+        } else {
+            headers.set(
+                key,
+                value
+            );
+        }
+    }
+
+    return new Request(
+        target,
+        {
+            method:
+                "GET",
+            headers,
+        }
+    );
+}
+
+function normalizePathname(
+    pathname: string
+): string {
+    if (
+        pathname.length > 1 &&
+        pathname.endsWith(
+            "/"
+        )
+    ) {
+        return pathname.slice(
+            0,
+            -1
+        );
+    }
+
+    return pathname || "/";
+}