intl-schematic

A tiny library (3kb, zero-dependency) that allows to localize and format strings with infinitely expandable functionality.

• 🦺 Full type-safety: full autocomplete on translation keys, typed translation parameters and more;

• 🎄 Tree-shakable: only take what you need;

• 🔌 Pluginable: extend any processing step without limits;

• 📃 JSON-validation using a JSON-schema: intellisense and popup hints right in the translation document;

• 🚫 No string-interpolation: translation strings will never be processed or mangled by-default, so all unicode symbols are safe to use;

• Define a translation document factory

• Create a translator function (t())

• Use a translator function

• Add default plugins and processors

Usage

Comprehensive documentation is in progress.

See a simplified example below and don't be afraid to take a look into the sources to find out more.

Define a translation document factory

const getDocument = () => ({
  "hello": "Hello, World!"
});

Create a translator function (t())

import { createTranslator } from 'intl-schematic';

const t = createTranslator(getDocument);

// OR

const t = createTranslator(getDocument, [
  // Add optional plugins here
  // they will be applied to translations in corresponding order
]);

Use a translator function

console.log(t('hello')); // `Hello, World!`

Add default plugins and processors

Plugins allow to infinitely expand the functionality of intl-schematic. To find out more, see the main plugins readme.

You might want to install the default plugin collection:

npm i @intl-schematic/plugin-defaults

These allow to use standard Intl features, like DateTimeFormat, PluralRules and DisplayNames, as well as cross-reference keys and many other features.

import { createTranslator } from 'intl-schematic';
import { defaultPlugins, defaultProcessors } from '@intl-schematic/plugin-defaults';

const getDocument = () => ({
  price: {
    // Processor name - number - means process with Intl.NumberFormat
    number: {
      // Intl.NumberFormat options
      style: "currency",
      currency: "USD",
      currencyDisplay: "symbol",
      trailingZeroDisplay: "stripIfInteger"
    },
    input: 0 // fallback
 }
});

const getLocale = () => new Intl.Locale('en');

const t = createTranslator(getDocument, defaultPlugins(
  getLocale
  defaultProcessors
));

console.log(t('price', 123)); // "$123"