@bleedingdev/modern-js-main-doc 3.4.0-ultramodern.1 → 3.4.0-ultramodern.3

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.
@@ -11,6 +11,8 @@ Whether to transform SVGs into React components. If true, will treat all .svg fi
11
11
 
12
12
  By default, when an SVG resource is referenced in a JS file, Modern.js will call SVGR to convert the SVG into a React component. If you are sure that all SVG resources in your project are not being used as React components, you can turn off this conversion by setting `disableSvgr` to true to improve build performance.
13
13
 
14
+ Modern.js runs the built-in SVGR transform through Rsbuild's parallel worker mode when SVGR is enabled.
15
+
14
16
  ```js
15
17
  export default {
16
18
  output: {
@@ -8,7 +8,20 @@ Before starting to use the React Compiler, it is recommended to read the [React
8
8
 
9
9
  ### React 19
10
10
 
11
- If you are using React 19, Modern.js has built-in support for React Compiler, and no additional configuration is required.
11
+ Modern.js enables Rsbuild's Rust-backed React Compiler integration by default through `builtin:swc-loader`.
12
+
13
+ To disable it, set `source.reactCompiler` to `false`:
14
+
15
+ ```ts title="modern.config.ts"
16
+ import { appTools, defineConfig } from '@modern-js/app-tools';
17
+
18
+ export default defineConfig({
19
+ source: {
20
+ reactCompiler: false,
21
+ },
22
+ plugins: [appTools()],
23
+ });
24
+ ```
12
25
 
13
26
  ### React 18
14
27
 
@@ -20,33 +33,17 @@ If you are using React 18, you need to configure it as follows:
20
33
  npm install react-compiler-runtime
21
34
  ```
22
35
 
23
- 2. Install `babel-plugin-react-compiler`:
24
-
25
- ```bash
26
- npm install babel-plugin-react-compiler
27
- ```
28
-
29
- 3. Register the Babel plugin in your Modern.js configuration file:
36
+ 2. Set the matching React Compiler target in your Modern.js configuration:
30
37
 
31
38
  ```ts title="modern.config.ts"
32
39
  import { appTools, defineConfig } from '@modern-js/app-tools';
33
- import { pluginBabel } from '@rsbuild/plugin-babel';
34
40
 
35
41
  export default defineConfig({
36
- builderPlugins: [
37
- pluginBabel({
38
- babelLoaderOptions: (config, { addPlugins }) => {
39
- addPlugins([
40
- [
41
- 'babel-plugin-react-compiler',
42
- {
43
- target: '18', // 或 '17',根据你使用的 React 版本
44
- },
45
- ],
46
- ]);
47
- },
48
- });
49
- ];
42
+ source: {
43
+ reactCompiler: {
44
+ target: '18', // or '17', depending on the React version you use
45
+ },
46
+ },
50
47
  plugins: [appTools()],
51
48
  });
52
49
  ```
@@ -85,6 +85,12 @@ compiler normalizes CommonJS server output while generated app packages keep
85
85
  stable `typescript` for Module Federation DTS generation and use the pinned
86
86
  `@typescript/native-preview` toolchain for TS-Go checks.
87
87
 
88
+ Cloudflare SSR deploys are also split by runtime responsibility: `.output` is an
89
+ ESM module-worker package, while `.output/worker` remains a CommonJS package
90
+ scope for the worker bundles emitted by Modern.js SSR builds. Do not fix older
91
+ repos by hand-editing generated worker output; upgrade the framework cohort and
92
+ rerun the generated validation instead.
93
+
88
94
  After installing the new cohort, run the generated
89
95
  `scripts/validate-ultramodern-workspace.mjs` contract check before accepting
90
96
  manual edits. Fix topology, ownership, package-source, local overlay, generated
@@ -43,15 +43,22 @@ For production rollout, keep fallback boundaries for remote load failures and mo
43
43
 
44
44
  ## Node SSR Bundle Compatibility
45
45
 
