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

@dhis2/d2-i18n

v1.1.3

Published

configuration wrapper for i18next translations

Downloads

7,320

Readme

Purpose

Provides internationization support for d2 frontend Apps.

Installation

yarn add @dhis2/d2-i18n

Extracting and generating locale strings

Extraction and generation are performed automatically by the build and start commands of @dhis2/cli-app-scripts. Optionally, they can be run independent of the build as well:

yarn d2-app-scripts i18n extract
yarn d2-app-scripts i18n generate

In App Code

On dev/build phase src/locales directory would be created. It will contain necessary setup for internationalization, date/time, calendar etc. It is auto-generated, so please don't update it, any changes to it will be lost.

At the top of src/index.js (assuming it's the main entry point to your App). Add the following,

import './locales'

Changing User Locale

Create a function changeLocale and isLangRTL as below. You should call this function in App loading phase.

function isLangRTL(code) {
    const langs = ['ar', 'fa', 'ur']
    const prefixed = langs.map(c => `${c}-`)
    return (
        langs.includes(code) ||
        prefixed.filter(c => code.startsWith(c)).length > 0
    )
}

function changeLocale(locale) {
    moment.locale(locale)
    i18n.changeLanguage(locale)
    document.documentElement.setAttribute(
        'dir',
        isLangRTL(locale) ? 'rtl' : 'ltr'
    )
}

Translations

Pass strings to be translated into i18n.t function as below.

import i18n from '@dhis2/d2-i18n'
i18n.t('translation string')

Context

Pass context property on second arg. to i18n.t

i18n.t('hello world', {
    context: 'a customary string to welcome a new born developer',
})

extract-pot will automatically generate msgctxt field before msgid in the en.pot file, giving translators a better context for translations.

msgctxt "a customary string to welcome a new born developer"
msgid "hello world"
msgstr ""

.gitignore

Append directory src/locales at the end. Because on dev/build phase src/locales is auto-generated.

Upgrade

yarn

yarn upgrade --scope @dhis2

.travis.yml

In .travis.yml before build/deploy step add yarn localize

Notes

  • We don't use react-i18next because handling cursor in text editor when ASCII and RTL characters are mixed is impossible to edit. Some ASCII characters move the cursor to one end of the line while RTL characters take cursor to the opposite end. Using variables in RTL language strings do not work because the first {{ might be entered correctly when translating but when we go to type the ending sequence }} the cursor ends up in the wrong place making it impossible to translate.

Report an issue

The issue tracker can be found in DHIS2 JIRA under the LIBS project.

Deep links: