refactor: environment setup (#2898)

Co-authored-by: Simon He <57086651+Simon-He95@users.noreply.github.com>

packages/env/package.json

@@ -3,6 +3,7 @@
   "private": true,
   "main": "./src/index.ts",
   "module": "./src/index.ts",
+  "types": "./src/global.ts",
   "devDependencies": {
     "@blocksuite/global": "0.0.0-20230627165830-836e6fd1-nightly",
     "next": "=13.4.2",
@@ -11,9 +12,7 @@
     "zod": "^3.21.4"
   },
   "exports": {
-    ".": "./src/index.ts",
-    "./api": "./src/api.ts",
-    "./config": "./src/config.ts",
+    "./global": "./src/global.ts",
     "./constant": "./src/constant.ts",
     "./workspace": "./src/workspace.ts",
     "./workspace/legacy-cloud": "./src/workspace/legacy-cloud/index.ts",

packages/env/src/__tests__/subdoc-migration.spec.ts

@@ -38,9 +38,11 @@ describe('subdoc', () => {
       if (id === 'xyWNqindHH') {
         return;
       }
-      if (blocks[id]['sys:flavour'] === 'affine:surface' && !blocks[id]['prop:elements']) {
+      if (
+        blocks[id]['sys:flavour'] === 'affine:surface' &&
+        !blocks[id]['prop:elements']
+      ) {
         blocks[id]['prop:elements'] = data[id]['prop:elements'];
-
       }
       expect(data[id]).toEqual(blocks[id]);
     });

packages/env/src/api.ts

@@ -1,28 +0,0 @@
-import { config, env } from './config';
-import { isValidIPAddress } from './is-valid-ip-address';
-
-let prefixUrl = '/';
-if (typeof window === 'undefined' || env.isDesktop) {
-  // SSR or Desktop
-  const serverAPI = config.serverAPI;
-  if (isValidIPAddress(serverAPI.split(':')[0])) {
-    // This is for Server side rendering support
-    prefixUrl = new URL('http://' + config.serverAPI + '/').origin;
-  } else {
-    prefixUrl = serverAPI;
-  }
-  prefixUrl = prefixUrl.endsWith('/') ? prefixUrl : prefixUrl + '/';
-} else {
-  const params = new URLSearchParams(window.location.search);
-  if (params.get('prefixUrl')) {
-    prefixUrl = params.get('prefixUrl') as string;
-  } else {
-    prefixUrl = window.location.origin + '/';
-  }
-}
-
-const apiUrl = new URL(prefixUrl);
-const wsProtocol = apiUrl.protocol === 'https:' ? 'wss' : 'ws';
-const websocketPrefixUrl = `${wsProtocol}://${apiUrl.host}`;
-
-export { prefixUrl, websocketPrefixUrl };

packages/env/src/blocksuite/subdoc-migration.ts

@@ -91,12 +91,12 @@ function runBlockMigration(
     return;
   }
   if (flavour === 'affine:surface' && version <= 3) {
-    if(data.has('elements')){
+    if (data.has('elements')) {
       const elements = data.get('elements') as Y.Map<unknown>;
       data.set('prop:elements', elements.clone());
       data.delete('elements');
     } else {
-      data.set('prop:elements', new Y.Map())
+      data.set('prop:elements', new Y.Map());
     }
   }
   if (flavour === 'affine:embed') {

packages/env/src/constant.ts

@@ -1,5 +1,19 @@
+// This file should has not side effect
 import type { Workspace } from '@blocksuite/store';
 
+declare global {
+  interface Window {
+    appInfo: {
+      electron: boolean;
+    };
+  }
+}
+
+//#region runtime variables
+export const isBrowser = typeof window !== 'undefined';
+export const isServer = !isBrowser && typeof navigator === 'undefined';
+export const isDesktop = isBrowser && !!window.appInfo?.electron;
+//#endregion
 export const AFFINE_STORAGE_KEY = 'affine-local-storage-v2';
 export const DEFAULT_WORKSPACE_NAME = 'Demo Workspace';
 export const UNTITLED_WORKSPACE_NAME = 'Untitled';

packages/env/src/env.d.ts

@@ -1,2 +0,0 @@
-// eslint-disable-next-line @typescript-eslint/no-restricted-imports
-import '../hooks/src/use-block-suite-page-meta.ts';

packages/env/src/global.ts

@@ -10,9 +10,12 @@ import type {
   UpdaterHandlerManager,
   WorkspaceHandlerManager,
 } from '@toeverything/infra';
+// fixme(himself65): remove `next/config` dependency
 import getConfig from 'next/config';
 import { z } from 'zod';
 
+import { isBrowser, isDesktop, isServer } from './constant';
+import { isValidIPAddress } from './is-valid-ip-address';
 import { UaHelper } from './ua-helper';
 
 declare global {
@@ -31,6 +34,19 @@ declare global {
     };
     events: any;
   }
+
+  // eslint-disable-next-line no-var
+  var environment: Environment;
+  // eslint-disable-next-line no-var
+  var runtimeConfig: PublicRuntimeConfig;
+  // eslint-disable-next-line no-var
+  var $AFFINE_SETUP: boolean | undefined;
+  // eslint-disable-next-line no-var
+  var editorVersion: string | undefined;
+  // eslint-disable-next-line no-var
+  var prefixUrl: string;
+  // eslint-disable-next-line no-var
+  var websocketPrefixUrl: string;
 }
 
 export const buildFlagsSchema = z.object({
@@ -135,10 +151,31 @@ interface Desktop extends ChromeBrowser {
 
 export type Environment = Browser | Server | Desktop;
 
-export const env: Environment = (() => {
-  let environment = null;
+function printBuildInfo() {
+  console.group('Build info');
+  console.log('Project:', config.PROJECT_NAME);
+  console.log(
+    'Build date:',
+    config.BUILD_DATE ? new Date(config.BUILD_DATE).toLocaleString() : 'Unknown'
+  );
+  console.log('Editor Version:', config.editorVersion);
+
+  console.log('Version:', config.gitVersion);
+  console.log(
+    'AFFiNE is an open source project, you can view its source code on GitHub!'
+  );
+  console.log(`https://github.com/toeverything/AFFiNE/tree/${config.hash}`);
+  console.groupEnd();
+}
+
+export function setupGlobal() {
+  if (globalThis.$AFFINE_SETUP) {
+    return;
+  }
+  globalThis.runtimeConfig = config;
+  let environment: Environment;
   const isDebug = process.env.NODE_ENV === 'development';
-  if (typeof window === 'undefined' || typeof navigator === 'undefined') {
+  if (isServer) {
     environment = {
       isDesktop: false,
       isBrowser: false,
@@ -150,7 +187,7 @@ export const env: Environment = (() => {
 
     environment = {
       origin: window.location.origin,
-      isDesktop: !!window.appInfo?.electron,
+      isDesktop,
       isBrowser: true,
       isServer: false,
       isDebug,
@@ -177,45 +214,37 @@ export const env: Environment = (() => {
     }
   }
   globalThis.environment = environment;
-  return environment;
-})();
 
-function printBuildInfo() {
-  console.group('Build info');
-  console.log('Project:', config.PROJECT_NAME);
-  console.log(
-    'Build date:',
-    config.BUILD_DATE ? new Date(config.BUILD_DATE).toLocaleString() : 'Unknown'
-  );
-  console.log('Editor Version:', config.editorVersion);
-
-  console.log('Version:', config.gitVersion);
-  console.log(
-    'AFFiNE is an open source project, you can view its source code on GitHub!'
-  );
-  console.log(`https://github.com/toeverything/AFFiNE/tree/${config.hash}`);
-  console.groupEnd();
-}
-
-declare global {
-  // eslint-disable-next-line no-var
-  var environment: Environment;
-  // eslint-disable-next-line no-var
-  var $AFFINE_SETUP: boolean | undefined;
-  // eslint-disable-next-line no-var
-  var editorVersion: string | undefined;
-}
-
-export function setupGlobal() {
-  if (globalThis.$AFFINE_SETUP) {
-    return;
-  }
-  globalThis.environment = env;
-  if (env.isBrowser) {
+  if (environment.isBrowser) {
     printBuildInfo();
-    globalThis.editorVersion = config.editorVersion;
+    globalThis.editorVersion = global.editorVersion;
   }
+
+  let prefixUrl: string;
+  if (!isBrowser || isDesktop) {
+    // SSR or Desktop
+    const serverAPI = runtimeConfig.serverAPI;
+    if (isValidIPAddress(serverAPI.split(':')[0])) {
+      // This is for Server side rendering support
+      prefixUrl = new URL('http://' + runtimeConfig.serverAPI + '/').origin;
+    } else {
+      prefixUrl = serverAPI;
+    }
+    prefixUrl = prefixUrl.endsWith('/') ? prefixUrl : prefixUrl + '/';
+  } else {
+    const params = new URLSearchParams(window.location.search);
+    if (params.get('prefixUrl')) {
+      prefixUrl = params.get('prefixUrl') as string;
+    } else {
+      prefixUrl = window.location.origin + '/';
+    }
+  }
+
+  const apiUrl = new URL(prefixUrl);
+  const wsProtocol = apiUrl.protocol === 'https:' ? 'wss' : 'ws';
+  const websocketPrefixUrl = `${wsProtocol}://${apiUrl.host}`;
+
+  globalThis.prefixUrl = prefixUrl;
+  globalThis.websocketPrefixUrl = websocketPrefixUrl;
   globalThis.$AFFINE_SETUP = true;
 }
-
-export { config };

packages/env/src/index.ts

@@ -1,3 +0,0 @@
-export * from './api';
-export * from './config';
-export * from './constant';