46
- When Module Federation is enabled together with `server.ssr`, Modern.js automatically switches Node SSR output to a Module Federation compatible mode:
47
-
48
- - `target: 'async-node'`
49
- - `output.module: false`
50
- - `output.chunkFormat: 'commonjs'`
51
- - `output.chunkLoading: 'async-node'`
52
- - `output.library.type: 'commonjs-module'`
53
-
54
- This avoids runtime incompatibilities between ESM server output and `@module-federation/node`, and keeps SSR/SSG hydration behavior consistent across host and remote applications.
46
+ When Module Federation is enabled together with `server.ssr`, use the framework
47
+ SSR and Module Federation configuration surfaces instead of forcing bundler
48
+ output by hand. Module Federation application bundles are not a safe place to
49
+ opt into `output.module`; keep MF remotes and hosts on the framework-generated
50
+ MF output mode unless your app has a verified custom runtime contract.
51
+
52
+ UltraModern generated workspaces keep the root workspace and shared packages as
53
+ ESM, but generated MF app packages intentionally do not add app-level
54
+ `"type": "module"`. Older repos should migrate by upgrading the framework
55
+ cohort and running the generated workspace validation, not by adding app-level
56
+ package mode changes, custom navigation/server wrappers, or Module Federation
57
+ output shims.
58
+
59
+ For Cloudflare SSR deploys, the outer Worker entry is an ESM module worker while
60
+ copied Modern.js SSR worker bundles stay in a nested CommonJS package scope so
61
+ the module Worker can import the emitted worker bundles consistently.
55
62
 
56
63
  ## Battle-Tested Rollout Checklist
57
64
 
