vite-plugin-react-server 0.3.11 → 0.3.12

package/plugin/worker/rsc/rsc-worker.development.ts

@@ -0,0 +1,107 @@
+// no offical types for node:module available yet (23.7.0)
+declare module 'node:module' {
+  export interface ImportAttributes {
+    [key: string]: string | undefined;
+  }
+
+  export interface ResolveHookContext {
+    conditions: string[];
+    parentURL: string | undefined;
+    importAttributes: ImportAttributes;
+  }
+
+  export interface LoadHookContext {
+    conditions: string[];
+    format: ModuleFormat | null | undefined;
+    importAttributes: ImportAttributes;
+    shortCircuit?: boolean;
+  }
+
+  export interface ResolveResult {
+    url: string;
+    shortCircuit: boolean;
+  }
+
+  export interface LoadResult {
+    format: string;
+    source: string | SharedArrayBuffer | Uint8Array;
+    shortCircuit: boolean;
+  }
+
+  export interface HooksAPI {
+    resolve?: (
+      specifier: string,
+      context: ResolveHookContext,
+      nextResolve: (specifier: string, context: ResolveHookContext) => ResolveResult
+    ) => ResolveResult;
+
+    load?: (
+      url: string,
+      context: LoadHookContext,
+      nextLoad: (url: string, context: LoadHookContext) => LoadResult
+    ) => LoadResult;
+  }
+
+  export function registerHooks(hooks: HooksAPI): void;
+}
+//
+import { parentPort, MessageChannel } from "node:worker_threads";
+import { messageHandler } from "./messageHandler.js";
+import { createLogger } from "../../utils/logger.js";
+import { 
+  registerHooks,
+  register,
+  type ResolveHookContext,
+} from 'node:module';
+import { register as registerTsx } from "tsx/esm/api";
+import { join } from 'node:path';
+import { getPluginRoot } from "../../config/getPaths.js";
+
+const ports = new MessageChannel();
+// Initialize worker
+if (!parentPort) {
+  throw new Error("This module must be run as a worker");
+}
+
+// Create channels for each loader
+const reactLoaderChannel = new MessageChannel();
+const cssLoaderChannel = new MessageChannel();
+
+// Listen for messages from loaders
+reactLoaderChannel.port2.on('message', (msg) => {
+  messageHandler(msg);
+});
+
+cssLoaderChannel.port2.on('message', (msg) => {
+  messageHandler(msg);
+});
+
+const loaderPath = 'file://' + join(getPluginRoot(), 'loader/react-loader.js');
+const cssLoaderPath = 'file://' + join(getPluginRoot(), 'loader/css-loader.js');
+console.log('[worker] Full loader path:', loaderPath);
+
+// Register react-loader
+register(loaderPath, {
+  parentURL: getPluginRoot(),
+  data: { port: reactLoaderChannel.port1 },
+  transferList: [reactLoaderChannel.port1]
+});
+register(cssLoaderPath, {
+  parentURL: getPluginRoot(),
+  data: { port: cssLoaderChannel.port1 },
+  transferList: [cssLoaderChannel.port1]
+});
+
+// Register loaders
+registerTsx();
+
+// Set up message handling
+parentPort.on("message", (message) => {
+  messageHandler(message);
+});
+
+// Signal ready
+parentPort.postMessage({ type: "READY", env: "development" });
+
+
+

package/plugin/worker/rsc/rsc-worker.production.ts

@@ -0,0 +1,13 @@
+import { parentPort } from "node:worker_threads";
+import { messageHandler } from "./messageHandler.js";
+
+
+if (!parentPort) {
+  throw new Error("This module must be run as a worker");
+}
+
+// Handle incoming messages
+parentPort.on("message", messageHandler);
+
+// Signal ready
+parentPort.postMessage({ type: "READY", env: "production" });

package/plugin/worker/rsc/rsc-worker.tsx

