Merge pull request #21871 from MichaReiser/react-i18next-generic-translate

React-i18next Generic translate

types/react-i18next/index.d.ts

@@ -1,10 +1,10 @@
-// Type definitions for react-i18next 4.6
+// Type definitions for react-i18next 7.0
 // Project: https://github.com/i18next/react-i18next
 // Definitions by: Giedrius Grabauskas <https://github.com/GiedriusGrabauskas>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
-// TypeScript Version: 2.3
+// TypeScript Version: 2.4
 
-import { TranslationFunction } from "i18next";
+import { i18n as I18n, TranslationFunction } from "i18next";
 
 import I18nextProvider from "./src/I18nextProvider";
 import Interpolate from "./src/interpolate";
@@ -22,16 +22,6 @@ export {
     TranslationFunction
 };
 
-/**
- * Extend your component's Prop interface with this one to get access to `this.props.t`
- *
- * Please note that if you use the `translateFuncName` option, you should create
- * your own interface just like this one, but with your name of the translation function.
- *
- * interface MyComponentProps extends ReactI18next.InjectedTranslateProps {}
- */
-export interface InjectedTranslateProps {
-    t?: TranslationFunction;
-}
+export { InjectedI18nProps, InjectedTranslateProps } from "./src/props";
 
 export as namespace reactI18Next;

types/react-i18next/src/context.d.ts

@@ -0,0 +1,14 @@
+import { i18n } from "i18next";
+
+export interface ReactI18NextOptions {
+    wait?: boolean;
+    withRef?: boolean;
+    bindI18n?: string;
+    bindStore?: string;
+    translateFuncName?: string;
+    nsMode?: string;
+}
+
+export function setDefaults(options: ReactI18NextOptions): void;
+
+export function setI18n(instance: i18n): void;

types/react-i18next/src/props.d.ts

@@ -0,0 +1,24 @@
+import {i18n as I18n, TranslationFunction} from "i18next";
+
+/**
+ * Extend your component's Prop interface with this one to get access to `this.props.t`
+ *
+ * Please note that if you use the `translateFuncName` option, you should create
+ * your own interface just like this one, but with your name of the translation function.
+ *
+ * interface MyComponentProps extends ReactI18next.InjectedTranslateProps {}
+ * 
+ * Then specify the name of the translate function as generic argument
+ * 
+ * const translated = translate<string, "_">("view", { translateFuncName: "_" })(YourComponent);
+ */
+export interface InjectedTranslateProps {
+    t: TranslationFunction;
+}
+
+/**
+ * Extend your component's Prop interface with this one to get access to `this.props.i18n`
+ */
+export interface InjectedI18nProps {
+    i18n: I18n
+}

types/react-i18next/src/translate.d.ts

@@ -1,15 +1,64 @@
 import * as React from "react";
-import { i18n } from "i18next";
+import { i18n as I18n, TranslationFunction } from "i18next";
+import { InjectedTranslateProps, InjectedI18nProps } from "./props";
+import { setDefaults, setI18n } from "./context";
 
