stimeo-ui 0.16.0 → 0.18.0

package/dist/controllers/switch_controller.js

@@ -1,15 +1,109 @@
 import { Controller } from '@hotwired/stimulus';
 
-// src/controllers/switch_controller.ts
+function setAttributeIfChanged(element, name, value, beforeWrite) {
+  if (element.getAttribute(name) === value) return false;
+  beforeWrite?.();
+  if (value === null) element.removeAttribute(name);
+  else element.setAttribute(name, value);
+  return true;
+}
+
+var AuthoredMutationWatcher = class {
+  #onAuthored;
+  #claims = null;
+  #observer = null;
+  constructor(onAuthored) {
+    this.#onAuthored = onAuthored;
+  }
+  observe(root, options) {
+    this.disconnect();
+    const observer = new MutationObserver((records) => {
+      if (this.#observer !== observer) return;
+      const authored = this.#filter(records);
+      if (authored.length > 0) this.#onAuthored(authored);
+    });
+    this.#observer = observer;
+    this.#claims = { attributes: /* @__PURE__ */ new Map(), children: /* @__PURE__ */ new Map() };
+    observer.observe(root, {
+      attributes: true,
+      attributeFilter: [...options.attributes],
+      subtree: options.subtree ?? false,
+      childList: options.childList ?? false
+    });
+    if (options.ancestorAttributes) {
+      let ancestor = root.parentElement;
+      while (ancestor) {
+        observer.observe(ancestor, {
+          attributes: true,
+          attributeFilter: [...options.ancestorAttributes]
+        });
+        ancestor = ancestor.parentElement;
+      }
+    }
+  }
+  claim(target, name, value) {
+    const claims = this.#claims?.attributes;
+    let attributes = claims?.get(target);
+    if (!attributes) {
+      attributes = /* @__PURE__ */ new Map();
+      claims?.set(target, attributes);
+    }
+    const pending = attributes.get(name);
+    attributes.set(name, { value, count: (pending?.count ?? 0) + 1 });
+  }
+  claimCurrent(target, name) {
+    this.claim(target, name, target.getAttribute(name));
+  }
+  claimChildList(target, added, removed) {
+    const claims = this.#claims?.children;
+    const pending = claims?.get(target) ?? { added: /* @__PURE__ */ new Map(), removed: /* @__PURE__ */ new Map() };
+    for (const node of added) pending.added.set(node, (pending.added.get(node) ?? 0) + 1);
+    for (const node of removed) pending.removed.set(node, (pending.removed.get(node) ?? 0) + 1);
+    claims?.set(target, pending);
+  }
+  take() {
+    return this.#filter(this.#observer?.takeRecords() ?? []);
+  }
+  disconnect() {
+    this.#observer?.disconnect();
+    this.#observer = null;
+    this.#claims = null;
+  }
+  #filter(records) {
+    const authored = records.filter((record) => !this.#consume(record));
+    this.#claims?.attributes.clear();
+    this.#claims?.children.clear();
+    return authored;
+  }
+  #consume(record) {
+    if (record.type === "attributes") {
+      const target = record.target;
+      const pending2 = this.#claims?.attributes.get(target)?.get(record.attributeName);
+      if (!pending2 || pending2.count === 0 || target.getAttribute(record.attributeName) !== pending2.value) {
+        return false;
+      }
+      pending2.count -= 1;
+      return true;
+    }
+    const pending = this.#claims?.children.get(record.target);
+    if (!pending) return false;
+    const added = [...record.addedNodes];
+    const removed = [...record.removedNodes];
+    if (added.some((node) => !pending.added.get(node)) || removed.some((node) => !pending.removed.get(node))) {
+      return false;
+    }
+    for (const node of added) pending.added.set(node, (pending.added.get(node) ?? 0) - 1);
+    for (const node of removed) pending.removed.set(node, (pending.removed.get(node) ?? 0) - 1);
+    return true;
+  }
+};
 
-// src/utils/default_attribute.ts
 function setDefaultAttribute(element, name, value) {
   if (element.hasAttribute(name)) return false;
   element.setAttribute(name, value);
   return true;
 }
 
