rwsdk 0.1.0-alpha.7 → 0.1.0-alpha.9

package/dist/runtime/client.js

@@ -43,8 +43,7 @@ export const initClient = async ({ transport = fetchTransport, } = {}) => {
     }
     const React = await import("react");
     const { hydrateRoot } = await import("react-dom/client");
-    // @ts-ignore: todo(peterp, 2024-11-27): Type these properly.
-    const { createFromReadableStream, createFromFetch, encodeReply } = await import("react-server-dom-webpack/client.browser");
+    const { createFromReadableStream } = await import("react-server-dom-webpack/client.browser");
     const { rscStream } = await import("rsc-html-stream/client");
     let rscPayload;
     rscPayload ??= createFromReadableStream(rscStream, {
@@ -59,7 +58,7 @@ export const initClient = async ({ transport = fetchTransport, } = {}) => {
     hydrateRoot(rootEl, _jsx(Content, {}));
     if (import.meta.hot) {
         import.meta.hot.on("rsc:update", (e) => {
-            console.log("[rw-sdk] hot update", e.file);
+            console.log("[rwsdk] hot update", e.file);
             callServer("__rsc_hot_update", [e.file]);
         });
     }

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

@@ -1,3 +1,3 @@
 import type { RealtimeDurableObject } from "./durableObject";
 export { renderRealtimeClients } from "./renderRealtimeClients";
-export declare const realtimeRoute: (getDurableObjectNamespace: (env: Cloudflare.Env) => DurableObjectNamespace<RealtimeDurableObject>) => import("../router").RouteDefinition;
+export declare const realtimeRoute: (getDurableObjectNamespace: (env: Cloudflare.Env) => DurableObjectNamespace<RealtimeDurableObject>) => import("../router").RouteDefinition<import("../../requestInfo/types").RequestInfo<any, import("../../requestInfo/types").DefaultAppContext>>;

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

@@ -1,51 +1,51 @@
 import React from "react";
 import { RequestInfo } from "../requestInfo/types";
-export type DocumentProps = RequestInfo & {
+export type DocumentProps<T extends RequestInfo = RequestInfo> = T & {
     children: React.ReactNode;
 };
-export type LayoutProps = {
+export type LayoutProps<T extends RequestInfo = RequestInfo> = {
     children?: React.ReactNode;
-    requestInfo?: RequestInfo;
+    requestInfo?: T;
 };
 export type RwContext = {
     nonce: string;
-    Document: React.FC<DocumentProps>;
+    Document: React.FC<DocumentProps<any>>;
     rscPayload: boolean;
-    layouts?: React.FC<LayoutProps>[];
+    layouts?: React.FC<LayoutProps<any>>[];
 };
-export type RouteMiddleware = (requestInfo: RequestInfo) => Response | Promise<Response> | void | Promise<void> | Promise<Response | void>;
-type RouteFunction = (requestInfo: RequestInfo) => Response | Promise<Response>;
+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>;
 type MaybePromise<T> = T | Promise<T>;
-type RouteComponent = (requestInfo: RequestInfo) => MaybePromise<React.JSX.Element | Response>;
-type RouteHandler = RouteFunction | RouteComponent | [...RouteMiddleware[], RouteFunction | RouteComponent];
-export type Route = RouteMiddleware | RouteDefinition | Array<Route>;
-export type RouteDefinition = {
+type RouteComponent<T extends RequestInfo = RequestInfo> = (requestInfo: T) => MaybePromise<React.JSX.Element | Response>;
+type RouteHandler<T extends RequestInfo = RequestInfo> = RouteFunction<T> | RouteComponent<T> | [...RouteMiddleware<T>[], RouteFunction<T> | RouteComponent<T>];
+export type Route<T extends RequestInfo = RequestInfo> = RouteMiddleware<T> | RouteDefinition<T> | Array<Route<T>>;
+export type RouteDefinition<T extends RequestInfo = RequestInfo> = {
     path: string;
-    handler: RouteHandler;
-    layouts?: React.FC<LayoutProps>[];
+    handler: RouteHandler<T>;
+    layouts?: React.FC<LayoutProps<T>>[];
 };
-export declare function matchPath(routePath: string, requestPath: string): RequestInfo["params"] | null;
-export declare function defineRoutes(routes: Route[]): {
-    routes: Route[];
+export declare function matchPath<T extends RequestInfo = RequestInfo>(routePath: string, requestPath: string): T["params"] | null;
+export declare function defineRoutes<T extends RequestInfo = RequestInfo>(routes: Route<T>[]): {
+    routes: Route<T>[];
     handle: ({ request, renderPage, getRequestInfo, onError, runWithRequestInfoOverrides, }: {
         request: Request;
-        renderPage: (requestInfo: RequestInfo, Page: React.FC, onError: (error: unknown) => void) => Promise<Response>;
-        getRequestInfo: () => RequestInfo;
+        renderPage: (requestInfo: T, Page: React.FC, onError: (error: unknown) => void) => Promise<Response>;
+        getRequestInfo: () => T;
         onError: (error: unknown) => void;
-        runWithRequestInfoOverrides: <Result>(overrides: Partial<RequestInfo>, fn: () => Promise<Result>) => Promise<Result>;
+        runWithRequestInfoOverrides: <Result>(overrides: Partial<T>, fn: () => Promise<Result>) => Promise<Result>;
     }) => Response | Promise<Response>;
 };
-export declare function route(path: string, handler: RouteHandler): RouteDefinition;
-export declare function index(handler: RouteHandler): RouteDefinition;
-export declare function prefix(prefixPath: string, routes: Route[]): Route[];
-export declare function layout(LayoutComponent: React.FC<LayoutProps>, routes: Route[]): Route[];
-export declare function render(Document: React.FC<DocumentProps>, routes: Route[], 
+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 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>[], 
 /**
  * @param options - Configuration options for rendering.
  * @param options.rscPayload - Toggle the RSC payload that's appended to the Document. Disabling this will mean that interactivity no longer works.
  */
 options?: {
     rscPayload: boolean;
-}): Route[];
+}): Route<T>[];
 export declare const isClientReference: (Component: React.FC<any>) => boolean;
 export {};

package/dist/runtime/worker.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
+import { RequestInfo, DefaultAppContext } from "./requestInfo/types";
 import { Route } from "./lib/router";
 declare global {
     type Env = {
@@ -6,7 +7,7 @@ declare global {
         DB: D1Database;
     };
 }
-export declare const defineApp: (routes: Route[]) => {
+export declare const defineApp: <T extends RequestInfo = RequestInfo<any, DefaultAppContext>>(routes: Route<T>[]) => {
     fetch: (request: Request, env: Env, cf: ExecutionContext) => Promise<Response>;
 };
 export declare const SmokeTestWrapper: React.FC<{

package/dist/runtime/worker.js

@@ -31,7 +31,8 @@ export const defineApp = (routes) => {
             }
             try {
                 const url = new URL(request.url);
-                const isRSCRequest = url.searchParams.has("__rsc");
+                const isRSCRequest = url.searchParams.has("__rsc") ||
+                    request.headers.get("accept")?.includes("text/x-component");
                 const isSmokeTest = url.searchParams.has("__smoke_test");
                 const userHeaders = new Headers();
                 const rw = {
@@ -50,8 +51,7 @@ export const defineApp = (routes) => {
                 const createPageElement = (requestInfo, Page) => {
                     let pageElement;
                     if (isClientReference(Page)) {
-                        const { ctx, params } = requestInfo;
-                        // context(justinvdm, 25 Feb 2025): If the page is a client reference, we need to avoid passing
+                        const { ctx, params } = requestInfo; // context(justinvdm, 25 Feb 2025): If the page is a client reference, we need to avoid passing
                         // down props the client shouldn't get (e.g. env). For safety, we pick the allowed props explicitly.
                         pageElement = _jsx(Page, { ctx: ctx, params: params });
                     }
@@ -122,7 +122,7 @@ export const defineApp = (routes) => {
                         resolve(await router.handle({
                             request,
                             renderPage,
-                            getRequestInfo,
+                            getRequestInfo: getRequestInfo,
                             runWithRequestInfoOverrides,
                             onError: reject,
                         }));

package/dist/vite/createDirectiveLookupPlugin.mjs

@@ -135,6 +135,14 @@ export const createDirectiveLookupPlugin = async ({ projectRootDir, files, confi
                         aliases.push({ find: findRegex, replacement: actualFilePath });
                         verboseLog("Added alias for `node_modules` module matching directive in env=%s: %s -> %s", env, file, actualFilePath);
                     }
+                    else {
+                        verboseLog("Adding to optimizeDeps.entries: %s", actualFilePath);
+                        const entries = Array.isArray(viteConfig.optimizeDeps.entries)
+                            ? viteConfig.optimizeDeps.entries
+                            : [].concat(viteConfig.optimizeDeps.entries ?? []);
+                        viteConfig.optimizeDeps.entries = entries;
+                        entries.push(actualFilePath);
+                    }
                 }
                 log("Environment configuration complete for env=%s with %d optimizeDeps includes and %d aliases", env, Array.from(files).filter((f) => f.includes("/node_modules/")).length, files.size);
             }

package/dist/vite/directivesPlugin.mjs

@@ -1,9 +1,31 @@
+import path from "node:path";
+import fs from "node:fs/promises";
 import debug from "debug";
 import { transformClientComponents } from "./transformClientComponents.mjs";
 import { transformServerFunctions } from "./transformServerFunctions.mjs";
 import { normalizeModulePath } from "./normalizeModulePath.mjs";
 const log = debug("rwsdk:vite:rsc-directives-plugin");
 const verboseLog = debug("verbose:rwsdk:vite:rsc-directives-plugin");
+const getLoader = (filePath) => {
+    const ext = path.extname(filePath).slice(1);
+    switch (ext) {
+        case "mjs":
+        case "cjs":
+            return "js";
+        case "mts":
+        case "cts":
+            return "ts";
+        case "jsx":
+            return "jsx";
+        case "tsx":
+            return "tsx";
+        case "ts":
+            return "ts";
+        case "js":
+        default:
+            return "js";
+    }
+};
 export const directivesPlugin = ({ projectRootDir, clientFiles, serverFiles, }) => ({
     name: "rwsdk:rsc-directives",
     async transform(code, id) {
@@ -39,10 +61,8 @@ export const directivesPlugin = ({ projectRootDir, clientFiles, serverFiles, })
             name: "rsc-directives-esbuild-transform",
             setup(build) {
                 log("Setting up esbuild plugin for environment: %s", env);
-                build.onLoad({ filter: /.*\.js$/ }, async (args) => {
+                build.onLoad({ filter: /\.(js|ts|jsx|tsx|mts|mjs|cjs)$/ }, async (args) => {
                     verboseLog("Esbuild onLoad called for path=%s", args.path);
-                    const fs = await import("node:fs/promises");
-                    const path = await import("node:path");
                     let code;
                     try {
                         code = await fs.readFile(args.path, "utf-8");
@@ -60,7 +80,7 @@ export const directivesPlugin = ({ projectRootDir, clientFiles, serverFiles, })
                         log("Esbuild client component transformation successful for path=%s", args.path);
                         return {
                             contents: clientResult.code,
-                            loader: path.extname(args.path).slice(1),
+                            loader: getLoader(args.path),
                         };
                     }
                     const serverResult = transformServerFunctions(code, normalizeModulePath(projectRootDir, args.path), env, serverFiles);
@@ -68,7 +88,7 @@ export const directivesPlugin = ({ projectRootDir, clientFiles, serverFiles, })
                         log("Esbuild server function transformation successful for path=%s", args.path);
                         return {
                             contents: serverResult.code,
-                            loader: path.extname(args.path).slice(1),
+                            loader: getLoader(args.path),
                         };
                     }
                     verboseLog("Esbuild no transformation applied for path=%s", args.path);

package/package.json

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