@modern-js/main-doc 0.0.0-next-20240321025149 → 0.0.0-next-20240321101024

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/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": "0.0.0-next-20240321025149",
+  "version": "0.0.0-next-20240321101024",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "public",
     "provenance": true
   },
   "dependencies": {
-    "@modern-js/sandpack-react": "0.0.0-next-20240321025149"
+    "@modern-js/sandpack-react": "0.0.0-next-20240321101024"
   },
   "peerDependencies": {
-    "@modern-js/builder-doc": "0.0.0-next-20240321025149"
+    "@modern-js/builder-doc": "0.0.0-next-20240321101024"
   },
   "devDependencies": {
     "classnames": "^2",
@@ -39,8 +39,8 @@
     "@rspress/shared": "1.15.0",
     "@types/node": "^16",
     "@types/fs-extra": "9.0.13",
-    "@modern-js/doc-plugin-auto-sidebar": "0.0.0-next-20240321025149",
-    "@modern-js/builder-doc": "0.0.0-next-20240321025149"
+    "@modern-js/doc-plugin-auto-sidebar": "0.0.0-next-20240321101024",
+    "@modern-js/builder-doc": "0.0.0-next-20240321101024"
   },
   "scripts": {
     "dev": "rspress dev",

package/docs/en/configure/app/bff/proxy.mdx

@@ -1,65 +0,0 @@
----
-sidebar_label: proxy
----
-
-# bff.proxy
-
-- **Type:** `Record<string, string>`
-- **Default:** `{}`
-
-import EnableBFFCaution from "@site-docs-en/components/enable-bff-caution";
-
-<EnableBFFCaution />
-
-With simple configuration, Modern.js can automatically proxy requests sent to the BFF server to the specified service.
-
-Add the following configuration to `modern.server-runtime.config.js` to enable proxy:
-
-```ts title="modern.server-runtime.config.ts"
-import { defineConfig } from '@modern-js/app-tools/server';
-export default defineConfig({
-  bff: {
-    proxy: {
-      '/api': 'https://cnodejs.org',
-    },
-  },
-});
-```
-
-Assuming the address of Modern.js BFF server is `localhost:8080`, all requests starting with `api` will be proxied to `https://cnodejs.org`, for example, the request to `localhost:8080/api/v1/topics` will be proxied to `https://cnodejs.org/api/v1/topics`.
-
-import BFFProxyPathRewrite from "@site-docs-en/components/bff-proxy-path-rewrite";
-
-<BFFProxyPathRewrite />
-
-Unlike [dev.proxy](/configure/app/dev/proxy), the proxy here only applies to requests entering the BFF/API service; at the same time, this configuration can not only be used in the development environment, but also proxies corresponding requests in the production environment.
-
-import BFFProxyPrinciple from "@site-docs-en/components/bff-proxy-principle";
-
-<BFFProxyPrinciple />
-
-## Common Usage
-
-### Solving Cross-Domain Issues for APIs
-
-During project development, cross-domain issues are often encountered because web pages and API services are not deployed under the same domain name.
-There are many ways to solve cross-domain issues, and here we can easily solve them using `bff.proxy`.
-
-:::info
-Under BFF proxy mode, if you don't need to write BFF code, the API directory can be deleted; BFF proxy will still be enabled.
-
-:::
-
-As shown below, the following configuration in `modern.server-runtime.config.ts` will proxy all web page requests starting with `/api` to a service on another domain with the same domain.
-
-```ts title="modern.server-runtime.config.ts"
-export default defineServerConfig({
-  bff: {
-    proxy: {
-      '/api': 'https://cnodejs.org',
-    },
-  },
-};
-```
-
-

package/docs/en/guides/advanced-features/bff/bff-proxy.mdx

@@ -1,30 +0,0 @@
----
-sidebar_position: 5
-title: Use Proxy
----
-# Use Proxy
-
-By configuring the BFF proxy, API requests can be forwarded without manual coding
-
-:::caution
-Using a BFF proxy ensures that requests can enter the BFF handler. (eg the request path must contain a bff prefix)
-
-:::
-
-Writing the following BFF proxy configuration in the `modern.server-runtime.config.js` file will proxy requests sent to `http://localhost:8080/api/v1/topics` to `https://cnodejs.org/api/v1/topics`.
-
-```js title="modern.server-runtime.config.js"
-import { defineConfig } from '@modern-js/app-tools/server';
-export default defineConfig({
-  bff: {
-    proxy: {
-      '/api/v1/topics': 'https://cnodejs.org',
-    },
-  },
-};
-```
-
-:::note
-For more detail, see [bff.proxy](/configure/app/bff/proxy). For more proxy info, see [Proxy](/guides/basic-features/proxy).
-
-:::

package/docs/zh/configure/app/bff/proxy.mdx

@@ -1,64 +0,0 @@
----
-sidebar_label: proxy
----
-
-# bff.proxy
-
-- **类型：** `Record<string, string>`
-- **默认值：** `{}`
-
-import EnableBFFCaution from "@site-docs/components/enable-bff-caution";
-
-<EnableBFFCaution />
-
-通过简单配置，Modern.js 可以将发送给 BFF server 的请求，自动代理到指定的服务上。
-
-在 `modern.server-runtime.config.js` 中加入以下配置；即可开启代理：
-
-```js title="modern.server-runtime.config.js"
-import { defineConfig } from '@modern-js/app-tools/server';
-export default defineConfig({
-  bff: {
-    proxy: {
-      '/api': 'https://cnodejs.org',
-    },
-  },
-});
-```
-
-假设 Modern.js BFF server 的地址是 `localhost:8080`，所有以 `api` 开头的请求都会被代理到 `https://cnodejs.org`，如 `localhost:8080/api/v1/topics` 的请求会被代理到 `https://cnodejs.org/api/v1/topics`。
-
-import BFFProxyPathRewrite from "@site-docs/components/bff-proxy-path-rewrite";
-
-<BFFProxyPathRewrite />
-
-与 [dev.proxy](/configure/app/dev/proxy) 不同，本节所介绍的代理只作用于进入 BFF/API 服务的请求；同时，这一配置不但可以在开发环境中使用，在生产环境中也会代理相应的请求。
-
-import BFFProxyPrinciple from "@site-docs/components/bff-proxy-principle";
-
-<BFFProxyPrinciple />
-
-## 常见用法
-
-### 解决接口跨域问题
-
-在项目开发过程中，因为 web 页面和接口服务不是部署在同一个域名下，常常会遇到跨域问题。
-解决跨域问题的方式有很多，在这里我们使用 `bff.proxy` 可以轻松解决跨域问题。
-
-:::info
-BFF proxy 模式下，如果不需要写 BFF 的接口， API 目录可以删除；此时 BFF proxy 仍会开启。
-
-:::
-
-如下所示，在 `modern.server-runtime.config.ts` 中，写入如下配置；我们将所有 web 页面发送到同域的以 `/api` 开头的请求代理到另一个域名的服务上。
-
-```ts title="modern.server-runtime.config.ts"
-export default defineServerConfig({
-  bff: {
-    proxy: {
-      '/api': 'https://cnodejs.org',
-    },
-  },
-};
-```
-

package/docs/zh/guides/advanced-features/bff/bff-proxy.mdx

@@ -1,30 +0,0 @@
----
-sidebar_position: 5
-title: 使用 BFF 代理
----
-# 使用 BFF 代理
-
-通过配置 BFF 代理，无需手动写码，即可对 API 请求进行转发。
-
-:::caution
-使用 BFF 代理需确保请求能进入 BFF handler。（例如请求路径必须包含 bff prefix）
-
-:::
-
-在 `modern.server-runtime.config.js` 文件中编写以下 BFF 代理配置，会将发送到 `http://localhost:8080/api/v1/topics` 的请求代理到 `https://cnodejs.org/api/v1/topics`。
-
-```js title="modern.server-runtime.config.js"
-import { defineConfig } from '@modern-js/app-tools/server';
-export default defineConfig({
-  bff: {
-    proxy: {
-      '/api/v1/topics': 'https://cnodejs.org',
-    },
-  },
-};
-```
-
-:::note
-详细 API 请查看 [BFF 代理](/configure/app/bff/proxy)。更多 Modern.js 代理的能力可查看[调试代理](/guides/basic-features/proxy)。
-
-:::