release cached formatters

i18next · Oct 6, 2022 · 2a2d28a · 2a2d28a
1 parent e12564d
commit 2a2d28a
Show file tree

Hide file tree

Showing 5 changed files with 77 additions and 18 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,7 @@
+## 21.10.0
+
+- Add formatter cache [1843](https://github.com/i18next/i18next/pull/1843)
+
 ## 21.9.2
 
 - optimize single quotes replacement for $t() nesting [1836](https://github.com/i18next/i18next/issues/1836)

diff --git a/i18next.js b/i18next.js
@@ -1891,6 +1891,21 @@
     };
   }
 
+  function createCachedFormatter(fn) {
+    var cache = {};
+    return function invokeFormatter(val, lng, options) {
+      var key = lng + JSON.stringify(options);
+      var formatter = cache[key];
+
+      if (!formatter) {
+        formatter = fn(lng, options);
+        cache[key] = formatter;
+      }
+
+      return formatter(val);
+    };
+  }
+
   var Formatter = function () {
     function Formatter() {
       var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -1900,23 +1915,38 @@
       this.logger = baseLogger.create('formatter');
       this.options = options;
       this.formats = {
-        number: function number(val, lng, options) {
-          return new Intl.NumberFormat(lng, options).format(val);
-        },
-        currency: function currency(val, lng, options) {
-          return new Intl.NumberFormat(lng, _objectSpread$4(_objectSpread$4({}, options), {}, {
+        number: createCachedFormatter(function (lng, options) {
+          var formatter = new Intl.NumberFormat(lng, options);
+          return function (val) {
+            return formatter.format(val);
+          };
+        }),
+        currency: createCachedFormatter(function (lng, options) {
+          var formatter = new Intl.NumberFormat(lng, _objectSpread$4(_objectSpread$4({}, options), {}, {
             style: 'currency'
-          })).format(val);
-        },
-        datetime: function datetime(val, lng, options) {
-          return new Intl.DateTimeFormat(lng, _objectSpread$4({}, options)).format(val);
-        },
-        relativetime: function relativetime(val, lng, options) {
-          return new Intl.RelativeTimeFormat(lng, _objectSpread$4({}, options)).format(val, options.range || 'day');
-        },
-        list: function list(val, lng, options) {
-          return new Intl.ListFormat(lng, _objectSpread$4({}, options)).format(val);
-        }
+          }));
+          return function (val) {
+            return formatter.format(val);
+          };
+        }),
+        datetime: createCachedFormatter(function (lng, options) {
+          var formatter = new Intl.DateTimeFormat(lng, _objectSpread$4({}, options));
+          return function (val) {
+            return formatter.format(val);
+          };
+        }),
+        relativetime: createCachedFormatter(function (lng, options) {
+          var formatter = new Intl.RelativeTimeFormat(lng, _objectSpread$4({}, options));
+          return function (val) {
+            return formatter.format(val, options.range || 'day');
+          };
+        }),
+        list: createCachedFormatter(function (lng, options) {
+          var formatter = new Intl.ListFormat(lng, _objectSpread$4({}, options));
+          return function (val) {
+            return formatter.format(val);
+          };
+        })
       };
       this.init(options);
     }
@@ -1935,6 +1965,11 @@
       value: function add(name, fc) {
         this.formats[name.toLowerCase().trim()] = fc;
       }
+    }, {
+      key: "addCached",
+      value: function addCached(name, fc) {
+        this.formats[name.toLowerCase().trim()] = createCachedFormatter(fc);
+      }
     }, {
       key: "format",
       value: function format(value, _format, lng, options) {

diff --git a/i18next.min.js b/i18next.min.js
diff --git a/src/Formatter.js b/src/Formatter.js
@@ -40,7 +40,7 @@ function parseFormatStr(formatStr) {
 }
 
 function createCachedFormatter(fn) {
-  const cache = Object.create(null);
+  const cache = {};
   return function invokeFormatter(val, lng, options) {
     const key = lng + JSON.stringify(options);
     let formatter = cache[key];
@@ -95,6 +95,10 @@ class Formatter {
     this.formats[name.toLowerCase().trim()] = fc;
   }
 
+  addCached(name, fc) {
+    this.formats[name.toLowerCase().trim()] = createCachedFormatter(fc);
+  }
+
   format(value, format, lng, options) {
     const formats = format.split(this.formatSeparator);
 

diff --git a/test/i18next.translation.formatting.spec.js b/test/i18next.translation.formatting.spec.js
@@ -44,6 +44,8 @@ describe('i18next.translation.formatting', () => {
               intlList: 'A list of {{val, list}}',
               keyCustomFormatWithColon:
                 'Before {{date, customDate(format: EEEE d MMMM yyyy HH:mm; otherParam: 0)}}',
+              keyCustomCachedFormatWithColon:
+                'Before {{date, customDateCached(format: EEEE d MMMM yyyy HH:mm; otherParam: 0)}}',
             },
           },
         },
@@ -65,6 +67,12 @@ describe('i18next.translation.formatting', () => {
         instance.services.formatter.add('customDate', (value, lng, options) => {
           return `customized date in format ${options.format} (and other param ${options.otherParam})`;
         });
+        instance.services.formatter.addCached('customDateCached', (lng, options) => {
+          return (val) =>
+            `customized cached ${lng} date in format ${options.format} (and other param ${
+              options.otherParam
+            }) for ${val.getTime()}`;
+        });
         done();
       },
     );
@@ -225,6 +233,14 @@ describe('i18next.translation.formatting', () => {
         args: ['keyCustomFormatWithColon', { date: new Date(Date.UTC(2022, 0, 4, 14, 33, 10)) }],
         expected: 'Before customized date in format EEEE d MMMM yyyy HH:mm (and other param 0)',
       },
+      {
+        args: [
+          'keyCustomCachedFormatWithColon',
+          { date: new Date(Date.UTC(2022, 0, 4, 14, 33, 10)) },
+        ],
+        expected:
+          'Before customized cached en date in format EEEE d MMMM yyyy HH:mm (and other param 0) for 1641306790000',
+      },
     ]);
 
     tests.forEach((test) => {