React-native-i18n: i18n lint

[sibelius]

is there any way to "lint" the codebase

so we can make sure there is no wrong i18n.t calls?

maybe we can make flowtype handle this check for us

any thoughts on this @calebmer?

[cem2ran]

Yes! I'm already doing this actually.

Here my entrypoint for my translations:

import I18n from 'react-native-i18n';
import en from './en.js';
import da from './da.js';

I18n.fallbacks = true;

const translations: {[key: string]: typeof en & $Shape<typeof en>} = {
  en,
  da,
};

I18n.translations = translations;

const t = (key: $Keys<typeof en>, ops: Object = {}): string => I18n.t(key, ops);

module.exports = {
  t,
  // export keys so you can do `import {commentPlaceholder} from 'i18n'`;
  ...Object.keys(en).reduce((strings, key) => ({...strings, [key]: t(key)}), {
  }),
};

en.js and da.js are simply:

//@flow
//prettier-ignore
export default {
  commentPlaceholder: 'Say something nice...',
  ...
}

The check goes both ways, if en.js or da.js are out of sync with eachother w.r.t keys:

IDE's like intellij and webstorm even give you completions!

[sibelius]

I think we can provide a react-native-i18n typedef that handle this for us

[cem2ran]

Here's a minimal generic version. I'm not quite sure how to convert this to a typedef.

//@flow

interface I18n<T> {
  t: (key: $Keys<T>, options?: Object) => string;
  translations: { [key: string]: T & $Shape<T> };
}

//Tests
const i18n: I18n<*> = require("react-native-i18n").default;

const en = {
  hello: "hello"
};

i18n.translations = { en };

i18n.t("hello");

const da = {
  hello: "hej",
  world: "verden"
};
// $FlowExpectedError
i18n.translations = { en, da };

// $FlowExpectedError
i18n.t("world");

// $FlowExpectedError
i18n.t("hell");

const i18n2: I18n<*> = require("react-native-i18n").default;

const en2 = {
  hello: "hello",
  world: "world"
};

i18n2.translations = { en2, da };

i18n2.t("hello");
i18n2.t("world");

[sibelius]

awesome @cem2ran

tks

you could send this to flow-typed and ask for help there