@modern-js/main-doc 2.48.3 → 2.48.4
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/docs/en/components/global-proxy.mdx +4 -0
- package/docs/en/guides/advanced-features/rsbuild-plugin.mdx +5 -3
- package/docs/en/guides/basic-features/svg-assets.mdx +26 -5
- package/docs/en/tutorials/first-app/c03-css.mdx +1 -1
- package/docs/zh/components/global-proxy.mdx +4 -0
- package/docs/zh/guides/advanced-features/rsbuild-plugin.mdx +6 -4
- package/docs/zh/guides/basic-features/svg-assets.mdx +26 -5
- package/package.json +7 -7
@@ -1,3 +1,7 @@
|
|
1
|
+
:::warning
|
2
|
+
`@modern-js/plugin-proxy` is no longer maintained and new versions will no longer be released. Please consider migrating to other proxy tools, such as [whistle](https://github.com/avwo/whistle).
|
3
|
+
:::
|
4
|
+
|
1
5
|
Modern.js provides an out-of-the-box global proxy plugin `@modern-js/plugin-proxy`, which is based on [whistle](https://github.com/avwo/whistle) and can be used to view and modify the requests and responses of HTTP/HTTPS, as well as be used as an HTTP proxy server.
|
2
6
|
|
3
7
|
### Setting Proxy Rules
|
@@ -16,12 +16,14 @@ Rsbuild is the build tool of Modern.js. You can modify the default build behavio
|
|
16
16
|
|
17
17
|
You can register the Rsbuild plugin through the `builderPlugins` option in `modern.config.ts`, see [builderPlugins](/configure/app/builder-plugins) for details.
|
18
18
|
|
19
|
-
## Official Plugins
|
20
|
-
|
21
19
|
:::tip
|
22
|
-
|
20
|
+
Modern.js has upgraded the build tool to [Rsbuild](https://rsbuild.dev/) starting from `MAJOR_VERSION.46.0`.
|
21
|
+
|
22
|
+
If your current version is lower than MAJOR_VERSION.46.0, you can upgrade by executing `npx modern upgrade`.
|
23
23
|
:::
|
24
24
|
|
25
|
+
## Official Plugins
|
26
|
+
|
25
27
|
### Builtin Plugins
|
26
28
|
|
27
29
|
Here are the official Rsbuild plugins built into Modern.js:
|
@@ -12,20 +12,36 @@ SVG stands for Scalable Vector Graphics. It is a type of image format that uses
|
|
12
12
|
|
13
13
|
## Import SVG in JS file
|
14
14
|
|
15
|
-
|
15
|
+
### Default Import
|
16
|
+
|
17
|
+
If you use the default import to reference SVG, it will be treated as a static asset and you will get a URL string:
|
16
18
|
|
17
19
|
```tsx title="src/component/Logo.tsx"
|
18
|
-
import
|
20
|
+
import logoURL from './static/logo.svg';
|
21
|
+
|
22
|
+
console.log(logoURL); // => "/static/logo.6c12aba3.png"
|
23
|
+
```
|
24
|
+
|
25
|
+
### Transform to React Component
|
26
|
+
|
27
|
+
When referencing SVG assets in JS files, if the import path includes the `?react` suffix, Modern.js will call SVGR to transform the SVG image into a React component:
|
28
|
+
|
29
|
+
```tsx title="src/component/Logo.tsx"
|
30
|
+
import Logo from './logo.svg?react';
|
19
31
|
|
20
32
|
export default () => <Logo />;
|
21
33
|
```
|
22
34
|
|
23
|
-
|
35
|
+
:::tip
|
36
|
+
Modern.js >= MAJOR_VERSION.48.3 version supports the above usage.
|
37
|
+
:::
|
38
|
+
|
39
|
+
Modern.js also supports the following usage, transforming SVG into a React component by named import `ReactComponent`:
|
24
40
|
|
25
41
|
```tsx title="src/component/Logo.tsx"
|
26
|
-
import
|
42
|
+
import { ReactComponent as Logo } from './static/logo.svg';
|
27
43
|
|
28
|
-
|
44
|
+
export default () => <Logo />;
|
29
45
|
```
|
30
46
|
|
31
47
|
## Modify the Default Export
|
@@ -95,6 +111,11 @@ declare module '*.svg' {
|
|
95
111
|
const content: string;
|
96
112
|
export default content;
|
97
113
|
}
|
114
|
+
|
115
|
+
declare module '*.svg?react' {
|
116
|
+
const ReactComponent: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
|
117
|
+
export default ReactComponent;
|
118
|
+
}
|
98
119
|
```
|
99
120
|
|
100
121
|
If you set `svgDefaultExport` to `'component'`, then change the type declaration to:
|
@@ -298,7 +298,7 @@ Modern.js integrates with [PostCSS](/guides/basic-features/css) and supports mod
|
|
298
298
|
|
299
299
|
:::
|
300
300
|
|
301
|
-
Use in `src/
|
301
|
+
Use in `src/components/Item/index.tsx`:
|
302
302
|
|
303
303
|
```js
|
304
304
|
<div className="ml-4 flex-1 flex justify-between">
|
@@ -1,3 +1,7 @@
|
|
1
|
+
:::warning
|
2
|
+
`@modern-js/plugin-proxy` 已不再维护,后续将不再发布新版本。请迁移到其他代理工具,比如 [whistle](https://github.com/avwo/whistle)。
|
3
|
+
:::
|
4
|
+
|
1
5
|
Modern.js 提供了开箱即用的全局代理插件 `@modern-js/plugin-proxy`,该插件底层基于 [whistle](https://github.com/avwo/whistle),可用来查看、修改 HTTP/HTTPS 的请求和响应,也可作为 HTTP 代理服务器使用。
|
2
6
|
|
3
7
|
### 设置代理规则
|
@@ -16,15 +16,17 @@ Rsbuild 是 Modern.js 底层的构建工具,可通过添加 Rsbuild 插件修
|
|
16
16
|
|
17
17
|
你可以在 `modern.config.ts` 中通过 `builderPlugins` 选项来注册 Rsbuild 插件,详见 [builderPlugins 构建插件](/configure/app/builder-plugins.html)。
|
18
18
|
|
19
|
-
## 官方插件
|
20
|
-
|
21
19
|
:::tip
|
22
|
-
|
20
|
+
Modern.js 从 `MAJOR_VERSION.46.0` 起开始将底层的构建工具升级为 [Rsbuild](https://rsbuild.dev/)。
|
21
|
+
|
22
|
+
如果你当前版本低于 MAJOR_VERSION.46.0, 可通过执行 `npx modern upgrade` 进行升级。
|
23
23
|
:::
|
24
24
|
|
25
|
+
## 官方插件
|
26
|
+
|
25
27
|
### 内置插件
|
26
28
|
|
27
|
-
以下是已在 Modern.js 中内置的 Rsbuild
|
29
|
+
以下是已在 Modern.js 中内置的 Rsbuild 官方插件,无需安装,即可启用:
|
28
30
|
|
29
31
|
| 插件 | 介绍 | Modern.js 链接 |
|
30
32
|
| -------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
|
@@ -12,20 +12,36 @@ SVG 是 Scalable Vector Graphics 的缩写,意为可伸缩矢量图形。SVG
|
|
12
12
|
|
13
13
|
## 在 JS 文件中引用
|
14
14
|
|
15
|
-
|
15
|
+
### 默认导入
|
16
|
+
|
17
|
+
如果你使用默认导入来引用 SVG,它会被当做静态资源来处理,你会得到一个 URL 字符串:
|
16
18
|
|
17
19
|
```tsx title="src/component/Logo.tsx"
|
18
|
-
import
|
20
|
+
import logoURL from './static/logo.svg';
|
21
|
+
|
22
|
+
console.log(logoURL); // => "/static/logo.6c12aba3.png"
|
23
|
+
```
|
24
|
+
|
25
|
+
### 转换 React 组件
|
26
|
+
|
27
|
+
在 JS 文件中引用 SVG 资源时,如果导入的路径包含 `?react` 后缀,Modern.js 会调用 SVGR,将 SVG 图片转换为一个 React 组件:
|
28
|
+
|
29
|
+
```tsx title="src/component/Logo.tsx"
|
30
|
+
import Logo from './logo.svg?react';
|
19
31
|
|
20
32
|
export default () => <Logo />;
|
21
33
|
```
|
22
34
|
|
23
|
-
|
35
|
+
:::tip
|
36
|
+
Modern.js >= MAJOR_VERSION.48.3 版本支持上述用法。
|
37
|
+
:::
|
38
|
+
|
39
|
+
Modern.js 也支持以下用法,通过具名导入 `ReactComponent` 来转换 SVG 为 React 组件:
|
24
40
|
|
25
41
|
```tsx title="src/component/Logo.tsx"
|
26
|
-
import
|
42
|
+
import { ReactComponent as Logo } from './static/logo.svg';
|
27
43
|
|
28
|
-
|
44
|
+
export default () => <Logo />;
|
29
45
|
```
|
30
46
|
|
31
47
|
## 修改默认导出
|
@@ -97,6 +113,11 @@ declare module '*.svg' {
|
|
97
113
|
const content: string;
|
98
114
|
export default content;
|
99
115
|
}
|
116
|
+
|
117
|
+
declare module '*.svg?react' {
|
118
|
+
const ReactComponent: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
|
119
|
+
export default ReactComponent;
|
120
|
+
}
|
100
121
|
```
|
101
122
|
|
102
123
|
如果你将 `svgDefaultExport` 设置为 `'component'`,则将类型声明修改为:
|
package/package.json
CHANGED
@@ -15,17 +15,17 @@
|
|
15
15
|
"modern",
|
16
16
|
"modern.js"
|
17
17
|
],
|
18
|
-
"version": "2.48.
|
18
|
+
"version": "2.48.4",
|
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.48.
|
25
|
+
"@modern-js/sandpack-react": "2.48.4"
|
26
26
|
},
|
27
27
|
"peerDependencies": {
|
28
|
-
"@modern-js/builder-doc": "^2.48.
|
28
|
+
"@modern-js/builder-doc": "^2.48.4"
|
29
29
|
},
|
30
30
|
"devDependencies": {
|
31
31
|
"classnames": "^2",
|
@@ -35,12 +35,12 @@
|
|
35
35
|
"ts-node": "^10.9.1",
|
36
36
|
"typescript": "^5",
|
37
37
|
"fs-extra": "^10",
|
38
|
-
"rspress": "1.
|
39
|
-
"@rspress/shared": "1.
|
38
|
+
"rspress": "1.16.0",
|
39
|
+
"@rspress/shared": "1.16.0",
|
40
40
|
"@types/node": "^16",
|
41
41
|
"@types/fs-extra": "9.0.13",
|
42
|
-
"@modern-js/builder-doc": "2.48.
|
43
|
-
"@modern-js/doc-plugin-auto-sidebar": "2.48.
|
42
|
+
"@modern-js/builder-doc": "2.48.4",
|
43
|
+
"@modern-js/doc-plugin-auto-sidebar": "2.48.4"
|
44
44
|
},
|
45
45
|
"scripts": {
|
46
46
|
"dev": "rspress dev",
|