vite-plugin-react-server 0.3.18 → 1.0.0

package/plugin/react-server/createHandler.ts

@@ -1,162 +0,0 @@
-import type { PipeableStream } from "react-dom/server";
-import { createLogger } from "vite";
-import {
-  collectManifestCss,
-  collectModuleGraphCss,
-} from "../collect-css-manifest.js";
-import { DEFAULT_CONFIG } from "../config/defaults.js";
-import { resolvePage } from "../resolvePage.js";
-import { resolveProps } from "../resolveProps.js";
-import type { CreateHandlerOptions, ResolvedUserOptions } from "../types.js";
-import { createRscStream } from "./createRscStream.js";
-
-type CreateHandlerResult = 
-  | { type: "success"; controller: AbortController; stream: PipeableStream; assets: any; clientPath: string }
-  | { type: "error"; error: Error }
-  | { type: "skip" };
-
-interface HandlerAssets {
-  css: Set<string>;
-  clientPath: string;
-}
-
-export async function createHandler<T>(
-  url: string,
-  pluginOptions: ResolvedUserOptions,
-  streamOptions: CreateHandlerOptions<T>
-): Promise<CreateHandlerResult> {
-  const root = pluginOptions.projectRoot ?? process.cwd();
-
-  const Html = pluginOptions.Html ?? DEFAULT_CONFIG.HTML;
-  const pageExportName =
-    pluginOptions.pageExportName ?? DEFAULT_CONFIG.PAGE_EXPORT_NAME;
-  const propsExportName =
-    pluginOptions.propsExportName ?? DEFAULT_CONFIG.PROPS_EXPORT_NAME;
-  const controller = new AbortController();
-
-  const cssFiles = streamOptions.cssFiles;
-  const propsPath =
-    typeof pluginOptions.props === "function"
-      ? pluginOptions.props(url)
-      : pluginOptions.props;
-  const pagePath =
-    typeof pluginOptions.Page === "function"
-      ? pluginOptions.Page(url)
-      : pluginOptions.Page;
-
-  const cssModules = new Set<string>();
-
-  if (!(streamOptions.serverManifest || streamOptions.moduleGraph))
-    throw new Error("Missing server manifest or moduleGraph, pass it to options.");
-
-  const getCss = streamOptions.serverManifest
-    ? (id: string) =>
-        collectManifestCss(
-          streamOptions.serverManifest!,
-          root,
-          id,
-          streamOptions.onCssFile
-        )
-    : (id: string) => collectModuleGraphCss(streamOptions.moduleGraph!, id);
-
-  const loadWithCss = async (id: string, parentUrl: string) => {
-    try {
-      const mod = await streamOptions.loader(id);
-      const pageCss = await Promise.resolve(getCss(id));
-      Array.from(pageCss.keys()).forEach((css) => {
-        cssModules.add(css);
-        // Notify about new CSS file if callback exists
-        if (streamOptions.onCssFile) {
-          streamOptions.onCssFile(css, parentUrl);
-        }
-      });
-      return mod as Record<string, any>;
-    } catch (e: any) {
-      if (e.message?.includes("module runner has been closed")) {
-        return { type: "skip" } as Record<string, any>;
-      } else {
-        return { type: "error", error: e } as Record<string, any>;
-      }
-    }
-  };
-
-  const PropsModule = await resolveProps({
-    propsModule: await loadWithCss(propsPath ?? pagePath, url),
-    path: String(propsPath ?? pagePath),
-    exportName: propsExportName,
-    url,
-  });
-  if (PropsModule.type === "error")
-    return { type: PropsModule.type, error: PropsModule?.error };
-  if (PropsModule.type === "skip") return { type: PropsModule.type };
-  const props = PropsModule[propsExportName as keyof typeof PropsModule] as any;
-  if (props?.type === "error") return { type: props.type, error: props.error };
-  if (props?.type === "skip") return { type: props.type };
-
-  const PageModule = await resolvePage({
-    pageModule: await loadWithCss(pagePath, url),
-    path: pagePath,
-    exportName: pageExportName,
-    url,
-  });
-  if (PageModule.type === "error")
-    return { type: PageModule.type, error: PageModule.error };
-  if (PageModule.type === "skip") return { type: PageModule.type };
-  const Page = PageModule[pageExportName as keyof typeof PageModule] as any;
-  if (Page?.type === "error") return { type: Page.type, error: Page.error };
-  if (Page?.type === "skip") return { type: Page.type };
-  if (!(typeof Page === "function")) {
-    return {
-      type: "error",
-      error: new Error("Invalid Page component: " + pagePath, {
-        cause: Page,
-      }),
-    };
-  }
-  if (!(typeof props === "object")) {
-    return {
-      type: "error",
-      error: new Error("Invalid props: " + propsPath, {
-        cause: props,
-      }),
-    } 
-  }
-
-  // Add any additional CSS files
-  if (streamOptions.cssFiles) {
-    streamOptions.cssFiles.forEach((css) => cssModules.add(css));
-  }
-  const stream = createRscStream({
-    Html: Html,
-    Page: Page,
-    props: props,
-    moduleBasePath: '',
-    logger: streamOptions.logger ?? createLogger(),
-    cssFiles: Array.from(cssModules),
-    route: url,
-    url,
-    pipableStreamOptions: streamOptions.pipableStreamOptions,
-    htmlProps: {
-      pageProps: props,
-      route: url,
-      url: url,
-    },
-  });
-
-  if (!stream) {
-    return { type: "skip" as const };
-  }
-
-  const assets: HandlerAssets = {
-    css: new Set(cssFiles ?? []),
-    clientPath: pagePath ?? ''
-  };
-
-  return {
-    type: "success",
-    controller,
-    stream,
-    assets,
-    clientPath: assets.clientPath,
-  };
-}

