# @brust/runtime-dom 中文文档

规范地址：https://npmcn.com/package/%40brust/runtime-dom/

版本：2\.0\.0-alpha\.38
npm 元数据更新时间：2026-11-05T09:00:06.198Z
中文译文更新时间：2026-11-08T16:49:14.327Z
软件包许可：未声明

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40brust/runtime-dom
原文对照：https://npmcn.com/package/%40brust/runtime-dom/?lang=original
项目主页：https://brust.dev/
源码仓库：https://github.com/AssetsArt/brust

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：113 kB，44 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：0 个
- peer 依赖：react ^19\.0\.0
- 首次发布：2026-10-12T02:01:22.605Z
- 最新版本发布：2026-11-05T09:00:05.985Z
- 近 30 天下载量：6747（2026-10-09 至 2026-11-07，npm 官方下载统计）
- 已发布版本数：39（近 12 个月 39 个）

## 中文简介

暂无中文简介

## 安装

```sh
npm install @brust/runtime-dom
```

也可以使用：`pnpm add @brust/runtime-dom`、`yarn add @brust/runtime-dom`、`bun add @brust/runtime-dom`

## README

# @ brust/ runtime- down

绑定已编译客户端块的无反应浏览器运行时间( R)`defineBehavior`)到服务器上交付的 HTML 结束 `x-*` 属性. **README 是 M1c 客户端后端打印的输出格式**; 每一个 下方的行为通过测试 `test/`。零依赖性,无值,捆绑 < 18 KB (单位:千美元)`bun scripts/build.ts`) (中文(简体) ).

## 公众表面

```ts
import { signal, computed, effect, batch, untracked, defineBehavior, setChunkLoader, mount, unmount } from '@brust/runtime-dom'
```

-   信号( N)`test/signal.test.ts`: 写作 `Object.is`\- 分裂; `computed` 懒惰而隐匿; `effect(fn)` 继续运行 更改,返回的函数是每次重新运行和处理前的清理; `batch` (a) 将影响推迟到其结束; `untracked` 阅读时没有签名.
-   `defineBehavior(name, factory)`数字 : `factory({ el, props, effect, onCleanup, ref })` 返回实例 **成员** (符号、计算、函数、平面值). `props` 是一个 **信号** 的道具对象。 一个 `init` 成员,如果是职能,在工厂之后运行.
-   `setChunkLoader(load)`: 每个未知行为名称呼叫一次; 装入器需要呼叫 `defineBehavior(name, …)`。默认:无(主机等待).
-   `mount(root = document.body)`: 偶数; 挂载每个 `[x-data]` 按文档顺序( 父母优先) 并开始 a `MutationObserver` 以挂载添加的主机并处理已删除的主机(一个已卸载但重新插入的主机将被处理,然后重新挂载). `unmount(root)` 处理实例 `root` 并阻止观察者。 一个投掷的工厂被登录,其实例被丢弃;其他主机仍在上架.

## 指令值语法

```
value    := path (":" bindings)?
path     := ident ("." ident)*          // looked up on the instance members; a signal/computed hop is unwrapped
bindings := ident ("," ident)*          // loop-scope names (x-for item/index); the member must be a function and is called with them
```

其它任何东西`x + 1`, (中文(简体) ), `fn()`)不解析:警告一经记录,DOM即为解析。 未知成员的行为相同.

## 属性

指令只来自编译器输出: 编译器从不打印一个 `x-*` 在 JSX 组件中写入属性( 警告) `reserved-attr`),且运行时间不包含在内 `dangerouslySetInnerHTML` 标值( e)`x-html` 编号 : `x-raw`)或反应岛(`<brust-island>`) (中文(简体) ).

