vite-plugin-react-server 0.1.0

package/src/helpers/normalizedRelativePath.ts

@@ -0,0 +1,59 @@
+import { normalizePath } from "vite";
+
+type NormalizedRelativePathOptions = {
+  // will automatically remove this part
+  root: string;
+  // will automatically see this as a optional extra part of the rootDir that will be removed
+  outDir: string | string[];
+  // will ensure it always starts with this path, if it does not it will be added
+  moduleBase: string;
+  // will ensure it never starts with a leading /, which in some cases is needed (vite entry), other cases it is not for example from project root /
+  noLeadingSlash: boolean;
+};
+
+export const createNormalizedRelativePath = (
+  options: NormalizedRelativePathOptions = {
+    root: process.cwd(),
+    outDir: ["dist", "build"],
+    moduleBase: "src",
+    noLeadingSlash: false,
+  }
+) => {
+  const base =
+    options.noLeadingSlash && options.moduleBase.startsWith("/")
+      ? options.moduleBase.slice(1)
+      : options.moduleBase;
+  const removeOutDir = Array.isArray(options.outDir)
+    ? (path: string) =>
+        (options.outDir as string[])
+          .map((dir) => path.startsWith(dir))
+          .some((v) => v)
+          ? path.slice(options.outDir[0].length)
+          : path
+    : (path: string) =>
+        (options.outDir as string) === path
+          ? path.slice(options.outDir.length)
+          : path;
+
+  const removeRoot = (path: string) => {
+    const normalized = normalizePath(path);
+    const relative = normalized.startsWith(options.root)
+      ? normalized.slice(options.root.length)
+      : normalized;
+    return relative;
+  };
+
+  const ensureModuleBase = (path: string) => {
+    if (options.noLeadingSlash && path.startsWith("/")) {
+      return path.slice(1);
+    }
+    if (!path.startsWith(base)) {
+      throw new Error(
+        `Path ${path} does not start with module base ${base}, this will not work down the line.`
+      );
+    }
+    return path;
+  };
+
+  return (path: string) => ensureModuleBase(removeOutDir(removeRoot(path)));
+};

package/src/helpers/tryManifest.ts

@@ -0,0 +1,23 @@
+import { readFileSync } from "node:fs";
+import { resolve } from "node:path";
+
+type TryManifestOptions = {
+  root: string;
+  outDir: string;
+  ssrManifest: boolean;
+};
+
+export function tryManifest(options: TryManifestOptions) {
+  const manifestPath = resolve(
+    options.root,
+    options.outDir,
+    ".vite",
+    options.ssrManifest ? "ssr-manifest.json" : "manifest.json"
+  );
+  try {
+    return JSON.parse(readFileSync(manifestPath, "utf-8"));
+  } catch (e) {
+    console.log("No manifest found", manifestPath);
+    return null;
+  }
+}

package/src/html/createPageLoader.ts

@@ -0,0 +1,99 @@
+import { resolve as resolvePath } from "node:path";
+import { load } from "react-server-dom-esm/node-loader";
+import {
+  registerClientReference,
+  registerServerReference,
+} from "react-server-dom-esm/server.node";
+import { createNormalizedRelativePath } from "../helpers/normalizedRelativePath.js";
+
+type CreatePageLoaderOptions = {
+  manifest: Record<string, { file: string }>;
+  root: string;
+  outDir: string;
+  moduleBase: string;
+  registerServer?: string[];
+  registerClient?: string[];
+  alwaysRegisterServer?: boolean;
+  alwaysRegisterClient?: boolean;
+};
+
+type CreateDefaultLoaderOptions = {
+  id: string;
+  registerServer?: string[];
+  registerClient?: string[];
+  alwaysRegisterServer?: boolean;
+  alwaysRegisterClient?: boolean;
+};
+
+export const createDefaultLoader = ({
+  id,
+  registerServer,
+  registerClient,
+  alwaysRegisterServer = false,
+  alwaysRegisterClient = false,
+}: CreateDefaultLoaderOptions) => {
+  const mapper = ([key, value]: [string, any]) => {
+    try {
+      if (
+        registerClient?.includes(key) ||
+        (alwaysRegisterClient && typeof value === "function")
+      ) {
+        return [key, registerClientReference(value, id, key)];
+      }
+      if (
+        registerServer?.includes(key) ||
+        (alwaysRegisterServer && typeof value === "function")
+      ) {
+        return [key, registerServerReference(value, id, key)];
+      }
+      return [key, value];
+    } catch (e) {
+      console.error("[RSC] Error registering reference:", key, value, e);
+      return [key, value];
+    }
+  };
+  return async (url: string) =>
+    Object.fromEntries(Object.entries(await import(url)).map(mapper));
+};
+
+export const createPageLoader = ({
+  manifest,
+  root,
+  outDir,
+  moduleBase,
+  registerServer,
+  registerClient,
+  alwaysRegisterServer,
+  alwaysRegisterClient,
+}: CreatePageLoaderOptions) => {
+  const pathNormalizer = createNormalizedRelativePath({
+    root,
+    outDir,
+    moduleBase,
+    noLeadingSlash: true,
+  });
+  return async (id: string) => {
+    const normalizedId = pathNormalizer(id);
+    const entry =
+      normalizedId in manifest
+        ? manifest[normalizedId]
+        : Object.values(manifest).find((entry) => entry.file === normalizedId);
+    if (!entry) {
+      throw new Error(
+        `Could not find manifest entry for ${id}, ${normalizedId} from ${root}`
+      );
+    }
+    const loaderResult = await load(
+      resolvePath(root, outDir, entry.file),
+      { format: "module" },
+      createDefaultLoader({
+        id,
+        registerServer,
+        registerClient,
+        alwaysRegisterServer,
+        alwaysRegisterClient,
+      })
+    );
+    return loaderResult;
+  };
+};

