6 |
7 |
4 |
5 |
6 |
7 |
10 | 
11 | 
12 | 
13 | 
14 | 
15 | 
16 |
19 | A blazing-fast and lightweight internationalization (i18n) library for your next web-based project 20 | 21 |
22 | 23 |${translate("header.subtitle")}
165 | ${translate("cta.awesome", { animals: () => get("cta.cats") })} 166 | ${translateUnsafeHTML("footer.html")} 167 | `; 168 | } 169 | } 170 | ``` 171 | 172 | 173 | [](#wait-for-strings-to-be-loaded-before-displaying-your-app) 174 | 175 | ## ➤ Wait for strings to be loaded before displaying your app 176 | 177 | You might want to avoid empty placeholders being shown initially before any of the translation strings have been loaded. This it how you could defer the first render of your app until the strings have been loaded. 178 | 179 | ```typescript 180 | import { use, translate } from "lit-translate"; 181 | import { LitElement, html, PropertyValues } from "lit"; 182 | import { customElement, state } from "lit/decorators.js"; 183 | 184 | @customElement("my-app") 185 | export class MyApp extends LitElement { 186 | 187 | // Defer the first update of the component until the strings has been loaded to avoid empty strings being shown 188 | @state() hasLoadedStrings = false; 189 | 190 | protected shouldUpdate(props: PropertyValues) { 191 | return this.hasLoadedStrings && super.shouldUpdate(props); 192 | } 193 | 194 | // Load the initial language and mark that the strings has been loaded so the component can render. 195 | async connectedCallback() { 196 | super.connectedCallback(); 197 | 198 | await use("en"); 199 | this.hasLoadedStrings = true; 200 | } 201 | 202 | // Render the component 203 | protected render () { 204 | return html` 205 |${translate("title")}
206 | `; 207 | } 208 | } 209 | ``` 210 | 211 | 212 | [](#advanced-customisation) 213 | 214 | ## ➤ Advanced Customisation 215 | 216 | If you want you can customise just about anything by overwriting the configuration hooks. Below is an example of what you can customise. Try it as a playground [here](https://codepen.io/andreasbm/pen/gOoVGdQ?editors=0010). 217 | 218 | ```typescript 219 | import { registerTranslateConfig, extract, get, use } from "lit-translate"; 220 | 221 | registerTranslateConfig({ 222 | 223 | // Loads the language by returning a JSON structure for a given language 224 | loader: lang => { 225 | switch (lang) { 226 | 227 | // English strings 228 | case "en": 229 | return { 230 | app: { 231 | title: "This is a title", 232 | description: "This description is {placeholder}!" 233 | }, 234 | awesome: "awesome" 235 | }; 236 | 237 | // Danish strings 238 | case "da": 239 | return { 240 | app: { 241 | title: "Dette er en titel", 242 | description: "Denne beskrivelse er {placeholder}!" 243 | }, 244 | awesome: "fed" 245 | }; 246 | 247 | default: 248 | throw new Error(`The language ${lang} is not supported..`); 249 | } 250 | }, 251 | 252 | // Interpolate the values using a key syntax. 253 | interpolate: (text, values) => { 254 | for (const [key, value] of Object.entries(extract(values || {}))) { 255 | text = text.replace(new RegExp(`{.*${key}.*}`, `gm`), String(extract(value))); 256 | } 257 | 258 | 259 | return text; 260 | }, 261 | 262 | // Returns a string for a given key 263 | lookup: (key, config) => { 264 | 265 | // Split the key in parts (example: hello.world) 266 | const parts = key.split(" -> "); 267 | 268 | // Find the string by traversing through the strings matching the chain of keys 269 | let string = config.strings; 270 | 271 | // Shift through all the parts of the key while matching with the strings. 272 | // Do not continue if the string is not defined or if we have traversed all the key parts 273 | while (string != null && parts.length > 0) { 274 | string = string[parts.shift()]; 275 | } 276 | 277 | // Make sure the string is in fact a string! 278 | return string != null ? string.toString() : null; 279 | }, 280 | 281 | // Formats empty placeholders (eg. !da.headline.title!) if lookup returns null 282 | empty: (key, config) => `!${config.lang}.${key}!` 283 | }); 284 | 285 | use("en").then(() => { 286 | get("app -> description", { placeholder: get("awesome") }); // Will return "This description is awesome" 287 | }); 288 | ``` 289 | 290 | ### Format text with `IntlMessageFormat` 291 | 292 | [IntlMessageFormat](https://www.npmjs.com/package/intl-messageformat) is a library that formats ICU message strings with number, date, plural, and select placeholders to create localized messages using [ICU placeholders](https://unicode-org.github.io/icu/userguide/format_parse/messages/). This library is a good addition to `lit-translate`. You can add it to the interpolate hook to get the benefits as shown in the following example. Try the example as a playground [here](https://codepen.io/andreasbm/pen/rNpXGPW?editors=0010). 293 | 294 | ```typescript 295 | import { registerTranslateConfig, extract } from "lit-translate"; 296 | import { IntlMessageFormat } from "intl-messageformat"; 297 | 298 | registerTranslateConfig({ 299 | loader: lang => { 300 | switch (lang) { 301 | case "en": 302 | return { 303 | photos: `You have {numPhotos, plural, =0 {no photos.} =1 {one photo.} other {# photos.}}` 304 | }; 305 | 306 | case "en": 307 | return { 308 | photos: `Du har {numPhotos, plural, =0 {ingen billeder.} =1 {et billede.} other {# billeder.}}` 309 | }; 310 | 311 | default: 312 | throw new Error(`The language ${lang} is not supported..`); 313 | } 314 | }, 315 | 316 | // Use the "intl-messageformat" library for formatting. 317 | interpolate: (text, values, config) => { 318 | const msg = new IntlMessageFormat(text, config.lang); 319 | return msg.format(extract(values)); 320 | } 321 | }); 322 | 323 | use("en").then(() => { 324 | get("photos", {numPhotos: 0}); // Will return "You have no photos" 325 | get("photos", {numPhotos: 1}); // Will return "You have one photo." 326 | get("photos", {numPhotos: 5}); // Will return "You have 5 photos." 327 | }); 328 | ``` 329 | 330 | ### Use the default translations as keys 331 | 332 | Inspired by [GNU gettext](https://en.wikipedia.org/wiki/Gettext) you can use the default translation as keys. The benefit of doing this is that you will save typing time and reduce code clutter. You can use [xgettext](https://www.gnu.org/software/gettext/manual/html_node/xgettext-Invocation.html) to extract the translatable strings from your code and then use [po2json](https://github.com/mikeedwards/po2json) to turn your `.po` files into `.json` files. The following code shows an example of how you could implement this. Try it as a playground [here](https://codepen.io/andreasbm/pen/RwxXjJX?editors=0010). 333 | 334 | ```typescript 335 | import { registerTranslateConfig, use, get } from "lit-translate"; 336 | 337 | registerTranslateConfig({ 338 | loader: lang => { 339 | switch (lang) { 340 | case "da": 341 | return { 342 | "The page is being loaded...": "Siden indlæses..." 343 | }; 344 | default: 345 | return {}; 346 | } 347 | }, 348 | lookup: (key, config) => config.strings != null && config.strings[key] != null ? config.strings[key].toString() : key, 349 | empty: key => key, 350 | }); 351 | 352 | get("The page is being loaded..."); // Will return "The page is being loaded..." 353 | 354 | use("da").then(() => { 355 | get("The page is being loaded..."); // Will return "Siden indlæses..." 356 | }); 357 | ``` 358 | 359 | [](#typesafe-translations) 360 | 361 | ## ➤ Typesafe Translations 362 | 363 |
364 |
365 | If you have a lot of translation keys you can quickly lose the overview of your strings. If you use Typescript you can make the keys of your translation keys typesafe - this will also give you autocompletion when you enter the keys. To achieve this you have to do the following:
366 |
367 |
368 | ### 1. Add `resolveJsonModule` to your tsconfig
369 |
370 | Add [resolveJsonModule](https://www.typescriptlang.org/tsconfig#resolveJsonModule) to your `tsconfig` which will allow us to import modules with a `.json` extension.
371 |
372 | ```json
373 | {
374 | ...
375 | "compilerOptions": {
376 | ...
377 | "resolveJsonModule": true
378 | }
379 | }
380 | ```
381 |
382 | ### 2. Use the `typedKeysFactory` function
383 |
384 | Create a file, for example `typed-lit-translate.ts`. Then use the factory function `typedKeysFactory` and provide it with the type of one of your translation files. Use `typeof import(..)` to import the `.json` file and get the type. Provide this type to the factory function, and it will return a version of `get`, `translate` and `translateUnsafeHTML` where the keys are typed. Export these and make sure to import from your `typed-lit-translate.ts` file instead of `lit-translate`.
385 |
386 | ```typescript
387 | // typed-lit-translate.ts
388 | import { typedKeysFactory } from "lit-translate";
389 |
390 | const { get, translate, translateUnsafeHTML } = typedKeysFactory
4 |
5 |
6 |
7 |
${translate("header.subtitle")}
16 | ${translate("cta.awesome", { animals: () => get("cta.cats") })} 17 | ${translateUnsafeHTML("footer.html")} 18 | `; 19 | } 20 | } 21 | ``` 22 | -------------------------------------------------------------------------------- /readme/async.md: -------------------------------------------------------------------------------- 1 | ## Asynchronous and Encapsulated Translations 2 | 3 | If you have a lot of strings it might not make sense to load them all at once. In `lit-translate` you can have as many translation configs as you want to. As shown in the example below, the trick to encapsulating the translations and loading them asynchronously is to create a new translation config and use it instead of the global `translateConfig`. We then make sure to provide it to the library functions (such as `use`, `get` and `translate`) and keep the selected language in sync with the global one by listening for the `langChanged` event. 4 | 5 | ```typescript 6 | import { ITranslateConfig, listenForLangChanged, translateConfig, use, get } from "lit-translate"; 7 | 8 | // Create a new translation config 9 | const asyncTranslateConfig: ITranslateConfig = { 10 | ...translateConfig, 11 | loader: lang => fetch(`my-component.${lang}.json`).then(res => res.json()), 12 | empty: () => "" 13 | } 14 | 15 | // Initially set the language of asyncTranslateConfig to match the language of translateConfig. 16 | // When calling the use function, make sure to provide asyncTranslateConfig. 17 | if (translateConfig.lang != null) { 18 | use(translateConfig.lang, asyncTranslateConfig); 19 | } 20 | 21 | // Whenever the language of translateConfig changes also update the language of the asyncTranslateConfig to load the strings. 22 | listenForLangChanged(({lang}) => { 23 | if (asyncTranslateConfig.lang !== lang) { 24 | use(lang, asyncTranslateConfig); 25 | } 26 | }); 27 | 28 | // When getting translations, provide asyncTranslateConfig to the library functions 29 | get("title", undefined, asyncTranslateConfig); 30 | ``` -------------------------------------------------------------------------------- /readme/customise.md: -------------------------------------------------------------------------------- 1 | ## Advanced Customisation 2 | 3 | If you want you can customise just about anything by overwriting the configuration hooks. Below is an example of what you can customise. Try it as a playground [here](https://codepen.io/andreasbm/pen/gOoVGdQ?editors=0010). 4 | 5 | ```typescript 6 | import { registerTranslateConfig, extract, get, use } from "lit-translate"; 7 | 8 | registerTranslateConfig({ 9 | 10 | // Loads the language by returning a JSON structure for a given language 11 | loader: lang => { 12 | switch (lang) { 13 | 14 | // English strings 15 | case "en": 16 | return { 17 | app: { 18 | title: "This is a title", 19 | description: "This description is {placeholder}!" 20 | }, 21 | awesome: "awesome" 22 | }; 23 | 24 | // Danish strings 25 | case "da": 26 | return { 27 | app: { 28 | title: "Dette er en titel", 29 | description: "Denne beskrivelse er {placeholder}!" 30 | }, 31 | awesome: "fed" 32 | }; 33 | 34 | default: 35 | throw new Error(`The language ${lang} is not supported..`); 36 | } 37 | }, 38 | 39 | // Interpolate the values using a [[ key ]] syntax. 40 | interpolate: (text, values) => { 41 | for (const [key, value] of Object.entries(extract(values || {}))) { 42 | text = text.replace(new RegExp(`{.*${key}.*}`, `gm`), String(extract(value))); 43 | } 44 | 45 | 46 | return text; 47 | }, 48 | 49 | // Returns a string for a given key 50 | lookup: (key, config) => { 51 | 52 | // Split the key in parts (example: hello.world) 53 | const parts = key.split(" -> "); 54 | 55 | // Find the string by traversing through the strings matching the chain of keys 56 | let string = config.strings; 57 | 58 | // Shift through all the parts of the key while matching with the strings. 59 | // Do not continue if the string is not defined or if we have traversed all the key parts 60 | while (string != null && parts.length > 0) { 61 | string = string[parts.shift()]; 62 | } 63 | 64 | // Make sure the string is in fact a string! 65 | return string != null ? string.toString() : null; 66 | }, 67 | 68 | // Formats empty placeholders (eg. !da.headline.title!) if lookup returns null 69 | empty: (key, config) => `!${config.lang}.${key}!` 70 | }); 71 | 72 | use("en").then(() => { 73 | get("app -> description", { placeholder: get("awesome") }); // Will return "This description is awesome" 74 | }); 75 | ``` 76 | 77 | ### Format text with `IntlMessageFormat` 78 | 79 | [IntlMessageFormat](https://www.npmjs.com/package/intl-messageformat) is a library that formats ICU message strings with number, date, plural, and select placeholders to create localized messages using [ICU placeholders](https://unicode-org.github.io/icu/userguide/format_parse/messages/). This library is a good addition to `lit-translate`. You can add it to the interpolate hook to get the benefits as shown in the following example. Try the example as a playground [here](https://codepen.io/andreasbm/pen/rNpXGPW?editors=0010). 80 | 81 | ```typescript 82 | import { registerTranslateConfig, extract } from "lit-translate"; 83 | import { IntlMessageFormat } from "intl-messageformat"; 84 | 85 | registerTranslateConfig({ 86 | loader: lang => { 87 | switch (lang) { 88 | case "en": 89 | return { 90 | photos: `You have {numPhotos, plural, =0 {no photos.} =1 {one photo.} other {# photos.}}` 91 | }; 92 | 93 | case "en": 94 | return { 95 | photos: `Du har {numPhotos, plural, =0 {ingen billeder.} =1 {et billede.} other {# billeder.}}` 96 | }; 97 | 98 | default: 99 | throw new Error(`The language ${lang} is not supported..`); 100 | } 101 | }, 102 | 103 | // Use the "intl-messageformat" library for formatting. 104 | interpolate: (text, values, config) => { 105 | const msg = new IntlMessageFormat(text, config.lang); 106 | return msg.format(extract(values)); 107 | } 108 | }); 109 | 110 | use("en").then(() => { 111 | get("photos", {numPhotos: 0}); // Will return "You have no photos" 112 | get("photos", {numPhotos: 1}); // Will return "You have one photo." 113 | get("photos", {numPhotos: 5}); // Will return "You have 5 photos." 114 | }); 115 | ``` 116 | 117 | ### Use the default translations as keys 118 | 119 | Inspired by [GNU gettext](https://en.wikipedia.org/wiki/Gettext) you can use the default translation as keys. The benefit of doing this is that you will save typing time and reduce code clutter. You can use [xgettext](https://www.gnu.org/software/gettext/manual/html_node/xgettext-Invocation.html) to extract the translatable strings from your code and then use [po2json](https://github.com/mikeedwards/po2json) to turn your `.po` files into `.json` files. The following code shows an example of how you could implement this. Try it as a playground [here](https://codepen.io/andreasbm/pen/RwxXjJX?editors=0010). 120 | 121 | ```typescript 122 | import { registerTranslateConfig, use, get } from "lit-translate"; 123 | 124 | registerTranslateConfig({ 125 | loader: lang => { 126 | switch (lang) { 127 | case "da": 128 | return { 129 | "The page is being loaded...": "Siden indlæses..." 130 | }; 131 | default: 132 | return {}; 133 | } 134 | }, 135 | lookup: (key, config) => config.strings != null && config.strings[key] != null ? config.strings[key].toString() : key, 136 | empty: key => key, 137 | }); 138 | 139 | get("The page is being loaded..."); // Will return "The page is being loaded..." 140 | 141 | use("da").then(() => { 142 | get("The page is being loaded..."); // Will return "Siden indlæses..." 143 | }); 144 | ``` -------------------------------------------------------------------------------- /readme/directives.md: -------------------------------------------------------------------------------- 1 | ## `lit` Directives 2 | 3 | ### Re-render a value when the language changes with the `langChanged` directive 4 | 5 | Use the `langChanged` directive to re-render a value when the language changes. 6 | 7 | ```typescript 8 | import { langChanged, translateConfig } from "lit-translate"; 9 | import { html, LitElement, TemplateResult } from "lit"; 10 | import { customElement } from "lit/decorators.js"; 11 | 12 | @customElement("my-component") 13 | export class MyComponent extends LitElement { 14 | protected render(): TemplateResult { 15 | return html` 16 |
4 |
5 | If you have a lot of translation keys you can quickly lose the overview of your strings. If you use Typescript you can make the keys of your translation keys typesafe - this will also give you autocompletion when you enter the keys. To achieve this you have to do the following:
6 |
7 |
8 | ### 1. Add `resolveJsonModule` to your tsconfig
9 |
10 | Add [resolveJsonModule](https://www.typescriptlang.org/tsconfig#resolveJsonModule) to your `tsconfig` which will allow us to import modules with a `.json` extension.
11 |
12 | ```json
13 | {
14 | ...
15 | "compilerOptions": {
16 | ...
17 | "resolveJsonModule": true
18 | }
19 | }
20 | ```
21 |
22 | ### 2. Use the `typedKeysFactory` function
23 |
24 | Create a file, for example `typed-lit-translate.ts`. Then use the factory function `typedKeysFactory` and provide it with the type of one of your translation files. Use `typeof import(..)` to import the `.json` file and get the type. Provide this type to the factory function, and it will return a version of `get`, `translate` and `translateUnsafeHTML` where the keys are typed. Export these and make sure to import from your `typed-lit-translate.ts` file instead of `lit-translate`.
25 |
26 | ```typescript
27 | // typed-lit-translate.ts
28 | import { typedKeysFactory } from "lit-translate";
29 |
30 | const { get, translate, translateUnsafeHTML } = typedKeysFactory${translate("title")}
32 | `; 33 | } 34 | } 35 | ``` 36 | -------------------------------------------------------------------------------- /rollup.config.js: -------------------------------------------------------------------------------- 1 | import path from "path"; 2 | import pkg from "./package.json"; 3 | import { 4 | defaultExternals, 5 | defaultOutputConfig, 6 | defaultPlugins, 7 | defaultProdPlugins, 8 | defaultServePlugins, 9 | isLibrary, 10 | isProd, 11 | isServe 12 | } from "@appnest/web-config"; 13 | 14 | const folders = { 15 | dist: path.resolve(__dirname, "dist"), 16 | src: path.resolve(__dirname, "src/demo"), 17 | src_assets: path.resolve(__dirname, "src/demo/assets"), 18 | dist_assets: path.resolve(__dirname, "dist/assets") 19 | }; 20 | 21 | const files = { 22 | main: path.join(folders.src, "main.ts"), 23 | src_index: path.join(folders.src, "index.html"), 24 | dist_index: path.join(folders.dist, "index.html") 25 | }; 26 | 27 | export default { 28 | input: { 29 | main: files.main 30 | }, 31 | output: [ 32 | defaultOutputConfig({ 33 | format: "esm", 34 | dir: folders.dist 35 | }) 36 | ], 37 | plugins: [ 38 | ...defaultPlugins({ 39 | cleanConfig: { 40 | targets: [ 41 | folders.dist 42 | ] 43 | }, 44 | copyConfig: { 45 | resources: [[folders.src_assets, folders.dist_assets]], 46 | }, 47 | htmlTemplateConfig: { 48 | template: files.src_index, 49 | target: files.dist_index, 50 | include: /main(-.*)?\.js$/ 51 | }, 52 | importStylesConfig: { 53 | globals: ["global.scss"] 54 | } 55 | }), 56 | 57 | // Serve 58 | ...(isServe ? [ 59 | ...defaultServePlugins({ 60 | serveConfig: { 61 | port: 1338, 62 | contentBase: folders.dist 63 | }, 64 | livereloadConfig: { 65 | watch: folders.dist 66 | } 67 | }) 68 | ] : []), 69 | 70 | // Production 71 | ...(isProd ? [ 72 | ...defaultProdPlugins({ 73 | dist: folders.dist, 74 | minifyLitHtmlConfig: { 75 | verbose: false 76 | }, 77 | visualizerConfig: { 78 | filename: path.join(folders.dist, "stats.html") 79 | }, 80 | licenseConfig: { 81 | thirdParty: { 82 | output: path.join(folders.dist, "licenses.txt") 83 | } 84 | }, 85 | budgetConfig: { 86 | sizes: { 87 | ".js": 1024 * 200 88 | } 89 | } 90 | }) 91 | ] : []) 92 | ], 93 | external: [ 94 | ...(isLibrary ? [ 95 | ...defaultExternals(pkg) 96 | ] : []) 97 | ], 98 | treeshake: isProd, 99 | context: "window" 100 | } 101 | -------------------------------------------------------------------------------- /src/demo/assets/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andreasbm/lit-translate/2ec157a9ab83e38b2d2429426c087bdb03802fdc/src/demo/assets/favicon.ico -------------------------------------------------------------------------------- /src/demo/assets/i18n/da.json: -------------------------------------------------------------------------------- 1 | { 2 | "lang": "da", 3 | "world": "Verden", 4 | "app": { 5 | "title": "Oversæt din app", 6 | "subtitle": "Hej {{ thing }}!", 7 | "html": "Dette er html" 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /src/demo/assets/i18n/demo-component.da.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Demo komponent", 3 | "text": "Disse oversættelser blev loaded asynkront" 4 | } -------------------------------------------------------------------------------- /src/demo/assets/i18n/demo-component.en.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Demo component", 3 | "text": "These translations were loaded asynchronously" 4 | } 5 | -------------------------------------------------------------------------------- /src/demo/assets/i18n/en.json: -------------------------------------------------------------------------------- 1 | { 2 | "lang": "en", 3 | "world": "World", 4 | "app": { 5 | "title": "Translate your application", 6 | "subtitle": "Hello {{ thing }}!", 7 | "html": "This is html" 8 | } 9 | } -------------------------------------------------------------------------------- /src/demo/components/demo-component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andreasbm/lit-translate/2ec157a9ab83e38b2d2429426c087bdb03802fdc/src/demo/components/demo-component.scss -------------------------------------------------------------------------------- /src/demo/components/demo-component.ts: -------------------------------------------------------------------------------- 1 | import { html, LitElement, TemplateResult } from "lit"; 2 | import { customElement } from "lit/decorators.js"; 3 | import { ITranslateConfig, listenForLangChanged, translate, translateConfig, use } from "../../lib"; 4 | 5 | import styles from "./demo-component.scss"; 6 | 7 | /** 8 | * This component is an example of how strings could be asynchronously be loaded and encapsulated. 9 | * The trick is to create a new local translate config, in this example "demoTranslateConfig" 10 | * instead of using the global one from the library "translateConfig". We then make sure to 11 | * keep the local global config in sync with the global one by providing the "demoTranslateConfig" 12 | * to the library functions (for example use function and the translate directive) 13 | */ 14 | 15 | const demoTranslateConfig: ITranslateConfig = { 16 | ...translateConfig, 17 | loader: lang => fetch(`assets/i18n/demo-component.${lang}.json`).then(res => res.json()), 18 | empty: () => "" 19 | } 20 | 21 | // Initially set the demo translate config to the language of the global translate config 22 | if (translateConfig.lang != null) { 23 | use(translateConfig.lang, demoTranslateConfig).then(); 24 | } 25 | 26 | // Whenever the language changes also update the language of the demo translate config 27 | listenForLangChanged(async ({lang}) => { 28 | if (demoTranslateConfig.lang !== lang) { 29 | await use(lang, demoTranslateConfig); 30 | } 31 | }); 32 | 33 | /** 34 | * Demo page. 35 | */ 36 | @customElement("demo-component") 37 | export class DemoPageComponent extends LitElement { 38 | protected render(): TemplateResult { 39 | return html` 40 | 43 |${translate("app.title")}
63 |${translate(`app.subtitle`, () => ({thing: this.thing || get("world")}))}
64 |${translateUnsafeHTML("app.html")}
65 | 70 | 72 |${translate("header.subtitle")}
34 | ${translate("cta.awesome", () => { 35 | return {things: this.things}; 36 | })} 37 |${translateUnsafeHTML("html")}
38 | `; 39 | } 40 | } 41 | 42 | @customElement("stress-component" as any) 43 | class StressComponent extends LitElement { 44 | render () { 45 | return html` 46 | ${repeat(Array(10000), () => html`${translate("header.title")}
`)} 47 | `; 48 | } 49 | } 50 | 51 | describe("translate", () => { 52 | 53 | let $translatedComponent: TranslatedComponent; 54 | 55 | beforeEach(async () => { 56 | registerTranslateConfig({ 57 | loader: (lang: LanguageIdentifier) => { 58 | switch (lang) { 59 | case "en": 60 | return Promise.resolve(enStrings); 61 | case "da": 62 | return Promise.resolve(daStrings); 63 | } 64 | 65 | throw new Error(`Language '${lang}' not valid.`); 66 | } 67 | }); 68 | 69 | await use("en"); 70 | 71 | $translatedComponent = new TranslatedComponent(); 72 | document.body.appendChild($translatedComponent); 73 | }); 74 | after(() => { 75 | while (document.body.firstChild) { 76 | (