jsonkeys v0.0.5

JsonKeys

Transform a JSON file to a javascript object, where the keys are the same and each value is the order of the keys joined by a specified delimiter.

This package is very useful when using libraries like i18next or other javascript internationalization-framework to avoid the use of "magic strings".

Example

Input

{
  "HOME_PAGE": {
    "TITLE": "Hello world",
    "DESCRIPTION": "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
    "NAVIGATION": {
      "HOME_PAGE": "Home Page",
      "ABOUT": "About"
    }
  }
}

Output

const JsonKeys = {
    "HOME_PAGE": {
        "TITLE": "HOME_PAGE.TITLE",
        "DESCRIPTION": "HOME_PAGE.DESCRIPTION",
        "NAVIGATION": {
            "HOME_PAGE": "HOME_PAGE.NAVIGATION.HOME_PAGE",
            "ABOUT": "HOME_PAGE.NAVIGATION.ABOUT"
        }
    }
};
export default JsonKeys;

React Example

// The 'magic strings' way
return (
      <h1>{t('HOME_PAGE.TITLE')}</h1>
)

// The alternative way (using JsonKeys)
return (
      <h1>{t(TransKeys.HOME_PAGE.TITLE)}</h1>
)

Angular Example

<!-- The 'magic strings' way -->
<h1>{{'HOME_PAGE.TITLE' | i18next}}</h1>

<!-- The alternative way (using JsonKeys) -->
<h1>{{TransKeys.HOME_PAGE.TITLE | i18next}}</h1>

How to

1. Installation

npm install --save-dev jsonkeys

2. Create a config file

{
    "inputFile": "src/assets/i18n/en.json",
    "destinationFile": "src/constants/translation-keys.ts", 
    "constantName": "TransKeys",
    "delimiter": "."
}

3. Add a script to your package.json

{
  // ...
  "scripts": {
      "json-keys": "jsonkeys -c jsonkeys.config.json -w"
  },
  // ...
}

Options:
  -V, --version        output the version number
  -c, --config <file>  config input file (required)
  -w, --watch          watch changes in the input file
  -h, --help           output usage information

4. Run

npm run json-keys

License - MIT

Enjoy!