@modern-js/main-doc 0.0.0-next-1680186973557 → 0.0.0-next-1680271729233
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 +4 -2
- package/docs/en/configure/app/tools/bundler-chain.mdx +13 -0
- package/docs/en/configure/app/tools/swc.mdx +3 -2
- package/docs/en/guides/basic-features/data-fetch.mdx +1 -1
- package/docs/en/guides/basic-features/routes.mdx +1 -1
- package/docs/en/guides/topic-detail/model/use-model.mdx +2 -1
- package/docs/zh/configure/app/tools/bundler-chain.mdx +13 -0
- package/docs/zh/configure/app/tools/swc.mdx +4 -3
- package/docs/zh/guides/basic-features/data-fetch.mdx +1 -1
- package/docs/zh/guides/basic-features/routes.mdx +1 -1
- package/docs/zh/guides/topic-detail/model/use-model.mdx +2 -1
- package/modern.config.ts +3 -2
- package/package.json +5 -5
package/CHANGELOG.md
CHANGED
|
@@ -1,10 +1,12 @@
|
|
|
1
1
|
# @modern-js/main-doc
|
|
2
2
|
|
|
3
|
-
## 0.0.0-next-
|
|
3
|
+
## 0.0.0-next-1680271729233
|
|
4
4
|
|
|
5
5
|
### Patch Changes
|
|
6
6
|
|
|
7
|
-
-
|
|
7
|
+
- 9e5044d41: doc: 修正文档中使用@edenx/runtime 的部分
|
|
8
|
+
doc: Correct the sections in the document that use @edenx/runtime.
|
|
9
|
+
- @modern-js/builder-doc@0.0.0-next-1680271729233
|
|
8
10
|
|
|
9
11
|
## 2.11.0
|
|
10
12
|
|
|
@@ -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
|
-
|
|
22
|
+
First, you need to execute `pnpm run new` to enable the SWC compile:
|
|
23
23
|
|
|
24
24
|
```bash
|
|
25
|
-
|
|
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 "@
|
|
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
|
|
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
|
|
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,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
|
-
|
|
22
|
+
首先,你需要执行 `pnpm run new` 启用 SWC 编译:
|
|
23
23
|
|
|
24
24
|
```bash
|
|
25
|
-
|
|
25
|
+
? 请选择你想要的操作:启用可选功能
|
|
26
|
+
? 启用可选功能:启用「SWC 编译」
|
|
26
27
|
```
|
|
27
28
|
|
|
28
|
-
|
|
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 "@
|
|
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
|
|
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
|
|
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() {
|
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:
|
|
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:
|
|
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": "0.0.0-next-
|
|
14
|
+
"version": "0.0.0-next-1680271729233",
|
|
15
15
|
"publishConfig": {
|
|
16
16
|
"registry": "https://registry.npmjs.org/",
|
|
17
17
|
"access": "public"
|
|
18
18
|
},
|
|
19
19
|
"peerDependencies": {
|
|
20
|
-
"@modern-js/builder-doc": "0.0.0-next-
|
|
20
|
+
"@modern-js/builder-doc": "0.0.0-next-1680271729233"
|
|
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": "0.0.0-next-
|
|
33
|
-
"@modern-js/doc-
|
|
34
|
-
"@modern-js/doc-
|
|
32
|
+
"@modern-js/builder-doc": "0.0.0-next-1680271729233",
|
|
33
|
+
"@modern-js/doc-tools": "0.0.0-next-1680271729233",
|
|
34
|
+
"@modern-js/doc-plugin-auto-sidebar": "0.0.0-next-1680271729233"
|
|
35
35
|
},
|
|
36
36
|
"scripts": {
|
|
37
37
|
"dev": "modern dev",
|