Traduki

Traduki is a set of build- and runtime tools for lazy loading L10n messages.

• Modular messages files which are bundled and precompiled per locale and per chunk for production.

• When importing the messages YAML from a JS Module, it exports an object with all mappings from local message keys to global message keys. And as side effect it registers the location of the bundled (global) messages file for each locale. (Inspired by CSS Modules)

• It uses MessageFormat for text formatting.

• SSR is not supported (yet).

Packages

• Webpack plugin and loader
• Vite plugin
• Rollup plugin
• React hooks and helpers

Vanilla example

# a.messages.yaml
en:
    hello: Hello {name}!
    intro: How are you?
nl:
    hello: Hoi {name}!
    intro: Hoe is het met jou?

// index.js
import traduki from '@traduki/runtime'
import messages from './a.messages.yaml'

console.log(messages); // { hello: 'hello_30ebe736', intro: 'intro_01b95038' }

traduki.switchTo('en').then(() => {
    traduki.translate(messages.hello, { name: 'John' }); // "Hello John!"
});

Pseudo example output:

// index.js
/* ...traduki runtime code... */

const messages = {
    hello: 'hello_30ebe736',
    intro: 'intro_01b95038'
};
traduki.register({
    en: () => import('./index.en.js'),
    nl: () => import('./index.nl.js'),
});

console.log(messages); // { hello: 'hello_30ebe736', intro: 'intro_01b95038' }

traduki.switchTo('en').then(() => {
    traduki.translate(messages.hello, { name: 'John' }); // "Hello John!"
});


// index.en.js
export default {
    hello_30ebe736: (e) => "Hello " + e.name + "!",
    intro_01b95038: (e) => "How are you?",
};


// index.nl.js
export default {
    hello_30ebe736: (e) => "Hoi " + e.name + "!",
    intro_01b95038: (e) => "Hoe is het met jou?",
};

React/Preact example

# HelloComponent.messages.yaml
en:
    hello: Hello {name}!
nl:
    hello: Hoi {name}!

// HelloComponent.jsx
import { render } from 'react-dom';
import { TradukiProvider, useTranslator } from '@traduki/react';
import messages from './HelloComponent.messages.yaml';

console.log(messages); // { hello: 'hello_30ebe736' }

function HelloComponent() {
    const t = useTranslator();

    return <h1>{t(messages.hello, { name: 'John' })}</h1>; // <h1>Hello John!</h1>
}

render(
    <TradukiProvider initialLocale="en">
        <HelloComponent />
    </TradukiProvider>,
    document.getElementById('root'),
);

Status (in beta)

(1) Determine how you want to split the messages bundles:

* per locale and per chunk
* per locale (per entry)
* no splitting (so no lazy loading)

For webpack the default 'chunk' strategy is used.

(2) Check *.messages.yaml consistency

(3) Helpful warnings when

* Using non-existing messages.<key>.
* Messages *.messages.yaml is inconsistent.
* Duplicate bundled runtime.
* calling translate before messages are loaded (should not happen)