[Multilang] Figure out architecture for multi language support

[alexlemaire]

External JS file? Variable in file?

[Holger-Will]

a first draft of ml support is in place. its a combination of a template-literal-tag-function and a "render" function which in this case is called translate.

usage

render(){
  return html`<div>
    ${translate(SOMESTRING, "en")}
  </div>`
}

where SOMESTRING could be a string or a lang tagged template literal. lang tagged template literal can be composed of:

• strings
• objects with members en, de,... etc. (en is mandatory, other languages are optional)
• other lang tagged template literal

  const s1 = lang`hello`
  const s2 = lang`${{en:"hello", de:"hallo"}} bla bla`
  const s3 = lang`foo ${s1} bar ${s2} baz`

how it works

lang tagged template literal are basically Arrays composed of strings or objects with en, de,... etc members. these members can in turn also be lang tagged template literal.

[
  "", 
  "hallo", 
  {en: [
    "world",
    {en:[
      "bla"
    ]}
  ]}, 
  "!"
]

the translate function basically just walks this tree and picks the language you passed to the function (defaults to "en)

i think it's best to play around with this a bit...

[Holger-Will]

as for external vs. internal, I think we should not be too strict about that. You can decide per element what to do.

[alexlemaire]

Looks good! Did you already push the code somewhere? (in word-and-phrases repo I didn't see code)

EDIT: nevermind I saw it in kaskadi-element :smile:

[Holger-Will]

yeah, the words-and-phrases is for the actual reusable language files...

[alexlemaire]

@Holger-Will Should I close this now? :smile: