@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.
@@ -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
- Most plugins in Rsbuild have been built into Modern.js. For example, when you need to inject the Polyfill of the Node module, you can directly use the [output.disableNodePolyfill](/configure/app/output/disable-node-polyfill.html) configuration.
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
- When import an SVG in a JS file, if you import `ReactComponent`, Modern.js will call [SVGR](https://react-svgr.com/) to convert the SVG into a React component.
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 { ReactComponent as Logo } from './static/logo.svg';
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
- If you use the default import, then the SVG will be treated as a normal static asset and you will get a URL:
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 logoURL from './static/logo.svg';
42
+ import { ReactComponent as Logo } from './static/logo.svg';
27
43
 
28
- console.log(logoURL); // => "/static/logo.6c12aba3.png"
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/routes/components/Item/index.tsx`:
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
- Rsbuild 中大部分插件已内置在 Modern.js 中,如:需要注入 Node 模块的 Polyfill 时,可直接使用 [output.disableNodePolyfill](/configure/app/output/disable-node-polyfill.html) 配置项。
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
- JS 文件中引用 SVG 资源时,如果你具名导入 `ReactComponent` 对象,Modern.js 会调用 [SVGR](https://react-svgr.com/),将 SVG 图片转换为一个 React 组件。
15
+ ### 默认导入
16
+
17
+ 如果你使用默认导入来引用 SVG,它会被当做静态资源来处理,你会得到一个 URL 字符串:
16
18
 
17
19
  ```tsx title="src/component/Logo.tsx"
18
- import { ReactComponent as Logo } from './static/logo.svg';
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
- 如果你使用默认导入,那么 SVG 会被当做普通的静态资源来处理,你会得到一个 URL 字符串:
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 logoURL from './static/logo.svg';
42
+ import { ReactComponent as Logo } from './static/logo.svg';
27
43
 
28
- console.log(logoURL); // => "/static/logo.6c12aba3.png"
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.3",
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.3"
25
+ "@modern-js/sandpack-react": "2.48.4"
26
26
  },
27
27
  "peerDependencies": {
28
- "@modern-js/builder-doc": "^2.48.3"
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.15.0",
39
- "@rspress/shared": "1.15.0",
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.3",
43
- "@modern-js/doc-plugin-auto-sidebar": "2.48.3"
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",