# @expressive/dom 中文文档

规范地址：https://npmcn.com/package/%40expressive/dom/

版本：0\.12\.1
npm 元数据更新时间：2026-11-11T17:06:03.733Z
中文译文更新时间：2026-11-14T06:18:34.062Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40expressive/dom
原文对照：https://npmcn.com/package/%40expressive/dom/?lang=original
项目主页：https://github.com/gabeklein/expressive#readme
源码仓库：https://github.com/gabeklein/expressive

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

- 包体积（解压后）：319 kB，20 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- Node.js 要求：\>=20
- 运行依赖：0 个
- peer 依赖：vite \>=5，@expressive/mvc ^0\.94\.3
- 首次发布：2026-09-28T03:51:45.421Z
- 最新版本发布：2026-11-11T17:06:03.351Z
- 近 30 天下载量：2501（2026-10-14 至 2026-11-12，npm 官方下载统计）
- 已发布版本数：17（近 12 个月 17 个）

## 中文简介

MVC-内置 DOM 渲染器.

## 安装

```sh
npm install @expressive/dom
```

也可以使用：`pnpm add @expressive/dom`、`yarn add @expressive/dom`、`bun add @expressive/dom`

## README

# @ 表达/ dom

MVC-本土JSX为浏览器DOM渲染.

* * *

`@expressive/dom` 使表达式MVC不作回放或Preact. 函数组件是渲染器无状态:它们将道具和MVC快照投射到DOM中,同时 `Model.get()` 用品依赖跟踪。 所属国家生活在班级中----一个构成部分领域或 `<Component for>`。 。 。 .

```bash
npm install @expressive/mvc @expressive/dom
```

```jsonc
{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "@expressive/dom"
  }
}
```

```tsx
import { Model, Component } from '@expressive/mvc';
import { render } from '@expressive/dom';

class Counter extends Model {
  count = 0;
  increment() {
    this.count++;
  }
}

function Count() {
  const { count, increment } = Counter.get();
  return <button onClick={increment}>{count}</button>;
}

const unmount = render(
  <Component for={Counter}><Count /></Component>,
  document.getElementById('app')!
);
```

`style` 递归地构成有条件的类符号和内含声明. 字符串成为类;对象将从左到右并渲染入内. 使用 `className` 用于构成以外的浏览器特定类。 这个 `class` 不支持属性拼写和 CSS 声明字符串.

```tsx
<button
  className="external-widget"
  style={[styles.button, active && 'active', { width }]}
/>
```

`style` 自动到达其主机根,包括通过组件、碎片、提供者、门户和收集边界。 一个片段应用到每个主机根上. 前进的样式超越了根本身,最外层的呼叫者获胜. 读取其 `style` prop在渲染时拥有放置,没有转发. 它接收一个被冻结的呼叫者内在声明的对象—— 传播,取出或自由合并; 呼叫者的班级与它一起旅行. `className` 仅适用于要件.

组件可登记不可变的地图 `style(Component, map)`A级 `_name` 条目是一条规则,由真理应用 `_name` 属性或匹配的主机标签,并作为以源命名的类释放; 嵌入在规则内,它打开了后人范围。 组件名称与时俱进 - 它们无法幸存。 赤色密钥是声明,或宏调用,一个宏拥有名称,而位于地图上方的那些则构成适用于每个组件主机根的基规则. macros是一种方法 `Style` 子类,其 `use()` 返回时 `style` 解析它们; 将地图传给 `use()` 对它样式的每个组件,在每一个组件本身的下方,都持有规则;地图内的一个函数是一个值,而不是一个定义. `$name` 键应用一个由 $1 命名的条件 `$name` 字段,或设置 CSS 变量 `$name` 字段声明 - 其价值为 `:root` 默认,或 a `--name` ; 地图可能是接收到的函数 `var()` 提到他们. `_` 属性永远不会到达 DOM,以及 `0` 或者说 `''` 留下一条规则。 地图从未到达子组件内;只有类链继承.

```tsx
function Button({ active }: { active: boolean }) {
  return <button _active={active}>Save</button>;
}

style(Button, {
  padding: '8px',
  _active: { fontWeight: 700 }
});
```

组件第一次渲染前的注册样式 。 一个密钥在最顶端定义, 子类中先解决; 一个宏返回自己的名字会降入下一个定义, 然后通过任意 `default(value, key)` 方法。 未处理的密钥到达主机, 主机会加入数组并拒绝函数和对象—— 单位属于宏, 永远不会猜测 .

内线风格总是比班级好;在班级中,呼叫者的规则比被呼叫者的规则好,而规则则通过更多的组件来传递 `style` 道具胜出 - 独立于渲染顺序. `false`, (中文(简体) ), `null`,以及 `undefined` 省略条目; `0` 仍然是宏观的争论.

`Component` 保留适配器的语义: 字段读取 `render()` 是由依赖关系、自有实例挂起并用 DOM 范围清理,外部激活实例可以直接放置而不转移所有权.

第一次发布包括密钥调和,本土事件,裁判,SVG, `<Component for>` 供应商,直接 `has` 编号 : `map` 收集渲染、门户、懒惰组件、错误和悬念倒置、生成组件外观规则、保留承诺内容,同时 `pending()` 工作暂停。 它刻意排除了独立的钩子,合成事件,备忘录包装,SSR,水合,和建筑时态取出.

见 [dOM 渲染器指南](https://npmcn.com/package/%40expressive/dom/skills/expressive-dom/SKILL.md) 对于API和制约。 这个软件包目前针对浏览器DOM;本土渲染和构建时的表达-jsx提取不包括在内.

## 许可证

麻省理工学院

## 常见问题

### @expressive/dom 是什么？

MVC-内置 DOM 渲染器\.

### 如何安装 @expressive/dom？

在项目目录运行 npm install @expressive/dom，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：@expressive/mvc（^0\.94\.3）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @expressive/dom 支持 TypeScript 吗？

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

### @expressive/dom 支持 ESM 还是 CommonJS？

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

### @expressive/dom 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=20。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @expressive/dom 可以商用吗？

@expressive/dom 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @expressive/dom 的下载量有多少？

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

### @expressive/dom 还在维护吗？

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