fix: rebuild createIntersectionGroup observer when shared options change

getSharedOptions() was only read when the observer was first created,
so with more than one node attached, changing root/rootMargin/threshold
never rebuilt the shared observer — and because the re-run skipped the
getter entirely, the reactive dependency was lost for good. The README
promised reactivity here.

Every node's attachment now reads the shared options, compares them
against the live observer's config (root by identity), and the first
re-run after a change disconnects, rebuilds, and re-observes all
registered nodes. Re-observing is idempotent, so the remaining per-node
re-runs are no-ops.

Author: metonym

README.md

@@ -405,7 +405,7 @@ A bare `intersect`/`intersectAttachment` inside an `#each` block creates one nat
 {/each}
 ```
 
-`root`/`rootMargin`/`threshold` configure the one shared observer, so they're passed once to `createIntersectionGroup` itself (as a function, for the same reactive-dependency-tracking reason `intersectAttachment` takes one) rather than per element:
+`root`/`rootMargin`/`threshold` configure the one shared observer, so they're passed once to `createIntersectionGroup` itself (as a function) rather than per element:
 
 ```js
 const group = createIntersectionGroup(() => ({
@@ -415,6 +415,8 @@ const group = createIntersectionGroup(() => ({
 }));
 ```
 
+Shared options are reactive: when `root`, `rootMargin`, or `threshold` changes, the group rebuilds its single shared observer and re-observes every element. Note that elements whose `once` has already fired are re-observed as well.
+
 `once`, `skip`, `onobserve`, and `onintersect` are the only options that make sense per element, so those are what `group.attach(...)` accepts.
 
 #### Signature

src/intersect.svelte.d.ts

@@ -136,7 +136,10 @@ export interface IntersectionGroup {
  * Creates a group of elements backed by a single shared `IntersectionObserver`
  * instance, for use with `{@attach}` inside an `#each` block. Brings
  * `MultipleIntersectionObserver`'s single-observer performance benefit to the
- * action/attachment API.
+ * action/attachment API. Changing shared options rebuilds the single shared
+ * observer and re-observes every element in the group; elements whose `once`
+ * already fired are re-observed as well, so their callbacks may fire again
+ * under the new config.
  */
 export function createIntersectionGroup(
   getSharedOptions?: () => IntersectGroupSharedOptions,

src/intersect.svelte.js

@@ -92,14 +92,20 @@ export function intersectAttachment(getOptions = () => ({})) {
  *
  * `root`/`rootMargin`/`threshold` are shared across every node in the group
  * (they configure the one underlying observer); only `once`/`skip` and the
- * `onobserve`/`onintersect` callbacks are meaningful per node.
+ * `onobserve`/`onintersect` callbacks are meaningful per node. Changing
+ * shared options rebuilds the single shared observer and re-observes every
+ * element in the group; elements whose `once` already fired are re-observed
+ * as well, so their callbacks may fire again under the new config.
  * @param {() => import("./intersect.svelte.d.ts").IntersectGroupSharedOptions} [getSharedOptions]
  * @returns {import("./intersect.svelte.d.ts").IntersectionGroup}
  */
 export function createIntersectionGroup(getSharedOptions = () => ({})) {
   /** @type {IntersectionObserver | undefined} */
   let observer;
 
+  /** Key of the shared options `observer` was last built from. */
+  let configKey = "";
+
   /** @type {Map<Element, import("./intersect.svelte.d.ts").IntersectGroupNodeOptions>} */
   const callbacks = new Map();
 
@@ -128,17 +134,30 @@ export function createIntersectionGroup(getSharedOptions = () => ({})) {
    */
   function attach(nodeOptions = {}) {
     return (/** @type {Element} */ node) => {
-      if (!observer && typeof IntersectionObserver !== "undefined") {
-        const {
-          root = null,
-          rootMargin = "0px",
-          threshold = 0,
-        } = getSharedOptions();
+      const {
+        root = null,
+        rootMargin = "0px",
+        threshold = 0,
+      } = getSharedOptions();
+      const key = `${rootMargin}|${JSON.stringify(threshold)}`;
+      const rootChanged =
+        observer !== null && observer !== undefined && observer.root !== root;
+
+      if (
+        typeof IntersectionObserver !== "undefined" &&
+        (!observer || key !== configKey || rootChanged)
+      ) {
+        observer?.disconnect();
         observer = new IntersectionObserver(handleEntries, {
           root,
           rootMargin,
           threshold,
         });
+        configKey = key;
+
+        for (const [el, opts] of callbacks) {
+          if (!opts.skip) observer.observe(el);
+        }
       }
 
       callbacks.set(node, nodeOptions);
@@ -151,6 +170,7 @@ export function createIntersectionGroup(getSharedOptions = () => ({})) {
         if (callbacks.size === 0) {
           observer?.disconnect();
           observer = undefined;
+          configKey = "";
         }
       };
     };

tests/e2e/fixtures/GroupSharedOptionsChangeFixture.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+  import { createIntersectionGroup } from "svelte-intersection-observer";
+
+  const margins = ["0px", "100px", "200px"];
+  let step = $state(0);
+  let rootMargin = $derived(margins[step]);
+
+  const group = createIntersectionGroup(() => ({ rootMargin }));
+  const ids = [1, 2];
+</script>
+
+<header>
+  <p>Root margin: {rootMargin}</p>
+  <button
+    data-testid="grow-root-margin"
+    onclick={() => (step = Math.min(step + 1, margins.length - 1))}
+  >
+    Grow root margin
+  </button>
+</header>
+
+{#each ids as id (id)}
+  <div
+    data-testid="item-{id}"
+    {@attach group.attach()}
+  >
+    Item {id}
+  </div>
+{/each}

tests/unit/create-intersection-group.test.ts

@@ -1,6 +1,7 @@
 import { flushSync } from "svelte";
 import { createIntersectionGroup } from "svelte-intersection-observer";
 import { afterEach, describe, expect, test, vi } from "vitest";
+import GroupSharedOptionsChangeFixture from "../e2e/fixtures/GroupSharedOptionsChangeFixture.svelte";
 import IntersectionGroupFixture from "../e2e/fixtures/IntersectionGroupFixture.svelte";
 import { MockIntersectionObserver } from "./mock-intersection-observer";
 import { render } from "./render";
@@ -172,4 +173,50 @@ describe("createIntersectionGroup (component integration)", () => {
         ?.textContent,
     ).toContain("Observer count: 1");
   });
+
+  test("rebuilds the shared observer and re-observes every node when shared options change", () => {
+    const rendered = render(GroupSharedOptionsChangeFixture);
+    cleanup = rendered.cleanup;
+    const item1 = rendered.target.querySelector('[data-testid="item-1"]');
+    const item2 = rendered.target.querySelector('[data-testid="item-2"]');
+    const button = rendered.target.querySelector<HTMLButtonElement>(
+      '[data-testid="grow-root-margin"]',
+    );
+    if (!item1 || !item2 || !button) throw new Error("fixture markup missing");
+
+    expect(MockIntersectionObserver.instances).toHaveLength(1);
+    const firstObserver = MockIntersectionObserver.last();
+
+    flushSync(() => button.click());
+
+    expect(MockIntersectionObserver.instances).toHaveLength(2);
+    expect(firstObserver.disconnected).toBe(true);
+
+    const secondObserver = MockIntersectionObserver.last();
+    expect(secondObserver.options.rootMargin).toBe("100px");
+    expect(secondObserver.observedElements.has(item1)).toBe(true);
+    expect(secondObserver.observedElements.has(item2)).toBe(true);
+  });
+
+  test("keeps tracking shared options reactively across repeated changes", () => {
+    const rendered = render(GroupSharedOptionsChangeFixture);
+    cleanup = rendered.cleanup;
+    const item1 = rendered.target.querySelector('[data-testid="item-1"]');
+    const item2 = rendered.target.querySelector('[data-testid="item-2"]');
+    const button = rendered.target.querySelector<HTMLButtonElement>(
+      '[data-testid="grow-root-margin"]',
+    );
+    if (!item1 || !item2 || !button) throw new Error("fixture markup missing");
+
+    flushSync(() => button.click());
+    expect(MockIntersectionObserver.last().options.rootMargin).toBe("100px");
+
+    flushSync(() => button.click());
+
+    expect(MockIntersectionObserver.instances).toHaveLength(3);
+    const thirdObserver = MockIntersectionObserver.last();
+    expect(thirdObserver.options.rootMargin).toBe("200px");
+    expect(thirdObserver.observedElements.has(item1)).toBe(true);
+    expect(thirdObserver.observedElements.has(item2)).toBe(true);
+  });
 });