refactor!: remove next.js (#3267)

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

@@ -0,0 +1,84 @@
+import { hash } from './utils.js';
+
+function testPackageName(regexp: RegExp): (module: any) => boolean {
+  return (module: any) =>
+    module.nameForCondition && regexp.test(module.nameForCondition());
+}
+
+export const productionCacheGroups = {
+  asyncVendor: {
+    test: /[\\/]node_modules[\\/]/,
+    name(module: any) {
+      // https://hackernoon.com/the-100-correct-way-to-split-your-chunks-with-webpack-f8a9df5b7758
+      const name =
+        module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)?.[1] ??
+        'unknown';
+      return `npm-async-${hash(name)}`;
+    },
+    priority: Number.MAX_SAFE_INTEGER,
+    chunks: 'async' as const,
+  },
+  mui: {
+    name: `npm-mui`,
+    test: testPackageName(/[\\/]node_modules[\\/](mui|@mui)[\\/]/),
+    priority: 200,
+    enforce: true,
+  },
+  blocksuite: {
+    name: `npm-blocksuite`,
+    test: testPackageName(/[\\/]node_modules[\\/](@blocksuite)[\\/]/),
+    priority: 200,
+    enforce: true,
+  },
+  react: {
+    name: `npm-react`,
+    test: testPackageName(
+      /[\\/]node_modules[\\/](react|react-dom|scheduler)[\\/]/
+    ),
+    priority: 200,
+    enforce: true,
+  },
+  jotai: {
+    name: `npm-jotai`,
+    test: testPackageName(/[\\/]node_modules[\\/](jotai)[\\/]/),
+    priority: 200,
+    enforce: true,
+  },
+  rxjs: {
+    name: `npm-rxjs`,
+    test: testPackageName(/[\\/]node_modules[\\/]rxjs[\\/]/),
+    priority: 200,
+    enforce: true,
+  },
+  lodash: {
+    name: `npm-lodash`,
+    test: testPackageName(/[\\/]node_modules[\\/]lodash[\\/]/),
+    priority: 200,
+    enforce: true,
+  },
+  emotion: {
+    name: `npm-emotion`,
+    test: testPackageName(/[\\/]node_modules[\\/](@emotion)[\\/]/),
+    priority: 200,
+    enforce: true,
+  },
+  vendor: {
+    name: 'vendor',
+    test: /[\\/]node_modules[\\/]/,
+    priority: 190,
+    enforce: true,
+  },
+  styles: {
+    name: 'styles',
+    test: (module: any) =>
+      module.nameForCondition &&
+      /\.css$/.test(module.nameForCondition()) &&
+      !/^javascript/.test(module.type),
+    chunks: 'all' as const,
+    minSize: 1,
+    minChunks: 1,
+    reuseExistingChunk: true,
+    priority: 1000,
+    enforce: true,
+  },
+};

apps/core/.webpack/config.ts

