@modern-js/main-doc 2.39.2 → 2.41.0

package/docs/en/community/contributing-guide.mdx

@@ -178,6 +178,16 @@ pnpm run lint
 
 ---
 
+## Benchmarking
+
+You can input `!bench-framework` or `!bench-module` in the comment area of ​​the PR to do benchmarking on `@modern-js/app-tools` and `@modern-js/module-tools` respectively (you need to have Collaborator and above permissions).
+
+You can focus on metrics related to build time and bundle size based on the comparison table output by comments to assist you in making relevant performance judgments and decisions.
+
+Dependencies installation-related metrics base on publishing process, so the data is relatively lagging and is for reference only.
+
+---
+
 ## Documentation
 
 Currently Modern.js provides documentation in English and Chinese. If you can use Chinese, please update both documents at the same time. Otherwise, just update the English documentation.

package/docs/en/guides/get-started/introduction.mdx

@@ -7,7 +7,7 @@ sidebar_position: 1
 
 **Modern.js is an open source web engineering system from ByteDance**, which provides multiple solutions to help developers solve problems in different development scenarios.
 
-Currently, Modern.js includes three solutions, targeting web application development, npm package development, and web application building:
+Currently, Modern.js includes two solutions, targeting web application development and npm package development:
 
 import { SolutionCards } from '@site/src/components/SolutionCards';
 
@@ -23,11 +23,6 @@ import { SolutionCards } from '@site/src/components/SolutionCards';
       description: 'For npm package development',
       link: 'http://modernjs.dev/module-tools/en/',
     },
-    {
-      title: 'Modern.js Builder',
-      description: 'For web application building',
-      link: 'http://modernjs.dev/builder/en/',
-    },
   ]}
 />
 
@@ -37,18 +32,14 @@ As part of the Modern.js engineering system, each of the above solutions can be
 
 **The current documentation site corresponds to the Modern.js framework**, which is used to developing web applications.
 
