@modern-js/main-doc 2.11.0 → 2.12.0

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.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # @modern-js/main-doc
2
2
 
3
+ ## 2.12.0
4
+
5
+ ### Patch Changes
6
+
7
+ - 9e5044d: doc: 修正文档中使用@edenx/runtime 的部分
8
+ doc: Correct the sections in the document that use @edenx/runtime.
9
+ - 9328fb9: feat: prebundle theme
10
+
11
+ feat: 预打包主题
12
+
13
+ - @modern-js/builder-doc@2.12.0
14
+
3
15
  ## 2.11.0
4
16
 
5
17
  ### Patch Changes
@@ -1,16 +1,56 @@
1
1
  ---
2
- title: icon.png
2
+ title: icon
3
3
  sidebar_position: 2
4
4
  ---
5
- # icon.png
6
5
 
7
- When `config/icon.png` exist, it can inject app icon information into the html page at build time:
6
+ # Icon
8
7
 
8
+ ## Set favicon
9
+
10
+ When there is a `favicon.*` file in the `config` directory of the project root directory, Modern.js will automatically set the file to the [html.favicon](/configure/app/html/favicon) config to generate the favicon icon for the page:
11
+
12
+ ```
13
+ ./config
14
+ └── favicon.ico
9
15
  ```
10
- .config
16
+
17
+ After the build is complete, you can see that the following tags are automatically generated in the HTML:
18
+
19
+ ```html
20
+ <link rel="icon" href="/favicon.ico" />
21
+ ```
22
+
23
+ ### Order
24
+
25
+ When setting up the favicon, Modern.js looks for files in the following order:
26
+
27
+ - favicon.png
28
+ - favicon.jpg
29
+ - favicon.jpeg
30
+ - favicon.svg
31
+ - favicon.ico
32
+
33
+ ## Set app icon
34
+
35
+ When there is an `icon.*` file in the `config` directory of the project root directory, Modern.js will automatically set the file to the [html.appIcon](/configure/app/html/app-icon) config, it is used to generate the apple-touch-icon icon for the iOS system.
36
+
37
+ ```
38
+ ./config
11
39
  └── icon.png
12
40
  ```
13
41
 
14
- the app icon `link` meta will be injected into the html, as follows:
42
+ After the build is complete, you can see that the following tags are automatically generated in the HTML:
43
+
44
+ ```html
45
+ <link rel="apple-touch-icon" sizes="180*180" href="/static/image/icon.png" />
46
+ ```
47
+
48
+ ### Order
49
+
50
+ When setting the app icon, Modern.js looks for files in the following order:
15
51
 
