New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More

@flix-tech/stencil-i18n

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@flix-tech/stencil-i18n

Static translations for stenciljs


Version published
Weekly downloads
3
increased by50%
Maintainers
4
Weekly downloads
 
Created

Build Status

Static translations (Stencil plugin)

Generating staticly translated bundles.

Getting started

npm i @flix-tech/stencil-i18n

configure it in stencil.config.js

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.

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.

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.

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(`<YOUR_COMPONENT_NAME>/dist/${locale}/loader`).then((webcomponent) => {
      webcomponent.defineCustomElements(window);
    });
  }
}

FAQs

Package last updated on 15 Jul 2020

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts