rwsdk 0.1.26 → 0.1.28

package/dist/runtime/client.js

@@ -77,7 +77,9 @@ export const initClient = async ({ transport = fetchTransport, hydrateRootOption
         const [streamData, setStreamData] = React.useState(rscPayload);
         const [_isPending, startTransition] = React.useTransition();
         transportContext.setRscPayload = (v) => startTransition(() => setStreamData(v));
-        return _jsx(_Fragment, { children: React.use(streamData).node });
+        return (_jsx(_Fragment, { children: streamData
+                ? React.use(streamData).node
+                : null }));
     }
     hydrateRoot(rootEl, _jsx(Content, {}), {
         onUncaughtError: (error, { componentStack }) => {

package/dist/runtime/clientNavigation.d.ts

@@ -1,6 +1,9 @@
+export interface ClientNavigationOptions {
+    onNavigate?: () => void;
+    scrollToTop?: boolean;
+    scrollBehavior?: "auto" | "smooth" | "instant";
+}
 export declare function validateClickEvent(event: MouseEvent, target: HTMLElement): boolean;
-export declare function initClientNavigation(opts?: {
-    onNavigate: () => void;
-}): {
+export declare function initClientNavigation(opts?: ClientNavigationOptions): {
     handleResponse: (response: Response) => boolean;
 };

package/dist/runtime/clientNavigation.js

@@ -14,6 +14,9 @@ export function validateClickEvent(event, target) {
     if (!href) {
         return false;
     }
+    if (href.includes("#")) {
+        return false;
+    }
     // Skip if target="_blank" or similar
     if (link.target && link.target !== "_self") {
         return false;
@@ -27,12 +30,73 @@ export function validateClickEvent(event, target) {
     }
     return true;
 }
-export function initClientNavigation(opts = {
-    onNavigate: async function onNavigate() {
-        // @ts-expect-error
-        await globalThis.__rsc_callServer();
-    },
-}) {
+export function initClientNavigation(opts = {}) {
+    // Merge user options with defaults
+    const options = {
+        onNavigate: async function onNavigate() {
+            // @ts-expect-error
+            await globalThis.__rsc_callServer();
+        },
+        scrollToTop: true,
+        scrollBehavior: "instant",
+        ...opts,
+    };
+    // Prevent browser's automatic scroll restoration for popstate
+    if ("scrollRestoration" in history) {
+        history.scrollRestoration = "manual";
+    }
+    // Set up scroll behavior management
+    let popStateWasCalled = false;
+    let savedScrollPosition = null;
+    const observer = new MutationObserver(() => {
+        if (popStateWasCalled && savedScrollPosition) {
+            // Restore scroll position for popstate navigation (always instant)
+            window.scrollTo({
+                top: savedScrollPosition.y,
+                left: savedScrollPosition.x,
+                behavior: "instant",
+            });
+            savedScrollPosition = null;
+        }
+        else if (options.scrollToTop && !popStateWasCalled) {
+            // Scroll to top for anchor click navigation (configurable)
+            window.scrollTo({
+                top: 0,
+                left: 0,
+                behavior: options.scrollBehavior,
+            });
+            // Update the current history entry with the new scroll position (top)
+            // This ensures that if we navigate back and then forward again,
+            // we return to the top position, not some previous scroll position
+            window.history.replaceState({
+                ...window.history.state,
+                scrollX: 0,
+                scrollY: 0,
+            }, "", window.location.href);
+        }
+        popStateWasCalled = false;
+    });
+    const handleScrollPopState = (event) => {
+        popStateWasCalled = true;
+        // Save the scroll position that the browser would have restored to
+        const state = event.state;
+        if (state &&
+            typeof state === "object" &&
+            "scrollX" in state &&
+            "scrollY" in state) {
+            savedScrollPosition = { x: state.scrollX, y: state.scrollY };
+        }
+        else {
+            // Fallback: try to get scroll position from browser's session history
+            // This is a best effort since we can't directly access the browser's stored position
+            savedScrollPosition = { x: window.scrollX, y: window.scrollY };
+        }
+    };
+    const main = document.querySelector("main") || document.body;
+    if (main) {
+        window.addEventListener("popstate", handleScrollPopState);
+        observer.observe(main, { childList: true, subtree: true });
+    }
     // Intercept all anchor tag clicks
     document.addEventListener("click", async function handleClickEvent(event) {
         // Prevent default navigation
@@ -43,12 +107,18 @@ export function initClientNavigation(opts = {
         const el = event.target;
         const a = el.closest("a");
         const href = a?.getAttribute("href");
+        // Save current scroll position before navigating
+        window.history.replaceState({
+            path: window.location.pathname,
+            scrollX: window.scrollX,
+            scrollY: window.scrollY,
+        }, "", window.location.href);
         window.history.pushState({ path: href }, "", window.location.origin + href);
-        await opts.onNavigate();
+        await options.onNavigate();
     }, true);
     // Handle browser back/forward buttons
     window.addEventListener("popstate", async function handlePopState() {
-        await opts.onNavigate();
+        await options.onNavigate();
     });
     // Return a handleResponse function for use with initClient
     return {

package/dist/runtime/clientNavigation.test.js

@@ -35,11 +35,10 @@ describe("clientNavigation", () => {
             closest: () => ({ getAttribute: () => undefined }),
         })).toBe(false);
     });
-    it("should not have a target attribute", () => {
+    it("should not include an #hash", () => {
         expect(validateClickEvent(mockEvent, {
             closest: () => ({
-                target: "_blank",
-                getAttribute: () => "/test",
+                getAttribute: () => "/test#hash",
                 hasAttribute: () => false,
             }),
         })).toBe(false);

package/dist/runtime/entries/types/client.d.ts

@@ -1 +1,6 @@
 import "./shared";
+export interface ClientNavigationOptions {
+    onNavigate?: () => void;
+    scrollToTop?: boolean;
+    scrollBehavior?: "auto" | "smooth" | "instant";
+}

package/dist/runtime/lib/router.d.ts

@@ -15,6 +15,7 @@ export type RwContext = {
     ssr: boolean;
     layouts?: React.FC<LayoutProps<any>>[];
     databases: Map<string, Kysely<any>>;
+    pageRouteResolved: PromiseWithResolvers<void> | undefined;
 };
 export type RouteMiddleware<T extends RequestInfo = RequestInfo> = (requestInfo: T) => Response | Promise<Response> | void | Promise<void> | Promise<Response | void>;
 type RouteFunction<T extends RequestInfo = RequestInfo> = (requestInfo: T) => Response | Promise<Response>;
@@ -41,6 +42,7 @@ export declare function defineRoutes<T extends RequestInfo = RequestInfo>(routes
 export declare function route<T extends RequestInfo = RequestInfo>(path: string, handler: RouteHandler<T>): RouteDefinition<T>;
 export declare function index<T extends RequestInfo = RequestInfo>(handler: RouteHandler<T>): RouteDefinition<T>;
 export declare function prefix<T extends RequestInfo = RequestInfo>(prefixPath: string, routes: Route<T>[]): Route<T>[];
+export declare const wrapHandlerToThrowResponses: <T extends RequestInfo = RequestInfo>(handler: RouteFunction<T> | RouteComponent<T>) => RouteHandler<T>;
 export declare function layout<T extends RequestInfo = RequestInfo>(LayoutComponent: React.FC<LayoutProps<T>>, routes: Route<T>[]): Route<T>[];
 export declare function render<T extends RequestInfo = RequestInfo>(Document: React.FC<DocumentProps<T>>, routes: Route<T>[], 
 /**
@@ -52,5 +54,5 @@ options?: {
     rscPayload?: boolean;
     ssr?: boolean;
 }): Route<T>[];
-export declare const isClientReference: (Component: React.FC<any>) => boolean;
+export declare const isClientReference: (value: any) => boolean;
 export {};

package/dist/runtime/lib/router.js

@@ -97,7 +97,13 @@ export function defineRoutes(routes) {
                 for (const h of handlers) {
                     if (isRouteComponent(h)) {
                         const requestInfo = getRequestInfo();
-                        const WrappedComponent = wrapWithLayouts(h, layouts || [], requestInfo);
+                        const WrappedComponent = wrapWithLayouts(wrapHandlerToThrowResponses(h), layouts || [], requestInfo);
+                        if (!isClientReference(WrappedComponent)) {
+                            // context(justinvdm, 31 Jul 2025): We now know we're dealing with a page route,
+                            // so we create a deferred so that we can signal when we're done determining whether
+                            // we're returning a response or a react element
+                            requestInfo.rw.pageRouteResolved = Promise.withResolvers();
+                        }
                         return await renderPage(requestInfo, WrappedComponent, onError);
                     }
                     else {
@@ -164,6 +170,28 @@ function wrapWithLayouts(Component, layouts = [], requestInfo) {
         return Wrapped;
     }, Component);
 }
+// context(justinvdm, 31 Jul 2025): We need to wrap the handler's that might
+// return react elements, so that it throws the response to bubble it up and
+// break out of react rendering context This way, we're able to return a
+// response from the handler while still staying within react rendering context
+export const wrapHandlerToThrowResponses = (handler) => {
+    if (isClientReference(handler) ||
+        !isRouteComponent(handler) ||
+        Object.prototype.hasOwnProperty.call(handler, "__rwsdk_route_component")) {
+        return handler;
+    }
+    const ComponentWrappedToThrowResponses = async (requestInfo) => {
+        const result = await handler(requestInfo);
+        if (result instanceof Response) {
+            requestInfo.rw.pageRouteResolved?.reject(result);
+            throw result;
+        }
+        requestInfo.rw.pageRouteResolved?.resolve();
+        return result;
+    };
+    ComponentWrappedToThrowResponses.__rwsdk_route_component = true;
+    return ComponentWrappedToThrowResponses;
+};
 export function layout(LayoutComponent, routes) {
     // Attach layouts directly to route definitions
     return routes.map((route) => {
@@ -202,9 +230,10 @@ options = {}) {
     return [documentMiddleware, ...routes];
 }
 function isRouteComponent(handler) {
-    return ((isValidElementType(handler) && handler.toString().includes("jsx")) ||
+    return (Object.prototype.hasOwnProperty.call(handler, "__rwsdk_route_component") ||
+        (isValidElementType(handler) && handler.toString().includes("jsx")) ||
         isClientReference(handler));
 }
-export const isClientReference = (Component) => {
-    return Object.prototype.hasOwnProperty.call(Component, "$$isClientReference");
+export const isClientReference = (value) => {
+    return Object.prototype.hasOwnProperty.call(value, "$$isClientReference");
 };

package/dist/runtime/worker.js

@@ -41,6 +41,7 @@ export const defineApp = (routes) => {
                     rscPayload: true,
                     ssr: true,
                     databases: new Map(),
+                    pageRouteResolved: undefined,
                 };
                 const outerRequestInfo = {
                     request,
@@ -58,16 +59,7 @@ export const defineApp = (routes) => {
                         pageElement = _jsx(Page, { ctx: ctx, params: params });
                     }
                     else {
-                        // context(justinvdm, 24 Apr 2025): We need to wrap the page in a component that throws the response to bubble it up and break out of react rendering context
-                        // This way, we're able to return a response from the page component while still staying within react rendering context
-                        const PageWrapper = async () => {
-                            const result = await Page(requestInfo);
-                            if (result instanceof Response) {
-                                throw result;
-                            }
-                            return result;
-                        };
-                        pageElement = _jsx(PageWrapper, {});
+                        pageElement = _jsx(Page, { ...requestInfo });
                     }
                     if (isSmokeTest) {
                         pageElement = _jsx(SmokeTestWrapper, { children: pageElement });
@@ -147,6 +139,7 @@ export const defineApp = (routes) => {
                         mutableResponse.headers.set(key, value);
                     }
                 }
+                await rw.pageRouteResolved?.promise;
                 return mutableResponse;
             }
             catch (e) {

package/dist/scripts/ensure-deploy-env.mjs

@@ -15,9 +15,9 @@ const promptForDeployment = async () => {
     });
     return new Promise((resolve) => {
         // Handle Ctrl+C (SIGINT)
-        rl.on('SIGINT', () => {
+        rl.on("SIGINT", () => {
             rl.close();
-            console.log('\nDeployment cancelled.');
+            console.log("\nDeployment cancelled.");
             process.exit(1);
         });
         rl.question("Do you want to proceed with deployment? (y/N): ", (answer) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rwsdk",
-  "version": "0.1.26",
+  "version": "0.1.28",
   "description": "Build fast, server-driven webapps on Cloudflare with SSR, RSC, and realtime",
   "type": "module",
   "bin": {