-- If you need to develop an npm package, please refer to the [Modern.js Module](https://modernjs.dev/module-tools) documentation.
-- If you need to implement a web development framework based on the Modern.js build tool, please refer to the [Modern.js Builder](https://modernjs.dev/builder) documentation.
+- If you need to develop an npm package, please refer to the [Modern.js Module documentation](https://modernjs.dev/module-tools).
+- If you need a build tool to bundle web applications, [Rsbuild](https://rsbuild.dev/) is recommended.
+- If you need to develop a documentation site, [Rspress](https://rspress.dev/) is recommended.
 
 :::tip
 Since the Modern.js framework is the most widely used, in this documentation site, we will omit "framework" and directly refer to it as Modern.js.
 :::
 
-Modern.js can also be combined with the following solutions:
-
-- If you need to develop a documentation site, [Rspress](https://rspress.dev/) is recommended.
-- If you need to introduce micro-frontend architecture, [Garfish](https://garfishjs.org/) is recommended.
-
 ## Modern.js Framework
 
 **The Modern.js framework is a progressive web framework based on React**. At ByteDance, we use Modern.js to build upper-level frameworks that have supported the development of thousands of web applications.
@@ -86,6 +77,10 @@ Umi is a popular React framework in the Chinese community and serves as the unde
 
 In addition, Modern.js provides richer server-side features, including comprehensive SSR capabilities, integrated BFF development capabilities, and support for custom web servers. These capabilities have been extensively validated by ByteDance in numerous online applications and can be directly used in production environments.
 
+### Remix
+
+Pelease refer to [Modern.js vs Remix](https://github.com/web-infra-dev/modern.js/discussions/4872).
+
 ## Next Step
 
 If you want to learn how to use the Modern.js framework, you can try to [create your first application](/tutorials/first-app/c01-start), or read the [Quick Start](/guides/get-started/quick-start) guide.

package/docs/en/guides/topic-detail/framework-plugin/hook-list.mdx

@@ -84,72 +84,6 @@ The configuration returned by the `config` hook will be collected and merged by
 2. Configuration defined by the plugin through the `config` hook.
 3. Default configuration of Modern.js.
 
-### `validateSchema`
-
-- Functionality: Collect the JSON schema used to validate user configurations in various plugins.
-- Execution phase: After the `config` Hook has run.
-- Hook model: `ParallelWorkflow`
-- Type: `ParallelWorkflow<void, unknown>`
-- Example:
-
-```ts
-import type { CliPlugin } from '@modern-js/core';
-
-export const myPlugin = (): CliPlugin => ({
-  setup(api) {
-    return {
-      validateSchema: () => {
-        return {
-          // target is field
-          target: 'foo',
-          schema: {
-            type: 'string',
-          },
-        };
-      },
-    };
-  },
-});
-```
-
-The returned JSON Schema here is used to validate the configuration information in `modern.config.js`.
-
-For example, the following JSON Schema is returned:
-
-```json
-{
-  "target": "foo",
-  "schema": {
-    "type": "string"
-  }
-}
-```
-
-You can configure it in `modern.config.ts` like this:
-
-```ts title="modern.config.ts"
-export const myPlugin = defineConfig({
-  foo: 'test',
-});
-```
-
-If it is another type, validation will fail and an error will be reported. For example:
-
-```ts title="modern.config.ts"
-export const myPlugin = defineConfig({
-  foo: {},
-});
-```
-
-then throw error:
-
-```
-$ modern dev
-  1 | {
-> 2 |   "foo": {},
-    |   ^^^^^  Property foo is not expected to be here
-```
-
 ### `prepare`
 
 - Functionality: Preparatory process for running the main process.

package/docs/zh/community/contributing-guide.mdx

@@ -177,6 +177,16 @@ pnpm run lint
 
 ---
 
+## Benchmarking
+
+你可以在 PR 的评论区中输入 `!bench-framework` 或 `!bench-module` 分别对 `@modern-js/app-tools` 和 `@modern-js/module-tools` 做性能测试（这需要你具有 Collaborator 及以上的权限）。
+
+你可以根据评论输出的对比表格，重点关注构建时间和产物体积相关的指标，辅助进行相关性能判断与决策。
+
+依赖安装相关指标由于需要前置的发包流程，因此数据相对有滞后性，仅供参考。
+
+---
+
 ## 文档
 
 目前 Modern.js 提供英文和中文文档。如果你熟悉中文，请同时更新中英文文档。否则，只需更新英文文档即可。

package/docs/zh/guides/get-started/introduction.mdx

@@ -7,7 +7,7 @@ sidebar_position: 1
 
 **Modern.js 是字节跳动 Web 工程体系的开源版本**，它提供多个解决方案，来帮助开发者解决不同研发场景下的问题。
 
-目前 Modern.js 包含三个解决方案，分别面向 Web 应用开发场景、npm 包开发场景和 Web 应用构建场景：
+目前 Modern.js 包含两个解决方案，分别面向 Web 应用开发场景 和 npm 包开发场景：
 
 import { SolutionCards } from '@site/src/components/SolutionCards';
 
@@ -23,32 +23,21 @@ import { SolutionCards } from '@site/src/components/SolutionCards';
       description: '易用、高性能的 npm 包开发方案',
       link: 'http://modernjs.dev/module-tools/',
     },
-    {
-      title: 'Modern.js Builder',
-      description: '基于 Rspack 的 Web 构建工具',
-      link: 'http://modernjs.dev/builder/',
-    },
   ]}
 />
 
-作为 Modern.js 工程体系的一部分，以上每个解决方案都可以被单独使用，并且各自部署了独立的文档站点。开发者可以按需选择其中的一个或多个解决方案来使用。
-
 ## 关于文档
 
 **当前文档站对应的是 Modern.js 框架**，适用于开发 Web 应用。
 
-- 如果你需要开发一个 npm 包，请移步 [Modern.js Module](https://modernjs.dev/module-tools) 文档。
-- 如果你需要基于 Modern.js 的构建工具来实现一个 Web 开发框架，请移步 [Modern.js Builder](https://modernjs.dev/builder) 文档。
+- 如果你需要开发一个 npm 包，请移步 [Modern.js Module 文档](https://modernjs.dev/module-tools)。
+- 如果你需要一个构建工具来打包 Web 应用，请移步 [Rsbuild 文档](https://rsbuild.dev/)。
+- 如果你需要开发一个文档站点，推荐使用 [Rspress 文档](https://rspress.dev/)。
 
 :::tip
 由于 Modern.js 框架的使用最为广泛，在本文档站中，我们会省略「框架」，直接称其为 Modern.js。
 :::
 
-Modern.js 也可以与以下解决方案结合使用：
-
-- 如果你需要开发一个文档站点，推荐使用 [Rspress](https://rspress.dev/) 文档。
-- 如果你需要引入微前端架构，推荐使用 [Garfish](https://garfishjs.org/)。
-
 ## Modern.js 框架
 
 **Modern.js 框架是一个基于 React 的渐进式 Web 开发框架**。在字节跳动内部，我们将 Modern.js 封装为上层框架，并支撑了数千个 Web 应用的研发。
@@ -86,6 +75,10 @@ Umi 是中文社区中非常流行的 React 框架，也是蚂蚁集团的底层
 
 此外，Modern.js 的服务端能力更加丰富，包括完备的 SSR 能力、一体化 BFF 开发能力和自定义 Web Server 支持。这些能力经过了字节跳动大量线上应用的验证，可以直接用于生产环境。
 
+### Remix
+
+请参考 [Modern.js vs Remix](https://github.com/web-infra-dev/modern.js/discussions/4872)。
+
 ## 下一步
 
 如果你希望了解如何使用 Modern.js 框架，可以尝试 [创建第一个应用](/tutorials/first-app/c01-start)，或是阅读 [快速上手](/guides/get-started/quick-start)。

package/docs/zh/guides/topic-detail/framework-plugin/hook-list.mdx

@@ -84,72 +84,6 @@ export const myPlugin = (): CliPlugin => ({
 2. 插件通过 `config` hook 定义的配置
 3. Modern.js 默认配置。
 
-### `validateSchema`
-
-- 功能：收集各个插件中配置的用来校验用户配置的 [JSON Schema](https://json-schema.org/)
-- 执行阶段：`config` Hook 运行完成之后。
-- Hook 模型：`ParallelWorkflow`
-- 类型：`ParallelWorkflow<void, unknown>`
-- 使用示例：
-
-```ts
-import type { CliPlugin } from '@modern-js/core';
-
-export const myPlugin = (): CliPlugin => ({
-  setup(api) {
-    return {
-      validateSchema: () => {
-        return {
-          // target is field
-          target: 'foo',
-          schema: {
-            type: 'string',
-          },
-        };
-      },
-    };
-  },
-});
-```
-
-这里返回的 JSON Schema 会用来校验 `modern.config.js` 中的配置信息。
-
-比如这里返回：
-
-```json
-{
-  "target": "foo",
-  "schema": {
-    "type": "string"
-  }
-}
-```
-
-就可以在 `modern.config.ts` 中这样配置：
-
-```ts title="modern.config.ts"
-export const myPlugin = defineConfig({
-  foo: 'test',
-});
-```
-
-如果是别的类型，校验就不通过会报错，比如这样：
-
-```ts title="modern.config.ts"
-export const myPlugin = defineConfig({
-  foo: {},
-});
-```
-
-就会报错：
-
-```
-$ modern dev
-  1 | {
-> 2 |   "foo": {},
-    |   ^^^^^  Property foo is not expected to be here
-```
-
 ### `prepare`
 
 - 功能：运行主流程的前置准备流程

package/package.json

@@ -15,17 +15,17 @@
     "modern",
     "modern.js"
   ],
-  "version": "2.39.2",
+  "version": "2.41.0",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "public",
     "provenance": true
   },
   "dependencies": {
-    "@modern-js/sandpack-react": "2.39.2"
+    "@modern-js/sandpack-react": "2.41.0"
   },
   "peerDependencies": {
-    "@modern-js/builder-doc": "^2.39.2"
+    "@modern-js/builder-doc": "^2.41.0"
   },
   "devDependencies": {
     "classnames": "^2",
@@ -35,12 +35,12 @@
     "ts-node": "^10.9.1",
     "typescript": "^5",
     "fs-extra": "^10",
-    "rspress": "1.4.0",
-    "@rspress/shared": "1.4.0",
+    "rspress": "1.7.1",
+    "@rspress/shared": "1.7.1",
     "@types/node": "^16",
-    "@types/fs-extra": "^9",
-    "@modern-js/doc-plugin-auto-sidebar": "2.39.2",
-    "@modern-js/builder-doc": "2.39.2"
+    "@types/fs-extra": "9.0.13",
+    "@modern-js/builder-doc": "2.41.0",
+    "@modern-js/doc-plugin-auto-sidebar": "2.41.0"
   },
   "scripts": {
     "dev": "rspress dev",

package/rspress.config.ts

@@ -50,12 +50,16 @@ const getNavbar = (lang: string): NavItem[] => {
       text: `v${version}`,
       items: [
         {
-          text: 'Modern.js Module',
-          link: 'https://modernjs.dev/module-tools/en/',
+          text: 'Rsbuild',
+          link: 'https://github.com/web-infra-dev/rsbuild',
+        },
+        {
+          text: 'Rspress',
+          link: 'https://github.com/web-infra-dev/rspress',
         },
         {
-          text: 'Modern.js Builder',
-          link: 'https://modernjs.dev/builder/en/',
+          text: 'Modern.js Module',
+          link: 'https://modernjs.dev/module-tools/en/',
         },
         {
           text: 'Modern.js v1',

package/src/components/SolutionCards/index.module.scss

@@ -42,6 +42,10 @@
   }
 }
 
+.twoCards {
+  flex: 0 1 48%;
+}
+
 @media (max-width: 480px) {
   .card {
     flex: 0 1 100%;

package/src/components/SolutionCards/index.tsx

@@ -14,7 +14,11 @@ export const SolutionCards = ({ cards }: { cards: Card[] }) => {
       <a
         key={card.title}
         href={card.link}
-        className={clsx([styles.card, classNames[index]])}
+        className={clsx([
+          styles.card,
+          classNames[index],
+          cards.length === 2 ? styles.twoCards : '',
+        ])}
         target="_blank"
       >
         <div className={styles.title}>{card.title}</div>

package/src/pages/index.tsx

@@ -99,16 +99,6 @@ export default function Home() {
       href: `https://modernjs.dev/module-tools${lang === 'en' ? '/en' : ''}`,
       desc: t('solutionsDesc2'),
     },
-    {
-      title: 'Modern.js Builder',
-      href: `https://modernjs.dev/builder${lang === 'en' ? '/en' : ''}`,
-      desc: t('solutionsDesc3'),
-    },
-    {
-      title: 'Rspress',
-      href: `https://rspress.dev${lang === 'en' ? '' : '/zh'}`,
-      desc: t('solutionsDesc4'),
-    },
   ];
 
   return (