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 { component } from 'paintor'

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

component((x) => {
  x.div('GREETING', ' ', 'QUESTION')
}).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

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

component((x) => {
  /* ... */
}).useTranslations(translationOne, translationTwo).paint('#container')

Array of objects

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

component((x) => {
  /* ... */
}).useTranslations(translations).paint('#container')

Mixed

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

component((x) => {
  /* ... */
}).useTranslations(translations, translationThree).paint('#container')

What is translated?

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

JavaScript

import { component } from 'paintor'

const translationEn = { NOT_TRANSLATED: 'Translated' }

component((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" />`
}).useTranslations(translationEn).paint('#translations-2')

HTML

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

example