@nocobase/plugin-flow-engine 2.1.0-alpha.9 → 2.1.0-beta.10

package/dist/ai/docs/runjs/context/view.md

@@ -1,19 +1,19 @@
 # ctx.view
 
-The currently active view controller (dialog, drawer, popover, embedded area, etc.), used to access view-level information and operations. Provided by `FlowViewContext`, it is only available within view content opened via `ctx.viewer` or `ctx.openView`.
+The currently active view controller (dialog, drawer, popover, embed, etc.); used to access view-level info and actions. Provided by FlowViewContext; only available inside content opened via `ctx.viewer` or `ctx.openView`.
 
 ## Use Cases
 
 | Scenario | Description |
-|------|------|
-| **Dialog/Drawer Content** | Use `ctx.view.close()` within the `content` to close the current view, or use `Header` and `Footer` to render titles and footers. |
-| **After Form Submission** | Call `ctx.view.close(result)` after a successful submission to close the view and return the result. |
-| **JSBlock / Action** | Determine the current view type via `ctx.view.type`, or read opening parameters from `ctx.view.inputArgs`. |
-| **Association Selection, Sub-tables** | Read `collectionName`, `filterByTk`, `parentId`, etc., from `inputArgs` for data loading. |
+|----------|-------------|
+| **Dialog/drawer content** | In `content`, use `ctx.view.close()` to close, or render `Header`, `Footer` for title and actions |
+| **After form submit** | Call `ctx.view.close(result)` to close and pass result back |
+| **JSBlock / Action** | Check `ctx.view.type` for view type, or read `ctx.view.inputArgs` for open params |
+| **Association select, sub-table** | Read `inputArgs` for `collectionName`, `filterByTk`, `parentId`, etc. for loading data |
 
-> Note: `ctx.view` is only available in RunJS environments with a view context (e.g., inside the `content` of `ctx.viewer.dialog()`, in dialog forms, or inside association selectors). In standard pages or backend contexts, it is `undefined`. It is recommended to use optional chaining (`ctx.view?.close?.()`).
+> Note: `ctx.view` is only available in RunJS when a view context exists (e.g. inside `ctx.viewer.dialog()` content, dialog form, association selector); in a normal page or backend context it is `undefined`—use optional chaining: `ctx.view?.close?.()`.
 
-## Type Definition
+## Type
 
 ```ts
 type FlowView = {
@@ -25,56 +25,54 @@ type FlowView = {
   update: (newConfig: any) => void;
   navigation?: ViewNavigation;
   destroy?: () => void;
-  submit?: () => Promise<any>;  // Available in workflow configuration views
+  submit?: () => Promise<any>;
 };
 ```
 
-## Common Properties and Methods
+## Common properties and methods
 
 | Property/Method | Type | Description |
-|-----------|------|------|
+|-----------------|------|-------------|
 | `type` | `'drawer' \| 'popover' \| 'dialog' \| 'embed'` | Current view type |
-| `inputArgs` | `Record<string, any>` | Parameters passed when opening the view (see below) |
-| `Header` | `React.FC \| null` | Header component, used to render titles and action areas |
-| `Footer` | `React.FC \| null` | Footer component, used to render buttons, etc. |
-| `close(result?, force?)` | `void` | Closes the current view; `result` can be passed back to the caller |
-| `update(newConfig)` | `void` | Updates view configuration (e.g., width, title) |
-| `navigation` | `ViewNavigation \| undefined` | In-page view navigation, including Tab switching, etc. |
+| `inputArgs` | `Record<string, any>` | Params passed when opening the view |
+| `Header` | `React.FC \| null` | Header component for title and actions |
+| `Footer` | `React.FC \| null` | Footer for buttons, etc. |
+| `close(result?, force?)` | `void` | Close current view; optional `result` passed back to caller |
+| `update(newConfig)` | `void` | Update view config (e.g. width, title) |
+| `navigation` | `ViewNavigation \| undefined` | In-view navigation (tabs, etc.) |
 
