toolbelt-message-renderer

This is the package used by VTEX's toolbelt to render some messages. This includes chalk for text coloring and formating, emojic for emojis and boxen for creating terminal text boxes.

Install

$ yarn add @vtex/toolbelt-message-renderer

Usage

import { TemplateRenderer } from '@vtex/toolbelt-message-renderer'

const nodeToRender = {
  type: 'box',
  boxConfig: {
    padding: 2,
    borderStyle: 'round',
  },
  content: '{bold Hello} my {bgBlue.white friends} {{emoji.100}}',
}

console.log(TemplateRenderer.getSingleton().renderNode(nodeToRender))

A NodeToRender can be of two types: text or box. In both cases it's necessary to create a content field, with text formatted using chalk templating syntax - You can use the formatters specified in here, for example:

{
  type: 'text',
  content: '{bold.red Red and bold text} unformatted text {blue blue text}'
}

In content you can also use emojis specified in here (you can also search for emojis there) - using emojis is simple, just type {{emoji.emojiName}}:

{
  type: 'text',
  content: '{{emoji.100}} - {{emoji.wink}} - {{emoji.thumbsUp}}'
}

In text type you only have to specify the field content. In case of box you can specify boxConfig, which accepts options from boxen, for example:

{
  type: 'box',
  boxConfig: {
    margin: 1,
    padding: 1,
    borderColor: 'yellow',
  },
  content: 'Box text content - {red.bold RED_WOLOLO!!!}'
}

Examples

These examples were rendered using toolbelt-config-cli, specifically the toolbelt-conf message:preview command. It receives a json, so the following examples are represented in json format:

{
  "example1": {
    "type": "box",
    "boxConfig": {
      "margin": 1,
      "padding": 1,
      "borderColor": "yellow"
    },
    "content": "Box text content - {red.bold RED_WOLOLO!!!}"
  }
}

Will render:

{
  "example2": {
    "type": "text",
    "content": "{bold.bgBlue Hello} world{red !} {{emoji.thumbsUp}}"
  }
}

Will render:

(Note that example1 and example2 and their presence in the rendered images are specifics to how toolbelt-config-cli works - it's not affected by toolbelt-message-renderer)