Translations

WARNING

Translations are experimental in Paintor and their implementation may change!

Translations are just JavaScript Objects, containing key-value pairs of strings. Here is a basic example:

JavaScript

import { compose, template } from 'paintor'

const translationEn = { GREETING: 'Hello!', QUESTION: 'How are you today?' }

const App = function() {
  return template((x) => {
    x.div('GREETING', ' ', 'QUESTION')
  })
}

compose(App()).useTranslations(translationEn).paint('#translations-1')

HTML

<div id="translations-1"></div>

example

Multiple translation objects can be used. useTranslations() accepts one or more objects, or an array of objects, or objects mixed with arrays of objects.

Multiple objects

import { compose } from 'paintor'

const translationOne = { /* ... */ }
const translationTwo = { /* ... */ }

compose(/* ... */).useTranslations(translationOne, translationTwo).paint('#container')

Array of objects

import { compose } from 'paintor'

const translationOne = { /* ... */ }
const translationTwo = { /* ... */ }
const translations   = [translationOne, translationTwo]

compose(/* ... */).useTranslations(translations).paint('#container')

Mixed

import { compose } from 'paintor'

const translationOne   = { /* ... */ }
const translationTwo   = { /* ... */ }
const translationThree = { /* ... */ }
const translations     = [translationOne, translationTwo]

compose(/* ... */).useTranslations(translations, translationThree).paint('#container')

What is translated?

• textContent
• innerText
• The value property of <input type="button">

JavaScript

import { compose, template } from 'paintor'

const translationEn = { NOT_TRANSLATED: 'Translated' }

const App = function() {
  return template((x) => {
    x.div('NOT_TRANSLATED')
    x.div({ textContent: 'NOT_TRANSLATED' })
    x.div({ innerText: 'NOT_TRANSLATED' })
    x.div(
      x.input({ type: 'button', value: 'NOT_TRANSLATED' })
    )
    x.html`NOT_TRANSLATED`
    x.html`<div>NOT_TRANSLATED</div>`
    x.html`<input type="button" value="NOT_TRANSLATED" />`
  })
}

compose(App()).useTranslations(translationEn).paint('#translations-2')

HTML

<div id="translations-2"></div>

example