@modern-js/main-doc 2.52.0 → 2.53.0

package/docs/en/guides/basic-features/routes.mdx

@@ -455,8 +455,8 @@ export const init = (context: RuntimeContext) => {
 import { useRuntimeContext } from '@modern-js/runtime';
 
 export default () => {
-  const { context } = useRuntimeContext();
-  const { message } = context.getInitData();
+  const context = useRuntimeContext();
+  const { message } = context.initialData;
 
   return <div>{message}</div>;
 };

package/docs/en/guides/get-started/tech-stack.mdx

@@ -83,12 +83,6 @@ Modern.js supports the use of [styled-components](https://styled-components.com/
 
 If you need to use other CSS-in-JS solutions, you can integrate them into your project on your own.
 
-## Testing Framework
-
-Modern.js supports the use of [Jest](https://jestjs.io/) for unit testing or integration testing. This feature is optional. Please refer to ["Using Jest"](/en/guides/advanced-features/testing) to enable it.
-
-If you need to use [Vitest](https://vitest.dev/) or other testing frameworks, you can integrate them into your project on your own.
-
 ## UI Components
 
 Modern.js can be used with any React UI component library from the community, such as [MUI](https://mui.com/), [Ant Design](https://ant.design/), [Arco Design](https://github.com/arco-design/arco-design), [Semi Design](https://semi.design/), [Radix UI](https://www.radix-ui.com/), and more.

package/docs/en/guides/topic-detail/framework-plugin/plugin-api.mdx

@@ -105,7 +105,7 @@ interface IAppContext {
   /** Information for server routes */
   serverRoutes: ServerRoute[];
   /** Tools type of the current project */
-  toolsType?: 'app-tools' | 'module-tools' | 'monorepo-tools';
+  toolsType?: 'app-tools' | 'module-tools';
   /** Type of the bundler being used */
   bundlerType?: 'webpack' | 'rspack' | 'esbuild';
 }

package/docs/en/guides/topic-detail/generator/create/option.md

@@ -20,7 +20,6 @@ Options:
   -d,--debug               using debug mode to log something (default: false)
   --mwa                    create mwa application using default config (default: false)
   --module                 create module application using default config (default: false)
-  --monorepo               create monorepo application using default config (default: false)
   --generator <generator>  run custom generator
   -p, --plugin <plugin>    use generator plugin to create new solution or customize Modern.js solution (default: [])
   --dist-tag <distTag>     use specified tag version for it\'s generator (default: "")
@@ -89,10 +88,6 @@ Quickly create a Web App project.
 
 Quickly create a Npm Module project.
 
-## --monorepo
-
-Quickly create a Monorepo project.
-
 ## -p, --plugin \<plugin>
 
 Specify a generator plugin.

package/docs/en/guides/topic-detail/generator/create/use.mdx

@@ -4,7 +4,7 @@ sidebar_position: 1
 
 # Usage
 
-Modern.js provides `@modern-js/create` tool for creating project templates provided by Modern.js, including [Web App](https://modernjs.dev/), [Npm Module](https://modernjs.dev/module-tools), [Monorepo](/guides/topic-detail/monorepo/intro.html).
+Modern.js provides `@modern-js/create` tool for creating project templates provided by Modern.js, including [Web App](https://modernjs.dev/), [Npm Module](https://modernjs.dev/module-tools).
 
 The following will introduce how to use `@modern-js/create`.
 
@@ -47,12 +47,3 @@ npx @modern-js/create@latest npm-module
 ? Please select the programming language: TS
 ? Please select the package manager: pnpm
 ```
-
-### Create Monorepo Project
-
-```bash
-npx @modern-js/create@latest monorepo
-? Please select the type of project you want to create: Monorepo
-? Please select the package manager: pnpm
-```
-

package/docs/en/guides/topic-detail/generator/new/config.md

@@ -117,32 +117,3 @@ Options:
 - Enable Storybook -- storybook
 
 - Enable Runtime API -- runtime_api
-
-## Monorepo
-
-### sub_solution
-
-Question: Please select the type of project you want to create.
-
-Options:
-
-- Web App -- mwa
-- Npm Module -- module
-
-### packageName
-
-Question: Please fill in the project name
-
-:::info
-The value of the `name` field in the `package.json` file of the sub-project, which is a string type.
-
-:::
-
-### packagePath
-
-Question: Please fill in the sub-project directory name
-
-:::info
-The name of the subdirectory in the `apps` or `packages` directory on which the sub-project is based, which is a string type.
-
-:::

package/docs/en/guides/topic-detail/generator/new/use.md

@@ -73,23 +73,3 @@ npm run new
 ```
 
 After running, Storybook plugin dependencies will be installed in the project, and the `storybook` command will be added. A `stories` directory will be created for Storybook module development, along with prompt information for registering Storybook plugins.
-
-## Monorepo
-
-Monorepo projects use the `new` command provided by `@modern-js/monorepo-tools`.
-
-The `new` command provides the ability to create sub-project.
-
-For example:
-
-Create Web App Sub-project:
-
-```bash
-? Please select the type of project you want to create: Web App
-? Please fill in the sub-project name: web_app
-? Please fill in the sub-project directory name: web_app
-? Please select the programming language: TS
-? Please select the bundler: webpack
-```
-
-After running, a sub-project named `web_app` will be created in the `apps` directory of the project. In the sub-project directory, you can still run the `new` command to create project elements and enable features.

package/docs/zh/guides/basic-features/routes.mdx

@@ -460,8 +460,8 @@ export const init = (context: RuntimeContext) => {
 import { useRuntimeContext } from '@modern-js/runtime';
 
 export default () => {
-  const { context } = useRuntimeContext();
-  const { message } = context.getInitData();
+  const context = useRuntimeContext();
+  const { message } = context.initialData;
 
   return <div>{message}</div>;
 };

package/docs/zh/guides/get-started/tech-stack.mdx

@@ -83,12 +83,6 @@ Modern.js 支持使用 [styled-components](https://styled-components.com/)，请
 
 如果你需要使用其他 CSS-in-JS 方案，可以自行集成到你的项目中。
 
-## 测试框架
-
-Modern.js 支持使用 [Jest](https://jestjs.io/) 进行单元测试或集成测试。该功能为可选功能，请参考[「使用 Jest 测试」](/guides/advanced-features/testing) 启用。
-
-如果你需要使用 [Vitest](https://vitest.dev/) 或其他测试框架，可以自行集成到你的项目中。
-
 ## 组件库
 
 Modern.js 可以与社区中任意的 React 组件库搭配使用，比如 [MUI](https://mui.com/)、[Ant Design](https://ant.design/)、[Arco Design](https://github.com/arco-design/arco-design)、[Semi Design](https://semi.design/)、[Radix UI](https://www.radix-ui.com/) 等。

package/docs/zh/guides/topic-detail/framework-plugin/plugin-api.mdx

@@ -105,7 +105,7 @@ interface IAppContext {
   /** 服务端路由信息 */
   serverRoutes: ServerRoute[];
   /** 当前项目类型 */
-  toolsType?: 'app-tools' | 'module-tools' | 'monorepo-tools';
+  toolsType?: 'app-tools' | 'module-tools';
   /** 当前使用的打包工具类型 */
   bundlerType?: 'webpack' | 'rspack' | 'esbuild';
 }

package/docs/zh/guides/topic-detail/generator/create/option.md

@@ -20,7 +20,6 @@ Options:
   -d,--debug               开启 Debug 模式，打印调试日志信息 (default: false)
   --mwa                    一键创建 Web 应用(使用默认配置) (default: false)
   --module                 一键创建 Module 应用(使用默认配置) (default: false)
-  --monorepo               一键创建 Monorepo 应用(使用默认配置) (default: false)
   --generator <generator>  使用自定义生成器
   -p, --plugin <plugin>    使用生成器插件创建新的工程方案类型或定制化 Modern.js 工程方案 (default: [])
   --dist-tag <distTag>     生成项目时生成器使用特殊的 npm Tag (default: "")
@@ -89,10 +88,6 @@ npx @modern-js/create@latest --config '{"packageManager": "pnpm"}'
 
 快速创建 Npm 模块项目。
 
-## --monorepo
-
-快速创建 Monorepo 项目。
-
 ## -p, --plugin \<plugin>
 
 指定生成器插件。

package/docs/zh/guides/topic-detail/generator/create/use.mdx

@@ -4,7 +4,7 @@ sidebar_position: 1
 
 # 使用
 
-Modern.js 提供了 `@modern-js/create` 工具用于创建 Modern.js 提供的工程方案项目，例如 [Web 应用](https://modernjs.dev/)、[Npm 模块](https://modernjs.dev/module-tools)、[Monorepo](/guides/topic-detail/monorepo/intro.html) 等。
+Modern.js 提供了 `@modern-js/create` 工具用于创建 Modern.js 提供的工程方案项目，例如 [Web 应用](https://modernjs.dev/)、[Npm 模块](https://modernjs.dev/module-tools)。
 
 下面将介绍 `@modern-js/create` 的使用姿势。
 
@@ -47,12 +47,3 @@ npx @modern-js/create@latest npm-module
 ? 请选择开发语言 TS
 ? 请选择包管理工具 pnpm
 ```
-
-### 创建 Monorepo
-
-```bash
-npx @modern-js/create@latest monorepo
-? 请选择你想创建的工程类型 Monorepo
-? 请选择包管理工具 pnpm
-```
-

package/docs/zh/guides/topic-detail/generator/new/config.md

@@ -60,8 +60,6 @@ sidebar_position: 3
 
 - 启用「微前端」模式 -- micro_frontend
 
-- 启用「单元测试 / 集成测试」功能 -- test
-
 - 启用「基于 UA 的 Polyfill」功能 -- polyfill
 
 - 启用「全局代理」 -- proxy
@@ -111,37 +109,8 @@ sidebar_position: 3
 
 选项：
 
-- 启用「单元测试 / 集成测试」功能 -- test
-
 - 启用 「Tailwind CSS」 支持 -- tailwindcss
 
 - 启用「Storybook」 -- storybook
 
 - 启用「Runtime API」 -- runtime_api
-
-## Monorepo
-
-### sub_solution
-
-问题：请选择你想创建的工程类型
-
-选项：
-
-- Web 应用 -- mwa
-- Npm 模块 -- module
-
-### packageName
-
-问题：请填写子项目名称
-
-:::info
-子项目的 `package.json` 的 name 字段值，该配置值为字符串类型。
-:::
-
-### packagePath
-
-问题：请填写子项目目录名称
-
-:::info
-子项目基于 apps 或者 packages 目录的子目录名称，该字段为字符串类型。
-:::

package/docs/zh/guides/topic-detail/generator/new/use.md

@@ -72,23 +72,3 @@ npm run new
 ```
 
 执行完成后将会在项目安装 Storybook 插件相关依赖，增加 `storybook` 命令，创建 `stories` 目录用于 Storybook 模块的开发并提供提示信息用于注册 Storybook 插件。
-
-## Monorepo
-
-Monorepo 项目通过 `@modern-js/monorepo-tools` 提供 new 命令。
-
-new 命令提供了创建子项目的能力。
-
-例如：
-
-创建 Web 应用子项目：
-
-```bash
-? 请选择你想创建的工程类型 Web 应用
-? 请填写子项目名称 web_app
-? 请填写子项目目录名称 web_app
-? 请选择开发语言 TS
-? 请选择构建工具 webpack
-```
-
-执行完成后将会在项目 apps 目录创建 `web_app` 的子项目，在子项目目录中依然可以执行 new 命令创建项目元素和开启功能。

package/package.json

@@ -15,17 +15,17 @@
     "modern",
     "modern.js"
   ],
-  "version": "2.52.0",
+  "version": "2.53.0",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "public",
     "provenance": true
   },
   "dependencies": {
-    "@modern-js/sandpack-react": "2.52.0"
+    "@modern-js/sandpack-react": "2.53.0"
   },
   "peerDependencies": {
-    "@modern-js/builder-doc": "^2.52.0"
+    "@modern-js/builder-doc": "^2.53.0"
   },
   "devDependencies": {
     "classnames": "^2",
@@ -39,8 +39,8 @@
     "@rspress/shared": "1.18.2",
     "@types/node": "^16",
     "@types/fs-extra": "9.0.13",
-    "@modern-js/builder-doc": "2.52.0",
-    "@modern-js/doc-plugin-auto-sidebar": "2.52.0"
+    "@modern-js/builder-doc": "2.53.0",
+    "@modern-js/doc-plugin-auto-sidebar": "2.53.0"
   },
   "scripts": {
     "dev": "rspress dev",

package/docs/en/apis/app/runtime/testing/_category_.json

@@ -1,4 +0,0 @@
-{
-  "label": "Testing API",
-  "position": 11
-}

package/docs/en/apis/app/runtime/testing/act.mdx

@@ -1,35 +0,0 @@
----
-title: act
----
-# act
-
-Used to ensure that behaviors such as rendering, events, data fetching, etc. have been applied to the DOM.
-
-## Usage
-
-```ts
-import { act } from '@modern-js/runtime/testing';
-```
-
-## Function Signature
-
-`act` is the same as [react-dom/test-utils act function](https://reactjs.org/docs/testing-recipes.html#act).
-
-## Example
-
-```tsx
-import ReactDOM from 'react-dom';
-import { act } from '@modern-js/runtime/testing';
-import { Foo } from '@/components/Foo';
-
-describe('test act', () => {
-  it('it should be foo', () => {
-    const el = document.createElement('div');
-    act(() => {
-      ReactDOM.render(<Foo />, el);
-    });
-
-    expect(el.innerHTML).toBe('<div>Foo</div>');
-  });
-});
-```

package/docs/en/apis/app/runtime/testing/cleanup.mdx

@@ -1,40 +0,0 @@
----
-title: cleanup
-sidebar_position: 3
----
-# cleanup
-
-Used to uninstall all currently rendered components.
-
-## Usage
-
-```ts
-import { cleanup } from '@modenr-js/runtime/testing';
-```
-
-## Function Signature
-
-`function cleanup(): void`
-
-## Example
-
-:::info
-Note that if you are using a testing framework that supports afterEach and it is injected into your testing environment (such as mocha, Jest, and Jasmine), **will execute `cleanup`** in the afterEach hook by default. Otherwise, you will need to do manual cleanup after each test.
-
-:::
-
-For example, if you use the [ava](https://github.com/avajs/ava) test framework, then you need to use the `test.after Each` hook like this.
-
-```tsx
-import { cleanup, render } from '@modern-js/runtime/testing';
-import test from 'ava';
-
-test.afterEach(cleanup);
-
-test('renders into document', () => {
-  render(<div />);
-  // ...
-});
-
-// ... more tests ...
-```

package/docs/en/apis/app/runtime/testing/render.mdx

@@ -1,71 +0,0 @@
----
-title: render
----
-# render
-
-Used to render the component in the test case.
-
-## Usage
-
-```ts
-import { render } from '@modern-js/runtime/testing';
-```
-
-## Function Signature
-
-```ts
-type Options = {
-  container: DOMElement;
-  baseElement: DOMElement;
-  hydrate: boolean;
-  warpper: React.ComponentType<{children: ReactNode}>;
-  queries: any;
-};
-
-type RenderResult = {
-  {...queries}: any;
-  container: DOMElement;
-  baseElement: DOMElement;
-  debug: function;
-  rerender: function;
-  unmount: function;
-  asFragment: function;
-}
-
-function render(ui: React.ReactElement<any>, options: Options): RenderResult;
-```
-
-### Input
-
-- `ui`: the React component that needs to be rendered.
-- `options`: render options.
-  - `container`: the dom which component mounted. by default create a `div` element, and auto append to `document.body`. the default value is `document.body.append(document.createElement('div'))`.
-  - `baseElement`: Used to specify the `basename` used in `queries`. If `container` is specified, the default value is the value of `container`, otherwise it is `document.body`.
-  - `hydrate`: If set to `true`, the [ReactDOM.hydrate](https://react.dev/reference/react-dom/hydrate) rendering component is used. The default value is `false`.
-  - `wrapper`: a react component that can be used to customize rendering logic.
-  - `queries`: customize some own `queries`.
-
-### Return Value
-
-- `{...queries}`: all available [queries](https://testing-library.com/docs/queries/about/).
-- `container`: the DOM element that React component mounted.
-- `baseElement`
-- `debug`
-- `rerender`: if you want to test some scene when a rendered component is updated, you can use rerender for reality.
-- `unmount`: unmount rendered components. This API is helpful if you want to test what happens after the component is unmounted.
-- `asFragment`: return the [DocumentFragment](https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment) of rendered component. used to test the response of the DOM structure after the react event is triggered.
-
-## Example
-
-```ts
-import { render } from '@modern-js/runtime/testing';
-import App from './App';
-
-test('renders a message', () => {
-  const { container, getByText } = render(<App />);
-  expect(getByText('Hello, world!')).toBeInTheDocument();
-  expect(container.firstChild).toMatchInlineSnapshot(`
-    <h1>Hello, World!</h1>
-  `);
-});
-```

package/docs/en/apis/app/runtime/testing/renderApp.mdx

@@ -1,34 +0,0 @@
----
-title: renderApp
----
-# renderApp
-
-The `render` function is used to test normal components, and the `renderApp` function is used to test App components.
-
-## Usage
-
-```ts
-import { renderApp } from '@modern-js/runtime/testing';
-```
-
-App components refer to components that contain some Modern.js contexts, such as App root components, Containers using Models, etc.
-
-For the testing of such components, you can use the `renderApp` function, which will automatically wrap the context information according to the current `modern.config.js`.
-
-## Function Signature
-
-`renderApp` is the same as [render](./render.mdx).
-
-## Example
-
-```ts
-import { renderApp } from '@modern-js/runtime/testing';
-import App from './App';
-
-describe('test', () => {
-  it('test App', () => {
-    const { getByText } = renderApp(<App />);
-    expect(getByText('Hello Modern!')).toBeInTheDocument();
-  });
-});
-```

package/docs/en/configure/app/testing/_category_.json

@@ -1,4 +0,0 @@
-{
-  "label": "testing",
-  "position": 10
-}

package/docs/en/configure/app/testing/transformer.mdx

@@ -1,17 +0,0 @@
----
-title: testing.transformer
-sidebar_label: transformer
-sidebar_position: 1
----
-# transformer
-
-- **Type:** `'babel-jest' | 'ts-jest'`
-- **Default:** `babel-jest`
-
-First need to run `new` command to enable [Unit Test / Integration Test] features.
-
-Configure the compilation tool used during test execution. By default, `babel-jest` is used. You can configure it to use either [babel-jest](https://www.npmjs.com/package/babel-jest) or [ts-jest](https://github.com/kulshekhar/ts-jest).
-
-:::info Additional
-`babel-jest` can compile TypeScript files but does not perform type checking. If you want to perform type checking on your TypeScript files while running test cases, you can use `ts-jest`.
-:::

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

@@ -1,40 +0,0 @@
----
-sidebar_label: jest
----
-
-# tools.jest
-
-- **Type:** `Object | Function`
-- **Default:** `{}`
-
-:::caution Caution
-First you need to enable the "Unit Test" function using [new](/apis/app/commands#modern-new) command.
-
-:::
-
-Corresponding to the configuration of [Jest](https://jestjs.io/docs/configuration), when of type `Object`, all underlying configurations supported by Jest can be configured.
-
-```js title=modern.config.js
-export default defineConfig({
-  tools: {
-    jest: {
-      testTimeout: 10000,
-    },
-  },
-});
-```
-
-When the value is of type `Function`, the default configuration is passed in as the first parameter and a new Jest configuration object needs to be returned.
-
-```js title=modern.config.js
-export default defineConfig({
-  tools: {
-    jest: options => {
-      return {
-        ...options,
-        testTimeout: 10000,
-      };
-    },
-  },
-});
-```

package/docs/en/guides/advanced-features/testing.mdx

@@ -1,47 +0,0 @@
----
-sidebar_position: 14
----
-
-# Using Jest
-
-Modern.js integrates the testing capabilities of [Jest](https://jestjs.io/) by default.
-
-First need to execute `pnpm run new` to enable "unit test/integration test" features:
-
-```bash
-? Please select the operation you want: Enable features
-? Please select the feature name: Enable Unit Test / Integration Test
-```
-
-After executing the above command, the `"test": "modern test"` command will be added in `package.json` automatically.
-
-After registering the `@modern-js/plugin-testing` plugin in `modern.config.ts`, you can use the testing features:
-
-```ts title="modern.config.ts"
-import { testingPlugin } from '@modern-js/plugin-testing';
-
-export default defineConfig({
-  plugins: [..., testingPlugin()],
-});
-```
-
-## Test file
-
-Modern.js default recognized test file paths are: `<rootDir>/src/**/*.test.[jt]s?(x)` and `<rootDir>/tests/**/*.test.[jt]s?(x)`.
-
-If you need to customize the test directory, you can configure it with [tools.jest](/configure/app/tools/jest).
-
-## Usage
-
-Modern.js test support [testing-library](https://testing-library.com/docs/). API can be imported from `@modern-js/runtime/testing`.
-
-```ts
-import { render, screen } from '@modern-js/runtime/testing';
-```
-
-Other testing APIs supported by Modern.js can be referred to [here](/apis/app/runtime/testing/cleanup).
-
-## transform
-
-By default, Modern.js testing uses [babel-jest](https://www.npmjs.com/package/babel-jest) for source code compilation. If you need to use [ts-jest](https://github.com/kulshekhar/ts-jest), you can configure it through [testing.transform](/configure/app/testing/transformer).
-

package/docs/en/guides/topic-detail/changesets/_category_.json

@@ -1,4 +0,0 @@
-{
-  "label": "Package Version Management",
-  "position": 5
-}