package/src/index.ts

@@ -0,0 +1,4 @@
+export { reactStreamPlugin } from './plugin.js';
+
+// Export types
+export type * from './types.js';

package/src/manifest.ts

@@ -0,0 +1,24 @@
+import type { Manifest } from "vite";
+import { normalizePath } from "vite";
+
+export interface RscManifest {
+  clientComponents: Record<string, string>;
+}
+
+export function resolveManifestEntry(
+  id: string,
+  manifest: Manifest
+): string | undefined {
+  // Try exact match
+  if (manifest[id]) {
+    return manifest[id].file;
+  }
+
+  // Try normalized path
+  const normalizedId = normalizePath(id);
+  if (manifest[normalizedId]) {
+    return manifest[normalizedId].file;
+  }
+
+  return undefined;
+}

package/src/module-graph.ts

@@ -0,0 +1,48 @@
+import type { ModuleNode, ViteDevServer } from "vite";
+
+export interface ModuleWithDeps {
+  id: string;
+  deps: Set<string>;
+  css: Set<string>;
+}
+
+export function getModuleGraph(server: ViteDevServer) {
+  return {
+    async getModuleWithDeps(id: string): Promise<ModuleWithDeps> {
+      // Load module first to ensure it's in the module graph
+      await server.ssrLoadModule(id);
+
+      const resolvedId = await server.pluginContainer.resolveId(id, undefined, {
+        // Add ssr and react-server conditions
+        ssr: true,
+      });
+
+      if (!resolvedId) throw new Error(`Module not found: ${id}`);
+
+      const moduleNode = server.moduleGraph.getModuleById(resolvedId.id);
+      if (!moduleNode) throw new Error(`Module node not found: ${id}`);
+
+      const deps = new Set<string>();
+      const css = new Set<string>();
+
+      // Recursively collect dependencies
+      const collectDeps = (node: ModuleNode) => {
+        // Track CSS imports
+        if (node.id?.endsWith(".css") && node.id) {
+          css.add(node.id);
+        }
+
+        // Track all dependencies
+        for (const dep of node.importedModules) {
+          if (dep.id && !deps.has(dep.id)) {
+            deps.add(dep.id);
+            collectDeps(dep);
+          }
+        }
+      };
+
+      collectDeps(moduleNode);
+      return { id: moduleNode.id ?? "", deps, css };
+    },
+  };
+}

package/src/options.ts

