Auto merge of #3160 - Turbo87:intl, r=pichfl

Replace `Intl.NumberFormat` usage

This PR should hopefully fix #3158.

I've not been able to reproduce the issue locally, but it looks like it's related to `Intl.NumberFormat` and the polyfill that #3145 introduced. Since we only need this code for number formatting, and we usually want to format in the user's browser locale we can instead use `.toLocaleString()`.

I've extracted an `intl` service for this, which makes it easier to test the `format-num` helper, and brings the implementation closer to the ember-intl addon.

r? `@pichfl`

Author: bors

app/helpers/format-num.js

@@ -1,17 +1,10 @@
-import { helper } from '@ember/component/helper';
+import Helper from '@ember/component/helper';
+import { inject as service } from '@ember/service';
 
-import window from 'ember-window-mock';
+export default class FormatNumHelper extends Helper {
+  @service intl;
 
-function newNumberFormat() {
-  try {
-    return new Intl.NumberFormat(window.navigator.languages || window.navigator.language);
-  } catch {
-    return new Intl.NumberFormat('en');
+  compute([value]) {
+    return this.intl.formatNumber(value);
   }
 }
-
-export function formatNum(value) {
-  return newNumberFormat().format(value);
-}
-
-export default helper(params => formatNum(params[0]));

app/routes/application.js

@@ -2,17 +2,11 @@ import { action } from '@ember/object';
 import Route from '@ember/routing/route';
 import { inject as service } from '@ember/service';
 
-import { shouldPolyfill as shouldPolyfillGetCanonicalLocales } from '@formatjs/intl-getcanonicallocales/should-polyfill';
-import { shouldPolyfill as shouldPolyfillLocale } from '@formatjs/intl-locale/should-polyfill';
-import { shouldPolyfill as shouldPolyfillNumberFormat } from '@formatjs/intl-numberformat/should-polyfill';
-import { shouldPolyfill as shouldPolyfillPluralRules } from '@formatjs/intl-pluralrules/should-polyfill';
-
 export default class ApplicationRoute extends Route {
-  @service notifications;
   @service progress;
   @service session;
 
-  async beforeModel() {
+  beforeModel() {
     // trigger the task, but don't wait for the result here
     //
     // we don't need a `catch()` block here because network
@@ -21,35 +15,6 @@ export default class ApplicationRoute extends Route {
     //
     // eslint-disable-next-line ember-concurrency/no-perform-without-catch
     this.session.loadUserTask.perform();
-
-    // load `Intl` polyfills if necessary
-    let polyfillImports = [];
-    if (shouldPolyfillGetCanonicalLocales()) {
-      console.debug('Loading Intl.getCanonicalLocales() polyfill…');
-      polyfillImports.push(import('@formatjs/intl-getcanonicallocales/polyfill'));
-    }
-    if (shouldPolyfillLocale()) {
-      console.debug('Loading Intl.Locale polyfill…');
-      polyfillImports.push(import('@formatjs/intl-locale/polyfill'));
-    }
-    if (shouldPolyfillPluralRules()) {
-      console.debug('Loading Intl.PluralRules polyfill…');
-      polyfillImports.push(import('@formatjs/intl-pluralrules/polyfill'));
-      polyfillImports.push(import('@formatjs/intl-pluralrules/locale-data/en'));
-    }
-    if (shouldPolyfillNumberFormat()) {
-      console.debug('Loading Intl.NumberFormat polyfill…');
-      polyfillImports.push(import('@formatjs/intl-numberformat/polyfill'));
-      polyfillImports.push(import('@formatjs/intl-numberformat/locale-data/en'));
-    }
-
-    try {
-      await Promise.all(polyfillImports);
-    } catch {
-      let message =
-        'We tried to load some polyfill code for your browser, but network issues caused the request to fail. If you notice any issues please try to reload the page.';
-      this.notifications.warning(message);
-    }
   }
 
   @action loading(transition) {

app/services/intl.js

@@ -0,0 +1,10 @@
+import Service from '@ember/service';
+
+export default class IntlService extends Service {
+  // `undefined` means "use the default language of the browser"
+  locale = undefined;
+
+  formatNumber(value) {
+    return Number(value).toLocaleString(this.locale);
+  }
+}

package.json

@@ -37,10 +37,6 @@
     "trailingComma": "all"
   },
   "dependencies": {
-    "@formatjs/intl-getcanonicallocales": "1.5.3",
-    "@formatjs/intl-locale": "2.4.12",
-    "@formatjs/intl-numberformat": "6.1.2",
-    "@formatjs/intl-pluralrules": "4.0.2",
     "@sentry/browser": "5.29.2",
     "@sentry/integrations": "5.29.2",
     "chart.js": "2.9.4",

tests/acceptance/categories-test.js

@@ -4,19 +4,16 @@ import { module, test } from 'qunit';
 
 import percySnapshot from '@percy/ember';
 import a11yAudit from 'ember-a11y-testing/test-support/audit';
-import window from 'ember-window-mock';
-import { setupWindowMock } from 'ember-window-mock/test-support';
 
 import axeConfig from '../axe-config';
 import setupMirage from '../helpers/setup-mirage';
 
 module('Acceptance | categories', function (hooks) {
   setupApplicationTest(hooks);
-  setupWindowMock(hooks);
   setupMirage(hooks);
 
   test('listing categories', async function (assert) {
-    window.navigator = { languages: ['en'] };
+    this.owner.lookup('service:intl').locale = 'en';
 
     this.server.create('category', { category: 'API bindings' });
     this.server.create('category', { category: 'Algorithms' });
@@ -37,7 +34,7 @@ module('Acceptance | categories', function (hooks) {
   });
 
   test('listing categories (locale: de)', async function (assert) {
-    window.navigator = { languages: ['de'] };
+    this.owner.lookup('service:intl').locale = 'de';
 
     this.server.create('category', { category: 'Everything', crates_cnt: 1234 });
 

tests/unit/helpers/format-num-test.js

@@ -1,20 +1,28 @@
+import { render } from '@ember/test-helpers';
+import { setupRenderingTest } from 'ember-qunit';
 import { module, test } from 'qunit';
 
-import window from 'ember-window-mock';
-import { setupWindowMock } from 'ember-window-mock/test-support';
-
-import { formatNum } from '../../../helpers/format-num';
+import { hbs } from 'ember-cli-htmlbars';
 
 module('Unit | Helper | format-num', function (hooks) {
-  setupWindowMock(hooks);
+  setupRenderingTest(hooks);
+
+  test('it works', async function (assert) {
+    this.owner.lookup('service:intl').locale = 'en';
+
+    await render(hbs`{{format-num 42}}`);
+    assert.dom().hasText('42');
+
+    await render(hbs`{{format-num 0}}`);
+    assert.dom().hasText('0');
+
+    await render(hbs`{{format-num 0.2}}`);
+    assert.dom().hasText('0.2');
 
-  test('it works', function (assert) {
-    window.navigator = { language: 'en' };
+    await render(hbs`{{format-num 1000}}`);
+    assert.dom().hasText('1,000');
 
-    assert.equal(formatNum(42), '42');
-    assert.equal(formatNum(0), '0');
-    assert.equal(formatNum(0.2), '0.2');
-    assert.equal(formatNum(1000), '1,000');
-    assert.equal(formatNum(1000000), '1,000,000');
+    await render(hbs`{{format-num 1000000}}`);
+    assert.dom().hasText('1,000,000');
   });
 });

yarn.lock

@@ -1356,47 +1356,6 @@
     minimatch "^3.0.4"
     strip-json-comments "^3.1.1"
 
-"@formatjs/ecma402-abstract@1.5.0":
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/@formatjs/ecma402-abstract/-/ecma402-abstract-1.5.0.tgz#759c8f11ff45e96f8fb58741e7fbdb41096d5ddd"
-  integrity sha512-wXv36yo+mfWllweN0Fq7sUs7PUiNopn7I0JpLTe3hGu6ZMR4CV7LqK1llhB18pndwpKoafQKb1et2DCJAOW20Q==
-  dependencies:
-    tslib "^2.0.1"
-
-"@formatjs/intl-getcanonicallocales@1.5.3":
-  version "1.5.3"
-  resolved "https://registry.yarnpkg.com/@formatjs/intl-getcanonicallocales/-/intl-getcanonicallocales-1.5.3.tgz#b5978462340da1502502c3fde1c4abccff8f3b8e"
-  integrity sha512-QVBnSPZ32Y80wkXbf36hP9VbyklbOb8edppxFcgO9Lbd47zagllw65Y81QOHEn/j11JcTn2OhW0vea95LHvQmA==
-  dependencies:
-    cldr-core "38"
-    tslib "^2.0.1"
-
-"@formatjs/intl-locale@2.4.12":
-  version "2.4.12"
-  resolved "https://registry.yarnpkg.com/@formatjs/intl-locale/-/intl-locale-2.4.12.tgz#0a320864f84e87876149bdee88357bdc02919a5d"
-  integrity sha512-40khHPYtZRdqjQs1fItNj94eMoiGwJJOAKN//9qUhAsHrXvGxseFVBSg+mItV0Orwb3wqItUj3hu6evrouhstw==
-  dependencies:
-    "@formatjs/ecma402-abstract" "1.5.0"
-    "@formatjs/intl-getcanonicallocales" "1.5.3"
-    cldr-core "38"
-    tslib "^2.0.1"
-
-"@formatjs/intl-numberformat@6.1.2":
-  version "6.1.2"
-  resolved "https://registry.yarnpkg.com/@formatjs/intl-numberformat/-/intl-numberformat-6.1.2.tgz#2fd8d67a3bbb09993114be5c3c721e56a41595d0"
-  integrity sha512-td0XggQKu8dlPUlP2f322NW0WY58zWLlOoiUVh4eolcWqOs4maKL8tjmFBPXSQt55JiKy14ZrDw1dljyNHLB0g==
-  dependencies:
-    "@formatjs/ecma402-abstract" "1.5.0"
-    tslib "^2.0.1"
-
-"@formatjs/intl-pluralrules@4.0.2":
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/@formatjs/intl-pluralrules/-/intl-pluralrules-4.0.2.tgz#73dafc7f3872b50faec65fce15822f210f334386"
-  integrity sha512-Oh4zmA3odkXBCPAGVhZuAnP3IfCPy8DyizA9s4QkYptVICX38RbUvXwzr2a9DVpKNiZ7i2TnV4Qkeo06N/6b7Q==
-  dependencies:
-    "@formatjs/ecma402-abstract" "1.5.0"
-    tslib "^2.0.1"
-
 "@glimmer/component@1.0.3":
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/@glimmer/component/-/component-1.0.3.tgz#38c26fc4855fd7ad0e0816d18d80d32c578e5140"
@@ -4907,11 +4866,6 @@ class-utils@^0.3.5:
     isobject "^3.0.0"
     static-extend "^0.1.1"
 
-cldr-core@38:
-  version "38.0.0"
-  resolved "https://registry.yarnpkg.com/cldr-core/-/cldr-core-38.0.0.tgz#f54a5dfd222c79a050f1fe8e87ad9764f16fb840"
-  integrity sha512-WkjA4zo5rLT/BWTZAxHJ0lJXwI33gCYucEz1+CpoI8Wu+rr5IrC57wyNXyrNNMdxfDE5RsWi/JCQ9qnG8sHTiw==
-
 clean-base-url@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/clean-base-url/-/clean-base-url-1.0.0.tgz#c901cf0a20b972435b0eccd52d056824a4351b7b"
@@ -14252,7 +14206,7 @@ tslib@^1, tslib@^1.10.0, tslib@^1.9.0, tslib@^1.9.3:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
 
-tslib@^2.0.0, tslib@^2.0.1:
+tslib@^2.0.0:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.0.3.tgz#8e0741ac45fc0c226e58a17bfc3e64b9bc6ca61c"
   integrity sha512-uZtkfKblCEQtZKBF6EBXVZeQNl82yqtDQdv+eck8u7tdPxjLu2/lp5/uPW+um2tpuxINHWy3GhiccY7QgEaVHQ==