rwsdk 0.2.0-alpha.0 → 0.2.0-alpha.1

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.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;
@@ -35,12 +38,12 @@ export function initClientNavigation(opts = {}) {
             await globalThis.__rsc_callServer();
         },
         scrollToTop: true,
-        scrollBehavior: 'instant',
+        scrollBehavior: "instant",
         ...opts,
     };
     // Prevent browser's automatic scroll restoration for popstate
-    if ('scrollRestoration' in history) {
-        history.scrollRestoration = 'manual';
+    if ("scrollRestoration" in history) {
+        history.scrollRestoration = "manual";
     }
     // Set up scroll behavior management
     let popStateWasCalled = false;
@@ -51,7 +54,7 @@ export function initClientNavigation(opts = {}) {
             window.scrollTo({
                 top: savedScrollPosition.y,
                 left: savedScrollPosition.x,
-                behavior: 'instant',
+                behavior: "instant",
             });
             savedScrollPosition = null;
         }
@@ -68,7 +71,7 @@ export function initClientNavigation(opts = {}) {
             window.history.replaceState({
                 ...window.history.state,
                 scrollX: 0,
-                scrollY: 0
+                scrollY: 0,
             }, "", window.location.href);
         }
         popStateWasCalled = false;
@@ -77,7 +80,10 @@ export function initClientNavigation(opts = {}) {
         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) {
+        if (state &&
+            typeof state === "object" &&
+            "scrollX" in state &&
+            "scrollY" in state) {
             savedScrollPosition = { x: state.scrollX, y: state.scrollY };
         }
         else {
@@ -105,7 +111,7 @@ export function initClientNavigation(opts = {}) {
         window.history.replaceState({
             path: window.location.pathname,
             scrollX: window.scrollX,
-            scrollY: window.scrollY
+            scrollY: window.scrollY,
         }, "", window.location.href);
         window.history.pushState({ path: href }, "", window.location.origin + href);
         await options.onNavigate();

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/lib/router.d.ts

@@ -16,6 +16,7 @@ export type RwContext = {
     layouts?: React.FC<LayoutProps<any>>[];
     databases: Map<string, Kysely<any>>;
     scriptsToBeLoaded: Set<string>;
+    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>;
@@ -42,6 +43,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>[], 
 /**
@@ -53,5 +55,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

@@ -42,6 +42,7 @@ export const defineApp = (routes) => {
                     ssr: true,
                     databases: new Map(),
                     scriptsToBeLoaded: new Set(),
+                    pageRouteResolved: undefined,
                 };
                 const outerRequestInfo = {
                     request,
@@ -59,16 +60,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 });
@@ -148,6 +140,7 @@ export const defineApp = (routes) => {
                         mutableResponse.headers.set(key, value);
                     }
                 }
+                await rw.pageRouteResolved?.promise;
                 return mutableResponse;
             }
             catch (e) {

package/package.json

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