@modern-js/module-tools-docs 2.57.0 → 2.58.0

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # @modern-js/module-tools-docs
 
+## 2.58.0
+
+## 2.57.1
+
 ## 2.57.0
 
 ## 2.56.2

package/docs/en/api/config/build-config.mdx

@@ -753,7 +753,8 @@ Build lifecycle hooks that allow custom logic to be injected at specific stages
 ```ts
 type HookList = {
   name: string;
-  apply: (compiler: ICompiler) => void.
+  apply: (compiler: ICompiler) => void;
+  applyAfterBuiltIn?: boolean;
 }
 
 ```
@@ -878,8 +879,27 @@ For more information about JSX Transform, you can refer to the following links:
 
 - [React Blog - Introducing the New JSX Transform](https://legacy.reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html).
 - [esbuild - JSX](https://esbuild.github.io/api/#jsx).
+
 :::
 
+
+## loader
+
+**Experimental**
+
+This option is used to change the interpretation method of the given input file.
+For example, you need to handle the js file as jsx.
+
+```js title="modern.config.ts"
+export default defineConfig({
+  buildConfig: {
+    loader: {
+      '.js': 'jsx',
+    }
+  },
+});
+```
+
 ## metafile
 
 This option is used for build analysis. When enabled, esbuild will generate metadata about the build in JSON format.
@@ -978,6 +998,34 @@ export default {
 
 Custom module resolution options
 
+### resolve.alias
+
+The basic usage is the same as [alias](#alias).
+
+The issue with [alias](#alias) is that we incorrectly handled Module IDs in a bundleless scenario:
+```js
+import { createElement } from "react";
+```
+When we configure alias: `{ react: 'react-native' }`, the result becomes:
+```js
+import { createElement } from "./react-native";
+```
+A Module ID is incorrectly processed as a relative path, which is not expected.
+
+We want to fix this issue, but it may break existing projects.
+
+Therefore, in **MAJOR_VERSION.58.0**, we provided `resolve.alias` to solve this problem. Additionally, `resolve.alias` removed the default value `{ "@": "./src"}` provided by [alias](#alias).
+
+If you need this feature, please use `resolve.alias`.
+
+In the next major version, `resolve.alias` will replace [alias](#alias).
+
+:::warning
+- Note that this configuration should not be mixed with [alias](#alias).
+- Ensure that this configuration specifies a relative path, such as `{ "@": "./src" }` rather than `{ "@": "src"}`.
+
+:::
+
 ### resolve.mainFields
 
 A list of fields in package.json to try when parsing the package entry point.

package/docs/en/guide/advance/in-depth-about-build.md

@@ -95,6 +95,10 @@ Serial hooks that stop the execution of other tapped functions if a tapped funct
 
 Serial hooks whose results are passed to the next tapped function.
 
+### Hook Order
+
+The execution order of hooks follows the registration order. You can control whether a hook is registered before or after the built-in hooks using `applyAfterBuiltIn`.
+
 ### Hook API
 
 #### load

package/docs/en/guide/faq/basic.mdx

@@ -9,5 +9,5 @@ Modern.js Module uses esbuild to build toolkits and component libraries, and Rsb
 Modern.js Module is based on esbuild for building and cannot use tools from the webpack-related ecosystem.
 You can find more community plugins for esbuild [here](https://github.com/esbuild/community-plugins)
 
-If the UMD product produced by Modern.js Module does not meet your requirements, you can use Rsbuild and add [UMD Plugin](https://rsbuild.dev/plugins/list/plugin-umd) to build UMD products.
+If the UMD product produced by Modern.js Module does not meet your requirements, you can use Rsbuild and add [UMD Plugin](https://github.com/rspack-contrib/rsbuild-plugin-umd) to build UMD products.
 

package/docs/zh/api/config/build-config.mdx

@@ -744,6 +744,8 @@ export default defineConfig({
 type HookList = {
   name: string;
   apply: (compiler: ICompiler) => void;
+  // 是否在 buildIn 钩子之后执行
+  applyAfterBuiltIn?: boolean;
 };
 ```
 
@@ -870,6 +872,22 @@ export default defineConfig({
 
 :::
 
+## loader
+
+**试验性功能**
+
+此选项用来更改给定输入文件的解释方式。例如你需要将 js 文件当做 jsx 处理
+
+```js title="modern.config.ts"
+export default defineConfig({
+  buildConfig: {
+    loader: {
+      '.js': 'jsx',
+    }
+  },
+});
+```
+
 ## metafile
 
 这个选项用于构建分析，开启该选项后，esbuild 会以 JSON 格式生成有关构建的一些元数据。
@@ -968,6 +986,33 @@ export default {
 
 自定义模块解析选项
 
+### resolve.alias
+
+基本用法和 [alias](#alias) 一致。
+
+[alias](#alias) 的问题在于我们在 bundleless 场景下错误的处理了 Module ID 的情况：
+```js
+import { createElement } from "react";
+```
+当我们配置了 `alias: { react: 'react-native' }` 后，结果会变成
+```js
+import { createElement } from "./react-native";
+```
+一个 Module ID 被错误的处理成了相对路径，显然这是不符合预期的。
+
+我们想要修复这个问题，但是这可能会破坏已有的项目，因此我们在 MAJOR_VERSION.58.0 版本提供了 `resolve.alias` 来解决这个问题。
+并且 `resolve.alias` 里移除了 [alias](#alias) 提供的默认值 `{ "@": "./src"}`
+
+如果你需要此功能，请使用 `resolve.alias`。
+
+在下一个大版本，`resolve.alias` 将会取代 `alias` 。
+
+:::warning
+- 注意此配置不要与 [alias](#alias) 混用。
+- 注意此配置必须标注一个相对路径，例如 `{ "@": "./src" }` 而非 `{ "@": "src"}`。
+
+:::
+
 ### resolve.mainFields
 
 package.json 中，在解析包的入口点时尝试的字段列表。
@@ -1595,4 +1640,6 @@ export default defineConfig({
     },
   },
 });
-```
+```import { aliases } from '../../../../../../toolkit/utils/dist/compiled/browserslist';
+import { createElement } from 'react';
+

package/docs/zh/guide/advance/in-depth-about-build.md

@@ -95,6 +95,10 @@ Modern.js Module Hook 使用了 [tapable](https://github.com/webpack/tapable)
 
 串行执行的 hooks，其结果会传递给下一个 tapped function
 
+### Hook 顺序
+
+Hook 的执行顺序和注册顺序保持一致，可以通过 `applyAfterBuiltIn` 来控制在 BuiltIn Hook 前或后注册。
+
 ### Hook API
 
 #### load

package/docs/zh/guide/faq/basic.mdx

@@ -9,4 +9,4 @@ Modern.js Module 使用 esbuild 构建工具库和组件库，Rsbuild 专注于
 Modern.js Module 基于 esbuild 构建，无法使用 webpack 相关生态的工具。
 [这里](https://github.com/esbuild/community-plugins)可以发现更多 esbuild 社区插件
 
-如果 Modern.js Module 生产的 UMD 产物达不到你的要求，可以使用 Rsbuild 并添加 [UMD Plugin](https://rsbuild.dev/zh/plugins/list/plugin-umd) 构建 UMD 产物。
+如果 Modern.js Module 生产的 UMD 产物达不到你的要求，可以使用 Rsbuild 并添加 [UMD Plugin](https://github.com/rspack-contrib/rsbuild-plugin-umd) 构建 UMD 产物。

package/package.json

@@ -9,14 +9,14 @@
     "directory": "packages/document/module-doc"
   },
   "license": "MIT",
-  "version": "2.57.0",
+  "version": "2.58.0",
   "main": "index.js",
   "devDependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "rspress": "1.26.1",
     "@rspress/shared": "1.26.1",
-    "@modern-js/doc-plugin-auto-sidebar": "2.57.0"
+    "@modern-js/doc-plugin-auto-sidebar": "2.58.0"
   },
   "scripts": {
     "dev": "rspress dev",