Next-translate LocaleKeys

Intended for use in conjunction with next-translate. Used for generating all possible keys for the useTranslation hook with type safety.

How to install

npm install --save-dev next-translate-localekeys

How to run

npx next-translate-localekeys

Example one (Mode: "generate"):

Requirements

1. Translation Files are in /examples/locales/en
2. Goal to get all my locale keys in the generated (/examples/generated) folder with typescript support and translation comments
3. Using default seperator for next-translate

Actions

1. run npx next-translate-localeKeys generate --rootDir ./examples/locales --outDir ./examples/generated --typescript --translations
2. Go to your file where you want to use the useTranslation hook

import { FC } from 'react'; 
import useTranslation from 'next-translate/useTranslation';
import { LocaleKeys } from './examples/generated/locale_keys.g';

export const DivWithTitleFromCommonNamespace: FC = () => {
    const { t } = useTranslation(LocaleKeys.common);

    return <div>{t(LocaleKeys._common.title)}</div>;
}

Example two (Mode: "compile"):

Requirements

1. All the source code of the project which is using the locale keys object is located in examples/compiled/after
2. typescript project
3. only in production

Actions

1. Optional: insert command into pipeline (github action)
2. run npx next-translate-localekeys compile --rootDir ./examples/compiled/after --typescript
3. see result:

before:

import useTranslation from "next-translate/useTranslation";

import { LocaleKeys } from "../../generated/locale_keys.g";

export const Test = () => {
  const { t } = useTranslation(LocaleKeys.common);

  return (
    <div>
      <Test2 
        home={LocaleKeys._home + ''}
        localeKey2={LocaleKeys._dynamic.example_of_dynamic_translation       }
       />
      <div>{t(LocaleKeys._common.title)}</div>
      <div>{t(LocaleKeys._home.description )}</div>
      <div>{t(`${LocaleKeys._more_examples.   _nested_example.very_nested  }.nested`)}</div>
    </div>
  );
};

const Test2 = ({ home, localeKey2 }) => {
  const { t } = useTranslation(home);
  const localeKey = home + '.description';
    
  return <div>{t(localeKey)}{t(localeKey2)}</div>
};

after:

import useTranslation from "next-translate/useTranslation";


export const Test = () => {
  const { t } = useTranslation("common");

  return (
    <div>
      <Test2 
        home={"home"+ ''} 
        localeKey2="dynamic:example-of-dynamic-translation"
       />
      <div>{t("common:title")}</div>
      <div>{t("home:description")}</div>
      <div>{t(`more_examples:nested-example.very-nested.nested`)}</div>
    </div>
  );
};

const Test2 = ({ home, localeKey2 }) => {
  const { t } = useTranslation(home);
  const localeKey = home + '.description';
    
  return <div>{t(localeKey)}{t(localeKey2)}</div>
};

Configuration

To get all configurations possible: npx next-translate-localekeys --help

| Flag | Description | Type | Default | Required | | ---- | ----------- | ---- | ------- | -------- | | mode | current mode | "compile" or "generate" | - | * | rootDir | location of the source code. | string | - | * | outDir | place of the generated output. | string | rootDir | | errDir | location of error file. | string | rootDir | | typescript | enables typescript. | boolean | false | | translations | enables translation comments. | boolean | false | | lang | language that should be used in translation comments | string | en | | nsSeparator | char to split namespace from key. | string | ":" | | keySeparator | change the separator that is used for nested keys. | string | "." |