package/plugin/react-server/createRscStream.ts

@@ -1,86 +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";
-
-
-// CSS collector component
-function CssCollector({
-  children,
-  cssFiles,
-}: {
-  children?: React.ReactNode;
-  cssFiles: string[];
-}) {
-  return React.createElement(
-    React.Fragment,
-    null,
-    ...cssFiles.map((css) => {
-      const url = css.startsWith('/') || css.startsWith('http') || css.startsWith('./') ? css : '/'+css
-      return React.createElement('link', {
-        key: css,
-        rel: 'stylesheet',
-        href: url,
-        precedence: 'high'
-      })
-    }),
-    children
-  );
-}
-
-export function createRscStream({
-  Html,
-  Page,
-  props,
-  moduleBasePath,
-  logger,
-  cssFiles = [],
-  route,
-  url,
-  pipableStreamOptions,
-  htmlProps,
-}: {
-  Html: React.ComponentType<any>;
-  Page: React.ComponentType<any>;
-  props: any;
-  moduleBasePath: string;
-  logger: Logger;
-  cssFiles?: string[];
-  route: string;
-  url: string;
-  pipableStreamOptions?: PipeableStreamOptions;
-  htmlProps?: any;
-}) {
-  
-  const htmlIsFragment = Html == React.Fragment;
-  const withCss = React.createElement(
-    CssCollector,
-    { cssFiles },
-    React.createElement(Page, props)
-  )
-  // Otherwise wrap with Html component
-  const content = htmlIsFragment 
-    ? withCss
-    : React.createElement(Html, htmlProps, withCss);
-  try {
-    return renderToPipeableStream(
-      content,
-      moduleBasePath,
-      {
-        onError: (error: Error) => {
-          if(process.env['NODE_ENV'] === 'development') {
-            console.trace(error);
-          }
-          logger.error(`Stream error at ${route}.`, {error});
-        },
-        onPostpone: logger.info ?? console.info,  
-        environmentName: "Server",
-        ...pipableStreamOptions,
-      }
-    );
-  } catch (error) {
-    logger.error(`Failed to create stream for ${route}.`, {error: error as Error});
-    return null;
-  }
-}

package/plugin/react-server/createSsrHandler.ts

