i18n

i18n #

@furo/furo-framework v2.4.11
import '@furo/framework/src/i18n.js';
exports i18n js


The built in i18n is a trivial translation mechanism which translates keys (words) a method for pluralized keys (words with numbers) is available but not implemented.

You can override the builtin methods in your init file, as long you keep i18n.t and i18n.n

Usage #

After you have registered a translation file, you can use i18n in your components.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
// import i18n
import {i18n} from "@furo/framework/src/i18n"

// use it in your source
 let label = i18n.t("key");

// use it in your template like this
  render() {
    // language=HTML
    return html` <div>${i18n.t("key")}</div>`;
 }

Register a translation file and use custom translation methods #

Register i18n in the init phase of your application.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
import {Init, i18n, Env, Iconset} from "@furo/framework/src/furo.js";

// import your translations
import {Translations} from "./translations";

// register your translations
i18n.registerResBundle(Translations);

// Apply custom Intl methods
i18n.t = (key) => {
   let b = i18n.resbundle[Env.locale.toLowerCase().replace("-", "_")] || i18n.resbundle['de_ch'];

   if (b === undefined) {
       console.warn('No resource bundle with locale ' + Env.locale + ' exists.');
       return
   }

   const res = key.split('.').reduce((acc, part) => acc && acc[part], b);
   return  (res ? res : key + '**');
};
// Apply custom Intl methods for pluralized keys
i18n.n = (key, num) => {
   let t = i18n.resbundle[Env.locale.toLowerCase().replace("-", "_")] || i18n.resbundle['de_ch'];

   if (t === undefined) {
       console.warn('No resource bundle with locale ' + Env.locale + ' exists.');
       return
   }

   let p = key.split(".");
   for (let i = 0; i < p.length; i++) {
       if (t[p[i]]) {
           t = t[p[i]];
       } else {
           console.warn("key does not exist", key);
           return;
       }
   }

   if (t) {
       if (num === 1) {
           if (t.one) {
               return t.one(num);
           } else {
               console.warn("key does not exist", key + ".one");
               return num;
           }
       }
       if (num > 1) {
           if (t.many) {
               return t.many(num);
           } else {
               console.warn("key does not exist", key + ".many");
               return num;
           }
       }
       if (t.none) {
           return t.none(num);
       } else {
           console.warn("key does not exist", key + ".none");
           return num;
       }

   }
};

Attributes and Properties #

Methods #

registerResBundle #

registerResBundle(bundle `` ) ⟹ void

  • bundle

t #

t(key `` ) ⟹ void

  • key

n #

n(key *num* ) ⟹ void

  • key
  • num