@modern-js/main-doc 2.60.3 → 2.60.5

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.
Files changed (14) hide show
  1. package/docs/en/configure/app/html/disable-html-folder.mdx +4 -0
  2. package/docs/en/configure/app/html/output-structure.mdx +15 -0
  3. package/docs/en/configure/app/output/dist-path.mdx +2 -0
  4. package/docs/en/configure/app/output/filename.mdx +3 -0
  5. package/docs/en/configure/app/tools/ts-checker.mdx +2 -2
  6. package/docs/en/plugin/introduction.mdx +2 -2
  7. package/docs/zh/configure/app/html/disable-html-folder.mdx +4 -0
  8. package/docs/zh/configure/app/html/output-structure.mdx +15 -0
  9. package/docs/zh/configure/app/output/dist-path.mdx +2 -0
  10. package/docs/zh/configure/app/output/filename.mdx +3 -0
  11. package/docs/zh/configure/app/tools/ts-checker.mdx +2 -2
  12. package/docs/zh/plugin/introduction.mdx +1 -1
  13. package/package.json +4 -4
  14. package/src/components/ListCard/index.module.css +8 -9
package/docs/en/configure/app/html/disable-html-folder.mdx CHANGED
@@ -9,6 +9,10 @@ title: disableHtmlFolder
9
9
 
10
10
  Remove the folder of the HTML files. When this option is enabled, the generated HTML file path will change from `[name]/index.html` to `[name].html`.
11
11
 
12
+ :::warning
13
+ **Deprecated**: This configuration is deprecated, please use `html.outputStructure` instead.
14
+ :::
15
+
12
16
  ### Example
13
17
 
14
18
  By default, the structure of HTML files in the `dist` directory is:
package/docs/en/configure/app/html/output-structure.mdx ADDED
@@ -0,0 +1,15 @@
1
+ ---
2
+ title: outputStructure
3
+ configName: html.outputStructure
4
+ ---
5
+
6
+ # html.outputStructure
7
+
8
+ - **Type:** `'flat' | 'nested'`
9
+ - **Default:** `'nested'`
10
+
11
+ Define the directory structure of the HTML output files.
12
+
13
+ import RsbuildConig from '@site-docs-en/components/rsbuild-config-tooltip';
14
+
15
+ <RsbuildConig />
package/docs/en/configure/app/output/dist-path.mdx CHANGED
@@ -20,6 +20,7 @@ type DistPathConfig = {
20
20
  media?: string;
21
21
  server?: string;
22
22
  worker?: string;
23
+ assets?: string;
23
24
  };
24
25
  ```
25
26
 
@@ -36,6 +37,7 @@ const defaultDistPath = {
36
37
  image: 'static/image',
37
38
  media: 'static/media',
38
39
  js: 'static/js',
40
+ assets: 'static/assets',
39
41
  };
40
42
  ```
41
43
 
package/docs/en/configure/app/output/filename.mdx CHANGED
@@ -18,6 +18,7 @@ type FilenameConfig = {
18
18
  font?: string;
19
19
  image?: string;
20
20
  media?: string;
21
+ assets?: string;
21
22
  };
22
23
  ```
23
24
 
@@ -33,6 +34,7 @@ const devDefaultFilename = {
33
34
  font: '[name].[contenthash:8][ext]',
34
35
  image: '[name].[contenthash:8][ext]',
35
36
  media: '[name].[contenthash:8][ext]',
37
+ assets: '[name].[contenthash:8][ext]',
36
38
  };
37
39
 
38
40
  // Production mode
@@ -44,6 +46,7 @@ const prodDefaultFilename = {
44
46
  font: '[name].[contenthash:8][ext]',
45
47
  image: '[name].[contenthash:8][ext]',
46
48
  media: '[name].[contenthash:8][ext]',
49
+ assets: '[name].[contenthash:8][ext]',
47
50
  };
48
51
  ```
49
52
 
package/docs/en/configure/app/tools/ts-checker.mdx CHANGED
@@ -35,7 +35,7 @@ const defaultOptions = {
35
35
  },