@@ -1,125 +0,0 @@
-import { join, resolve } from "node:path";
-import { Writable } from "node:stream";
-import { Worker } from "node:worker_threads";
-import { type Manifest, type ViteDevServer } from "vite";
-import { DEFAULT_CONFIG } from "../config/defaults.js";
-import type { RequestHandler, ResolvedUserOptions } from "../types.js";
-import type { WorkerRscChunkMessage } from "../worker/types.js";
-import { createHandler } from "./createHandler.js";
-
-
-export function createSsrHandler(
-  options: ResolvedUserOptions,
-  server: ViteDevServer,
-): RequestHandler {
-  const worker = new Worker(
-    options?.htmlWorkerPath
-      ? resolve(server.config.root, options?.htmlWorkerPath)
-      : DEFAULT_CONFIG.HTML_WORKER_PATH,
-    {
-      env: {
-        NODE_OPTIONS: "--conditions ''",
-        VITE_LOADER_PATH: resolve(
-          server.config.cacheDir,
-          "react-stream/worker/loader.js"
-        ),
-      },
-    }
-  );
-
-  return async function handleSsrRequest(req, res, next) {
-    if (
-      !req.url ||
-      req.url.startsWith("/@") ||
-      (req.url.includes(".") && !req.url.endsWith(".html"))
-    ) {
-      return next();
-    }
-
-    try {
-      const result = await createHandler(
-        req.url ?? "",
-        {
-          ...options,
-          projectRoot: server.config.root,
-        },
-        {
-          loader: server.ssrLoadModule.bind(server),
-          moduleGraph: server.moduleGraph,
-        }
-      );
-      const moduleRootPath = join(
-        server.config.cacheDir,
-        options.moduleBasePath
-      );
-      // const htmlOutputPath = join(
-      //   server.config.cacheDir,
-      //   server.config.build.outDir,
-      //   req.url,
-      //   "index.html"
-      // );
-      if (result.type !== "success") {
-        throw new Error(
-          result.type === "error" ? String(result.error) : "Skipped"
-        );
-      }
-
-      // Collect RSC stream data
-      const rscData = await new Promise<string>((resolve, reject) => {
-        let data = "";
-        if (!result.stream) {
-          resolve(data);
-          return;
-        }
-        const writable = new Writable({
-          write(chunk, _, callback) {
-            data += chunk;
-            callback();
-          },
-          final(callback) {
-            resolve(data);
-            callback();
-          },
-        });
-
-        result.stream.pipe(writable);
-        writable.on("error", reject);
-      });
-
-      // Get HTML from worker
-      const html = await new Promise<string>((resolve, reject) => {
-        worker.postMessage({
-          type: "RSC_CHUNK",
-          id: req.url ?? "/",
-          chunk: rscData,
-          moduleRootPath: moduleRootPath,
-          moduleBaseURL: options.moduleBaseURL,
-          // Don't need file paths in dev mode
-          outDir: "",
-          htmlOutputPath: "",
-          pipableStreamOptions: options.pipableStreamOptions ?? {},
-          clientManifest: {},
-          serverManifest: {},
-        } satisfies WorkerRscChunkMessage);
-
-        worker.once("message", (msg) => {
-          if (msg.type === "ERROR") {
-            const message =
-              msg.error instanceof Error
-                ? msg.error.message
-                : String(msg.error);
-            reject(new Error(message, { cause: msg }));
-          } else if (msg.type === "HTML") {
-            // In dev, content will be the HTML string
-            resolve(msg.content);
-          }
-        });
-      });
-
-      res.setHeader("Content-Type", "text/html");
-      res.end(html);
-    } catch (error) {
-      next(error);
-    }
-  };
-}

package/plugin/utils/logger.ts