@@ -1,128 +1,5 @@
-import { createWriteStream } from "node:fs";
-import { mkdir } from "node:fs/promises";
-import { dirname } from "node:path";
-import type { Writable } from "node:stream";
-import { parentPort } from "node:worker_threads";
-import {
-  registerClientReference,
-  registerServerReference
-  // @ts-ignore
-} from "react-server-dom-esm/server.node";
-
-import type { 
-  RscRenderState, 
-  RscWorkerMessage,
-  RscWorkerResponse 
-} from "../types.js";
-import { createRscStream } from "./createRscStream.js";
-
-if (!parentPort) {
-  throw new Error("This module must be run as a worker");
-}
-
-// Track active renders
-const activeRenders = new Map<string, RscRenderState>();
-const activeStreams = new Map<string, ReturnType<typeof createRscStream>>();
-const activeWrites = new Map<string, Writable>();
-
-async function shutdown() {
-  console.log("[RSC Worker] Shutting down forcefully");
-  for (const stream of activeStreams.values()) {
-    stream.abort();
-  }
-  for (const writeStream of activeWrites.values()) {
-    writeStream.destroy();
-  }
-  process.exit(0);
-}
-
-function sendMessage(message: RscWorkerResponse) {
-  parentPort?.postMessage(message);
-}
-
-// Handle incoming messages
-parentPort.on("message", async (message: RscWorkerMessage) => {
-  if (message.type === "SHUTDOWN") {
-    await shutdown();
-    return;
-  }
-
-  try {
-    switch (message.type) {
-      case "RSC_RENDER": {
-        const { id, pageImport, propsImport, outDir, moduleRootPath, moduleBaseURL, pipableStreamOptions } = message;
-        
-        // Skip if already rendered
-        if (activeRenders.has(id)) return;
-
-        // Create render state
-        const renderState: RscRenderState = {
-          id,
-          outDir,
-          moduleRootPath,
-          moduleBaseURL,
-          rscOutputPath: `${outDir}/${id}.rsc`,
-          componentImport: pageImport,
-          propsImport,
-          pipableStreamOptions
-        };
-
-        // Ensure output directory exists
-        await mkdir(dirname(renderState.rscOutputPath), { recursive: true });
-        const writeStream = createWriteStream(renderState.rscOutputPath);
-
-        // Create stream
-        const stream = createRscStream(renderState, writeStream, parentPort);
-
-        // Track active streams
-        activeRenders.set(id, renderState);
-        activeStreams.set(id, stream);
-        activeWrites.set(id, writeStream);
-        break;
-      }
-
-      case "RSC_END": {
-        const { id } = message;
-        activeRenders.delete(id);
-        activeStreams.delete(id);
-        activeWrites.delete(id);
-        break;
-      }
-
-      case "CLIENT_REFERENCE": {
-        const { id, location, key } = message;
-        const ref = registerClientReference(id, location, key);
-        sendMessage({
-          type: "CLIENT_REFERENCE",
-          id,
-          location,
-          key,
-          ref
-        });
-        break;
-      }
-
-      case "SERVER_REFERENCE": {
-        const { id, location, key } = message;
-        const ref = registerServerReference(id, location, key);
-        sendMessage({
-          type: "SERVER_REFERENCE",
-          id,
-          location,
-          key,
-          ref
-        });
-        break;
-      }
-    }
-  } catch (error) {
-    sendMessage({
-      type: "ERROR",
-      id: message.type === "RSC_RENDER" ? message.id : "",
-      error: error instanceof Error ? error.message : String(error)
-    });
-  }
-});
-
-// Signal ready
-parentPort.postMessage({ type: "READY" });
+await(
+  process.env["NODE_ENV"] === "production"
+    ? import("./rsc-worker.production.js")
+    : import("./rsc-worker.development.js")
+);

package/plugin/worker/rsc/state.ts

@@ -0,0 +1,37 @@
+import { createLogger } from "../../utils/logger.js";
+
+
+// Create shared CSS registry
+export const cssFiles = new Map<string, string>();
+export const clientFiles = new Set<string>();
+export const serverActionFiles = new Set<string>();
+// Helper functions
+export function clearCssFiles() {
+  cssFiles.clear();
+}
+
+export function clearClientFiles() {
+  clientFiles.clear();
+}
+
+export function clearServerActionFiles() {
+  serverActionFiles.clear();
+}
+
+export function addCssFile(id: string, cssFile: string) {
+  cssFiles.set(id, cssFile);
+} 
+
+export function addClientFile(url: string) {
+  clientFiles.add(url);
+}
+
+export function addServerActionFile(url: string) {
+  serverActionFiles.add(url);
+}
+
+export function clearAllFiles() {
+  clearCssFiles();
+  clearClientFiles();
+  clearServerActionFiles();
+} 