-   **`x-data="name"`**:每个主机一个实例. 被巢被宿主束缚着自己的情况,而不是父母的行走者.
-   **`x-props='{"json":1}'`**: 种子 `ctx.props`。无效的 JSON 警告和种子 `{}`。 。 。 .
-   **`x-props-bind="member[:binding]"`**:在孩子的宿主上,将孩子的 `props` 向最近的祖先成员发出反应信号 (物体,一般为: `computed`; 函数值通过). 内部 `x-for` 该行的瞄准镜提供绑定。 如果父母尚未挂载 (充气还装入)孩子在父母上马时会连接起来. 没有祖先:警告,保持 `x-props` 种子 .
-   **`x-text="value"`**: 组 `textContent`· ; `null`编号 :`undefined` → `''`。 。 。 .
-   **`x-html="value"`**: 组 `innerHTML` (加价,未脱逃); `null`编号 :`undefined` → `''`。只由编译器发送,用于 `dangerouslySetInnerHTML` 其价值在第一次涂料后会发生变化;作者对加价(合同与反应相同)进行消毒. 初绘检查比较解析的标记,所以等同的拼写不警告.
-   **`x-show="value"`**数字 : `style.display = ''` 当真理降临的时候, `'none'` 否则.
-   **`x-if="value"`**: 该元素被替换为 a `<!--x-if-->` 注释锚地;在它后面插入一个克隆,同时真实并删除其它内容. 嵌入 `x-data` 克隆上载/处理中的主机 。 服务器 HTML 在错误时省略元素 .
-   **`x-bind-<attr>="value"`**数字 : `class` → `className`· ; `value` → `.value`· ; `disabled checked selected readonly required hidden open multiple` − 财产+属性(在场/缺席); 其它东西: `null`编号 :`undefined`编号 :`false` 删除属性, 否则 `setAttribute`。 。 。 . **拒绝** (警告一次): `on*` 财务报告和审定财务报表 `srcdoc` 属性,以及 `href src action formaction poster data`,任何其解析方案不是 `http(s):`编号 :`mailto:`编号 :`tel:` (相对的URL是罚款的; `java\tscript:` 是因为 URL 是解析的,而不是模式匹配的.
-   **`x-on-<event>="member[:binding]"`**:先给有约束范围值的成员打电话,然后是事件: `pick(item, index, event)`。 。 。 .
-   **`x-model="member"`**:成员必须是可写出信号(else warnings). 文本类似 : `input` 活动 qq `.value`; 复选框 : `change` 布尔 `.checked`· ; 无线电: `change` 写入 `.value` 当检查时, 信号集 `.checked`; 单 `select`数字 : `change` ↔ `.value`,在选项改变时重新应用. `select[multiple]` 不支持(警告).
-   **`x-for="item[, index] in source by keyFn"`**数字 : `source := path (":" bindings)?` 是成员路径到一个阵列(或信号/计算出一个阵列);带有绑定符的成员是一个与外环名称相呼应的函数,因此一个被嵌入的列表读取了外行等. `<tr x-for="row in rows by k1"><td x-for="c in cells:row by k2">`· ; `keyFn` 是项目的一个成员函数. 服务器交接的兄弟行 `x-for` 为: **通过的顺序** 第一次运行时; 以零行显示服务器输出 a `<!--x-for-->` 评论后加一条 `hidden` 模板元素 (载运) `x-for`)是被克隆的。 行由密钥调节( 移动保留 DOM 身份); 重新使用的项目/ 索引被更改的行重新运行其绑定符 。 重复密钥警告一次并返回索引身份. 要件 `x-for` 由该指令拥有: `x-*` 属性绑定在行上,有范围 `{ item, index }`。 。 。 .
-   **`x-ref="name"`**数字 : `ctx.ref('name').current` 是挂载后的元素, `null` 处置后.

## 第一绘规则

在挂载上没有重递: 服务器 HTML 是初始状态 。 一个绑定器只写DOM,当它的效果在变化后重新运行时, **或者说** 初始时 `x-text` 编号 : `x-html` 值与服务器文本不同, 然则它能改正,能警告一次`first-paint mismatch …`: 不匹配是运行时间不能隐藏的编译器错误 。 挂起后创建的元素( 新行, `x-if` 克隆人)永远不要绊倒这个支票.

## 盖茨

`bun test` • 妇女 `bunx tsc --noEmit -p .` (单位:千美元)`bun check` · · 1.4.3 `bun scripts/build.ts` (如果捆绑进口失败).

## 反应岛屿

服务器绘制反应级组件为 `<brust-island data-id="<componentId>" x-props='<json>'>…server HTML…</brust-island>`。 。 。 . 岛上的块在不导入运行时间的情况下登记其水合物功能:

```
;(globalThis.__brustIslands ||= []).push(['<componentId>', (host, props) => hydrateRoot(host, <Comp {...props}/>)])
globalThis.__brustIslandReady?.()
```

当浏览器闲置时,运行时会给每个主机水分一次(`requestIdleCallback`,则 `setTimeout(…, 1)`)和设置 `data-hydrated="1"` 在成功方面。 运行时间之间的装入顺序 脚本和岛块不重要 坏东西 `x-props` JSON 水合物与 `{}` 你应当警告众人; 报告投掷的水合物 `console.error` 而服务器 HTML 保留。 这是唯一的 m2(Spec S12)中的战略.

