vite-plugin-react-server 1.0.2 → 1.1.0

package/plugin/react-static/collectRscContent.ts

@@ -0,0 +1,77 @@
+/**
+ * rscHandler.ts
+ * 
+ * PURPOSE: Handles collecting RSC content from the rscHeadless stream
+ * 
+ * This module:
+ * 1. Collects RSC content from the rscHeadless stream
+ * 2. Returns the complete RSC content when the stream is done
+ * 3. Provides a clean interface for RSC handling
+ */
+
+import { PassThrough, Transform } from "node:stream";
+import { dirname, join } from "node:path";
+import { mkdir } from "node:fs/promises";
+import type { CreateHandlerOptions, StreamMetrics } from "../types.js";
+import { createStreamMetrics } from "../helpers/metrics.js";
+import { fileWriter } from "./fileWriter.js";
+
+/**
+ * Collects RSC content from the rscHeadless stream
+ * 
+ * @param rscStream The stream containing the RSC content
+ * @param handlerOptions The options for the handler
+ * @returns A promise that resolves with the complete RSC content and metrics
+ */
+export async function collectRscContent(
+  rscStream: PassThrough,
+  handlerOptions: CreateHandlerOptions
+): Promise<{ stream: PassThrough; metrics: StreamMetrics }> {
+  const metrics = createStreamMetrics();
+  const startTime = performance.now()
+
+  const outputPath = join(
+    handlerOptions.build.outDir,
+    handlerOptions.build.static,
+    handlerOptions.route,
+    handlerOptions.build.rscOutputPath
+  );
+
+  const dir = dirname(outputPath);
+  // Ensure directory exists
+  await mkdir(join(handlerOptions.projectRoot, dir), { recursive: true });
+
+  // Create transform to track metrics
+  const metricsTransform = new Transform({
+    transform(chunk, _encoding, callback) {
+      metrics.chunks++;
+      metrics.bytes += chunk.length;
+      callback(null, chunk);
+    },
+    flush(callback) {
+      metrics.duration = Date.now() - startTime;
+      callback();
+    }
+  });
+
+  try {
+    // Pipe RSC stream through metrics tracking
+    rscStream.pipe(metricsTransform);
+
+    // Set up file writing using fileWriter
+    const writePromise = fileWriter(metricsTransform, "rsc", handlerOptions);
+
+    // Wait for stream to complete
+    await new Promise<void>((resolve) => {
+      metricsTransform.on('end', resolve);
+    });
+
+    // Wait for file writing to complete
+    await writePromise;
+
+    return { stream: rscStream, metrics };
+  } catch (error) {
+    metricsTransform.destroy();
+    throw error;
+  }
+} 

package/plugin/react-static/configurePreviewServer.ts

@@ -0,0 +1,68 @@
+import type { PreviewServer } from "vite";
+import { MIME_TYPES } from "../config/mimeTypes.js";
+import type { ResolvedUserOptions } from "../types.js";
+import { join } from "node:path";
+import { createReadStream } from "node:fs";
+import { stat } from "node:fs/promises";
+import { pipeline } from "node:stream/promises";
+
+export async function configurePreviewServer({
+  server,
+  userOptions,
+}: {
+  server: PreviewServer;
+  userOptions: ResolvedUserOptions;
+}) {
+  const staticHostDir = join(userOptions.projectRoot, userOptions.build.outDir, userOptions.build.static);
+  server.middlewares.use(async (req, res, next) => {
+    if(!req.url) {
+      return next();
+    }
+    const [, value] = userOptions.normalizer(req.url);
+    // handle index.html
+    const isHtml = userOptions.autoDiscover.htmlPattern(value)
+    if (isHtml || req.headers.accept?.includes("text/html")) {
+      const indexHtml = isHtml ? join(staticHostDir, value) : join(staticHostDir, value, userOptions.build.htmlOutputPath);
+      try {
+        const stats = await stat(indexHtml);
+        if (stats.isFile()) {
+          res.setHeader("Content-Type", "text/html; charset=utf-8");
+          await pipeline(createReadStream(indexHtml), res);
+          return;
+        }
+      } catch {
+        // File doesn't exist, continue to next middleware
+      }
+    } 
+    const isRsc = userOptions.autoDiscover.rscPattern(value)
+    if (isRsc || req.headers.accept?.includes("text/x-component")) {
+      const rsc = isRsc ? join(staticHostDir, value) : join(staticHostDir, value, userOptions.build.rscOutputPath);
+      try {
+        const stats = await stat(rsc);
+        if (stats.isFile()) {
+          res.setHeader("Content-Type", "text/x-component; charset=utf-8");
+          await pipeline(createReadStream(rsc), res);
+          return;
+        }
+      } catch {
+        // File doesn't exist, continue to next middleware
+      }
+    }
+    const ext = value.slice(value.lastIndexOf("."));
+    if (ext) {
+      const filePath = join(staticHostDir, value);
+      try {
+        const stats = await stat(filePath);
+        if (stats.isFile()) {
+          const contentType = MIME_TYPES[ext] || "application/octet-stream";
+          res.setHeader("Content-Type", `${contentType}; charset=utf-8`);
+          await pipeline(createReadStream(filePath), res);
+          return;
+        }
+      } catch {
+        // File doesn't exist, continue to next middleware
+      }
+    }
+    next();
+  });
+}

