feat: init @affine/env (#1243)

apps/web/src/components/blocksuite/block-suite-editor/index.tsx

@@ -1,3 +1,4 @@
+import { config } from '@affine/env';
 import { BlockHub } from '@blocksuite/blocks';
 import { EditorContainer } from '@blocksuite/editor';
 import type { Page } from '@blocksuite/store';
@@ -5,7 +6,6 @@ import { assertExists } from '@blocksuite/store';
 import { useEffect, useRef } from 'react';
 
 import { BlockSuiteWorkspace } from '../../../shared';
-import { config } from '../../../shared/env';
 
 export type EditorProps = {
   blockSuiteWorkspace: BlockSuiteWorkspace;
@@ -81,7 +81,6 @@ export const BlockSuiteEditor = (props: EditorProps) => {
         page.resetHistory();
       }
     }
-
     if (config.exposeInternal) {
       globalThis.currentBlockSuiteWorkspace = props.blockSuiteWorkspace;
       globalThis.currentPage = page;

apps/web/src/components/blocksuite/header/utils.tsx

@@ -1,26 +1,20 @@
+import { getEnvironment } from '@affine/env';
 import { Trans, useTranslation } from '@affine/i18n';
 import React, { useEffect, useState } from 'react';
 
-import { getIsMobile } from '../../../utils/get-is-mobile';
-
-// Inspire by https://stackoverflow.com/a/4900484/8415727
-const getChromeVersion = () => {
-  const raw = navigator.userAgent.match(/Chrom(e|ium)\/([0-9]+)\./);
-  return raw ? parseInt(raw[2], 10) : false;
-};
-const getIsChrome = () => {
-  return (
-    /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor)
-  );
-};
 const minimumChromeVersion = 102;
 
 export const shouldShowWarning = () => {
-  return (
-    !window.CLIENT_APP &&
-    !getIsMobile() &&
-    (!getIsChrome() || getChromeVersion() < minimumChromeVersion)
-  );
+  const env = getEnvironment();
+  if (!env.isBrowser) {
+    // disable in SSR
+    return false;
+  }
+  if (env.isChrome) {
+    return env.chromeVersion < minimumChromeVersion;
+  } else {
+    return !env.isMobile;
+  }
 };
 
 export const OSWarningMessage: React.FC = () => {
@@ -28,8 +22,11 @@ export const OSWarningMessage: React.FC = () => {
   const [notChrome, setNotChrome] = useState(false);
   const [notGoodVersion, setNotGoodVersion] = useState(false);
   useEffect(() => {
-    setNotChrome(getIsChrome());
-    setNotGoodVersion(getChromeVersion() < minimumChromeVersion);
+    const env = getEnvironment();
+    setNotChrome(env.isBrowser && !env.isChrome);
+    setNotGoodVersion(
+      env.isBrowser && env.isChrome && env.chromeVersion < minimumChromeVersion
+    );
   }, []);
   if (notChrome) {
     return (

apps/web/src/components/pure/quick-search-modal/index.tsx

@@ -1,4 +1,5 @@
 import { Modal, ModalWrapper } from '@affine/component';
+import { getEnvironment } from '@affine/env';
 import { Command } from 'cmdk';
 import { NextRouter } from 'next/router';
 import React, {
@@ -10,7 +11,6 @@ import React, {
 } from 'react';
 
 import { BlockSuiteWorkspace } from '../../../shared';
-import { getUaHelper } from '../../../utils/useragent';
 import { Footer } from './Footer';
 import { Input } from './Input';
 import { PublishedResults } from './PublishedResults';
@@ -24,7 +24,8 @@ import {
 } from './style';
 
 const isMac = () => {
-  return getUaHelper().isMacOs;
+  const env = getEnvironment();
+  return env.isBrowser && env.isMacOs;
 };
 
 export type QuickSearchModalProps = {

apps/web/src/components/pure/shortcuts-modal/index.tsx

@@ -3,10 +3,10 @@ import {
   MuiClickAwayListener,
   MuiSlide,
 } from '@affine/component';
+import { getEnvironment } from '@affine/env';
 import { useTranslation } from '@affine/i18n';
 import { useEffect, useState } from 'react';
 
-import { getUaHelper } from '../../../utils/useragent';
 import {
   useMacKeyboardShortcuts,
   useMacMarkdownShortcuts,
@@ -27,7 +27,8 @@ type ModalProps = {
 };
 
 const checkIsMac = () => {
-  return getUaHelper().isMacOs;
+  const env = getEnvironment();
+  return env.isBrowser && env.isMacOs;
 };
 
 export const ShortcutsModal = ({ open, onClose }: ModalProps) => {