@bleedingdev/modern-js-main-doc 3.2.0-ultramodern.11 → 3.2.0-ultramodern.110

package/main-doc/docs/zh/guides/get-started/ultramodern.mdx

@@ -38,7 +38,7 @@ UltraModern.js V3 记录的是一套“更强默认值的 Modern.js 参考档案
 | Metrics 与 Trace 关联 | SSR metrics 不解析 W3C trace 上下文 | 解析 `traceparent` 并注入 `trace_id` / `span_id` 标签 | 已实现 | 提升跨系统观测关联度 |
 | 应用级 MF SSR 合约开关 | 无专门 app-level MF SSR 稳定性契约开关 | 新增 `server.ssr.moduleFederationAppSSR`，并在检测到 MF SSR 标记时自动启用环境变量握手 | 已实现 | 注入 `process.env.MODERN_MF_APP_SSR` |
 | 应用级 MF SSR 运行时桥接 | 非稳定默认桥接路径 | V3 在「服务端渲染 + MF 标记」场景下提供稳定桥接默认行为 | 已实现 | 保留显式关闭路径 |
-| MF 远程加载可靠性契约 | 远程加载重试/降级策略通常由业务自管 | 新增 timeout/network/contract-error 的确定性降级矩阵与分布式 OTEL 连续性断言 | 已实现 | 对应 `routes-tanstack-mf` 可靠性套件 |
+| MF vertical 加载可靠性契约 | 加载重试/降级策略通常由业务自管 | 新增 timeout/network/contract-error 的确定性降级矩阵与分布式 OTEL 连续性断言 | 已实现 | 对应 `routes-tanstack-mf` 可靠性套件 |
 | BFF 运行时选型 | Modern.js V3 基线仅提供 Hono 运行时路径（无内建 Effect 运行时） | 将 Effect 设为默认运行时，并采用严格运行时拆分（`effect` -> `api/effect`，`hono` -> `api/lambda`），同时补齐 Effect-Schema-only MF 数据契约与 failure-injection 覆盖 | 已实现（Effect 默认 + 严格拆分） | 该流明确不引入 Zod |
 | 模块 SDK 合约产物 | 无框架级模块契约产物 | 新增机器可读模块家族契约与类型化模块 SDK 接口 | 已实现 | `module-sdk-contracts.json` + `moduleSdk.d.ts` |
 | 边界反模式 CI 守卫 | 无专门边界反模式工作流 | 新增基于 profile 的边界检查（导入边界/必需钩子/模块禁用模式） | 已实现 | `.github/workflows/boundary-anti-patterns.yml` |
@@ -239,7 +239,7 @@ UltraModern.js V3 对应 Beads Stream D 落地了额外可靠性能力：
 
 - `@modern-js/plugin-bff` 运行时路径迁移到 Effect v4。
 - MF 数据拉取契约采用 Effect-only 指导（该流明确不引入 Zod）。
-- 远程加载可靠性矩阵覆盖 timeout/network/contract error 的确定性注入场景。
+- MF vertical 加载可靠性矩阵覆盖 timeout/network/contract error 的确定性注入场景。
 - build 与 serve 路径重新启用分布式 trace 连续性断言。
 - 数据平台架构补齐 operation identity、请求/水合 envelope 完整性、scope key 与失效路由契约。
 
@@ -247,7 +247,7 @@ UltraModern.js V3 对应 Beads Stream D 落地了额外可靠性能力：
 
 - `docs/super-app-rfc-adr/ADR-0003-effect-only-mf-data-fetch-reliability.md`
 - `packages/cli/plugin-bff/docs/data-platform-architecture.md`
-- `tests/integration/routes-tanstack-mf/test/remote-loader-reliability.test.ts`
+- `routes-tanstack-mf` 可靠性覆盖
 
 ### 11) 发布与模块认证 Gate 模型
 
@@ -280,6 +280,65 @@ UltraModern.js V3 对应 Beads Stream D 落地了额外可靠性能力：
 - 将应用级 MF SSR 强制为所有应用的默认路径。
 - 将 Effect-only 数据获取运行时强制为所有应用的默认路径。
 
