Merge branch 'renovate/modern' of github.com:web-infra-dev/modern.js into renovate/modern

Author: caohuilin

.changeset/good-cars-knock.md

@@ -0,0 +1,7 @@
+---
+'@modern-js/app-tools': patch
+'@modern-js/prod-server': patch
+---
+
+chore: support serve command use custom serve launcher
+chore: 支持 serve 命令使用自定义启动器

packages/cli/flight-server-transform-plugin/Cargo.lock

@@ -2,13 +2,14 @@
 title: entry.[tj]s
 sidebar_position: 4
 ---
-# entry.[tj]s
+
+# entry.[tj]sx
 
 :::info
 Using this file requires enabling [source.enableCustomEntry](/configure/app/source/enable-custom-entry).
 :::
 
-Normally, the [`routes/`](/apis/app/hooks/src/routes.html) and [`App.[tj]sx`](/apis/app/hooks/src/app) hook files can meet our needs. When we need to add custom behavior before component rendering or take full control of the webpack packaging entry, we can create `entry.[tj]s` file in the src or entry directory. Here are two cases for discussion:
+Normally, the [`routes/`](/apis/app/hooks/src/routes.html) and [`App.[tj]sx`](/apis/app/hooks/src/app) hook files can meet our needs. When we need to add custom behavior before component rendering or take full control of the webpack packaging entry, we can create `entry.[tj]s` file in the src or entry directory. Here are two cases for discussion。
 
 ## Add custom behavior before Render
 

packages/document/main-doc/docs/en/apis/app/hooks/src/entry.mdx

@@ -5,6 +5,10 @@ sidebar_position: 5
 
 # entry.server.[tj]sx
 
+:::info
+Using this file requires enabling [source.enableCustomEntry](/configure/app/source/enable-custom-entry).
+:::
+
 When the project initiates `server.ssr`, Modern.js generates a default Server-Side entry. The sample code is as follows:
 
 ```tsx title="entry.server.tsx"

packages/document/main-doc/docs/en/apis/app/hooks/src/entry.server.mdx

@@ -7,9 +7,7 @@ title: enableCustomEntry
 - **Type:** `boolean`
 - **Default:** `false`
 
-This option is used for custom Modern.js entries.
-
-When this option is enabled, Modern.js will use the `src/entry.[jt]sx` file as the project's entry point. For more details, refer to [Entries](/guides/concept/entries.html).
+This option is used for custom Modern.js entries. When this option is enabled, Modern.js will try to use the `src/entry.[jt]sx` file and `src/entry.server.[jt]sx` as the project's entry point.
 
 ## Example
 
@@ -39,3 +37,32 @@ beforeRender().then(() => {
   render(<ModernRoot />);
 });
 ```
+
+:::info
+For more browser entry details, refer to [Entries](/guides/concept/entries.html).
+:::
+
+
+create `src/entry.server.tsx` file，add custom behavior for rendering responses：
+
+```tsx
+import { renderString, createRequestHandler } from '@edenx/runtime/ssr/server';
+import type { HandleRequest } from '@edenx/runtime/ssr/server';
+
+const handleRequest: HandleRequest = async (request, ServerRoot, options) => {
+  // do something before rendering
+  const body = await renderString(request, <ServerRoot />, options);
+
+  const newBody = body + '<div>Byte-Dance</div>';
+
+  return new Response(newBody, {
+    headers: {
+      'content-type': 'text/html; charset=UTF-8',
+      'x-custom-header': 'abc',
+    },
+  });
+};
+
+export default createRequestHandler(handleRequest);
+```
+

packages/document/main-doc/docs/en/configure/app/source/enable-custom-entry.mdx

@@ -2,14 +2,15 @@
 title: entry.[tj]s
 sidebar_position: 4
 ---
-# entry.[tj]s
 
-通常情况下[`routes/`](/apis/app/hooks/src/routes.html) 和 [`App.[tj]sx`](/apis/app/hooks/src/app) 钩子文件已经能满足我们的需求，当我们需要在组件渲染之前添加自定义行为或者完全接管 webpack 打包入口时，可以在 `src` 或者入口目录下放置 `entry.[tj]s`。 下面有分两种情况进行讨论：
+# entry.[tj]sx
 
 :::info
 使用该文件需要开启 [source.enableCustomEntry](/configure/app/source/enable-custom-entry)。
 :::
 
+通常情况下[`routes/`](/apis/app/hooks/src/routes.html) 和 [`App.[tj]sx`](/apis/app/hooks/src/app) 钩子文件已经能满足我们的需求，当我们需要在组件渲染之前添加自定义行为或者完全接管 webpack 打包入口时，可以在 `src` 或者入口目录下放置 `entry.[tj]s`。下面分两种情况进行讨论。
+
 ## 在组件渲染前添加自定义行为
 
 在 `src/entry.[tj]s` 中这样实现：

packages/document/main-doc/docs/zh/apis/app/hooks/src/entry.mdx

@@ -5,6 +5,10 @@ sidebar_position: 5
 
 # entry.server.[tj]sx
 
