rsbuild-plugin-react-router 0.2.0 → 0.3.1

package/src/dev-runtime-session.ts

@@ -0,0 +1,191 @@
+import type { RsbuildDevServer } from '@rsbuild/core';
+import * as Effect from 'effect/Effect';
+import { PLUGIN_NAME } from './constants.js';
+import type { ReactRouterDevRuntime } from './dev-generation.js';
+import type { DevCompilerPair } from './dev-runtime-compilation.js';
+import {
+  runPluginEffect,
+  tryPluginPromise,
+  tryPluginSync,
+} from './effect-runtime.js';
+
+export type RuntimeBinding = {
+  id: number;
+  server: RsbuildDevServer;
+  runtime: ReactRouterDevRuntime;
+  compilers?: DevCompilerPair;
+};
+
+type CloseOutcome = { ok: true } | { ok: false; cause: unknown };
+
+type CloseObservation = {
+  binding?: RuntimeBinding;
+  promise?: Promise<void>;
+  outcome?: CloseOutcome;
+};
+
+export type ControllerState =
+  | { status: 'idle' }
+  | { status: 'active'; binding: RuntimeBinding }
+  | { status: 'closing'; binding: RuntimeBinding }
+  | { status: 'terminal'; error: Error };
+
+type CloseBinding = (binding: RuntimeBinding, error?: Error) => void;
+
+export type DevRuntimeSessionManager = {
+  getState(): ControllerState;
+  getActiveBinding(): RuntimeBinding | undefined;
+  observeClose(server: RsbuildDevServer): void;
+  assertCanStart(): void;
+  createBinding(
+    server: RsbuildDevServer,
+    runtime: ReactRouterDevRuntime
+  ): RuntimeBinding;
+  bindCloseObservation(binding: RuntimeBinding): void;
+  markClosing(binding: RuntimeBinding): void;
+  terminate(binding: RuntimeBinding, error: Error): void;
+};
+
+export const createDevRuntimeSessionManager = (
+  closeBinding: CloseBinding
+): DevRuntimeSessionManager => {
+  let state: ControllerState = { status: 'idle' };
+  let nextSessionId = 1;
+  const closeObservationByServer = new WeakMap<
+    RsbuildDevServer,
+    CloseObservation
+  >();
+
+  const getState = (): ControllerState => state;
+
+  const getActiveBinding = (): RuntimeBinding | undefined =>
+    state.status === 'active' ? state.binding : undefined;
+
+  const isCurrentBinding = (binding: RuntimeBinding): boolean =>
+    (state.status === 'active' || state.status === 'closing') &&
+    state.binding === binding;
+
+  const completeClose = (binding: RuntimeBinding): void => {
+    if (!isCurrentBinding(binding)) {
+      return;
+    }
+    if (state.status === 'active') {
+      closeBinding(binding);
+    }
+    state = { status: 'idle' };
+  };
+
+  const failClose = (binding: RuntimeBinding, cause: unknown): void => {
+    if (!isCurrentBinding(binding)) {
+      return;
+    }
+    const error = new Error(
+      `[${PLUGIN_NAME}] The previous development server failed to close. Restart the process before retrying because Rsbuild may not have finished tearing down its compiler and watchers.`,
+      { cause }
+    );
+    closeBinding(binding, error);
+    state = { status: 'terminal', error };
+  };
+
+  const applyCloseOutcome = (
+    observation: CloseObservation,
+    outcome: CloseOutcome
+  ): void => {
+    observation.outcome = outcome;
+    const { binding } = observation;
+    if (!binding) {
+      return;
+    }
+    if (outcome.ok) {
+      completeClose(binding);
+    } else {
+      failClose(binding, outcome.cause);
+    }
+    observation.binding = undefined;
+  };
+
+  const observeClose = (server: RsbuildDevServer): CloseObservation => {
+    const existing = closeObservationByServer.get(server);
+    if (existing) {
+      return existing;
+    }
+    const observation: CloseObservation = {};
+    const close = server.close.bind(server);
+    server.close = () => {
+      if (observation.promise) {
+        return observation.promise;
+      }
+      observation.promise = runPluginEffect(
+        tryPluginPromise(close).pipe(
+          Effect.tap(() =>
+            tryPluginSync(() => applyCloseOutcome(observation, { ok: true }))
+          ),
+          Effect.catchAll(cause =>
+            tryPluginSync(() =>
+              applyCloseOutcome(observation, { ok: false, cause })
+            ).pipe(Effect.zipRight(Effect.fail(cause)))
+          )
+        )
+      );
+      return observation.promise;
+    };
+    closeObservationByServer.set(server, observation);
+    return observation;
+  };
+
+  return {
+    getState,
+    getActiveBinding,
+
+    observeClose(server: RsbuildDevServer): void {
+      observeClose(server);
+    },
+
+    assertCanStart(): void {
+      if (state.status === 'terminal') {
+        throw state.error;
+      }
+      if (state.status === 'active') {
+        throw new Error(
+          `[${PLUGIN_NAME}] A development server is already active. Await its close() before calling createDevServer() again. If startup failed before returning the server, restart the process before retrying.`
+        );
+      }
+      if (state.status === 'closing') {
+        throw new Error(
+          `[${PLUGIN_NAME}] The previous development server is still closing. Await its close() before calling createDevServer() again.`
+        );
+      }
+    },
+
+    createBinding(
+      server: RsbuildDevServer,
+      runtime: ReactRouterDevRuntime
+    ): RuntimeBinding {
+      const binding = { id: nextSessionId++, server, runtime };
+      state = { status: 'active', binding };
+      return binding;
+    },
+
+    bindCloseObservation(binding: RuntimeBinding): void {
+      const observation = observeClose(binding.server);
+      observation.binding = binding;
+      if (observation.outcome) {
+        applyCloseOutcome(observation, observation.outcome);
+      }
+    },
+
+    markClosing(binding: RuntimeBinding): void {
+      if (isCurrentBinding(binding)) {
+        state = { status: 'closing', binding };
+      }
+    },
+
+    terminate(binding: RuntimeBinding, error: Error): void {
+      if (!isCurrentBinding(binding)) {
+        return;
+      }
+      closeBinding(binding, error);
+      state = { status: 'terminal', error };
+    },
+  };
+};

