Git Product home page Git Product logo

tmsg's Introduction

tmsg

Truly Type-safe internationalization library for TypeScript

Status: the project is ready to use and should work for small to medium apps. I have only tried on small projects so please give it a try! if you encounter issues, please report them via GitHub.

Features

  • Type-safe templates without boilerplate.
  • CLI to automatically find strings to translate in your code.
  • Tiny runtime.
  • All features from MessageFormat.
  • Easy to export for translation as strings are stored in JSON.

Problem

When translating text strings in a TypeScript app, it is possible for parameters to be undefined or misnamed, leading to errors:

const myString = 'Hello, {NAME}!';
console.log(translate(myString, { NAME: 'Tanek' }));

Over time, the app grows, the code is changed, and an undefined gets passed instead of the name. Or perhaps the NAME is renamed to FIRST_NAME in the parameter's list but you forget to update the string.

Solution

To use tmsg, install the @tmsg/runtime package:

npm i @tmsg/runtime --save

Declare your strings with the t function, using the MessageFormat syntax, with the addition of a % character to indicate string parameters:

import { configure } from '@tmsg/runtime';

// Configure your locale and where the locales are stored.
const i18n = configure({
  locales: ['en', 'de'],
  rootURL: pathToFileURL(process.cwd() + '/dist/locales/'),
});

// Get a locale-specific `t` function.
const t = await i18n.buildT('en');

console.log(t('Hello, {%NAME}!', { NAME: 'Tanek' })); // compiles.
console.log(t('Hello, Tanek!', { NAME: 'Tanek' })); // TypeScript error!
console.log(t('Hello, {%NAME}!', { FIRST_NAME: 'Tanek' })); // TypeScript error!
console.log(t('Hello, {%NAME}!', { NAME: undefined })); // TypeScript error!

The @tmsg/x CLI can be used to automatically extract strings from your codebase and export them to JSON files, as well as compile translations back to JavaScript:

npm i @tmsg/x --save-dev
# Extracts strings from the code base to JSON files.
npx tmsgx sync --outDir ./locales --projectDir . --locales en de
# Compile translations to ESM.
npx tmsgx compile --outDir ./dist/locales --localesDir ./locales

Limitations

  • The t function must be used for the CLI to extract strings.
  1. express
  2. react

Roadmap

  • Merge new strings with old strings during extraction.
  • Configure the name of the t function.
  • More example projects.
  • Improve parsing of arguments and see if it's possible to get rid of the required % character.

tmsg's People

Contributors

tanekloc avatar dependabot[bot] avatar github-actions[bot] avatar naporin0624 avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.