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')]: {},
},
},
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
* (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() {

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
* @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,
};