@@ -1,52 +0,0 @@
-import { createLogger as createViteLogger, type LogLevel } from 'vite';
-
-
-const isPrimitive = (value: any) => {
-  return typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean' || typeof value === 'symbol';
-}
-
-const buildMessage = (prefix: string, msg: string, ...args: any[]) => {
-  let buildMsg = `[${prefix}] ${msg}`
-  for(const arg of args) {
-    if(isPrimitive(arg)) {
-      buildMsg += `\n[${prefix}] ${String(arg)}`;
-    } else if(arg instanceof Error) {
-      buildMsg += `\n[${prefix}] ${arg.name}`
-      buildMsg += `\n[${prefix}] ${arg.message}`
-      buildMsg += `\n[${prefix}] ${arg.stack}`
-      buildMsg += `\n[${prefix}] ${arg.cause}`
-    } else {
-      buildMsg += `\n[${prefix}] ${JSON.stringify(arg)}`;
-    }
-  }
-  return buildMsg;
-}
-
-export const createLogger = (process.env['NODE_ENV'] === 'development') ? (prefix: string, logLevel: LogLevel = 'info') => {
-  const logger = createViteLogger(logLevel, {
-    allowClearScreen: true
-  });
-  return {
-    clear: () => logger.clearScreen('info'),
-    info: (msg: string, ...args: any[]) => {
-      console.log(buildMessage(prefix, msg, ...args))
-    },
-    warn: (msg: string, ...args: any[]) => {
-      console.warn(buildMessage(prefix, msg, ...args))
-    },
-    error: (msg: string, ...args: any[]) => {
-      console.error(buildMessage(prefix, msg, ...args))
-    },
-    debug: (msg: string, ...args: any[]) => {
-      console.debug(buildMessage(prefix, msg, ...args))
-    }
-  };
-} : () => {
-  return {
-    clear: () => {},
-    info: () => {},
-    warn: () => {},
-    error: () => {},
-    debug: () => {},
-  };
-};

package/plugin/worker/html/plugin.ts

@@ -1,101 +0,0 @@
-import type { Plugin, UserConfig } from "vite";
-import { join, resolve } from "path";
-import type { ModuleFormat, RollupOptions } from 'rollup';
-import type { ResolvedUserOptions, StreamPluginOptions } from "../../types.js";
-import { DEFAULT_CONFIG } from "../../config/defaults.js";
-import { getPluginRoot } from "../../config/getPaths.js";
-import { resolveOptions } from "../../config/resolveOptions.js";
-
-let userOptions: ResolvedUserOptions;
-export function reactHtmlWorkerPlugin(options: StreamPluginOptions): Plugin {
-  const resolvedUserOptions = resolveOptions(options);
-  if(resolvedUserOptions.type === 'error') {
-    throw resolvedUserOptions.error
-  }
-  userOptions = resolvedUserOptions.userOptions;
-  return {
-    name: "vite:react-html-worker",
-    config(config) {
-      const root = config.root ?? process.cwd();
-      const pluginRoot = getPluginRoot();
-      const htmlWorkerPath = typeof options.htmlWorkerPath === 'string' 
-        ? resolve(root, options.htmlWorkerPath) 
-        : resolve(pluginRoot, DEFAULT_CONFIG.HTML_WORKER_PATH);
-      
-      const format: ModuleFormat = 'esm';
-
-      // Single worker output for server build
-      const workerConfig = {
-        input: {
-          'html-worker': htmlWorkerPath,
-        },
-        output: {
-          format,
-          dir: join(userOptions.build.outDir, userOptions.build.server),
-          entryFileNames: '[name].js',
-          preserveModules: true,
-          preserveModulesRoot: userOptions.build.preserveModulesRoot === true ? userOptions.moduleBase : undefined,
-          // Add manifest entry
-          manualChunks: {
-            'html-worker': [htmlWorkerPath]
-          }
-        }
-      } satisfies RollupOptions;
-
-      return {
-        build: {
-          rollupOptions: {
-            preserveEntrySignatures: 'strict',
-            input: {
-              ...workerConfig.input,
-              ...(typeof config.build?.rollupOptions?.input === 'object' 
-                ? config.build?.rollupOptions?.input 
-                : {}),
-            },
-            external: [
-              'vite',
-              'rollup',
-              'react',
-              'react-dom',
-              'react-dom/server',
-              'react-server-dom-esm',
-              'react-server-dom-esm/client.node',
-              'react-server-dom-esm/server.node',
-              'react-server-dom-esm/node-loader',
-              'source-map',
-              'acorn-loose',
-              'webpack-sources',
-              'stream',
-              'util',
-              'crypto',
-              'async_hooks',
-              'fs',
-              'path',
-              'worker_threads',
-              // if we use node: paths in our code, it should always be catched by below rule.
-              /^node:.*/,
-            ],
-            output: {
-              ...workerConfig.output,
-            }
-          },
-          manifest: true, // Ensure manifest is generated
-          minify: false,
-          sourcemap: true,
-        }
-      } satisfies UserConfig;
-    },
-    // Add this to ensure entry is in manifest
-    generateBundle(_, bundle) {
-      const workerEntry = bundle['html-worker.js'];
-      if (workerEntry) {
-        Object.defineProperty(workerEntry, 'isEntry', {
-          value: true,
-          writable: false,
-          enumerable: true,
-          configurable: false
-        });
-      }
-    }
-  };
-}

