feat!: affine cloud support (#3813)

Co-authored-by: Hongtao Lye <codert.sn@gmail.com>
Co-authored-by: liuyi <forehalo@gmail.com>
Co-authored-by: LongYinan <lynweklm@gmail.com>
Co-authored-by: X1a0t <405028157@qq.com>
Co-authored-by: JimmFly <yangjinfei001@gmail.com>
Co-authored-by: Peng Xiao <pengxiao@outlook.com>
Co-authored-by: xiaodong zuo <53252747+zuoxiaodong0815@users.noreply.github.com>
Co-authored-by: DarkSky <25152247+darkskygit@users.noreply.github.com>
Co-authored-by: Qi <474021214@qq.com>
Co-authored-by: danielchim <kahungchim@gmail.com>

apps/core/.webpack/cache-group.ts

@@ -3,11 +3,15 @@ function testPackageName(regexp: RegExp): (module: any) => boolean {
     module.nameForCondition && regexp.test(module.nameForCondition());
 }
 
+// https://hackernoon.com/the-100-correct-way-to-split-your-chunks-with-webpack-f8a9df5b7758
 export const productionCacheGroups = {
   asyncVendor: {
     test: /[\\/]node_modules[\\/]/,
     name(module: any) {
-      // https://hackernoon.com/the-100-correct-way-to-split-your-chunks-with-webpack-f8a9df5b7758
+      // monorepo linked in node_modules, so it's not a npm package
+      if (!module.context.includes('node_modules')) {
+        return `app-async`;
+      }
       const name = module.context.match(
         /[\\/]node_modules[\\/](.*?)([\\/]|$)/
       )?.[1];

apps/core/.webpack/config.ts

@@ -1,6 +1,7 @@
 import { join, resolve } from 'node:path';
 import { fileURLToPath } from 'node:url';
 import { createRequire } from 'node:module';
+
 import type { Configuration as DevServerConfiguration } from 'webpack-dev-server';
 import { PerfseePlugin } from '@perfsee/webpack';
 import { sentryWebpackPlugin } from '@sentry/webpack-plugin';
@@ -10,13 +11,14 @@ import ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin';
 import TerserPlugin from 'terser-webpack-plugin';
 import webpack from 'webpack';
 import MiniCssExtractPlugin from 'mini-css-extract-plugin';
+import { compact } from 'lodash-es';
 
 import { productionCacheGroups } from './cache-group.js';
 import type { BuildFlags } from '@affine/cli/config';
 import { projectRoot } from '@affine/cli/config';
 import { VanillaExtractPlugin } from '@vanilla-extract/webpack-plugin';
-import { computeCacheKey } from './utils.js';
 import type { RuntimeConfig } from '@affine/env/global';
+import { WebpackS3Plugin, gitShortHash } from './s3-plugin.js';
 
 const IN_CI = !!process.env.CI;
 
@@ -67,16 +69,26 @@ const OptimizeOptionOptions: (
   },
 });
 
+export const publicPath = (function () {
+  const { BUILD_TYPE } = process.env;
+  const publicPath = process.env.PUBLIC_PATH ?? '/';
+  if (process.env.COVERAGE) {
+    return publicPath;
+  }
+  if (BUILD_TYPE === 'canary') {
+    return `https://dev.affineassets.com/${gitShortHash()}/`;
+  } else if (BUILD_TYPE === 'beta' || BUILD_TYPE === 'stable') {
+    return `https://prod.affineassets.com/${gitShortHash()}/`;
+  }
+  return publicPath;
+})();
+
 export const createConfiguration: (
   buildFlags: BuildFlags,
   runtimeConfig: RuntimeConfig
 ) => webpack.Configuration = (buildFlags, runtimeConfig) => {
-  let publicPath = process.env.PUBLIC_PATH ?? '/';
-
   const blocksuiteBaseDir = buildFlags.localBlockSuite;
 
-  const cacheKey = computeCacheKey(buildFlags);
-
   const config = {
     name: 'affine',
     // to set a correct base path for the source map
@@ -96,8 +108,11 @@ export const createConfiguration: (
           ? 'js/[name]-[contenthash:8].js'
           : 'js/[name].js',
       // In some cases webpack will emit files starts with "_" which is reserved in web extension.
-      chunkFilename: 'js/chunk.[name].js',
-      assetModuleFilename: 'assets/[contenthash:8][ext][query]',
+      chunkFilename:
+        buildFlags.mode === 'production'
+          ? 'js/chunk.[name]-[contenthash:8].js'
+          : 'js/chunk.[name].js',
+      assetModuleFilename: 'assets/[name]-[contenthash:8][ext][query]',
       devtoolModuleFilenameTemplate: 'webpack://[namespace]/[resource-path]',
       hotUpdateChunkFilename: 'hot/[id].[fullhash].js',
       hotUpdateMainFilename: 'hot/[runtime].[fullhash].json',
@@ -192,14 +207,6 @@ export const createConfiguration: (
             },
     },
 
-    cache: {
-      type: 'filesystem',
-      buildDependencies: {
-        config: [fileURLToPath(import.meta.url)],
-      },
-      version: cacheKey,
-    },
-
     module: {
       parser: {
         javascript: {
@@ -308,7 +315,7 @@ export const createConfiguration: (
                 {
                   loader: 'css-loader',
                   options: {
-                    url: false,
+                    url: true,
                     sourceMap: false,
                     modules: false,
                     import: true,
@@ -333,22 +340,23 @@ export const createConfiguration: (
         },
       ],
     },
-
-    plugins: [
-      ...(IN_CI ? [] : [new webpack.ProgressPlugin({ percentBy: 'entries' })]),
-      ...(buildFlags.mode === 'development'
-        ? [new ReactRefreshWebpackPlugin({ overlay: false, esModule: true })]
-        : [
-            new MiniCssExtractPlugin({
-              filename: `[name].[contenthash:8].css`,
-              ignoreOrder: true,
-            }),
-          ]),
+    plugins: compact([
+      IN_CI ? null : new webpack.ProgressPlugin({ percentBy: 'entries' }),
+      buildFlags.mode === 'development'
+        ? new ReactRefreshWebpackPlugin({ overlay: false, esModule: true })
+        : new MiniCssExtractPlugin({
+            filename: `[name].[contenthash:8].css`,
+            ignoreOrder: true,
+          }),
       new VanillaExtractPlugin(),
       new webpack.DefinePlugin({
         'process.env': JSON.stringify({}),
         'process.env.COVERAGE': JSON.stringify(!!buildFlags.coverage),
         'process.env.NODE_ENV': JSON.stringify(buildFlags.mode),
+        'process.env.SHOULD_REPORT_TRACE': `${Boolean(
+          process.env.SHOULD_REPORT_TRACE
+        )}`,
+        'process.env.TRACE_REPORT_ENDPOINT': `"${process.env.TRACE_REPORT_ENDPOINT}"`,
         runtimeConfig: JSON.stringify(runtimeConfig),
       }),
       new CopyPlugin({
@@ -359,7 +367,10 @@ export const createConfiguration: (
           },
         ],
       }),
-    ],
+      buildFlags.mode === 'production' && process.env.R2_SECRET_ACCESS_KEY
+        ? new WebpackS3Plugin()
+        : null,
+    ]),
 
     optimization: OptimizeOptionOptions(buildFlags),
 
@@ -373,6 +384,14 @@ export const createConfiguration: (
         publicPath: '/',
         watch: true,
       },
+      proxy: {
+        '/api': 'http://localhost:3010',
+        '/socket.io': {
+          target: 'http://localhost:3010',
+          ws: true,
+        },
+        '/graphql': 'http://localhost:3010',
+      },
     } as DevServerConfiguration,
   } satisfies webpack.Configuration;
 

apps/core/.webpack/runtime-config.ts

@@ -24,9 +24,9 @@ const editorFlags: BlockSuiteFeatureFlags = {
 };
 
 export function getRuntimeConfig(buildFlags: BuildFlags): RuntimeConfig {
-  const buildPreset: Record<string, RuntimeConfig> = {
+  const buildPreset: Record<BuildFlags['channel'], RuntimeConfig> = {
     stable: {
-      enablePlugin: false,
+      enablePlugin: true,
       enableTestProperties: false,
       enableBroadcastChannelProvider: true,
       enableDebugPage: true,
@@ -37,13 +37,26 @@ export function getRuntimeConfig(buildFlags: BuildFlags): RuntimeConfig {
       enableNewSettingUnstableApi: false,
       enableSQLiteProvider: true,
       enableMoveDatabase: false,
-      enableNotificationCenter: false,
-      enableCloud: false,
-      serverAPI: 'https://localhost:3010',
+      enableNotificationCenter: true,
+      enableCloud: true,
+      enableEnhanceShareMode: false,
+      serverUrlPrefix: 'https://app.affine.pro',
       editorFlags,
       appVersion: packageJson.version,
       editorVersion: packageJson.dependencies['@blocksuite/editor'],
     },
+    get beta() {
+      return {
+        ...this.stable,
+        serverUrlPrefix: 'https://ambassador.affine.pro',
+      };
+    },
+    get internal() {
+      return {
+        ...this.stable,
+        serverUrlPrefix: 'https://affine.fail',
+      };
+    },
     // canary will be aggressive and enable all features
     canary: {
       enablePlugin: true,
@@ -58,18 +71,15 @@ export function getRuntimeConfig(buildFlags: BuildFlags): RuntimeConfig {
       enableSQLiteProvider: true,
       enableMoveDatabase: false,
       enableNotificationCenter: true,
-      enableCloud: false,
-      serverAPI: 'https://localhost:3010',
+      enableCloud: true,
+      enableEnhanceShareMode: false,
+      serverUrlPrefix: 'https://affine.fail',
       editorFlags,
       appVersion: packageJson.version,
       editorVersion: packageJson.dependencies['@blocksuite/editor'],
     },
   };
 
-  // beta and internal versions are the same as stable
-  buildPreset.beta = buildPreset.stable;
-  buildPreset.internal = buildPreset.stable;
-
   const currentBuild = buildFlags.channel;
 
   if (!(currentBuild in buildPreset)) {
@@ -107,11 +117,18 @@ export function getRuntimeConfig(buildFlags: BuildFlags): RuntimeConfig {
     enableCloud: process.env.ENABLE_CLOUD
       ? process.env.ENABLE_CLOUD === 'true'
       : currentBuildPreset.enableCloud,
+    enableEnhanceShareMode: process.env.ENABLE_ENHANCE_SHARE_MODE
+      ? process.env.ENABLE_ENHANCE_SHARE_MODE === 'true'
+      : currentBuildPreset.enableEnhanceShareMode,
     enableMoveDatabase: process.env.ENABLE_MOVE_DATABASE
       ? process.env.ENABLE_MOVE_DATABASE === 'true'
       : currentBuildPreset.enableMoveDatabase,
   };
 
+  if (buildFlags.mode === 'development') {
+    currentBuildPreset.serverUrlPrefix = 'http://localhost:8080';
+  }
+
   return {
     ...currentBuildPreset,
     // environment preset will overwrite current build preset

apps/core/.webpack/s3-plugin.ts

@@ -0,0 +1,58 @@
+import { join } from 'node:path';
+import { execSync } from 'node:child_process';
+import { readFile } from 'node:fs/promises';
+
+import type { PutObjectCommandInput } from '@aws-sdk/client-s3';
+import { PutObjectCommand, S3Client } from '@aws-sdk/client-s3';
+import { once } from 'lodash-es';
+import { lookup } from 'mime-types';
+import type { Compiler, WebpackPluginInstance } from 'webpack';
+
+export const gitShortHash = once(() => {
+  const { GITHUB_SHA } = process.env;
+  if (GITHUB_SHA) {
+    return GITHUB_SHA.substring(0, 9);
+  }
+  const sha = execSync(`git rev-parse --short HEAD`, {
+    encoding: 'utf-8',
+  }).trim();
+  return sha;
+});
+
+export const R2_BUCKET =
+  process.env.R2_BUCKET! ??
+  (process.env.BUILD_TYPE === 'canary' ? 'assets-dev' : 'assets-prod');
+
+export class WebpackS3Plugin implements WebpackPluginInstance {
+  private readonly s3 = new S3Client({
+    region: 'auto',
+    endpoint: `https://${process.env.R2_ACCOUNT_ID}.r2.cloudflarestorage.com`,
+    credentials: {
+      accessKeyId: process.env.R2_ACCESS_KEY_ID!,
+      secretAccessKey: process.env.R2_SECRET_ACCESS_KEY!,
+    },
+  });
+
+  apply(compiler: Compiler) {
+    compiler.hooks.assetEmitted.tapPromise(
+      'WebpackS3Plugin',
+      async (asset, { outputPath }) => {
+        if (asset === 'index.html') {
+          return;
+        }
+        const assetPath = join(outputPath, asset);
+        const assetSource = await readFile(assetPath);
+        const putObjectCommandOptions: PutObjectCommandInput = {
+          Body: assetSource,
+          Bucket: R2_BUCKET,
+          Key: join(gitShortHash(), asset),
+        };
+        const contentType = lookup(asset);
+        if (contentType) {
+          putObjectCommandOptions.ContentType = contentType;
+        }
+        await this.s3.send(new PutObjectCommand(putObjectCommandOptions));
+      }
+    );
+  }
+}

apps/core/.webpack/template.html

@@ -17,14 +17,14 @@
     <meta name="twitter:url" content="https://app.affine.pro/" />
     <meta
       name="twitter:title"
-      content="AFFiNE：There can be more than Notion and Miro."
+      content="AFFiNE: There can be more than Notion and Miro."
     />
     <meta name="twitter:description" content="{description}" />
     <meta name="twitter:site" content="@AffineOfficial" />
     <meta name="twitter:image" content="https://affine.pro/og.jpeg" />
     <meta
       property="og:title"
-      content="AFFiNE：There can be more than Notion and Miro."
+      content="AFFiNE: There can be more than Notion and Miro."
     />
     <meta property="og:type" content="website" />
     <meta
@@ -39,7 +39,8 @@
       href="https://affine.pro/favicon.ico"
     />
   </head>
+
   <body>
-    <div id="app"></div>
+    <div id="app" data-version="<%= GIT_SHORT_SHA %>"></div>
   </body>
 </html>

apps/core/.webpack/webpack.config.ts

@@ -1,10 +1,12 @@
-import { createConfiguration, rootPath } from './config.js';
+import { createConfiguration, rootPath, publicPath } from './config.js';
 import { merge } from 'webpack-merge';
 import { join, resolve } from 'node:path';
 import type { BuildFlags } from '@affine/cli/config';
 import { getRuntimeConfig } from './runtime-config.js';
 import HTMLPlugin from 'html-webpack-plugin';
 
+import { gitShortHash } from './s3-plugin.js';
+
 export default async function (cli_env: any, _: any) {
   const flags: BuildFlags = JSON.parse(
     Buffer.from(cli_env.flags, 'hex').toString('utf-8')
@@ -44,12 +46,16 @@ export default async function (cli_env: any, _: any) {
         minify: false,
         chunks: ['app', 'plugin', 'polyfill/intl-segmenter', 'polyfill/ses'],
         filename: 'index.html',
+        templateParameters: {
+          GIT_SHORT_SHA: gitShortHash(),
+        },
       }),
       new HTMLPlugin({
         template: join(rootPath, '.webpack', 'template.html'),
         inject: 'body',
         scriptLoading: 'module',
         minify: false,
+        publicPath,
         chunks: [
           '_plugin/index.test',
           'plugin',
@@ -57,6 +63,9 @@ export default async function (cli_env: any, _: any) {
           'polyfill/ses',
         ],
         filename: '_plugin/index.html',
+        templateParameters: {
+          GIT_SHORT_SHA: gitShortHash(),
+        },
       }),
     ],
   });