ICU: Fixes macro to support count prop and expressions better #939
Conversation
Fix for i18next/i18next#1295 Adds support for ICU message syntax inside the `defaults` attribute This allows the Trans macro to be used with linters and other code analysis tools that expect valid JSX syntax as children, by using the defaults prop instead of children for the message. Also adds support fo the `<SelectOrdinal>` tag Fixes a bug where `Trans` was imported from 'react/i18next' instead of 'react-i18next'
…n the transKeepBasicHtmlNodesFor array
In the `useTranslation` hook, `useContext` is called conditionally, which breaks the Rule of Hooks, so it may cause problems in the future. This fixes it by calling `useContext` on every render, just not always using the result from it.
Fixes for i18next#937 Allows count prop to use a variable also named count Add support for expressions in the count and switch props Handles the values prop better Allows macros to be self-closing without children Trims newlines and whitespace around code formatted with prettier or other formatting tools
|
Somehow in my merge/rebase of master, I ended up with lots of extra commits, but the changed files is correct. If you would like me to clean up the commits, I can do the PR again. |
| // take the switch for select element | ||
| let exprName = attr.node.value.expression.name; | ||
| if (!exprName) { | ||
| exprName = 'selectKey'; |
There was a problem hiding this comment.
I couldn't use switch because it is a reserved word. I'm open to alternate names for this.
It is used when switch is an expression.
<Select
switch={'fe'+'male'} // very contrived example
...
/>
// This transforms to:
<Trans values={{ selectKey: 'fe'+'male' }} defaults="{selectKey, select, ....} />
I don't think this will be used very often, but it was the same logic as Plural and count so I included it for completeness.
| const thisTrans = processTrans(children, babel, componentStartIndex); | ||
|
|
||
| let pluralForm = attr.node.name.name; | ||
| if (pluralForm.indexOf('$') === 0) pluralForm = pluralForm.replace('$', '='); | ||
|
|
||
| mem.defaults = `${mem.defaults} ${pluralForm} {${thisTrans.defaults}}`; | ||
| mem.components = mem.components.concat(thisTrans.components); | ||
| mem.values = mem.values.concat(thisTrans.values); |
There was a problem hiding this comment.
this was causing problems with duplicate keys in values, and I'm not sure I understand the use case and all the test cases I needed are passing, so I just removed it.
If we need to support this, then I can add code to dedupe these from values.
| const thisTrans = processTrans(children, babel, componentStartIndex); | ||
|
|
||
| mem.defaults = `${mem.defaults} ${attr.node.name.name} {${thisTrans.defaults}}`; | ||
| mem.components = mem.components.concat(thisTrans.components); | ||
| mem.values = mem.values.concat(thisTrans.values); |
There was a problem hiding this comment.
see comment above for similar code
|
Will check this later today and merge/publish |
|
published in react-i18next@10.12.4 |
Fixes for #937
Allows count prop to use a variable also named count
Add support for expressions in the count and switch props
Handles the values prop better
Allows macros to be self-closing without children
Trims newlines and whitespace around code formatted with prettier or other formatting tools
If the
countprop is also namedcount, it copies it to thecountprop ofTrans:If
countis an expression it also copies it toTransas thecountprop:Also, if code is formatted with prettier, the extra whitespace was getting into the translations, so now trims the whitespace back to normal
If you had a values prop and a count, sometimes they didn't merge correctly. I believe that is fixed now.
The above also works for
SelectOrdinalandSelectwith theswitchprop.