diff --git a/.changeset/breezy-poets-count.md b/.changeset/breezy-poets-count.md new file mode 100644 index 0000000..c3b113a --- /dev/null +++ b/.changeset/breezy-poets-count.md @@ -0,0 +1,5 @@ +--- +'@shopify/i18next-shopify': patch +--- + +Don't break objects when inserting key prop diff --git a/.changeset/breezy-pugs-provide.md b/.changeset/breezy-pugs-provide.md new file mode 100644 index 0000000..a155c52 --- /dev/null +++ b/.changeset/breezy-pugs-provide.md @@ -0,0 +1,5 @@ +--- +'@shopify/i18next-shopify': patch +--- + +Only format count/ordinal as number if they are one diff --git a/package.json b/package.json index 9e0fd3c..094ff08 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,9 @@ "type": "git", "url": "https://github.com/Shopify/i18next-shopify" }, + "peerDependencies": { + "react": "*" + }, "devDependencies": { "@babel/cli": "^7.15.0", "@babel/core": "^7.15.0", diff --git a/src/utils.js b/src/utils.js index 4596005..8644306 100644 --- a/src/utils.js +++ b/src/utils.js @@ -1,3 +1,5 @@ +const {isValidElement, cloneElement} = require('react'); + const arr = []; const each = arr.forEach; @@ -34,10 +36,9 @@ export function replaceValue(interpolated, pattern, replacement) { if (split.length !== 1 && typeof replacement === 'object') { // Return array w/ the replacement - // React elements within arrays need a key prop - if (!replacement.key) { + if (!replacement.key && isValidElement(replacement)) { // eslint-disable-next-line no-param-reassign - replacement = {...replacement, key: pattern.toString()}; + replacement = cloneElement(replacement, {key: pattern.toString()}); } return [split[0], replacement, split[1]].flat(); diff --git a/test/shopify_format_with_react_i18next.spec.js b/test/shopify_format_with_react_i18next.spec.js index 0196c44..d0885fa 100644 --- a/test/shopify_format_with_react_i18next.spec.js +++ b/test/shopify_format_with_react_i18next.spec.js @@ -207,6 +207,29 @@ describe('shopify format with react-i18next (t)', () => { informal_greeting: 'Sup Joe', }); }); + + it('matches expect.anything() in interpolated variables', () => { + const {result} = renderHook(() => useTranslation('translation')); + const {t} = result.current; + + expect( + t('string_with_single_mustache', { + name: Joe, + }), + ).toStrictEqual( + t('string_with_single_mustache', {name: expect.anything()}), + ); + }); + + it('accepts arrays as interpolated variables', () => { + const {result} = renderHook(() => useTranslation('translation')); + const {t} = result.current; + expect( + t('string_with_single_mustache', { + name: ['Joe', 'Jane'], + }), + ).toStrictEqual(['Hello ', 'Joe', 'Jane', '!']); + }); }); describe('with react-i18next (Trans)', () => {