@modern-js/main-doc 0.0.0-nightly-20250518160324 → 0.0.0-nightly-20250520160352

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -17,7 +17,6 @@ type DistPathConfig = {
17
17
  wasm?: string;
18
18
  image?: string;
19
19
  media?: string;
20
- server?: string;
21
20
  worker?: string;
22
21
  assets?: string;
23
22
  };
@@ -33,6 +33,11 @@ const defaultOptions = {
33
33
  };
34
34
  ```
35
35
 
36
+ :::warning
37
+ SSR Application does not enable the `minify.removeComments` configuration, otherwise the SSR rendering will fail.
38
+ :::
39
+
40
+
36
41
  The configs of [html-rspack-plugin](https://github.com/rspack-contrib/html-rspack-plugin) or [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin) can be modified through `tools.htmlPlugin`.
37
42
 
38
43
  import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
@@ -21,7 +21,7 @@ When using Rspack as the bundler, SWC will be used for transpiling and compressi
21
21
 
22
22
  You can set the options of [builtin:swc-loader](https://rspack.dev/guide/features/builtin-swc-loader) through `tools.swc`.
23
23
 
24
- ```
24
+ ```ts
25
25
  import { defineConfig } from '@modern-js/app-tools';
26
26
 
27
27
  export default defineConfig<'rspack'>({
@@ -285,6 +285,7 @@ Add the following script to `packages/app/package.json` to run `build` command o
285
285
  ```
286
286
 
287
287
  Add the following content to the `packages/app/vercel.json` file:
288
+
288
289
  ```json title="vercel.json"
289
290
  {
290
291
  "buildCommand": "npm run deploy",
@@ -298,7 +299,7 @@ Just submit your code and deploy it using the Vercel platform.
298
299
 
299
300
  If you're creating a GitHub Pages for a repository without a custom domain, the page URL will follow this format: `http://<username>.github.io/<repository-name>`. Therefore, you need to add the following configuration in `modern.config.ts`:
300
301
 
301
- ```
302
+ ```ts
302
303
  import { defineConfig } from '@modern-js/app-tools';
303
304
 
