@modern-js/main-doc 2.48.3 → 2.48.4

package/docs/en/components/global-proxy.mdx

@@ -1,3 +1,7 @@
+:::warning
+`@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).
+:::
+
 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.
 
 ### Setting Proxy Rules

package/docs/en/guides/advanced-features/rsbuild-plugin.mdx

@@ -16,12 +16,14 @@ Rsbuild is the build tool of Modern.js. You can modify the default build behavio
 
 You can register the Rsbuild plugin through the `builderPlugins` option in `modern.config.ts`, see [builderPlugins](/configure/app/builder-plugins) for details.
 
-## Official Plugins
-
 :::tip
-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.
+Modern.js has upgraded the build tool to [Rsbuild](https://rsbuild.dev/) starting from `MAJOR_VERSION.46.0`.
+
+If your current version is lower than MAJOR_VERSION.46.0, you can upgrade by executing `npx modern upgrade`.
 :::
 
+## Official Plugins
+
 ### Builtin Plugins
 
 Here are the official Rsbuild plugins built into Modern.js:

package/docs/en/guides/basic-features/svg-assets.mdx

@@ -12,20 +12,36 @@ SVG stands for Scalable Vector Graphics. It is a type of image format that uses
 
 ## Import SVG in JS file
 
-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.
+### Default Import
+
+If you use the default import to reference SVG, it will be treated as a static asset and you will get a URL string:
 
 ```tsx title="src/component/Logo.tsx"
-import { ReactComponent as Logo } from './static/logo.svg';
+import logoURL from './static/logo.svg';
+
+console.log(logoURL); // => "/static/logo.6c12aba3.png"
+```
+
+### Transform to React Component
+
+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:
+
+```tsx title="src/component/Logo.tsx"
+import Logo from './logo.svg?react';
 
 export default () => <Logo />;
 ```
 
-If you use the default import, then the SVG will be treated as a normal static asset and you will get a URL:
+:::tip
+Modern.js >= MAJOR_VERSION.48.3 version supports the above usage.
+:::
+
+Modern.js also supports the following usage, transforming SVG into a React component by named import `ReactComponent`:
 
 ```tsx title="src/component/Logo.tsx"
-import logoURL from './static/logo.svg';
+import { ReactComponent as Logo } from './static/logo.svg';
 
-console.log(logoURL); // => "/static/logo.6c12aba3.png"
+export default () => <Logo />;
 ```
 
 ## Modify the Default Export
@@ -95,6 +111,11 @@ declare module '*.svg' {
   const content: string;
   export default content;
 }
+
+declare module '*.svg?react' {
+  const ReactComponent: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
+  export default ReactComponent;
+}
 ```
 
 If you set `svgDefaultExport` to `'component'`, then change the type declaration to:

package/docs/en/tutorials/first-app/c03-css.mdx

@@ -298,7 +298,7 @@ Modern.js integrates with [PostCSS](/guides/basic-features/css) and supports mod
 
 :::
 
