TRANS.mono is a customizable and easy to use dependency free, web-component based translation library. It can be used in other web component based projects, Angular, React, Vue or Ember. Currently the library is a build in progress and the API is subject to change.
npm install @kryptand/transmono
Import the components directly either by providing a script tag for example :
<script type="module" src='https://cdn.jsdelivr.net/npm/@kryptand/transmono@0.0.4/dist/index.js'></script>
or if you installed the package via npm import the package inside your root component - for example:
import "@kryptand/transmono";
Switch to your root component, if you use the stencil CLI to generate your project, this file can usually be found at the following location: src/components/global/app.ts.
import within the root component: import "@kryptand/transmono";
look up https://stenciljs.com/docs/angular
look up https://stenciljs.com/docs/react
look up https://stenciljs.com/docs/vue
look up https://stenciljs.com/docs/ember
In the root component of your project create an instance of the translation provider.
[...]
<kryptand-translation-provider defaultLang="de-DE"> </kryptand-translation-provider>
[...]
Specify the default language - for example de-DE
There are a lot of other inputs you can use to further customize your provider. Look up the Provider documentation for further information.
To translate text in your application use the <kryptand-translate></kryptand-translate> Component.
The most basic implementation would be as following:
<kryptand-translate name="translationKey" value="World"></kryptand-translate>
For further information consult the component documentation.
TRANS.mono default translation loader looks for translation files in the .json format.
The default lookup URL is [BASE_URL]/assets/i18n/[CURRENT_LANG].json
Translation files follow a simple key value pattern. For example your file could look like this:
{ "translationKey": "Hallo, {{value}}" }
Placeholders in your translation texts can be provided as well. To insert a placeholder use the {{PLACEHOLDER}} syntax.
As stated in the introduction TRANS.mono gives you the flexibility to customize every bit if you need it.
If you want to load translation files that are not in the .json Format or you have a remote location you want to store your files on you can create your own translation loader.
There will be further information coming soon™.
There will be further information coming soon™.