https://github.com/flix-tech/stencil-i18n
static translations for stenciljs
https://github.com/flix-tech/stencil-i18n
Last synced: over 1 year ago
JSON representation
static translations for stenciljs
- Host: GitHub
- URL: https://github.com/flix-tech/stencil-i18n
- Owner: flix-tech
- License: mit
- Created: 2019-06-24T08:41:34.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T01:55:22.000Z (over 3 years ago)
- Last Synced: 2025-03-17T22:56:47.190Z (over 1 year ago)
- Language: TypeScript
- Size: 749 KB
- Stars: 17
- Watchers: 2
- Forks: 1
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://travis-ci.org/flix-tech/stencil-i18n)
# Static translations (Stencil plugin)
Generating staticly translated bundles.
## Getting started
```bash
npm i @flix-tech/stencil-i18n
```
configure it in `stencil.config.js`
```javascript
const { i18n } = require('@flix-tech/stencil-i18n');
...
plugins: [
...,
i18n({
functionName: 'i18n', // default value is i18n
dictionaryPath: 'src/i18n',
srcPath: 'src' // default value is src
})
]
```
Create the dummy function inside src folder to satisfy typescript and have a fallback.
```typescript
export function i18n(key: string, params?: { [index: string]: string | number }): string {
return key;
}
```
Put the translation files `messages.${locale}.json` into the `dictionaryPath` like specified in the stencil config.
Configure the build task in your `package.json` similar to the following.
```
"build": "for lang in en de; do i18n_locale=$lang stencil build && mkdir -p dist-build/$lang && mv dist/* dist-build/$lang; done && mv dist-build/* dist/ && rm -R dist-build"
```
Be sure to put the `i18n_locale` environment variable containing the same as `messages.${locale}.json` `locale`.
Use the function you defined in `functionName` to translate.
Import the dummy function defined before.
```javascript
const param3 = 'bye';
...
i18n('TRANSLATION.KEY', {
param1: 1234,
param2: 'hello',
param3
});
```
## Angular
To include the resulting components into your angular project do a dynamic import in the app component to have the components in the whole project but be able to also access the `LOCALE_ID`. `YOUR_COMPONENT_NAME` can be the npm name `@scope/package`.
```typescript
import { Component, Inject, LOCALE_ID } from '@angular/core';
@Component({
selector: 'app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
})
export class AppComponent {
constructor(@Inject(LOCALE_ID) locale: string) {
import(`/dist/${locale}/loader`).then((webcomponent) => {
webcomponent.defineCustomElements(window);
});
}
}
```