Format count and ordinal as number (#181)

* Format count cardinalization as number

* Format count ordinalization as number

* changeset

.changeset/five-trees-sell.md

@@ -0,0 +1,5 @@
+---
+'@shopify/i18next-shopify': patch
+---
+
+Supports formatting of count and ordinal values as numbers

src/index.js

@@ -46,10 +46,20 @@ class ShopifyFormat {
     let interpolated = res;
     matches.forEach((match) => {
       const interpolation_key = match.replace(MUSTACHE_FORMAT, '$1');
-      const value =
+
+      let value =
         interpolation_key === 'ordinal'
           ? options.count || options.ordinal
           : options[interpolation_key];
+
+      // Cardinal and Ordinal pluralizations should be formatted according to their locale
+      // eg. "1,234,567th" instead of "1234567th"
+      if (interpolation_key === 'ordinal' || interpolation_key === 'count') {
+        value = new Intl.NumberFormat(this.i18next.resolvedLanguage).format(
+          value,
+        );
+      }
+
       interpolated = utils.replaceValue(interpolated, match, value ?? '');
     });
     return interpolated;

test/shopify_format.spec.js

@@ -205,6 +205,12 @@ describe('shopify format', () => {
       );
     });
 
+    it('formats cardinal pluralization according to locale format', () => {
+      expect(i18next.t('cardinal_pluralization', {count: 5000})).toBe(
+        'I have 5,000 cars.',
+      );
+    });
+
     it('falls back to the `other` key if the proper cardinal pluralization key is missing', () => {
       expect(
         // A count of 1 in `en` should use the `one` key, but it's missing.
@@ -240,6 +246,12 @@ describe('shopify format', () => {
       ).toBe('This is my 4th car');
     });
 
+    it('formats ordinal pluralization according to locale format', () => {
+      expect(
+        i18next.t('ordinal_pluralization', {count: 5000, ordinal: true}),
+      ).toBe('This is my 5,000th car');
+    });
+
     it('handles ordinal pluralization lookups (using ordinal: <number>)', () => {
       expect(i18next.t('ordinal_pluralization', {ordinal: 1})).toBe(
         'This is my 1st car',