package/plugin/worker/plugin.ts

@@ -1,26 +0,0 @@
-import type { StreamPluginOptions } from "../types.js"
-import type { Plugin } from "vite"
-import { reactHtmlWorkerPlugin } from "./html/plugin.js"
-import { reactRscWorkerPlugin } from "./rsc/plugin.js"
-
-/**
- * This plugin can be used to create your own worker paths. This build should be separated from the main build.
- * 
- * 
- * ```ts
- * @example
- *export reactWorkerPluginConfig = {
- *  htmlWorkerPath: './workers/html.tsx',
- *  rscWorkerPath: './workers/rsc.tsx',
- * }
- * ```
- * 
- * @param options
- * @returns
- */
-export function reactWorkerPlugin(options: StreamPluginOptions): Plugin[] {
-  return [
-    reactHtmlWorkerPlugin(options),
-    reactRscWorkerPlugin(options)
-  ]
-}

package/plugin/worker/rsc/plugin.ts

@@ -1,84 +0,0 @@
-import type { Plugin } from "vite";
-import { resolve } from "path";
-import type { ModuleFormat } from "rollup";
-import type { StreamPluginOptions } from "../../types.js";
-import { DEFAULT_CONFIG } from "../../config/defaults.js";
-import { getPluginRoot } from "../../config/getPaths.js";
-
-export function reactRscWorkerPlugin(options: StreamPluginOptions): Plugin {
-  return {
-    name: "vite:react-rsc-worker",
-    config(config) {
-      const root = config.root ?? process.cwd();
-      const pluginRoot = getPluginRoot();
-      const rscWorkerPath =
-        typeof options.rscWorkerPath === "string"
-          ? resolve(root, options.rscWorkerPath)
-          : resolve(pluginRoot, DEFAULT_CONFIG.RSC_WORKER_PATH);
-
-      const format: ModuleFormat = "esm";
-
-      // Single worker output for server build
-      const workerConfig = {
-        input: {
-          "rsc-worker": rscWorkerPath,
-        },
-        output: {
-          format,
-          dir: options.build?.server ?? "dist/server", // Output to server directory
-          entryFileNames: "[name].js",
-          preserveModules: true,
-          manualChunks: {
-            "rsc-worker": [rscWorkerPath],
-          },
-          resolve: {
-            conditions: ["react-server"],
-          },
-        },
-      };
-
-      return {
-        build: {
-          rollupOptions: {
-            preserveEntrySignatures: "strict",
-            input: {
-              ...workerConfig.input,
-              ...(typeof config.build?.rollupOptions?.input === "object"
-                ? config.build?.rollupOptions?.input
-                : {}),
-            },
-            external: [
-              "vite",
-              "rollup",
-              "react",
-              "react-dom",
-              "react-dom/server",
-              "react-server-dom-esm",
-              "react-server-dom-esm/client.node",
-              "react-server-dom-esm/server.node",
-              "react-server-dom-esm/node-loader",
-              "source-map",
-              "acorn-loose",
-              "webpack-sources",
-              "stream",
-              "util",
-              "crypto",
-              "async_hooks",
-              "fs",
-              "path",
-              "worker_threads",
-              // if we use node: paths in our code, it should always be catched by below rule.
-              /^node:.*/,
-            ],
-            output: {
-              ...workerConfig.output,
-            },
-          },
-          manifest: true, // Ensure manifest is generated
-          minify: false,
-          sourcemap: true,
-        },
-      };
-    },
-  };
-}