-Use in `src/routes/components/Item/index.tsx`:
+Use in `src/components/Item/index.tsx`:
 
 ```js
 <div className="ml-4 flex-1 flex justify-between">

package/docs/zh/components/global-proxy.mdx

@@ -1,3 +1,7 @@
+:::warning
+`@modern-js/plugin-proxy` 已不再维护，后续将不再发布新版本。请迁移到其他代理工具，比如 [whistle](https://github.com/avwo/whistle)。
+:::
+
 Modern.js 提供了开箱即用的全局代理插件 `@modern-js/plugin-proxy`，该插件底层基于 [whistle](https://github.com/avwo/whistle)，可用来查看、修改 HTTP/HTTPS 的请求和响应，也可作为 HTTP 代理服务器使用。
 
 ### 设置代理规则

package/docs/zh/guides/advanced-features/rsbuild-plugin.mdx

@@ -16,15 +16,17 @@ Rsbuild 是 Modern.js 底层的构建工具，可通过添加 Rsbuild 插件修
 
 你可以在 `modern.config.ts` 中通过 `builderPlugins` 选项来注册 Rsbuild 插件，详见 [builderPlugins 构建插件](/configure/app/builder-plugins.html)。
 
-## 官方插件
-
 :::tip
-Rsbuild 中大部分插件已内置在 Modern.js 中，如：需要注入 Node 模块的 Polyfill 时，可直接使用 [output.disableNodePolyfill](/configure/app/output/disable-node-polyfill.html) 配置项。
+Modern.js 从 `MAJOR_VERSION.46.0` 起开始将底层的构建工具升级为 [Rsbuild](https://rsbuild.dev/)。
+
+如果你当前版本低于 MAJOR_VERSION.46.0, 可通过执行 `npx modern upgrade` 进行升级。
 :::
 
+## 官方插件
+
 ### 内置插件
 
-以下是已在 Modern.js 中内置的 Rsbuild 官方插件：
+以下是已在 Modern.js 中内置的 Rsbuild 官方插件，无需安装，即可启用：
 
 | 插件                                                                                   | 介绍                                                                                     | Modern.js 链接                                                                                                                        |
 | -------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- |

package/docs/zh/guides/basic-features/svg-assets.mdx

@@ -12,20 +12,36 @@ SVG 是 Scalable Vector Graphics 的缩写，意为可伸缩矢量图形。SVG
 
 ## 在 JS 文件中引用
 
-在 JS 文件中引用 SVG 资源时，如果你具名导入 `ReactComponent` 对象，Modern.js 会调用 [SVGR](https://react-svgr.com/)，将 SVG 图片转换为一个 React 组件。
+### 默认导入
+
+如果你使用默认导入来引用 SVG，它会被当做静态资源来处理，你会得到一个 URL 字符串：
 
 ```tsx title="src/component/Logo.tsx"
-import { ReactComponent as Logo } from './static/logo.svg';
+import logoURL from './static/logo.svg';
+
+console.log(logoURL); // => "/static/logo.6c12aba3.png"
+```
+
+### 转换 React 组件
+
+在 JS 文件中引用 SVG 资源时，如果导入的路径包含 `?react` 后缀，Modern.js 会调用 SVGR，将 SVG 图片转换为一个 React 组件：
+
+```tsx title="src/component/Logo.tsx"
+import Logo from './logo.svg?react';
 
 export default () => <Logo />;
 ```
 
-如果你使用默认导入，那么 SVG 会被当做普通的静态资源来处理，你会得到一个 URL 字符串：
+:::tip
+Modern.js >= MAJOR_VERSION.48.3 版本支持上述用法。
+:::
+
+Modern.js 也支持以下用法，通过具名导入 `ReactComponent` 来转换 SVG 为 React 组件：
 
 ```tsx title="src/component/Logo.tsx"
-import logoURL from './static/logo.svg';
+import { ReactComponent as Logo } from './static/logo.svg';
 
-console.log(logoURL); // => "/static/logo.6c12aba3.png"
+export default () => <Logo />;
 ```
 
 ## 修改默认导出
@@ -97,6 +113,11 @@ declare module '*.svg' {
   const content: string;
   export default content;
 }
+
+declare module '*.svg?react' {
+  const ReactComponent: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
+  export default ReactComponent;
+}
 ```
 
 如果你将 `svgDefaultExport` 设置为 `'component'`，则将类型声明修改为：

package/package.json

@@ -15,17 +15,17 @@
     "modern",
     "modern.js"
   ],
-  "version": "2.48.3",
+  "version": "2.48.4",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "public",
     "provenance": true
   },
   "dependencies": {
-    "@modern-js/sandpack-react": "2.48.3"
+    "@modern-js/sandpack-react": "2.48.4"
   },
   "peerDependencies": {
-    "@modern-js/builder-doc": "^2.48.3"
+    "@modern-js/builder-doc": "^2.48.4"
   },
   "devDependencies": {
     "classnames": "^2",
@@ -35,12 +35,12 @@
     "ts-node": "^10.9.1",
     "typescript": "^5",
     "fs-extra": "^10",
-    "rspress": "1.15.0",
-    "@rspress/shared": "1.15.0",
+    "rspress": "1.16.0",
+    "@rspress/shared": "1.16.0",
     "@types/node": "^16",
     "@types/fs-extra": "9.0.13",
-    "@modern-js/builder-doc": "2.48.3",
-    "@modern-js/doc-plugin-auto-sidebar": "2.48.3"
+    "@modern-js/builder-doc": "2.48.4",
+    "@modern-js/doc-plugin-auto-sidebar": "2.48.4"
   },
   "scripts": {
     "dev": "rspress dev",