@genesislcap/foundation-i18n 14.180.3 → 14.180.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +71 -8
  2. package/package.json +9 -9
package/README.md CHANGED
@@ -30,16 +30,13 @@ To enable this module in your application, follow the steps below.
30
30
 
31
31
  ```json
32
32
  {
33
- // ...
34
33
  "dependencies": {
35
- // ...
36
34
  "@genesislcap/foundation-i18n": "latest"
37
35
  },
38
- // ...
39
36
  }
40
37
  ```
41
38
 
42
- ### Basic Setup
39
+ ### I18n Setup
43
40
 
44
41
  Import the necessary modules from `@genesislcap/foundation-i18n` and configure your internationalization settings.
45
42
 
@@ -75,25 +72,91 @@ Registration.instance<I18nextConfig>(I18nextConfig, {
75
72
 
76
73
  This could live in your application’s entry point, such as `main.ts` or a similar file.
77
74
 
75
+ ### I18n Setup (JSON)
76
+
77
+ You can also use a JSON file to store your translations and load them dynamically:
78
+
79
+ ```json
80
+ {
81
+ "en": {
82
+ "translation": {
83
+ "Home": "Home",
84
+ "Admin": "Admin",
85
+ "Reporting": "Reporting",
86
+ "Notifications": "Notifications",
87
+ "Features Lab": "Features Lab"
88
+ }
89
+ },
90
+ "pt": {
91
+ "translation": {
92
+ "Home": "Início",
93
+ "Admin": "Administração",
94
+ "Reporting": "Relatórios",
95
+ "Notifications": "Notificações",
96
+ "Features Lab": "Laboratório de Funcionalidades"
97
+ }
98
+ }
99
+ }
100
+ ```
101
+
102
+ Then, import the JSON file and use it in your configuration:
103
+
104
+ ```typescript
105
+ import { defaultI18nextConfig, I18nextConfig } from '@genesislcap/foundation-i18n';
106
+ import translations from './translations.json';
107
+
108
+ Registration.instance<I18nextConfig>(I18nextConfig, {
109
+ ...defaultI18nextConfig,
110
+ lng: 'en',
111
+ resources: translations,
112
+ });
113
+ ```
114
+
115
+ ### `addResources`
116
+
117
+ > :warning: **This will overwrite previously set resources.**
118
+
119
+ You can also add resources dynamically and when necessary.
120
+
121
+ This is useful when you have a large number of translations or when you need to load translations from a different source or at a different time from the initial setup.
122
+
123
+ ```typescript
124
+ import { I18next } from '@genesislcap/foundation-i18n';
125
+ import translations from './translations.json';
126
+
127
+ export class MyExampleClass {
128
+ @I18next i18next!: I18next;
129
+
130
+ addResources() {
131
+ this.i18next.addResources(translations);
132
+ }
133
+ }
134
+ ```
135
+
78
136
  ### Usage
79
137
 
80
138
  `foundation-i18n` also supports changing languages dynamically, allowing your application to switch languages without needing to reload:
81
139
 
82
140
  ```typescript
83
- import { i18next } from '@genesislcap/foundation-i18n';
141
+ import { I18next } from '@genesislcap/foundation-i18n';
84
142
  import { customElement, FASTElement, html } from '@microsoft/fast-element';
85
-
143
+ import translations from './translations.json';
86
144
 
87
145
  @customElement({
88
- name: 'my-component',
146
+ name: 'my-example-component',
89
147
  template: html`
148
+ <zero-button @click=${() => addResources()}>Add Translation Resources</zero-button>
90
149
  <zero-button @click=${() => switchLanguage()}>Switch between PT and EN</zero-button>
91
150
  <zero-button @click=${() => translateWords()}>Translate i18n Resource Words</zero-button>
92
151
  `,
93
152
  })
94
- export class MyComponent extends FASTElement {
153
+ export class MyExampleComponent extends FASTElement {
95
154
  @I18next i18next!: I18next;
96
155
 
156
+ addResources() {
157
+ this.i18next.addResources(translations);
158
+ }
159
+
97
160
  switchLanguage() {
98
161
  if (this.i18next.language === 'pt') {
99
162
  this.i18next.changeLanguage('en');
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@genesislcap/foundation-i18n",
3
3
  "description": "Foundation components and services for Internationalization (i18n) support",
4
- "version": "14.180.3",
4
+ "version": "14.180.5",
5
5
  "sideEffects": false,
6
6
  "license": "SEE LICENSE IN license.txt",
7
7
  "main": "dist/esm/index.js",
@@ -22,16 +22,16 @@
22
22
  "serve": "genx serve"
23
23
  },
24
24
  "devDependencies": {
25
- "@genesislcap/genx": "14.180.3",
26
- "@genesislcap/rollup-builder": "14.180.3",
27
- "@genesislcap/ts-builder": "14.180.3",
28
- "@genesislcap/uvu-playwright-builder": "14.180.3",
29
- "@genesislcap/vite-builder": "14.180.3",
30
- "@genesislcap/webpack-builder": "14.180.3",
25
+ "@genesislcap/genx": "14.180.5",
26
+ "@genesislcap/rollup-builder": "14.180.5",
27
+ "@genesislcap/ts-builder": "14.180.5",
28
+ "@genesislcap/uvu-playwright-builder": "14.180.5",
29
+ "@genesislcap/vite-builder": "14.180.5",
30
+ "@genesislcap/webpack-builder": "14.180.5",
31
31
  "rimraf": "^3.0.2"
32
32
  },
33
33
  "dependencies": {
34
- "@genesislcap/foundation-logger": "14.180.3",
34
+ "@genesislcap/foundation-logger": "14.180.5",
35
35
  "@microsoft/fast-element": "^1.12.0",
36
36
  "@microsoft/fast-foundation": "^2.49.4",
37
37
  "i18next": "^20.3.0",
@@ -45,5 +45,5 @@
45
45
  "publishConfig": {
46
46
  "access": "public"
47
47
  },
48
- "gitHead": "07dad7747ea8a5efb75f1e63ee59721f56577f95"
48
+ "gitHead": "6ecb126c94200e9e7c2735359dc6efe0bc743f9d"
49
49
  }