rwsdk 0.2.0-alpha.13 → 0.2.0-alpha.15

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

@@ -0,0 +1,10 @@
+import "./setWebpackRequire";
+export { ClientOnly } from "./ClientOnly.js";
+export { default as React } from "react";
+import type { Transport, HydrationOptions } from "./types";
+export declare const fetchTransport: Transport;
+export declare const initClient: ({ transport, hydrateRootOptions, handleResponse, }?: {
+    transport?: Transport;
+    hydrateRootOptions?: HydrationOptions;
+    handleResponse?: (response: Response) => boolean;
+}) => Promise<void>;

package/dist/runtime/{client.js → client/client.js}

@@ -1,11 +1,18 @@
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-import { clientWebpackRequire } from "./imports/client";
-// NOTE: `react-server-dom-webpack` uses this global to load modules,
-// so we need to define it here before importing "react-server-dom-webpack."
-globalThis.__webpack_require__ = clientWebpackRequire;
+// note(justinvdm, 14 Aug 2025): Rendering related imports and logic go here.
+// See client.tsx for the actual client entrypoint.
+// context(justinvdm, 14 Aug 2025): `react-server-dom-webpack` uses this global
+// to load modules, so we need to define it here before importing
+// "react-server-dom-webpack."
+import "./setWebpackRequire";
+import React from "react";
+import { hydrateRoot } from "react-dom/client";
+import { createFromReadableStream, createFromFetch, encodeReply, } from "react-server-dom-webpack/client.browser";
+import { rscStream } from "rsc-html-stream/client";
+export { ClientOnly } from "./ClientOnly.js";
+export { default as React } from "react";
 export const fetchTransport = (transportContext) => {
     const fetchCallServer = async (id, args) => {
-        const { createFromFetch, encodeReply } = await import("react-server-dom-webpack/client.browser");
         const url = new URL(window.location.href);
         url.searchParams.set("__rsc", "");
         if (id != null) {
@@ -41,8 +48,6 @@ export const fetchTransport = (transportContext) => {
     return fetchCallServer;
 };
 export const initClient = async ({ transport = fetchTransport, hydrateRootOptions, handleResponse, } = {}) => {
-    const React = await import("react");
-    const { hydrateRoot } = await import("react-dom/client");
     const transportContext = {
         setRscPayload: () => { },
         handleResponse,
@@ -50,7 +55,7 @@ export const initClient = async ({ transport = fetchTransport, hydrateRootOption
     let transportCallServer = transport(transportContext);
     const callServer = (id, args) => transportCallServer(id, args);
     const upgradeToRealtime = async ({ key } = {}) => {
-        const { realtimeTransport } = await import("./lib/realtime/client");
+        const { realtimeTransport } = await import("../lib/realtime/client");
         const createRealtimeTransport = realtimeTransport({ key });
         transportCallServer = createRealtimeTransport(transportContext);
     };
@@ -67,8 +72,6 @@ export const initClient = async ({ transport = fetchTransport, hydrateRootOption
     // context(justinvdm, 18 Jun 2025): We inject the RSC payload
     // unless render(Document, [...], { rscPayload: false }) was used.
     if (globalThis.__FLIGHT_DATA) {
-        const { createFromReadableStream } = await import("react-server-dom-webpack/client.browser");
-        const { rscStream } = await import("rsc-html-stream/client");
         rscPayload = createFromReadableStream(rscStream, {
             callServer,
         });

package/dist/runtime/{clientNavigation.test.js → client/navigation.test.js}

@@ -1,5 +1,5 @@
 import { describe, it, expect } from "vitest";
-import { validateClickEvent } from "./clientNavigation";
+import { validateClickEvent } from "./navigation";
 describe("clientNavigation", () => {
     let mockEvent = {
         button: 0, // right click

package/dist/runtime/client/setWebpackRequire.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/runtime/client/setWebpackRequire.js

@@ -0,0 +1,2 @@
+import { clientWebpackRequire } from "../imports/client";
+globalThis.__webpack_require__ = clientWebpackRequire;

package/dist/runtime/{client.d.ts → client/types.d.ts}

@@ -1,19 +1,13 @@
-import { type CallServerCallback } from "react-server-dom-webpack/client.browser";
-import { type HydrationOptions } from "react-dom/client";
+import type { CallServerCallback } from "react-server-dom-webpack/client.browser";
+export type { CallServerCallback } from "react-server-dom-webpack/client.browser";
+export type { HydrationOptions } from "react-dom/client";
 export type ActionResponse<Result> = {
     node: React.ReactNode;
     actionResult: Result;
 };
-type TransportContext = {
+export type TransportContext = {
     setRscPayload: <Result>(v: Promise<ActionResponse<Result>>) => void;
     handleResponse?: (response: Response) => boolean;
 };
 export type Transport = (context: TransportContext) => CallServerCallback;
 export type CreateCallServer = (context: TransportContext) => <Result>(id: null | string, args: null | unknown[]) => Promise<Result>;
-export declare const fetchTransport: Transport;
-export declare const initClient: ({ transport, hydrateRootOptions, handleResponse, }?: {
-    transport?: Transport;
-    hydrateRootOptions?: HydrationOptions;
-    handleResponse?: (response: Response) => boolean;
-}) => Promise<void>;
-export {};

package/dist/runtime/client/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -1,5 +1,5 @@
 import "./types/client";
-export * from "../client";
+export * from "../client/client";
 export * from "../register/client";
 export * from "../lib/streams/consumeEventStream";
-export * from "../clientNavigation";
+export * from "../client/navigation";

package/dist/runtime/entries/client.js

@@ -1,5 +1,5 @@
 import "./types/client";
-export * from "../client";
+export * from "../client/client";
 export * from "../register/client";
 export * from "../lib/streams/consumeEventStream";
-export * from "../clientNavigation";
+export * from "../client/navigation";

package/dist/runtime/imports/client.d.ts

@@ -1,4 +1,4 @@
-export declare const loadModule: ((id: string) => Promise<any>) & import("lodash").MemoizedFunction;
-export declare const clientWebpackRequire: ((id: string) => Promise<{
+export declare const loadModule: (id: string) => Promise<any>;
+export declare const clientWebpackRequire: (id: string) => Promise<{
     [x: string]: any;
-}>) & import("lodash").MemoizedFunction;
+}>;

package/dist/runtime/imports/client.js

@@ -1,11 +1,13 @@
 import React from "react";
-import memoize from "lodash/memoize";
-export const loadModule = memoize(async (id) => {
+import { ClientOnly } from "../client/client";
+import { memoizeOnId } from "../lib/memoizeOnId";
+// @ts-ignore
+import { useClientLookup } from "virtual:use-client-lookup.js";
+export const loadModule = memoizeOnId(async (id) => {
     if (import.meta.env.VITE_IS_DEV_SERVER) {
         return await import(/* @vite-ignore */ id);
     }
     else {
-        const { useClientLookup } = await import("virtual:use-client-lookup.js");
         const moduleFn = useClientLookup[id];
         if (!moduleFn) {
             throw new Error(`(client) No module found for '${id}' in module lookup for "use client" directive`);
@@ -14,7 +16,7 @@ export const loadModule = memoize(async (id) => {
     }
 });
 // context(justinvdm, 2 Dec 2024): re memoize(): React relies on the same promise instance being returned for the same id
-export const clientWebpackRequire = memoize(async (id) => {
+export const clientWebpackRequire = memoizeOnId(async (id) => {
     const [file, name] = id.split("#");
     const promisedModule = loadModule(file);
     const promisedComponent = promisedModule.then((module) => module[name]);
@@ -23,7 +25,6 @@ export const clientWebpackRequire = memoize(async (id) => {
         const awaitedComponent = await promisedComponent;
         return { [id]: awaitedComponent };
     }
-    const { ClientOnly } = await import("./ClientOnly");
     const promisedDefault = promisedComponent.then((Component) => ({
         default: Component,
     }));

package/dist/runtime/imports/ssr.d.ts

@@ -1,5 +1,5 @@
-export declare const ssrLoadModule: ((id: string) => Promise<any>) & import("lodash").MemoizedFunction;
+export declare const ssrLoadModule: (id: string) => Promise<any>;
 export declare const ssrGetModuleExport: (id: string) => Promise<any>;
-export declare const ssrWebpackRequire: ((id: string) => Promise<{
+export declare const ssrWebpackRequire: (id: string) => Promise<{
     [x: string]: any;
-}>) & import("lodash").MemoizedFunction;
+}>;

package/dist/runtime/imports/ssr.js

@@ -1,5 +1,5 @@
-import memoize from "lodash/memoize";
-export const ssrLoadModule = memoize(async (id) => {
+import { memoizeOnId } from "../lib/memoizeOnId";
+export const ssrLoadModule = memoizeOnId(async (id) => {
     const { useClientLookup } = await import("virtual:use-client-lookup.js");
     const moduleFn = useClientLookup[id];
     if (!moduleFn) {
@@ -13,7 +13,7 @@ export const ssrGetModuleExport = async (id) => {
     return module[name];
 };
 // context(justinvdm, 2 Dec 2024): re memoize(): React relies on the same promise instance being returned for the same id
-export const ssrWebpackRequire = memoize(async (id) => {
+export const ssrWebpackRequire = memoizeOnId(async (id) => {
     const [file, name] = id.split("#");
     const module = await ssrLoadModule(file);
     return { [id]: module[name] };

package/dist/runtime/imports/worker.d.ts

@@ -1,5 +1,5 @@
-export declare const loadServerModule: ((id: string) => Promise<any>) & import("lodash").MemoizedFunction;
+export declare const loadServerModule: (id: string) => Promise<any>;
 export declare const getServerModuleExport: (id: string) => Promise<any>;
-export declare const ssrWebpackRequire: ((id: string) => Promise<{
+export declare const ssrWebpackRequire: (id: string) => Promise<{
     [x: string]: any;
-}>) & import("lodash").MemoizedFunction;
+}>;

package/dist/runtime/imports/worker.js

@@ -1,7 +1,7 @@
-import memoize from "lodash/memoize";
 import { requestInfo } from "../requestInfo/worker";
 import { ssrWebpackRequire as baseSsrWebpackRequire } from "rwsdk/__ssr_bridge";
-export const loadServerModule = memoize(async (id) => {
+import { memoizeOnId } from "../lib/memoizeOnId";
+export const loadServerModule = memoizeOnId(async (id) => {
     const { useServerLookup } = await import("virtual:use-server-lookup.js");
     const moduleFn = useServerLookup[id];
     if (!moduleFn) {
@@ -14,7 +14,7 @@ export const getServerModuleExport = async (id) => {
     const module = await loadServerModule(file);
     return module[name];
 };
-export const ssrWebpackRequire = memoize(async (id) => {
+export const ssrWebpackRequire = memoizeOnId(async (id) => {
     if (!requestInfo.rw.ssr) {
         return { [id]: () => null };
     }

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

@@ -1,2 +1,11 @@
-import { type RequestInfo } from "../requestInfo/types";
-export declare const getManifest: (requestInfo: RequestInfo) => Promise<Record<string, any>>;
+export type Manifest = Record<string, ManifestChunk>;
+export interface ManifestChunk {
+    file: string;
+    src?: string;
+    isEntry?: boolean;
+    isDynamicEntry?: boolean;
+    imports?: string[];
+    css?: string[];
+    assets?: string[];
+}
+export declare const getManifest: () => Promise<Manifest>;

package/dist/runtime/lib/manifest.js

@@ -1,5 +1,5 @@
 let manifest;
-export const getManifest = async (requestInfo) => {
+export const getManifest = async () => {
     if (manifest) {
         return manifest;
     }

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

@@ -0,0 +1 @@
+export declare const memoizeOnId: <Result>(fn: (id: string) => Result) => (id: string) => Result;

package/dist/runtime/lib/memoizeOnId.js

@@ -0,0 +1,11 @@
+export const memoizeOnId = (fn) => {
+    const hasOwnProperty = Object.prototype.hasOwnProperty;
+    const results = {};
+    const memoizedFn = (id) => {
+        if (hasOwnProperty.call(results, id)) {
+            return results[id];
+        }
+        return (results[id] = fn(id));
+    };
+    return memoizedFn;
+};

package/dist/runtime/lib/realtime/client.d.ts

@@ -1,4 +1,4 @@
-import { type Transport } from "../../client";
+import { type Transport } from "../../client/types";
 export declare const initRealtimeClient: ({ key, handleResponse, }?: {
     key?: string;
     handleResponse?: (response: Response) => boolean;

package/dist/runtime/lib/realtime/client.js

@@ -1,4 +1,4 @@
-import { initClient } from "../../client";
+import { initClient } from "../../client/client";
 import { createFromReadableStream } from "react-server-dom-webpack/client.browser";
 import { MESSAGE_TYPE } from "./shared";
 import { packMessage, unpackMessage, } from "./protocol";

package/dist/runtime/register/ssr.d.ts

@@ -1,3 +1,3 @@
-export declare const loadServerModule: ((id: string) => Promise<any>) & import("lodash").MemoizedFunction;
+export declare const loadServerModule: (id: string) => Promise<any>;
 export declare const getServerModuleExport: (id: string) => Promise<any>;
 export declare const createServerReference: (id: string, name: string) => any;

package/dist/runtime/register/ssr.js

@@ -1,6 +1,6 @@
-import memoize from "lodash/memoize";
 import { createServerReference as baseCreateServerReference } from "react-server-dom-webpack/client.edge";
-export const loadServerModule = memoize(async (id) => {
+import { memoizeOnId } from "../lib/memoizeOnId";
+export const loadServerModule = memoizeOnId(async (id) => {
     const { useServerLookup } = await import("virtual:use-server-lookup.js");
     const moduleFn = useServerLookup[id];
     if (!moduleFn) {

package/dist/runtime/render/preloads.d.ts

@@ -0,0 +1,6 @@
+import type { RequestInfo } from "../requestInfo/types.js";
+import type { Manifest, ManifestChunk } from "../lib/manifest.js";
+export declare function findScriptForModule(id: string, manifest: Manifest): ManifestChunk | undefined;
+export declare const Preloads: ({ requestInfo }: {
+    requestInfo: RequestInfo;
+}) => import("react/jsx-runtime.js").JSX.Element;

package/dist/runtime/render/preloads.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { use } from "react";
+import { getManifest } from "../lib/manifest.js";
+export function findScriptForModule(id, manifest) {
+    const visited = new Set();
+    function find(id) {
+        if (visited.has(id)) {
+            return;
+        }
+        visited.add(id);
+        const manifestEntry = manifest[id];
+        if (!manifestEntry) {
+            return;
+        }
+        if (manifestEntry.isEntry || manifestEntry.isDynamicEntry) {
+            return manifestEntry;
+        }
+        if (manifestEntry.imports) {
+            for (const dep of manifestEntry.imports) {
+                const entry = find(dep);
+                if (entry) {
+                    return entry;
+                }
+            }
+        }
+        return;
+    }
+    return find(id);
+}
+export const Preloads = ({ requestInfo }) => {
+    const manifest = use(getManifest());
+    const allScripts = new Set();
+    for (const scriptId of requestInfo.rw.scriptsToBeLoaded) {
+        const script = findScriptForModule(scriptId, manifest);
+        if (script) {
+            allScripts.add(script.file);
+        }
+    }
+    return (_jsx(_Fragment, { children: Array.from(allScripts).map((href) => (_jsx("link", { rel: "modulepreload", href: href }, href))) }));
+};

package/dist/runtime/render/renderRscThenableToHtmlStream.js

@@ -1,12 +1,13 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { use } from "react";
 import { renderToReadableStream } from "react-dom/server.edge";
+import { Preloads } from "./preloads.js";
 import { Stylesheets } from "./stylesheets.js";
 export const renderRscThenableToHtmlStream = async ({ thenable, Document, requestInfo, shouldSSR, onError, }) => {
     const Component = () => {
         const RscApp = () => {
             const node = use(thenable).node;
-            return (_jsxs(_Fragment, { children: [_jsx(Stylesheets, { requestInfo: requestInfo }), _jsx("div", { id: "hydrate-root", children: node })] }));
+            return (_jsxs(_Fragment, { children: [_jsx(Stylesheets, { requestInfo: requestInfo }), _jsx(Preloads, { requestInfo: requestInfo }), _jsx("div", { id: "hydrate-root", children: node })] }));
         };
         // todo(justinvdm, 18 Jun 2025): We can build on this later to allow users
         // surface context. e.g:

package/dist/runtime/render/stylesheets.js

@@ -23,7 +23,7 @@ const findCssForModule = (scriptId, manifest) => {
     return Array.from(css);
 };
 export const Stylesheets = ({ requestInfo }) => {
-    const manifest = use(getManifest(requestInfo));
+    const manifest = use(getManifest());
     const allStylesheets = new Set();
     for (const scriptId of requestInfo.rw.scriptsToBeLoaded) {
         const css = findCssForModule(scriptId, manifest);

package/dist/runtime/requestInfo/types.d.ts

@@ -9,5 +9,7 @@ export interface RequestInfo<Params = any, AppContext = DefaultAppContext> {
     headers: Headers;
     rw: RwContext;
     cf: ExecutionContext;
-    response: ResponseInit;
+    response: ResponseInit & {
+        headers: Headers;
+    };
 }

package/dist/runtime/worker.js

@@ -169,7 +169,7 @@ export const defineApp = (routes) => {
                 if (e instanceof Response) {
                     return e;
                 }
-                console.error("Unhandled error", e);
+                console.error("rwsdk: Received an unhandled error:\n\n%s", e);
                 throw e;
             }
         },

package/dist/vite/miniflareHMRPlugin.mjs

@@ -66,6 +66,9 @@ export const miniflareHMRPlugin = (givenOptions) => [
             };
         },
         async hotUpdate(ctx) {
+            if (ctx.file.includes(".wrangler")) {
+                return;
+            }
             if (hasErrored) {
                 const shortName = getShortName(ctx.file, ctx.server.config.root);
                 this.environment.logger.info(`${colors.cyan(`attempting to recover from error`)}: update to ${colors.dim(shortName)}`, {

package/package.json

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