-> Currently, only `dialog` and `drawer` support `Header` and `Footer`.
+> Currently only `dialog` and `drawer` support `Header` and `Footer`.
 
-## Common inputArgs Fields
+## inputArgs (common fields)
 
-The fields in `inputArgs` vary depending on the opening scenario. Common fields include:
+Fields in `inputArgs` depend on how the view was opened; common ones:
 
 | Field | Description |
-|------|------|
+|-------|-------------|
 | `viewUid` | View UID |
 | `collectionName` | Collection name |
-| `filterByTk` | Primary key filter (for single record details) |
-| `parentId` | Parent ID (for association scenarios) |
-| `sourceId` | Source record ID |
+| `filterByTk` | Primary key filter (single record) |
+| `parentId` | Parent id (associations) |
+| `sourceId` | Source record id |
 | `parentItem` | Parent item data |
-| `scene` | Scene (e.g., `create`, `edit`, `select`) |
-| `onChange` | Callback after selection or change |
-| `tabUid` | Current Tab UID (within a page) |
+| `scene` | Scene (e.g. `create`, `edit`, `select`) |
+| `onChange` | Callback after select/change |
+| `tabUid` | Current tab UID (in-page) |
 
-Access these via `ctx.getVar('ctx.view.inputArgs.xxx')` or `ctx.view.inputArgs.xxx`.
+Access via `ctx.getVar('ctx.view.inputArgs.xxx')` or `ctx.view.inputArgs.xxx`.
 
 ## Examples
 
-### Closing the Current View
+### Close current view
 
 ```ts
-// Close dialog after successful submission
 await ctx.resource.runAction('create', { data: formData });
 ctx.view?.close();
 
-// Close and return results
 ctx.view?.close({ id: newRecord.id, name: newRecord.name });
 ```
 
-### Using Header / Footer in Content
+### Header / Footer in content
 
 ```tsx
 function DialogContent() {
@@ -86,46 +84,45 @@ function DialogContent() {
       <div>Form content...</div>
       <Footer>
         <Button onClick={() => close()}>Cancel</Button>
-        <Button type="primary" onClick={handleSubmit}>Submit</Button>
+        <Button type="primary" onClick={handleSubmit}>OK</Button>
       </Footer>
     </div>
   );
 }
 ```
 
-### Branching Based on View Type or inputArgs
+### Branch by view type or inputArgs
 
 ```ts
 if (ctx.view?.type === 'embed') {
-  // Hide header in embedded views
   ctx.model.setProps('headerStyle', { display: 'none' });
 }
 
 const collectionName = ctx.view?.inputArgs?.collectionName;
 if (collectionName === 'users') {
-  // User selector scenario
+  // User selector
 }
 ```
 
-## Relationship with ctx.viewer and ctx.openView
+## Relation to ctx.viewer, ctx.openView
 
-| Purpose | Recommended Usage |
-|------|----------|
-| **Open a new view** | `ctx.viewer.dialog()` / `ctx.viewer.drawer()` or `ctx.openView()` |
-| **Operate on current view** | `ctx.view.close()`, `ctx.view.update()` |
-| **Get opening parameters** | `ctx.view.inputArgs` |
+| Use | Recommended |
+|-----|-------------|
+| **Open new view** | `ctx.viewer.dialog()` / `ctx.viewer.drawer()` or `ctx.openView()` |
+| **Operate current view** | `ctx.view.close()`, `ctx.view.update()` |
+| **Open params** | `ctx.view.inputArgs` |
 
-`ctx.viewer` is responsible for "opening" a view, while `ctx.view` represents the "current" view instance. `ctx.openView` is used to open pre-configured workflow views.
+`ctx.viewer` opens views; `ctx.view` is the current view instance; `ctx.openView` opens configured flow views.
 
 ## Notes
 
