feat: update server generator (#7182)

Co-authored-by: Belinda Cao <[email protected]>

Author: keepview

.changeset/pink-days-begin.md

@@ -0,0 +1,7 @@
+---
+'@modern-js/server-generator': patch
+'@modern-js/generator-common': patch
+---
+
+feat: update server generator
+feat: 更新 server 生成器

packages/document/main-doc/docs/en/guides/advanced-features/web-server.mdx

@@ -12,10 +12,15 @@ Modern.js encapsulates most server-side capabilities required by projects, typic
 You must ensure that the Modern.js version is x.67.5 or above.
 :::
 
-To start a custom web server, the following steps need to be taken:
-1. Add and install the dependencies `@modern-js/server-runtime` and `ts-node` to `devDependencies`.
-2. Add `server` to the `include` section of `tsconfig`.
-3. Create a file `server/modern.server.ts` in the project directory, where you can write custom logic.
+Developers can execute the `pnpm run new` command in the project root directory to start the "Custom Web Server" feature:
+
+```bash
+? Select operation: Create project element
+? Select element type: Create "Custom Web Server" source directory
+```
+
+After executing the command, a `server/modern.server.ts` file will be automatically created in the project directory, where you can write custom logic.
+
 
 ## Capabilities of the Custom Web Server
 
@@ -230,6 +235,13 @@ export default () => {
 The legacy API is compatible but no longer recommended. For extending server capabilities, please refer to [Custom Web Server](/guides/advanced-features/web-server.html#custom-web-server). For migration guidelines, see [Migrating to the New Version of Custom Web Server](/guides/advanced-features/web-server.html#migrate-to-the-new-version-of-custom-web-server).
 :::
 
+### Enable
+To enable the custom Web Server feature, follow these steps:
+1. Add `@modern-js/plugin-server`、`tsconfig-paths` and `ts-node` to `devDependencies` and install them.
+2. Add `server` to the `include` section of `tsconfig`.
+3. Register the `@modern-js/plugin-server` plugin in `modern.config.ts`.
+4. Create a `server/index.ts` file in the project directory, where you can write custom logic.
+
 ### Unstable Middleware
 
 Modern.js supports adding rendering middleware to the Web Server, allowing custom logic execution before and after processing page routes.

packages/document/main-doc/docs/zh/guides/advanced-features/web-server.mdx

@@ -12,10 +12,15 @@ Modern.js 将大部分项目需要的服务端能力都进行了封装，通常
 必须确保 Modern.js 版本是 x.67.5 及以上。
 :::
 
-开启自定义 Web Server 功能，需要执行以下步骤：
-1. devDependencies 增加 `@modern-js/server-runtime` 及 `ts-node`依赖并安装。
-2. `tsconfig` 的 `include` 中添加 `server`。
-3. 项目目录下创建 `server/modern.server.ts` 文件，可以在这个文件中编写自定义逻辑。
+开发者可以在项目根目录执行 `pnpm run new` 命令，开启「自定义 Web Server」功能：
+
+```bash
+? 请选择你想要的操作 创建工程元素
+? 请选择创建元素类型 新建「自定义 Web Server」源码目录
+```
+
+执行命令后，项目目录下会自动创建 `server/modern.server.ts` 文件，可以在这个文件中编写自定义逻辑。
+
 
 ## 自定义 Web Server 能力
 
@@ -227,6 +232,14 @@ export default () => {
 旧版 API 兼容但不再推荐使用，扩展 Server 能力请移步 [自定义 Web Server](/guides/advanced-features/web-server.html)，迁移指南参考 [迁移至新版自定义 Web Server](/guides/advanced-features/web-server.html#迁移至新版自定义-web-server)。
 :::
 
+### 开启
+开启自定义 Web Server 功能，需要执行以下步骤：
+1. devDependencies 增加 `@modern-js/plugin-server`、`tsconfig-paths` 及 `ts-node`依赖并安装。
+2. `tsconfig` 的 `include` 中添加 `server`。
+3. `modern.config.ts` 中注册 `@modern-js/plugin-server` 插件。
+4. 项目目录下创建 `server/index.ts` 文件，可以在这个文件中编写自定义逻辑。
+
+
 ### Unstable Middleware
 
 Modern.js 支持为 Web Server 添加渲染中间件，支持在处理页面路由的前后执行自定义逻辑。

packages/generator/generator-common/src/newAction/mwa/index.ts

@@ -175,7 +175,7 @@ export const MWANewActionPluginName: Record<
   Record<string, string>
 > = {
   [ActionType.Element]: {
-    [ActionElement.Server]: 'serverPlugin',
+    [ActionElement.Server]: '',
   },
   [ActionType.Function]: {
     [ActionFunction.TailwindCSS]: 'tailwindcssPlugin',

packages/generator/generators/server-generator/src/index.ts

@@ -49,7 +49,7 @@ const handleTemplateFile = async (
   }
 
   const language = isTsProject(appDir) ? Language.TS : Language.JS;
-  const serverPlugin = '@modern-js/plugin-server';
+  const serverPlugin = '@modern-js/server-runtime';
   await appApi.runSubGenerator(
     getGeneratorPath(DependenceGenerator, context.config.distTag, [__dirname]),
     undefined,

packages/generator/generators/server-generator/templates/base-template/js/server/index.js.handlebars

@@ -0,0 +1,33 @@
+import { defineServerConfig } from '@modern-js/server-runtime';
+
+const renderTiming = async (c, next) => {
+  const start = Date.now();
+
+  await next();
+
+  console.log('render-timing', Date.now() - start);
+};
+
+const requestTiming = async (c, next) => {
+  const start = Date.now();
+
+  await next();
+
+  console.log('request-timing', Date.now() - start);
+};
+
+export default defineServerConfig({
+  middlewares: [
+    {
+      name: 'request-timing',
+      handler: requestTiming,
+    },
+  ],
+  renderMiddlewares: [
+    {
+      name: 'render-timing',
+      handler: renderTiming,
+    },
+  ],
+  plugins: [],
+});

packages/generator/generators/server-generator/templates/base-template/js/server/modern.server.js.handlebars

@@ -0,0 +1,36 @@
+import {
+  type MiddlewareHandler,
+  defineServerConfig
+} from '@modern-js/server-runtime';
+
+const renderTiming: MiddlewareHandler = async (c, next) => {
+  const start = Date.now();
+
+  await next();
+
+  console.log('render-timing', Date.now() - start);
+};
+
+const requestTiming: MiddlewareHandler = async (c, next) => {
+  const start = Date.now();
+
+  await next();
+
+  console.log('request-timing', Date.now() - start);
+};
+
+export default defineServerConfig({
+  middlewares: [
+    {
+      name: 'request-timing',
+      handler: requestTiming,
+    },
+  ],
+  renderMiddlewares: [
+    {
+      name: 'render-timing',
+      handler: renderTiming,
+    },
+  ],
+  plugins: [],
+});