36
36
  ```
37
37
 
38
- By default, the [@rsbuild/plugin-type-check](https://rsbuild.dev/plugins/list/plugin-type-check) is enabled for type checking. You can use `output.disableTsChecker` config to disable it.
38
+ By default, the [@rsbuild/plugin-type-check](https://github.com/rspack-contrib/rsbuild-plugin-type-check) is enabled for type checking. You can use `output.disableTsChecker` config to disable it.
39
39
 
40
40
  ## Example
41
41
 
@@ -53,4 +53,4 @@ export default {
53
53
  };
54
54
  ```
55
55
 
56
- > Please refer to [@rsbuild/plugin-type-check](https://rsbuild.dev/plugins/list/plugin-type-check) for more details.
56
+ > Please refer to [@rsbuild/plugin-type-check](https://github.com/rspack-contrib/rsbuild-plugin-type-check) for more details.
package/docs/en/plugin/introduction.mdx CHANGED
@@ -55,7 +55,7 @@ Here are the official Rsbuild plugins built into Modern.js:
55
55
  | [SVGR Plugin](https://rsbuild.dev/plugins/list/plugin-svgr) | Support convert SVG to React components | [output.disableSvgr](/configure/app/output/disable-svgr)<br />[output.svgDefaultExport](/configure/app/output/svg-default-export) |
56
56
  | [Styled Components Plugin](https://github.com/rspack-contrib/rsbuild-plugin-styled-components) | Provides compile-time support for styled-components | [tools.styledComponents](/configure/app/tools/styled-components.html) |
57
57
  | [Assets Retry Plugin](https://rsbuild.dev/plugins/list/plugin-assets-retry) | Used to automatically resend requests when static assets fail to load | [output.assetsRetry](/configure/app/output/assets-retry.html) |
58
- | [Type Check Plugin](https://rsbuild.dev/plugins/list/plugin-type-check) | Used to run TypeScript type checker on a separate process | [output.disableTsChecker](/configure/app/output/disable-ts-checker.html)<br />[tools.tsChecker](/configure/app/tools/ts-checker.html) |
58
+ | [Type Check Plugin](https://github.com/rspack-contrib/rsbuild-plugin-type-check) | Used to run TypeScript type checker on a separate process | [output.disableTsChecker](/configure/app/output/disable-ts-checker.html)<br />[tools.tsChecker](/configure/app/tools/ts-checker.html) |
59
59
  | [Node Polyfill Plugin](https://github.com/rspack-contrib/rsbuild-plugin-node-polyfill) | Used to inject polyfills of Node core modules in the browser side | [output.disableNodePolyfill](/configure/app/output/disable-node-polyfill.html) |
60
60
  | [Source Build Plugin](https://github.com/rspack-contrib/rsbuild-plugin-source-build) | Supports referencing source code from other subdirectories | [experiments.sourceBuild](/configure/app/experiments/source-build.html) |
61
61
  | [Check Syntax Plugin](https://github.com/rspack-contrib/rsbuild-plugin-check-syntax) | Used to analyze the syntax compatibility of artifacts | [security.checkSyntax](/configure/app/security/check-syntax.html) |
@@ -75,4 +75,4 @@ Here are the official Rsbuild plugins that are not built into Modern.js:
75
75
 
76
76
  import OtherPlugins from '@site-docs-en/components/other-plugins.mdx';
77
77
 
78
- <OtherPlugins />
78
+ <OtherPlugins />
package/docs/zh/configure/app/html/disable-html-folder.mdx CHANGED
@@ -7,6 +7,10 @@ title: disableHtmlFolder
7
7
  - **类型：** `boolean`
8
8
  - **默认值：** `false`
9
9
 
10
+ :::warning
11
+ **Deprecated**：该配置已废弃，请使用 `html.outputStructure` 的代替。
12
+ :::
13
+
10
14
  移除 HTML 产物对应的文件夹。开启该选项后，生成的 HTML 文件目录会从 `[name]/index.html` 变为 `[name].html`。
11
15
 
12
16
  ### 示例
package/docs/zh/configure/app/html/output-structure.mdx ADDED
@@ -0,0 +1,15 @@
1
+ ---
2
+ title: outputStructure
3
+ configName: html.outputStructure
4
+ ---
5
+
6
+ # html.outputStructure
7
+
8
+ - **类型：** `'flat' | 'nested'`
9
+ - **默认值：** `'nested'`
10
+
11
+ 用于定义 HTML 产物文件的目录结构。
12
+
13
+ import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
14
+
15
+ <RsbuildConig />
package/docs/zh/configure/app/output/dist-path.mdx CHANGED
@@ -20,6 +20,7 @@ type DistPathConfig = {
20
20
  media?: string;
21
21
  server?: string;
22
22
  worker?: string;
23
+ assets?: string;
23
24
  };
24
25
  ```
25
26
 
@@ -36,6 +37,7 @@ const defaultDistPath = {
36
37
  image: 'static/image',
37
38
  media: 'static/media',
38
39
  js: 'static/js',
40
+ assets: 'static/assets',
39
41
  };
40
42
  ```
41
43
 
package/docs/zh/configure/app/output/filename.mdx CHANGED
@@ -18,6 +18,7 @@ type FilenameConfig = {
18
18
  font?: string;
19
19
  image?: string;
20
20
  media?: string;
21
+ assets?: string;
21
22
  };
22
23
  ```
23
24
 
@@ -33,6 +34,7 @@ const devDefaultFilename = {
33
34
  font: '[name].[contenthash:8][ext]',
34
35
  image: '[name].[contenthash:8][ext]',
35
36
  media: '[name].[contenthash:8][ext]',
37
+ assets: '[name].[contenthash:8][ext]',
36
38
  };
37
39
 
38
40
  // 生产模式构建
@@ -44,6 +46,7 @@ const prodDefaultFilename = {
44
46
  font: '[name].[contenthash:8][ext]',
45
47
  image: '[name].[contenthash:8][ext]',
46
48
  media: '[name].[contenthash:8][ext]',
49
+ assets: '[name].[contenthash:8][ext]',
47
50
  };
48
51
  ```
49
52
 
package/docs/zh/configure/app/tools/ts-checker.mdx CHANGED
@@ -35,7 +35,7 @@ const defaultOptions = {
35
35
  },
36
36
  ```
37
37
 
38
- 默认情况下，Modern.js 会开启 [@rsbuild/plugin-type-check](https://rsbuild.dev/zh/plugins/list/plugin-type-check) 进行类型检查。你可以通过 `output.disableTsChecker` 配置项来关闭类型检查。
38
+ 默认情况下，Modern.js 会开启 [@rsbuild/plugin-type-check](https://github.com/rspack-contrib/rsbuild-plugin-type-check) 进行类型检查。你可以通过 `output.disableTsChecker` 配置项来关闭类型检查。
39
39
 
40
40
  ## 示例
41
41
 
@@ -53,4 +53,4 @@ export default {
53
53
  };
54
54
  ```
55
55
 
56
- > 请参考 [@rsbuild/plugin-type-check](https://rsbuild.dev/zh/plugins/list/plugin-type-check) 了解更多用法。
56
+ > 请参考 [@rsbuild/plugin-type-check](https://github.com/rspack-contrib/rsbuild-plugin-type-check) 了解更多用法。
package/docs/zh/plugin/introduction.mdx CHANGED
@@ -55,7 +55,7 @@ Modern.js 从 `MAJOR_VERSION.46.0` 起开始将底层的构建工具升级为 [R
55
55
  | [SVGR 插件](https://rsbuild.dev/zh/plugins/list/plugin-svgr) | 支持将 SVG 图片转换为一个 React 组件使用 | [output.disableSvgr](/configure/app/output/disable-svgr)<br />[output.svgDefaultExport](/configure/app/output/svg-default-export) |
56
56
  | [Styled Components 插件](https://github.com/rspack-contrib/rsbuild-plugin-styled-components) | 提供对 styled-components 的编译时支持 | [tools.styledComponents](/configure/app/tools/styled-components.html) |
57
57
  | [Assets Retry 插件](https://rsbuild.dev/zh/plugins/list/plugin-assets-retry) | 用于在静态资源加载失败时自动发起重试请求 | [output.assetsRetry](/configure/app/output/assets-retry.html) |
58
- | [Type Check 插件](https://rsbuild.dev/zh/plugins/list/plugin-type-check) | 用于在单独的进程中运行 TypeScript 类型检查 | [output.disableTsChecker](/configure/app/output/disable-ts-checker.html)<br />[tools.tsChecker](/configure/app/tools/ts-checker.html) |
58
+ | [Type Check 插件](https://github.com/rspack-contrib/rsbuild-plugin-type-check) | 用于在单独的进程中运行 TypeScript 类型检查 | [output.disableTsChecker](/configure/app/output/disable-ts-checker.html)<br />[tools.tsChecker](/configure/app/tools/ts-checker.html) |
59
59
  | [Node Polyfill 插件](https://github.com/rspack-contrib/rsbuild-plugin-node-polyfill) | 用于注入 Node 核心模块在浏览器端的 polyfills | [output.disableNodePolyfill](/configure/app/output/disable-node-polyfill.html) |
60
60
  | [Source Build 插件](https://github.com/rspack-contrib/rsbuild-plugin-source-build) | 用于 monorepo 场景，支持引用其他子目录的源代码，并完成构建和热更新 | [experiments.sourceBuild](/configure/app/experiments/source-build.html) |
61
61
  | [Check Syntax 插件](https://github.com/rspack-contrib/rsbuild-plugin-check-syntax) | 用于分析产物的语法兼容性，判断是否存在导致兼容性问题的高级语法 | [security.checkSyntax](/configure/app/security/check-syntax.html) |
package/package.json CHANGED
@@ -15,14 +15,14 @@
15
15
  "modern",
16
16
  "modern.js"
17
17
  ],
18
- "version": "2.60.3",
18
+ "version": "2.60.5",
19
19
  "publishConfig": {
20
20
  "registry": "https://registry.npmjs.org/",
21
21
  "access": "public",
22
22
  "provenance": true
23
23
  },
24
24
  "dependencies": {
25
- "@modern-js/sandpack-react": "2.60.3"
25
+ "@modern-js/sandpack-react": "2.60.5"
26
26
  },
27
27
  "devDependencies": {
28
28
  "@rspress/shared": "1.31.1",
@@ -31,8 +31,8 @@
31
31
  "classnames": "^2",
32
32
  "clsx": "^1.2.1",
33
33
  "fs-extra": "^10",
34
- "react": "^18",
35
- "react-dom": "^18",
34
+ "react": "^18.3.1",
35
+ "react-dom": "^18.3.1",
36
36
  "rspress": "1.31.1",
37
37
  "ts-node": "^10.9.1",
38
38
  "typescript": "^5"
package/src/components/ListCard/index.module.css CHANGED
@@ -1,5 +1,4 @@
1
-
2
- .card{
1
+ .card {
3
2
  display: flex;
4
3
  max-width: 32%;
5
4
  flex: 1 1 32%;
@@ -8,7 +7,7 @@
8
7
  margin-bottom: 16px;
9
8
  height: 135px;
10
9
  padding: 0 35.4px;
11
- color: #FFFFFF;
10
+ color: #ffffff;
12
11
  background: rgba(255, 255, 255, 0.1);
13
12
  border: 1px solid rgba(255, 255, 255, 0.2);
14
13
  box-sizing: border-box;
@@ -17,17 +16,17 @@
17
16
  transition: all 0.3s ease;
18
17
  }
19
18
 
20
- .card:hover{
19
+ .card:hover {
21
20
  transition: all 0.3s ease;
22
21
  background: rgba(78, 202, 255, 0.2);
23
22
  }
24
- .desc{
23
+ .desc {
25
24
  display: inline-block;
26
25
  margin-left: 20px;
27
26
  color: #fff;
28
27
  }
29
28
 
30
- .icon{
29
+ .icon {
31
30
  width: 48px;
32
31
  height: 48px;
33
32
  fill: #fff;
@@ -35,14 +34,14 @@
35
34
  }
36
35
 
37
36
  @media screen and (min-width: 966px) and (max-width: 1300px) {
38
- .card{
37
+ .card {
39
38
  max-width: 48%;
40
39
  flex: 1 1 48%;
41
40
  }
42
41
  }
43
42
 
44
43
  @media screen and (max-width: 966px) {
45
- .card{
44
+ .card {
46
45
  width: 100%;
47
46
  height: 70px;
48
47
  margin: 0;
@@ -51,7 +50,7 @@
51
50
  max-width: none;
52
51
  flex: none;
53
52
  }
54
- .icon{
53
+ .icon {
55
54
  width: 20px;
56
55
  height: 20px;
57
56
  }