Improve withSSR type definition

[skovy]

Currently, there are few issues with the withSSR type definitions:

1. Function components aren't valid
2. Any component (class or function) with props were invalid
3. No type-safety around initialI18nStore and initialLanguage

Function Components

const FunctionComponent = () => {
  return null;
};

const ExtendedFn = withSSR()(FunctionComponent);
//                           ^^^^^^^^^^^^^^^^^
// Type '() => null' provides no match for the signature 'new (props: {}, context?: any): Component<{}, any, any>'

<ExtendedFn initialLanguage={'en'} initialI18nStore={{ en: { namespace: { key: 'value' } } }} />;

This is because the type definition for WrappedComponent is React.ComponentClass which doesn't include React.FunctionComponent. This can be solved with the React.ComponentType.

Class Components

class ClassComponentWithProps extends React.Component<{ foo: number }> {
  render() {
    return null;
  }
}

const ExtendedClassWithProps = withSSR()(ClassComponentWithProps);
//                                       ^^^^^^^^^^^^^^^^^^^^^^^
// Property 'foo' is missing in type '{}' but required in type 'Readonly<{ foo: number; }>'

<ExtendedClassWithProps
  initialLanguage={'en'}
  initialI18nStore={{ en: { namespace: { key: 'value' } } }}
  foo={1}
/>;

This is because the type definition for WrappedComponent is React.ComponentClass<{}, any> meaning only props of type {} are valid (a.k.a no props). This can be fixed with a generic Props.

initialI18nStore and initialLanguage

class ClassComponent extends React.Component {
  render() {
    return null;
  }
}

const ExtendedClass = withSSR()(ClassComponent);

<ExtendedClass initialLanguage={1234} initialI18nStore={5678} />;
//                              ^^^^                    ^^^^
//                             valid                   valid

From what I can infer from the docs and source, initialLanguage should be of type string. I am less confident about initialI18nStore but it appears it should be of type Resource? I'm basing this assumption off these types:

https://github.com/i18next/i18next/blob/85bbb39d66dc30ade0693c20076cbb4f84fd7652/index.d.ts#L650-L662

But in the code in this repo, it appears it's used as i18n.services.resourceStore.data = initialI18nStore; (and not i18n.services.resourceStore= initialI18nStore;) which these types suggest?

https://github.com/i18next/i18next/blob/85bbb39d66dc30ade0693c20076cbb4f84fd7652/index.d.ts#L672-L681

[coveralls]

Coverage remained the same at 95.377% when pulling d5ee3ff on skovy:skovy/improve-wtih-ssr-types into 1a42148 on i18next:master.

[rosskevin]

To me it appears you have it correct and it is i18next.Resource. Let's go with this until we determine otherwise.

[rosskevin]

This appears to be:

1. fixing the ComponentType (more flexible - accepts Function components)
2. removing the indexer and intersecting Props generic instead - more restrictive but correct and if it was being used properly will not break anything (though improper use will be revealed)
3. tightening types on the initial* properties

TL;DR given the above I don't regard it as a breaking change, even though it is tightening types and some users may have new errors revealed.

Thanks @skovy

@jamuhl this can be a patch release.

[skovy]

Thanks @rosskevin for the review, I appreciate it 🙌

[jamuhl]

published in react-i18next@10.12.5