gilbsgilbs / babel-plugin-i18next-extract

Babel plugin that statically extracts i18next and react-i18next translation keys.
https://i18next-extract.netlify.com
MIT License
159 stars 37 forks source link

Add comment hint to explicitly register translation keys #241

Open crtl opened 2 years ago

crtl commented 2 years ago

Is your feature request related to a problem? Please describe.

I am using typescript and enums for some shared error messages so for example for forms I would use:

export enum FormError {
  PasswordInvalid = "passwordInvalid",
  UsernameInvalid = "usernameInvalid",
 // ...
}

And in my component I reference it using:

// ...
return (<FormFieldError>
  {t(FormError.PasswordInvalid)}
</FormFieldError />);

The plugin is not able to extract these keys and tells me to:

babel-plugin-i18next-extract: Extraction error in /src/auth/components/restore-password-form.tsx at line 70. Couldn't evaluate i18next key. You should either make the key evaluable or skip the
 line using a skip comment (/* i18next-extract-disable-line */ or /* i18next-extract-disable-next-line */).

Describe the solution you'd like It would be nice to have a comment hint to manually register specific phrases unrelated to t calls. For example the above enum could look something like:


export enum FormError {
  /* i18next-extract-register-key passwordInvalid */
  PasswordInvalid = "passwordInvalid",

  /* i18next-extract-register-key usernameInvalid */
  UsernameInvalid = "usernameInvalid",
}

Describe alternatives you've considered

Workaround is to copy the values and create a component containing only string literals to register the phrases explicitly but then the registration of phrases is separated from their definition which is cumbersome.

const RegisterPhrases: FC = (props) => {
  const {t} = useTranslation();

  // Register phrases
  t("passwordInvalid");
  t("usernameInvalid"); 

  return null;
};