@@ -0,0 +1,351 @@
+import path from "node:path";
+import type { ConfigEnv, ResolvedConfig, UserConfig } from "vite";
+import type { ResolvedUserOptions, StreamPluginOptions } from "./types.js";
+// Default configuration values
+export const DEFAULT_CONFIG = {
+  FILE_REGEX: /\.(m|c)?(j|t)sx?$/,
+  CLIENT_ASSETS_DIR: "assets",
+  RSC_DIR: "rsc",
+  MODULE_BASE: "src",
+  MODULE_BASE_PATH: "/src",
+  MODULE_BASE_URL: "/src",
+  PAGE: "/src/page/page.tsx",
+  PROPS: "/src/page/props.ts",
+  CLIENT_ENTRY: "/src/client.tsx",
+  PAGE_EXPORT: "Page",
+  PROPS_EXPORT: "props",
+  // relative from plugin root
+  WORKER_PATH: "worker/worker.tsx",
+  LOADER_PATH: "worker/loader.ts",
+  RSC_EXTENSION: ".rsc",
+  HTML: ({ children }: { children: any }) => children,
+  COLLECT_CSS: true,
+  COLLECT_ASSETS: true,
+  PAGE_PATTERN: "/src/page/**/*.page.tsx",
+  PROPS_PATTERN: "/src/page/**/*.props.ts",
+  DEV_PORT: 5173,
+  PREVIEW_PORT: 4173,
+  DEV_HOST: "localhost",
+  PREVIEW_HOST: "localhost",
+  ENV_PREFIX: "VITE_",
+  BUILD: {
+    pages: () => ["/"],
+    client: "dist/client",
+    server: "dist/server",
+  },
+} as const;
+
+export const resolveConfig = <T extends ResolvedConfig>(
+  config: T,
+  resolvedUserConfig: UserConfig,
+  userOptions: ResolvedUserOptions
+) => {
+  return {
+    ...config,
+    build: {
+      ...config.build,
+      assetsDir: config.build?.assetsDir ?? DEFAULT_CONFIG.CLIENT_ASSETS_DIR,
+    },
+  };
+};
+
+export const resolveUserConfig = (
+  condition: "react-client" | "react-server",
+  input: string[],
+  config: UserConfig,
+  configEnv: ConfigEnv,
+  userOptions: ResolvedUserOptions
+):
+  | { type: "error"; error: Error }
+  | {
+      type: "success";
+      userConfig: Required<Pick<UserConfig, "root" | "build" | "mode">> &
+        Omit<UserConfig, "root" | "build" | "mode">;
+    } => {
+  const isReactServer = condition === "react-server";
+  const isViteServer = configEnv.command === "serve";
+  const isVitePreview = configEnv.isPreview;
+
+  if (isReactServer && configEnv.command === "build") {
+    if (!config.build?.rollupOptions?.input) {
+      config = {
+        ...config,
+        build: {
+          ...config.build,
+          rollupOptions: {
+            ...config.build?.rollupOptions,
+            input: input
+          }
+        }
+      }
+    }
+  }
+
+  if (typeof config.build?.assetsDir === 'string' && userOptions.assetsDir !== config.build?.assetsDir) {
+    return {
+      type: "error",
+      error: new Error(
+        `assetsDir cannot be changed after the config has been resolved, before: ${userOptions.assetsDir}, after: ${config.build?.assetsDir}`
+      ),
+    };
+  }
+
+  if (isReactServer) {
+    if (configEnv.command === "build") {
+      if (!configEnv.isSsrBuild) {
+        return {
+          type: "error",
+          error: new Error(
+            "ssr must be true when using the server plugin, NODE_OPTIONS='--conditions react-server' vite build --ssr"
+          ),
+        };
+      }
+    } else if (!isViteServer) {
+      return {
+        type: "error",
+        error: new Error(
+          isViteServer
+            ? `react-server condition was not set. Please use \`NODE_OPTIONS='--conditions react-server' vite${
+                isVitePreview ? " preview" : ""
+              }\``
+            : "react-server condition was not set. Please use `NODE_OPTIONS='--conditions react-server' vite build --ssr`"
+        ),
+      };
+    } else if (!configEnv.isSsrBuild && configEnv.command !== 'serve') {
+      return {
+        type: "error",
+        error: new Error(
+          "Vite was run with the react-server condition, but is making a client build."
+        ),
+      };
+    }
+  }
+
+  const { root: configRoot, mode: configMode, ...configRest } = config;
+  const { outDir: configOutDir, assetsDir: configAssetsDir, ssr: configSsr, manifest: configManifest, ssrManifest: configSsrManifest, target: configTarget, ...configBuildRest } = config.build ?? {};
+
+  return {
+    type: "success",
+    userConfig: {
+      ...configRest,
+      root: configRoot ?? userOptions.projectRoot ?? process.cwd(),
+      mode: configMode ?? process.env["NODE_ENV"] ?? "production",
+      build: {
+        ...configBuildRest,
+        ssr: configSsr ?? isReactServer,
+        manifest: configManifest ?? true,
+        ssrManifest: configSsrManifest ?? true,
+        target: configTarget ?? "es2020",
+        outDir:
+          typeof configOutDir === "string"
+            ? configOutDir
+            : isReactServer
+            ? userOptions.build.server
+            : userOptions.build.client,
+        assetsDir:
+          typeof configAssetsDir === "string"
+            ? configAssetsDir
+            : isReactServer
+            ? ''
+            : DEFAULT_CONFIG.CLIENT_ASSETS_DIR,
+      },
+    },
+  };
+};
+
+export const resolveOptions = (
+  options: StreamPluginOptions
+):
+  | { type: "error"; error: Error }
+  | {
+      type: "success";
+      userOptions: ResolvedUserOptions;
+    } => {
+  const projectRoot = options.projectRoot ?? process.cwd();
+  /** the module base can be assumed to not have a leading slash */
+  const moduleBase =
+    typeof options.moduleBase === "string"
+      ? options.moduleBase.startsWith(path.sep)
+        ? options.moduleBase.slice(path.sep.length)
+        : options.moduleBase
+      : DEFAULT_CONFIG.MODULE_BASE;
+
+  if (
+    typeof options.moduleBase === "string" &&
+    options.moduleBase !== moduleBase
+  ) {
+    return {
+      type: "error",
+      error: new Error(
+        `moduleBase ${options.moduleBase} is invalid, should be like ${moduleBase}`
+      ),
+    };
+  }
+
+  const moduleBasePath =
+    typeof options.moduleBasePath === "string"
+      ? !options.moduleBasePath.startsWith(path.sep)
+        ? `${path.sep}${options.moduleBasePath}`
+        : options.moduleBasePath
+      : `${path.sep}${moduleBase}`;
+
+  if (!moduleBasePath.includes(moduleBase)) {
+    return {
+      type: "error",
+      error: new Error(
+        `moduleBasePath ${moduleBasePath} is invalid, should include moduleBase ${moduleBase}`
+      ),
+    };
+  }
+
+  const moduleBaseURL =
+    typeof options.moduleBaseURL === "string"
+      ? !options.moduleBaseURL.endsWith(moduleBasePath)
+        ? path.join(options.moduleBaseURL, moduleBasePath)
+        : options.moduleBaseURL
+      : moduleBasePath;
+
+  if (!moduleBaseURL.includes(moduleBasePath)) {
+    return {
+      type: "error",
+      error: new Error(
+        `moduleBaseURL ${moduleBaseURL} is invalid, should include moduleBasePath ${moduleBasePath}`
+      ),
+    };
+  }
+
+  if (
+    typeof options.moduleBaseURL === "string" &&
+    options.moduleBaseURL !== moduleBaseURL
+  ) {
+    return {
+      type: "error",
+      error: new Error(
+        `moduleBaseURL ${options.moduleBaseURL} is invalid, should be like ${moduleBaseURL}`
+      ),
+    };
+  }
+
+  const build = options.build
+    ? {
+        client: options.build.client ?? DEFAULT_CONFIG.BUILD.client,
+        pages: options.build.pages ?? DEFAULT_CONFIG.BUILD.pages,
+        server: options.build.server ?? DEFAULT_CONFIG.BUILD.server,
+      }
+    : DEFAULT_CONFIG.BUILD;
+
+  return {
+    type: "success",
+    userOptions: {
+      moduleBase,
+      moduleBasePath,
+      moduleBaseURL,
+      build,
+      Page: options.Page ?? DEFAULT_CONFIG.PAGE,
+      props: options.props ?? DEFAULT_CONFIG.PROPS,
+      Html: options.Html ?? DEFAULT_CONFIG.HTML,
+      pageExportName: options.pageExportName ?? DEFAULT_CONFIG.PAGE_EXPORT,
+      propsExportName: options.propsExportName ?? DEFAULT_CONFIG.PROPS_EXPORT,
+      collectCss: options.collectCss ?? DEFAULT_CONFIG.COLLECT_CSS,
+      collectAssets: options.collectAssets ?? DEFAULT_CONFIG.COLLECT_ASSETS,
+      projectRoot: projectRoot,
+      assetsDir: options.assetsDir ?? DEFAULT_CONFIG.CLIENT_ASSETS_DIR,
+    } satisfies ResolvedUserOptions,
+  };
+};
+
+export async function resolvePages(
+  pages: ResolvedUserOptions["build"]["pages"]
+): Promise<
+  | {
+      type: "success";
+      pages: string[];
+    }
+  | {
+      type: "error";
+      error: Error;
+    }
+> {
+  if (!pages) {
+    return {
+      type: "success",
+      pages: [],
+    };
+  }
+  if (typeof pages === "function") {
+    try {
+      return resolvePages(await Promise.resolve(pages()));
+    } catch (error) {
+      return {
+        type: "error",
+        error:
+          error instanceof Error
+            ? error
+            : new Error(
+                `build.pages must be a array of strings, or a (async) function that returns a string or an array of strings. Got "${JSON.stringify(
+                  pages
+                )}"`,
+                {
+                  cause: error,
+                }
+              ),
+      };
+    }
+  }
+  try {
+    const result = pages;
+    const awaited = "then" in result ? await result : result;
+    if (typeof awaited === "string") {
+      return {
+        type: "success",
+        pages: [awaited],
+      };
+    }
+    if (Array.isArray(awaited)) {
+      if (awaited.every((page) => typeof page === "string")) {
+        return {
+          type: "success",
+          pages: awaited,
+        };
+      } else {
+        return {
+          type: "error",
+          error: new Error(
+            `build.pages must be a array of strings, or a (async) function that returns a string or an array of strings. Got "${JSON.stringify(
+              awaited.find((page) => typeof page !== "string")
+            )}"`,
+            {
+              cause: awaited,
+            }
+          ),
+        };
+      }
+    }
+    return {
+      type: "error",
+      error: new Error(
+        `build.pages must be a array of strings, or a (async) function that returns a string or an array of strings. Got "${JSON.stringify(
+          pages
+        )}"`,
+        {
+          cause: pages,
+        }
+      ),
+    };
+  } catch (error) {
+    return {
+      type: "error",
+      error:
+        error instanceof Error
+          ? error
+          : new Error(
+              `build.pages must be a array of strings, or a (async) function that returns a string or an array of strings. Got "${JSON.stringify(
+                error
+              )}"`,
+              {
+                cause: error,
+              }
+            ),
+    };
+  }
+}

