allow iterable with objects as children

[gshokanov]

This PR fixes TypeScript error which prevents multiple nodes to be used inside core React elements when allowObjectInHTMLChildren is set to true.

Code example that fails on the latest published version with React 18 but works correctly with this PR:

<Trans t={t}>
  View <b>{{ count }} cards</b>
</Trans>

Resolves #1506

Checklist

• only relevant code is changed (make a diff before you submit the PR)
• run tests npm run test
• tests are included
• commit message and code follows the Developer's Certification of Origin

Checklist (for documentation change)

• only relevant documentation part is changed (make a diff before you submit the PR)
• motivation/reason is provided
• commit message and code follows the Developer's Certification of Origin

[coveralls]

Coverage remained the same at 95.862% when pulling 4e045a0 on gshokanov:update-object-as-children into 2759ed2 on i18next:master.

[lexanth]

I think this would be cleaner:

type HTMLChild = ReactNode | ObjectOrNever;
declare module 'react' {
  interface HTMLAttributes<T> {
    children?: HTMLChild | Iterable<HTMLChild>;
  }
}

I've used Iterable because that's what react itself uses for ReactNode's circular reference, and given the type a specific name so that ObjectOrNever still actually represents ObjectOrNever.

[gshokanov]

True, updated MR. Thx for the suggestion!

[gshokanov]

Interestingly enough Iterable does not work correctly when combined with t function, but Array works as expected 🤔
Here's a code example:

<div>
    {t('hello')}
    <span>Hi</span>
</div>

I get a compilation error on outer div

[gshokanov]

Either disabling allowObjectInHTML or changing Iterable to Array fixes it

[gshokanov]

The error is:

This JSX tag's 'children' prop expects a single child of type 'ReactI18NextChild | Iterable<ReactI18NextChild>', but multiple children were provided.ts(2746)

[pedrodurek]

Looks great to me! Thanks!

[adrai]

included in v11.18.1