rwsdk 0.1.26 → 0.2.0-alpha.0

package/dist/vite/manifestPlugin.mjs

@@ -0,0 +1,151 @@
+import { readFile } from "node:fs/promises";
+import debug from "debug";
+import { normalizeModulePath } from "../lib/normalizeModulePath.mjs";
+const log = debug("rwsdk:vite:manifest-plugin");
+const virtualModuleId = "virtual:rwsdk:manifest.js";
+const resolvedVirtualModuleId = "\0" + virtualModuleId;
+const getCssForModule = (server, moduleId, css) => {
+    const stack = [moduleId];
+    const visited = new Set();
+    while (stack.length > 0) {
+        const currentModuleId = stack.pop();
+        if (visited.has(currentModuleId)) {
+            continue;
+        }
+        visited.add(currentModuleId);
+        const moduleNode = server.environments.client.moduleGraph.getModuleById(currentModuleId);
+        if (!moduleNode) {
+            continue;
+        }
+        for (const importedModule of moduleNode.importedModules) {
+            if (importedModule.url.endsWith(".css")) {
+                const absolutePath = importedModule.file;
+                css.add({
+                    url: importedModule.url,
+                    // The `ssrTransformResult` has the CSS content, because the default
+                    // transform for CSS is to a string of the CSS content.
+                    content: importedModule.ssrTransformResult?.code ?? "",
+                    absolutePath,
+                });
+            }
+            if (importedModule.id) {
+                stack.push(importedModule.id);
+            }
+        }
+    }
+};
+export const manifestPlugin = ({ manifestPath, }) => {
+    let isBuild = false;
+    let root;
+    return {
+        name: "rwsdk:manifest",
+        configResolved(config) {
+            log("Config resolved, command=%s", config.command);
+            isBuild = config.command === "build";
+            root = config.root;
+        },
+        resolveId(id) {
+            if (id === virtualModuleId) {
+                process.env.VERBOSE && log("Resolving virtual module id=%s", id);
+                return resolvedVirtualModuleId;
+            }
+        },
+        async load(id) {
+            if (id === resolvedVirtualModuleId) {
+                process.env.VERBOSE && log("Loading virtual module id=%s", id);
+                if (!isBuild) {
+                    process.env.VERBOSE && log("Not a build, returning empty manifest");
+                    return `export default {}`;
+                }
+                log("Reading manifest from %s", manifestPath);
+                const manifestContent = await readFile(manifestPath, "utf-8");
+                const manifest = JSON.parse(manifestContent);
+                const normalizedManifest = {};
+                for (const key in manifest) {
+                    const normalizedKey = normalizeModulePath(key, root, {
+                        isViteStyle: false,
+                    });
+                    const entry = manifest[key];
+                    delete manifest[key];
+                    normalizedManifest[normalizedKey] = entry;
+                    entry.file = normalizeModulePath(entry.file, root, {
+                        isViteStyle: false,
+                    });
+                    const normalizedCss = [];
+                    if (entry.css) {
+                        for (const css of entry.css) {
+                            normalizedCss.push(normalizeModulePath(css, root, {
+                                isViteStyle: false,
+                            }));
+                        }
+                        entry.css = normalizedCss;
+                    }
+                }
+                return `export default ${JSON.stringify(normalizedManifest)}`;
+            }
+        },
+        configEnvironment(name, config) {
+            if (name !== "worker" && name !== "ssr") {
+                return;
+            }
+            log("Configuring environment: name=%s", name);
+            config.optimizeDeps ??= {};
+            config.optimizeDeps.esbuildOptions ??= {};
+            config.optimizeDeps.esbuildOptions.plugins ??= [];
+            config.optimizeDeps.esbuildOptions.plugins.push({
+                name: "rwsdk:manifest:esbuild",
+                setup(build) {
+                    log("Setting up esbuild plugin for environment: %s", name);
+                    build.onResolve({ filter: /^virtual:rwsdk:manifest\.js$/ }, () => {
+                        log("Resolving virtual manifest module in esbuild");
+                        return {
+                            path: "virtual:rwsdk:manifest.js",
+                            external: true,
+                        };
+                    });
+                },
+            });
+        },
+        configureServer(server) {
+            log("Configuring server middleware for manifest");
+            server.middlewares.use("/__rwsdk_manifest", async (req, res, next) => {
+                log("Manifest request received: %s", req.url);
+                try {
+                    const url = new URL(req.url, `http://${req.headers.host}`);
+                    const scripts = JSON.parse(url.searchParams.get("scripts") || "[]");
+                    process.env.VERBOSE && log("Transforming scripts: %o", scripts);
+                    for (const script of scripts) {
+                        await server.environments.client.transformRequest(script);
+                    }
+                    const manifest = {};
+                    log("Building manifest from module graph");
+                    for (const file of server.environments.client.moduleGraph.fileToModulesMap.keys()) {
+                        const modules = server.environments.client.moduleGraph.getModulesByFile(file);
+                        if (!modules) {
+                            continue;
+                        }
+                        for (const module of modules) {
+                            if (module.file) {
+                                const css = new Set();
+                                getCssForModule(server, module.id, css);
+                                manifest[normalizeModulePath(module.file, server.config.root)] =
+                                    {
+                                        file: module.url,
+                                        css: Array.from(css),
+                                    };
+                            }
+                        }
+                    }
+                    log("Manifest built successfully");
+                    process.env.VERBOSE && log("Manifest: %o", manifest);
+                    res.setHeader("Content-Type", "application/json");
+                    res.end(JSON.stringify(manifest));
+                }
+                catch (e) {
+                    log("Error building manifest: %o", e);
+                    next(e);
+                }
+            });
+        },
+    };
+};