package/src/dev-server.ts

@@ -0,0 +1,88 @@
+import type { IncomingMessage, ServerResponse } from 'node:http';
+import type { RsbuildConfig } from '@rsbuild/core';
+import type { ServerBuild } from 'react-router';
+
+export type ServerSetup = Exclude<
+  NonNullable<NonNullable<RsbuildConfig['server']>['setup']>,
+  unknown[]
+>;
+
+export type DevServerMiddleware = (
+  req: IncomingMessage,
+  res: ServerResponse,
+  next: (err?: unknown) => void
+) => Promise<void>;
+
+type RequestHandler = (request: Request) => Response | Promise<Response>;
+type BuildProvider = () => Promise<ServerBuild>;
+
+export type DevServerMiddlewareDependencies = {
+  loadBuild: BuildProvider;
+  createRequestHandler?: (
+    build: BuildProvider,
+    mode: 'development'
+  ) => RequestHandler;
+  createRequestListener?: (
+    handler: RequestHandler
+  ) => (req: IncomingMessage, res: ServerResponse) => void | Promise<void>;
+};
+
+export const createDevServerMiddleware = (
+  dependencies: DevServerMiddlewareDependencies
+): DevServerMiddleware => {
+  let listenerPromise:
+    | Promise<
+        (req: IncomingMessage, res: ServerResponse) => void | Promise<void>
+      >
+    | undefined;
+
+  const getListener = () => {
+    listenerPromise ??= (async () => {
+      const createRequestHandler =
+        dependencies.createRequestHandler ??
+        (await import('react-router')).createRequestHandler;
+      const createRequestListener =
+        dependencies.createRequestListener ??
+        (await import('@remix-run/node-fetch-server')).createRequestListener;
+      const requestHandler = createRequestHandler(
+        dependencies.loadBuild,
+        'development'
+      );
+      return createRequestListener(request => requestHandler(request));
+    })();
+    return listenerPromise;
+  };
+
+  // Warm the handler imports now so the first request does not pay them.
+  // On failure, reset so the first real request retries and surfaces the
+  // error through the middleware's own error path.
+  void getListener().catch(() => {
+    listenerPromise = undefined;
+  });
+
+  return async (req, res, next): Promise<void> => {
+    try {
+      const listener = await getListener();
+      await listener(req, res);
+    } catch (error) {
+      next(error);
+    }
+  };
+};
+
+export const createReactRouterDevServerSetup = ({
+  loadBuild,
+}: {
+  loadBuild: BuildProvider;
+}): ServerSetup =>
+  function reactRouterDevServerSetup(context) {
+    if (context.action !== 'dev') {
+      return;
+    }
+    // The returned callback runs after Rsbuild registers its built-in
+    // middlewares, so static assets are served before the React Router
+    // request handler.
+    return () => {
+      context.server.middlewares.use(createDevServerMiddleware({ loadBuild }));
+    };
+  };

