[labs/observers] Add unobserve method to ResizeController and Interse…

…ctionController (#3323)

Add unobserve method to `ResizeController` and `IntersectionController` to match native API.

Fixes: #3237

.changeset/violet-avocados-build.md

@@ -0,0 +1,5 @@
+---
+'@lit-labs/observers': minor
+---
+
+Add unobserve method to `ResizeController` and `IntersectionController`.

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.

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.

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);
+  });
 });

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);
+  });
 });