Guide

What is txtag?

This is a small and lightweight library that helps you compile simple text templates. It can be useful for interpolation in dictionaries (e.g. i18n) or dynamic data substitution in text strings.

Installation

Via package manager

npm

npm install --save-dev @fluejs/txtag

yarn

yarn add -D @fluejs/txtag

Usage

To compile a template, txtag provides the compile method, which takes a template with expressions as the first argument and a data object as the second argument.

import {compile} from '@fluejs/txtag';

compile('Hello, {name}!', { name: 'Joe' });

// result: "Hello, Joe!"

Expressions can also be paired and contain content (the nesting of expressions is unlimited).

import {compile} from '@fluejs/txtag';

compile('Hello, {strong}{name}{/strong}!', {
    name: 'Joe',
    strong: ({ body }) => `<strong>${body}</strong>`,
});

// result: "Hello, <strong>Joe</strong>!"

Expressions can also have arguments. Arguments are accessible within the value function. The delimiter for arguments is the | symbol.

import {compile} from '@fluejs/txtag';

compile('Hello, {link}{name}{/link}[https://github.com]!', {
    name: 'Joe',
    link: ({ body, args }) => `<a href="${args?.[0]}">${body}</a>`,
});

// result: "Hello, <a href="https://github.com">Joe</a>!"

import {compile} from '@fluejs/txtag';

compile('Here are three values: {argsExample}[1|2|3]', {
    argsExample: ({ args }) => args?.join(', '),
});

// result: Here are three values: 1, 2, 3

Using with Vue

txtag/vue provides the TxTag component, which allows expressions to be replaced with an attribute or a slot (the name corresponds to the name of the expression).

NOTE

If you are rendering a paired expression, you will most likely need to use the Component from the scoped slot, which will recursively render the content.

<component :is="Component" />

Rendered with TxTag Vue component

Article

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam animi fugiat in laboriosam laborum maxime, modi mollitia odio porro quos saepe tempore temporibus veritatis voluptatem, voluptatibus. Atque ea in neque?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam animi fugiat in laboriosam laborum maxime, modi mollitia odio porro quos saepe tempore temporibus veritatis voluptatem, voluptatibus. Atque ea in neque?

Written by No Name