@@ -359,7 +359,9 @@ export default {
359
359
 
360
360
  ### tools.babel
361
361
 
362
- **Change**: This configuration has been deprecated, the framework no longer includes Babel by default. Please use [Rsbuild's Babel plugin](https://v0.rsbuild.rs/plugins/list/plugin-babel) to enable support.
362
+ **Change**: This configuration has been deprecated, the framework no longer includes Babel by default. Please use [Rsbuild's Babel plugin](https://rsbuild.rs/plugins/list/plugin-babel) to enable support.
363
+
364
+ When your Babel options are plain serializable data, set `parallel: true` to run Babel through Rsbuild's worker mode. Do not enable it for Babel options that contain functions.
363
365
 
364
366
  **Migration Example**:
365
367
 
@@ -387,6 +389,7 @@ export default {
387
389
  // ...
388
390
  builderPlugins: [
389
391
  pluginBabel({
392
+ parallel: true,
390
393
  babelLoaderOptions: {
391
394
  plugins: [
392
395
  [
@@ -12,6 +12,8 @@ title: disableSvgr
12
12
  默认情况下,在 JS 文件中引用 SVG 资源时,Modern.js 会调用 SVGR,将 SVG 图片转换为一个 React 组件。
13
13
  如果你确定项目内的所有 SVG 资源都没有当成 React 组件使用时,可以通过将 `disableSvgr` 设置为 true 来关闭此项转换,以提升构建性能。
14
14
 
15
+ 启用 SVGR 时,Modern.js 会通过 Rsbuild 的并行 worker 模式运行内置 SVGR 转换。
16
+
15
17
  ```js
16
18
  export default {
17
19
  output: {
@@ -8,7 +8,20 @@ React Compiler 是 React 19 引入的一个实验性编译器,它可以自动
8
8
 
9
9
  ### React 19
10
10
 
11
- 如果你使用的是 React 19,Modern.js 已内置支持 React Compiler,无需额外配置即可使用。
11
+ Modern.js 默认通过 `builtin:swc-loader` 启用 Rsbuild 的 Rust 版 React Compiler 集成。
12
+
13
+ 如果需要关闭,可以将 `source.reactCompiler` 设置为 `false`:
14
+
15
+ ```ts title="modern.config.ts"
16
+ import { appTools, defineConfig } from '@modern-js/app-tools';
17
+
18
+ export default defineConfig({
19
+ source: {
20
+ reactCompiler: false,
21
+ },
22
+ plugins: [appTools()],
23
+ });
24
+ ```
12
25
 
13
26
  ### React 18
14
27
 
@@ -20,33 +33,17 @@ React Compiler 是 React 19 引入的一个实验性编译器,它可以自动
20
33
  npm install react-compiler-runtime
21
34
  ```
22
35
 
23
- 2. 安装 `babel-plugin-react-compiler`:
24
-
25
- ```bash
26
- npm install babel-plugin-react-compiler
27
- ```
28
-
29
- 3. 在你的 Modern.js 配置文件中注册 Babel 插件:
36
+ 2. Modern.js 配置中设置匹配的 React Compiler target:
30
37
 
31
38
  ```ts title="modern.config.ts"
32
39
  import { appTools, defineConfig } from '@modern-js/app-tools';
33
- import { pluginBabel } from '@rsbuild/plugin-babel';
34
40
 
35
41
  export default defineConfig({
36
- builderPlugins: [
37
- pluginBabel({
38
- babelLoaderOptions: (config, { addPlugins }) => {
39
- addPlugins([
40
- [
41
- 'babel-plugin-react-compiler',
42
- {
43
- target: '18', // 或 '17',根据你使用的 React 版本
44
- },
45
- ],
46
- ]);
47
- },
48
- });
49
- ];
42
+ source: {
43
+ reactCompiler: {
44
+ target: '18', // '17',根据你使用的 React 版本
45
+ },
46
+ },
50
47
  plugins: [appTools()],
51
48
  });
52
49
  ```
@@ -41,15 +41,21 @@ export default defineConfig({
41
41
 
42
42
  ## Node SSR 打包兼容性
43
43
 
44
- 当开启 Module Federation 并同时开启 `server.ssr` 时,Modern.js 会自动将 Node SSR 构建切换到 Module Federation 兼容模式:
45
-
46
- - `target: 'async-node'`
47
- - `output.module: false`
48
- - `output.chunkFormat: 'commonjs'`
49
- - `output.chunkLoading: 'async-node'`
50
- - `output.library.type: 'commonjs-module'`
51
-
52
- 这样可以避免 ESM 服务端产物与 `@module-federation/node` 运行时之间的兼容性问题,并保证 host / remote 在 SSR 与 SSG 场景下的 hydration 行为一致。
44
+ 当同时开启 Module Federation `server.ssr` 时,请使用框架提供的 SSR
45
+ 和 Module Federation 配置入口,不要在应用里手动强制 bundler 输出模式。
46
+ Module Federation 应用级 bundle 不是安全开启 `output.module` 的位置;除非
47
+ 应用已经验证了自定义运行时契约,否则 host 与 remote 都应保留框架生成的
48
+ MF 输出模式。
49
+
50
+ UltraModern 生成的 workspace root 和共享包保持 ESM,但生成的 MF app
51
+ package 会有意不添加 app 级 `"type": "module"`。旧仓库迁移时应升级到
52
+ 新的框架 cohort,并运行生成的 workspace 校验;不要通过添加 app
53
+ package mode、定制 server/navigation wrapper 或 Module Federation 输出 shim
54
+ 来绕过框架问题。
55
+
56
+ Cloudflare SSR 部署中,最外层 Worker entry 是 ESM module worker;复制出的
57
+ Modern.js SSR worker bundle 则保留在内层 CommonJS package scope 中,确保
58
+ module Worker 可以稳定 import 这些已生成的 worker bundle。
53
59
 
54
60
  ## Battle-Tested 上线检查清单
55
61
 
@@ -359,7 +359,9 @@ export default {
359
359
 
360
360
  ### tools.babel
361
361
 
362
- **变更内容**:该配置已废弃,框架不再内置 Babel,请使用 [Rsbuild 的 Babel 插件](https://v0.rsbuild.rs/plugins/list/plugin-babel) 来启用支持。
362
+ **变更内容**:该配置已废弃,框架不再内置 Babel,请使用 [Rsbuild 的 Babel 插件](https://rsbuild.rs/plugins/list/plugin-babel) 来启用支持。
363
+
364
+ 当 Babel 选项都是可序列化的普通数据时,可以设置 `parallel: true`,通过 Rsbuild 的 worker 模式运行 Babel。包含函数的 Babel 选项不要启用该模式。
363
365
 
364
366
  **迁移示例**:
365
367
 
@@ -387,6 +389,7 @@ export default {
387
389
  // ...
388
390
  builderPlugins: [
389
391
  pluginBabel({
392
+ parallel: true,
390
393
  babelLoaderOptions: {
391
394
  plugins: [
392
395
  [
package/package.json CHANGED
@@ -19,23 +19,23 @@
19
19
  "modern.js",
20
20
  "ultramodern.js"
21
21
  ],
22
- "version": "3.4.0-ultramodern.1",
22
+ "version": "3.4.0-ultramodern.3",
23
23
  "publishConfig": {
24
24
  "registry": "https://registry.npmjs.org/",
25
25
  "access": "public"
26
26
  },
27
27
  "dependencies": {
28
28
  "mermaid": "^11.15.0",
29
- "@modern-js/sandpack-react": "npm:@bleedingdev/modern-js-sandpack-react@3.4.0-ultramodern.1"
29
+ "@modern-js/sandpack-react": "npm:@bleedingdev/modern-js-sandpack-react@3.4.0-ultramodern.3"
30
30
  },
31
31
  "devDependencies": {
32
32
  "@rsbuild/plugin-sass": "2.0.0",
33
33
  "@rspress/core": "2.0.14",
34
34
  "@rspress/plugin-llms": "2.0.14",
35
35
  "@rspress/shared": "2.0.14",
36
- "@shikijs/transformers": "^4.2.0",
36
+ "@shikijs/transformers": "^4.3.0",
37
37
  "@types/fs-extra": "11.0.4",
38
- "@types/node": "^26.0.0",
38
+ "@types/node": "^26.0.1",
39
39
  "@typescript/native-preview": "7.0.0-dev.20260624.1",
40
40
  "classnames": "^2.5.1",
41
41
  "clsx": "^2.1.1",