-- `ctx.view` is only available inside a view; it is `undefined` on standard pages.
-- Use optional chaining: `ctx.view?.close?.()` to avoid errors when no view context exists.
-- The `result` from `close(result)` is passed to the Promise returned by `ctx.viewer.open()`.
+- `ctx.view` is only available inside a view; on a normal page it is `undefined`.
+- Use optional chaining: `ctx.view?.close?.()` to avoid errors when no view context.
+- `close(result)` passes `result` to the Promise returned by `ctx.viewer.open()`.
 
 ## Related
 
-- [ctx.openView()](./open-view.md): Open a pre-configured workflow view
-- [ctx.modal](./modal.md): Lightweight popups (info, confirmation, etc.)
+- [ctx.openView()](./open-view.md): open configured flow view
+- [ctx.modal](./modal.md): lightweight modals (info, confirm, etc.)
 
-> `ctx.viewer` provides methods like `dialog()`, `drawer()`, `popover()`, and `embed()` to open views. The `content` opened by these methods can access `ctx.view`.
+> `ctx.viewer` provides `dialog()`, `drawer()`, `popover()`, `embed()`; inside their `content` you can use `ctx.view`.

package/dist/ai/docs/runjs/document.md

@@ -1 +0,0 @@
-Please provide the Chinese source text you would like me to translate. I am ready to apply all the rules and terminology specified in your instructions.

package/dist/ai/docs/runjs/import-modules.md

@@ -1,20 +1,20 @@
-# Importing Modules
+# Import Modules
 
-In RunJS, you can use two types of modules: **Built-in modules** (accessed directly via `ctx.libs` without importing) and **External modules** (loaded on demand via `ctx.importAsync()` or `ctx.requireAsync()`).
+In RunJS you can use two kinds of modules: **built-in modules** (via `ctx.libs`, no import needed) and **external modules** (loaded on demand via `ctx.importAsync()` or `ctx.requireAsync()`).
 
 ---
 
-## Built-in Modules - ctx.libs (No import required)
+## Built-in Modules - ctx.libs (no import)
 
-RunJS includes several built-in libraries that can be accessed directly through `ctx.libs`. You **do not** need to use `import` or asynchronous loading for these.
+RunJS provides common libraries via `ctx.libs`; you can use them directly **without** `import` or async loading.
 
 | Property | Description |
-|------|------|
-| **ctx.libs.React** | React core, used for JSX and Hooks |
-| **ctx.libs.ReactDOM** | ReactDOM (can be used for `createRoot`, etc.) |
-| **ctx.libs.antd** | Ant Design component library |
+|----------|-------------|
+| **ctx.libs.React** | React core for JSX and Hooks |
+| **ctx.libs.ReactDOM** | ReactDOM (e.g. for createRoot) |
+| **ctx.libs.antd** | Ant Design components |
 | **ctx.libs.antdIcons** | Ant Design icons |