@@ -0,0 +1,306 @@
+import { join, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { createRequire } from 'node:module';
+import HTMLPlugin from 'html-webpack-plugin';
+import type { Configuration as DevServerConfiguration } from 'webpack-dev-server';
+import { PerfseePlugin } from '@perfsee/webpack';
+import { sentryWebpackPlugin } from '@sentry/webpack-plugin';
+
+import CopyPlugin from 'copy-webpack-plugin';
+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 { 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';
+
+const IN_CI = !!process.env.CI;
+
+export const rootPath = fileURLToPath(new URL('..', import.meta.url));
+
+const require = createRequire(rootPath);
+
+const OptimizeOptionOptions: (
+  buildFlags: BuildFlags
+) => webpack.Configuration['optimization'] = buildFlags => ({
+  minimize: buildFlags.mode === 'production',
+  minimizer: [
+    new TerserPlugin({
+      minify: TerserPlugin.swcMinify,
+      parallel: true,
+      extractComments: true,
+      terserOptions: {
+        ecma: 2020,
+        compress: {
+          unused: true,
+        },
+        mangle: true,
+      },
+    }),
+  ],
+  removeEmptyChunks: true,
+  providedExports: true,
+  usedExports: true,
+  sideEffects: true,
+  removeAvailableModules: true,
+  runtimeChunk: {
+    name: 'runtime',
+  },
+  splitChunks: {
+    chunks: 'all',
+    minSize: 1,
+    minChunks: 1,
+    maxInitialRequests: Number.MAX_SAFE_INTEGER,
+    maxAsyncRequests: Number.MAX_SAFE_INTEGER,
+    cacheGroups:
+      buildFlags.mode === 'production'
+        ? productionCacheGroups
+        : {
+            default: false,
+            vendors: false,
+          },
+  },
+});
+
+export const createConfiguration: (
+  buildFlags: BuildFlags,
+  runtimeConfig: RuntimeConfig
+) => webpack.Configuration = (buildFlags, runtimeConfig) => {
+  let publicPath = process.env.PUBLIC_PATH ?? '/';
+
+  const cacheKey = computeCacheKey(buildFlags);
+
+  const config = {
+    name: 'affine',
+    // to set a correct base path for the source map
+    context: projectRoot,
+    output: {
+      environment: {
+        module: true,
+        dynamicImport: true,
+      },
+      filename: '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/[hash][ext][query]',
+      devtoolModuleFilenameTemplate: 'webpack://[namespace]/[resource-path]',
+      hotUpdateChunkFilename: 'hot/[id].[fullhash].js',
+      hotUpdateMainFilename: 'hot/[runtime].[fullhash].json',
+      path: join(rootPath, 'dist'),
+      clean: buildFlags.mode === 'production',
+      globalObject: 'globalThis',
+      publicPath,
+    },
+    target: ['web', 'es2022'],
+
+    mode: buildFlags.mode,
+
+    devtool:
+      buildFlags.mode === 'production'
+        ? buildFlags.distribution === 'desktop'
+          ? 'inline-source-map'
+          : 'hidden-nosources-source-map'
+        : 'eval-cheap-module-source-map',
+
+    resolve: {
+      extensionAlias: {
+        '.js': ['.js', '.tsx', '.ts'],
+        '.mjs': ['.mjs', '.mts'],
+      },
+      extensions: ['.js', '.ts', '.tsx'],
+    },
+
+    cache: {
+      type: 'filesystem',
+      buildDependencies: {
+        config: [fileURLToPath(import.meta.url)],
+      },
+      version: cacheKey,
+    },
+
+    module: {
+      parser: {
+        javascript: {
+          // Treat as missing export as error
+          strictExportPresence: true,
+        },
+      },
+      rules: [
+        {
+          test: /\.m?js?$/,
+          resolve: {
+            fullySpecified: false,
+          },
+        },
+        {
+          oneOf: [
+            {
+              test: /\.tsx?$/,
+              // Compile all ts files in the workspace
+              include: resolve(rootPath, '..', '..'),
+              loader: require.resolve('swc-loader'),
+              options: {
+                // https://swc.rs/docs/configuring-swc/
+                jsc: {
+                  preserveAllComments: true,
+                  parser: {
+                    syntax: 'typescript',
+                    dynamicImport: true,
+                    topLevelAwait: false,
+                    tsx: true,
+                  },
+                  target: 'es2022',
+                  externalHelpers: true,
+                  transform: {
+                    react: {
+                      runtime: 'automatic',
+                      refresh: buildFlags.mode === 'development' && {
+                        refreshReg: '$RefreshReg$',
+                        refreshSig: '$RefreshSig$',
+                        emitFullSignatures: true,
+                      },
+                    },
+                  },
+                  experimental: {
+                    keepImportAssertions: true,
+                    plugins: [
+                      buildFlags.coverage && [
+                        'swc-plugin-coverage-instrument',
+                        {},
+                      ],
+                    ].filter(Boolean),
+                  },
+                },
+              },
+            },
+            {
+              test: /\.svg$/,
+              use: [
+                'thread-loader',
+                {
+                  loader: '@svgr/webpack',
+                  options: {
+                    icon: true,
+                  },
+                },
+              ],
+              exclude: [/node_modules/],
+            },
+            {
+              test: /\.(png|jpg|gif|svg|webp)$/,
+              type: 'asset/resource',
+            },
+            {
+              test: /\.(ttf|eot|woff|woff2)$/i,
+              type: 'asset/resource',
+            },
+            {
+              test: /\.txt$/,
+              loader: 'raw-loader',
+            },
+            {
+              test: /\.css$/,
+              use: [
+                MiniCssExtractPlugin.loader,
+                {
+                  loader: 'css-loader',
+                  options: {
+                    url: false,
+                    sourceMap: false,
+                    modules: false,
+                    import: true,
+                    importLoaders: 1,
+                  },
+                },
+                {
+                  loader: 'postcss-loader',
+                  options: {
+                    postcssOptions: {
+                      config: resolve(
+                        rootPath,
+                        '.webpack',
+                        'postcss.config.cjs'
+                      ),
+                    },
+                  },
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    },
+
+    plugins: [
+      ...(IN_CI ? [] : [new webpack.ProgressPlugin({ percentBy: 'entries' })]),
+      ...(buildFlags.mode === 'development'
+        ? [new ReactRefreshWebpackPlugin({ overlay: false, esModule: true })]
+        : []),
+      new HTMLPlugin({
+        template: join(rootPath, '.webpack', 'template.html'),
+        inject: 'body',
+        scriptLoading: 'defer',
+        minify: false,
+        chunks: ['index'],
+        filename: 'index.html',
+      }),
+      new MiniCssExtractPlugin({
+        filename: `[name].[chunkhash:8].css`,
+        ignoreOrder: true,
+      }),
+      new VanillaExtractPlugin(),
+      new webpack.DefinePlugin({
+        'process.env': JSON.stringify({}),
+        runtimeConfig: JSON.stringify(runtimeConfig),
+      }),
+      new CopyPlugin({
+        patterns: [
+          { from: resolve(rootPath, 'public'), to: resolve(rootPath, 'dist') },
+        ],
+      }),
+    ],
+
+    optimization: OptimizeOptionOptions(buildFlags),
+
+    devServer: {
+      hot: 'only',
+      liveReload: false,
+      client: undefined,
+      historyApiFallback: true,
+      static: {
+        directory: resolve(rootPath, 'public'),
+        publicPath: '/',
+      },
+    } as DevServerConfiguration,
+  } satisfies webpack.Configuration;
+
+  if (buildFlags.mode === 'production' && process.env.PERFSEE_TOKEN) {
+    config.devtool = 'hidden-nosources-source-map';
+    config.plugins.push(
+      new PerfseePlugin({
+        project: 'affine-toeverything',
+      })
+    );
+  }
+
+  if (
+    process.env.SENTRY_AUTH_TOKEN &&
+    process.env.SENTRY_ORG &&
+    process.env.SENTRY_PROJECT
+  ) {
+    config.plugins.push(
+      sentryWebpackPlugin({
+        org: process.env.SENTRY_ORG,
+        project: process.env.SENTRY_PROJECT,
+        authToken: process.env.SENTRY_AUTH_TOKEN,
+      })
+    );
+  }
+
+  return config;
+};

apps/core/.webpack/postcss.config.cjs

@@ -0,0 +1,20 @@
+const cssnano = require('cssnano');
+
+module.exports = function (context) {
+  const plugins = [
+    cssnano({
+      preset: [
+        'default',
+        {
+          convertValues: false,
+        },
+      ],
+    }),
+  ];
+
+  return {
+    from: context.from,
+    plugins,
+    to: context.to,
+  };
+};

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

@@ -0,0 +1,115 @@
+import type { BlockSuiteFeatureFlags, RuntimeConfig } from '@affine/env/global';
+import type { BuildFlags } from '@affine/cli/config';
+import { createRequire } from 'node:module';
+
+const require = createRequire(import.meta.url);
+const packageJson = require('../package.json');
+
+const editorFlags: 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,
+  enable_bookmark_operation: false,
+};
+
+export function getRuntimeConfig(buildFlags: BuildFlags): RuntimeConfig {
+  const buildPreset: Record<string, RuntimeConfig> = {
+    stable: {
+      enablePlugin: false,
+      enableTestProperties: false,
+      enableBroadcastChannelProvider: true,
+      enableDebugPage: true,
+      changelogUrl: 'https://affine.pro/blog/what-is-new-affine-0717',
+      imageProxyUrl: 'https://workers.toeverything.workers.dev/proxy/image',
+      enablePreloading: true,
+      enableNewSettingModal: true,
+      enableNewSettingUnstableApi: false,
+      enableSQLiteProvider: true,
+      enableMoveDatabase: false,
+      enableNotificationCenter: false,
+      enableCloud: false,
+      serverAPI: 'https://localhost:3010',
+      editorFlags,
+      appVersion: packageJson.version,
+      editorVersion: packageJson.dependencies['@blocksuite/editor'],
+    },
+    // canary will be aggressive and enable all features
+    canary: {
+      enablePlugin: true,
+      enableTestProperties: true,
+      enableBroadcastChannelProvider: true,
+      enableDebugPage: true,
+      changelogUrl: 'https://affine.pro/blog/what-is-new-affine-0717',
+      imageProxyUrl: 'https://workers.toeverything.workers.dev/proxy/image',
+      enablePreloading: true,
+      enableNewSettingModal: true,
+      enableNewSettingUnstableApi: false,
+      enableSQLiteProvider: true,
+      enableMoveDatabase: false,
+      enableNotificationCenter: true,
+      enableCloud: false,
+      serverAPI: 'https://localhost:3010',
+      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)) {
+    throw new Error(`BUILD_TYPE ${currentBuild} is not supported`);
+  }
+
+  const currentBuildPreset = buildPreset[currentBuild];
+
+  const environmentPreset = {
+    enablePlugin: process.env.ENABLE_PLUGIN
+      ? process.env.ENABLE_PLUGIN === 'true'
+      : currentBuildPreset.enablePlugin,
+    enableTestProperties: process.env.ENABLE_TEST_PROPERTIES
+      ? process.env.ENABLE_TEST_PROPERTIES === 'true'
+      : currentBuildPreset.enableTestProperties,
+    enableBroadcastChannelProvider: process.env.ENABLE_BC_PROVIDER
+      ? process.env.ENABLE_BC_PROVIDER !== 'false'
+      : currentBuildPreset.enableBroadcastChannelProvider,
+    changelogUrl: process.env.CHANGELOG_URL ?? currentBuildPreset.changelogUrl,
+    enablePreloading: process.env.ENABLE_PRELOADING
+      ? process.env.ENABLE_PRELOADING === 'true'
+      : currentBuildPreset.enablePreloading,
+    enableNewSettingModal: process.env.ENABLE_NEW_SETTING_MODAL
+      ? process.env.ENABLE_NEW_SETTING_MODAL === 'true'
+      : currentBuildPreset.enableNewSettingModal,
+    enableSQLiteProvider: process.env.ENABLE_SQLITE_PROVIDER
+      ? process.env.ENABLE_SQLITE_PROVIDER === 'true'
+      : currentBuildPreset.enableSQLiteProvider,
+    enableNewSettingUnstableApi: process.env.ENABLE_NEW_SETTING_UNSTABLE_API
+      ? process.env.ENABLE_NEW_SETTING_UNSTABLE_API === 'true'
+      : currentBuildPreset.enableNewSettingUnstableApi,
+    enableNotificationCenter: process.env.ENABLE_NOTIFICATION_CENTER
+      ? process.env.ENABLE_NOTIFICATION_CENTER === 'true'
+      : currentBuildPreset.enableNotificationCenter,
+    enableCloud: process.env.ENABLE_CLOUD
+      ? process.env.ENABLE_CLOUD === 'true'
+      : currentBuildPreset.enableCloud,
+    enableMoveDatabase: process.env.ENABLE_MOVE_DATABASE
+      ? process.env.ENABLE_MOVE_DATABASE === 'true'
+      : currentBuildPreset.enableMoveDatabase,
+  };
+
+  return {
+    ...currentBuildPreset,
+    // environment preset will overwrite current build preset
+    // this environment variable is for debug proposes only
+    // do not put them into CI
+    ...(process.env.CI ? {} : environmentPreset),
+  };
+}

apps/core/.webpack/template.html

@@ -0,0 +1,45 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, maximum-scale=1"
+    />
+    <title>AFFiNE</title>
+    <meta name="theme-color" content="#fafafa" />
+    <link rel="manifest" href="/manifest.json" />
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+    <link rel="icon" sizes="192x192" href="/chrome-192x192.png" />
+    <meta name="emotion-insertion-point" content="" />
+    <meta property="description" content="{description}" />
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:url" content="https://app.affine.pro/" />
+    <meta
+      name="twitter:title"
+      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."
+    />
+    <meta property="og:type" content="website" />
+    <meta
+      property="og:description"
+      content="There can be more than Notion and Miro. AFFiNE is a next-gen knowledge base that brings planning, sorting and creating all together."
+    />
+    <meta property="og:url" content="https://app.affine.pro/" />
+    <meta property="og:image" content="https://affine.pro/og.jpeg" />
+    <link
+      data-react-helmet="true"
+      rel="shortcut icon"
+      href="https://affine.pro/favicon.ico"
+    />
+  </head>
+  <body>
+    <div id="app"></div>
+  </body>
+</html>

apps/core/.webpack/utils.ts

@@ -0,0 +1,18 @@
+import { createHash } from 'node:crypto';
+import type { BuildFlags } from '@affine/cli/config';
+
+export function hash(content: string): string {
+  const hash = createHash('sha512');
+  hash.update(content);
+  const pkgHash = hash.digest('hex');
+  return pkgHash.substring(0, 8);
+}
+
+export function computeCacheKey(buildFlags: BuildFlags) {
+  return [
+    '1',
+    'node' + process.version,
+    buildFlags.mode,
+    buildFlags.distribution,
+  ].join('-');
+}

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

@@ -0,0 +1,23 @@
+import { createConfiguration, rootPath } from './config.js';
+import { merge } from 'webpack-merge';
+import { resolve } from 'node:path';
+import type { BuildFlags } from '@affine/cli/config';
+import { getRuntimeConfig } from './runtime-config.js';
+
+export default async function (cli_env: any, _: any) {
+  const flags: BuildFlags = JSON.parse(
+    Buffer.from(cli_env.flags, 'hex').toString('utf-8')
+  );
+  console.log('build flags', flags);
+  const runtimeConfig = getRuntimeConfig(flags);
+  console.log('runtime config', runtimeConfig);
+  const config = createConfiguration(flags, runtimeConfig);
+  return merge(config, {
+    entry: {
+      index: {
+        asyncChunks: true,
+        import: resolve(rootPath, 'src/index.tsx'),
+      },
+    },
+  });
+}