翻译:

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

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

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

写出一个渲染器

让我们为斯莱克写出一个渲染器! Slack有一个简单的消息格式,看起来有点像马克下(但不是). 我们用他们找到的文件 这里 来写这个渲染器.

首先,安装软件包:

npm install --save @atjson/renderer-hir

并导入到文件的顶部 :

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

export default class SlackRenderer extends Renderer {}

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

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

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

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

让我们开始写作测试,以验证我们写作的作品. 我们用这个例子 贾斯特 作为我们的测试框架.

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

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!");
  });
});

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

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个测试失败.

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

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 生成标记(由你决定如何写作).

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

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

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("");
  }
}