-// src/utils/field_mirror.ts
 function writeField(field, value) {
   if (field.value === value) return false;
   field.value = value;
@@ -19,7 +113,6 @@ function commitField(target) {
   target.dispatchEvent(new Event("change", { bubbles: true }));
 }
 
-// src/utils/focus_candidate.ts
 function inheritsFieldsetDisabled(control) {
   let fieldset = control.closest("fieldset[disabled]");
   while (fieldset) {
@@ -30,7 +123,6 @@ function inheritsFieldsetDisabled(control) {
   return false;
 }
 
-// src/utils/interactive_host.ts
 var INTERACTIVE_HOST_SELECTOR = "button, input, select, textarea, label, a[href], area[href], summary, details, audio[controls], video[controls], iframe, object, embed";
 function isInteractiveHost(element) {
   if (element.matches(INTERACTIVE_HOST_SELECTOR)) return true;
@@ -47,27 +139,36 @@ function isInteractiveHost(element) {
   return false;
 }
 
-// src/utils/microtask_coalescer.ts
+var ListenerSet = class {
+  #abort = new AbortController();
+  add(target, type, handler, options) {
+    target.addEventListener(type, handler, { ...options, signal: this.#abort.signal });
+  }
+  dispose() {
+    this.#abort.abort();
+    this.#abort = new AbortController();
+  }
+};
+
 var MicrotaskCoalescer = class {
   #run;
   #queued = false;
   #active = false;
   #generation = 0;
-  /** @param run - the single reconciliation pass, invoked at most once per batch. */
   constructor(run) {
     this.#run = run;
   }
-  /** Opens the window in which {@link schedule} is honoured; call from `connect()`. */
   activate() {
     this.#active = true;
   }
-  /** Closes the window and drops any pending pass; call from `disconnect()`. */
   cancel() {
     this.#active = false;
     this.#queued = false;
     this.#generation += 1;
   }
-  /** Requests one pass after the batch settles. Idempotent; inert outside the window. */
+  get pending() {
+    return this.#queued;
+  }
   schedule() {
     if (!this.#active || this.#queued) return;
     this.#queued = true;
@@ -80,7 +181,45 @@ var MicrotaskCoalescer = class {
   }
 };
 
-// src/controllers/switch_controller.ts
+var MorphRenderWatcher = class {
+  #listeners = new ListenerSet();
+  #pass;
+  #element = null;
+  #onMorph = () => this.#pass.schedule();
+  constructor(run) {
+    this.#pass = new MicrotaskCoalescer(run);
+  }
+  observe(element) {
+    if (this.#element === element) return;
+    this.disconnect();
+    this.#element = element;
+    this.#pass.activate();
+    this.#listeners.add(element, "turbo:morph-element", this.#onMorph);
+  }
+  schedule() {
+    this.#pass.schedule();
+  }
+  get pending() {
+    return this.#pass.pending;
+  }
+  disconnect() {
+    this.#listeners.dispose();
+    this.#pass.cancel();
+    this.#element = null;
+  }
+};
+
+var MoveCounter = class {
+  #sequence = 0;
+  record() {
+    this.#sequence += 1;
+    return this.#sequence;
+  }
+  isLatest(token) {
+    return token === this.#sequence;
+  }
+};
+
 var OBSERVED_ATTRIBUTES = [
   "role",
   "aria-checked",
@@ -92,61 +231,49 @@ var OBSERVED_ATTRIBUTES = [
 ];
 var OBSERVED_ANCESTOR_ATTRIBUTES = ["contenteditable"];
 var SwitchController = class extends Controller {
+  #moves = new MoveCounter();
+  #connectionGeneration = 0;
   static targets = ["field"];
   static actions = ["onKeydown", "toggle"];
   static events = ["change", "reconcile"];
-  /** Defaults this instance introduced and may therefore remove safely. */
-  #ownedDefaults = /* @__PURE__ */ new Set();
-  /** Controller writes that must not be mistaken for authored morph changes. */
-  #internalAttributeValues = /* @__PURE__ */ new Map();
-  /** One pass per batch of retained-element changes and field arrivals. */
-  #pass = new MicrotaskCoalescer(() => this.#reconcile());
-  /** The checked state last published: read on connect, then committed or reported. */
+  #ownedDefaults = /* @__PURE__ */ new Map();
+  #pass = new MorphRenderWatcher(() => this.#reconcile());
   #committedChecked = false;
-  #attributeObserver = new MutationObserver((records) => {
+  #attributeObserver = new AuthoredMutationWatcher((records) => {
     this.#releaseAuthoredDefaults(records);
     this.#pass.schedule();
   });
-  /** Blocks disabled pointer/native-key activation before consumer click handlers. */
   #onClickCapture = (event) => {
     if (!this.#isSupportedHost || !this.#isActivationDisabled) return;
     event.preventDefault();
     event.stopImmediatePropagation();
   };
-  /**
-   * Ensures the switch exposes a role and is keyboard-reachable, and takes the
-   * state it finds as the one a later move is measured from, reporting nothing.
-   */
+  #listeners = new ListenerSet();
   connect() {
+    this.#releaseDefaultsRewrittenWhileAway();
     this.#reconcileDefaults();
     this.#mirrorField(false);
     this.#committedChecked = this.#checked;
-    this.element.addEventListener("click", this.#onClickCapture, true);
-    this.#pass.activate();
+    this.#listeners.add(this.element, "click", this.#onClickCapture, { capture: true });
+    this.#pass.observe(this.element);
     this.#observeAttributes();
   }
-  /** Fills a form field inserted or replaced at runtime with the current state. */
   fieldTargetConnected() {
     this.#pass.schedule();
   }
-  /** Releases the click guard, the attribute observer, and a pass still queued. */
+  fieldTargetDisconnected() {
+    this.#pass.schedule();
+  }
   disconnect() {
-    this.#pass.cancel();
-    this.element.removeEventListener("click", this.#onClickCapture, true);
+    this.#connectionGeneration += 1;
+    this.#pass.disconnect();
+    this.#listeners.dispose();
     this.#attributeObserver.disconnect();
-    this.#internalAttributeValues.clear();
   }
-  /** Toggles the checked state. Bound via `data-action` (click). */
   toggle() {
     if (!this.#isSupportedHost || this.#isActivationDisabled) return;
     this.#commit(!this.#checked);
   }
-  /**
-   * Activates the switch on Space/Enter for non-native hosts and suppresses key
-   * repeat. Bound via `data-action` (keydown). A native `<button type="button">`
-   * owns the initial key-to-click synthesis; repeated keydowns are canceled before
-   * the browser can synthesize additional clicks.
-   */
   onKeydown(event) {
     if (event.defaultPrevented) return;
     if (!this.#isSupportedHost) return;
@@ -164,29 +291,21 @@ var SwitchController = class extends Controller {
     if (event.repeat) return;
     this.toggle();
   }
-  /**
-   * Re-derives the defaults and the field after the page changed the host, then
-   * reports a checked state that moved. Records still queued are read first, so
-   * an author's write is not lost when observation is suspended for this pass's
-   * own writes; observation resumes before the report, so an edit a listener
-   * makes is seen by the next pass.
-   */
   #reconcile() {
-    this.#releaseAuthoredDefaults(this.#attributeObserver.takeRecords());
-    this.#attributeObserver.disconnect();
+    this.#releaseAuthoredDefaults(this.#attributeObserver.take());
     this.#reconcileDefaults();
     this.#mirrorField(false);
-    this.#observeAttributes();
+    const authored = this.#attributeObserver.take();
+    this.#releaseAuthoredDefaults(authored);
+    if (authored.length > 0) this.#pass.schedule();
     this.#reportMove();
   }
-  /** Reports a checked state that moved since the one this switch last published. */
   #reportMove() {
     const checked = this.#checked;
     if (checked === this.#committedChecked) return;
     this.#committedChecked = checked;
     this.dispatch("reconcile", { detail: { checked } });
   }
-  /** Re-adds only missing defaults, preserving every authored attribute value. */
   #reconcileDefaults() {
     if (!this.#isSupportedHost) {
       this.#removeOwnedDefaults();
@@ -198,61 +317,50 @@ var SwitchController = class extends Controller {
       this.#setOwnedDefault("tabindex", "0");
     }
   }
-  /** Mirrors the checked state into the optional form field. */
   #mirrorField(notify) {
     if (!this.hasFieldTarget) return;
     const moved = writeField(this.fieldTarget, this.#checked ? "true" : "false");
     if (moved && notify) commitField(this.fieldTarget);
   }
-  /** Records a newly introduced default without claiming authored markup. */
   #setOwnedDefault(name, value) {
-    if (setDefaultAttribute(this.element, name, value)) this.#ownedDefaults.add(name);
+    if (setDefaultAttribute(this.element, name, value)) {
+      this.#ownedDefaults.set(name, value);
+      this.#attributeObserver.claimCurrent(this.element, name);
+    }
+  }
+  #releaseDefaultsRewrittenWhileAway() {
+    for (const [name, written] of this.#ownedDefaults) {
+      const value = this.element.getAttribute(name);
+      if (value !== null && value !== written) this.#ownedDefaults.delete(name);
+    }
   }
-  /**
-   * Gives ownership back when a retained-element morph authors a value. Missing
-   * owned attributes stay owned so reconciliation can restore them.
-   */
   #releaseAuthoredDefaults(records) {
     for (const record of records) {
       if (record.target === this.element) {
         const name = record.attributeName;
         if (name && this.#ownedDefaults.has(name)) {
           const value = this.element.getAttribute(name);
-          if (value !== null && this.#internalAttributeValues.get(name) !== value) {
+          if (value !== null) {
             this.#ownedDefaults.delete(name);
           }
         }
       }
     }
-    this.#internalAttributeValues.clear();
   }
-  /** Removes only defaults introduced by this instance when a host becomes invalid. */
   #removeOwnedDefaults() {
-    for (const name of this.#ownedDefaults) this.element.removeAttribute(name);
+    for (const name of this.#ownedDefaults.keys()) this.#writeAttribute(name, null);
     this.#ownedDefaults.clear();
-    this.#internalAttributeValues.clear();
   }
-  /** Watches retained host attributes that Turbo can morph without reconnecting. */
   #observeAttributes() {
     this.#attributeObserver.observe(this.element, {
-      attributes: true,
-      attributeFilter: OBSERVED_ATTRIBUTES
+      attributes: OBSERVED_ATTRIBUTES,
+      ancestorAttributes: OBSERVED_ANCESTOR_ATTRIBUTES
     });
-    let ancestor = this.element.parentElement;
-    while (ancestor) {
-      this.#attributeObserver.observe(ancestor, {
-        attributes: true,
-        attributeFilter: OBSERVED_ANCESTOR_ATTRIBUTES
-      });
-      ancestor = ancestor.parentElement;
-    }
   }
-  /** Whether the host has one activation model that this controller can own. */
   get #isSupportedHost() {
     if (this.element instanceof HTMLButtonElement) return this.element.type === "button";
     return !isInteractiveHost(this.element);
   }
-  /** Whether ARIA or native HTML semantics make the supported switch inoperable. */
   get #isActivationDisabled() {
     let current = this.element;
     while (current) {
@@ -262,25 +370,34 @@ var SwitchController = class extends Controller {
     if (!(this.element instanceof HTMLButtonElement)) return false;
     return this.element.disabled || inheritsFieldsetDisabled(this.element);
   }
-  /** Whether the switch is currently on. */
   get #checked() {
     return this.element.getAttribute("aria-checked") === "true";
   }
-  /**
-   * Applies one toggle the user made. The state is taken as published before
-   * either report goes out, so a listener that toggles again or writes the
-   * attribute is measured from it.
-   */
   #commit(value) {
+    const generation = this.#connectionGeneration;
     const reflected = value ? "true" : "false";
-    this.#internalAttributeValues.set("aria-checked", reflected);
-    this.element.setAttribute("aria-checked", reflected);
+    const authored = this.#attributeObserver.take();
+    this.#releaseAuthoredDefaults(authored);
+    if (authored.length > 0) this.#pass.schedule();
+    if (this.#ownedDefaults.has("aria-checked")) this.#ownedDefaults.set("aria-checked", reflected);
+    this.#writeAttribute("aria-checked", reflected);
+    const changed = value !== this.#committedChecked;
     this.#committedChecked = value;
+    if (!changed) {
+      this.#mirrorField(false);
+      return;
+    }
+    const token = this.#moves.record();
     this.#mirrorField(true);
+    if (generation !== this.#connectionGeneration || !this.#moves.isLatest(token)) return;
     this.dispatch("change", { detail: { checked: value } });
   }
+  #writeAttribute(name, value) {
+    setAttributeIfChanged(this.element, name, value, () => {
+      this.#attributeObserver.claim(this.element, name, value);
+    });
+  }
 };
 
 export { SwitchController };
-//# sourceMappingURL=switch_controller.js.map
 //# sourceMappingURL=switch_controller.js.map