refactor!: remove next.js (#3267)

packages/cli/package.json

@@ -3,10 +3,11 @@
   "type": "module",
   "private": true,
   "bin": {
-    "dev-web": "./src/dev.mjs"
+    "build-core": "./src/bin/build-core.mjs",
+    "dev-core": "./src/bin/dev-core.mjs"
   },
-  "scripts": {
-    "start": "ts-node-esm ./src/dev.mjs"
+  "exports": {
+    "./config": "./src/config/index.ts"
   },
   "devDependencies": {
     "@clack/core": "^0.3.2",

packages/cli/src/bin/build-core.mjs

@@ -0,0 +1,16 @@
+#!/usr/bin/env node
+import { spawnSync } from 'node:child_process';
+import { fileURLToPath } from 'node:url';
+
+const child = spawnSync(
+  process.execPath,
+  [
+    '--loader',
+    'ts-node/esm/transpile-only',
+    fileURLToPath(new URL('./build-core.ts', import.meta.url)),
+    ...process.argv.slice(2),
+  ],
+  { stdio: 'inherit' }
+);
+
+if (child.status) process.exit(child.status);

packages/cli/src/bin/build-core.ts

@@ -0,0 +1,48 @@
+import { spawn } from 'node:child_process';
+import path from 'node:path';
+
+import type { BuildFlags } from '../config/index.js';
+import { projectRoot } from '../config/index.js';
+
+const cwd = path.resolve(projectRoot, 'apps', 'core');
+
+const getChannel = () => {
+  switch (process.env.BUILD_TYPE) {
+    case 'canary':
+    case 'beta':
+    case 'stable':
+    case 'internal':
+      return process.env.BUILD_TYPE;
+    default: {
+      throw new Error(
+        'BUILD_TYPE must be one of canary, beta, stable, internal'
+      );
+    }
+  }
+};
+
+const flags = {
+  distribution: 'browser',
+  mode: 'production',
+  channel: getChannel(),
+  coverage: process.env.COVERAGE === 'true',
+} satisfies BuildFlags;
+
+spawn(
+  'node',
+  [
+    '--loader',
+    'ts-node/esm/transpile-only',
+    '../../node_modules/webpack/bin/webpack.js',
+    '--mode',
+    'production',
+    '--env',
+    'flags=' + Buffer.from(JSON.stringify(flags), 'utf-8').toString('hex'),
+  ].filter((v): v is string => !!v),
+  {
+    cwd,
+    stdio: 'inherit',
+    shell: true,
+    env: process.env,
+  }
+);

packages/cli/src/bin/dev-core.mjs

@@ -7,7 +7,7 @@ const child = spawnSync(
   [
     '--loader',
     'ts-node/esm/transpile-only',
-    fileURLToPath(new URL('./dev.ts', import.meta.url)),
+    fileURLToPath(new URL('./dev-core.ts', import.meta.url)),
     ...process.argv.slice(2),
   ],
   { stdio: 'inherit' }

packages/cli/src/bin/dev-core.ts

@@ -0,0 +1,84 @@
+import { spawn } from 'node:child_process';
+import path from 'node:path';
+
+import * as p from '@clack/prompts';
+
+import { type BuildFlags, projectRoot } from '../config/index.js';
+
+const cwd = path.resolve(projectRoot, 'apps', 'core');
+
+const flags: BuildFlags = {
+  distribution: 'browser',
+  mode: 'development',
+  channel: 'canary',
+  coverage: false,
+};
+
+const buildFlags = await p.group(
+  {
+    mode: () =>
+      p.select({
+        message: 'Mode',
+        options: [
+          {
+            value: 'development',
+          },
+          {
+            value: 'production',
+          },
+        ],
+        initialValue: 'development',
+      }),
+    channel: () =>
+      p.select({
+        message: 'Channel',
+        options: [
+          {
+            value: 'canary',
+          },
+          {
+            value: 'beta',
+          },
+          {
+            value: 'stable',
+          },
+        ],
+        initialValue: 'canary',
+      }),
+    coverage: () =>
+      p.confirm({
+        message: 'Enable coverage',
+        initialValue: process.env.COVERAGE === 'true',
+      }),
+  },
+  {
+    onCancel: () => {
+      p.cancel('Operation cancelled.');
+      process.exit(0);
+    },
+  }
+);
+
+flags.mode = buildFlags.mode as any;
+flags.channel = buildFlags.channel as any;
+flags.coverage = buildFlags.coverage;
+
+spawn(
+  'node',
+  [
+    '--loader',
+    'ts-node/esm/transpile-only',
+    '../../node_modules/webpack/bin/webpack.js',
+    flags.mode === 'development' ? 'serve' : undefined,
+    '--mode',
+    flags.mode === 'development' ? 'development' : 'production',
+    '--env',
+    'flags=' + Buffer.from(JSON.stringify(flags), 'utf-8').toString('hex'),
+  ].filter((v): v is string => !!v),
+  {
+    cwd,
+    stdio: 'inherit',
+    shell: true,
+    env: process.env,
+  }
+);

packages/cli/src/config/index.ts

@@ -0,0 +1,12 @@
+import { fileURLToPath } from 'node:url';
+
+export type BuildFlags = {
+  distribution: 'browser' | 'desktop';
+  mode: 'development' | 'production';
+  channel: 'stable' | 'beta' | 'canary' | 'internal';
+  coverage?: boolean;
+};
+
+export const projectRoot = fileURLToPath(
+  new URL('../../../../', import.meta.url)
+);

packages/cli/src/dev.ts

@@ -1,85 +0,0 @@
-#!/usr/bin/env ts-node-esm
-import { spawn } from 'node:child_process';
-import * as fs from 'node:fs';
-import * as path from 'node:path';
-import { fileURLToPath } from 'node:url';
-
-import * as p from '@clack/prompts';
-import { spawnSync } from 'child_process';
-
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
-
-const root = path.resolve(__dirname, '..', '..', '..');
-const cwd = path.resolve(root, 'apps', 'web');
-
-const dev = await p.group(
-  {
-    debugBlockSuite: () =>
-      p.confirm({
-        message: 'Debug blocksuite locally?',
-        initialValue: false,
-      }),
-  },
-  {
-    onCancel: () => {
-      p.cancel('Operation cancelled.');
-      process.exit(0);
-    },
-  }
-);
-
-const env: Record<string, string> = {
-  PATH: process.env.PATH ?? '',
-  NODE_ENV: 'development',
-  PORT: '8080',
-};
-
-if (dev.debugBlockSuite) {
-  const { config } = await import('dotenv');
-  const envLocal = config({
-    path: path.resolve(cwd, '.env.local'),
-  });
-
-  const localBlockSuite = await p.text({
-    message: 'local blocksuite PATH',
-    initialValue: envLocal.error
-      ? undefined
-      : envLocal.parsed?.LOCAL_BLOCK_SUITE,
-  });
-  if (typeof localBlockSuite !== 'string') {
-    throw new Error('local blocksuite PATH is required');
-  }
-  if (!fs.existsSync(localBlockSuite)) {
-    throw new Error(`local blocksuite not found: ${localBlockSuite}`);
-  }
-  env.LOCAL_BLOCK_SUITE = localBlockSuite;
-} else {
-  env.LOCAL_BLOCK_SUITE = '';
-}
-
-const packages = ['infra', 'plugin-infra'];
-
-spawnSync('nx', ['run-many', '-t', 'build', '-p', ...packages], {
-  env,
-  cwd,
-  stdio: 'inherit',
-  shell: true,
-});
-
-packages.forEach(pkg => {
-  const cwd = path.resolve(root, 'packages', pkg);
-  spawn('yarn', ['dev'], {
-    env,
-    cwd,
-    stdio: 'inherit',
-    shell: true,
-  });
-});
-
-spawn('yarn', ['dev', '-p', '8080'], {
-  env,
-  cwd,
-  stdio: 'inherit',
-  shell: true,
-});

packages/cli/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "Node16",
+    "outDir": "lib"
+  },
+  "include": ["src/bin", "src"]
+}

packages/component/src/components/app-sidebar/index.jotai.ts

@@ -2,10 +2,7 @@ import { atom } from 'jotai';
 import { atomWithStorage } from 'jotai/utils';
 
 export const APP_SIDEBAR_OPEN = 'app-sidebar-open';
-export const appSidebarOpenAtom = atomWithStorage(
-  APP_SIDEBAR_OPEN,
-  undefined as boolean | undefined
-);
+export const appSidebarOpenAtom = atomWithStorage(APP_SIDEBAR_OPEN, true);
 export const appSidebarFloatingAtom = atom(false);
 
 export const appSidebarResizingAtom = atom(false);

packages/component/src/components/app-sidebar/index.tsx

@@ -1,4 +1,4 @@
-import { NoSsr, Skeleton } from '@mui/material';
+import { Skeleton } from '@mui/material';
 import { assignInlineVars } from '@vanilla-extract/dynamic';
 import clsx from 'clsx';
 import { useAtom, useAtomValue } from 'jotai';
@@ -53,7 +53,6 @@ export function AppSidebar(props: AppSidebarProps): ReactElement {
   const [appSidebarFloating, setAppSidebarFloating] = useAtom(
     appSidebarFloatingAtom
   );
-  const initialRender = open === undefined;
 
   const isResizing = useAtomValue(appSidebarResizingAtom);
   const navRef = useRef<HTMLDivElement>(null);
@@ -85,10 +84,6 @@ export function AppSidebar(props: AppSidebarProps): ReactElement {
   const enableAnimation = useEnableAnimation();
 
   const isMacosDesktop = environment.isDesktop && environment.isMacOs;
-  if (initialRender) {
-    // avoid the UI flash
-    return <div />;
-  }
 
   return (
     <>
@@ -107,9 +102,7 @@ export function AppSidebar(props: AppSidebarProps): ReactElement {
         data-enable-animation={enableAnimation && !isResizing}
       >
         <nav className={navStyle} ref={navRef} data-testid="app-sidebar">
-          <NoSsr>
-            <SidebarHeader router={props.router} />
-          </NoSsr>
+          <SidebarHeader router={props.router} />
           <div className={navBodyStyle} data-testid="sliderBar-inner">
             {props.children}
           </div>

packages/env/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@affine/env",
   "private": true,
+  "type": "module",
   "main": "./src/index.ts",
   "module": "./src/index.ts",
   "types": "./src/global.ts",

packages/env/src/__tests__/is-valid-ip-address.spec.ts

@@ -1,6 +1,6 @@
 import { describe, expect, test } from 'vitest';
 
-import { isValidIPAddress } from '../is-valid-ip-address';
+import { isValidIPAddress } from '../is-valid-ip-address.js';
 
 describe('isValidIpAddress', () => {
   test('should return true for valid IP address', () => {

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

@@ -4,7 +4,7 @@ import { fileURLToPath } from 'url';
 import { describe, expect, test } from 'vitest';
 import * as Y from 'yjs';
 
-import { migrateToSubdoc } from '../blocksuite';
+import { migrateToSubdoc } from '../blocksuite/index.js';
 
 const fixturePath = resolve(
   dirname(fileURLToPath(import.meta.url)),

packages/env/src/blocksuite/index.ts

@@ -2,7 +2,11 @@ import type { Page } from '@blocksuite/store';
 
 export async function initPageWithPreloading(page: Page) {
   const workspace = page.workspace;
-  const { data } = await import('@affine/templates/preloading.json');
+  const {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-expect-error
+    data,
+  } = await import('@affine/templates/preloading.json');
   await page.waitForLoaded();
   await workspace.importPageSnapshot(data['space:hello-world'], page.id);
 }
@@ -17,4 +21,4 @@ export async function initEmptyPage(page: Page) {
   page.addBlock('affine:paragraph', {}, noteBlockId);
 }
 
-export * from './subdoc-migration';
+export * from './subdoc-migration.js';

packages/env/src/global.ts

@@ -10,13 +10,11 @@ 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';
+import { isBrowser, isDesktop, isServer } from './constant.js';
+import { isValidIPAddress } from './is-valid-ip-address.js';
+import { UaHelper } from './ua-helper.js';
 
 declare global {
   interface Window {
@@ -46,7 +44,7 @@ declare global {
   // eslint-disable-next-line no-var
   var environment: Environment;
   // eslint-disable-next-line no-var
-  var runtimeConfig: PublicRuntimeConfig;
+  var runtimeConfig: RuntimeConfig;
   // eslint-disable-next-line no-var
   var $AFFINE_SETUP: boolean | undefined;
   // eslint-disable-next-line no-var
@@ -57,7 +55,18 @@ declare global {
   var websocketPrefixUrl: string;
 }
 
-export const buildFlagsSchema = z.object({
+export const blockSuiteFeatureFlags = z.object({
+  enable_database: z.boolean(),
+  enable_drag_handle: z.boolean(),
+  enable_surface: z.boolean(),
+  enable_block_hub: z.boolean(),
+  enable_slash_menu: z.boolean(),
+  enable_edgeless_toolbar: z.boolean(),
+  enable_linked_page: z.boolean(),
+  enable_bookmark_operation: z.boolean(),
+});
+
+export const runtimeFlagsSchema = z.object({
   enablePlugin: z.boolean(),
   enableTestProperties: z.boolean(),
   enableBroadcastChannelProvider: z.boolean(),
@@ -72,41 +81,15 @@ export const buildFlagsSchema = z.object({
   enableNotificationCenter: z.boolean(),
   enableCloud: z.boolean(),
   enableMoveDatabase: z.boolean(),
-});
-
-export const blockSuiteFeatureFlags = z.object({
-  enable_database: z.boolean(),
-  enable_drag_handle: z.boolean(),
-  enable_surface: z.boolean(),
-  enable_block_hub: z.boolean(),
-  enable_slash_menu: z.boolean(),
-  enable_edgeless_toolbar: z.boolean(),
-  enable_linked_page: z.boolean(),
-  enable_bookmark_operation: z.boolean(),
+  serverAPI: z.string(),
+  editorFlags: blockSuiteFeatureFlags,
+  appVersion: z.string(),
+  editorVersion: z.string(),
 });
 
 export type BlockSuiteFeatureFlags = z.infer<typeof blockSuiteFeatureFlags>;
 
-export type BuildFlags = z.infer<typeof buildFlagsSchema>;
-
-export const publicRuntimeConfigSchema = buildFlagsSchema.extend({
-  PROJECT_NAME: z.string(),
-  BUILD_DATE: z.string(),
-  gitVersion: z.string(),
-  appVersion: z.string(),
-  editorVersion: z.string(),
-  hash: z.string(),
-  serverAPI: z.string(),
-  editorFlags: blockSuiteFeatureFlags,
-});
-
-export type PublicRuntimeConfig = z.infer<typeof publicRuntimeConfigSchema>;
-
-const { publicRuntimeConfig: config } = getConfig() as {
-  publicRuntimeConfig: PublicRuntimeConfig;
-};
-
-publicRuntimeConfigSchema.parse(config);
+export type RuntimeConfig = z.infer<typeof runtimeFlagsSchema>;
 
 export const platformSchema = z.enum([
   'aix',
@@ -175,27 +158,12 @@ interface Desktop extends ChromeBrowser {
 
 export type Environment = Browser | Server | Desktop;
 
-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('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;
+  runtimeFlagsSchema.parse(runtimeConfig);
+
   let environment: Environment;
   const isDebug = process.env.NODE_ENV === 'development';
   if (isServer) {
@@ -239,7 +207,6 @@ export function setupGlobal() {
   globalThis.environment = environment;
 
   if (environment.isBrowser) {
-    printBuildInfo();
     globalThis.editorVersion = global.editorVersion;
   }
 

packages/env/src/workspace.ts

@@ -7,7 +7,7 @@ import type {
 } from '@blocksuite/store';
 import type { FC, PropsWithChildren } from 'react';
 
-import type { Collection } from './filter';
+import type { Collection } from './filter.js';
 
 export enum WorkspaceVersion {
   SubDoc = 2,

packages/env/tsconfig.json

@@ -4,6 +4,7 @@
   "compilerOptions": {
     "composite": true,
     "noEmit": false,
+    "moduleResolution": "Node16",
     "outDir": "lib"
   },
   "references": [

packages/hooks/package.json

@@ -1,5 +1,6 @@
 {
   "name": "@toeverything/hooks",
+  "type": "module",
   "exports": {
     "./*": "./src/*"
   },
@@ -8,5 +9,21 @@
     "@affine/env": "workspace:*",
     "@toeverything/y-indexeddb": "workspace:*"
   },
+  "devDependencies": {
+    "@blocksuite/block-std": "0.0.0-20230717055529-79180930-nightly",
+    "@blocksuite/blocks": "0.0.0-20230717055529-79180930-nightly",
+    "@blocksuite/editor": "0.0.0-20230717055529-79180930-nightly",
+    "@blocksuite/global": "0.0.0-20230717055529-79180930-nightly",
+    "@blocksuite/lit": "0.0.0-20230717055529-79180930-nightly",
+    "@blocksuite/store": "0.0.0-20230717055529-79180930-nightly"
+  },
+  "peerDependencies": {
+    "@blocksuite/block-std": "*",
+    "@blocksuite/blocks": "*",
+    "@blocksuite/editor": "*",
+    "@blocksuite/global": "*",
+    "@blocksuite/lit": "*",
+    "@blocksuite/store": "*"
+  },
   "version": "0.7.0-canary.47"
 }

packages/infra/package.json

@@ -1,22 +1,22 @@
 {
   "name": "@toeverything/infra",
   "type": "module",
-  "module": "./dist/index.mjs",
-  "main": "./dist/index.js",
-  "types": "./dist/index.d.ts",
+  "module": "./dist/index.js",
+  "main": "./dist/index.cjs",
+  "types": "./dist/src/index.d.ts",
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
+      "types": "./dist/src/index.d.ts",
       "import": "./dist/index.js",
       "require": "./dist/index.cjs"
     },
     "./core/*": {
-      "types": "./dist/core/*.d.ts",
+      "types": "./dist/src/core/*.d.ts",
       "import": "./dist/core/*.js",
       "require": "./dist/core/*.cjs"
     },
     "./preload/*": {
-      "types": "./dist/preload/*.d.ts",
+      "types": "./dist/src/preload/*.d.ts",
       "import": "./dist/preload/*.js",
       "require": "./dist/preload/*.cjs"
     }

packages/infra/preload/electron.d.ts

@@ -1,3 +1,3 @@
 /* eslint-disable */
 // @ts-ignore
-export * from '../dist/preload/electron';
+export * from '../dist/src/preload/electron';

packages/infra/src/handler.ts

@@ -7,8 +7,8 @@ import type {
   UIHandlers,
   UpdaterHandlers,
   WorkspaceHandlers,
-} from './type';
-import { HandlerManager } from './type';
+} from './type.js';
+import { HandlerManager } from './type.js';
 
 export abstract class DBHandlerManager extends HandlerManager<
   'db',

packages/infra/src/index.ts

@@ -1,2 +1,2 @@
-export * from './handler';
-export * from './type';
+export * from './handler.js';
+export * from './type.js';

packages/infra/src/type.ts

@@ -1,4 +1,4 @@
-import type { TypedEventEmitter } from './core/event-emitter';
+import type { TypedEventEmitter } from './core/event-emitter.js';
 
 export abstract class HandlerManager<
   Namespace extends string,

packages/infra/tsconfig.json

@@ -4,6 +4,7 @@
   "compilerOptions": {
     "composite": true,
     "noEmit": false,
+    "moduleResolution": "Node16",
     "outDir": "lib"
   },
   "references": [

packages/infra/vite.config.ts

@@ -22,9 +22,5 @@ export default defineConfig({
       external: ['electron', 'async-call-rpc', 'rxjs'],
     },
   },
-  plugins: [
-    dts({
-      insertTypesEntry: true,
-    }),
-  ],
+  plugins: [dts()],
 });