@modern-js/main-doc 2.60.5 → 2.60.6

package/docs/en/components/bff-upload.mdx

@@ -0,0 +1,95 @@
+BFF combined with runtime framework provides file upload capabilities, supporting integrated calls and pure function manual calls.
+
+### BFF Function
+
+First, create the `api/lambda/upload.ts` file:
+
+```ts title="api/lambda/upload.ts"
+export const post = async ({ formData }: {formData: Record<string, any>}) => {
+  console.info('formData:', formData);
+  // do somethings
+  return {
+    data: {
+      code: 0,
+    },
+  };
+};
+```
+:::tip
+The `formData` parameter in the interface processing function can access files uploaded from the client side. It is an `Object` where the keys correspond to the field names used during the upload.
+:::
+
+
+### Integrated Calling
+
+Next, directly import and call the function in `src/routes/upload/page.tsx`:
+```tsx title="routes/upload/page.tsx"
+import { upload } from '@api/upload';
+import React from 'react';
+
+export default (): JSX.Element => {
+  const [file, setFile] = React.useState<FileList | null>();
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setFile(e.target.files);
+  };
+
+  const handleUpload = () => {
+    if (!file) {
+      return;
+    }
+    upload({
+      files: {
+        images: file,
+      },
+    });
+  };
+
+  return (
+    <div>
+      <input multiple type="file" onChange={handleChange} />
+      <button onClick={handleUpload}>upload</button>
+    </div>
+  );
+};
+```
+:::tip
+Note: The input type must be `{ formData: FormData }` for the upload to succeed.
+:::
+
+
+### Manual Calling
+You can manually upload files using the `fetch API`, when calling `fetch`, set the `body` as `FormData` type and submit a post request.
+
+```tsx title="routes/upload/page.tsx"
+import React from 'react';
+
+export default (): JSX.Element => {
+  const [file, setFile] = React.useState<FileList | null>();
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setFile(e.target.files);
+  };
+
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    const formData = new FormData();
+    if (file) {
+      for (let i = 0; i < file.length; i++) {
+        formData.append('images', file[i]);
+      }
+      await fetch('/api/upload', {
+        method: 'POST',
+        body: formData,
+      });
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <input multiple type="file" onChange={handleChange} />
+      <button type="submit">upload</button>
+    </form>
+  );
+};
+```

package/docs/en/configure/app/dev/https.mdx

@@ -76,3 +76,6 @@ export default {
 };
 ```
 
+#### Clean up cert cache
+
+The certificate created by devcert is saved in `~/Library/Application\ Support/devcert`. You may do some cleanup if needed.

package/docs/en/configure/app/tools/html-plugin.mdx

@@ -18,6 +18,19 @@ const defaultOptions = {
   filename, // 基于 `output.distPath` 和 `entryName` 生成
   templateParameters, // 对应 `html.templateParameters` 配置
   chunks: [entryName],
+  minify: { // // generated based on `output.disableMinimize` and `output.minify`
+    removeComments: false,
+    useShortDoctype: true,
+    keepClosingSlash: true,
+    collapseWhitespace: true,
+    removeRedundantAttributes: true,
+    removeScriptTypeAttributes: true,
+    removeStyleLinkTypeAttributes: true,
+    removeEmptyAttributes: true,
+    minifyJS, // generated based on `output.charset`, `output.legalComments` and `performance.removeConsole`
+    minifyCSS: true,
+    minifyURLs: true,
+  },
 };
 ```
 

package/docs/en/configure/app/tools/terser.mdx