package/src/plugin.ts

@@ -0,0 +1,31 @@
+import { resolveOptions } from "./options.js";
+import { viteReactClientTransformPlugin } from "./transformer/index.js";
+import { preserveDirectives } from "./transformer/preserveDirectives.js";
+import type { StreamPluginOptions } from "./types.js";
+
+export const getCondition = (options: { env?: typeof process.env } = {}) => {
+  const nodeOptions = options?.env?.['NODE_OPTIONS'] ?? process.env['NODE_OPTIONS'];
+  return nodeOptions?.match(/--conditions=react-server/) ? "server" : "client";
+};
+
+export const reactStreamPlugin = async (options: StreamPluginOptions) => {
+  const condition = getCondition();
+  try {
+    const resolvedOptions = resolveOptions(options);
+    if (resolvedOptions.type === "error") {
+      throw resolvedOptions.error;
+    }
+    options = resolvedOptions.userOptions;
+  } catch (error) {
+    throw new Error(
+      `[vite:react-stream:${condition}] ${(error as Error).message}`
+    );
+  }
+  return condition === "server"
+    ? [
+        (await import(`./react-server/plugin.js`)).reactStreamPlugin(options),
+        viteReactClientTransformPlugin(),
+        preserveDirectives(),
+      ]
+    : [(await import(`./react-client/plugin.js`)).reactStreamPlugin(options)];
+};

package/src/react-client/plugin.ts

@@ -0,0 +1,34 @@
+import type { Plugin } from "vite";
+import {
+  resolveOptions,
+  resolvePages,
+  resolveUserConfig,
+} from "../options.js";
+import type { StreamPluginOptions } from "../types.js";
+
+export async function reactStreamPlugin(
+  options: StreamPluginOptions
+): Promise<Plugin> {
+  const resolvedOptions = resolveOptions(options);
+  if (resolvedOptions.type === "error") {
+    throw resolvedOptions.error;
+  }
+  const { userOptions } = resolvedOptions;
+
+  const resolvedPages  = await resolvePages(userOptions.build.pages)
+  if(resolvedPages.type === "error") {
+    throw resolvedPages.error
+  }
+  const { pages } = resolvedPages
+  return {
+    name: "vite:react-stream",
+    config(config, configEnv) {
+      const resolvedConfig = resolveUserConfig("react-client", pages, config, configEnv, userOptions);
+      if (resolvedConfig.type === "error") {
+        throw resolvedConfig.error;
+      }
+      const { userConfig } = resolvedConfig;
+      return userConfig
+    },
+  };
+}