fix: dispose model update listeners (#8857)

toeverything · Dec 4, 2024 · 0a89339 · 0a89339
1 parent 9cd3d8c
commit 0a89339
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 30 deletions.
diff --git a/packages/affine/block-embed/src/embed-linked-doc-block/embed-linked-doc-block.ts b/packages/affine/block-embed/src/embed-linked-doc-block/embed-linked-doc-block.ts
@@ -310,14 +310,16 @@ export class EmbedLinkedDocBlockComponent extends EmbedBlockComponent<EmbedLinke
       }
     }
 
-    this.model.propsUpdated.on(({ key }) => {
-      if (key === 'pageId' || key === 'style') {
-        this._load().catch(e => {
-          console.error(e);
-          this.isError = true;
-        });
-      }
-    });
+    this.disposables.add(
+      this.model.propsUpdated.on(({ key }) => {
+        if (key === 'pageId' || key === 'style') {
+          this._load().catch(e => {
+            console.error(e);
+            this.isError = true;
+          });
+        }
+      })
+    );
   }
 
   override disconnectedCallback() {

diff --git a/packages/affine/block-embed/src/embed-synced-doc-block/embed-synced-doc-block.ts b/packages/affine/block-embed/src/embed-synced-doc-block/embed-synced-doc-block.ts
@@ -456,14 +456,16 @@ export class EmbedSyncedDocBlockComponent extends EmbedBlockComponent<EmbedSynce
 
     this.contentEditable = 'false';
 
-    this.model.propsUpdated.on(({ key }) => {
-      if (key === 'pageId' || key === 'style') {
-        this._load().catch(e => {
-          console.error(e);
-          this._error = true;
-        });
-      }
-    });
+    this.disposables.add(
+      this.model.propsUpdated.on(({ key }) => {
+        if (key === 'pageId' || key === 'style') {
+          this._load().catch(e => {
+            console.error(e);
+            this._error = true;
+          });
+        }
+      })
+    );
 
     this._setDocUpdatedAt();
     this.disposables.add(

diff --git a/packages/blocks/src/image-block/image-block.ts b/packages/blocks/src/image-block/image-block.ts
@@ -61,11 +61,13 @@ export class ImageBlockComponent extends CaptionedBlockComponent<
 
     this.refreshData();
     this.contentEditable = 'false';
-    this.model.propsUpdated.on(({ key }) => {
-      if (key === 'sourceId') {
-        this.refreshData();
-      }
-    });
+    this._disposables.add(
+      this.model.propsUpdated.on(({ key }) => {
+        if (key === 'sourceId') {
+          this.refreshData();
+        }
+      })
+    );
   }
 
   override disconnectedCallback() {

diff --git a/packages/blocks/src/image-block/image-edgeless-block.ts b/packages/blocks/src/image-block/image-edgeless-block.ts
@@ -67,11 +67,13 @@ export class ImageEdgelessBlockComponent extends GfxBlockComponent<
 
     this.refreshData();
     this.contentEditable = 'false';
-    this.model.propsUpdated.on(({ key }) => {
-      if (key === 'sourceId') {
-        this.refreshData();
-      }
-    });
+    this.disposables.add(
+      this.model.propsUpdated.on(({ key }) => {
+        if (key === 'sourceId') {
+          this.refreshData();
+        }
+      })
+    );
   }
 
   override disconnectedCallback() {

diff --git a/packages/docs/guide/block-view.md b/packages/docs/guide/block-view.md
@@ -87,10 +87,11 @@ class MyBlockView extends BlockComponent<MyBlockModel> {
 
   override connectedCallback() {
     super.connectedCallback();
-
-    this.model.propsUpdated.on(() => {
-      this._yen = `${this.model.count * 100}¥`;
-    });
+    this.disposables.add(
+      this.model.propsUpdated.on(() => {
+        this._yen = `${this.model.count * 100}¥`;
+      })
+    );
   }
 
   override render() {