# @vtex/toolbelt-message-renderer

> Utility for rendering message templates for VTEX's toolbelt

Latest version **0.0.1** (published 2020-03-24) · 0 weekly downloads

## Install

```sh
npm install @vtex/toolbelt-message-renderer
pnpm add @vtex/toolbelt-message-renderer
yarn add @vtex/toolbelt-message-renderer
bun add @vtex/toolbelt-message-renderer
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.1 |
| Published | 2020-03-24 |
| First published | 2020-03-22 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 6.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | afonsopraca, alcar, amoreira, analuizamtg, andreldsa, angoncal, anitavincent, arthurepc, arturpimentel, athoscouto, augusto.lazaro, augustob, bivillar, breno, brunohq, brunojdo, cmdalbem, daher, dhasuda, diegoximenes, emersonlaurentino, ericreis, estacioneto, felippenardi, firstdoit, guilhermebruzzi, gustavorosolem, iago, igorbrasileiro, igorframos, jeymisson, jgfidelis, kaisermann, kevinchevallier, klynger, lbebber, lucasecdb, lurian, marcoskwkm, marcosvcp, matheusps, pedromtec, rafabac, rafarubim, rerissondaniel, salesfelipe, steckhelena, tergol, thayannevls, thiagomurakami, tiagonapoli, tlgimenes, victorges, victorhmp, viniagostini, vtexlab, vwraposo |

## Links

- npm: https://www.npmjs.com/package/@vtex/toolbelt-message-renderer
- npm.io page: https://npm.io/package/@vtex/toolbelt-message-renderer

## Dependencies (4)

- [boxen](https://npm.io/package/boxen.md) ^4.2.0
- [chalk](https://npm.io/package/chalk.md) ^3.0.0
- [emojic](https://npm.io/package/emojic.md) ^1.1.15
- [mustache](https://npm.io/package/mustache.md) ^4.0.1

## Recent versions

- 0.0.1 (latest) — 2020-03-24
- 0.0.1-beta.0 (beta) — 2020-03-22

## README

# toolbelt-message-renderer

This is the package used by VTEX's toolbelt to render some messages. This includes [`chalk`](https://github.com/chalk/chalk) for text coloring and formating, [`emojic`](https://github.com/IonicaBizau/emojic) for emojis and [`boxen`](https://github.com/sindresorhus/boxen) for creating terminal text boxes.

## Install

```
$ yarn add @vtex/toolbelt-message-renderer
```

## Usage

```ts
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](https://github.com/chalk/chalk#tagged-template-literal) - You can use the formatters specified in [here](https://github.com/chalk/chalk#styles), for example:

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

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

```ts
{
  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](https://github.com/sindresorhus/boxen#options), for example:

```ts
{
  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`](http://github.com/vtex/toolbelt-config-cli), specifically the `toolbelt-conf message:preview` command. It receives a `json`, so the following examples are represented in `json` format: 

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

![](./images/example1.png)

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

![](./images/example2.png)

(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`)

---
_Source: https://npm.io/package/@vtex/toolbelt-message-renderer · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._