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 (