+## 人类工作流
+
+公开的 BleedingDev create 包默认从简单路径开始。默认命令会创建一个
+可上线的 UltraModern 单应用，包含 `presetUltramodern(...)`、SSR、
+TanStack Router、Tailwind CSS v4、i18n、Effect BFF、生成质量 gate，以及
+Cloudflare 部署基础：
+
+```bash
+pnpm dlx @bleedingdev/modern-js-create myapp
+cd myapp
+mise install
+mise exec -- pnpm install
+mise exec -- pnpm ultramodern:check
+```
+
+只有当独立归属边界有实际价值时，才创建 SuperApp workspace：
+
+```bash
+pnpm dlx @bleedingdev/modern-js-create my-super-app --ultramodern-workspace
+cd my-super-app
+mise install
+mise exec -- pnpm install
+mise exec -- pnpm ultramodern:check
+```
+
+真实业务边界出现后，再添加对应 MicroVertical：
+
+```bash
+pnpm dlx @bleedingdev/modern-js-create transportation --vertical
+pnpm dlx @bleedingdev/modern-js-create food-delivery --vertical
+pnpm dlx @bleedingdev/modern-js-create payments --vertical
+pnpm dlx @bleedingdev/modern-js-create maps --vertical
+mise exec -- pnpm ultramodern:check
+```
+
+`--vertical` 会修改当前 workspace：创建 vertical 包，并更新 topology 元数据、
+ownership 记录、shell Module Federation、开发 overlays、包依赖、生成契约、
+端口、路由归属 i18n、CSS 隔离，以及 vertical 自己拥有的 Effect BFF/client surface。
+
+生成应用和 vertical 沿用正常的 Modern.js SSR 路径。SuperApp workspace 在需要
+Module Federation SSR 时会加入 `server.ssr.moduleFederationAppSSR`，但这个开关是
+显式契约，不是所有应用的强制要求。
+
+每个应用都会产出 `src/routes/ultramodern-route-metadata` 和
+`ultramodernLocalisedUrls`。i18n 插件在 `localeDetection.localisedUrls` 中读取它，
+并从 `/locales/{{lng}}/{{ns}}.json` 提供动态后端 JSON。
+
+生成契约会在 `.modernjs/ultramodern-generated-contract.json` 中写入
+`cssFederation`：共享 design tokens 保留在 `packages/shared-design-tokens`，
+shell CSS 拥有 shell layer，每个 vertical 拥有自己的 CSS layer 与应用本地前缀，
+SSR 首屏使用 Modern/Rspack 产物和 manifest 归属的 vertical CSS。
+
+生成 workspace 包含 `scripts/proof-cloudflare-version.mjs`，用于 live Cloudflare 和
+Zephyr 证据。Live 证明需要公开 Worker URL 和 Zephyr 凭据；本地检查仍可校验
+生成契约、构建、Cloudflare 输出、dry-run Zephyr 证据计划和本地证据 schema。
+
+BleedingDev 包通过 GitHub Actions trusted publishing 发布。公开发布 workflow 不使用
+长期 npm token；不要从开发机器手动发布包。
+
 ## 基线开关（可按需关闭）
 
 生成的 `presetUltramodern(...)` create 模板会开启更严格的平台契约。以下环境变量会在生成的 `modern.config.ts` 中读取，可按应用或按环境关闭/覆盖：

package/package.json

@@ -18,30 +18,30 @@
     "modern",
     "modern.js"
   ],
