Formatter

An i18n formatter for locale-aware number, date and text presentation.

Import

import { Formatter } from "@schukai/monster/source/i18n/formatter.mjs";

Source

View source code

Package

@schukai/monster

Since

1.26.0

Formatter extends the text formatter with translation lookup. It resolves keys through a Translations instance and still supports the same parameter and callback pipeline as the base text formatter.

Use it when translated text is assembled at runtime instead of written as static strings. That covers UI labels, parameterized content, templated messages and other cases where locale-aware text needs to stay in one formatting pipeline.

The formatter recognizes i18n{...} by default, rewrites that marker into a pipe call and delegates the rest of the work to the text formatter. This means translation lookup can be combined with parameter replacement instead of being handled in a separate preprocessing step.

Resolve One Translation Key Through The I18n Marker

import { Formatter } from "@schukai/monster/source/i18n/formatter.mjs";
import { Translations } from "@schukai/monster/source/i18n/translations.mjs";

const translations = new Translations("en");
translations.setText("welcome", "Welcome back");

const formatter = new Formatter({}, translations);
const output = document.getElementById("formatter-basic-output");

document.getElementById("formatter-basic-run").addEventListener("click", () => {
    output.textContent = formatter.format("i18n{welcome}");
});

Open in playground

Combine Translated Text With Formatter Parameters

import { Formatter } from "@schukai/monster/source/i18n/formatter.mjs";
import { Translations } from "@schukai/monster/source/i18n/translations.mjs";

const translations = new Translations("en");
translations.setText("release_status", "Release ${name} is ${state}");

const formatter = new Formatter({}, translations);
const output = document.getElementById("formatter-parameter-output");

document.getElementById("formatter-parameter-run").addEventListener("click", () => {
    output.textContent = formatter.format("i18n{release_status::name=4.130.1::state=ready}");
});

Open in playground

Configure Custom Formatter Markers For Translated Strings

import { Formatter } from "@schukai/monster/source/i18n/formatter.mjs";
import { Translations } from "@schukai/monster/source/i18n/translations.mjs";

const translations = new Translations("en");
translations.setText("headline", "Deployment running");

const formatter = new Formatter({}, translations, {
    marker: {
        open: ["t["],
        close: ["]"],
    },
});

const output = document.getElementById("formatter-marker-output");

document.getElementById("formatter-marker-run").addEventListener("click", () => {
    output.textContent = formatter.format("t[headline]");
});

Open in playground

Exported

Formatter

Derived from

TextFormatter

Options

The Options listed in this section are defined directly within the class. This class is derived from several parent classes. Therefore, it inherits Options from these parent classes. If you cannot find a specific Options in this list, we recommend consulting the documentation of the TextFormatter.

Option

Type

Default

Description

object

marker

array

marker.open=["i18n{","${"]

array

marker.close=["${"]

object

parameter

string

parameter.delimiter="::"

string

parameter.assignment="="

object

callbacks

function

callbacks.i18n=()=>{}

Properties

The Properties listed in this section are defined directly within the class. This class is derived from several parent classes. Therefore, it inherits Properties from these parent classes. If you cannot find a specific Properties in this list, we recommend consulting the documentation of the TextFormatter.

Methods

The methods listed in this section are defined directly within the class. This class is derived from several parent classes. Therefore, it inherits methods from these parent classes. If you cannot find a specific method in this list, we recommend consulting the documentation of the TextFormatter.

Constructor

constructor(object,translation,options)

Parameters

object {object}: object
translation {translations}: translation
options {object}: [options]

Throws

{TypeError} value is not an object

Default values for the markers are ${ and }

Static methods

[instanceSymbol]()3.27.0

Returns

{symbol}

This method is called by the instanceof operator.

Other methods

format(text)

Parameters

text {string}: text

Returns

{string}

Throws

{TypeError} value is not a string
{Error} too deep nesting
{Error} key not found
{Error} the closing marker is missing

Events

This component does not fire any public events. It may fire events that are inherited from its parent classes.

The current width of the area is too small to display the content correctly.