I18n for modern web

Install

• yarn add i18n-jsnext
• npm install i18n-jsnext --save

Features

• typescript based source files and convenient api
• loading localization resources with namespaces support (splitting to multiple files)
• react.js built-in components (react >=16.3 required)
• messageformat templates support

Plugins

• reactPostProcess() (variables interpolation for react.js components)
• keepLocale() (remember locale in localStorage or cookies and restore after page reload)

Usage with React (optional)

• I18nProvider, I18nConsumer (provide/consume i18n instance for whole app)
• i18nInjector() decorator for providing this.props.i18n within components
• I18nMessage (general use i18n.translate wrapper)
• I18nNumber, I18nPrice, I18nPercents (format numbers)
• I18nDate (format date/time)
• I18nPlural (pluralize word form, supports only single locale, not included in common bundle index.js)

Example

For more details see in ./example folder

// i18n-init.ts
import { I18n } from "i18n-jsnext";
import { keepLocale, reactPostProcess } from "i18n-jsnext/plugins";

export const i18n = new I18n({
  loadPath: "/locales/{locale}.json",
  plugins: [
    keepLocale(),
    reactPostProcess(),
  ]
});

// components/app.tsx
import * as React from "react";
import { render } from "react-dom";
import { I18nProvider, I18nMessage } from "i18n-jsnext";
import { i18n } from "../i18n-init";

class App extends React.Component {
  static init = async () => {
    await i18n.init(); // loading resources
    render(<App/>, document.getElementById('app'))
  };

  render() {
    return (
      <I18nProvider i18n={i18n}>
        <I18nMessage message="App.greetings" params={{
          now: Date.now(),
          highlight: content => <b onClick={() => window.alert("gotcha!")}>{content}</b>
        }}/>
      </I18nProvider>
    )
  }
}

App.init();

# components/app.intl.yml
en:
  App:
    greetings: 
      Hello <highlight>world</highlight>! # param "highlight" parsed with react-postprocess plugin
      Today is {now, date, full} # param "now" parsed with messageformat package
---
ru:
  App:
    greetings: 
      Привет <highlight>мир</highlight>!
      Сегодня {now, date, full}

Server-side addons

Require additional installs:

npm install commander glob js-yaml lodash --save

• built-in locales route for express.js

import express from "express"
import { localesRoute } from "i18n-jsnext/locales-route";

const app = express();

// provide localization json files in runtime from source files folder.
// url for consuming: "/locale/en.json?ns=dictionary", 
// where "?ns=" optional query param to instruct the route provide resources from specific namespace only 
app.use(
  localesRoute({
    routePath: "/locales/:locale.json",
    srcDir: "client", // used to search localization files
    outputDir: "build", // used to check and provide generated static files if they exists
  })
);

• built-in script to gather all localization files from the project and make complete json for consuming in production

Add to package.json runnable script:

"scripts": {
  "locales-build": "node ./node_modules/i18n-jsnext/build-locales.js client build"
}

Where client and build directories relative to project root, same as used in localesRoute() above.

Running demo

1. git clone [email protected]:ixrock/i18n-jsnext.git
2. cd ./i18n-jsnext
3. yarn or npm install (compilation might have errors with npm)
4. yarn dev or npm run dev

By default dev server will be running at port 9000. If it's already taken in your system you can run the project
as LOCAL_SERVER_PORT=9001 yarn dev or change the port at ./example/server/config.ts and try again. `

Useful links:

Find plural categories for specific locale and their corresponding numeric rules:

• http://www.unicode.org/cldr/charts/latest/supplemental/language_plural_rules.html

Powered by typescript, react, webpack and some others. Made with ♥