-  "version": "3.2.0-ultramodern.11",
+  "version": "3.2.0-ultramodern.110",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
   "dependencies": {
     "mermaid": "^11.15.0",
-    "@modern-js/sandpack-react": "npm:@bleedingdev/modern-js-sandpack-react@3.2.0-ultramodern.11"
+    "@modern-js/sandpack-react": "npm:@bleedingdev/modern-js-sandpack-react@3.2.0-ultramodern.110"
   },
   "devDependencies": {
-    "@rsbuild/plugin-sass": "1.5.2",
-    "@rspress/core": "2.0.11",
-    "@rspress/plugin-llms": "2.0.11",
-    "@rspress/shared": "2.0.11",
-    "@shikijs/transformers": "^4.0.2",
+    "@rsbuild/plugin-sass": "1.5.3",
+    "@rspress/core": "2.0.13",
+    "@rspress/plugin-llms": "2.0.13",
+    "@rspress/shared": "2.0.13",
+    "@shikijs/transformers": "^4.1.0",
     "@types/fs-extra": "11.0.4",
-    "@types/node": "^25.8.0",
-    "@typescript/native-preview": "7.0.0-dev.20260516.1",
+    "@types/node": "^25.9.1",
+    "@typescript/native-preview": "7.0.0-dev.20260606.1",
     "classnames": "^2.5.1",
     "clsx": "^2.1.1",
     "fs-extra": "^11.3.5",
-    "react": "^19.2.6",
-    "react-dom": "^19.2.6",
-    "rsbuild-plugin-open-graph": "1.1.2"
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7",
+    "rsbuild-plugin-open-graph": "1.1.3"
   },
   "scripts": {
     "dev": "rspress dev",

package/docs/en/guides/basic-features/testing/cypress.mdx

@@ -1,95 +0,0 @@
-# Cypress
-
-Cypress is a framework for E2E testing and component testing.
-
-To use Cypress in Modern.js, you need to install the dependencies first. You can run the following commands:
-
-import { PackageManagerTabs } from '@theme';
-
-<PackageManagerTabs command={{ npm: "npm install -D cypress", yarn: "yarn add -D cypress", pnpm: "pnpm install -D cypress" }} />
-
-Next, create a `cypress.config.ts` file and add the following content:
-
-```ts
-import { defineConfig } from 'cypress'
- 
-export default defineConfig({
-  e2e: {
-    setupNodeEvents(on, config) {},
-  },
-})
-```
-
-## Writing Test Cases
-
-Now, use Cypress to write an E2E test case by first creating two Modern.js pages.
-
-```tsx title="routes/page.tsx"
-import { Link } from '@modern-js/runtime/router';
-
-const Index = () => (
-  <div>
-    <h1>Home</h1>
-    <Link to="/about">About</Link>
-  </div>
-);
-
-export default Index;
-```
-
-```tsx title="routes/about/page.tsx"
-import { Link } from '@modern-js/runtime/router';
-
-const Index = () => (
-  <div>
-    <h1>About</h1>
-    <Link to="/">Home</Link>
-  </div>
-);
-
-export default Index;
-```
-
-Next, create the test case file:
-
-```ts title="cypress/e2e/app.cy.ts"
-describe('Navigation', () => {
-  it('should navigate to the about page', () => {
-    // Start from the index page
-    cy.visit('http://localhost:8080/')
- 
-    // Find a link with an href attribute containing "about" and click it
-    cy.get('a[href*="about"]').click()
- 
-    // The new url should include "/about"
-    cy.url().should('include', '/about')
- 
-    // The new page should contain an h1 with "About"
-    cy.get('h1').contains('About')
-  })
-})
-```
-
-The test file may lack type definitions for the API. You can refer to the [Cypress - Typescript](https://docs.cypress.io/guides/tooling/typescript-support#Configure-tsconfigjson) documentation to resolve this.
-
-You can add the command to your `package.json`:
-
-```json title="package.json"
-{
-  "scripts": {
-    "test": "cypress open"
-  }
-}
-```
-
-## Run Test Cases
-
-Execute the above `test` command to run the test cases:
-
-```bash
-DevTools listening on ws://127.0.0.1:55203/devtools/browser/xxxxx
-```
-
-Cypress will open a headless browser. Following the prompts, you can find the corresponding test files and automatically run the E2E tests:
-
-![cypress](https://lf3-static.bytednsdoc.com/obj/eden-cn/nuvjhpqnuvr/cypress.jpg)

package/docs/en/guides/basic-features/testing/jest.mdx

@@ -1,148 +0,0 @@
-# Jest
-
-Jest is a JavaScript testing framework that is primarily used with React Testing Library for unit testing and Snapshot testing.
-
-To use Jest in Modern.js, you need to install the dependencies first. You can run the following commands:
-
-import { PackageManagerTabs } from '@theme';
-
-<PackageManagerTabs command={{
-  npm: "npm install -D jest jest-environment-jsdom @testing-library/react @testing-library/dom @testing-library/jest-dom",
-  yarn: "yarn add -D jest jest-environment-jsdom @testing-library/react @testing-library/dom @testing-library/jest-dom",
-  pnpm: "pnpm install -D jest jest-environment-jsdom @testing-library/react @testing-library/dom @testing-library/jest-dom"
-}} />
-
-Next, you can run the following commands to automatically initialize Jest in your project and generate a basic `jest.config.ts` configuration:
-
-<PackageManagerTabs command={{
-  npm: "npm init jest@latest",
-  yarn: "yarn create jest@latest",
-  pnpm: "pnpm create jest@latest"
-}} />
-
-## Configuration File
-
-:::note
-This section will use `.ts` files for Jest testing.
-:::
-
-Compared to other testing frameworks, Jest requires more configuration at the build level, such as handling JSX and ESM syntax. Therefore, you need to install some additional dependencies:
-
-<PackageManagerTabs command={{
-  npm: "npm install -D babel-jest @babel/core @babel/preset-env @babel/preset-react @babel/preset-typescript",
-  yarn: "yarn add -D babel-jest @babel/core @babel/preset-env @babel/preset-react @babel/preset-typescript",
-  pnpm: "pnpm install -D babel-jest @babel/core @babel/preset-env @babel/preset-react @babel/preset-typescript"
-}} />
-
-### Configure Jest
-
-You need to further configure the `jest.config.ts` file to allow Jest to correctly compile and run test cases. Here is a basic configuration:
-
-```ts title="jest.config.ts"
-import type { Config } from 'jest';
-
-const config: Config = {
-  coverageProvider: 'babel',
-  setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
-  testEnvironment: 'jsdom',
-  transform: {
-    '^.+\\.(js|jsx|ts|tsx)$': 'babel-jest',
-  },
-  transformIgnorePatterns: [],
-};
-
-export default config;
-```
-
-In the configuration, the `transformIgnorePatterns` is set to an empty array, meaning that all files will be compiled. If you want to speed up the test run, you can configure it as needed.
-
-The `setupFilesAfterEnv` will be executed at startup. In `jest.setup.ts`, you can import `@testing-library/jest-dom`, which includes a set of convenient custom matchers, such as `.toBeInTheDocument()`, to make writing tests easier:
-
-```ts title="jest.setup.ts"
-import '@testing-library/jest-dom';
-```
-
-### Configure Babel
-
-You need to configure Babel to allow Jest to automatically compile JSX and other syntax. Here is a basic configuration:
-
-```js title="babel.config.js"
-module.exports = {
-  presets: [
-    ['@babel/preset-env', { targets: { node: 'current' } }],
-    ['@babel/preset-react', { runtime: 'automatic' }],
-    '@babel/preset-typescript',
-  ],
-};
-```
-
-## Writing Test Cases
-
-Now, you can start writing tests. First, add a `test` command in `package.json`:
-
-```json title="package.json"
-{
-  "scripts": {
-    "test": "jest"
-  }
-}
-```
-
-Create a simple page for testing:
-
-```tsx title="routes/page.tsx"
-import { Link } from '@modern-js/runtime/router';
-
-const Index = () => (
-  <div>
-    <h1>Home</h1>
-    <Link to="/about">About</Link>
-  </div>
-);
-
-export default Index;
-```
-
-Add a test case to check if the page has the expected text:
-
-```tsx title="__tests__/page.test.tsx"
-import '@testing-library/jest-dom';
-import { render, screen } from '@testing-library/react';
-import { BrowserRouter as Router } from '@modern-js/runtime/router';
-import Page from '../routes/page';
-
-describe('Page', () => {
-  it('renders a heading', () => {
-    render(
-      <Router>
-        <Page />
-      </Router>,
-    );
-
-    const heading = screen.getByRole('heading', { level: 1 });
-
-    expect(heading).toBeInTheDocument();
-  });
-});
-```
-
-In the above test case, we imported the `<Router>` component from `@modern-js/runtime/router` because React Router requires the corresponding context when rendering some route-related components.
-
-:::note
-When running directly in the Modern.js application, the `<Router>` component will be automatically injected.
-:::
-
-## Run Test Cases
-
-Execute the above `test` command to run the test cases:
-
-```bash
- PASS  src/__tests__/page.test.tsx
-  Page
-    ✓ renders a heading (31 ms)
-
-Test Suites: 1 passed, 1 total
-Tests:       1 passed, 1 total
-Snapshots:   0 total
-Time:        0.959 s, estimated 1 s
-```

package/docs/en/guides/basic-features/testing/vitest.mdx

@@ -1,100 +0,0 @@
-# Vitest
-
-Vitest is a testing framework driven by Vite, which can be used for unit testing in combination with React Testing Library.
-
-To use Vitest in Modern.js, you need to install the dependencies first. You can run the following commands:
-
-import { PackageManagerTabs } from '@theme';
-
-<PackageManagerTabs command={{ 
-  npm: "npm install -D vitest @vitejs/plugin-react jsdom @testing-library/react @testing-library/dom", 
-  yarn: "yarn add -D vitest @vitejs/plugin-react jsdom @testing-library/react @testing-library/dom", 
-  pnpm: "pnpm install -D vitest @vitejs/plugin-react jsdom @testing-library/react @testing-library/dom",
-  bun: "bun add -D vitest @vitejs/plugin-react jsdom @testing-library/react @testing-library/dom"
-}} />
-
-Next, you need to create a Vitest configuration file `vitest.config.ts` with the following content:
-
-```ts title="vitest.config.ts"
-import { defineConfig } from 'vitest/config'
-import react from '@vitejs/plugin-react'
- 
-export default defineConfig({
-  plugins: [react()],
-  test: {
-    environment: 'jsdom',
-  },
-})
-```
-
-For more information about Vitest configuration, you can refer to the [Vitest configuration documentation](https://vitest.dev/config/#configuration).
-
-You can optionally add the `vitest` command to `package.json`:
-
-```json title="package.json"
-{
-  "scripts": {
-    "test": "vitest"
-  }
-}
-```
-
-After running this command, Vitest will automatically watch your file changes and rerun the test cases.
-
-## Create Unit Tests
-
-First, create a simple page for testing:
-
-```tsx title="routes/page.tsx"
-import { Link } from '@modern-js/runtime/router';
-
-const Index = () => (
-  <div>
-    <h1>Home</h1>
-    <Link to="/about">About</Link>
-  </div>
-);
-
-export default Index;
-```
-
-Add a test case to check if the page has the expected text:
-
-```tsx title="__tests__/page.test.tsx"
-import { expect, test } from 'vitest';
-import { render, screen } from '@testing-library/react';
-import { BrowserRouter as Router } from '@modern-js/runtime/router';
-import Page from '../routes/page';
-
-test('Page', () => {
-  render(
-    <Router>
-      <Page />
-    </Router>,
-  );
-  expect(screen.getByRole('heading', { level: 1, name: 'Home' })).toBeDefined();
-});
-```
-
-In the above test case, we imported the `<Router>` component from `@modern-js/runtime/router` because React Router requires the corresponding context when rendering some route-related components.
-
-:::note
-When running directly in the Modern.js application, the `<Router>` component will be automatically injected.
-:::
-
-## Run Test Cases
-
-Execute the above `test` command to run the test cases:
-
-```bash
-✓ src/__tests__/page.test.tsx (1)
-  ✓ Page
-
-Test Files  1 passed (1)
-    Tests  1 passed (1)
-  Start at  15:37:12
-  Duration  999ms (transform 119ms, setup 0ms, collect 365ms, tests 33ms, environment 421ms, prepare 44ms)
-
-
-PASS  Waiting for file changes...
-```

package/docs/zh/guides/basic-features/testing/cypress.mdx

@@ -1,95 +0,0 @@
-# Cypress
-
-Cypress 是一个用于 E2E 测试和组件测试的框架。
-
-在 Modern.js 中使用 Cypress 需要先安装依赖，可以执行以下命令：
-
-import { PackageManagerTabs } from '@theme';
-
-<PackageManagerTabs command={{ npm: "npm install -D cypress", yarn: "yarn add -D cypress", pnpm: "pnpm install -D cypress" }} />
-
-接下来，创建 `cypress.config.ts` 文件，并添加以下内容：
-
-```ts
-import { defineConfig } from 'cypress'
-
-export default defineConfig({
-  e2e: {
-    setupNodeEvents(on, config) {},
-  },
-})
-```
-
-## 编写测试用例
-
-现在，使用 Cypress 来编写一个 E2E 用例，首先创建两张 Modern.js 的页面。
-
-```tsx title="routes/page.tsx"
-import { Link } from '@modern-js/runtime/router';
-
-const Index = () => (
-  <div>
-    <h1>Home</h1>
-    <Link to="/about">About</Link>
-  </div>
-);
-
-export default Index;
-```
-
-```tsx title="routes/about/page.tsx"
-import { Link } from '@modern-js/runtime/router';
-
-const Index = () => (
-  <div>
-    <h1>About</h1>
-    <Link to="/">Home</Link>
-  </div>
-);
-
-export default Index;
-```
-
-接下来，创建测试用例文件：
-
-```ts title="cypress/e2e/app.cy.ts"
-describe('Navigation', () => {
-  it('should navigate to the about page', () => {
-    // Start from the index page
-    cy.visit('http://localhost:8080/')
-
-    // Find a link with an href attribute containing "about" and click it
-    cy.get('a[href*="about"]').click()
-
-    // The new url should include "/about"
-    cy.url().should('include', '/about')
-
-    // The new page should contain an h1 with "About"
-    cy.get('h1').contains('About')
-  })
-})
-```
-
-测试文件可能会缺少 API 的类型，你可以参考 [Cypress - Typescript](https://docs.cypress.io/guides/tooling/typescript-support#Configure-tsconfigjson) 文档解决。
-
-你可以将命令添加到 `package.json` 中：
-
-```json title="package.json"
-{
-  "scripts": {
-    "test": "cypress open"
-  }
-}
-```
-
-## 运行测试用例
-
-执行上述 `test` 命令，运行测试用例：
-
-```bash
-DevTools listening on ws://127.0.0.1:55203/devtools/browser/xxxxx
-```
-
-Cypress 会打开一个无头浏览器，按照提示你可以找到对应的测试文件，并自动运行 E2E 测试：
-
-![cypress](https://lf3-static.bytednsdoc.com/obj/eden-cn/nuvjhpqnuvr/cypress.jpg)