16
- ![app-icon](https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/api/app-icon.png)
52
+ - icon.png
53
+ - icon.jpg
54
+ - icon.jpeg
55
+ - icon.svg
56
+ - icon.ico
@@ -0,0 +1,13 @@
1
+ ---
2
+ sidebar_label: bundlerChain
3
+ ---
4
+
5
+ # tools.bundlerChain
6
+
7
+ :::tip
8
+ This config is provided by Modern.js Builder, more detail can see [tools.bundlerChain](https://modernjs.dev/builder/en/api/config-tools.html#toolsbundlerchain).
9
+ :::
10
+
11
+ import Main from '@modern-js/builder-doc/docs/en/config/tools/bundlerChain.mdx';
12
+
13
+ <Main />
@@ -19,10 +19,11 @@ When using Rspack as the bundler, SWC will be used for transpiling and compressi
19
19
 
20
20
  ## Install
21
21
 
22
- The `@modern-js/plugin-swc` plugin needs to be installed before use.
22
+ First, you need to execute `pnpm run new` to enable the SWC compile:
23
23
 
24
24
  ```bash
25
- pnpm add @modern-js/plugin-swc -D
25
+ ? Action: Enable features
26
+ ? Enable features: Enable SWC Compile
26
27
  ```
27
28
 
28
29
  After the installation,please register the SWC plugin in the `modern.config.ts` file, then the SWC compilation and compression will be enabled.
@@ -223,7 +223,7 @@ Currently, only CSR is supported, so stay tuned for Streaming SSR.
223
223
  Add the following code to `user/layout.loader.ts`:
224
224
 
225
225
  ```ts title="routes/user/layout.loader.ts"
226
- import { defer } from "@edenx/runtime/router"
226
+ import { defer } from "@modern-js/runtime/router"
227
227
 
228
228
  const loader = () =>
229
229
  defer({
@@ -230,7 +230,7 @@ When a route jumps from `/` to `/blog`, if the JS Chunk of the `<Blog>` componen
230
230
  You can redirect routes by creating a [`data loader`](/guides/basic-features/data-fetch) file, Suppose you have the file `routes/user/page.tsx` and you want to redirect the route corresponding to this file, you can create the file `routes/user/page.loader.ts`:
231
231
 
232
232
  ```ts title="routes/user/page.loader.ts"
233
- import { redirect } from "@edenx/runtime/router"
233
+ import { redirect } from '@modern-js/runtime/router'
234
234
 
235
235
  export default () => {
236
236
  const user = await getUser();
@@ -2,6 +2,7 @@
2
2
  sidebar_position: 3
3
3
  title: Use Models
4
4
  ---
5
+
5
6
  # Use Models
6
7
 
7
8
  ## Using Models in Components
@@ -146,7 +147,7 @@ will always get the initial value of Input.
146
147
 
147
148
  :::
148
149
 
149
- `useStaticModel` is also suitable for use with animation libraries such as [react-three-fiber](https://github.com/pmndrs/react-three-fiber), because binding fast-changing states in animation component UI can easily cause [performance issues](https:/docs.pmnd.rs/react-three-fiber/advanced/pitfalls#never-bind-fast-state-reactive). In this case, you can choose to use `useStaticModel`, which only subscribes to the State but does not cause the view component to re-render. Here is a simplified example:
150
+ `useStaticModel` is also suitable for use with animation libraries such as [react-three-fiber](https://github.com/pmndrs/react-three-fiber), because binding fast-changing states in animation component UI can easily cause [performance issues](https://docs.pmnd.rs/react-three-fiber/advanced/pitfalls#never-bind-fast-state-reactive). In this case, you can choose to use `useStaticModel`, which only subscribes to the State but does not cause the view component to re-render. Here is a simplified example:
150
151
 
151
152
  ```ts
152
153
  function ThreeComponent() {
@@ -0,0 +1,31 @@
1
+ ---
2
+ sidebar_position: 3
3
+ ---
4
+
5
+ # Build FAQ
6
+
7
+ If you encounter build-related problems, you can refer to the following documents:
8
+
9
+ ## General FAQ
10
+
11
+ Please refer to [Modern.js Builder - General FAQ](https://modernjs.dev/builder/en/guide/faq/general.html), which contains some general questions about concepts, such as:
12
+
13
+ - The relationship between Modern.js Builder and Modern.js?
14
+ - Can Builder be used to build libraries or UI components?
15
+ - Will Builder support Vite?
16
+
17
+ ## Features FAQ
18
+
19
+ Please refer to [Modern.js Builder - Features FAQ](https://modernjs.dev/builder/en/guide/faq/features.html), which contains an introduction to some common building features, such as:
20
+
21
+ - How to import UI Component library on demand?
22
+ - How to run ESLint during compilation?
23
+ - How to configure CDN path for static assets?
24
+
25
+ ## Exceptions FAQ
26
+
27
+ Please refer to [Modern.js Builder - Exceptions FAQ](https://modernjs.dev/builder/en/guide/faq/exceptions.html), which contains some common construction problems, such as:
28
+
29
+ - 'compilation' argument error when webpack compiling?
30
+ - Compile error `You may need additional loader`?
31
+ - Find `exports is not defined` runtime error?
@@ -1,18 +1,56 @@
1
1
  ---
2
- title: icon.png
2
+ title: icon
3
3
  sidebar_position: 2
4
4
  ---
5
- # icon.png
6
5
 
7
- 应用工程方案 App Icon 文件。
6
+ # Icon
8
7
 
9
- 项目根目录下 `config/icon.png` 时,可以在构建时向 html 页面注入 app icon 信息:
8
+ ## 设置 favicon
9
+
10
+ 当项目根目录的 `config` 目录下存在 `favicon.*` 文件时,Modern.js 会自动将该文件设置到 [html.favicon](/configure/app/html/favicon) 配置项中,用于生成页面的 favicon 图标:
11
+
12
+ ```
13
+ ./config
14
+ └── favicon.ico
15
+ ```
16
+
17
+ 构建完成后,可以看到 HTML 中自动生成了以下标签:
18
+
19
+ ```html
20
+ <link rel="icon" href="/favicon.ico" />
21
+ ```
22
+
23
+ ### 查找顺序
24
+
25
+ 在设置 app icon 时,Modern.js 会按以下顺序寻找文件:
26
+
27
+ - favicon.png
28
+ - favicon.jpg
29
+ - favicon.jpeg
30
+ - favicon.svg
31
+ - favicon.ico
32
+
33
+ ## 设置 app icon
34
+
35
+ 当项目根目录的 `config` 目录下存在 `icon.*` 文件时,Modern.js 会自动将该文件设置到 [html.appIcon](/configure/app/html/app-icon) 配置项中,用于生成 iOS 系统下的 apple-touch-icon 图标。
10
36
 
11
37
  ```
12
38
  ./config
13
39
  └── icon.png
14
40
  ```
15
41
 
16
- 最终 html 中会注入 app icon `link` 标签, 如下:
42
+ 构建完成后,可以看到 HTML 中自动生成了以下标签:
43
+
44
+ ```html
45
+ <link rel="apple-touch-icon" sizes="180*180" href="/static/image/icon.png" />
46
+ ```
47
+
48
+ ### 查找顺序
49
+
50
+ 在设置 app icon 时,Modern.js 会按以下顺序寻找文件:
17
51
 
18
- ![app-icon](https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/api/app-icon.png)
52
+ - icon.png
53
+ - icon.jpg
54
+ - icon.jpeg
55
+ - icon.svg
56
+ - icon.ico
@@ -18,7 +18,7 @@ import RouterLegacyTip from "@site-docs/components/router-legacy-tip"
18
18
  ## basename
19
19
 
20
20
  - **类型:** `string`
21
- - **默认值:** ``
21
+ - **默认值:** `/`
22
22
 
23
23
  设置客户端路由的 `basename`,通常用于应用需要部署在域名非根路径下的场景。
24
24
 
@@ -0,0 +1,13 @@
1
+ ---
2
+ sidebar_label: bundlerChain
3
+ ---
4
+
5
+ # tools.bundlerChain
6
+
7
+ :::tip
8
+ 该配置由 Modern.js Builder 提供,更多信息可参考 [tools.bundlerChain](https://modernjs.dev/builder/api/config-tools.html#toolsbundlerchain)。
9
+ :::
10
+
11
+ import Main from '@modern-js/builder-doc/docs/zh/config/tools/bundlerChain.mdx';
12
+
13
+ <Main />
@@ -19,13 +19,14 @@ Modern.js 提供了开箱即用的 SWC 插件,可以为你的 Web 应用提供
19
19
 
20
20
  ## 安装
21
21
 
22
- 使用前需要安装 `@modern-js/plugin-swc` 插件。
22
+ 首先,你需要执行 `pnpm run new` 启用 SWC 编译:
23
23
 
24
24
  ```bash
25
- pnpm add @modern-js/plugin-swc -D
25
+ ? 请选择你想要的操作:启用可选功能
26
+ ? 启用可选功能:启用「SWC 编译」
26
27
  ```
27
28
 
28
- 安装完成后,只需在 `modern.config.ts` 文件中注册 SWC 插件,即可启用 SWC 编译和压缩能力。
29
+ 执行完成后,你只需在 `modern.config.ts` 文件中注册 SWC 插件,即可启用 SWC 编译和压缩能力。
29
30
 
30
31
  ```ts title="modern.config.ts"
31
32
  import appTools, { defineConfig } from '@modern-js/app-tools';
@@ -224,7 +224,7 @@ export default function UserLayout() {
224
224
  创建 `user/layout.loader.ts`,并添加以下代码:
225
225
 
226
226
  ```ts title="routes/user/layout.loader.ts"
227
- import { defer } from "@edenx/runtime/router"
227
+ import { defer } from "@modern-js/runtime/router"
228
228
 
229
229
  const loader = () =>
230
230
  defer({
@@ -297,7 +297,7 @@ Modern.js 建议必须有根 layout 和根 loading。
297
297
  可以通过创建 [`data loader`](/guides/basic-features/data-fetch) 文件做路由的重定向,如有文件 `routes/user/page.tsx`,想对这个文件对应的路由做重定向,可以创建 `routes/user/page.loader.ts` 文件:
298
298
 
299
299
  ```ts title="routes/user/page.loader.ts"
300
- import { redirect } from "@edenx/runtime/router"
300
+ import { redirect } from '@modern-js/runtime/router'
301
301
 
302
302
  export default () => {
303
303
  const user = await getUser();
@@ -2,6 +2,7 @@
2
2
  sidebar_position: 3
3
3
  title: 使用 Model
4
4
  ---
5
+
5
6
  # 使用 Model
6
7
 
7
8
  ## 在组件内使用
@@ -147,7 +148,7 @@ function Search() {
147
148
 
148
149
  :::
149
150
 
150
- `useStaticModel` 还适合和 [react-three-fiber](https://github.com/pmndrs/react-three-fiber) 等动画库一起使用,因为在动画组件 UI 里绑定会快速变化的状态,容易引起[性能问题](https:/docs.pmnd.rs/react-three-fiber/advanced/pitfalls#never-bind-fast-state-reactive)。这种情况就可以选择使用 `useStaticModel`,它只会订阅状态,但不会引起视图组件的重新渲染。下面是一个简化示例:
151
+ `useStaticModel` 还适合和 [react-three-fiber](https://github.com/pmndrs/react-three-fiber) 等动画库一起使用,因为在动画组件 UI 里绑定会快速变化的状态,容易引起[性能问题](https://docs.pmnd.rs/react-three-fiber/advanced/pitfalls#never-bind-fast-state-reactive)。这种情况就可以选择使用 `useStaticModel`,它只会订阅状态,但不会引起视图组件的重新渲染。下面是一个简化示例:
151
152
 
152
153
  ```ts
153
154
  function ThreeComponent() {
@@ -0,0 +1,31 @@
1
+ ---
2
+ sidebar_position: 3
3
+ ---
4
+
5
+ # 构建相关问题
6
+
7
+ 如果你遇到了构建相关的问题,可以参考以下文档:
8
+
9
+ ## 通用类问题
10
+
11
+ 请参考 [「Modern.js Builder - 通用类问题」](https://modernjs.dev/builder/guide/faq/general.html),其中包含一些概念类的通用问题,比如:
12
+
13
+ - Modern.js Builder 和 Modern.js 的关系?
14
+ - Builder 能否用于构建工具库或组件库?
15
+ - Builder 是否会接入 Vite?
16
+
17
+ ## 功能类问题
18
+
19
+ 请参考 [「Modern.js Builder - 功能类问题」](https://modernjs.dev/builder/guide/faq/features.html),其中包含一些常见构建功能的介绍,比如:
20
+
21
+ - 如何配置组件库按需引入?
22
+ - 如何在编译过程中进行 ESLint 代码校验?
23
+ - 如何配置静态资源的 CDN 路径?
24
+
25
+ ## 异常类问题
26
+
27
+ 请参考 [「Modern.js Builder - 异常类问题」](https://modernjs.dev/builder/guide/faq/exceptions.html),其中包含一些常见构建问题的处理方法,比如:
28
+
29
+ - webpack 编译出现 'compilation' argument 报错?
30
+ - 编译时报错 `You may need additional loader`?
31
+ - 打开页面后报错,提示 `exports is not defined`?
package/modern.config.ts CHANGED
@@ -78,7 +78,8 @@ export default defineConfig({
78
78
  lang: 'zh',
79
79
  themeDir: path.join(__dirname, 'src'),
80
80
  markdown: {
81
- checkDeadLinks: process.env.NODE_ENV === 'production',
81
+ checkDeadLinks: true,
82
+ experimentalMdxRs: true,
82
83
  },
83
84
  head: [
84
85
  `
@@ -133,7 +134,7 @@ export default defineConfig({
133
134
  dataUriLimit: 0,
134
135
  },
135
136
  dev: {
136
- startUrl: true,
137
+ startUrl: false,
137
138
  },
138
139
  source: {
139
140
  alias: {
package/package.json CHANGED
@@ -11,13 +11,13 @@
11
11
  "modern",
12
12
  "modern.js"
13
13
  ],
14
- "version": "2.11.0",
14
+ "version": "2.12.0",
15
15
  "publishConfig": {
16
16
  "registry": "https://registry.npmjs.org/",
17
17
  "access": "public"
18
18
  },
19
19
  "peerDependencies": {
20
- "@modern-js/builder-doc": "^2.11.0"
20
+ "@modern-js/builder-doc": "^2.12.0"
21
21
  },
22
22
  "devDependencies": {
23
23
  "classnames": "^2",
@@ -29,9 +29,9 @@
29
29
  "fs-extra": "^10",
30
30
  "@types/node": "^16",
31
31
  "@types/fs-extra": "^9",
32
- "@modern-js/builder-doc": "2.11.0",
33
- "@modern-js/doc-tools": "2.11.0",
34
- "@modern-js/doc-plugin-auto-sidebar": "2.11.0"
32
+ "@modern-js/builder-doc": "2.12.0",
33
+ "@modern-js/doc-tools": "2.12.0",
34
+ "@modern-js/doc-plugin-auto-sidebar": "2.12.0"
35
35
  },
36
36
  "scripts": {
37
37
  "dev": "modern dev",
@@ -1,13 +0,0 @@
1
- ---
2
- sidebar_label: pluginImport
3
- ---
4
-
5
- # source.transformImport
6
-
7
- :::tip
8
- This config is provided by Modern.js Builder, more detail can see [source.transformImport](https://modernjs.dev/builder/en/api/config-source.html#sourcepluginimport).
9
- :::
10
-
11
- import Main from '@modern-js/builder-doc/docs/en/config/source/transformImport.md';
12
-
13
- <Main />
@@ -1,13 +0,0 @@
1
- ---
2
- sidebar_label: pluginImport
3
- ---
4
-
5
- # source.transformImport
6
-
7
- :::tip
8
- 该配置由 Modern.js Builder 提供,更多信息可参考 [source.transformImport](https://modernjs.dev/builder/api/config-source.html#sourcepluginimport)。
9
- :::
10
-
11
- import Main from '@modern-js/builder-doc/docs/zh/config/source/transformImport.md';
12
-
13
- <Main />