package/src/effect-runtime.ts

@@ -0,0 +1,130 @@
+import * as Cause from 'effect/Cause';
+import * as Duration from 'effect/Duration';
+import * as Effect from 'effect/Effect';
+import * as Exit from 'effect/Exit';
+import * as Fiber from 'effect/Fiber';
+import * as Option from 'effect/Option';
+
+export const DEV_BACKGROUND_STARTUP_DELAY_MS = 3_000;
+
+export const normalizeEffectError = (cause: unknown): Error =>
+  cause instanceof Error ? cause : new Error(String(cause));
+
+const normalizeEffectCause = <E>(cause: Cause.Cause<E>): Error => {
+  const failure = Cause.failureOption(cause);
+  return normalizeEffectError(
+    Option.isSome(failure) ? failure.value : Cause.squash(cause)
+  );
+};
+
+export const runPluginEffect = async <A, E>(
+  effect: Effect.Effect<A, E, never>
+): Promise<A> => {
+  const exit = await Effect.runPromiseExit(effect);
+  if (Exit.isSuccess(exit)) {
+    return exit.value;
+  }
+  throw normalizeEffectCause(exit.cause);
+};
+
+export const tryPluginSync = <A>(
+  evaluate: () => A
+): Effect.Effect<A, Error, never> =>
+  Effect.try({
+    try: evaluate,
+    catch: normalizeEffectError,
+  });
+
+export const tryPluginPromise = <A>(
+  evaluate: () => PromiseLike<A> | A
+): Effect.Effect<A, Error, never> =>
+  Effect.tryPromise({
+    try: () => Promise.resolve(evaluate()),
+    catch: normalizeEffectError,
+  });
+
+type DelayedPluginTask = {
+  schedule(): void;
+  reschedule(): void;
+  cancelEffect(): Effect.Effect<void, Error, never>;
+  cancel(): Promise<void>;
+};
+
+export const createDelayedPluginTask = ({
+  delayMs,
+  run,
+  onError,
+}: {
+  delayMs: number;
+  run: () => Effect.Effect<void, Error, never>;
+  onError: (error: Error) => void;
+}): DelayedPluginTask => {
+  let activeFiber: ReturnType<typeof Effect.runFork> | undefined;
+  let version = 0;
+
+  const cancelActiveEffect = (): Effect.Effect<void, Error, never> =>
+    Effect.sync(() => {
+      const fiber = activeFiber;
+      activeFiber = undefined;
+      return fiber;
+    }).pipe(
+      Effect.flatMap(fiber =>
+        fiber ? Fiber.interrupt(fiber).pipe(Effect.asVoid) : Effect.void
+      )
+    );
+
+  const cancelEffect = (): Effect.Effect<void, Error, never> =>
+    Effect.sync(() => {
+      version += 1;
+    }).pipe(Effect.zipRight(cancelActiveEffect()));
+
+  const start = (taskVersion: number): void => {
+    if (activeFiber || version !== taskVersion) {
+      return;
+    }
+
+    let fiber: ReturnType<typeof Effect.runFork>;
+    fiber = Effect.runFork(
+      Effect.sleep(Duration.millis(delayMs)).pipe(
+        Effect.zipRight(Effect.suspend(run)),
+        Effect.catchAll(error =>
+          Effect.sync(() => {
+            onError(error);
+          })
+        ),
+        Effect.ensuring(
+          Effect.sync(() => {
+            if (activeFiber === fiber) {
+              activeFiber = undefined;
+            }
+          })
+        )
+      )
+    );
+    activeFiber = fiber;
+  };
+
+  return {
+    schedule(): void {
+      if (activeFiber) {
+        return;
+      }
+      version += 1;
+      start(version);
+    },
+
+    reschedule(): void {
+      version += 1;
+      const taskVersion = version;
+      void runPluginEffect(cancelActiveEffect())
+        .then(() => start(taskVersion))
+        .catch(onError);
+    },
+
+    cancelEffect,
+
+    async cancel(): Promise<void> {
+      await runPluginEffect(cancelEffect());
+    },
+  };
+};

package/src/export-utils.ts