package/plugin/worker/types.ts

@@ -1,5 +1,11 @@
 import type { Manifest } from "vite";
 
+// Base message types
+export interface WorkerMessage {
+  type: string;
+  id: string;
+}
+
 export interface PipeableStreamOptions {
   bootstrapModules?: string[];
   bootstrapScripts?: string[];
@@ -17,6 +23,7 @@ export interface PipeableStreamOptions {
   };
 }
 
+// Worker States
 export interface HtmlRenderState {
   chunks: string[];
   complete: boolean;
@@ -31,95 +38,111 @@ export interface HtmlRenderState {
 
 export interface RscRenderState {
   id: string;
-  pipableStreamOptions: PipeableStreamOptions;
   outDir: string;
   moduleRootPath: string;
   moduleBaseURL: string;
   rscOutputPath: string;
   componentImport: string;
   propsImport: string;
-}
-
-export interface WorkerRscChunkMessage {
-  type: "RSC_CHUNK";
-  id: string;
-  chunk: string;
-  moduleRootPath: string;
-  moduleBaseURL: string;
-  outDir: string;
-  htmlOutputPath: string;
   pipableStreamOptions: PipeableStreamOptions;
-  clientManifest: Manifest; // Add client manifest
-  serverManifest: Manifest; // Add server manifest
 }
 
-export interface ShutdownMessage {
+// Common Messages
+export interface ShutdownMessage extends WorkerMessage {
   type: "SHUTDOWN";
-  id: string;
-}
-
-export interface ShellReadyMessage {
-  type: "SHELL_READY";
-  id: string;
 }
 
-export interface AllReadyMessage {
-  type: "ALL_READY";
-  id: string;
-  outputPath: string;
-  html: string;
-}
-
-export interface RscRenderMessage {
+// RSC Messages
+export interface RscRenderMessage extends WorkerMessage {
   type: "RSC_RENDER";
-  id: string;
   pageImport: string;
   propsImport: string;
+  pageExportName: string;
+  propsExportName: string;
+  url: string;
   outDir: string;
+  projectRoot: string;
   moduleRootPath: string;
   moduleBaseURL: string;
+  moduleBasePath: string;
   pipableStreamOptions: PipeableStreamOptions;
+  cssFiles: string[];
 }
 
-export interface RscCompleteMessage {
-  type: "RSC_COMPLETE";
-  id: string;
-  outputPath: string;
+export interface RscChunkMessage extends WorkerMessage {
+  type: "RSC_CHUNK";
+  chunk: string;
+  moduleRootPath: string;
+  moduleBaseURL: string;
+  outDir: string;
+  rscOutputPath: string;
+  cssFiles: Array<[string, string]>;
 }
 
-export interface WorkerErrorMessage {
-  type: "ERROR";
-  id: string;
-  error: string;
+export interface RscShellReadyMessage extends WorkerMessage {
+  type: "SHELL_READY";
 }
 
-export interface RscWroteFileMessage {
-  type: "WROTE_FILE";
-  id: string;
+export interface RscAllReadyMessage extends WorkerMessage {
+  type: "ALL_READY";
   outputPath: string;
+  contents: string;
 }
 
-export interface RscEndMessage {
+export interface RscEndMessage extends WorkerMessage {
   type: "RSC_END";
-  id: string;
 }
 
-export interface ClientReferenceMessage {
+export interface RscErrorMessage extends WorkerMessage {
+  type: "ERROR";
+  error: string;
+}
+
+export interface ClientReferenceMessage extends WorkerMessage {
   type: "CLIENT_REFERENCE";
-  id: string;
   location: string;
   key: string;
   ref: unknown;
 }
 
-export interface ServerReferenceMessage {
+export interface ServerReferenceMessage extends WorkerMessage {
   type: "SERVER_REFERENCE";
-  id: string;
   location: string;
   key: string;
   ref: unknown;
 }
 
+// HTML Messages
+export interface WorkerRscChunkMessage extends WorkerMessage {
+  type: "RSC_CHUNK";
+  chunk: string;
+  moduleRootPath: string;
+  moduleBaseURL: string;
+  outDir: string;
+  htmlOutputPath: string;
+  pipableStreamOptions: PipeableStreamOptions;
+  clientManifest: Manifest;
+  serverManifest: Manifest;
+}
+
+export interface ShellReadyMessage extends WorkerMessage {
+  type: "SHELL_READY";
+}
+
+export interface AllReadyMessage extends WorkerMessage {
+  type: "ALL_READY";
+  outputPath: string;
+  html: string;
+}
+
+export interface CssFileMessage extends WorkerMessage {
+  type: "CSS_FILE";
+  id: string;
+  cssFile: string;
+  moduleClasses?: Record<string, string>;
+}
+
+// Message Unions
 export type HtmlWorkerMessage =
   | WorkerRscChunkMessage
   | RscEndMessage
@@ -127,19 +150,20 @@ export type HtmlWorkerMessage =
 
 export type HtmlWorkerResponse =
   | ShellReadyMessage
-  | AllReadyMessage	
-  | WorkerErrorMessage
-  
+  | AllReadyMessage
+  | RscErrorMessage;
+
 export type RscWorkerMessage =
   | RscRenderMessage
+  | RscChunkMessage
   | RscEndMessage
   | ShutdownMessage
   | ClientReferenceMessage
-  | ServerReferenceMessage;
+  | ServerReferenceMessage
+  | CssFileMessage;
 
 export type RscWorkerResponse = 
-  | RscCompleteMessage
-  | WorkerErrorMessage
-  | RscWroteFileMessage
-  | ClientReferenceMessage
-  | ServerReferenceMessage;
+  | RscShellReadyMessage
+  | RscAllReadyMessage
+  | RscErrorMessage
+  | CssFileMessage;

package/scripts/check-react-version.mjs

@@ -2,10 +2,14 @@
 import fs from 'node:fs/promises'
 import path from 'node:path'
 import { fileURLToPath } from 'node:url'
+import React from 'react'
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url))
 
 const TEMPLATE_VERSION = '0.0.0-experimental-b3a95caf-20250113'
+const ACTUAL_TEMPLATE_VERSION = '19.1.0-experimental-b3a95caf-20250113'
+const TARGET_VERSION = '0.0.0-experimental-e670e72f-20250214'
+const ACTUAL_TARGET_VERSION = '19.1.0-experimental-e670e72f-20250214'
 const STUB_VERSION = '0.0.1'
 
 async function main() {
@@ -13,13 +17,17 @@ async function main() {
     const reactPkgPath = path.resolve(process.cwd(), 'node_modules/react/package.json')
     const reactPkg = JSON.parse(await fs.readFile(reactPkgPath, 'utf-8'))
     const userPkg = JSON.parse(await fs.readFile(path.resolve(process.cwd(), 'package.json'), 'utf-8'))
-    const patchVersion = reactPkg.version
+    const patchVersion = React.version
+    
     let userVersion = userPkg.dependencies?.react ?? userPkg.devDependencies?.react ?? userPkg.peerDependencies?.react
     if(!userVersion) {
         throw new Error('React version not found in package.json')
     } else {
       userVersion = userVersion.replace('^', '')
     }
+    if(userVersion !== TARGET_VERSION) {
+      throw new Error(`React patch was made for version ${ACTUAL_TARGET_VERSION}, but you installed version ${userVersion}`)
+    }
     // Define patches to process
     const patches = [
       {
@@ -43,18 +51,20 @@ async function main() {
     // Process each patch
     for (const {template, output} of patches) {
       let patchContent = await fs.readFile(template, 'utf-8')
-      
-      // Replace versions
-      patchContent = patchContent
-        .replace(new RegExp(TEMPLATE_VERSION, 'g'), patchVersion)
-
       // Write patched file
       const outputPath = path.resolve(userPatchesDir, output)
       await fs.writeFile(outputPath, patchContent)
       console.log(`Wrote patch file to ${outputPath}`)
     }
 
-    console.log(`Updated patches to match React version ${userVersion} (actual version: ${patchVersion})`)
+    console.log(`React version check result: 
+      userVersion: ${userVersion}
+      patchVersion: ${patchVersion}
+      ACTUAL_TARGET_VERSION: ${ACTUAL_TARGET_VERSION}
+      ACTUAL_TEMPLATE_VERSION: ${ACTUAL_TEMPLATE_VERSION}
+      TARGET_VERSION: ${TARGET_VERSION}
+      TEMPLATE_VERSION: ${TEMPLATE_VERSION}
+`)
 }
 
 const PATCH = ``