wassname/talk
1
0
Fork 0
mirror of https://github.com/wassname/talk.git synced 2026-08-12 12:30:39 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: add support for older browsers

Browse Source
This commit is contained in:
Chi Vinh Le
2020-08-13 17:19:54 +02:00
parent d67c3d2907
commit 97e6727ccc
16 changed files with 125 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package-lock.json
Generated
+15 -3
View File
@@ -16567,6 +16567,12 @@
"integrity": "sha512-1zD+68jhFgDIM0rF05rcwYO8cExdNqxjq4xP1QKM60Q45mnO6zaMWB4tOzrIr4M4GSLntsKeE4c9Bdl2jhL/yw==",
"dev": true
},
"date-time-format-timezone": {
"version": "1.0.22",
"resolved": "https://registry.npmjs.org/date-time-format-timezone/-/date-time-format-timezone-1.0.22.tgz",
"integrity": "sha512-4hEeKPpNlbFO05ldht9FwJEy2g1xL7kU3dTPY5hNSd1AyMjrrIeUS54kSWgt/KdttYshhjDMIonU+vCmL4NjVw==",
"dev": true
},
"dateformat": {
"version": "1.0.12",
"resolved": "https://registry.npmjs.org/dateformat/-/dateformat-1.0.12.tgz",
@@ -32159,6 +32165,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 +55366,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
+8 -2
View File
@@ -264,6 +264,7 @@
"cross-spawn": "^7.0.1",
"css-loader": "^3.4.2",
"css-vars-ponyfill": "^2.2.1",
"date-time-format-timezone": "^1.0.22",
"del": "^5.1.0",
"doctoc": "^1.4.0",
"docz": "^v2.3.0-alpha.14",
@@ -296,6 +297,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 +383,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 +458,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
+1 -1
View File
@@ -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
+2 -1
View File
@@ -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
+26 -15
View File
@@ -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.supportsIntl) {
intlPromise = (async () => {
const IntlPolyfill = (await import("intl")).default;
Intl.NumberFormat = IntlPolyfill.NumberFormat;
Intl.DateTimeFormat = IntlPolyfill.DateTimeFormat;
return;
})();
}
pending.push(
intlPromise.then(() => {
if (!browser.supportsIntlPluralRules) {
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.supportsIntersectionObserver) {
pending.push(import("intersection-observer"));
}
// CSS Vars Polyfill for IE11.
if (getBrowserInfo().msie) {
pending.push(import("whatwg-fetch"));
if (!browser.supportsProxyObject) {
pending.push(import("proxy-polyfill"));
pending.push(polyfillCSSVarsForIE11());
}
if (!browser.supportsFetch) {
pending.push(import("whatwg-fetch"));
}
if (!browser.supportsCSSVariables) {
pending.push(polyfillCSSVars());
}
await Promise.all(pending);
}
src/core/client/framework/helpers/polyfillCSSVars.tsx
+13
View File
@@ -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().supportsCSSVariables) {
return import("css-vars-ponyfill").then((module) => module.default());
}
return Promise.resolve();
}
src/core/client/framework/helpers/polyfillCSSVarsForIE11.tsx
-8
View File
@@ -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
+16
View File
@@ -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().supportsIntl) {
await Promise.all(
locales.map((locale) =>
import("intl/locale-data/jsonp/" + locale + ".js")
)
);
}
return Promise.resolve();
}
src/core/client/framework/lib/bootstrap/createManaged.tsx
+2
View File
@@ -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
+27 -3
View File
@@ -1,9 +1,16 @@
import Bowser from "bowser";
export interface BrowserInfo {
version: number;
ios: boolean;
msie: boolean;
mobile: boolean;
supportsCSSVariables: boolean;
supportsFetch: boolean;
supportsProxyObject: boolean;
supportsIntl: boolean;
supportsIntlPluralRules: boolean;
supportsIntersectionObserver: boolean;
}
let browserInfo: BrowserInfo | null = null;
@@ -11,10 +18,27 @@ 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,
supportsIntl: typeof Intl !== "undefined",
supportsIntlPluralRules:
typeof Intl !== "undefined" && Boolean(Intl.PluralRules),
supportsProxyObject: Boolean(window.Proxy),
supportsCSSVariables:
window.CSS && CSS.supports("color", "var(--fake-var)"),
supportsFetch: Boolean(window.fetch),
supportsIntersectionObserver:
"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
+1 -1
View File
@@ -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().supportsProxyObject) {
target = recordSource;
delete proxy.ownKeys;
delete proxy.getOwnPropertyDescriptor;
src/core/client/framework/testHelpers/createTestRenderer.tsx
+7
View File
@@ -96,6 +96,13 @@ export default function createTestRenderer<
rest: new RestClient("http://localhost/api"),
postMessage: new PostMessageService(),
browserInfo: params.browserInfo || {
supportsCSSVariables: true,
supportsIntersectionObserver: true,
supportsFetch: true,
supportsIntl: true,
supportsIntlPluralRules: true,
supportsProxyObject: true,
version: "10.0",
ios: false,
mobile: false,
msie: false,
src/core/client/stream/tabs/Configure/ConfigureQuery.tsx
+2 -2
View File
@@ -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
+2 -2
View File
@@ -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
+2 -2
View File
@@ -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
Vendored
+1
View File
@@ -0,0 +1 @@
declare module "intl";