diff --git a/.changeset/thick-worms-grab.md b/.changeset/thick-worms-grab.md new file mode 100644 index 0000000000..5a4ce1b0a9 --- /dev/null +++ b/.changeset/thick-worms-grab.md @@ -0,0 +1,5 @@ +--- +'@lion/ui': patch +--- + +[core] allow browserDetection to be run in ssr context diff --git a/.eslintrc.js b/.eslintrc.js index bf815114b6..08e45b47e0 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -48,4 +48,7 @@ module.exports = { [path.resolve('./scripts/eslint-resolver.cjs')]: {}, }, }, + env: { + es2020: true, + }, }; diff --git a/packages/singleton-manager/src/SingletonManagerClass.js b/packages/singleton-manager/src/SingletonManagerClass.js index 7cf4ae3350..e2cf3a13b0 100644 --- a/packages/singleton-manager/src/SingletonManagerClass.js +++ b/packages/singleton-manager/src/SingletonManagerClass.js @@ -5,7 +5,6 @@ const sym = Symbol.for('lion::SingletonManagerClassStorage'); * In the future, we can just use globalThis directly * (for now, we're backwards compatible with browsers that still only use window, since we don't know all contexts singleton-manager is used in). */ -// eslint-disable-next-line no-undef const globalThisOrWindow = globalThis || window; export class SingletonManagerClass { constructor() { diff --git a/packages/ui/components/core/src/browserDetection.js b/packages/ui/components/core/src/browserDetection.js index 88fe85d680..e4b37df248 100644 --- a/packages/ui/components/core/src/browserDetection.js +++ b/packages/ui/components/core/src/browserDetection.js @@ -1,17 +1,27 @@ +import { isServer } from 'lit'; + /** * From https://stackoverflow.com/questions/4565112/javascript-how-to-find-out-if-the-user-browser-is-chrome - * @param {string} [flavor] + * @param {string} [flavor='google-chrome'] */ function checkChrome(flavor = 'google-chrome') { - const isChromium = /** @type {window & { chrome?: boolean}} */ (window).chrome; + if (isServer) { + return flavor === 'google-chrome'; + } + + const isChromium = /** @type {window & { chrome?: boolean}} */ (globalThis).chrome; + if (flavor === 'chromium') { return isChromium; } - const winNav = window.navigator; - const vendorName = winNav.vendor; - const isOpera = typeof (/** @type {window & { opr?: boolean}} */ (window).opr) !== 'undefined'; - const isIEedge = winNav.userAgent.indexOf('Edge') > -1; - const isIOSChrome = winNav.userAgent.match('CriOS'); + const winNav = globalThis.navigator; + const vendorName = winNav?.vendor; + const isOpera = + typeof (/** @type {window & { opr?: boolean}} */ (globalThis).opr) !== 'undefined'; + // @ts-ignore + const isIEedge = globalThis.userAgent?.indexOf('Edge') > -1; + // @ts-ignore + const isIOSChrome = globalThis.userAgent?.match('CriOS'); if (flavor === 'ios') { return isIOSChrome; @@ -31,18 +41,18 @@ function checkChrome(flavor = 'google-chrome') { } export const browserDetection = { - isIE11: /Trident/.test(window.navigator.userAgent), + isIE11: /Trident/.test(globalThis.navigator?.userAgent), isChrome: checkChrome(), isIOSChrome: checkChrome('ios'), isChromium: checkChrome('chromium'), - isFirefox: navigator.userAgent.toLowerCase().indexOf('firefox') > -1, - isMac: navigator.appVersion.indexOf('Mac') !== -1, - isIOS: /iPhone|iPad|iPod/i.test(navigator.userAgent), + isFirefox: globalThis.navigator?.userAgent.toLowerCase().indexOf('firefox') > -1, + isMac: globalThis.navigator?.appVersion?.indexOf('Mac') !== -1, + isIOS: /iPhone|iPad|iPod/i.test(globalThis.navigator?.userAgent), isMacSafari: - navigator.vendor && - navigator.vendor.indexOf('Apple') > -1 && - navigator.userAgent && - navigator.userAgent.indexOf('CriOS') === -1 && - navigator.userAgent.indexOf('FxiOS') === -1 && - navigator.appVersion.indexOf('Mac') !== -1, + globalThis.navigator?.vendor && + globalThis.navigator?.vendor.indexOf('Apple') > -1 && + globalThis.navigator?.userAgent && + globalThis.navigator?.userAgent.indexOf('CriOS') === -1 && + globalThis.navigator?.userAgent.indexOf('FxiOS') === -1 && + globalThis.navigator?.appVersion.indexOf('Mac') !== -1, };