@bleedingdev/modern-js-main-doc 3.4.0-ultramodern.1 → 3.4.0-ultramodern.2
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.
- package/docs/en/configure/app/output/disable-svgr.mdx +2 -0
- package/docs/en/guides/advanced-features/page-performance/react-compiler.mdx +20 -23
- package/docs/en/guides/get-started/ultramodern.mdx +6 -0
- package/docs/en/guides/topic-detail/module-federation/ssr.mdx +16 -9
- package/docs/en/guides/upgrade/config.mdx +4 -1
- package/docs/zh/configure/app/output/disable-svgr.mdx +2 -0
- package/docs/zh/guides/advanced-features/page-performance/react-compiler.mdx +20 -23
- package/docs/zh/guides/topic-detail/module-federation/ssr.mdx +15 -9
- package/docs/zh/guides/upgrade/config.mdx +4 -1
- package/package.json +4 -4
|
@@ -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
|
-
|
|
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.
|
|
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
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
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`,
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
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://
|
|
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
|
-
|
|
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.
|
|
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
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
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
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
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://
|
|
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.
|
|
22
|
+
"version": "3.4.0-ultramodern.2",
|
|
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.
|
|
29
|
+
"@modern-js/sandpack-react": "npm:@bleedingdev/modern-js-sandpack-react@3.4.0-ultramodern.2"
|
|
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.
|
|
36
|
+
"@shikijs/transformers": "^4.3.0",
|
|
37
37
|
"@types/fs-extra": "11.0.4",
|
|
38
|
-
"@types/node": "^26.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",
|