@modern-js/main-doc 0.0.0-next-1678243962105 → 0.0.0-next-1678282721176
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 +3 -2
- package/en/guides/advanced-features/eslint.mdx +30 -32
- package/en/guides/topic-detail/framework-plugin/extend.mdx +20 -19
- package/en/guides/topic-detail/framework-plugin/hook-list.mdx +156 -155
- package/en/guides/topic-detail/framework-plugin/hook.mdx +58 -43
- package/en/guides/topic-detail/framework-plugin/implement.mdx +47 -49
- package/en/guides/topic-detail/framework-plugin/introduction.mdx +22 -23
- package/en/guides/topic-detail/framework-plugin/plugin-api.mdx +13 -13
- package/en/guides/topic-detail/framework-plugin/relationship.mdx +30 -30
- package/en/guides/topic-detail/micro-frontend/c01-introduction.mdx +17 -17
- package/en/guides/topic-detail/micro-frontend/c02-development.mdx +76 -78
- package/en/guides/topic-detail/micro-frontend/c03-main-app.mdx +57 -51
- package/en/guides/topic-detail/micro-frontend/c04-communicate.mdx +11 -11
- package/en/guides/topic-detail/micro-frontend/c05-mixed-stack.mdx +13 -13
- package/en/guides/topic-detail/model/auto-actions.mdx +18 -21
- package/en/guides/topic-detail/model/computed-state.mdx +27 -25
- package/en/guides/topic-detail/model/define-model.mdx +14 -14
- package/en/guides/topic-detail/model/faq.mdx +12 -13
- package/en/guides/topic-detail/model/manage-effects.mdx +43 -52
- package/en/guides/topic-detail/model/model-communicate.mdx +47 -45
- package/en/guides/topic-detail/model/performance.mdx +22 -23
- package/en/guides/topic-detail/model/quick-start.mdx +29 -28
- package/en/guides/topic-detail/model/redux-integration.mdx +7 -7
- package/en/guides/topic-detail/model/test-model.mdx +11 -11
- package/en/guides/topic-detail/model/typescript-best-practice.mdx +16 -15
- package/en/guides/topic-detail/model/use-model.mdx +40 -45
- package/en/guides/topic-detail/model/use-out-of-modernjs.mdx +16 -16
- package/en/guides/troubleshooting/cli.mdx +2 -2
- package/package.json +3 -3
- package/zh/guides/topic-detail/framework-plugin/plugin-api.mdx +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# @modern-js/main-doc
|
|
2
2
|
|
|
3
|
-
## 0.0.0-next-
|
|
3
|
+
## 0.0.0-next-1678282721176
|
|
4
4
|
|
|
5
5
|
### Patch Changes
|
|
6
6
|
|
|
@@ -12,5 +12,6 @@
|
|
|
12
12
|
|
|
13
13
|
修复 Typo
|
|
14
14
|
|
|
15
|
+
- Updated dependencies [9736c6a43]
|
|
15
16
|
- Updated dependencies [2c1151271]
|
|
16
|
-
- @modern-js/builder-doc@0.0.0-next-
|
|
17
|
+
- @modern-js/builder-doc@0.0.0-next-1678282721176
|
|
@@ -16,12 +16,11 @@ Most problems will be solved by the automatic fix of ESLint rules or the code fo
|
|
|
16
16
|
|
|
17
17
|
:::info
|
|
18
18
|
This kind of automatic fix is mainly performed when the IDE saves the file, and a few will be automatically fix on submit.
|
|
19
|
-
|
|
20
19
|
:::
|
|
21
20
|
|
|
22
21
|
### Batch Automatic Fix
|
|
23
22
|
|
|
24
|
-
|
|
23
|
+
In rare cases, such as when an old project is migrated, the following commands can be executed to repair and inspect all files in bulk:
|
|
25
24
|
|
|
26
25
|
```bash
|
|
27
26
|
pnpm run lint:error
|
|
@@ -29,13 +28,13 @@ pnpm run lint:error
|
|
|
29
28
|
|
|
30
29
|
### Manual Fix
|
|
31
30
|
|
|
32
|
-
|
|
31
|
+
For problems that cannot be automatically fixed, you can click the rule link in the problem prompt box in the IDE to open the document of this rule to view the explanation and solution of the problem.
|
|
33
32
|
|
|
34
|
-
###
|
|
33
|
+
### Claim Exceptions
|
|
35
34
|
|
|
36
|
-
|
|
35
|
+
At this stage, some rules are not smart enough, and in most cases there will be great benefits, and in a few cases it may not apply. But if the entire rule is turned off or changed for these few cases, the gain is not worth the loss.
|
|
37
36
|
|
|
38
|
-
|
|
37
|
+
In this case, you can use the [eslint-disable](https://eslint.org/docs/user-guide/configuring/rules#disabling-rules) comment to mark the code blocks that meet the **rare case**, stating that this is an exception and should be ignored. For example:
|
|
39
38
|
|
|
40
39
|
```js
|
|
41
40
|
/* eslint-disable filenames/match-exported */
|
|
@@ -44,19 +43,19 @@ pnpm run lint:error
|
|
|
44
43
|
```
|
|
45
44
|
|
|
46
45
|
:::info
|
|
47
|
-
|
|
48
|
-
|
|
46
|
+
Enter eslint in the VS Code editor, a prompt box about `eslint-disable` will automatically appear, select the prompt option to generate the corresponding comment pair.
|
|
49
47
|
:::
|
|
50
48
|
|
|
51
|
-
|
|
49
|
+
[Modern.js ESLint Rule Set] requires that [eslint-disable](https://eslint.org/docs/user-guide/configuring/rules#disabling-rules) must be used in pairs, the scope to be affected must be clearly expressed, and what rules to disable within this scope must be clearly expressed, the purpose is to make **exceptions** Clear, minimized scope to avoid abuse of [eslint-disable](https://eslint.org/docs/user-guide/configuring/rules#disabling-rules), resulting in code that does not belong to the exception being disabled by the rule.
|
|
52
50
|
|
|
53
|
-
## Q:
|
|
51
|
+
## Q: How to customize ESLint rules
|
|
54
52
|
|
|
55
|
-
###
|
|
53
|
+
### The `eslintConfig` field in `package.json` in the root directory
|
|
56
54
|
|
|
57
|
-
|
|
55
|
+
This place is the default ESLint configuration for the entire repository and is designed for pure Node.js code (which can only run in Node.js).
|
|
56
|
+
|
|
57
|
+
If the project does have special requirements or inevitable compatibility issues with some rules (not exceptions), you can add rule configuration here. This configuration will take precedence over the default [Modern.js ESLint ruleset], such as:
|
|
58
58
|
|
|
59
|
-
如果项目在某些规则上确实有特殊要求或不可避免的兼容问题(不是例外),可以在这里增加规则配置。该配置会优先于默认的【Modern.js ESLint 规则集】,比如:
|
|
60
59
|
|
|
61
60
|
```json
|
|
62
61
|
"eslintConfig": {
|
|
@@ -70,16 +69,15 @@ pnpm run lint:error
|
|
|
70
69
|
|
|
71
70
|
```
|
|
72
71
|
|
|
73
|
-
### `src/.eslintrc.js`
|
|
72
|
+
### `src/.eslintrc.js`
|
|
74
73
|
|
|
75
|
-
Modern.js
|
|
74
|
+
The application project and module project of Modern.js will have this configuration file by default in the source code directory, which is designed for Universal JS code.
|
|
76
75
|
|
|
77
76
|
:::info
|
|
78
|
-
Universal JS
|
|
79
|
-
|
|
77
|
+
Universal JS code is code that can run on both the browser side and the server side.
|
|
80
78
|
:::
|
|
81
79
|
|
|
82
|
-
|
|
80
|
+
If the project does have special requirements or inevitable compatibility issues with some rules (not exceptions), you can add a rule configuration here, which will take precedence over the default [Modern.js ESLint ruleset], such as:
|
|
83
81
|
|
|
84
82
|
```js
|
|
85
83
|
// eslint-disable-next-line import/no-commonjs
|
|
@@ -96,7 +94,7 @@ module.exports = {
|
|
|
96
94
|
};
|
|
97
95
|
```
|
|
98
96
|
|
|
99
|
-
|
|
97
|
+
If necessary, you can continue to add the `.eslintrc.js` file in different subdirectories, and make special configuration for the code in this subdirectory:
|
|
100
98
|
|
|
101
99
|
```js
|
|
102
100
|
module.exports = {
|
|
@@ -107,13 +105,13 @@ module.exports = {
|
|
|
107
105
|
```
|
|
108
106
|
|
|
109
107
|
:::tip
|
|
110
|
-
|
|
108
|
+
Note: It is not necessary to use the `extends` field, it will automatically inherit the configuration of the parent directory.
|
|
111
109
|
|
|
112
110
|
:::
|
|
113
111
|
|
|
114
|
-
### package.json
|
|
112
|
+
### `eslintIgnore` field in `package.json`
|
|
115
113
|
|
|
116
|
-
|
|
114
|
+
Adding directories that contain `.js`, `.jsx`, `.ts`, `.tsx` files, but do not require code inspection and automatic repair, to `eslintIgnore` can optimize the speed of ESLint inspection, such as:
|
|
117
115
|
|
|
118
116
|
```json
|
|
119
117
|
"eslintIgnore": [
|
|
@@ -123,25 +121,25 @@ module.exports = {
|
|
|
123
121
|
],
|
|
124
122
|
```
|
|
125
123
|
|
|
126
|
-
## Q:
|
|
124
|
+
## Q: How to upgrade the version of the ESLint plugin
|
|
127
125
|
|
|
128
|
-
|
|
126
|
+
As long as it is not a change in the Major version (the "^" symbol that does not comply with the [Semver](https://semver.org/) rule), you can specify this dependency directly in the `package.json` of the business project, delete the Lock file (or try to manually delete the Lock file). the contents of this package name in the file), execute `pnpm install` to reinstall the dependency and generate a new Lock file.
|
|
129
127
|
|
|
130
|
-
|
|
128
|
+
After doing this, the plugin should only exist in the `./node_modules` directory of the business project and be upgraded to the version you specified.
|
|
131
129
|
|
|
132
130
|
:::tip
|
|
133
|
-
- Major
|
|
134
|
-
-
|
|
135
|
-
- Modern.js
|
|
136
|
-
- Major
|
|
131
|
+
- Major version is the major version number. For more information, please read [[Semantic Versioning](https://semver.org/#summary) ].
|
|
132
|
+
- All upstream projects encapsulated by Modern.js (such as ESLint, [ESLint plugin](https://eslint.org/docs/user-guide/configuring/plugins#plugins), [React Router](https://reactrouter.com/), etc.) can also be upgraded in this way.
|
|
133
|
+
- Modern.js will also try to upgrade these upstream dependencies as timely as possible in each release.
|
|
134
|
+
- Major version upgrades need to be published by Modern.js.
|
|
137
135
|
|
|
138
136
|
:::
|
|
139
137
|
|
|
140
|
-
## Q: WebStorm
|
|
138
|
+
## Q: WebStorm sometimes reports ESLint errors
|
|
141
139
|
|
|
142
|
-
|
|
140
|
+
Since WebStorm believes that the ESLint execution directory is determined based on the `.eslintrc'` file. Therefore, the placement of the `src/.eslintrc` file location will cause the location specified by the `tsconfig.json` file (in the project root directory) to not be found in the'src/'directory.
|
|
143
141
|
|
|
144
|
-
|
|
142
|
+
you need to configure it manually:
|
|
145
143
|
|
|
146
144
|
```json
|
|
147
145
|
--parser-options=project:../tsconfig.json
|
|
@@ -1,24 +1,24 @@
|
|
|
1
1
|
---
|
|
2
|
-
title:
|
|
2
|
+
title: Extending
|
|
3
3
|
sidebar_position: 5
|
|
4
4
|
---
|
|
5
|
-
#
|
|
5
|
+
# Extending Plugin Hooks
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
This section describes how to extend plugin Hooks by dynamically registering [Hook models](/guides/topic-detail/framework-plugin/hook).
|
|
8
8
|
|
|
9
|
-
##
|
|
9
|
+
## Example
|
|
10
10
|
|
|
11
|
-
|
|
11
|
+
Here is a simple example to demonstrate how to extend plugin Hooks by adding Hooks that manage console output.
|
|
12
12
|
|
|
13
|
-
|
|
13
|
+
First, we initialize an empty project file and add basic dependencies:
|
|
14
14
|
|
|
15
15
|
```bash
|
|
16
16
|
$ npx @modern-js/create modern-js-demo
|
|
17
17
|
```
|
|
18
18
|
|
|
19
|
-
###
|
|
19
|
+
### Creating Hooks
|
|
20
20
|
|
|
21
|
-
|
|
21
|
+
First, let's create a Hook model:
|
|
22
22
|
|
|
23
23
|
```ts title=config/plugin/myPlugin.ts
|
|
24
24
|
import { createWaterfall } from '@modern-js/plugin';
|
|
@@ -26,7 +26,7 @@ import { createWaterfall } from '@modern-js/plugin';
|
|
|
26
26
|
const message = createWaterfall<string[]>();
|
|
27
27
|
```
|
|
28
28
|
|
|
29
|
-
|
|
29
|
+
then register:
|
|
30
30
|
|
|
31
31
|
```ts title=config/plugin/myPlugin.ts
|
|
32
32
|
import type { CliPlugin } from '@modern-js/core';
|
|
@@ -40,7 +40,7 @@ export default (): CliPlugin => ({
|
|
|
40
40
|
});
|
|
41
41
|
```
|
|
42
42
|
|
|
43
|
-
|
|
43
|
+
add Hook types:
|
|
44
44
|
|
|
45
45
|
```ts title=config/plugin/myPlugin.ts
|
|
46
46
|
declare module '@modern-js/core' {
|
|
@@ -50,9 +50,9 @@ declare module '@modern-js/core' {
|
|
|
50
50
|
}
|
|
51
51
|
```
|
|
52
52
|
|
|
53
|
-
###
|
|
53
|
+
### Using Hooks
|
|
54
54
|
|
|
55
|
-
|
|
55
|
+
Create a plugin and add command handling logic through the `commands` Hook function:
|
|
56
56
|
|
|
57
57
|
```ts title=config/plugin/myPlugin.ts
|
|
58
58
|
import type { CliPlugin } from '@modern-js/core';
|
|
@@ -74,7 +74,7 @@ export default (): CliPlugin => ({
|
|
|
74
74
|
});
|
|
75
75
|
```
|
|
76
76
|
|
|
77
|
-
|
|
77
|
+
now `config/plugin/myPlugin.ts` is:
|
|
78
78
|
|
|
79
79
|
```ts title=config/plugin/myPlugin.ts
|
|
80
80
|
import { createWaterfall } from '@modern-js/plugin';
|
|
@@ -109,7 +109,7 @@ declare module '@modern-js/core' {
|
|
|
109
109
|
}
|
|
110
110
|
```
|
|
111
111
|
|
|
112
|
-
|
|
112
|
+
Then add this plugin in `modern.config.ts`:
|
|
113
113
|
|
|
114
114
|
```ts title="modern.config.ts"
|
|
115
115
|
import { defineConfig } from '@modern-js/app-tools';
|
|
@@ -120,9 +120,9 @@ export default defineConfig({
|
|
|
120
120
|
});
|
|
121
121
|
```
|
|
122
122
|
|
|
123
|
-
|
|
123
|
+
Now, run `npx modern message`, and the related logic will be executed, but no information is collected, so the console output is empty.
|
|
124
124
|
|
|
125
|
-
|
|
125
|
+
add:
|
|
126
126
|
|
|
127
127
|
```ts title=config/plugin/otherPlugin.ts
|
|
128
128
|
import type { CliPlugin } from '@modern-js/core';
|
|
@@ -140,7 +140,7 @@ export default (): CliPlugin => ({
|
|
|
140
140
|
});
|
|
141
141
|
```
|
|
142
142
|
|
|
143
|
-
|
|
143
|
+
add to config:
|
|
144
144
|
|
|
145
145
|
```ts title="modern.config.ts"
|
|
146
146
|
import { defineConfig } from '@modern-js/app-tools';
|
|
@@ -152,7 +152,7 @@ export default defineConfig({
|
|
|
152
152
|
});
|
|
153
153
|
```
|
|
154
154
|
|
|
155
|
-
|
|
155
|
+
run `npx modern message`, then we can get follow in console:
|
|
156
156
|
|
|
157
157
|
```bash
|
|
158
158
|
$ modern message
|
|
@@ -160,4 +160,5 @@ $ modern message
|
|
|
160
160
|
[foo] line 1
|
|
161
161
|
```
|
|
162
162
|
|
|
163
|
-
|
|
163
|
+
By using the above approach, you can extend plugin Hooks with various capabilities.
|
|
164
|
+
|