A couple tweaks to rsc and give up on rendering react in tasks for now

ericallam · ericallam · commit 9396107cee03 · 2024-11-19T11:35:10.000Z
diff --git a/.vscode/launch.json b/.vscode/launch.json
@@ -45,6 +45,14 @@
       "cwd": "${workspaceFolder}/references/v3-catalog",
       "sourceMaps": true
     },
+    {
+      "type": "node-terminal",
+      "request": "launch",
+      "name": "Debug Dev Next.js Realtime",
+      "command": "pnpm exec trigger dev",
+      "cwd": "${workspaceFolder}/references/nextjs-realtime",
+      "sourceMaps": true
+    },
     {
       "type": "node-terminal",
       "request": "launch",
diff --git a/packages/react-hooks/package.json b/packages/react-hooks/package.json
@@ -74,4 +74,4 @@
   "main": "./dist/commonjs/index.js",
   "types": "./dist/commonjs/index.d.ts",
   "module": "./dist/esm/index.js"
-}
+}
diff --git a/packages/rsc/src/build.ts b/packages/rsc/src/build.ts
@@ -1,7 +1,12 @@
 import { BuildExtension } from "@trigger.dev/core/v3/build";
 import { sourceDir } from "./sourceDir.js";
 
-export function rscExtension(): BuildExtension {
+export type RSCExtensionOptions = {
+  resolveDir?: string;
+  reactDomEnvironment?: "node" | "worker" | "bun";
+};
+
+export function rscExtension(options?: RSCExtensionOptions): BuildExtension {
   return {
     name: "rsc",
     onBuildStart(context) {
@@ -10,6 +15,8 @@ export function rscExtension(): BuildExtension {
         conditions: ["react-server"],
       });
 
+      const srcDir = options?.resolveDir ?? sourceDir;
+
       context.config.build.conditions ??= [];
       context.config.build.conditions.push("react-server");
 
@@ -23,7 +30,7 @@ export function rscExtension(): BuildExtension {
 
             try {
               const resolvedPath = esmResolveSync(args.path, {
-                url: sourceDir,
+                url: srcDir,
                 conditions: ["react-server"],
               });
 
@@ -44,7 +51,7 @@ export function rscExtension(): BuildExtension {
 
             try {
               const resolvedPath = esmResolveSync(args.path, {
-                url: sourceDir,
+                url: srcDir,
                 conditions: ["react-server"],
               });
 
@@ -65,7 +72,7 @@ export function rscExtension(): BuildExtension {
 
             try {
               const resolvedPath = esmResolveSync(args.path, {
-                url: sourceDir,
+                url: srcDir,
                 conditions: ["react-server"],
               });
 
@@ -82,12 +89,15 @@ export function rscExtension(): BuildExtension {
           });
 
           build.onResolve({ filter: /^react-dom\/server$/ }, (args) => {
-            context.logger.debug("Resolving react-dom/server", { args });
+            const condition =
+              context.config.runtime === "bun" ? "bun" : options?.reactDomEnvironment ?? "node";
+
+            context.logger.debug("Resolving react-dom/server", { args, condition });
 
             try {
               const resolvedPath = esmResolveSync(args.path, {
-                url: sourceDir,
-                conditions: ["worker"],
+                url: srcDir,
+                conditions: [condition],
               });
 
               context.logger.debug("Resolved react-dom/server", { resolvedPath });
diff --git a/references/nextjs-realtime/package.json b/references/nextjs-realtime/package.json
@@ -34,13 +34,13 @@
   },
   "devDependencies": {
     "@next/bundle-analyzer": "^15.0.2",
+    "@trigger.dev/rsc": "workspace:^3",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "postcss": "^8",
     "tailwindcss": "^3.4.1",
     "trigger.dev": "workspace:^3",
-    "@trigger.dev/rsc": "workspace:^3",
     "typescript": "^5"
   }
 }
diff --git a/references/nextjs-realtime/src/trigger/rsc.tsx b/references/nextjs-realtime/src/trigger/rsc.tsx
@@ -1,9 +1,8 @@
 import { openai } from "@ai-sdk/openai";
 import { logger, metadata, schemaTask } from "@trigger.dev/sdk/v3";
 import { streamUI } from "ai/rsc";
-import { z } from "zod";
-import { createStreamableUI } from "ai/rsc";
 import { renderToReadableStream } from "react-dom/server";
+import { z } from "zod";
 
 const LoadingComponent = () => <div className="animate-pulse p-4">getting weather...</div>;
 
@@ -72,7 +71,6 @@ function App() {
       <head>
         <meta charSet="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <link rel="stylesheet" href="/styles.css"></link>
         <title>My app</title>
       </head>
       <body></body>
@@ -87,26 +85,20 @@ export const weatherUI = schemaTask({
     message: z.string(),
   }),
   run: async ({ message }) => {
-    const weatherUI = createStreamableUI();
+    logger.info("Running weather UI", { message });
 
-    weatherUI.update(<div style={{ color: "gray" }}>Loading...</div>);
+    const readableStream = await renderToReadableStream(<App />);
 
-    setTimeout(() => {
-      weatherUI.done(<div>{message}</div>);
-    }, 1000);
+    const reader = readableStream.getReader();
 
-    const readableStream = await renderToReadableStream(<App />, {
-      onError(error, errorInfo) {
-        logger.error("Error rendering UI", { error, errorInfo });
-      },
-    });
+    while (true) {
+      const { done, value } = await reader.read();
 
-    const stream = await metadata.stream("weather-ui", readableStream);
+      if (done) {
+        break;
+      }
 
-    for await (const chunk of stream) {
-      logger.log("Received chunk", { chunk });
+      logger.log("Received chunk", { value });
     }
-
-    return weatherUI.value;
   },
 });
diff --git a/references/nextjs-realtime/trigger.config.ts b/references/nextjs-realtime/trigger.config.ts
@@ -5,6 +5,6 @@ export default defineConfig({
   project: "proj_bzhdaqhlymtuhlrcgbqy",
   dirs: ["./src/trigger"],
   build: {
-    extensions: [rscExtension()],
+    extensions: [rscExtension({ reactDomEnvironment: "worker" })],
   },
 });
