@modern-js/main-doc 2.52.0 → 2.54.0

package/package.json

@@ -15,17 +15,17 @@
     "modern",
     "modern.js"
   ],
-  "version": "2.52.0",
+  "version": "2.54.0",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "public",
     "provenance": true
   },
   "dependencies": {
-    "@modern-js/sandpack-react": "2.52.0"
+    "@modern-js/sandpack-react": "2.54.0"
   },
   "peerDependencies": {
-    "@modern-js/builder-doc": "^2.52.0"
+    "@modern-js/builder-doc": "^2.54.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/doc-plugin-auto-sidebar": "2.54.0",
+    "@modern-js/builder-doc": "2.54.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
-}

package/docs/en/guides/topic-detail/changesets/add.mdx

@@ -1,125 +0,0 @@
----
-sidebar_position: 2
----
-
-# Add Changesets
-
-When we finish development, we need to add a changeset to declare the current changes for version releases.
-
-## Information
-
-A changeset includes:
-
-- Which packages are affected by this change.
-
-- The type of version for this change, which complies with the [semver](https://semver.org/) specification.
-
-- Changelog information for this change.
-
-## Steps
-
-:::info
-The following example commands are all using pnpm. If you need to use other package managers, please replace them as needed.
-:::
-
-### Modern.js Module
-
-#### Run the change command in the root directory:
-
-```bash
-pnpm run change
-```
-
-#### Select the type of version for this change
-
-![](https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/changeset-select-version.png)
-
-#### Fill in the changelog information
-
-![](https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/changeset-input-changelog.png)
-
-After running, a corresponding changeset file will be created in the `.changeset` directory of the project, and the file content is as follows:
-
-```markdown
----
-'module-changeset': patch
----
-
-feat: test module solution changeset
-```
-
-This file contains all the information of the changeset.
-
-### Monorepo
-
-There are three NPM module packages in the monorepo, `module-1`, `module-2`, and `module-3`.
-
-#### Run the change command in the root directory
-
-```bash
-pnpm run change
-```
-
-#### Select the list of packages to upgrade for this change
-
-Changesets will categorize the packages in the Monorepo into two categories, `changed packages` and `unchanged packages`, based on the current code changes (`git diff Head...baseBranch`), making it easy for users to choose.
-
-Use the space key to select the corresponding package or category, and then press Enter after the selection is completed:
-
-![](https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/changeset-select-packages.png)
-
-#### Select the packages corresponding to different version types
-
-Changesets will ask about the `major` and `minor` types. If there are packages that have not selected these two types, the `patch` type will be used by default.
-
-![](https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/changeset-auto-select-patch.png)
-
-#### Fill in the changelog information
-
-![](https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/changeset-input-changelog-monorepo.png)
-
-After running, a corresponding changeset file will be created in the `.changeset` directory of the project, and the file content is as follows:
-
-```markdown
----
-'module-2': minor
-'module-3': patch
----
-
-feat: test-changeset
-```
-
-This file contains all the information of the changeset, and different packages will be marked according to the selected version type.
-
-## Parameters
-
-The `change` command supports the following parameters:
-
-- `--empty`: Adds an empty changeset.
-
-```bash
-pnpm run change --empty
-```
-
-After running, an empty changeset file will be created in the `.changeset` directory of the project, and the file content is as follows:
-
-```markdown
----
----
-```
-
-- `--open`: When using this parameter, the system default editor will be opened for filling in the changelog.
-
-## Notes
-
-- Not all changes require changesets
-
-If the current change is to modify some infrastructure of the repository, such as CI, testing, etc., there is no need to add changesets, or an empty changeset can be added.
-
-- Multiple changesets can be submitted in one pull request
-
-When a pull request has multiple feature developments or bug fixes, multiple `pnpm run change` commands can be executed to add multiple changeset files. Each file selects the corresponding packages for the feature and adds change information.
-
-- When creating a changeset, all packages related to the feature need to be selected
-
-When creating a changeset in a Monorepo, all related packages to the feature need to be selected to avoid some packages not being published when releasing.