@modern-js/main-doc 2.26.0 → 2.28.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 +16 -0
- package/docs/en/configure/app/experiments/source-build.mdx +13 -0
- package/docs/en/configure/app/source/alias-strategy.mdx +13 -0
- package/docs/en/configure/app/tools/swc.mdx +17 -2
- package/docs/en/guides/advanced-features/rspack-start.mdx +5 -1
- package/docs/en/guides/advanced-features/ssr.mdx +6 -2
- package/docs/en/guides/basic-features/routes.mdx +35 -1
- package/docs/en/guides/topic-detail/framework-plugin/hook-list.mdx +202 -168
- package/docs/en/tutorials/first-app/c03-css.mdx +3 -2
- package/docs/zh/configure/app/experiments/source-build.mdx +13 -0
- package/docs/zh/configure/app/source/alias-strategy.mdx +13 -0
- package/docs/zh/configure/app/tools/swc.mdx +17 -2
- package/docs/zh/guides/advanced-features/rspack-start.mdx +5 -1
- package/docs/zh/guides/advanced-features/ssr.mdx +2 -2
- package/docs/zh/guides/basic-features/routes.mdx +42 -4
- package/docs/zh/guides/topic-detail/framework-plugin/hook-list.mdx +158 -124
- package/package.json +5 -5
package/CHANGELOG.md
CHANGED
@@ -1,5 +1,21 @@
|
|
1
1
|
# @modern-js/main-doc
|
2
2
|
|
3
|
+
## 2.28.0
|
4
|
+
|
5
|
+
### Patch Changes
|
6
|
+
|
7
|
+
- @modern-js/builder-doc@2.28.0
|
8
|
+
|
9
|
+
## 2.27.0
|
10
|
+
|
11
|
+
### Patch Changes
|
12
|
+
|
13
|
+
- 86274f5: docs: add source code build documentation
|
14
|
+
docs: 添加源码构建文档
|
15
|
+
- ebdc4da: Fixed markdown error for link to styled-components website
|
16
|
+
- Updated dependencies [86274f5]
|
17
|
+
- @modern-js/builder-doc@2.27.0
|
18
|
+
|
3
19
|
## 2.26.0
|
4
20
|
|
5
21
|
### Patch Changes
|
@@ -0,0 +1,13 @@
|
|
1
|
+
---
|
2
|
+
sidebar_label: sourceBuild
|
3
|
+
---
|
4
|
+
|
5
|
+
# experiments.sourceBuild
|
6
|
+
|
7
|
+
:::tip
|
8
|
+
This config is provided by Modern.js Builder, more detail can see [experiments.sourceBuild](https://modernjs.dev/builder/en/api/config-experiments.html#experimentssourcebuild).
|
9
|
+
:::
|
10
|
+
|
11
|
+
import Main from '@modern-js/builder-doc/docs/en/config/experiments/sourceBuild.md';
|
12
|
+
|
13
|
+
<Main />
|
@@ -0,0 +1,13 @@
|
|
1
|
+
---
|
2
|
+
sidebar_label: aliasStrategy
|
3
|
+
---
|
4
|
+
|
5
|
+
# source.aliasStrategy
|
6
|
+
|
7
|
+
:::tip
|
8
|
+
This config is provided by Modern.js Builder, more detail can see [source.aliasStrategy](https://modernjs.dev/builder/en/api/config-source.html#sourcealiasstrategy).
|
9
|
+
:::
|
10
|
+
|
11
|
+
import Main from '@modern-js/builder-doc/docs/en/config/source/aliasStrategy.md';
|
12
|
+
|
13
|
+
<Main />
|
@@ -4,7 +4,7 @@ sidebar_label: swc
|
|
4
4
|
|
5
5
|
# tools.swc
|
6
6
|
|
7
|
-
- **Type:** `Object`
|
7
|
+
- **Type:** `Object | Function`
|
8
8
|
- **Default:** `undefined`
|
9
9
|
|
10
10
|
## Introduction
|
@@ -21,7 +21,7 @@ If you have configured the current SWC plugin when using Rspack, it will not hav
|
|
21
21
|
|
22
22
|
## Install
|
23
23
|
|
24
|
-
import EnableSWC from '@modern-js/builder-doc/docs/en/shared/
|
24
|
+
import EnableSWC from '@modern-js/builder-doc/docs/en/shared/enableSwc.md';
|
25
25
|
|
26
26
|
<EnableSWC />
|
27
27
|
|
@@ -44,4 +44,19 @@ export default defineConfig({
|
|
44
44
|
});
|
45
45
|
```
|
46
46
|
|
47
|
+
Or using function to have more customize config, or to modify the default config.
|
48
|
+
|
49
|
+
```js title="modern.config.ts"
|
50
|
+
import { defineConfig } from '@modern-js/app-tools';
|
51
|
+
|
52
|
+
export default defineConfig({
|
53
|
+
tools: {
|
54
|
+
swc(config, { setConfig }) {
|
55
|
+
// Used for transpiling decorator of mobx correctly
|
56
|
+
setConfig(config, 'jsc.transform.useDefineForClassFields', true);
|
57
|
+
},
|
58
|
+
},
|
59
|
+
});
|
60
|
+
```
|
61
|
+
|
47
62
|
For config details, please refer to [Modern.js Builder - SWC Plugin Configuration](https://modernjs.dev/builder/en/plugins/plugin-swc.html#config).
|
@@ -4,7 +4,7 @@ sidebar_position: 1
|
|
4
4
|
|
5
5
|
# Using Rspack
|
6
6
|
|
7
|
-
import Rspack from '@modern-js/builder-doc/docs/en/shared/
|
7
|
+
import Rspack from '@modern-js/builder-doc/docs/en/shared/rspackTip.mdx';
|
8
8
|
|
9
9
|
<Rspack />
|
10
10
|
|
@@ -54,6 +54,10 @@ import { appTools, defineConfig } from '@modern-js/app-tools';
|
|
54
54
|
});
|
55
55
|
```
|
56
56
|
|
57
|
+
import RspackPrecautions from '@modern-js/builder-doc/docs/en/shared/rspackPrecautions.md';
|
58
|
+
|
59
|
+
<RspackPrecautions />
|
60
|
+
|
57
61
|
## Migrating configuration
|
58
62
|
|
59
63
|
After enabling Rspack building capability, further configuration migration is needed by referring to the [Configuration Differences](https://modernjs.dev/builder/en/guide/advanced/rspack-start.html#migrating-from-webpack-to-rspack).
|
@@ -159,10 +159,10 @@ Using SPR in Modern.js is very simple. Just add the PreRender component to your
|
|
159
159
|
|
160
160
|
Here is a simulated component that uses the useLoaderData API. The request in the Data Loader takes 2 seconds to consume.
|
161
161
|
|
162
|
-
```
|
162
|
+
```tsx title="page.loader.ts"
|
163
163
|
import { useLoaderData } from '@modern-js/runtime/router';
|
164
164
|
|
165
|
-
export
|
165
|
+
export default async () => {
|
166
166
|
await new Promise((resolve, reject) => {
|
167
167
|
setTimeout(() => {
|
168
168
|
resolve(null);
|
@@ -173,6 +173,10 @@ export const loader = async () => {
|
|
173
173
|
message: 'Hello Modern.js',
|
174
174
|
};
|
175
175
|
};
|
176
|
+
```
|
177
|
+
|
178
|
+
```tsx title="page.tsx"
|
179
|
+
import { useLoaderData } from '@modern-js/runtime/router';
|
176
180
|
|
177
181
|
export default () => {
|
178
182
|
const data = useLoaderData();
|
@@ -147,6 +147,29 @@ In summary, if there is a `layout.tsx` file under the sub-route's file directory
|
|
147
147
|
|
148
148
|
All routes should end with the `<Page>` component. If the developer introduces the `<Outlet>` component in the `page.tsx` file, there will be no effect.
|
149
149
|
|
150
|
+
#### Config
|
151
|
+
|
152
|
+
Each `Layout` or `Page` file can define its own `config` file, such as `page.config.ts`. In this file, we have an conventinal on a named export called `handle`, which you can define any properties:
|
153
|
+
|
154
|
+
```ts title="routes/blog/page.config.ts"
|
155
|
+
export const handle = {
|
156
|
+
breadcrumbName: 'profile'
|
157
|
+
}
|
158
|
+
```
|
159
|
+
|
160
|
+
These properties as defined are available via the [`useMatches`](https://reactrouter.com/en/main/hooks/use-matches) hook:
|
161
|
+
|
162
|
+
```ts title="routes/layout.ts"
|
163
|
+
export default () => {
|
164
|
+
const matches = useMatches;
|
165
|
+
const breadcrumbs = matches.map(matchedRoute => matchedRoute?.handle?.breadcrumbName);
|
166
|
+
return (
|
167
|
+
<Breadcrumb names={breadcrumbs}>
|
168
|
+
</Breadcrumb>
|
169
|
+
)
|
170
|
+
}
|
171
|
+
```
|
172
|
+
|
150
173
|
### Dynamic Routing
|
151
174
|
|
152
175
|
Routes generated from file directories named with `[]` will be handled as dynamic routes. For example, the following file directory:
|
@@ -204,7 +227,18 @@ For example, the following directory structure:
|
|
204
227
|
└── page.tsx
|
205
228
|
```
|
206
229
|
|
207
|
-
When accessing any path that does not match, the `routes/$.tsx` component will be rendered
|
230
|
+
When accessing any path that does not match(For example `/blog/a`), the `routes/$.tsx` component will be rendered, because there is `layout.tsx` here, the rendered UI is as follows.
|
231
|
+
```tsx
|
232
|
+
<RootLayout>
|
233
|
+
<BlogLayout>
|
234
|
+
<$></$>
|
235
|
+
</BlogLayout>
|
236
|
+
</RootLayout>
|
237
|
+
```
|
238
|
+
|
239
|
+
If you want access to `/blog` to also match the `blog/$.tsx` file, you need to delete the `blog/layout.tsx` file in the same directory and make sure that there are no other subroutes under `blog`.
|
240
|
+
|
241
|
+
As same, you can use [useParams](/apis/app/runtime/router/router#useparams) in `$.tsx` to capture the remaining parts of the URL.
|
208
242
|
|
209
243
|
```ts title="$.tsx"
|
210
244
|
import { useParams } from '@modern-js/runtime/router';
|