-export interface TranslateOptions {
+export interface TranslateOptions<TTranslateFuncName extends string = string> {
     withRef?: boolean;
     bindI18n?: string;
     bindStore?: string;
-    translateFuncName?: string;
+    translateFuncName?: TTranslateFuncName;
     wait?: boolean;
     nsMode?: string;
-    i18n?: i18n;
+    i18n?: I18n;
 }
 
-// tslint:disable-next-line:ban-types
-export default function translate<TKey extends string = string>(namespaces?: TKey[] | TKey, options?: TranslateOptions): <C extends Function>(WrappedComponent: C) => C;
+export interface TranslateHocProps {
+    i18n?: I18n;
+    initialI18nStore?: object;
+    initialLanguage?: string;
+}
+
+// Diff / Omit taken from https://github.com/Microsoft/TypeScript/issues/12215#issuecomment-311923766
+type Diff<T extends string, U extends string> = ({[P in T]: P } & {[P in U]: never } & { [x: string]: never })[T];
+type Omit<T, K extends string> = Pick<T, Diff<keyof T, K>>;
+
+type InjectedProps = InjectedI18nProps & InjectedTranslateProps;
+
+export interface WrapperComponentClass<P = {}, PWrapped = {}> extends React.ComponentClass<P & TranslateHocProps> {
+    new (props: P, context?: any): React.Component<P & TranslateHocProps, React.ComponentState> & { getWrappedInstance(): React.Component<PWrapped> };
+}
+
+// Injects props and removes them from the prop requirements.
+// Adds the new properties t (or whatever the translation function is called) and i18n if needed.
+export type InferableComponentEnhancerWithProps<TTranslateFunctionName extends string> =
+    <P extends {}>(component: React.ComponentClass<P> | React.StatelessComponent<P>) =>
+        React.ComponentClass<Omit<P, keyof InjectedI18nProps | TTranslateFunctionName> & TranslateHocProps>;
+
+export type InferableComponentEnhancerWithPropsAndRef<TTranslateFunctionName extends string> =
+    <P extends {}>(component: React.ComponentClass<P> | React.StatelessComponent<P>) =>
+        WrapperComponentClass<Omit<P, keyof InjectedI18nProps | TTranslateFunctionName>, P>;
+
+export interface Translate {
+    <TNamespace extends string>
+    (namespaces?: TNamespace | TNamespace[], options?: Omit<TranslateOptions, "translateFuncName"> & { withRef?: false }):
+        InferableComponentEnhancerWithProps<"t">;
+
+    <TNamespace extends string>
+    (namespaces?: TNamespace | TNamespace[], options?: Omit<TranslateOptions, "translateFuncName"> & { withRef: true }):
+        InferableComponentEnhancerWithPropsAndRef<"t">;
+
+    <TNamespace extends string, TTranslateFunctionName extends string>
+    (namespaces?: TNamespace | TNamespace[], options?: TranslateOptions<TTranslateFunctionName> & { withRef?: false }):
+        InferableComponentEnhancerWithProps<TTranslateFunctionName>;
+
+    <TNamespace extends string, TTranslateFunctionName extends string>
+    (namespaces?: TNamespace | TNamespace[], options?: TranslateOptions<TTranslateFunctionName> & { withRef: true }):
+        InferableComponentEnhancerWithPropsAndRef<TTranslateFunctionName>;
+
+    setDefaults: typeof setDefaults;
+    setI18n: typeof setI18n;
+}
+
+declare const translate: Translate;
+export default translate;

types/react-i18next/test/react-i18next-tests.tsx

@@ -1,33 +1,54 @@
 import * as React from 'react';
 import * as i18n from 'i18next';
 import { translate, I18nextProvider, Interpolate, InjectedTranslateProps, TranslationFunction, loadNamespaces, Trans } from 'react-i18next';
+import { InjectedI18nProps } from 'react-i18next/src/props';
 
 interface InnerAnotherComponentProps {
-  _?: TranslationFunction;
+  _: TranslationFunction;
 }
 
 class InnerAnotherComponent extends React.Component<InnerAnotherComponentProps> {
   render() {
-    const _ = this.props._!;
+    const _ = this.props._;
     return <p>{_('content.text', { /* options t options */ })}</p>;
   }
 }
 
-const AnotherComponent = translate('view', { wait: true, translateFuncName: '_' })(InnerAnotherComponent);
+const AnotherComponent = translate<Key, "_">('view', { wait: true, translateFuncName: '_' })(InnerAnotherComponent);
+const instanceWithoutRef = new AnotherComponent({});
+instanceWithoutRef.componentWillReceiveProps!({
+    i18n,
+    initialI18nStore: { context: { text: "a message" } },
+    initialLanguage: "en"
+}, {});
+
+translate.setDefaults({ wait: false });
+translate.setI18n(i18n);
+
+const AnotherComponentWithRef = translate<Key, "_">("view" as Key, { translateFuncName: "_", withRef: true })(InnerAnotherComponent);
+const instanceWithRef = new AnotherComponentWithRef({});
+const ref = instanceWithRef.getWrappedInstance();
+instanceWithRef.componentWillReceiveProps!({
+    i18n,
+    initialI18nStore: { context: { text: "a message" } },
+    initialLanguage: "en"
+}, {});
 
 class InnerYetAnotherComponent extends React.Component<InjectedTranslateProps> {
   render() {
-    const t = this.props.t!;
+    const t = this.props.t;
     return <p>{t('usingDefaultNS', { /* options t options */ })}</p>;
   }
 }
 
 const YetAnotherComponent = translate()(InnerYetAnotherComponent);
 
-@translate(['view', 'nav'], { wait: true })
+const YetAnotherComponentWithRef = translate(undefined, { withRef: true })(InnerYetAnotherComponent);
+new YetAnotherComponentWithRef({}).getWrappedInstance();
+
 class TranslatableView extends React.Component<InjectedTranslateProps> {
   render() {
-    const t = this.props.t!;
+    const t = this.props.t;
     const interpolateComponent = <strong>"a interpolated component"</strong>;
 
     return (
@@ -55,12 +76,14 @@ class TranslatableView extends React.Component<InjectedTranslateProps> {
   }
 }
 
+const TranslatedView = translate(["view", "nav"] as Key[], { wait: true })(TranslatableView);
+
 class App extends React.Component {
   render() {
     return (
       <div className='main'>
         <main>
-          <TranslatableView />
+          <TranslatedView />
         </main>
       </div>
     );
@@ -81,12 +104,34 @@ loadNamespaces({ components: [App], i18n }).then(() => { }).catch(error => { });
 
 type Key = "view" | "nav";
 
-@translate<Key>(['view', 'nav'])
 class GenericsTest extends React.Component<InjectedTranslateProps> {
   render() { return null; }
 }
 
-@translate<Key>('view')
+const TranslatedGenericsTest = translate(["view", "nav"] as Key[])(GenericsTest);
+<TranslatedGenericsTest />;
+
 class GenericsTest2 extends React.Component<InjectedTranslateProps> {
   render() { return null; }
 }
+
+const TranslatedGenericsTest2 = translate("view" as Key)(GenericsTest2);
+<TranslatedGenericsTest2 />;
+
+class ComponentWithInjectedI18n extends React.Component<InjectedI18nProps> {
+  render() { return null; }
+}
+
+const TranslatedComponentWithInjectedI18n = translate()(ComponentWithInjectedI18n);
+<TranslatedComponentWithInjectedI18n />;
+
+function StatlessComponent(props: InjectedTranslateProps) {
+  return <h1>{props.t("hy")}</h1>;
+}
+
+const TranslatedStatlessComponent = translate()(StatlessComponent);
+<TranslatedStatlessComponent />;
+
+interface CustomTranslateFunctionProps {
+  _: TranslationFunction;
+}

types/react-i18next/tsconfig.json

@@ -16,6 +16,7 @@
         "types": [],
         "noEmit": true,
         "forceConsistentCasingInFileNames": true,
+        "strictFunctionTypes": true,
         "jsx": "react",
         "experimentalDecorators": true
     },

types/react-i18next/v4/index.d.ts

@@ -0,0 +1,37 @@
+// Type definitions for react-i18next 4.6
+// Project: https://github.com/i18next/react-i18next
+// Definitions by: Giedrius Grabauskas <https://github.com/GiedriusGrabauskas>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+// TypeScript Version: 2.3
+
+import { TranslationFunction } from "i18next";
+
+import I18nextProvider from "./src/I18nextProvider";
+import Interpolate from "./src/interpolate";
+import loadNamespaces from "./src/loadNamespaces";
+import Trans from "./src/trans";
+import translate from "./src/translate";
+
+export {
+    I18nextProvider,
+    Interpolate,
+    loadNamespaces,
+    Trans,
+    translate,
+    // Exports for TypeScript only
+    TranslationFunction
+};
+
+/**
+ * Extend your component's Prop interface with this one to get access to `this.props.t`
+ *
+ * Please note that if you use the `translateFuncName` option, you should create
+ * your own interface just like this one, but with your name of the translation function.
+ *
+ * interface MyComponentProps extends ReactI18next.InjectedTranslateProps {}
+ */
+export interface InjectedTranslateProps {
+    t?: TranslationFunction;
+}
+
+export as namespace reactI18Next;

types/react-i18next/v4/src/I18nextProvider.d.ts

@@ -0,0 +1,12 @@
+import * as React from "react";
+import { i18n } from "i18next";
+
+// tslint:disable-next-line:interface-name
+export interface I18nextProviderProps {
+    i18n: i18n;
+    children: React.ReactElement<any>;
+    initialI18nStore?: any;
+    initialLanguage?: string;
+}
+
+export default class I18nextProvider extends React.Component<I18nextProviderProps> { }

types/react-i18next/v4/src/interpolate.d.ts

@@ -0,0 +1,23 @@
+import * as React from "react";
+import { InterpolationOptions } from "i18next";
+
+export type InterpolateValue = string | JSX.Element;
+
+export interface InterpolatePropsBase {
+    parent?: string;
+    regexp?: RegExp;
+    useDangerouslySetInnerHTML?: boolean;
+    dangerouslySetInnerHTMLPartElement?: string;
+    options?: InterpolationOptions;
+    i18nKey?: string;
+    className?: string;
+    style?: React.CSSProperties;
+}
+
+export interface OtherInterpolateProps {
+    [regexKey: string]: InterpolateValue | RegExp | InterpolationOptions | boolean | undefined;
+}
+
+export type InterpolateProps = InterpolatePropsBase & OtherInterpolateProps;
+
+export default class Interpolate extends React.Component<InterpolateProps> { }

types/react-i18next/v4/src/loadNamespaces.d.ts

@@ -0,0 +1,9 @@
+import * as React from "react";
+import { i18n } from "i18next";
+
+export interface LoadNamespacesArguments {
+    components: Array<React.ComponentClass<any> | React.StatelessComponent<any>>;
+    i18n: i18n;
+}
+
+export default function loadNamespaces(args: LoadNamespacesArguments): Promise<void>;

types/react-i18next/v4/src/trans.d.ts

@@ -0,0 +1,8 @@
+import * as React from "react";
+
+export interface TransProps {
+    i18nKey?: string;
+    [name: string]: any;
+}
+
+export default class Trans extends React.Component<TransProps> { }

types/react-i18next/v4/src/translate.d.ts

@@ -0,0 +1,15 @@
+import * as React from "react";
+import { i18n } from "i18next";
+
+export interface TranslateOptions {
+    withRef?: boolean;
+    bindI18n?: string;
+    bindStore?: string;
+    translateFuncName?: string;
+    wait?: boolean;
+    nsMode?: string;
+    i18n?: i18n;
+}
+
+// tslint:disable-next-line:ban-types
+export default function translate<TKey extends string = string>(namespaces?: TKey[] | TKey, options?: TranslateOptions): <C extends Function>(WrappedComponent: C) => C;

types/react-i18next/v4/test/react-i18next-tests.tsx

@@ -0,0 +1,92 @@
+import * as React from 'react';
+import * as i18n from 'i18next';
+import { translate, I18nextProvider, Interpolate, InjectedTranslateProps, TranslationFunction, loadNamespaces, Trans } from 'react-i18next';
+
+interface InnerAnotherComponentProps {
+  _?: TranslationFunction;
+}
+
+class InnerAnotherComponent extends React.Component<InnerAnotherComponentProps> {
+  render() {
+    const _ = this.props._!;
+    return <p>{_('content.text', { /* options t options */ })}</p>;
+  }
+}
+
+const AnotherComponent = translate('view', { wait: true, translateFuncName: '_' })(InnerAnotherComponent);
+
+class InnerYetAnotherComponent extends React.Component<InjectedTranslateProps> {
+  render() {
+    const t = this.props.t!;
+    return <p>{t('usingDefaultNS', { /* options t options */ })}</p>;
+  }
+}
+
+const YetAnotherComponent = translate()(InnerYetAnotherComponent);
+
+@translate(['view', 'nav'], { wait: true })
+class TranslatableView extends React.Component<InjectedTranslateProps> {
+  render() {
+    const t = this.props.t!;
+    const interpolateComponent = <strong>"a interpolated component"</strong>;
+
+    return (
+      <div>
+        <h1>{t('common:appName')}</h1>
+        <AnotherComponent />
+        <YetAnotherComponent />
+        <Interpolate
+          parent='p'
+          i18nKey='common:interpolateSample'
+          value='"some value in props"'
+          component={interpolateComponent}
+        />
+        <Interpolate
+          parent='p'
+          i18nKey='common:interpolateSample'
+          useDangerouslySetInnerHTML={true}
+          dangerouslySetInnerHTMLPartElement='span'
+          value='"some value in props"'
+          component={interpolateComponent}
+        />
+        <a href='https://github.com/i18next/react-i18next' target='_blank'>{t('nav:link1')}</a>
+      </div>
+    );
+  }
+}
+
+class App extends React.Component {
+  render() {
+    return (
+      <div className='main'>
+        <main>
+          <TranslatableView />
+        </main>
+      </div>
+    );
+  }
+}
+
+<I18nextProvider i18n={i18n}>
+  <App />
+</I18nextProvider>;
+
+loadNamespaces({ components: [App], i18n }).then(() => { }).catch(error => { });
+
+<Trans count={5} />;
+<Trans count={5} i18nKey="key" />;
+<Trans count={5}>
+  <App />
+</Trans>;
+
+type Key = "view" | "nav";
+
+@translate<Key>(['view', 'nav'])
+class GenericsTest extends React.Component<InjectedTranslateProps> {
+  render() { return null; }
+}
+
+@translate<Key>('view')
+class GenericsTest2 extends React.Component<InjectedTranslateProps> {
+  render() { return null; }
+}

types/react-i18next/v4/tsconfig.json

@@ -0,0 +1,34 @@
+{
+    "compilerOptions": {
+        "module": "commonjs",
+        "lib": [
+            "es6",
+            "dom"
+        ],
+        "noImplicitAny": true,
+        "noImplicitThis": true,
+        "strictNullChecks": true,
+        "baseUrl": "../../",
+        "typeRoots": [
+            "../../"
+        ],
+        "paths": {
+            "react-i18next": [ "react-i18next/v4" ]
+        },
+        "types": [],
+        "noEmit": true,
+        "forceConsistentCasingInFileNames": true,
+        "strictFunctionTypes": true,
+        "jsx": "react",
+        "experimentalDecorators": true
+    },
+    "files": [
+        "index.d.ts",
+        "test/react-i18next-tests.tsx",
+        "src/I18nextProvider.d.ts",
+        "src/interpolate.d.ts",
+        "src/loadNamespaces.d.ts",
+        "src/trans.d.ts",
+        "src/translate.d.ts"
+    ]
+}

types/react-i18next/v4/tslint.json

@@ -0,0 +1 @@
+{ "extends": "dtslint/dt.json" }