feat: improve build config (#2115)

apps/web/next.config.mjs

@@ -7,14 +7,15 @@ import { withSentryConfig } from '@sentry/nextjs';
 import SentryWebpackPlugin from '@sentry/webpack-plugin';
 import debugLocal from 'next-debug-local';
 
-import preset from './preset.config.mjs';
+import { blockSuiteFeatureFlags, buildFlags } from './preset.config.mjs';
 import { getCommitHash, getGitVersion } from './scripts/gitInfo.mjs';
 
 const require = createRequire(import.meta.url);
 const { createVanillaExtractPlugin } = require('@vanilla-extract/next-plugin');
 const withVanillaExtract = createVanillaExtractPlugin();
 
-console.info('Runtime Preset', preset);
+console.info('Build Flags', buildFlags);
+console.info('Editor Flags', blockSuiteFeatureFlags);
 
 const enableDebugLocal = path.isAbsolute(process.env.LOCAL_BLOCK_SUITE ?? '');
 
@@ -98,7 +99,8 @@ const nextConfig = {
       profileTarget[process.env.API_SERVER_PROFILE || 'dev'] ??
       profileTarget.dev,
     editorVersion: require('./package.json').dependencies['@blocksuite/editor'],
-    ...preset,
+    editorFlags: blockSuiteFeatureFlags,
+    ...buildFlags,
   },
   webpack: (config, { dev, isServer }) => {
     config.experiments = { ...config.experiments, topLevelAwait: true };
@@ -144,7 +146,9 @@ const nextConfig = {
   },
   basePath: process.env.NEXT_BASE_PATH,
   assetPrefix: process.env.NEXT_ASSET_PREFIX,
-  pageExtensions: [...(preset.enableDebugPage ? ['tsx', 'dev.tsx'] : ['tsx'])],
+  pageExtensions: [
+    ...(buildFlags.enableDebugPage ? ['tsx', 'dev.tsx'] : ['tsx']),
+  ],
 };
 
 const baseDir = process.env.LOCAL_BLOCK_SUITE ?? '/';

apps/web/preset.config.mjs

@@ -1,6 +1,23 @@
+// @ts-check
 import 'dotenv/config';
 
-const config = {
+/**
+ * @type {import('@affine/env').BlockSuiteFeatureFlags}
+ */
+export const blockSuiteFeatureFlags = {
+  enable_database: true,
+  enable_slash_menu: true,
+  enable_edgeless_toolbar: true,
+  enable_block_hub: true,
+  enable_drag_handle: true,
+  enable_surface: true,
+  enable_linked_page: true,
+};
+
+/**
+ * @type {import('@affine/env').BuildFlags}
+ */
+export const buildFlags = {
   enableLegacyCloud: process.env.ENABLE_LEGACY_PROVIDER
     ? process.env.ENABLE_LEGACY_PROVIDER === 'true'
     : true,
@@ -11,4 +28,3 @@ const config = {
     process.env.ENABLE_DEBUG_PAGE ?? process.env.NODE_ENV === 'development'
   ),
 };
-export default config;

apps/web/src/atoms/public-workspace/index.ts

@@ -1,3 +1,5 @@
+import type { BlockSuiteFeatureFlags } from '@affine/env';
+import { config } from '@affine/env';
 import type { AffinePublicWorkspace } from '@affine/workspace/type';
 import { WorkspaceFlavour } from '@affine/workspace/type';
 import { createEmptyBlockSuiteWorkspace } from '@affine/workspace/utils';
@@ -23,11 +25,14 @@ function createPublicWorkspace(
     blockSuiteWorkspace.doc,
     new Uint8Array(binary)
   );
+  Object.entries(config.editorFlags).forEach(([key, value]) => {
+    blockSuiteWorkspace.awarenessStore.setFlag(
+      key as keyof BlockSuiteFeatureFlags,
+      value
+    );
+  });
+  // force disable some features
   blockSuiteWorkspace.awarenessStore.setFlag('enable_block_hub', false);
-  blockSuiteWorkspace.awarenessStore.setFlag('enable_set_remote_flag', false);
-  blockSuiteWorkspace.awarenessStore.setFlag('enable_database', false);
-  blockSuiteWorkspace.awarenessStore.setFlag('enable_edgeless_toolbar', false);
-  blockSuiteWorkspace.awarenessStore.setFlag('enable_slash_menu', false);
   blockSuiteWorkspace.awarenessStore.setFlag('enable_drag_handle', false);
   return {
     flavour: WorkspaceFlavour.PUBLIC,

apps/web/src/pages/public-workspace/[workspaceId].tsx

@@ -47,9 +47,6 @@ const ListPageInner: React.FC<{
     },
     [router, workspaceId]
   );
-  useEffect(() => {
-    blockSuiteWorkspace.awarenessStore.setFlag('enable_block_hub', false);
-  }, [blockSuiteWorkspace]);
   const [name] = useBlockSuiteWorkspaceName(blockSuiteWorkspace);
   const [avatar] = useBlockSuiteWorkspaceAvatarUrl(blockSuiteWorkspace);
   const setSearchModalOpen = useSetAtom(openQuickSearchModalAtom);

apps/web/src/pages/workspace/[workspaceId]/[pageId].tsx

@@ -1,3 +1,5 @@
+import type { BlockSuiteFeatureFlags } from '@affine/env';
+import { config } from '@affine/env';
 import { useTranslation } from '@affine/i18n';
 import { rootCurrentPageIdAtom } from '@affine/workspace/atom';
 import { WorkspaceFlavour } from '@affine/workspace/type';
@@ -25,15 +27,13 @@ import { WorkspaceLayout } from '../../../layouts/workspace-layout';
 import { WorkspacePlugins } from '../../../plugins';
 import type { BlockSuiteWorkspace, NextPageWithLayout } from '../../../shared';
 
-function enableFullFlags(blockSuiteWorkspace: BlockSuiteWorkspace) {
-  blockSuiteWorkspace.awarenessStore.setFlag('enable_set_remote_flag', false);
-  blockSuiteWorkspace.awarenessStore.setFlag('enable_database', false);
-  blockSuiteWorkspace.awarenessStore.setFlag('enable_slash_menu', true);
-  blockSuiteWorkspace.awarenessStore.setFlag('enable_edgeless_toolbar', true);
-  blockSuiteWorkspace.awarenessStore.setFlag('enable_block_hub', true);
-  blockSuiteWorkspace.awarenessStore.setFlag('enable_drag_handle', true);
-  blockSuiteWorkspace.awarenessStore.setFlag('enable_surface', true);
-  blockSuiteWorkspace.awarenessStore.setFlag('enable_linked_page', true);
+function setEditorFlags(blockSuiteWorkspace: BlockSuiteWorkspace) {
+  Object.entries(config.editorFlags).forEach(([key, value]) => {
+    blockSuiteWorkspace.awarenessStore.setFlag(
+      key as keyof BlockSuiteFeatureFlags,
+      value
+    );
+  });
 }
 
 const WorkspaceDetail: React.FC = () => {
@@ -82,7 +82,7 @@ const WorkspaceDetail: React.FC = () => {
 
   useEffect(() => {
     if (currentWorkspace) {
-      enableFullFlags(currentWorkspace.blockSuiteWorkspace);
+      setEditorFlags(currentWorkspace.blockSuiteWorkspace);
     }
   }, [currentWorkspace]);
   if (!currentPageId) {