Feature: internationalisation

[sc0ttj]

Do an optional add-on that makes internationalisation (i18n) easier.

It should have:

• string translation - translate strings, include handling of pluralisation
• date formatting - format dates in a couple of locale friendly ways (long, short, etc)
• number formatting - format numbers (commas, periods)
• price formatter - format [and maybe convert] prices

What would/could/should be internationalised?

• stuff inside the view of your components
• any locale specific strings or numbers stored in a components state
• an external set of data that needs to be translated or localised

[sc0ttj]

Something like this?

// get some helper funcs 
const { isPlural, date, number } = i18n;

// isPlural returns true if `num` is 0 or more than 1, else returns false
// const isPlural = num => num === 0 || num > 1;

const vocabs = i18n({
  en: { 
    title: 'Hello world',
    cat: num => isPlural(num) ? 'cats' : 'cat',
    date: date('d/M/Y'),  // returns 'en' formatted `new Date()` date, in given GNU format 'd/M/Y'
    total: num => number(num),  // returns "1,000", etc
  },
  es: {
    title: 'Hola Mundo'  
    cat: num => isPlural(num) ? 'mucho cats' : 'el cat',
    date: date(),  // returns 'es' formatted `new Date()` date, in default format for 'es' locale 
    total: num => number(num),  // returns "1,000", etc
  },
  ru: { 
    title: 'Привет, мир' 
    cat: num => isPlural(num) ? 'meeeeow meeeeow' : 'meeeeow',
    date: date(new Date()),  // returns 'en' formatted `new Date()` date, in default format for 'ru' locale
    total: num => number(num, { script: 'cyrillic' }),  // etc
  },
});

// standalone usage:

console.log(vocabs.title);             // prints "title" in current system locale
console.log(vocabs.total(2000)); // prints 2000 in current system locale (so "2,000" for 'en')

const { en } = vocabs; // extract the english translations

const catSingularEn = en.cat(); // 'cat'
const catPluralEn = en.cat(2);   // 'cats'

const spanishThousand = vocabs.es.total(1000); // '1.000'
const russianDate = vocabs.ru.date; // ..? ..whatever russian dates look like

//
// usage with Component:

// enable as an add-on
Component.i18n = i18n

// create a component
const header = new Component({ title: "Hello world" });

// create translations for the state props
const vocabs = header.i18n({
  es: { title: 'Hola Mundo'  },
  ru: { title: 'Привет, мир' },
});

// print the translation of current system locale (if any, falls back to matching state props)
console.log(vocabs.title);  //prints "Hello world"

// optional - override system default locale
header.locale('ru');

// render to page, will print in Russian
header.view = props => `<h1>${props.title}</h1>`;

// .. or 

// optional, extract a specific language
const { ru } = vocabs;
// render to page, will always print in Russian no matter which locale is set
header.locale('en');
header.view = props => `<h1>${ru.title}</h1>`;

[sc0ttj]

format(54).to('english')
format(54).toPercentage('turkish')
format('I scored 54').toPercentage('turkish')

^ maybe something like this?