fix: ts type error (#43)

SyMind · web-flow · commit 9ca65e89df3d · 2026-04-20T11:25:19.000+08:00
diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml
@@ -29,5 +29,11 @@ jobs:
       - name: Install dependencies
         run: pnpm install
 
+      - name: Build RSC plugin
+        run: pnpm build
+
+      - name: Run typecheck
+        run: pnpm typecheck
+
       - name: Run lint
         run: pnpm lint
diff --git a/examples/client/rsbuild.config.ts b/examples/client/rsbuild.config.ts
@@ -1,7 +1,8 @@
 import { defineConfig } from '@rsbuild/core';
 import { pluginReact } from '@rsbuild/plugin-react';
 import { Layers, pluginRSC } from 'rsbuild-plugin-rsc';
-import type NodeHandler from './server';
+
+type NodeHandler = typeof import('./server/index').default;
 
 export default defineConfig({
   plugins: [pluginReact(), pluginRSC()],
@@ -25,7 +26,11 @@ export default defineConfig({
     },
   },
   server: {
-    setup: ({ server }) => {
+    setup: ({ action, server }) => {
+      if (action !== 'dev') {
+        return;
+      }
+
       // Custom middleware to handle RSC (React Server Components) requests
       server.middlewares.use(async (req, res, next) => {
         const indexModule = await server.environments.server.loadBundle<{
diff --git a/examples/client/server/index.tsx b/examples/client/server/index.tsx
@@ -1,6 +1,8 @@
+import type { IncomingMessage, ServerResponse } from 'node:http';
 import type { ReactFormState } from 'react-dom/client';
 import {
   renderToReadableStream,
+  type ServerEntry,
   type TemporaryReferenceSet,
 } from 'react-server-dom-rspack/server.node';
 import { toNodeHandler } from 'srvx/node';
@@ -15,10 +17,11 @@ export type RscPayload = {
 async function handler(): Promise<Response> {
   let temporaryReferences: TemporaryReferenceSet | undefined;
   const rscOptions = { temporaryReferences };
+  const RscEntry = RSC as ServerEntry<typeof RSC>;
   const root = (
     <>
-      {RSC.entryCssFiles
-        ? RSC.entryCssFiles.map((href) => (
+      {RscEntry.entryCssFiles
+        ? RscEntry.entryCssFiles.map((href) => (
             <link
               key={href}
               rel="stylesheet"
diff --git a/examples/client/tsconfig.json b/examples/client/tsconfig.json
@@ -13,6 +13,7 @@
     "target": "ESNext",
     "lib": ["ESNext", "DOM", "DOM.Iterable"],
     "jsx": "react-jsx",
-    "types": ["webpack-env"]
-  }
+    "types": ["webpack-env", "node"]
+  },
+  "include": ["client", "server", "rsbuild.config.ts", "../../types/**/*.d.ts"]
 }
diff --git a/examples/react-router/src/entry.rsc.tsx b/examples/react-router/src/entry.rsc.tsx
@@ -5,8 +5,9 @@ import {
   decodeAction,
   decodeFormState,
   decodeReply,
-  loadServerAction,
+  loadServerAction as loadServerActionSync,
   renderToReadableStream,
+  type ServerEntry,
 } from 'react-server-dom-rspack/server.node';
 import { toNodeHandler } from 'srvx/node';
 import { generateHTML } from './entry.ssr';
@@ -20,7 +21,7 @@ async function fetchServer(request: Request) {
     decodeAction,
     decodeFormState,
     decodeReply,
-    loadServerAction,
+    loadServerAction: (id) => Promise.resolve(loadServerActionSync(id)),
     request,
     // The app routes.
     routes: routes(),
@@ -36,12 +37,16 @@ async function fetchServer(request: Request) {
 
 async function handler(request: Request): Promise<Response> {
   const response = await fetchServer(request);
+  const layoutEntry = Layout as ServerEntry<typeof Layout>;
   return generateHTML(request, response, {
-    bootstrapScripts: Layout.entryJsFiles,
+    bootstrapScripts: layoutEntry.entryJsFiles,
   });
 }
 
-const handleNodeRequest = toNodeHandler((request) => handler(request));
+const handleNodeRequest = toNodeHandler((request) => handler(request)) as (
+  req: IncomingMessage,
+  res: ServerResponse<IncomingMessage>,
+) => void | Promise<void>;
 
 function shouldBypassRequest(req: IncomingMessage) {
   if (!req.url) {
diff --git a/examples/react-router/src/entry.ssr.tsx b/examples/react-router/src/entry.ssr.tsx
@@ -5,7 +5,7 @@ import { createFromReadableStream } from 'react-server-dom-rspack/client';
 
 type PayloadPromise = Promise<RSCServerPayload> & {
   _deepestRenderedBoundaryId?: string | null;
-  formState?: Promise<unknown>;
+  formState: Promise<unknown>;
 };
 
 const encoder = new TextEncoder();
@@ -20,9 +20,7 @@ function isManifestRequest(url: URL) {
 }
 
 function escapeScript(script: string) {
-  return script
-    .replaceAll('<!--', '<\\!--')
-    .replaceAll('</script', '</\\script');
+  return script.replace(/<!--/g, '<\\!--').replace(/<\/script/g, '<\\/script');
 }
 
 function writeChunk(
diff --git a/examples/react-router/src/routes/root/route.tsx b/examples/react-router/src/routes/root/route.tsx
@@ -1,22 +1,21 @@
 'use server-entry';
 
+import type { ServerEntry } from 'react-server-dom-rspack/server.node';
 import { Outlet } from 'react-router';
 import { Layout as ClientLayout } from './client';
 import './styles.css';
 
 export { ErrorBoundary } from './client';
 
 export function Layout({ children }: { children: React.ReactNode }) {
+  const layoutEntry = Layout as ServerEntry<typeof Layout>;
+
   // This is required for the bundler to inject the necessary CSS assets.
   return (
     <>
-      {
-        // @ts-expect-error -- The plugin injects entryCssFiles on server-entry components at runtime.
-        // Components annotated with 'use server-entry' can access the entryCssFiles property at runtime to inject CSS resources.
-        Layout.entryCssFiles.map((href) => (
-          <link key={href} rel="stylesheet" href={href} precedence="default" />
-        ))
-      }
+      {layoutEntry.entryCssFiles?.map((href) => (
+        <link key={href} rel="stylesheet" href={href} precedence="default" />
+      ))}
       <ClientLayout>{children}</ClientLayout>
     </>
   );
diff --git a/examples/react-router/tsconfig.json b/examples/react-router/tsconfig.json
@@ -14,8 +14,7 @@
     "allowImportingTsExtensions": true,
 
     "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "typeRoots": ["./node_modules/@types", "./types"]
+    "noUnusedParameters": true
   },
-  "include": ["src"]
+  "include": ["src", "../../types/**/*.d.ts"]
 }
diff --git a/examples/server/src/Dialog.tsx b/examples/server/src/Dialog.tsx
@@ -12,7 +12,9 @@ export function Dialog({
   const ref = useRef<HTMLDialogElement | null>(null);
   return (
     <>
-      <button onClick={() => ref.current?.showModal()}>{trigger}</button>
+      <button type="button" onClick={() => ref.current?.showModal()}>
+        {trigger}
+      </button>
       <dialog ref={ref} onSubmit={() => ref.current?.close()}>
         {children}
       </dialog>
diff --git a/examples/server/tsconfig.json b/examples/server/tsconfig.json
@@ -16,8 +16,7 @@
 
     /* type checking */
     "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "typeRoots": ["./node_modules/@types", "./types"]
+    "noUnusedParameters": true
   },
-  "include": ["src"]
+  "include": ["src", "../../types/**/*.d.ts"]
 }
diff --git a/examples/static/src/framework/entry.rsc.tsx b/examples/static/src/framework/entry.rsc.tsx
@@ -7,7 +7,7 @@ import { toNodeHandler } from 'srvx/node';
 import { renderHtml } from './entry.ssr';
 import { parseRenderRequest } from './request';
 import type { RscPayload } from './shared';
-import type { Page } from './ssg';
+import type { Page, PageProps } from './ssg';
 
 function getPages(): Map<string, Page> {
   const contextRequire = import.meta.webpackContext('../pages', {
@@ -43,13 +43,13 @@ async function getPageModule(route: string) {
   }
   const mod = await import(`../pages/${page.name}.tsx`);
   return {
-    Root: mod.default as ServerEntry<React.FC>,
+    Root: mod.default as ServerEntry<React.FC<PageProps>>,
     page,
   };
 }
 
 function buildRscPayload(
-  Root: ServerEntry<React.FC>,
+  Root: ServerEntry<React.FC<PageProps>>,
   page: Page,
 ): { payload: RscPayload; bootstrapScripts?: string[] } {
   const cssLinks = Root.entryCssFiles
diff --git a/examples/static/tsconfig.json b/examples/static/tsconfig.json
@@ -6,7 +6,7 @@
     "skipLibCheck": true,
     "useDefineForClassFields": true,
     "jsx": "react-jsx",
-    "types": ["webpack-env"],
+    "types": ["webpack-env", "node"],
 
     /* modules */
     "module": "ESNext",
@@ -16,8 +16,7 @@
 
     /* type checking */
     "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "typeRoots": ["./node_modules/@types", "./types"]
+    "noUnusedParameters": true
   },
-  "include": ["src"]
+  "include": ["src", "../../types/**/*.d.ts"]
 }
diff --git a/package.json b/package.json
@@ -20,6 +20,7 @@
   "scripts": {
     "build": "rslib",
     "dev": "rslib -w",
+    "typecheck": "pnpm -r exec tsc --noEmit --pretty false",
     "lint": "rslint && prettier -c .",
     "lint:write": "rslint --fix && prettier -w .",
     "test": "cd ./e2e && pnpm test:all"
diff --git a/types/react-server-dom-rspack.d.ts b/types/react-server-dom-rspack.d.ts
@@ -0,0 +1,129 @@
+type RscTemporaryReferenceSet = unknown;
+type RscServerAction = (...args: unknown[]) => unknown;
+
+type RscOptions = {
+  onError?: (error: unknown) => string | undefined;
+  temporaryReferences?: RscTemporaryReferenceSet;
+};
+
+type RscClientOptions = {
+  temporaryReferences?: RscTemporaryReferenceSet;
+};
+
+declare module 'react-server-dom-rspack/client.browser' {
+  export function createFromFetch<T>(
+    promiseForResponse: Promise<Response> | Response,
+    options?: RscClientOptions,
+  ): Promise<T>;
+
+  export function createFromReadableStream<T>(
+    stream: ReadableStream<Uint8Array>,
+    options?: RscClientOptions,
+  ): Promise<T>;
+
+  export function createServerReference<
+    T extends (...args: never[]) => unknown,
+  >(id: string, exportName?: string): T;
+
+  export function createTemporaryReferenceSet(): RscTemporaryReferenceSet;
+
+  export function encodeReply(
+    value: unknown,
+    options?: RscClientOptions,
+  ): Promise<BodyInit>;
+
+  export function registerServerReference<T extends Function>(
+    reference: T,
+    id: string,
+    exportName?: string,
+  ): T;
+
+  export function setFindSourceMapURLCallback(
+    fn: (fileName: string, environmentName: string) => string | undefined,
+  ): void;
+
+  export function setServerCallback(
+    fn: (id: string, args: unknown[]) => Promise<unknown>,
+  ): void;
+}
+
+declare module 'react-server-dom-rspack/client.node' {
+  export * from 'react-server-dom-rspack/client.browser';
+}
+
+declare module 'react-server-dom-rspack/client' {
+  export * from 'react-server-dom-rspack/client.browser';
+}
+
+declare module 'react-server-dom-rspack/server.node' {
+  export type TemporaryReferenceSet = RscTemporaryReferenceSet;
+
+  export type ServerEntry<T> = T & {
+    entryCssFiles?: string[];
+    entryJsFiles?: string[];
+  };
+
+  export function renderToReadableStream(
+    model: unknown,
+    options?: RscOptions,
+  ): ReadableStream<Uint8Array>;
+
+  export function renderToPipeableStream(
+    model: unknown,
+    options?: RscOptions,
+  ): {
+    pipe<T extends import('node:stream').Writable>(destination: T): T;
+    abort(reason?: unknown): void;
+  };
+
+  export function createTemporaryReferenceSet(): RscTemporaryReferenceSet;
+
+  export function decodeReply(
+    body: FormData | string,
+    options?: RscClientOptions,
+  ): Promise<unknown[]>;
+
+  export function decodeAction(
+    body: FormData,
+    serverManifest?: unknown,
+  ): Promise<() => Promise<unknown>>;
+
+  export function decodeFormState(
+    actionResult: unknown,
+    body: FormData,
+    serverManifest?: unknown,
+  ): unknown;
+
+  export function loadServerAction(actionId: string): RscServerAction;
+
+  export function registerServerReference<T extends Function>(
+    reference: T,
+    id: string,
+    exportName?: string,
+  ): T;
+
+  export function registerClientReference<T extends Function>(
+    proxyImplementation: T,
+    id: string,
+    exportName?: string,
+  ): T;
+
+  export function createServerEntry<T>(
+    value: T,
+    resource?: string,
+  ): ServerEntry<T>;
+
+  export function ensureServerActions(actions: unknown[]): void;
+}
+
+declare module '*.css';
+
+interface ImportMeta {
+  hot?: __WebpackModuleApi.Hot;
+}
+
+declare namespace __WebpackModuleApi {
+  interface Hot {
+    on(eventName: string, callback: (...args: unknown[]) => void): void;
+  }
+}