-| **ctx.libs.math** | [Math.js](https://mathjs.org/): Mathematical expressions, matrix operations, etc. |
+| **ctx.libs.math** | [Math.js](https://mathjs.org/): math expressions, matrix operations, etc. |
 | **ctx.libs.formula** | [Formula.js](https://formulajs.github.io/): Excel-like formulas (SUM, AVERAGE, etc.) |
 
 ### Example: React and antd
@@ -22,7 +22,7 @@ RunJS includes several built-in libraries that can be accessed directly through
 ```tsx
 const { Button } = ctx.libs.antd;
 
-ctx.render(<Button>Click Me</Button>);
+ctx.render(<Button>Click</Button>);
 ```
 
 ### Example: ctx.libs.math
@@ -44,67 +44,67 @@ const avg = ctx.libs.formula.AVERAGE(values);
 
 ## External Modules
 
-When you need third-party libraries, choose the loading method based on the module format:
+For third-party libraries, choose the loader by module format:
 
-- **ESM Modules** → Use `ctx.importAsync()`
-- **UMD/AMD Modules** → Use `ctx.requireAsync()`
+- **ESM** → use `ctx.importAsync()`
+- **UMD/AMD** → use `ctx.requireAsync()`
 
 ---
 
-### Importing ESM Modules
+### Import ESM Modules
 
-Use **`ctx.importAsync()`** to dynamically load ESM modules by URL. This is suitable for scenarios like JS blocks, JS fields, and JS actions.
+Use **`ctx.importAsync()`** to load ESM modules by URL at runtime. Suitable for JS Block, JS Field, JS Action, etc.
 
 ```ts
 importAsync<T = any>(url: string): Promise<T>;
 ```
 
-- **url**: The ESM module address. Supports shorthand formats like `<package>@<version>` or subpaths like `<package>@<version>/<file-path>` (e.g., `vue@3.4.0`, `lodash@4/lodash.js`). These will be prefixed with the configured CDN base URL. Full URLs are also supported.
+- **url**: ESM module URL. Supports shorthand `<package>@<version>` or subpath `<package>@<version>/<path>` (e.g. `vue@3.4.0`, `lodash@4/lodash.js`), which is resolved with the configured CDN prefix; full URLs are also supported.
 - **Returns**: The resolved module namespace object.
 
 #### Default: https://esm.sh
 
-If not configured otherwise, shorthand forms will use **https://esm.sh** as the CDN prefix. For example:
+When not configured, the shorthand form uses **https://esm.sh** as the CDN prefix. For example:
 
 ```ts
 const Vue = await ctx.importAsync('vue@3.4.0');
-// Equivalent to loading from https://esm.sh/vue@3.4.0
+// equivalent to loading from https://esm.sh/vue@3.4.0
 ```
 
-#### Self-hosted esm.sh Service
+#### Self-hosted esm.sh
 
-If you need to use an internal network or a self-built CDN, you can deploy a service compatible with the esm.sh protocol and specify it via environment variables:
+For intranet or custom CDN, deploy an esm.sh-compatible service and set:
 
-- **ESM_CDN_BASE_URL**: The base URL for the ESM CDN (defaults to `https://esm.sh`)
-- **ESM_CDN_SUFFIX**: Optional suffix (e.g., `/+esm` for jsDelivr)
+- **ESM_CDN_BASE_URL**: ESM CDN base URL (default `https://esm.sh`)
+- **ESM_CDN_SUFFIX**: Optional suffix (e.g. jsDelivr’s `/+esm`)
 
-For self-hosting, refer to: [https://github.com/nocobase/esm-server](https://github.com/nocobase/esm-server)
+Reference: [https://github.com/nocobase/esm-server](https://github.com/nocobase/esm-server)
 
 ---
 
-### Importing UMD/AMD Modules
+### Import UMD/AMD Modules
 
-Use **`ctx.requireAsync()`** to asynchronously load UMD/AMD modules or scripts that attach to the global object.
+Use **`ctx.requireAsync()`** to load UMD/AMD scripts or scripts that attach to the global object by URL.
 
 ```ts
 requireAsync<T = any>(url: string): Promise<T>;
 ```
 
-- **url**: Supports two forms:
-  - **Shorthand path**: `<package>@<version>/<file-path>`, similar to `ctx.importAsync()`, resolved according to the current ESM CDN configuration. When resolving, `?raw` is appended to request the raw file directly (usually a UMD build). For example, `echarts@5/dist/echarts.min.js` actually requests `https://esm.sh/echarts@5/dist/echarts.min.js?raw` (when using the default esm.sh).
-  - **Full URL**: Any full CDN address (e.g., `https://cdn.jsdelivr.net/npm/xxx`).
-- **Returns**: The loaded library object (the specific form depends on how the library exports its content).
+- **url**: Either:
+  - **Shorthand path**: `<package>@<version>/<path>`, same as `ctx.importAsync()`; resolved with the current ESM CDN config; `?raw` is appended to request the raw file (usually UMD). E.g. `echarts@5/dist/echarts.min.js` becomes `https://esm.sh/echarts@5/dist/echarts.min.js?raw` when using default esm.sh.
+  - **Full URL**: Any CDN URL (e.g. `https://cdn.jsdelivr.net/npm/xxx`).
+- **Returns**: The loaded library object (shape depends on the library’s exports).
 
-After loading, many UMD libraries attach themselves to the global object (e.g., `window.xxx`). You can use them as described in the library's documentation.
+Many UMD libraries attach to the global (e.g. `window.xxx`); use them as documented.
 
 **Example**
 
 ```ts
-// Shorthand path (resolved via esm.sh as ...?raw)
+// Shorthand (resolved via esm.sh with ...?raw)
 const echarts = await ctx.requireAsync('echarts@5/dist/echarts.min.js');
 
 // Full URL
 const dayjs = await ctx.requireAsync('https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js');
 ```
 
-**Note**: If a library provides an ESM version, prefer using `ctx.importAsync()` for better module semantics and Tree-shaking.
+**Note**: If a library provides both ESM and UMD, prefer `ctx.importAsync()` for better module semantics and tree-shaking.

package/dist/ai/docs/runjs/index.md

@@ -1,17 +1,17 @@
 # RunJS Overview
 
-RunJS is the JavaScript execution environment used in NocoBase for scenarios such as **JS Blocks**, **JS Fields**, and **JS Actions**. Code runs in a restricted sandbox, providing safe access to the `ctx` (Context API) and includes the following capabilities:
+RunJS is the JavaScript execution environment in NocoBase used for **JS Block**, **JS Field**, **JS Action**, and similar scenarios. Code runs in a restricted sandbox with safe access to the `ctx` (context API) and supports:
 
 - Top-level `await`
 - Importing external modules
-- Rendering within containers
+- Render in container
 - Global variables
 
-## Top-level await
+## Top-level `await`
 
-RunJS supports top-level `await`, eliminating the need to wrap code in an IIFE.
+RunJS supports top-level `await`; you do not need to wrap code in an IIFE.
 
-**Not Recommended**
+**Not recommended**
 
 ```jsx
 async function test() {}
@@ -29,20 +29,20 @@ await test();
 
 ## Importing External Modules
 
-- Use `ctx.importAsync()` for ESM modules (Recommended)
-- Use `ctx.requireAsync()` for UMD/AMD modules
+- ESM modules: use `ctx.importAsync()` (recommended)
+- UMD/AMD modules: use `ctx.requireAsync()`
 
-## Rendering within Containers
+## Render in Container
 
-Use `ctx.render()` to render content into the current container (`ctx.element`). It supports the following three formats:
+Use `ctx.render()` to render content into the current container (`ctx.element`) in three ways:
 
-### Rendering JSX
+### Render JSX
 
 ```jsx
 ctx.render(<button>Button</button>);
 ```
 
-### Rendering DOM Nodes
+### Render DOM Node
 
 ```js
 const div = document.createElement('div');
@@ -51,7 +51,7 @@ div.innerHTML = 'Hello World';
 ctx.render(div);
 ```
 
-### Rendering HTML Strings
+### Render HTML String
 
 ```js
 ctx.render('<h1>Hello World</h1>');
@@ -62,4 +62,4 @@ ctx.render('<h1>Hello World</h1>');
 - `window`
 - `document`
 - `navigator`
-- `ctx`
+- `ctx`

package/dist/ai/docs/runjs/jsx.md

@@ -1,20 +1,20 @@
 # JSX
 
-RunJS supports JSX syntax, allowing you to write code similar to React components. JSX is automatically compiled before execution.
+RunJS supports JSX; you can write code like React components, and JSX is compiled before execution.
 
-## Compilation Notes
+## Compilation
 
-- Uses [sucrase](https://github.com/alangpierce/sucrase) to transform JSX.
-- JSX is compiled into `ctx.libs.React.createElement` and `ctx.libs.React.Fragment`.
-- **No need to import React**: You can write JSX directly; it will automatically use `ctx.libs.React` after compilation.
-- When loading external React via `ctx.importAsync('react@x.x.x')`, JSX will switch to using the `createElement` method from that specific instance.
+- JSX is transformed with [sucrase](https://github.com/alangpierce/sucrase)
+- JSX compiles to `ctx.libs.React.createElement` and `ctx.libs.React.Fragment`
+- **No need to import React**: write JSX directly; the compiler uses `ctx.libs.React`
+- When loading external React via `ctx.importAsync('react@x.x.x')`, JSX uses that instance’s `createElement`
 
 ## Using Built-in React and Components
 
-RunJS includes React and common UI libraries built-in. You can access them directly via `ctx.libs` without using `import`:
+RunJS includes React and common UI libraries; use them via `ctx.libs` without `import`:
 
 - **ctx.libs.React** — React core
-- **ctx.libs.ReactDOM** — ReactDOM (can be used with `createRoot` if needed)
+- **ctx.libs.ReactDOM** — ReactDOM (e.g. for createRoot)
 - **ctx.libs.antd** — Ant Design components
 - **ctx.libs.antdIcons** — Ant Design icons
 
@@ -24,7 +24,7 @@ const { Button } = ctx.libs.antd;
 ctx.render(<Button>Click</Button>);
 ```
 
-When writing JSX directly, you don't need to destructure React. You only need to destructure from `ctx.libs` when using **Hooks** (such as `useState`, `useEffect`) or **Fragment** (`<>...</>`):
+You don’t need to destructure React for plain JSX; destructure from `ctx.libs` only when using **Hooks** (e.g. `useState`, `useEffect`) or **Fragment** (`<>...</>`):
 
 ```tsx
 const { React } = ctx.libs;
@@ -38,11 +38,11 @@ const Counter = () => {
 ctx.render(<Counter />);
 ```
 
-**Note**: Built-in React and external React imported via `ctx.importAsync()` **cannot be mixed**. If you use an external UI library, React must also be imported from the same external source.
+**Note**: Built-in React and React loaded via `ctx.importAsync()` **must not be mixed**. If you use an external UI library, import React from the same external source.
 
 ## Using External React and Components
 
-When loading a specific version of React and UI libraries via `ctx.importAsync()`, JSX will use that React instance:
+When you load React and a UI library with `ctx.importAsync()`, JSX uses that React instance:
 
 ```tsx
 const React = await ctx.importAsync('react@19.2.4');
@@ -51,7 +51,7 @@ const { Button } = await ctx.importAsync('antd@6.2.2?bundle');
 ctx.render(<Button>Click</Button>);
 ```
 
-If antd depends on react/react-dom, you can specify the same version via `deps` to avoid multiple instances:
+If antd depends on react/react-dom, use `deps` to pin the same version and avoid multiple instances:
 
 ```tsx
 const React = await ctx.importAsync('react@18.2.0');
@@ -60,15 +60,15 @@ const { Button } = await ctx.importAsync('antd@5.29.3?bundle&deps=react@18.2.0,r
 ctx.render(<Button>Button</Button>);
 ```
 
-**Note**: When using external React, UI libraries like antd must also be imported via `ctx.importAsync()`. Do not mix them with `ctx.libs.antd`.
+**Note**: With external React, load antd and other UI libraries via `ctx.importAsync()`; do not mix with `ctx.libs.antd`.
 
-## JSX Syntax Key Points
+## JSX Basics
 
 - **Components and props**: `<Button type="primary">Text</Button>`
-- **Fragment**: `<>...</>` or `<React.Fragment>...</React.Fragment>` (requires destructuring `const { React } = ctx.libs` when using Fragment)
-- **Expressions**: Use `{expression}` in JSX to insert variables or operations, such as `{ctx.user.name}` or `{count + 1}`. Do not use `{{ }}` template syntax.
-- **Conditional Rendering**: `{flag && <span>Content</span>}` or `{flag ? <A /> : <B />}`
-- **List Rendering**: Use `array.map()` to return a list of elements, and ensure each element has a stable `key`.
+- **Fragment**: `<>...</>` or `<React.Fragment>...</React.Fragment>` (destructure `const { React } = ctx.libs` when using Fragment)
+- **Expressions**: Use `{expression}` in JSX for variables or expressions, e.g. `{ctx.user.name}`, `{count + 1}`; do not use `{{ }}` template syntax
+- **Conditional render**: `{flag && <span>Content</span>}` or `{flag ? <A /> : <B />}`
+- **List render**: Use `array.map()` and give each element a stable `key`
 
 ```tsx
 const { React } = ctx.libs;
@@ -81,4 +81,4 @@ ctx.render(
     ))}
   </ul>
 );
-```
+```

package/dist/ai/docs/runjs/model/form-block-model.md

@@ -1 +1,3 @@
-# FormBlockModel
+# FormBlockModel
+
+Form block model: the block model type for form blocks (Form, EditForm, etc.). In RunJS, when the current JS runs inside a form block, `ctx.blockModel` is often a FormBlockModel (or EditFormModel). See [ctx.blockModel](../context/block-model.md) and [ctx.form](../context/form.md) for usage.

package/dist/ai/docs/runjs/render.md

@@ -1,16 +1,16 @@
-# In-container Rendering
+# Render in Container
 
-Use `ctx.render()` to render content into the current container (`ctx.element`). It supports the following three forms:
+Use `ctx.render()` to render content into the current container (`ctx.element`) in three ways:
 
-## `ctx.render()`
+## ctx.render()
 
-### Rendering JSX
+### Render JSX
 
 ```jsx
 ctx.render(<button>Button</button>);
 ```
 
-### Rendering DOM Nodes
+### Render DOM Node
 
 ```js
 const div = document.createElement('div');
@@ -18,17 +18,17 @@ div.innerHTML = 'Hello World';
 ctx.render(div);
 ```
 
-### Rendering HTML Strings
+### Render HTML String
 
 ```js
 ctx.render('<h1>Hello World</h1>');
 ```
 
-## JSX Description
+## JSX Notes
 
-RunJS can render JSX directly. You can use the built-in React/component libraries or load external dependencies on demand.
+RunJS can render JSX directly, using either the built-in React/component library or externally loaded dependencies.
 
-### Using Built-in React and Component Libraries
+### Using Built-in React and Components
 
 ```jsx
 const { Button } = ctx.libs.antd;
@@ -36,9 +36,9 @@ const { Button } = ctx.libs.antd;
 ctx.render(<Button>Click</Button>);
 ```
 
-### Using External React and Component Libraries
+### Using External React and Components
 
-Load specific versions on demand via `ctx.importAsync()`:
+Load a specific version via `ctx.importAsync()`:
 
 ```jsx
 const React = await ctx.importAsync('react@19.2.4');
@@ -47,18 +47,18 @@ const { Button } = await ctx.importAsync('antd@6.2.2?bundle');
 ctx.render(<Button>Click</Button>);
 ```
 
-Suitable for scenarios requiring specific versions or third-party components.
+Use this when you need a specific version or third-party components.
 
 ## ctx.element
 
-Not recommended (deprecated):
+**Not recommended** (deprecated):
 
 ```js
 ctx.element.innerHTML = '<h1>Hello World</h1>';
 ```
 
-Recommended way:
+**Recommended**:
 
 ```js
 ctx.render(<h1>Hello World</h1>);
-```
+```