feat(editor): replace slot with rxjs subject (#10768)

blocksuite/affine/shared/src/services/block-meta-service.ts

@@ -21,7 +21,7 @@ export class BlockMetaService extends StoreExtension {
 
   override loaded() {
     this.store.disposableGroup.add(
-      this.store.slots.blockUpdated.on(({ type, id }) => {
+      this.store.slots.blockUpdated.subscribe(({ type, id }) => {
         if (!this.isBlockMetaEnabled) return;
 
         const model = this.store.getBlock(id)?.model;

blocksuite/affine/shared/src/services/doc-display-meta-service.ts

@@ -1,7 +1,10 @@
 import type { AliasInfo, ReferenceParams } from '@blocksuite/affine-model';
 import { LifeCycleWatcher, StdIdentifier } from '@blocksuite/block-std';
 import { type Container, createIdentifier } from '@blocksuite/global/di';
-import type { Disposable } from '@blocksuite/global/slot';
+import {
+  type DisposableMember,
+  disposeMember,
+} from '@blocksuite/global/disposable';
 import {
   AliasIcon,
   BlockLinkIcon,
@@ -68,7 +71,7 @@ export class DocDisplayMetaService
 
   static override key = 'doc-display-meta';
 
-  readonly disposables: Disposable[] = [];
+  readonly disposables: DisposableMember[] = [];
 
   readonly iconMap = new WeakMap<Store, Signal<TemplateResult>>();
 
@@ -80,7 +83,10 @@ export class DocDisplayMetaService
 
   dispose() {
     while (this.disposables.length > 0) {
-      this.disposables.pop()?.dispose();
+      const disposable = this.disposables.pop();
+      if (disposable) {
+        disposeMember(disposable);
+      }
     }
   }
 
@@ -113,18 +119,19 @@ export class DocDisplayMetaService
         }, pageId);
 
       this.disposables.push(disposable);
-      this.disposables.push(
-        this.std.workspace.slots.docRemoved
-          .filter(docId => docId === doc.id)
-          .once(() => {
+      const docRemovedSubscription =
+        this.std.workspace.slots.docRemoved.subscribe(docId => {
+          if (docId === doc.id) {
+            docRemovedSubscription.unsubscribe();
             const index = this.disposables.findIndex(d => d === disposable);
             if (index !== -1) {
               this.disposables.splice(index, 1);
-              disposable.dispose();
+              disposable.unsubscribe();
             }
             this.iconMap.delete(doc);
-          })
-      );
+          }
+        });
+      this.disposables.push(docRemovedSubscription);
       this.iconMap.set(doc, icon$);
     }
 
@@ -162,23 +169,26 @@ export class DocDisplayMetaService
     if (!title$) {
       title$ = signal(doc.meta?.title || 'Untitled');
 
-      const disposable = this.std.workspace.slots.docListUpdated.on(() => {
-        title$!.value = doc.meta?.title || 'Untitled';
-      });
+      const disposable = this.std.workspace.slots.docListUpdated.subscribe(
+        () => {
+          title$!.value = doc.meta?.title || 'Untitled';
+        }
+      );
 
       this.disposables.push(disposable);
-      this.disposables.push(
-        this.std.workspace.slots.docRemoved
-          .filter(docId => docId === doc.id)
-          .once(() => {
+      const docRemovedSubscription =
+        this.std.workspace.slots.docRemoved.subscribe(docId => {
+          if (docId === doc.id) {
+            docRemovedSubscription.unsubscribe();
             const index = this.disposables.findIndex(d => d === disposable);
             if (index !== -1) {
               this.disposables.splice(index, 1);
-              disposable.dispose();
+              disposable.unsubscribe();
             }
-            this.titleMap.delete(doc);
-          })
-      );
+            this.iconMap.delete(doc);
+          }
+        });
+      this.disposables.push(docRemovedSubscription);
       this.titleMap.set(doc, title$);
     }
 

blocksuite/affine/shared/src/services/doc-mode-service.ts

@@ -1,10 +1,10 @@
 import type { DocMode } from '@blocksuite/affine-model';
 import type { Container } from '@blocksuite/global/di';
 import { createIdentifier } from '@blocksuite/global/di';
-import { type Disposable, Slot } from '@blocksuite/global/slot';
 import { noop } from '@blocksuite/global/utils';
 import type { ExtensionType } from '@blocksuite/store';
 import { Extension } from '@blocksuite/store';
+import { Subject, type Subscription } from 'rxjs';
 
 const DEFAULT_MODE: DocMode = 'page';
 
@@ -42,7 +42,7 @@ export interface DocModeProvider {
   onPrimaryModeChange: (
     handler: (mode: DocMode) => void,
     docId: string
-  ) => Disposable;
+  ) => Subscription;
   /**
    * Set the editor mode. Normally, it would be used to set the mode of the current editor.
    * When patch or override the doc mode service, can pass a callback to set the editor mode.
@@ -61,7 +61,7 @@ export const DocModeProvider = createIdentifier<DocModeProvider>(
 );
 
 const modeMap = new Map<string, DocMode>();
-const slotMap = new Map<string, Slot<DocMode>>();
+const slotMap = new Map<string, Subject<DocMode>>();
 
 export class DocModeService extends Extension implements DocModeProvider {
   static override setup(di: Container) {
@@ -78,9 +78,9 @@ export class DocModeService extends Extension implements DocModeProvider {
 
   onPrimaryModeChange(handler: (mode: DocMode) => void, id: string) {
     if (!slotMap.get(id)) {
-      slotMap.set(id, new Slot());
+      slotMap.set(id, new Subject());
     }
-    return slotMap.get(id)!.on(handler);
+    return slotMap.get(id)!.subscribe(handler);
   }
 
   setEditorMode(mode: DocMode) {
@@ -89,7 +89,7 @@ export class DocModeService extends Extension implements DocModeProvider {
 
   setPrimaryMode(mode: DocMode, id: string) {
     modeMap.set(id, mode);
-    slotMap.get(id)?.emit(mode);
+    slotMap.get(id)?.next(mode);
   }
 
   togglePrimaryMode(id: string) {

blocksuite/affine/shared/src/services/edit-props-store.ts

@@ -1,11 +1,12 @@
 import { ColorSchema } from '@blocksuite/affine-model';
 import { type BlockStdScope, LifeCycleWatcher } from '@blocksuite/block-std';
+import { DisposableGroup } from '@blocksuite/global/disposable';
 import { BlockSuiteError, ErrorCode } from '@blocksuite/global/exceptions';
-import { DisposableGroup, Slot } from '@blocksuite/global/slot';
 import type { DeepPartial } from '@blocksuite/global/utils';
 import { computed, type Signal, signal } from '@preact/signals-core';
 import clonedeep from 'lodash-es/cloneDeep';
 import mergeWith from 'lodash-es/mergeWith';
+import { Subject } from 'rxjs';
 import * as Y from 'yjs';
 import { z } from 'zod';
 
@@ -79,7 +80,7 @@ export class EditPropsStore extends LifeCycleWatcher {
   lastProps$: Signal<LastProps>;
 
   slots = {
-    storageUpdated: new Slot<{
+    storageUpdated: new Subject<{
       key: StoragePropsKey;
       value: StorageProps[StoragePropsKey];
     }>(),
@@ -198,7 +199,7 @@ export class EditPropsStore extends LifeCycleWatcher {
       JSON.stringify(value)
     );
     if (oldValue === value) return;
-    this.slots.storageUpdated.emit({ key, value });
+    this.slots.storageUpdated.next({ key, value });
   }
 
   override unmounted() {

blocksuite/affine/shared/src/services/page-viewport-service.ts

@@ -1,15 +1,15 @@
 import { createIdentifier } from '@blocksuite/global/di';
-import { Slot } from '@blocksuite/global/slot';
 import type { ExtensionType } from '@blocksuite/store';
+import { Subject } from 'rxjs';
 
 import type { Viewport } from '../types';
 
-export const PageViewportService = createIdentifier<Slot<Viewport>>(
+export const PageViewportService = createIdentifier<Subject<Viewport>>(
   'PageViewportService'
 );
 
 export const PageViewportServiceExtension: ExtensionType = {
   setup: di => {
-    di.addImpl(PageViewportService, () => new Slot<Viewport>());
+    di.addImpl(PageViewportService, () => new Subject<Viewport>());
   },
 };