304
305
  export default defineConfig({
@@ -331,7 +332,6 @@ For branch deployment, follow these steps:
331
332
  :::info
332
333
  1. Running `MODERNJS_DEPLOY=ghPages modern deploy` will build the production output for GitHub in the .output directory.
333
334
  2. You can refer to the [project](https://github.com/web-infra-dev/modern-js-examples/tree/main/examples/modern-js-deploy-csr)
334
-
335
335
  :::
336
336
 
337
337
  For GitHub Actions deployment, select Settings > Pages > Source > GitHub Actions, and add a workflow file to the project. You can refer to the [example](https://github.com/web-infra-dev/modern-js-examples/tree/main/examples/modern-js-deploy-csr).
@@ -407,7 +407,7 @@ Nginx is a high-performance HTTP and reverse proxy server that can handle static
407
407
 
408
408
  If your project is a purely front-end project, you can also deploy the application through Nginx. Here is an example of an Nginx configuration to demonstrate how to host the output of a purely front-end project.
409
409
 
410
- ```conf title="nginx.conf"
410
+ ```nginx title="nginx.conf"
411
411
  # user [user] [group];
412
412
  worker_processes 1;
413
413
 
@@ -96,7 +96,8 @@ dist
96
96
  └── qux.[hash].mp4
97
97
  ```
98
98
 
99
- ## Node.js Output Directory
99
+
100
+ <!-- ## Node.js Output Directory
100
101
 
101
102
  When you enable SSR or SSG features in Modern.js, Modern.js will generate a Node.js bundle after the build and output it to the `bundles` directory.
102
103
 
@@ -122,7 +123,7 @@ export default {
122
123
  },
123
124
  },
124
125
  };
125
- ```
126
+ ``` -->
126
127
 
127
128
  ## Flatten the Directory
128
129
 
@@ -17,7 +17,6 @@ type DistPathConfig = {
17
17
  wasm?: string;
18
18
  image?: string;
19
19
  media?: string;
20
- server?: string;
21
20
  worker?: string;
22
21
  assets?: string;
23
22
  };
@@ -33,6 +33,10 @@ const defaultOptions = {
33
33
  };
34
34
  ```
35
35
 
36
+ :::warning
37
+ SSR 应用请勿启用 `minify.removeComments` 配置项,否则会导致 SSR 渲染失败。
38
+ :::
39
+
36
40
  通过 `tools.htmlPlugin` 可以修改 [html-rspack-plugin](https://github.com/rspack-contrib/html-rspack-plugin) 或 [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin) 的配置项。
37
41
 
38
42
  import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
@@ -21,7 +21,7 @@ import SWC from '@site-docs/components/swc.mdx';
21
21
 
22
22
  通过 `tools.swc` 可以设置 Rspack [builtin:swc-loader](https://rspack.dev/zh/guide/features/builtin-swc-loader) 的选项。
23
23
 
24
- ```
24
+ ```ts
25
25
  import { defineConfig } from '@modern-js/app-tools';
26
26
 
27
27
  export default defineConfig<'rspack'>({
@@ -110,7 +110,6 @@ Netlify 是一个流行的 Web 开发平台,专为构建、发布和维护现
110
110
 
111
111
  :::info
112
112
  你可参考部署[项目示例](https://github.com/web-infra-dev/modern-js-examples/tree/main/examples/modern-js-deploy-csr)。
113
-
114
113
  :::
115
114
 
116
115
  在 Netlify 平台上添加项目,部署即可。
@@ -197,6 +196,7 @@ Vercel 是一个面向现代 Web 应用的部署平台,它提供了丰富的
197
196
  ### 纯前端项目
198
197
 
199
198
  在当前项目的根目录添加 `vercel.json` 文件:
199
+
200
200
  ```bash
201
201
  ./
202
202
  ├── src
@@ -206,6 +206,7 @@ Vercel 是一个面向现代 Web 应用的部署平台,它提供了丰富的
206
206
  ```
207
207
 
208
208
  在 `vercel.json` 中添加以下内容:
209
+
209
210
  ```json title="vercel.json"
210
211
  {
211
212
  "buildCommand": "modern deploy",
@@ -219,7 +220,6 @@ Vercel 是一个面向现代 Web 应用的部署平台,它提供了丰富的
219
220
 
220
221
  :::info
221
222
  你可参考部署[项目示例](https://github.com/web-infra-dev/modern-js-examples/tree/main/examples/modern-js-deploy-csr)。
222
-
223
223
  :::
224
224
 
225
225
  ### 全栈项目
@@ -314,6 +314,7 @@ Github Pages 支持两种部署方式,通过分支部署或通过 Github Actio
314
314
  4. 执行 `npm run deploy:gh-pages`。
315
315
 
316
316
  :::info
317
+
317
318
  1. 执行 `MODERNJS_DEPLOY=ghPages modern deploy`,Modern.js 会把可用于 github 部署的产物构建到 `.output` 目录。
318
319
  2. 可以参考项目[示例](https://github.com/web-infra-dev/modern-js-examples/tree/main/examples/modern-js-deploy-csr)。
319
320
 
@@ -393,7 +394,7 @@ Nginx 是一个高性能的 HTTP 和反向代理服务器,它可以处理静
393
394
 
394
395
  如果你的项目是纯前端项目,也可以通过 Nginx 来部署应用,以下提供一个 Nginx 配置的示例来演示如何托管一个纯前端项目的产物。
395
396
 
396
- ```conf title="nginx.conf"
397
+ ```nginx title="nginx.conf"
397
398
  # user [user] [group];
398
399
  worker_processes 1;
399
400
 
@@ -96,7 +96,7 @@ dist
96
96
  └── qux.[hash].mp4
97
97
  ```
98
98
 
99
- ## Node.js 产物目录
99
+ <!-- ## Node.js 产物目录
100
100
 
101
101
  当你在 Modern.js 中开启了 SSR 或 SSG 等服务端功能时,Modern.js 会在构建后生成一份 Node.js 产物,并输出到 `bundles` 目录下:
102
102
 
@@ -122,7 +122,7 @@ export default {
122
122
  },
123
123
  },
124
124
  };
125
- ```
125
+ ``` -->
126
126
 
127
127
  ## 扁平化产物目录
128
128
 
package/package.json CHANGED
@@ -15,19 +15,20 @@
15
15
  "modern",
16
16
  "modern.js"
17
17
  ],
18
- "version": "0.0.0-nightly-20250518160324",
18
+ "version": "0.0.0-nightly-20250520160352",
19
19
  "publishConfig": {
20
20
  "registry": "https://registry.npmjs.org/",
21
21
  "access": "public"
22
22
  },
23
23
  "dependencies": {
24
24
  "mermaid": "^11.4.1",
25
- "@modern-js/sandpack-react": "0.0.0-nightly-20250518160324"
25
+ "@modern-js/sandpack-react": "0.0.0-nightly-20250520160352"
26
26
  },
27
27
  "devDependencies": {
28
28
  "@rsbuild/plugin-sass": "1.3.1",
29
- "@shikijs/transformers": "^3.4.1",
30
- "@rspress/shared": "2.0.0-beta.5",
29
+ "@shikijs/transformers": "^3.4.2",
30
+ "@rspress/shared": "2.0.0-beta.6",
31
+ "@rspress/plugin-llms": "2.0.0-beta.6",
31
32
  "@types/fs-extra": "9.0.13",
32
33
  "@types/node": "^16",
33
34
  "classnames": "^2.5.1",
@@ -35,7 +36,7 @@
35
36
  "fs-extra": "^10",
36
37
  "react": "^18.3.1",
37
38
  "react-dom": "^18.3.1",
38
- "rspress": "2.0.0-beta.5",
39
+ "rspress": "2.0.0-beta.6",
39
40
  "ts-node": "^10.9.1",
40
41
  "typescript": "^5"
41
42
  },
package/rspress.config.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import path from 'path';
2
2
  import { pluginSass } from '@rsbuild/plugin-sass';
3
+ import { pluginLlms } from '@rspress/plugin-llms';
3
4
  import { transformerNotationHighlight } from '@shikijs/transformers';
4
5
  import { defineConfig } from 'rspress/config';
5
6
 
@@ -7,6 +8,9 @@ const docPath = path.join(__dirname, 'docs');
7
8
 
8
9
  export default defineConfig({
9
10
  root: docPath,
11
+ title: 'Modern.js',
12
+ description:
13
+ '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.',
10
14
  base: '/',
11
15
  logo: 'https://lf-cdn-tos.bytescm.com/obj/static/webinfra/modern-js-website/assets/images/images/modernjs-logo.svg',
12
16
  icon: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/uhbfnupenuhf/favicon.ico',
@@ -18,6 +22,7 @@ export default defineConfig({
18
22
  transformers: [transformerNotationHighlight()],
19
23
  },
20
24
  },
25
+ plugins: [pluginLlms()],
21
26
  search: {
22
27
  codeBlocks: true,
23
28
  },
@@ -62,6 +67,11 @@ export default defineConfig({
62
67
  text: 'Edit this page on GitHub',
63
68
  },
64
69
  socialLinks: [
70
+ {
71
+ icon: 'discord',
72
+ mode: 'link',
73
+ content: 'https://discord.gg/qPCqYg38De',
74
+ },
65
75
  {
66
76
  icon: 'github',
67
77
  mode: 'link',