package/dist/vite/redwoodPlugin.mjs

@@ -22,6 +22,7 @@ import { prismaPlugin } from "./prismaPlugin.mjs";
 import { ssrBridgePlugin } from "./ssrBridgePlugin.mjs";
 import { hasPkgScript } from "../lib/hasPkgScript.mjs";
 import { devServerTimingPlugin } from "./devServerTimingPlugin.mjs";
+import { manifestPlugin } from "./manifestPlugin.mjs";
 const determineWorkerEntryPathname = async (projectRootDir, workerConfigPath, options) => {
     if (options.entry?.worker) {
         return resolve(projectRootDir, options.entry.worker);
@@ -101,6 +102,9 @@ export const redwoodPlugin = async (options = {}) => {
         transformJsxScriptTagsPlugin({
             manifestPath: resolve(projectRootDir, "dist", "client", ".vite", "manifest.json"),
         }),
+        manifestPlugin({
+            manifestPath: resolve(projectRootDir, "dist", "client", ".vite", "manifest.json"),
+        }),
         moveStaticAssetsPlugin({ rootDir: projectRootDir }),
         prismaPlugin({ projectRootDir }),
     ];

package/dist/vite/ssrBridgePlugin.mjs

@@ -55,6 +55,11 @@ export const ssrBridgePlugin = ({ clientFiles, serverFiles, }) => {
                 // SSR modules, so we return the virtual id so that the dynamic loading
                 // can happen in load()
                 if (id.startsWith(VIRTUAL_SSR_PREFIX)) {
+                    if (id.endsWith(".css")) {
+                        const newId = id + ".js";
+                        log("Virtual CSS module, adding .js suffix. old: %s, new: %s", id, newId);
+                        return newId;
+                    }
                     log("Returning virtual SSR id for dev: %s", id);
                     return id;
                 }
@@ -86,20 +91,24 @@ export const ssrBridgePlugin = ({ clientFiles, serverFiles, }) => {
             if (id.startsWith(VIRTUAL_SSR_PREFIX) &&
                 this.environment.name === "worker") {
                 const realId = id.slice(VIRTUAL_SSR_PREFIX.length);
-                log("Virtual SSR module load: id=%s, realId=%s", id, realId);
+                const idForFetch = realId.endsWith(".css.js")
+                    ? realId.slice(0, -3)
+                    : realId;
+                log("Virtual SSR module load: id=%s, realId=%s, idForFetch=%s", id, realId, idForFetch);
                 if (isDev) {
-                    log("Dev mode: fetching SSR module for realPath=%s", realId);
-                    const result = await devServer?.environments.ssr.fetchModule(realId);
+                    log("Dev mode: fetching SSR module for realPath=%s", idForFetch);
+                    const result = await devServer?.environments.ssr.fetchModule(idForFetch);
                     process.env.VERBOSE &&
-                        log("Fetch module result: id=%s, result=%O", realId, result);
+                        log("Fetch module result: id=%s, result=%O", idForFetch, result);
                     const code = "code" in result ? result.code : undefined;
-                    if (realId.endsWith(".css")) {
+                    if (idForFetch.endsWith(".css") &&
+                        !idForFetch.endsWith(".module.css")) {
                         process.env.VERBOSE &&
-                            log("Not a JS file, returning code: %s", code);
-                        return code ?? "";
+                            log("Plain CSS file, returning empty module for %s", idForFetch);
+                        return "export default {};";
                     }
                     log("Fetched SSR module code length: %d", code?.length || 0);
-                    const { imports, dynamicImports } = findSsrImportSpecifiers(realId, code || "", log);
+                    const { imports, dynamicImports } = findSsrImportSpecifiers(idForFetch, code || "", log);
                     const allSpecifiers = [
                         ...new Set([...imports, ...dynamicImports]),
                     ].map((id) => id.startsWith("/@id/") ? id.slice("/@id/".length) : id);

package/dist/vite/transformJsxScriptTagsPlugin.mjs

@@ -1,6 +1,8 @@
 import { Project, Node, SyntaxKind } from "ts-morph";
 import { readFile } from "node:fs/promises";
 import { pathExists } from "fs-extra";
+import debug from "debug";
+const log = debug("rwsdk:vite:transform-jsx-script-tags");
 let manifestCache;
 const readManifest = async (manifestPath) => {
     if (manifestCache === undefined) {
@@ -34,6 +36,7 @@ function transformScriptImports(scriptContent, manifest) {
         const wrappedContent = `function __wrapper() {${scriptContent}}`;
         const scriptFile = scriptProject.createSourceFile("script.js", wrappedContent);
         let hasChanges = false;
+        const entryPoints = [];
         // Find all CallExpressions that look like import("path")
         scriptFile
             .getDescendantsOfKind(SyntaxKind.CallExpression)
@@ -49,10 +52,12 @@ function transformScriptImports(scriptContent, manifest) {
                 if (args.length > 0 && Node.isStringLiteral(args[0])) {
                     const importPath = args[0].getLiteralValue();
                     if (importPath.startsWith("/")) {
+                        log("Found dynamic import with root-relative path: %s", importPath);
+                        entryPoints.push(importPath);
                         const path = importPath.slice(1); // Remove leading slash
                         if (manifest[path]) {
-                            const transformedPath = manifest[path].file;
-                            args[0].replaceWithText(`"/${transformedPath}"`);
+                            const transformedSrc = `/${manifest[path].file}`;
+                            args[0].setLiteralValue(transformedSrc);
                             hasChanges = true;
                         }
                     }
@@ -66,15 +71,15 @@ function transformScriptImports(scriptContent, manifest) {
             const startPos = fullText.indexOf("{") + 1;
             const endPos = fullText.lastIndexOf("}");
             const transformedContent = fullText.substring(startPos, endPos);
-            return { content: transformedContent, hasChanges: true };
+            return { content: transformedContent, hasChanges: true, entryPoints };
         }
         // Return the original content when no changes are made
-        return { content: scriptContent, hasChanges: false };
+        return { content: scriptContent, hasChanges: false, entryPoints };
     }
     catch (error) {
         // If parsing fails, fall back to the original content
         console.warn("Failed to parse inline script content:", error);
-        return { content: undefined, hasChanges: false };
+        return { content: undefined, hasChanges: false, entryPoints: [] };
     }
 }
 export async function transformJsxScriptTagsCode(code, manifest = {}) {
@@ -86,7 +91,7 @@ export async function transformJsxScriptTagsCode(code, manifest = {}) {
     const project = new Project({ useInMemoryFileSystem: true });
     const sourceFile = project.createSourceFile("temp.tsx", code);
     let hasModifications = false;
-    let needsRequestInfoImport = false;
+    const needsRequestInfoImportRef = { value: false };
     // Check for existing imports up front
     let hasRequestInfoImport = false;
     let sdkWorkerImportDecl;
@@ -124,6 +129,7 @@ export async function transformJsxScriptTagsCode(code, manifest = {}) {
         if (!Node.isStringLiteral(elementType))
             return;
         const tagName = elementType.getLiteralValue();
+        const entryPoints = [];
         // Process script and link tags
         if (tagName === "script" || tagName === "link") {
             // Second argument should be the props object
@@ -158,25 +164,14 @@ export async function transformJsxScriptTagsCode(code, manifest = {}) {
                             if (Node.isStringLiteral(initializer) ||
                                 Node.isNoSubstitutionTemplateLiteral(initializer)) {
                                 const srcValue = initializer.getLiteralValue();
-                                if (srcValue.startsWith("/") && manifest[srcValue.slice(1)]) {
+                                if (srcValue.startsWith("/")) {
+                                    entryPoints.push(srcValue);
                                     const path = srcValue.slice(1); // Remove leading slash
-                                    const transformedSrc = manifest[path].file;
-                                    const originalText = initializer.getText();
-                                    const isTemplateLiteral = Node.isNoSubstitutionTemplateLiteral(initializer);
-                                    const quote = isTemplateLiteral
-                                        ? "`"
-                                        : originalText.charAt(0);
-                                    // Preserve the original quote style
-                                    if (isTemplateLiteral) {
-                                        initializer.replaceWithText(`\`/${transformedSrc}\``);
+                                    if (manifest[path]) {
+                                        const transformedSrc = `/${manifest[path].file}`;
+                                        initializer.setLiteralValue(transformedSrc);
+                                        hasModifications = true;
                                     }
-                                    else if (quote === '"') {
-                                        initializer.replaceWithText(`"/${transformedSrc}"`);
-                                    }
-                                    else {
-                                        initializer.replaceWithText(`'/${transformedSrc}'`);
-                                    }
-                                    hasModifications = true;
                                 }
                             }
                         }
@@ -188,8 +183,9 @@ export async function transformJsxScriptTagsCode(code, manifest = {}) {
                             hasStringLiteralChildren = true;
                             const scriptContent = initializer.getLiteralValue();
                             // Transform import statements in script content using ts-morph
-                            const { content: transformedContent, hasChanges } = transformScriptImports(scriptContent, manifest);
-                            if (hasChanges && transformedContent) {
+                            const { content: transformedContent, hasChanges: contentHasChanges, entryPoints: dynamicEntryPoints, } = transformScriptImports(scriptContent, manifest);
+                            entryPoints.push(...dynamicEntryPoints);
+                            if (contentHasChanges && transformedContent) {
                                 // Get the raw text with quotes to determine the exact format
                                 const isTemplateLiteral = Node.isNoSubstitutionTemplateLiteral(initializer);
                                 if (isTemplateLiteral) {
@@ -231,7 +227,7 @@ export async function transformJsxScriptTagsCode(code, manifest = {}) {
                         initializer: "requestInfo.rw.nonce",
                     });
                     if (!hasRequestInfoImport) {
-                        needsRequestInfoImport = true;
+                        needsRequestInfoImportRef.value = true;
                     }
                     hasModifications = true;
                 }
@@ -271,9 +267,42 @@ export async function transformJsxScriptTagsCode(code, manifest = {}) {
                 }
             }
         }
+        if (entryPoints.length > 0) {
+            log("Found %d script entry points, adding to scripts to be loaded: %o", entryPoints.length, entryPoints);
+            const sideEffects = entryPoints
+                .map((p) => `(requestInfo.rw.scriptsToBeLoaded.add("${p}"))`)
+                .join(",\n");
+            const leadingCommentRanges = callExpr.getLeadingCommentRanges();
+            const pureComment = leadingCommentRanges.find((r) => r.getText().includes("@__PURE__"));
+            const callExprText = callExpr.getText();
+            if (pureComment) {
+                const pureCommentText = pureComment.getText();
+                const newText = `(
+            ${sideEffects},
+            ${pureCommentText} ${callExprText}
+          )`;
+                const fullText = callExpr.getFullText();
+                const leadingTriviaText = fullText.substring(0, fullText.length - callExprText.length);
+                const newLeadingTriviaText = leadingTriviaText.replace(pureCommentText, "");
+                // By replacing from `getFullStart`, we remove the original node and all its leading trivia
+                // and replace it with our manually reconstructed string.
+                // This should correctly move the pure comment and preserve other comments and whitespace.
+                callExpr
+                    .getSourceFile()
+                    .replaceText([callExpr.getFullStart(), callExpr.getEnd()], newLeadingTriviaText + newText);
+            }
+            else {
+                callExpr.replaceWithText(`(
+              ${sideEffects},
+              ${callExprText}
+            )`);
+            }
+            needsRequestInfoImportRef.value = true;
+            hasModifications = true;
+        }
     });
     // Add requestInfo import if needed and not already imported
-    if (needsRequestInfoImport && hasModifications) {
+    if (needsRequestInfoImportRef.value && hasModifications) {
         if (sdkWorkerImportDecl) {
             // Module is imported but need to add requestInfo
             if (!hasRequestInfoImport) {
@@ -300,16 +329,28 @@ export async function transformJsxScriptTagsCode(code, manifest = {}) {
 export const transformJsxScriptTagsPlugin = ({ manifestPath, }) => {
     let isBuild = false;
     return {
-        name: "rwsdk:transform-jsx-script-tags",
+        name: "rwsdk:vite:transform-jsx-script-tags",
         configResolved(config) {
             isBuild = config.command === "build";
         },
-        async transform(code) {
-            if (this.environment.name !== "worker") {
-                return;
+        async transform(code, id) {
+            if (this.environment?.name === "worker" &&
+                id.endsWith(".tsx") &&
+                !id.includes("node_modules") &&
+                hasJsxFunctions(code)) {
+                const manifest = isBuild ? await readManifest(manifestPath) : {};
+                const result = await transformJsxScriptTagsCode(code, manifest);
+                if (result) {
+                    log("Transformed JSX script tags in %s", id);
+                    process.env.VERBOSE &&
+                        log("New Document code for %s:\n%s", id, result.code);
+                    return {
+                        code: result.code,
+                        map: null,
+                    };
+                }
             }
-            const manifest = isBuild ? await readManifest(manifestPath) : {};
-            return transformJsxScriptTagsCode(code, manifest);
+            return null;
         },
     };
 };

package/dist/vite/transformJsxScriptTagsPlugin.test.mjs

@@ -16,11 +16,14 @@ describe("transformJsxScriptTagsCode", () => {
         const result = await transformJsxScriptTagsCode(code, mockManifest);
         expect(result?.code).toEqual(`import { requestInfo } from "rwsdk/worker";
 
-      jsx("script", {
+      (
+              (requestInfo.rw.scriptsToBeLoaded.add("/src/client.tsx")),
+              jsx("script", {
         src: "/assets/client-a1b2c3d4.js",
         type: "module",
           nonce: requestInfo.rw.nonce
     })
+            )
     `);
     });
     it("transforms inline scripts with dynamic imports", async () => {
@@ -33,11 +36,14 @@ describe("transformJsxScriptTagsCode", () => {
         const result = await transformJsxScriptTagsCode(code, mockManifest);
         expect(result?.code).toEqual(`import { requestInfo } from "rwsdk/worker";
 
-      jsx("script", {
+      (
+              (requestInfo.rw.scriptsToBeLoaded.add("/src/client.tsx")),
+              jsx("script", {
         type: "module",
-        children: "import(\\"\/assets\/client-a1b2c3d4.js\\").then(module => { console.log(module); })",
+        children: "import('/assets/client-a1b2c3d4.js').then(module => { console.log(module); })",
           nonce: requestInfo.rw.nonce
     })
+            )
     `);
     });
     it("transforms inline scripts with type=module", async () => {
@@ -47,9 +53,12 @@ describe("transformJsxScriptTagsCode", () => {
         const result = await transformJsxScriptTagsCode(code, mockManifest);
         expect(result?.code).toEqual(`import { requestInfo } from "rwsdk/worker";
 
-      jsx("script", { type: "module", children: "import(\\"\/assets\/client-a1b2c3d4.js\\")",
+      (
+              (requestInfo.rw.scriptsToBeLoaded.add("/src/client.tsx")),
+              jsx("script", { type: "module", children: "import('/assets/client-a1b2c3d4.js')",
           nonce: requestInfo.rw.nonce
     })
+            )
     `);
     });
     it("transforms inline scripts with multiline content", async () => {
@@ -69,18 +78,21 @@ describe("transformJsxScriptTagsCode", () => {
         const result = await transformJsxScriptTagsCode(code, mockManifest);
         expect(result?.code).toEqual(`import { requestInfo } from "rwsdk/worker";
 
-      jsx("script", {
+      (
+              (requestInfo.rw.scriptsToBeLoaded.add("/src/entry.js")),
+              jsx("script", {
         type: "module",
         children: \`
           // Some comments here
           const init = async () => {
-            await import("/assets/entry-e5f6g7h8.js");
+            await import('/assets/entry-e5f6g7h8.js');
             console.log('initialized');
           };
           init();
         \`,
           nonce: requestInfo.rw.nonce
     })
+            )
     `);
     });
     it("transforms multiple imports in the same inline script", async () => {
@@ -96,14 +108,18 @@ describe("transformJsxScriptTagsCode", () => {
         const result = await transformJsxScriptTagsCode(code, mockManifest);
         expect(result?.code).toEqual(`import { requestInfo } from "rwsdk/worker";
 
-      jsx("script", {
+      (
+              (requestInfo.rw.scriptsToBeLoaded.add("/src/client.tsx")),
+(requestInfo.rw.scriptsToBeLoaded.add("/src/entry.js")),
+              jsx("script", {
         type: "module",
         children: \`
-          import("/assets/client-a1b2c3d4.js");
-          import("/assets/entry-e5f6g7h8.js");
+          import('/assets/client-a1b2c3d4.js');
+          import('/assets/entry-e5f6g7h8.js');
         \`,
           nonce: requestInfo.rw.nonce
     })
+            )
     `);
     });
     it("transforms link href attributes with preload rel", async () => {
@@ -177,9 +193,12 @@ describe("transformJsxScriptTagsCode", () => {
           jsx("body", {
             children: [
               jsx("div", { id: "root", children: props.children }),
-              jsx("script", { children: "import(\\"\/assets\/client-a1b2c3d4.js\\")",
-                  nonce: requestInfo.rw.nonce
-            })
+              (
+                              (requestInfo.rw.scriptsToBeLoaded.add("/src/client.tsx")),
+                              jsx("script", { children: "import(\\"\/assets\/client-a1b2c3d4.js\\")",
+                                  nonce: requestInfo.rw.nonce
+                            })
+                            )
             ]
           })
         ]
@@ -203,11 +222,14 @@ describe("transformJsxScriptTagsCode", () => {
         const result = await transformJsxScriptTagsCode(code, mockManifest);
         expect(result?.code).toEqual(`import { requestInfo } from "rwsdk/worker";
 
-      jsx("script", {
+      (
+              (requestInfo.rw.scriptsToBeLoaded.add("/src/non-existent.js")),
+              jsx("script", {
         src: "/src/non-existent.js",
         type: "module",
           nonce: requestInfo.rw.nonce
     })
+            )
     `);
     });
     it("adds nonce to script tags with src attribute and imports requestInfo", async () => {
@@ -220,11 +242,14 @@ describe("transformJsxScriptTagsCode", () => {
         const result = await transformJsxScriptTagsCode(code, mockManifest);
         expect(result?.code).toEqual(`import { requestInfo } from "rwsdk/worker";
 
-      jsx("script", {
+      (
+              (requestInfo.rw.scriptsToBeLoaded.add("/src/client.tsx")),
+              jsx("script", {
         src: "/assets/client-a1b2c3d4.js",
         type: "module",
           nonce: requestInfo.rw.nonce
     })
+            )
     `);
     });
     it("adds nonce to script tags with string literal children", async () => {
@@ -324,11 +349,14 @@ describe("transformJsxScriptTagsCode", () => {
         const result = await transformJsxScriptTagsCode(code);
         expect(result?.code).toEqual(`import { requestInfo } from "rwsdk/worker";
 
-      jsx("script", {
+      (
+              (requestInfo.rw.scriptsToBeLoaded.add("/src/client.tsx")),
+              jsx("script", {
         src: "/src/client.tsx",
         type: "module",
           nonce: requestInfo.rw.nonce
     })
+            )
     `);
     });
 });

package/package.json

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