vite-plugin-react-server 1.0.2 → 1.1.0

package/plugin/helpers/createRscStream.ts

@@ -1,109 +0,0 @@
-import * as React from "react";
-// @ts-ignore
-import { renderToPipeableStream } from "react-server-dom-esm/server.node";
-import type { PipeableStreamOptions } from "../worker/types.js";
-import type { Logger } from "vite";
-import type {
-  CreateHandlerOptions,
-  CssCollectorProps,
-  CssContent,
-  InlineCssCollectorProps,
-} from "../types.js";
-
-export function createRscStream<InlineCSS extends boolean = true>({
-  Html,
-  Page,
-  props,
-  loader = (id) => import(id).then((m) => m.default),
-  moduleRootPath,
-  moduleBasePath,
-  moduleBaseURL,
-  logger,
-  cssFiles = [],
-  route,
-  url,
-  pipableStreamOptions,
-  htmlProps,
-  inlineCss = true as InlineCSS,
-  CssCollector,
-  root,
-}: {
-  Html: CreateHandlerOptions["Html"];
-  Page: React.ComponentType<any>;
-  loader: (id: string) => Promise<any>;
-  props: any;
-  moduleBase: string;
-  moduleRootPath: string;
-  moduleBasePath: string;
-  moduleBaseURL: string;
-  logger: Logger;
-  route: string;
-  url: string;
-  pipableStreamOptions?: PipeableStreamOptions;
-  htmlProps?: any;
-  root: string;
-  inlineCss?: InlineCSS;
-  cssFiles?: (string | CssContent)[];
-} & (InlineCSS extends true
-  ? {
-      CssCollector: React.FC<InlineCssCollectorProps>;
-    }
-  : {
-      CssCollector: React.FC<CssCollectorProps>;
-    })) {
-  const htmlIsFragment = Html == React.Fragment;
-  if (!htmlIsFragment) {
-    if (!htmlProps) {
-      htmlProps = {};
-    }
-    if (!("moduleBaseURL" in htmlProps)) {
-      htmlProps["moduleBaseURL"] = moduleBaseURL;
-    }
-    if (!("moduleBasePath" in htmlProps)) {
-      htmlProps["moduleBasePath"] = moduleBasePath;
-    }
-    if (!("moduleRootPath" in htmlProps)) {
-      htmlProps["moduleRootPath"] = moduleRootPath;
-    }
-    if (!("url" in htmlProps)) {
-      htmlProps["url"] = url;
-    }
-    if (!("route" in htmlProps)) {
-      htmlProps["route"] = route;
-    }
-    if (!("pageProps" in htmlProps)) {
-      htmlProps["pageProps"] = props;
-    }
-  }
-  const withCss = React.createElement(
-    CssCollector as any,
-    (inlineCss === true
-      ? {
-          cssFiles: cssFiles,
-          route,
-          moduleBaseURL,
-          moduleBasePath,
-          moduleRootPath,
-          root,
-          loader,
-        }
-      : { cssFiles: cssFiles, route, moduleBaseURL }) as any,
-    React.createElement(Page, props)
-  );
-  // Otherwise wrap with Html component
-  const content = htmlIsFragment
-    ? withCss
-    : React.createElement(Html, htmlProps, withCss);
-  try {
-    return renderToPipeableStream(
-      content,
-      moduleBasePath,
-      pipableStreamOptions
-    );
-  } catch (error) {
-    logger.error(`Failed to create stream for ${route}.`, {
-      error: error as Error,
-    });
-    return null;
-  }
-}

package/plugin/loader/css-loader.ts