@@ -52,5 +52,5 @@ export default {
 ```
 
 :::tip Disable code minification
-If you need to disable code minification, you can use the [output.disableMinimize](https://modernjs.dev/builder/en/api/config-output.html#outputdisableminimize) configuration.
+If you need to disable code minification, you can use the [output.minify](/configure/app/output/minify) configuration.
 :::

package/docs/en/configure/app/tools/ts-loader.mdx

@@ -8,10 +8,13 @@ title: tsLoader
 - **Default:** `undefined`
 - **Bundler:** `only support webpack`
 
-:::warning Alternatives for ts-loader
-Using [babel-loader](https://modernjs.dev/builder/en/guide/basic/typescript.html#why-babel-is-the-default-option) or [Rspack](https://modernjs.dev/en/guide/advanced/rspack-start.html) instead of ts-loader can significantly improve compilation speed and provide better extendability.
+:::warning Deprecated
+
+ts-loader is not recommended for use in the project, because:
+
+- ts-loader cannot be used with certain features such as [source.transformImport](/configure/app/source/transform-import) and [tools.styledComponents](/configure/app/tools/styled-components) provided by Babel & SWC.
+- Rspack does not support ts-loader.
 
-ts-loader cannot be used with certain features such as [source.transformImport](https://modernjs.dev/en/configure/app/source/transform-import.html) and [tools.styledComponents](https://modernjs.dev/en/configure/app/tools/styled-components.html) provided by Babel & SWC.
 :::
 
 `ts-loader` is not enabled by default in the project. When `tools.tsLoader` is not undefined, builder will use ts-loader instead of babel-loader to compile TypeScript code.

package/docs/en/configure/app/tools/webpack-chain.mdx

@@ -227,8 +227,8 @@ For example, the `RULE.STYLUS` rule exists only when the Stylus plugin is regist
 | `PLUGIN.REACT_FAST_REFRESH`    | correspond to `ReactFastRefreshPlugin`                                                                         |
 | `PLUGIN.NODE_POLYFILL_PROVIDE` | correspond to `ProvidePlugin` for node polyfills                                                               |
 | `PLUGIN.SUBRESOURCE_INTEGRITY` | correspond to `webpack-subresource-integrity`                                                                  |
-| `PLUGIN.ASSETS_RETRY`          | correspond to webpack static asset retry plugin                                                     |
-| `PLUGIN.AUTO_SET_ROOT_SIZE`    | correspond to automatically set root font size plugin                                               |
+| `PLUGIN.ASSETS_RETRY`          | correspond to webpack static asset retry plugin                                                                |
+| `PLUGIN.AUTO_SET_ROOT_SIZE`    | correspond to automatically set root font size plugin                                                          |
 
 #### CHAIN_ID.MINIMIZER
 
@@ -243,4 +243,4 @@ For example, the `RULE.STYLUS` rule exists only when the Stylus plugin is regist
 
 ### Examples
 
-For usage examples, please refer to: [WebpackChain usage examples](https://modernjs.dev/builder/en/guide/advanced/custom-webpack-config.html#webpack-chain-basics).
+For usage examples, please refer to: [Rsbuild - bundlerChain examples](https://rsbuild.dev/guide/basic/configure-rspack#examples).

package/docs/en/guides/advanced-features/bff/_meta.json

@@ -1 +1 @@
-["function", "frameworks", "extend-server", "sdk"]
+["function", "frameworks", "extend-server", "sdk", "upload"]

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

@@ -0,0 +1,5 @@
+# File Upload
+
+import BffUpload from "@site-docs-en/components/bff-upload";
+
+<BffUpload />

package/docs/zh/components/bff-upload.mdx

@@ -0,0 +1,97 @@
+BFF 搭配运行时框架提供了文件上传能力，支持一体化调用及纯函数手动调用。
+
+### BFF 函数
+
+首先创建 `api/lambda/upload.ts` 文件：
+
+```ts title="api/lambda/upload.ts"
+export const post = async ({ formData }: {formData: Record<string, any>}) => {
+  console.info('formData:', formData);
+  // do somethings
+  return {
+    data: {
+      code: 0,
+    },
+  };
+};
+```
+:::tip
+通过接口处理函数入参中的 `formData` 可以获取客户端上传的文件。值为 `Object`，key 为上传时的字段名。
+:::
+
+### 一体化调用
+
+接着在 `src/routes/upload/page.tsx` 中直接引入函数并调用：
+```tsx title="routes/upload/page.tsx"
+import { post } from '@api/upload';
+import React from 'react';
+
+export default (): JSX.Element => {
+  const [file, setFile] = React.useState<FileList | null>();
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setFile(e.target.files);
+  };
+
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    const formData = new FormData();
+    if (file) {
+      for (let i = 0; i < file.length; i++) {
+        formData.append('images', file[i]);
+      }
+      post({
+        formData,
+      });
+    }
+  };
+
+  return (
+    <div>
+      <input multiple type="file" onChange={handleChange} />
+      <button onClick={handleUpload}>upload</button>
+    </div>
+  );
+};
+```
+:::tip
+注意：入参类型必须为：`{ formData: FormData }` 才会正确上传。
+
+:::
+
+### 手动上传
+可以基于 `fetch API` 手动上传文件，需要在调用 `fetch` 时，将 `body` 设置为 `FormData` 类型并提交 `post` 请求。
+
+```tsx title="routes/upload/page.tsx"
+import React from 'react';
+
+export default (): JSX.Element => {
+  const [file, setFile] = React.useState<FileList | null>();
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setFile(e.target.files);
+  };
+
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    const formData = new FormData();
+    if (file) {
+      for (let i = 0; i < file.length; i++) {
+        formData.append('images', file[i]);
+      }
+      await fetch('/api/upload', {
+        method: 'POST',
+        body: formData,
+      });
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <input multiple type="file" onChange={handleChange} />
+      <button type="submit">upload</button>
+    </form>
+  );
+};
+
+```

package/docs/zh/configure/app/dev/https.mdx

@@ -77,3 +77,6 @@ export default {
 };
 ```
 