package/plugin/react-static/fileWriter.ts

@@ -0,0 +1,103 @@
+/**
+ * fileWriter.ts
+ *
+ * PURPOSE: Handles file writing operations for React Server Components (RSC) rendering
+ *
+ * This module:
+ * 1. Writes HTML and RSC files to the filesystem using streams
+ * 2. Creates necessary directories
+ * 3. Handles file path construction
+ * 4. Provides a clean interface for file operations
+ */
+import type { FileWriterOptions } from "../types.js";
+import { join } from "node:path";
+import { createWriteStream } from "node:fs";
+import { mkdir } from "node:fs/promises";
+import { Readable, Transform } from "node:stream";
+
+/**
+ * Writes HTML and RSC files for a route using streams
+ *
+ * @param stream The readable stream containing the content
+ * @param fileType The type of file being written ("html" or "rsc")
+ * @param options The file writer options
+ * @returns A promise that resolves when the file is written
+ */
+export async function fileWriter(
+  stream: Readable,
+  fileType: "html" | "rsc",
+  options: FileWriterOptions
+): Promise<void> {
+  const { onEvent } = options;
+
+  // Validate stream
+  if (!stream) {
+    throw new Error(`Missing stream for route: ${options.route}`);
+  }
+
+  const outputPath = join(
+    options.build.outDir,
+    options.build.static,
+    options.route,
+    fileType === "html" ? options.build.htmlOutputPath : options.build.rscOutputPath
+  );
+
+  // Ensure directory exists
+  await mkdir(join(options.build.outDir, options.build.static, options.route), { recursive: true });
+
+  // Create write stream
+  const writeStream = createWriteStream(outputPath);
+
+  // Create transform stream to capture content
+  const contentCapture = new Transform({
+    transform(chunk, _encoding, callback) {
+      // Pass through the chunk
+      callback(null, chunk);
+    }
+  });
+
+  // Collect chunks for content
+  const chunks: Buffer[] = [];
+  contentCapture.on('data', (chunk) => {
+    chunks.push(Buffer.from(chunk));
+  });
+
+  // Emit file.write events if onEvent is provided
+  if (onEvent) {
+    onEvent({
+      type: "file.write",
+      data: {
+        fileType: fileType,
+        route: options.route,
+        stream: stream,
+        path: outputPath,
+        onComplete: async () => {},
+      },
+    });
+  }
+
+  // Pipe the stream through content capture to file
+  return new Promise((resolve, reject) => {
+    stream
+      .pipe(contentCapture)
+      .pipe(writeStream)
+      .on("finish", () => {
+        // Combine chunks into content
+        const content = Buffer.concat(chunks).toString('utf-8');
+        
+        // Emit file.write.done event with content
+        if (onEvent) {
+          onEvent({
+            type: "file.write.done",
+            data: {
+              fileType: fileType,
+              route: options.route,
+              content: content
+            },
+          });
+        }
+        resolve();
+      })
+      .on("error", reject);
+  });
+}