@@ -1,94 +0,0 @@
-import { readFile } from 'fs/promises';
-import { basename } from 'path';
-import postcss from 'postcss';
-import type { MessagePort } from 'node:worker_threads';
-import type { CssFileMessage } from '../worker/types.js';
-import type { LoadHookContext } from 'node:module';
-
-type LoaderContext = {
-  data?: { port: MessagePort };
-};
-// Store port globally for CSS loader
-let cssLoaderPort: MessagePort | undefined;
-
-// Initialize hook
-export async function initialize(data: { port: MessagePort }) {
-  cssLoaderPort = data.port;  // Store port
-  data.port.postMessage({ type: 'INITIALIZED' });
-  data.port.unref();
-}
-
-// CSS file tracking per page
-const cssFilesByPage = new Map<string, Set<string>>();
-
-export function setCurrentPage(page: string | null) {
-  if (page && !cssFilesByPage.has(page)) {
-    cssFilesByPage.set(page, new Set());
-  }
-}
-
-export function getCssFilesForPage(page: string): string[] {
-  return Array.from(cssFilesByPage.get(page) || []);
-}
-
-// Modify the CSS handling in the load function
-export async function load(url: string, context: LoadHookContext & LoaderContext, defaultLoad: any) {
-  // Handle CSS files
-  if(url.endsWith(".css")) {
-    const source = await readFile(new URL(url), 'utf-8');
-    
-    // Process CSS with PostCSS
-    const result = await postcss().process(source, {
-      from: url,
-      to: url,
-      map: {
-        inline: false,
-        annotation: false
-      }
-    });
-
-    // Generate both transformed CSS and class mappings
-    const moduleName = basename(url, '.css').replace('.', '_');
-    const classes: Record<string, string> = {};
-
-    // Transform selectors
-    result.root.walkRules(rule => {
-      const selector = rule.selector.replace('.', '');
-      const className = `${moduleName}_${selector}`;
-      classes[selector] = className;
-      rule.selector = `.${className}`;
-    });
-
-    // Get transformed CSS using root.toString()
-    const transformedCss = result.root.toString();
-
-    // Send processed CSS to worker
-    if (cssLoaderPort) {
-      cssLoaderPort.postMessage({
-        type: 'CSS_FILE',
-        id: url,
-        cssFile: transformedCss
-      } satisfies CssFileMessage);
-    }
-    
-    // Return CSS module
-    const moduleSource = `
-      const styles = ${JSON.stringify(classes)};
-      export default styles;
-      export const css = ${JSON.stringify(transformedCss)};
-    `;
-
-    return {
-      format: 'module',
-      source: moduleSource,
-      shortCircuit: true
-    };
-  }
-  return defaultLoad(url, context, defaultLoad);
-}
-
-export function resolve(specifier: string, context: any, defaultResolve: any) {
-  return defaultResolve(specifier, context, defaultResolve);
-}
-
-

package/plugin/worker/html/messageHandler.ts

