@astryxdesign/core 0.7.1 → 0.7.2-canary.01eab6a

package/src/utils/sharedMutationObserver.test.ts

@@ -0,0 +1,53 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+import {describe, it, expect, vi} from 'vitest';
+import {observeContent} from './sharedMutationObserver';
+
+const flush = async () => new Promise(resolve => setTimeout(resolve, 0));
+
+describe('observeContent', () => {
+  it('calls a registration once per batch for changes anywhere inside its element', async () => {
+    const element = document.createElement('div');
+    element.innerHTML = '<span>first</span>';
+    const callback = vi.fn();
+    const unsubscribe = observeContent(element, callback);
+
+    element.querySelector('span')!.firstChild!.nodeValue = 'second';
+    element.append('third');
+    await flush();
+
+    expect(callback).toHaveBeenCalledTimes(1);
+    unsubscribe();
+  });
+
+  it('removes only its own registration', async () => {
+    const element = document.createElement('div');
+    const kept = vi.fn();
+    const removed = vi.fn();
+    const unsubscribeKept = observeContent(element, kept);
+    const unsubscribeRemoved = observeContent(element, removed);
+
+    unsubscribeRemoved();
+    element.textContent = 'changed';
+    await flush();
+
+    expect(kept).toHaveBeenCalledTimes(1);
+    expect(removed).not.toHaveBeenCalled();
+    unsubscribeKept();
+  });
+
+  it('ignores a released element', async () => {
+    const released = document.createElement('div');
+    const live = document.createElement('div');
+    const releasedCallback = vi.fn();
+    const unsubscribeReleased = observeContent(released, releasedCallback);
+    const unsubscribeLive = observeContent(live, vi.fn());
+
+    unsubscribeReleased();
+    released.textContent = 'changed';
+    await flush();
+
+    expect(releasedCallback).not.toHaveBeenCalled();
+    unsubscribeLive();
+  });
+});

package/src/utils/sharedMutationObserver.ts

@@ -0,0 +1,78 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file sharedMutationObserver.ts
+ * @input MutationObserver API
+ * @output Exports observeContent for shared content-change observation
+ * @position Internal utility; consumed by useTruncation. The content-change
+ *   counterpart of sharedResizeObserver: one observer for every element, so a
+ *   repeated cell or row path does not create one observer per instance.
+ */
+
+type ContentCallback = () => void;
+
+const OPTIONS: MutationObserverInit = {
+  characterData: true,
+  childList: true,
+  subtree: true,
+};
+
+let observer: MutationObserver | null = null;
+const callbacks = new Map<Node, Set<ContentCallback>>();
+
+function dispatch(records: MutationRecord[]): void {
+  // One call per callback per batch, however many records it received. A
+  // record's target can be any descendant, so walk up to the observed roots.
+  const pending = new Set<ContentCallback>();
+  for (const record of records) {
+    for (let node: Node | null = record.target; node; node = node.parentNode) {
+      callbacks.get(node)?.forEach(callback => pending.add(callback));
+    }
+  }
+  pending.forEach(callback => callback());
+}
+
+/**
+ * Call `callback` when the element's text or children change (including
+ * descendants). Returns an unsubscribe that removes only this registration.
+ *
+ * MutationObserver has no per-target unobserve, so a released element stays
+ * registered with the shared observer until no element remains; its records
+ * match no callback and are ignored. The observer disconnects and is released
+ * when the last registration goes.
+ */
+export function observeContent(
+  element: Element,
+  callback: ContentCallback,
+): () => void {
+  if (typeof MutationObserver === 'undefined') {
+    return () => {};
+  }
+  observer ??= new MutationObserver(dispatch);
+  const existing = callbacks.get(element);
+  if (existing) {
+    existing.add(callback);
+  } else {
+    callbacks.set(element, new Set([callback]));
+    observer.observe(element, OPTIONS);
+  }
+
+  let isSubscribed = true;
+  return () => {
+    if (!isSubscribed) {
+      return;
+    }
+    isSubscribed = false;
+    const targetCallbacks = callbacks.get(element);
+    targetCallbacks?.delete(callback);
+    if (targetCallbacks?.size === 0) {
+      callbacks.delete(element);
+    }
+    if (callbacks.size === 0 && observer) {
+      observer.disconnect();
+      observer = null;
+    }
+  };
+}