## 存储

0.1.x号 `brustjs/store` API 在同一反应核心上,指令使用(一个图,甚至跨模块副本: 跟踪状态生活 `globalThis[Symbol.for('brust.reactive.ctx')]`) (中文(简体) ).

-   `@brust/runtime-dom/store` (还有运行时间条目,和 `@brust/core/store`: `signal computed effect batch untracked isSignal isComputed defineStore` 类型 `Signal Computed Dispose StoreHandle Snapshot`。 。 。 .
-   `defineStore(name, factory)` 返回控点 : `store.field`, (中文(简体) ), `store.snapshot()`, (中文(简体) ), `store.serialize()`, (中文(简体) ), `store.hydrate(state)`, (中文(简体) ), `store.subscribe(cb)`. 第一工厂赢得每个名称.
-   浏览器将每个名称保留一个实例 `globalThis[Symbol.for('brust.stores')]`。第一个访问a 名称种子它来自 `<script type="application/json" data-brust-store="NAME">` (懒,一回.
-   `@brust/runtime-dom/store/react` (另见: `@brust/core/store/react`: `useStore(store)` 通过 `useSyncExternalStore`。反应是一种 **选项对等点**,仅由此子路径导入;运行时捆绑会保留 反应无碍.
-   `@brust/runtime-dom/store/internal`: Bun工人使用的服务器-resolver钩和串行式帮助器. 不入大众地表.

## 特性模块(L33、F139)

运行时间是一个核心加功能模块,因此一页只加载其组件使用的内容,而客户端JS不会随着编译器学习更多的回放而增长.

-   `@brust/runtime-dom/core` (单位:千美元)`src/core.ts`信号, `defineBehavior`编号 :`setChunkLoader`, (中文(简体) ), `mount`编号 :`unmount`,绑定物登记簿(`BINDERS`)和内部特征需要(`src/core-api.ts`) (中文(简体) ). 它不知道什么是指示.
-   `@brust/runtime-dom/features/<name>` (单位:千美元)`src/features/*.ts`: `basics` (单位:千美元)`x-text`, (中文(简体) ), `x-show`, (中文(简体) ), `x-bind-*`, (中文(简体) ), `x-on-*`, (中文(简体) ), `x-ref`, (中文(简体) ), `if`, (中文(简体) ), `for`, (中文(简体) ), `model`, (中文(简体) ), `html`, (中文(简体) ), `island` (反应岛水合胶. 一个特性在核心输入和输入时仅通过 `core-api`; 在浏览器中构建 `core-api` 是共享的核心文件,所以每页有一个信号图和一个绑定器登记册.
-   `@brust/runtime-dom` (单位:千美元)`src/index.ts`)是核心+每个特性,用于测试和非分裂消费者. 浏览器构建从不使用.

**新特色的规则.** 微指令几乎每个互动页面都使用相机 `basics`。在少数页面至少使用 1 KB gzip OR 时,其他任何组件都可获得 OMN 模块 : `store`, (中文(简体) ), `island`, (中文(简体) ), `if`编号 :`for`编号 :`model`编号 :`html` (c) 未来每个特性(文字、门户、焦点陷阱.)。 不添加特性到 `basics` 或要保存文件的核心; 将其添加为模块,编译器只请求使用它的道路。 CI字节预算(核心+) `basics`)坚持到底.

## 常见问题

### 如何安装 @brust/runtime-dom？

在项目目录运行 npm install @brust/runtime-dom，或使用 pnpm add / yarn add / bun add。

### @brust/runtime-dom 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @brust/runtime-dom 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @brust/runtime-dom 可以商用吗？

@brust/runtime-dom 使用 未声明 许可。package\.json 没有声明许可证。没有许可证的代码默认保留全部权利，商用前请联系作者或查看仓库中的 LICENSE 文件。以上为概括，不构成法律意见，请以许可原文为准。

### @brust/runtime-dom 的下载量有多少？

根据 npm 官方下载统计，@brust/runtime-dom 在 2026/10/09 – 2026/11/07 这 30 天内被下载 6,747 次，日均约 225 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @brust/runtime-dom 还在维护吗？

最新版本 2\.0\.0-alpha\.38 发布于 2026/11/05（3 天前）；至今共发布 39 个版本，其中过去 12 个月发布了 39 个；首次发布于 2026/10/12。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。