# @atjson/renderer-hir 中文文档

规范地址：https://npmcn.com/package/%40atjson/renderer-hir/

版本：0\.27\.0
npm 元数据更新时间：2026-08-10T19:59:50.477Z
中文译文更新时间：2026-11-07T02:10:16.464Z
软件包许可：Apache-2\.0

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

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

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

- 包体积（解压后）：249 kB，13 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：1 个
- peer 依赖：@atjson/document \>= 0\.29\.0 \< 1
- 首次发布：2017-10-04T20:05:44.061Z
- 最新版本发布：2026-08-10T07:26:35.807Z
- 近 30 天下载量：16915（2026-10-07 至 2026-11-05，npm 官方下载统计）
- 已发布版本数：112（近 12 个月 1 个）

## 中文简介

分级生成文件的通用工具

## 安装

```sh
npm install @atjson/renderer-hir
```

也可以使用：`pnpm add @atjson/renderer-hir`、`yarn add @atjson/renderer-hir`、`bun add @atjson/renderer-hir`

## README

# 翻译:

这个渲染器的设计是为了向HTML,markdown,DOM等分级格式渲染出.

渲染者使用发电机将内容放回注解周围,这样每次注解都会对正在发生的事情有上下文的认识. 在其注释上键入了渲染函数 `type` (或分类) `type`) (中文(简体) ). 此外,还有3个特殊功能可以被推翻:

-   `*renderAnnotation`,将要求 _每个_ 注释(甚至未知的说明)
-   `*root`,这是正在提供文档的根节点。 超越这一点,就可以对产出作相应的固定(例如, `join`旋转 `yield`当字符串输出为字符串时的ed内容)
-   `text`,将要求所有文本节点.

## 写出一个渲染器

让我们为斯莱克写出一个渲染器! Slack有一个简单的消息格式,看起来有点像马克下(但不是). 我们用他们找到的文件 [这里](https://get.slack.help/hc/en-us/articles/202288908-Format-your-messages) 来写这个渲染器.

首先,安装软件包:

```bash
npm install --save @atjson/renderer-hir
```

并导入到文件的顶部 :

```ts
import Renderer from "@atjson/renderer-hir";

export default class SlackRenderer extends Renderer {}
```

我们有一个渲染器,它将返回我们通过的文件的文本! (对! )

让我们让渲染器返回一个字符串而不是一系列字符串:

```ts
import Renderer from "@atjson/renderer-hir";

export default class SlackRenderer extends Renderer {
  *root() {
    let text = yield;
    return text.join("");
  }
}
```

让我们开始写作测试,以验证我们写作的作品. 我们用这个例子 [贾斯特](https://jestjs.io/) 作为我们的测试框架.

我们要使用 `OffsetSource` 作为我们的源文件和一套说明,因为它得到了Slack支持的基本语法的外出支持.

```ts
import OffsetSource from "@atjson/offset-annotations";
import SlackRenderer from "../src";

describe("SlackRenderer", () => {
  test("it returns text", () => {
    let doc = new OffsetSource({
      content: "Hello!",
      annotations: [],
    });

    expect(SlackRenderer.render(doc)).toBe("Hello!");
  });
});
```

我们从他们的文档中补充一些测试案例:

```ts
import OffsetSource, { Bold, Italic, Strikethrough } from '@atjson/offset-annotations';
import SlackRenderer from '../src';

describe('SlackRenderer', () => {
  test('it returns text', () => { ... });

  test('bold', () => {
    let doc = new OffsetSource({
      content: 'To bold, surround your text with asterisks: your text',
      annotations: [new Bold({ start: 44, end: 53 })]
    });

    expect(SlackRenderer.render(doc)).toBe('To bold, surround your text with asterisks: *your text*');
  });

  test('italic', () => {
    let doc = new OffsetSource({
      content: 'To italicize, surround your text with underscores: your text',
      annotations: [new Italic({ start: 51, end: 60 })]
    });

    expect(SlackRenderer.render(doc)).toBe('To italicize, surround your text with underscores: _your text_');
  });

  test('strikethrough', () => {
    let doc = new OffsetSource({
      content: 'To strikethrough, surround your text with tildes: your text',
      annotations: [new Italic({ start: 50, end: 59 })]
    });

    expect(SlackRenderer.render(doc)).toBe('To strikethrough, surround your text with tildes: ~your text~');
  });
});
```

运行测试应导致3个测试失败.

现在我们有一些失败的测试案例, 让我们回到我们的渲染器 并实施大胆的标记:

```ts
import Renderer from "@atjson/renderer-hir";

export default class SlackRenderer extends Renderer {
  *Bold() {
    let text = yield;
    return `*${text.join("")}*`;
  }

  *root() {
    let text = yield;
    return text.join("");
  }
}
```

我们用 `Bold` 这里作为公约来匹配注释的类名. 也可以用钥匙 `bold` 生成标记(由你决定如何写作).

现在进行测试应该有两次测试失败

既然我们掌握了第一个 剩下的两个测试

```ts
import Renderer from "@atjson/renderer-hir";

export default class SlackRenderer extends Renderer {
  *Bold() {
    let text = yield;
    return `*${text.join("")}*`;
  }

  *Italic() {
    let text = yield;
    return `_${text.join("")}_`;
  }

  *Strikethrough() {
    let text = yield;
    return `~${text.join("")}~`;
  }

  *root() {
    let text = yield;
    return text.join("");
  }
}
```

## 常见问题

### @atjson/renderer-hir 是什么？

分级生成文件的通用工具

### 如何安装 @atjson/renderer-hir？

在项目目录运行 npm install @atjson/renderer-hir，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：@atjson/document（\>= 0\.29\.0 \< 1）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @atjson/renderer-hir 支持 TypeScript 吗？

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

### @atjson/renderer-hir 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @atjson/renderer-hir 可以商用吗？

@atjson/renderer-hir 使用 Apache-2\.0 许可。宽松许可：允许商业使用、修改和再分发，并附带明确的专利授权；分发时需保留许可与 NOTICE 文件，修改过的文件要注明改动。以上为概括，不构成法律意见，请以许可原文为准。

### @atjson/renderer-hir 的下载量有多少？

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

### @atjson/renderer-hir 还在维护吗？

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