ayo/lion
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(ui): [core] allow browserDetection to be run in ssr context

Browse source
This commit is contained in:
Thijs Louisse 2024-04-09 19:57:15 +02:00 committed by Thijs Louisse
parent e8e9c07ec5
commit 2da9a400a3
4 changed files with 35 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/thick-worms-grab.md Normal file
View file

@ -0,0 +1,5 @@
---
'@lion/ui': patch
---
[core] allow browserDetection to be run in ssr context

3
.eslintrc.js
View file

@ -48,4 +48,7 @@ module.exports = {
[path.resolve('./scripts/eslint-resolver.cjs')]: {}, [path.resolve('./scripts/eslint-resolver.cjs')]: {},
}, },
}, },
env: {
es2020: true,
},
}; };

1
packages/singleton-manager/src/SingletonManagerClass.js
View file

@ -5,7 +5,6 @@ const sym = Symbol.for('lion::SingletonManagerClassStorage');
* In the future, we can just use globalThis directly * 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). * (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; const globalThisOrWindow = globalThis || window;
export class SingletonManagerClass { export class SingletonManagerClass {
constructor() { constructor() {

44
packages/ui/components/core/src/browserDetection.js
View file

@ -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 * 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') { 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') { if (flavor === 'chromium') {
return isChromium; return isChromium;
} }
const winNav = window.navigator; const winNav = globalThis.navigator;
const vendorName = winNav.vendor; const vendorName = winNav?.vendor;
const isOpera = typeof (/** @type {window & { opr?: boolean}} */ (window).opr) !== 'undefined'; const isOpera =
const isIEedge = winNav.userAgent.indexOf('Edge') > -1; typeof (/** @type {window & { opr?: boolean}} */ (globalThis).opr) !== 'undefined';
const isIOSChrome = winNav.userAgent.match('CriOS'); // @ts-ignore
const isIEedge = globalThis.userAgent?.indexOf('Edge') > -1;
// @ts-ignore
const isIOSChrome = globalThis.userAgent?.match('CriOS');
if (flavor === 'ios') { if (flavor === 'ios') {
return isIOSChrome; return isIOSChrome;
@ -31,18 +41,18 @@ function checkChrome(flavor = 'google-chrome') {
} }
export const browserDetection = { export const browserDetection = {
isIE11: /Trident/.test(window.navigator.userAgent), isIE11: /Trident/.test(globalThis.navigator?.userAgent),
isChrome: checkChrome(), isChrome: checkChrome(),
isIOSChrome: checkChrome('ios'), isIOSChrome: checkChrome('ios'),
isChromium: checkChrome('chromium'), isChromium: checkChrome('chromium'),
isFirefox: navigator.userAgent.toLowerCase().indexOf('firefox') > -1, isFirefox: globalThis.navigator?.userAgent.toLowerCase().indexOf('firefox') > -1,
isMac: navigator.appVersion.indexOf('Mac') !== -1, isMac: globalThis.navigator?.appVersion?.indexOf('Mac') !== -1,
isIOS: /iPhone|iPad|iPod/i.test(navigator.userAgent), isIOS: /iPhone|iPad|iPod/i.test(globalThis.navigator?.userAgent),
isMacSafari: isMacSafari:
navigator.vendor && globalThis.navigator?.vendor &&
navigator.vendor.indexOf('Apple') > -1 && globalThis.navigator?.vendor.indexOf('Apple') > -1 &&
navigator.userAgent && globalThis.navigator?.userAgent &&
navigator.userAgent.indexOf('CriOS') === -1 && globalThis.navigator?.userAgent.indexOf('CriOS') === -1 &&
navigator.userAgent.indexOf('FxiOS') === -1 && globalThis.navigator?.userAgent.indexOf('FxiOS') === -1 &&
navigator.appVersion.indexOf('Mac') !== -1, globalThis.navigator?.appVersion.indexOf('Mac') !== -1,
}; };