Merge ad9833c into e90e8fe

AndrewJakubowicz · web-flow · commit 25c692281378 · 2022-10-04T18:12:18.000Z
diff --git a/.changeset/violet-avocados-build.md b/.changeset/violet-avocados-build.md
@@ -0,0 +1,5 @@
+---
+'@lit-labs/observers': minor
+---
+
+Add unobserve method to `ResizeController` and `IntersectionController`.
diff --git a/packages/labs/observers/src/intersection_controller.ts b/packages/labs/observers/src/intersection_controller.ts
@@ -155,6 +155,15 @@ export class IntersectionController<T = unknown> implements ReactiveController {
     this._unobservedUpdate = true;
   }
 
+  /**
+   * Unobserve the target element.
+   * @param target Element to unobserve
+   */
+  unobserve(target: Element) {
+    this._targets.delete(target);
+    this._observer.unobserve(target);
+  }
+
   /**
    * Disconnects the observer. This is done automatically when the host
    * disconnects.
diff --git a/packages/labs/observers/src/resize_controller.ts b/packages/labs/observers/src/resize_controller.ts
@@ -147,6 +147,15 @@ export class ResizeController<T = unknown> implements ReactiveController {
     this._host.requestUpdate();
   }
 
+  /**
+   * Unobserve the target element.
+   * @param target Element to unobserve
+   */
+  unobserve(target: Element) {
+    this._targets.delete(target);
+    this._observer.unobserve(target);
+  }
+
   /**
    * Disconnects the observer. This is done automatically when the host
    * disconnects.
diff --git a/packages/labs/observers/src/test/intersection_controller_test.ts b/packages/labs/observers/src/test/intersection_controller_test.ts
@@ -531,4 +531,31 @@ const canTest = () => {
     // @ts-expect-error Type 'number' is not assignable to type 'string'
     D.value = 3;
   });
+
+  test('observed target can be unobserved', async () => {
+    const el = await getTestElement(() => ({target: null}));
+    const d1 = document.createElement('div');
+
+    // Reports initial changes when observe called.
+    el.observer.observe(d1);
+    el.renderRoot.appendChild(d1);
+    await intersectionComplete();
+    assert.isTrue(el.observerValue);
+    el.resetObserverValue();
+    await intersectionComplete();
+
+    // Does not report change when unobserved
+    el.observer.unobserve(d1);
+    intersectOut(d1);
+    await intersectionComplete();
+    assert.isUndefined(el.observerValue);
+
+    el.remove();
+    container.appendChild(el);
+
+    // Does not report changes when re-connected
+    intersectIn(d1);
+    await intersectionComplete();
+    assert.isUndefined(el.observerValue);
+  });
 });
diff --git a/packages/labs/observers/src/test/resize_controller_test.ts b/packages/labs/observers/src/test/resize_controller_test.ts
@@ -500,4 +500,31 @@ if (DEV_MODE) {
     // @ts-expect-error Type 'number' is not assignable to type 'string'
     D.value = 3;
   });
+
+  test('observed target can be unobserved', async () => {
+    const el = await getTestElement(() => ({target: null}));
+    const d1 = document.createElement('div');
+
+    // Reports initial changes when observe called.
+    el.observer.observe(d1);
+    el.renderRoot.appendChild(d1);
+    await resizeComplete();
+    assert.isTrue(el.observerValue);
+    el.resetObserverValue();
+    await resizeComplete();
+
+    // Does not report change when unobserved
+    el.observer.unobserve(d1);
+    resizeElement(d1);
+    await resizeComplete();
+    assert.isUndefined(el.observerValue);
+
+    el.remove();
+    container.appendChild(el);
+
+    // Does not report changes when re-connected
+    resizeElement(d1);
+    await resizeComplete();
+    assert.isUndefined(el.observerValue);
+  });
 });

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'@lit-labs/observers': minor
 +---
++
 +Add unobserve method to `ResizeController` and `IntersectionController`.