Merge branch 'master' into CORL-1285

package-lock.json

@@ -32159,6 +32159,12 @@
       "integrity": "sha512-Id0Fij0HsB/vKWGeBe9PxeY45ttRiBmhFyyt/geBdDHBYNctMRTE3dC1U3ujzz3lap+hVXlEcVaB56kZP/eEUg==",
       "dev": true
     },
+    "intl": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/intl/-/intl-1.2.5.tgz",
+      "integrity": "sha1-giRKIZDE5Bn4Nx9ao02qNCDiq94=",
+      "dev": true
+    },
     "into-stream": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/into-stream/-/into-stream-3.1.0.tgz",
@@ -55354,9 +55360,9 @@
       }
     },
     "whatwg-fetch": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-3.0.0.tgz",
-      "integrity": "sha512-9GSJUgz1D4MfyKU7KRqwOjXCXTqWdFNvEr7eUBYchQiVc744mqK/MzXPNR2WsPkmkOa4ywfg8C2n8h+13Bey1Q==",
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-3.4.0.tgz",
+      "integrity": "sha512-rsum2ulz2iuZH08mJkT0Yi6JnKhwdw4oeyMjokgxd+mmqYSd9cPpOQf01TIWgjxG/U4+QR+AwKq6lSbXVxkyoQ==",
       "dev": true
     },
     "whatwg-mimetype": {

package.json

@@ -296,6 +296,7 @@
     "html-webpack-plugin": "^4.0.4",
     "husky": "^4.2.3",
     "intersection-observer": "^0.7.0",
+    "intl": "^1.2.5",
     "jest": "^26.1.0",
     "jest-axe": "^3.4.0",
     "jest-junit": "^11.0.1",
@@ -381,7 +382,7 @@
     "webpack-bundle-analyzer": "^3.8.0",
     "webpack-cli": "^3.3.12",
     "webpack-dev-server": "^3.11.0",
-    "whatwg-fetch": "^3.0.0"
+    "whatwg-fetch": "^3.4.0"
   },
   "dependencies-pins-documentation": {
     "ts-node-dev@1.0.0-pre.44": [
@@ -456,8 +457,12 @@
   "browsers": [
     ">1%",
     "last 4 versions",
-    "Firefox ESR",
     "IE 11",
+    "iOS >= 9",
+    "Android >= 4.4.4",
+    "Edge >= 17",
+    "Firefox >= 68",
+    "Chrome >= 49",
     "not dead"
   ]
 }

scripts/webpackHotDevClient.js

@@ -199,7 +199,7 @@ function handleAvailableHash(hash) {
   mostRecentCompilationHash = hash;
 }
 
-const debouncedReload = debounce(function() {
+var debouncedReload = debounce(function() {
   window.location.reload();
 }, 1000);
 

src/core/client/framework/helpers/index.ts

@@ -12,5 +12,6 @@ export { default as resolveStoryURL } from "./resolveStoryURL";
 export { default as detectCountScript } from "./detectCountScript";
 export { default as potentiallyInjectAxe } from "./potentiallyInjectAxe";
 export { default as injectConditionalPolyfills } from "./injectConditionalPolyfills";
-export { default as polyfillCSSVarsForIE11 } from "./polyfillCSSVarsForIE11";
+export { default as polyfillCSSVars } from "./polyfillCSSVars";
+export { default as polyfillIntlLocale } from "./polyfillIntlLocale";
 export { default as getModerationLink, QUEUE_NAME } from "./getModerationLink";

src/core/client/framework/helpers/injectConditionalPolyfills.tsx

@@ -1,30 +1,41 @@
 import { getBrowserInfo } from "../lib/browserInfo";
-import polyfillCSSVarsForIE11 from "./polyfillCSSVarsForIE11";
+import polyfillCSSVars from "./polyfillCSSVars";
 
 export default async function injectConditionalPolyfills() {
+  const browser = getBrowserInfo();
   const pending: Promise<any>[] = [];
 
   // Polyfill Intl.
-  if (typeof Intl === "undefined" || !(Intl as any).PluralRules) {
-    pending.push(import("fluent-intl-polyfill"));
+  let intlPromise = Promise.resolve();
+  if (!browser.supports.intl) {
+    intlPromise = (async () => {
+      const IntlPolyfill = (await import("intl")).default;
+      Intl.NumberFormat = IntlPolyfill.NumberFormat;
+      Intl.DateTimeFormat = IntlPolyfill.DateTimeFormat;
+      return;
+    })();
   }
-
+  pending.push(
+    intlPromise.then(() => {
+      if (!browser.supports.intlPluralRules) {
+        return import("fluent-intl-polyfill");
+      }
+      return;
+    })
+  );
   // Polyfill Intersection Observer.
-  if (
-    !("IntersectionObserver" in window) ||
-    !("IntersectionObserverEntry" in window) ||
-    !(
-      "intersectionRatio" in (window as any).IntersectionObserverEntry.prototype
-    )
-  ) {
+  if (!browser.supports.intersectionObserver) {
     pending.push(import("intersection-observer"));
   }
 
-  // CSS Vars Polyfill for IE11.
-  if (getBrowserInfo().msie) {
-    pending.push(import("whatwg-fetch"));
+  if (!browser.supports.proxyObject) {
     pending.push(import("proxy-polyfill"));
-    pending.push(polyfillCSSVarsForIE11());
+  }
+  if (!browser.supports.fetch) {
+    pending.push(import("whatwg-fetch"));
+  }
+  if (!browser.supports.cssVariables) {
+    pending.push(polyfillCSSVars());
   }
   await Promise.all(pending);
 }

src/core/client/framework/helpers/polyfillCSSVars.tsx

@@ -0,0 +1,13 @@
+import { getBrowserInfo } from "../lib/browserInfo";
+
+/**
+ * Polyfills CSS Variables.
+ * This needs to be called whenenver new css variables are introduced
+ * through new CSS.
+ */
+export default function polyfillCSSVars() {
+  if (!getBrowserInfo().supports.cssVariables) {
+    return import("css-vars-ponyfill").then((module) => module.default());
+  }
+  return Promise.resolve();
+}

src/core/client/framework/helpers/polyfillCSSVarsForIE11.tsx

@@ -1,8 +0,0 @@
-import { getBrowserInfo } from "../lib/browserInfo";
-
-export default function polyfillCSSVarsForIE11() {
-  if (getBrowserInfo().msie) {
-    return import("css-vars-ponyfill").then((module) => module.default());
-  }
-  return Promise.resolve();
-}

src/core/client/framework/helpers/polyfillIntlLocale.tsx

@@ -0,0 +1,16 @@
+import { getBrowserInfo } from "../lib/browserInfo";
+
+/**
+ * Polyfills Intl Locale Data.
+ * This is only needed when we use the Intl Polyfill.
+ */
+export default async function polyfillIntlLocale(locales: string[]) {
+  if (!getBrowserInfo().supports.intl) {
+    await Promise.all(
+      locales.map((locale) =>
+        import("intl/locale-data/jsonp/" + locale + ".js")
+      )
+    );
+  }
+  return Promise.resolve();
+}

src/core/client/framework/lib/bootstrap/createManaged.tsx

@@ -8,6 +8,7 @@ import { Environment, RecordSource, Store } from "relay-runtime";
 import { v1 as uuid } from "uuid";
 
 import { LanguageCode } from "coral-common/helpers/i18n";
+import polyfillIntlLocale from "coral-framework/helpers/polyfillIntlLocale";
 import { getBrowserInfo } from "coral-framework/lib/browserInfo";
 import { RestClient } from "coral-framework/lib/rest";
 import {
@@ -309,6 +310,7 @@ export default async function createManaged({
   }
 
   const localeBundles = await generateBundles(locales, localesData);
+  await polyfillIntlLocale(locales);
 
   // Get the access token from storage.
   const auth = retrieveAccessToken();

src/core/client/framework/lib/browserInfo.ts

@@ -1,9 +1,18 @@
 import Bowser from "bowser";
 
 export interface BrowserInfo {
+  version: number;
   ios: boolean;
   msie: boolean;
   mobile: boolean;
+  supports: {
+    cssVariables: boolean;
+    fetch: boolean;
+    proxyObject: boolean;
+    intl: boolean;
+    intlPluralRules: boolean;
+    intersectionObserver: boolean;
+  };
 }
 
 let browserInfo: BrowserInfo | null = null;
@@ -11,10 +20,28 @@ let browserInfo: BrowserInfo | null = null;
 export function getBrowserInfo(): BrowserInfo {
   if (!browserInfo) {
     const browser = Bowser.getParser(window.navigator.userAgent);
+    const ios = browser.is(Bowser.OS_MAP.iOS);
+    const msie = browser.is(Bowser.BROWSER_MAP.ie);
+    const mobile = browser.is(Bowser.PLATFORMS_MAP.mobile);
+    const version = Number.parseFloat(browser.getBrowserVersion());
     browserInfo = {
-      ios: browser.is(Bowser.OS_MAP.iOS),
-      msie: browser.is(Bowser.BROWSER_MAP.ie),
-      mobile: browser.is(Bowser.PLATFORMS_MAP.mobile),
+      version,
+      supports: {
+        intl: typeof Intl !== "undefined",
+        intlPluralRules:
+          typeof Intl !== "undefined" && Boolean(Intl.PluralRules),
+        proxyObject: Boolean(window.Proxy),
+        cssVariables: window.CSS && CSS.supports("color", "var(--fake-var)"),
+        fetch: Boolean(window.fetch),
+        intersectionObserver:
+          "IntersectionObserver" in window &&
+          "IntersectionObserverEntry" in window &&
+          "intersectionRatio" in
+            (window as any).IntersectionObserverEntry.prototype,
+      },
+      ios,
+      msie,
+      mobile,
     };
   }
   return browserInfo;

src/core/client/framework/lib/relay/lookup.ts

@@ -56,7 +56,7 @@ const createProxy = <T = any>(
   // IE11 does not have Proxy support and the polyfill only supports
   // a subset of features under special circumstances.
   // https://github.com/GoogleChrome/proxy-polyfill
-  if (getBrowserInfo().msie) {
+  if (!getBrowserInfo().supports.proxyObject) {
     target = recordSource;
     delete proxy.ownKeys;
     delete proxy.getOwnPropertyDescriptor;

src/core/client/framework/testHelpers/createTestRenderer.tsx

@@ -96,6 +96,15 @@ export default function createTestRenderer<
     rest: new RestClient("http://localhost/api"),
     postMessage: new PostMessageService(),
     browserInfo: params.browserInfo || {
+      supports: {
+        cssVariables: true,
+        intersectionObserver: true,
+        fetch: true,
+        intl: true,
+        intlPluralRules: true,
+        proxyObject: true,
+      },
+      version: 10.0,
       ios: false,
       mobile: false,
       msie: false,

src/core/client/stream/tabs/Configure/ConfigureQuery.tsx

@@ -3,7 +3,7 @@ import { once } from "lodash";
 import React, { FunctionComponent, Suspense } from "react";
 import { graphql } from "react-relay";
 
-import { polyfillCSSVarsForIE11 } from "coral-framework/helpers";
+import { polyfillCSSVars } from "coral-framework/helpers";
 import {
   QueryRenderData,
   QueryRenderer,
@@ -18,7 +18,7 @@ const loadConfigureContainer = () =>
   import("./ConfigureContainer" /* webpackChunkName: "configure" */).then(
     (x) => {
       // New css is loaded, take care of polyfilling those css vars for IE11.
-      void polyfillCSSVarsForIE11();
+      void polyfillCSSVars();
       return x;
     }
   );

src/core/client/stream/tabs/Discussions/DiscussionsQuery.tsx

@@ -3,7 +3,7 @@ import { once } from "lodash";
 import React, { FunctionComponent, Suspense } from "react";
 import { graphql } from "react-relay";
 
-import { polyfillCSSVarsForIE11 } from "coral-framework/helpers";
+import { polyfillCSSVars } from "coral-framework/helpers";
 import {
   QueryRenderData,
   QueryRenderer,
@@ -19,7 +19,7 @@ const loadDiscussionsContainer = () =>
   import("./DiscussionsContainer" /* webpackChunkName: "profile" */).then(
     (x) => {
       // New css is loaded, take care of polyfilling those css vars for IE11.
-      void polyfillCSSVarsForIE11();
+      void polyfillCSSVars();
       return x;
     }
   );

src/core/client/stream/tabs/Profile/ProfileQuery.tsx

@@ -3,7 +3,7 @@ import { once } from "lodash";
 import React, { FunctionComponent, Suspense } from "react";
 import { graphql } from "react-relay";
 
-import { polyfillCSSVarsForIE11 } from "coral-framework/helpers";
+import { polyfillCSSVars } from "coral-framework/helpers";
 import {
   QueryRenderData,
   QueryRenderer,
@@ -18,7 +18,7 @@ import { ProfileQueryLocal as Local } from "coral-stream/__generated__/ProfileQu
 const loadProfileContainer = () =>
   import("./ProfileContainer" /* webpackChunkName: "profile" */).then((x) => {
     // New css is loaded, take care of polyfilling those css vars for IE11.
-    void polyfillCSSVarsForIE11();
+    void polyfillCSSVars();
     return x;
   });
 // (cvle) For some reason without `setTimeout` this request will block other requests.

src/types/intl.d.ts

@@ -0,0 +1 @@
+declare module "intl";