@@ -1,130 +0,0 @@
-import { PassThrough } from "node:stream";
-import { parentPort } from "node:worker_threads";
-import type { HtmlRenderState, HtmlWorkerMessage } from "../types.js";
-import * as ReactDOMServer from "react-dom/server";
-import React from "react";
-import {
-  createFromNodeStream,
-  // @ts-ignore
-} from "react-server-dom-esm/client.node";
-
-// Track active renders and streams
-const activeRenders = new Map<string, HtmlRenderState>();
-const htmlContent = new Map<string, string>();
-const htmlPromises = new Map<string, Promise<string>>();
-export const messageHandler = async (message: HtmlWorkerMessage) => {
-  try {
-    switch (message.type) {
-      case "RSC_CHUNK": {
-        const { id, chunk, moduleRootPath, moduleBaseURL, htmlOutputPath, pipableStreamOptions } = message;
-        
-        const render = activeRenders.get(id);
-        if (!render) {
-          activeRenders.set(id, {
-            chunks: [chunk],
-            id,
-            complete: false,
-            rendered: false,
-            moduleRootPath,
-            moduleBaseURL,
-            outDir: '',
-            htmlOutputPath: htmlOutputPath,
-            pipableStreamOptions: pipableStreamOptions,
-          });
-        } else {
-          render.chunks = [...render.chunks, chunk];
-        }
-        break;
-      }
-
-      case "RSC_END": {
-        const { id } = message;
-        const render = activeRenders.get(id);
-        if (!render) {
-          throw new Error(`No render state found for ${id}`);
-        }
-
-        // Mark this render as complete
-        render.complete = true;
-
-        // Create a PassThrough stream to handle the chunks
-        const rscStream = new PassThrough();
-
-        // Write all chunks to the stream
-        for (const chunk of render.chunks) {
-          rscStream.write(chunk);
-        }
-        rscStream.end();
-          
-        // Create React elements from stream
-        const reactElements = await createFromNodeStream(
-          rscStream,
-          render.moduleRootPath,
-          render.moduleBaseURL
-        );
-
-        // Create a promise that resolves when HTML is complete
-        const htmlPromise = new Promise<string>((resolve) => {
-          const collectStream = new PassThrough();
-          let html = '';
-
-          collectStream.on("data", (chunk) => {
-            html += chunk.toString();
-          });
-
-          collectStream.on("end", () => {
-            resolve(html);
-            render.rendered = true;
-            parentPort?.postMessage({
-              type: "ALL_READY",
-              id,
-              html,
-              outputPath: render.htmlOutputPath,
-            });
-          });
-          // Render to pipeable stream
-          const stream = ReactDOMServer.renderToPipeableStream(
-            reactElements as React.ReactNode,
-            {
-              ...render.pipableStreamOptions,
-              // Calculate relative paths based on route depth
-              bootstrapModules: render.pipableStreamOptions?.bootstrapModules?.map(path => {
-                if (!path) return path;
-                if(render.moduleBaseURL && render.moduleBaseURL !== '') {
-                  return new URL(path, render.moduleBaseURL).toString();
-                }
-                const depth = id.split('/').filter(Boolean).length;
-                const prefix = depth > 0 ? '../'.repeat(depth) : '/';
-                return path.startsWith('/') ? prefix + path.slice(1) : prefix + path;
-              }),
-              onShellReady() {
-                parentPort?.postMessage({ type: "SHELL_READY", id });
-              }
-            }
-          );
-
-          // Pipe to collection stream
-          stream.pipe(collectStream);
-        });
-
-        htmlPromises.set(id, htmlPromise);
-
-        // Clean up resources
-        rscStream.destroy();
-        activeRenders.delete(id);
-        htmlContent.delete(id);
-        htmlPromises.delete(id);
-        break;
-      }
-
-      case "SHUTDOWN": {
-        console.log('Received shutdown signal');
-        parentPort?.close();
-        break;
-      }
-    }
-  } catch (error) {
-    console.error('Error in messageHandler:', error);
-    throw error;
-  }
-};

package/plugin/worker/html/renderPages.ts

