npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

js-translator

v5.0.1

Published

Simple translator with bbcode support.

Downloads

7

Readme

translator

General

This is a simple translation engine.

Installation

bower install translator --save
npm install js-translator --save

Usage

Config structure

The translator requires at least 2 arguments. The first argument is the translation config. The second argument are the options.

The following structure for translation config will be used.

|--- de_DE
       |--- KEY: VALUE
       |--- KEY: VALUE
       |--- KEY: VALUE
|--- en_GB
       |--- KEY: VALUE
       |--- KEY: VALUE
       |--- KEY: VALUE

The following example show the translation config

{
    "de-DE": {
        "buttonAbort": "Änderungen verwerfen",
        "buttonAccept": "Übernehmen",
        "buttonCancel": "Abbrechen",
        "buttonOkay": "Okay"
    },
    "fr-FR": {
        "buttonAbort": "Annuler les modifications",
        "buttonAccept": "Sauvegarder",
        "buttonCancel": "Annuler",
        "buttonOkay": "Ok"
    },
    "nl-NL": {
        "buttonAbort": "Wijzigingen verwerpen",
        "buttonAccept": "Overnemen",
        "buttonCancel": "Afbreken",
        "buttonOkay": "Oké"
    }
}

The second arguments contains some options:

  • locale ... current defined locale. Default en-GB
  • localeArea ... current language area locale. Default en-GB
  • localeDefault ... current default locale. Default en-GB
  • regexpParameters ... regexp to transform parameters in translations into object template property. Default /\?[([^[]]+)]/g
  • regexpTranslations ... regexp for translations identify in inline text. Default /[\$]?{([^{}]+)}/g

Locales example

If you have some translations for de-DE, de-AT and en-GB and en-GB is your default locale, which always contains every key. Following configuration will be used:

  • locale: de-AT
  • localeArea: de-DE
  • localeDefault: en-GB

Your translation will be now done in de-AT. But if key not exists in de-AT, the translator will take a look into the localeArea to find the key. In this case it will be taken from de-DE. This is the handling of same languages (in this case german) with some differences.

If the translation key not exists in the localeArea, the translator will try to find the translation in the localeDefault. In this case it will be taken from en-GB. This is the handling for default language. So you can always present a text.

If the key does not exists in the current locale, the locale area and the default locale the translator will return the translation key as the translation text.

Placeholders

Translation values can have placeholder. Every placeholder is embeded in [ and ]. The placeholder key is case insensitive.

The following example shows with placeholders.

{
    "de-DE": {
        "buttonAbort": "Änderungen verwerfen",
        "buttonAccept": "Übernehmen",
        "buttonCancel": "Abbrechen",
        "buttonOkay": "Okay",
        "price": "[VALUE] €"
    },
    "fr-FR": {
        "buttonAbort": "Annuler les modifications",
        "buttonAccept": "Sauvegarder",
        "buttonCancel": "Annuler",
        "buttonOkay": "Ok",
        "price": "[VALUE] €"
    },
    "nl-NL": {
        "buttonAbort": "Wijzigingen verwerpen",
        "buttonAccept": "Overnemen",
        "buttonCancel": "Afbreken",
        "buttonOkay": "Oké",
        "price": "[VALUE] €"
    }
}

Example of requesting programmatically a translation key with parameters.

let translator = new Translator(translationConfig, {locale: 'fr-FR', localeDefault: 'de-DE'});
console.log(translator.translate('price', {value: '10.11'})); // 10.11 €
console.log(translator.translate('price')); // [VALUE] €

Translation

You can translation with the "translate" function with given parameter.

import translator from 'translator';

let translatorA = translator.create(translationConfig, {locale: 'fr-FR', localeDefault: 'de-DE'});
console.log(translator.translate('price', {value: '10.11'})); // 10.11 €
console.log(translator.translate('price')); // [VALUE] €

You can also translate a text (may it is HTML) with inline translations

{
    "de-DE": {
        "buttonAbort": "Änderungen verwerfen",
        "buttonAccept": "Übernehmen",
        "buttonCancel": "Abbrechen",
        "buttonOkay": "Okay",
        "message": "Wirklich?"
    },
    "fr-FR": {
        "buttonAbort": "Annuler les modifications",
        "buttonAccept": "Sauvegarder",
        "buttonCancel": "Annuler",
        "buttonOkay": "Ok",
        "message": "Vraiment?"
    },
    "nl-NL": {
        "buttonAbort": "Wijzigingen verwerpen",
        "buttonAccept": "Overnemen",
        "buttonCancel": "Afbreken",
        "buttonOkay": "Oké",
        "message": "Echt?"
    }
}
<form>
    <span>{message}</span>
    <button type="submit">{buttonOkay}</button>
    <button type="button">{buttonCancel}</button>
</form>
import translator from 'translator';

let translatorA = translator.create(translationConfig, {locale: 'fr-FR', localeDefault: 'de-DE'});
console.log(translator.translateInline(html));

Output

<form>
    <span>Vraiment?</span>
    <button type="submit">Ok</button>
    <button type="button">Annuler</button>
</form>

Default Translator

A default translator with default configuration and no translation keys is available. This default translator is used in the js-translator-lodash-bridge and js-translator-lodash-requirejs-bridge. You can configure this translator:

import translator from 'translator';

translator.setTranslations(translationConfig);
translator.locale = 'de-AT';
translator.localeArea = 'de-DE';
translator.localeDefault = 'en-GB';