@@ -0,0 +1,278 @@
+import { readFile, stat } from 'node:fs/promises';
+import { rspack } from '@rsbuild/core';
+import { langFromPath, parse, type ParseOptions } from 'yuku-parser';
+import { setBoundedCacheEntry } from './bounded-cache.js';
+import {
+  getExportedName,
+  getIdentifierNamesFromPattern,
+  getProgram,
+  type AnyNode,
+  type ProgramNode,
+} from './route-ast.js';
+
+type ExportInfo = {
+  readonly exportNames: readonly string[];
+  readonly exportAllModules: readonly string[];
+};
+
+type RouteModuleAnalysis = {
+  readonly code: string;
+  readonly exports: readonly string[];
+  readonly exportAllModules: readonly string[];
+};
+
+type RouteModuleAnalysisCacheEntry = {
+  mtimeMs: number;
+  size: number;
+  analysis: Promise<RouteModuleAnalysis>;
+};
+
+const exportInfoCache = new Map<string, Promise<ExportInfo>>();
+const routeModuleAnalysisCache = new Map<
+  string,
+  RouteModuleAnalysisCacheEntry
+>();
+
+const MAX_EXPORT_UTILS_CACHE_ENTRIES = 2048;
+
+const stripResourcePathQuery = (resourcePath: string): string =>
+  resourcePath.replace(/[?#].*$/, '');
+
+type TypeScriptParseLang = Extract<
+  NonNullable<ParseOptions['lang']>,
+  'ts' | 'tsx'
+>;
+
+const getExportAnalysisCode = (
+  code: string,
+  resourcePath: string,
+  lang: TypeScriptParseLang
+): string =>
+  rspack.experiments.swc.transformSync(code, {
+    filename: resourcePath,
+    jsc: {
+      parser: {
+        syntax: 'typescript',
+        tsx: lang === 'tsx',
+      },
+    },
+  }).code;
+
+const getParseErrors = (result: ReturnType<typeof parse>) =>
+  result.diagnostics.filter(diagnostic => diagnostic.severity === 'error');
+
+const getParseErrorMessage = (
+  errors: ReturnType<typeof getParseErrors>
+): string => errors.map(error => error.message).join('\n');
+
+const parseProgram = (code: string, resourcePath?: string): ProgramNode => {
+  const sourcePath = resourcePath
+    ? stripResourcePathQuery(resourcePath)
+    : undefined;
+  const lang = sourcePath ? langFromPath(sourcePath) : 'tsx';
+  const result = parse(code, {
+    sourceType: 'module',
+    lang,
+  });
+  const errors = getParseErrors(result);
+  if (errors.length === 0) {
+    return getProgram(result);
+  }
+  if (!sourcePath || (lang !== 'ts' && lang !== 'tsx')) {
+    throw new Error(getParseErrorMessage(errors));
+  }
+
+  const normalizedCode = getExportAnalysisCode(code, sourcePath, lang);
+  const normalizedResult = parse(normalizedCode, {
+    sourceType: 'module',
+    lang: 'js',
+  });
+  const normalizedErrors = getParseErrors(normalizedResult);
+  if (normalizedErrors.length > 0) {
+    throw new Error(getParseErrorMessage(normalizedErrors));
+  }
+  return getProgram(normalizedResult);
+};
+
+const getExportInfoCacheKey = (
+  code: string,
+  resourcePath?: string
+): string => {
+  const lang = resourcePath
+    ? langFromPath(stripResourcePathQuery(resourcePath))
+    : 'inline';
+  return `${lang}\0${code}`;
+};
+
+const cachePromiseOnReject = <T>(
+  promise: Promise<T>,
+  invalidate: () => void
+): Promise<T> =>
+  promise.catch(error => {
+    invalidate();
+    throw error;
+  });
+
+const isTypeOnlyExport = (node: AnyNode): boolean =>
+  node.exportKind === 'type' ||
+  node.type === 'TSExportAssignment' ||
+  node.declaration?.declare === true ||
+  (node.type === 'ExportDefaultDeclaration' &&
+    node.declaration?.type === 'TSInterfaceDeclaration');
+
+export const collectProgramExportNames = (program: ProgramNode): string[] => {
+  const exportNames = new Set<string>();
+  for (const statement of program.body ?? []) {
+    if (isTypeOnlyExport(statement)) {
+      continue;
+    }
+
+    if (statement.type === 'ExportAllDeclaration') {
+      const exported = getExportedName(statement.exported);
+      if (exported) {
+        exportNames.add(exported);
+      }
+      continue;
+    }
+
+    if (statement.type === 'ExportDefaultDeclaration') {
+      exportNames.add('default');
+      continue;
+    }
+
+    if (statement.type !== 'ExportNamedDeclaration') {
+      continue;
+    }
+    const declaration = statement.declaration;
+    if (declaration) {
+      if (declaration.type === 'VariableDeclaration') {
+        for (const declarator of declaration.declarations ?? []) {
+          for (const name of getIdentifierNamesFromPattern(declarator.id)) {
+            exportNames.add(name);
+          }
+        }
+      } else if (
+        (declaration.type === 'FunctionDeclaration' ||
+          declaration.type === 'ClassDeclaration' ||
+          declaration.type === 'TSEnumDeclaration') &&
+        declaration.id?.name
+      ) {
+        exportNames.add(declaration.id.name);
+      }
+      continue;
+    }
+
+    for (const specifier of statement.specifiers ?? []) {
+      if (specifier.exportKind === 'type') {
+        continue;
+      }
+      const exported = getExportedName(specifier.exported);
+      if (exported) {
+        exportNames.add(exported);
+      }
+    }
+  }
+  return Array.from(exportNames);
+};
+
+const collectExportAllModules = (program: AnyNode): string[] => {
+  const modules: string[] = [];
+  for (const statement of program.body ?? []) {
+    if (
+      statement.type !== 'ExportAllDeclaration' ||
+      isTypeOnlyExport(statement)
+    ) {
+      continue;
+    }
+    if (statement.exported) {
+      continue;
+    }
+    const source = statement.source?.value;
+    if (typeof source === 'string') {
+      modules.push(source);
+    }
+  }
+  return modules;
+};
+
+export const getExportNames = async (
+  code: string,
+  resourcePath?: string
+): Promise<readonly string[]> => {
+  return (await getExportNamesAndExportAll(code, resourcePath)).exportNames;
+};
+
+export const getExportNamesAndExportAll = async (
+  code: string,
+  resourcePath?: string
+): Promise<ExportInfo> => {
+  const cacheKey = getExportInfoCacheKey(code, resourcePath);
+  const cached = exportInfoCache.get(cacheKey);
+  if (cached) {
+    return cached;
+  }
+
+  const exportInfo = (async () => {
+    const program = parseProgram(code, resourcePath);
+    return {
+      exportNames: collectProgramExportNames(program),
+      exportAllModules: collectExportAllModules(program),
+    };
+  })();
+
+  let trackedExportInfo: Promise<ExportInfo>;
+  trackedExportInfo = cachePromiseOnReject(exportInfo, () => {
+    if (exportInfoCache.get(cacheKey) === trackedExportInfo) {
+      exportInfoCache.delete(cacheKey);
+    }
+  });
+
+  setBoundedCacheEntry(
+    exportInfoCache,
+    cacheKey,
+    trackedExportInfo,
+    MAX_EXPORT_UTILS_CACHE_ENTRIES
+  );
+  return trackedExportInfo;
+};
+
+export const getRouteModuleAnalysis = async (
+  resourcePath: string
+): Promise<RouteModuleAnalysis> => {
+  const stats = await stat(resourcePath);
+  const cached = routeModuleAnalysisCache.get(resourcePath);
+  if (cached?.mtimeMs === stats.mtimeMs && cached.size === stats.size) {
+    return cached.analysis;
+  }
+
+  const analysis = (async () => {
+    const source = await readFile(resourcePath, 'utf8');
+    const program = parseProgram(source, resourcePath);
+    return {
+      code: source,
+      exports: collectProgramExportNames(program),
+      exportAllModules: collectExportAllModules(program),
+    };
+  })();
+
+  let trackedAnalysis: Promise<RouteModuleAnalysis>;
+  trackedAnalysis = cachePromiseOnReject(analysis, () => {
+    if (
+      routeModuleAnalysisCache.get(resourcePath)?.analysis === trackedAnalysis
+    ) {
+      routeModuleAnalysisCache.delete(resourcePath);
+    }
+  });
+
+  setBoundedCacheEntry(
+    routeModuleAnalysisCache,
+    resourcePath,
+    {
+      mtimeMs: stats.mtimeMs,
+      size: stats.size,
+      analysis: trackedAnalysis,
+    },
+    MAX_EXPORT_UTILS_CACHE_ENTRIES
+  );
+  return trackedAnalysis;
+};