@modern-js/main-doc 2.60.3 → 2.60.5

Sign up to get free protection for your applications and to get access to all the features.
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
  }