@@ -1,293 +0,0 @@
-import { mkdir, writeFile } from "node:fs/promises";
-import { dirname, join } from "node:path";
-import { Transform } from "node:stream";
-import type { Worker } from "node:worker_threads";
-import { createHandler } from "../../helpers/createHandler.js";
-import type {
-  CheckFilesExistReturn,
-  CreateHandlerOptions,
-  PageData,
-} from "../../types.js";
-import type { HtmlWorkerResponse } from "../types.js";
-import { type Manifest, type IndexHtmlTransformHook, createLogger } from "vite";
-import React from "react";
-import { collectManifestClientFiles } from "../../collect-manifest-client-files.js";
-
-type RenderPagesOptions<T = any> = Omit<CreateHandlerOptions<T>, "url" | "route" | "getCss" | "propsPath" | "pagePath"> & {
-  clientManifest: Manifest;
-  serverManifest: Manifest;
-  worker: Worker;
-  loader: (id: string) => Promise<Record<string, any>>;
-  onCssFile?: (url: string, parentUrl: string) => void;
-  onClientJSFile?: (url: string, parentUrl: string) => void;
-  onPage?: (pageData: PageData) => Promise<void>;
-  clientCss?: string[];
-  transformIndexHtml: IndexHtmlTransformHook;
-  outDir: string;
-  htmlOutputPath: string;
-  server?: any;
-  bundle?: any;
-  chunk?: any;
-  originalUrl?: string;
-};
-
-export async function renderPages<T = any>(
-  routes: string[],
-  files: CheckFilesExistReturn,
-  options: RenderPagesOptions<T>
-) {
-  const failedRoutes = new Map<string, Error>();
-  const completedRoutes = new Set<string>();
-  const clientCss = options.clientCss ?? [];
-  const partialPageData = new Map<string, Partial<PageData>>();
-  const moduleRootPath =
-    options.moduleBasePath !== "" &&
-    !options.moduleRootPath.endsWith(options.moduleBasePath)
-      ? join(options.moduleRootPath, options.moduleBasePath)
-      : options.moduleRootPath;
-  const mergeAndSendPageData = async (route: string, resolve: () => void) => {
-    const partial = partialPageData.get(route);
-    if (!partial?.html || !partial.rsc) {
-      return; // Wait for both parts
-    }
-
-    const pageData: PageData = {
-      route,
-      html: partial.html,
-      rsc: partial.rsc,
-    };
-
-    // Write HTML file
-    let routeHtmlPath =
-      route === "/"
-        ? options.htmlOutputPath
-        : options.htmlOutputPath.replace(
-            "index.html",
-            join(route, "index.html")
-          );
-    if (routeHtmlPath.startsWith("/")) {
-      routeHtmlPath = routeHtmlPath.slice(1);
-    }
-    const routeRscPath = routeHtmlPath.slice(0, -5) + ".rsc";
-    await mkdir(dirname(routeHtmlPath), { recursive: true });
-    await writeFile(routeRscPath, partial.rsc.content);
-    await writeFile(routeHtmlPath, partial.html.raw);
-
-    await options.onPage?.(pageData);
-    completedRoutes.add(route);
-    if (completedRoutes.size === routes.length) {
-      resolve();
-    }
-  };
-
-  try {
-    // Set up worker message handling
-    const allRoutesComplete = new Promise<void>((resolve, reject) => {
-      options.worker.on("message", async (msg: HtmlWorkerResponse) => {
-        switch (msg.type) {
-          case "ALL_READY": {
-            const { id, html } = msg;
-            try {
-              const partial = partialPageData.get(id) || { route: id };
-
-              partial.html = {
-                raw: html,
-                transformed:
-                  typeof options.transformIndexHtml === "function"
-                    ? String(await options.transformIndexHtml(id, {
-                        path: id,
-                        filename: join(id, "index.html"),
-                      }) || "")
-                    : "", // Will be set by main thread transform
-                assets: [],
-              };
-              partialPageData.set(id, partial);
-              await mergeAndSendPageData(id, resolve);
-            } catch (error) {
-              failedRoutes.set(id, error as Error);
-              reject(error);
-            }
-            break;
-          }
-          case "ERROR": {
-            console.error("Worker error for route:", msg.id, msg.error);
-            failedRoutes.set(msg.id, new Error(msg.error));
-            reject(new Error(msg.error));
-            break;
-          }
-        }
-      });
-    });
-
-    // Process routes sequentially
-    for (const route of routes) {
-      const routeFiles = files.urlMap.get(route);
-      if (!routeFiles) {
-        console.error("No files found for route:", route);
-        failedRoutes.set(route, new Error(`No files found for ${route}`));
-        continue;
-      }
-
-      if (options.pipableStreamOptions?.importMap?.imports) {
-        for (let [, value] of Object.entries(
-          options.pipableStreamOptions?.importMap?.imports
-        )) {
-          options.onClientJSFile?.(value, route);
-        }
-      }
-      const getCss = async (id: string) => {
-        const cssFiles = collectManifestClientFiles({
-          manifest: options.serverManifest,
-          root: options.root,
-          pagePath: id,
-        }).cssFiles;
-        return cssFiles;
-      }
-      const pagePath = files.urlMap.get(route)?.page;
-      const propsPath = files.urlMap.get(route)?.props;
-      if(!pagePath){
-        throw new Error(`No page path found for ${route}`);
-      }
-      // Create handler for pure RSC output
-      const rscResult = await createHandler({
-        root: options.root,
-        url: route,
-        route: route,
-        getCss: getCss,
-        loader: options.loader,
-        cssFiles: clientCss,
-        moduleBase: options.moduleBase,
-        moduleBasePath: options.moduleBasePath,
-        moduleRootPath: moduleRootPath,
-        moduleBaseURL: options.moduleBaseURL,
-        pipableStreamOptions: options.pipableStreamOptions ?? {},
-        inlineCss: options.inlineCss,
-        Html: React.Fragment,
-        CssCollector: options.CssCollector,
-        pagePath: pagePath,
-        propsPath: propsPath,
-        pageExportName: options.pageExportName,
-        propsExportName: options.propsExportName,
-        logger: createLogger(),
-      });
-      // Create handler for HTML output
-      const htmlResult = await createHandler({
-        root: options.root,
-        url: route,
-        route: route,
-        getCss: getCss,
-        loader: options.loader,
-        cssFiles: clientCss,
-        moduleBase: options.moduleBase,
-        moduleBasePath: options.moduleBasePath,
-        moduleRootPath: moduleRootPath,
-        moduleBaseURL: options.moduleBaseURL,
-        pipableStreamOptions: options.pipableStreamOptions,
-        inlineCss: options.inlineCss,
-        Html: options.Html,
-        CssCollector: options.CssCollector,
-        pagePath: pagePath,
-        propsPath: propsPath,
-        pageExportName: options.pageExportName,
-        propsExportName: options.propsExportName,
-        logger: createLogger(),
-      });
-
-      if (rscResult.type !== "success" || htmlResult.type !== "success") {
-        if (rscResult.type !== "success") {
-          if (rscResult.type !== "skip") {
-            console.error("Handler failed for route:", route, rscResult.error);
-          }
-        }
-        if (htmlResult.type !== "success") {
-          if (htmlResult.type !== "skip") {
-            console.error("Handler failed for route:", route, htmlResult.error);
-          }
-        }
-        failedRoutes.set(route, new Error(`Handler failed for ${route}`));
-        continue;
-      }
-
-      // Process both streams
-      await Promise.all([
-        // Handle RSC stream
-        new Promise<void>((resolve, reject) => {
-          const chunks: Buffer[] = [];
-          const rscTransform = new Transform({
-            transform(chunk, _encoding, callback) {
-              try {
-                if (chunk) {
-                  chunks.push(Buffer.from(chunk));
-                  callback(null, chunk);
-                }
-              } catch (error) {
-                callback(error as Error);
-              }
-            },
-            async flush(callback) {
-              try {
-                const rscContent = Buffer.concat(chunks).toString("utf-8");
-
-                // Update partial page data with raw RSC content
-                const partial = partialPageData.get(route) || { route };
-                partial.rsc = {
-                  modules: [], // Will be parsed by the client
-                  content: rscContent,
-                };
-                partialPageData.set(route, partial);
-                await mergeAndSendPageData(route, resolve);
-
-                callback();
-                resolve();
-              } catch (error) {
-                callback(error as Error);
-                reject(error);
-              }
-            },
-          });
-
-          rscResult.stream.pipe(rscTransform);
-        }),
-
-        // Send HTML stream to worker
-        new Promise<void>((resolve) => {
-          const htmlTransform = new Transform({
-            transform(chunk, _encoding, callback) {
-              try {
-                options.worker.postMessage({
-                  type: "RSC_CHUNK",
-                  id: route,
-                  chunk: chunk.toString(),
-                  moduleRootPath: moduleRootPath,
-                  moduleBaseURL: options.moduleBaseURL,
-                  htmlOutputPath: options.htmlOutputPath,
-                  pipableStreamOptions: options.pipableStreamOptions,
-                });
-                callback(null, chunk);
-              } catch (error) {
-                callback(error as Error);
-              }
-            },
-            flush(callback) {
-              options.worker.postMessage({
-                type: "RSC_END",
-                id: route,
-              });
-              callback();
-              resolve();
-            },
-          });
-
-          htmlResult.stream.pipe(htmlTransform);
-        }),
-      ]);
-    }
-
-    await allRoutesComplete;
-  } catch (error) {
-    console.error("Render error:", error);
-    throw error;
-  }
-
-  return { failedRoutes, completedRoutes };
-}