+:::info
+使用该文件需要开启 [source.enableCustomEntry](/configure/app/source/enable-custom-entry)。
+:::
+
 当项目开启 `server.ssr` 时，Modern.js 生成一个默认的 Server-Side 入口。示例代码如下：
 
 ```tsx title="entry.server.tsx"
@@ -28,7 +32,7 @@ export default createRequestHandler(handleRequest);
 
 ## 添加自定义行为
 
-如果用户需自定义 Server-Side Rendering 入口，可以在 `src/entry.server.ts`、`src/{entryName}/entry.server.ts` 中自定义 server 入口
+如果用户需自定义 Server-Side Rendering 入口，可以在 `src/entry.server.ts`、`src/{entryName}/entry.server.ts` 中自定义 server 入口。
 
 ```tsx title="src/entry.server.tsx"
 import { renderString, createRequestHandler } from '@edenx/runtime/ssr/server';

packages/document/main-doc/docs/zh/apis/app/hooks/src/entry.server.mdx

@@ -7,9 +7,7 @@ title: enableCustomEntry
 - **类型：** `boolean`
 - **默认值：** `false`
 
-该选项用于使用 Modern.js 自定义入口场景。
-
-开启此选项后，Modern.js 将使用 `src/entry.[jt]sx` 文件作为项目的入口， 具体使用姿势可参考[页面入口](/guides/concept/entries.html)。
+该选项用于使用 Modern.js 自定义入口场景。开启此选项后，Modern.js 将尝试使用 `src/entry.[jt]sx` 与 `src/entry.server.[jt]sx` 文件作为项目的入口。
 
 ## 示例
 
@@ -23,7 +21,7 @@ export default defineConfig({
 });
 ```
 
-创建 `src/entry.tsx` 文件：
+创建 `src/entry.tsx` 文件，在渲染前执行某些行为：
 
 ```tsx
 import { createRoot } from '@modern-js/runtime/react';
@@ -39,3 +37,31 @@ beforeRender().then(() => {
   render(<ModernRoot />);
 });
 ```
+
+:::info
+更多浏览器端入口相关内容可参考[页面入口](/guides/concept/entries.html)。
+:::
+
+创建 `src/entry.server.tsx` 文件，为渲染响应添加自定义行为：
+
+```tsx
+import { renderString, createRequestHandler } from '@edenx/runtime/ssr/server';
+import type { HandleRequest } from '@edenx/runtime/ssr/server';
+
+const handleRequest: HandleRequest = async (request, ServerRoot, options) => {
+  // do something before rendering
+  const body = await renderString(request, <ServerRoot />, options);
+
+  const newBody = body + '<div>Byte-Dance</div>';
+
+  return new Response(newBody, {
+    headers: {
+      'content-type': 'text/html; charset=UTF-8',
+      'x-custom-header': 'abc',
+    },
+  });
+};
+
+export default createRequestHandler(handleRequest);
+```
+

packages/document/main-doc/docs/zh/configure/app/source/enable-custom-entry.mdx

@@ -31,7 +31,7 @@
     "@modern-js/types": "workspace:*",
     "@swc/helpers": "0.5.13",
     "react-server-dom-webpack": "19.0.0",
-    "rsc-html-stream": "0.0.3"
+    "rsc-html-stream": "0.0.4"
   },
   "devDependencies": {
     "@modern-js/server-core": "workspace:*",

packages/runtime/render/package.json

@@ -17,7 +17,7 @@ import { registerCompiler } from '../utils/register';
 import { generateRoutes } from '../utils/routes';
 import type { DevOptions } from '../utils/types';
 
-export interface ExtraServerOptions {
+interface ExtraServerOptions {
   applyPlugins?: ApplyPlugins;
 }
 

packages/solutions/app-tools/src/commands/dev.ts

@@ -94,8 +94,8 @@ export const serverCommand = (
     .option('--api-only', i18n.t(localeKeys.command.dev.apiOnly))
     .option('-c --config <config>', i18n.t(localeKeys.command.shared.config))
     .action(async () => {
-      const { start } = await import('./serve.js');
-      await start(api);
+      const { serve } = await import('./serve.js');
+      await serve(api);
     });
 };
 

packages/solutions/app-tools/src/commands/index.ts

@@ -12,7 +12,14 @@ import type { AppNormalizedConfig, AppTools } from '../types';
 import { loadServerPlugins } from '../utils/loadPlugins';
 import { printInstructions } from '../utils/printInstructions';
 
-export const start = async (api: CLIPluginAPI<AppTools<'shared'>>) => {
+type ExtraServerOptions = {
+  launcher?: typeof createProdServer;
+};
+
+export const serve = async (
+  api: CLIPluginAPI<AppTools<'shared'>>,
+  serverOptions?: ExtraServerOptions,
+) => {
   const appContext = api.getAppContext();
   const userConfig = api.getNormalizedConfig();
   const hooks = api.getHooks();
@@ -50,7 +57,7 @@ export const start = async (api: CLIPluginAPI<AppTools<'shared'>>) => {
 
   const pluginInstances = await loadServerPlugins(api, appDirectory, metaName);
 
-  const app = await createProdServer({
+  const app = await (serverOptions?.launcher || createProdServer)({
     metaName,
     pwd: distDirectory,
     config: {

packages/solutions/app-tools/src/commands/serve.ts

@@ -197,6 +197,7 @@ export { mergeConfig } from '@modern-js/core';
 export type { RuntimeUserConfig } from './types/config';
 
 export { dev } from './commands/dev';
+export { serve } from './commands/serve';
 export type { DevOptions } from './utils/types';
 export { generateWatchFiles } from './utils/generateWatchFiles';