+#### 清理证书缓存
+
+devcert 默认会将生成的证书缓存在 `~/Library/Application\ Support/devcert` ，你可以按需清理。

package/docs/zh/configure/app/tools/html-plugin.mdx

@@ -18,6 +18,19 @@ const defaultOptions = {
   filename, // 基于 `output.distPath` 和 `entryName` 生成
   templateParameters, // 对应 `html.templateParameters` 配置
   chunks: [entryName],
+  minify: { // 基于 `output.minify` 和 `output.disableMinimize` 生成
+    removeComments: false,
+    useShortDoctype: true,
+    keepClosingSlash: true,
+    collapseWhitespace: true,
+    removeRedundantAttributes: true,
+    removeScriptTypeAttributes: true,
+    removeStyleLinkTypeAttributes: true,
+    removeEmptyAttributes: true,
+    minifyJS, // 基于 `output.charset`、`output.legalComments` 和 `performance.removeConsole` 生成
+    minifyCSS: true,
+    minifyURLs: true,
+  },
 };
 ```
 

package/docs/zh/configure/app/tools/terser.mdx

@@ -52,5 +52,5 @@ export default {
 ```
 
 :::tip 禁用代码压缩
-如果你需要禁用代码压缩，可以使用 [output.disableMinimize](https://modernjs.dev/builder/api/config-output.html#outputdisableminimize) 配置项。
+如果你需要禁用代码压缩，可以使用 [output.minify](/configure/app/output/minify) 配置项。
 :::

package/docs/zh/configure/app/tools/ts-loader.mdx

@@ -8,10 +8,13 @@ title: tsLoader
 - **默认值：** `undefined`
 - **打包工具：** `仅支持 webpack`
 
-:::warning 不再推荐使用 ts-loader
-使用 [babel-loader](https://modernjs.dev/builder/guide/basic/typescript.html#%E4%B8%BA%E4%BB%80%E4%B9%88%E9%BB%98%E8%AE%A4%E4%BD%BF%E7%94%A8-babel) 或 [Rspack](https://modernjs.dev/guide/advanced/rspack-start.html) 转译 TypeScript 代码的性能明显优于 ts-loader 且能够使用更多拓展能力。
+:::warning 废弃提示
+
+不推荐在项目中使用 ts-loader，原因如下：
+
+- 启用 ts-loader 时将无法使用 [source.transformImport](/configure/app/source/transform-import) 和 [tools.styledComponents](/configure/app/tools/styled-components) 等由 Babel 和 SWC 提供支持的能力。
+- Rspack 不支持使用 ts-loader。
 
-启用 ts-loader 时将无法使用 [source.transformImport](https://modernjs.dev/configure/app/source/transform-import.html) 和 [tools.styledComponents](https://modernjs.dev/configure/app/tools/styled-components.html) 等由 Babel 和 SWC 提供支持的能力。
 :::
 
 项目中默认不开启 ts-loader，当 `tools.tsLoader` 不为 undefined 则表示开启 ts-loader，同时禁用 babel-loader 对 TypeScript 的编译。

package/docs/zh/configure/app/tools/webpack-chain.mdx

@@ -231,8 +231,8 @@ Modern.js 中预先定义了一些常用的 Chain ID，你可以通过这些 ID
 | `PLUGIN.REACT_FAST_REFRESH`    | 对应 `ReactFastRefreshPlugin`                                                      |
 | `PLUGIN.NODE_POLYFILL_PROVIDE` | 对应处理 node polyfill 的 `ProvidePlugin`                                          |
 | `PLUGIN.SUBRESOURCE_INTEGRITY` | 对应 `webpack-subresource-integrity`                                               |
-| `PLUGIN.ASSETS_RETRY`          | 对应 webpack 静态资源重试插件 `WebpackAssetsRetryPlugin`              |
-| `PLUGIN.AUTO_SET_ROOT_SIZE`    | 对应自动设置根字体大小插件 `AutoSetRootSizePlugin`                    |
+| `PLUGIN.ASSETS_RETRY`          | 对应 webpack 静态资源重试插件 `WebpackAssetsRetryPlugin`                           |
+| `PLUGIN.AUTO_SET_ROOT_SIZE`    | 对应自动设置根字体大小插件 `AutoSetRootSizePlugin`                                 |
 
 #### CHAIN_ID.MINIMIZER
 
@@ -247,4 +247,4 @@ Modern.js 中预先定义了一些常用的 Chain ID，你可以通过这些 ID
 
 ### 使用示例
 
-使用示例可参考：[WebpackChain 使用示例](https://modernjs.dev/builder/guide/advanced/custom-webpack-config.html#%E4%BD%BF%E7%94%A8-webpack-chain)。
+使用示例可参考：[Rsbuild - bundlerChain 使用示例](https://rsbuild.dev/zh/guide/basic/configure-rspack#%E7%A4%BA%E4%BE%8B)。

package/docs/zh/guides/advanced-features/bff/_meta.json

@@ -1 +1 @@
-["function", "frameworks", "extend-server", "sdk"]
+["function", "frameworks", "extend-server", "sdk", "upload"]

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

@@ -0,0 +1,5 @@
+# 文件上传
+
+import BffUpload from "@site-docs/components/bff-upload";
+
+<BffUpload />

package/package.json

@@ -15,17 +15,17 @@
     "modern",
     "modern.js"
   ],
-  "version": "2.60.5",
+  "version": "2.60.6",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "public",
     "provenance": true
   },
   "dependencies": {
-    "@modern-js/sandpack-react": "2.60.5"
+    "@modern-js/sandpack-react": "2.60.6"
   },
   "devDependencies": {
-    "@rspress/shared": "1.31.1",
+    "@rspress/shared": "1.35.2",
     "@types/fs-extra": "9.0.13",
     "@types/node": "^16",
     "classnames": "^2",
@@ -33,7 +33,7 @@
     "fs-extra": "^10",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "rspress": "1.31.1",
+    "rspress": "1.35.2",
     "ts-node": "^10.9.1",
     "typescript": "^5"
   },