@lokascript/htmx-adapter 3.0.0 → 3.1.1

package/dist/index.cjs

@@ -21,33 +21,41 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var src_exports = {};
 __export(src_exports, {
   EXTENSION_NAME: () => EXTENSION_NAME,
+  TOP_LEVEL_COMMA_RE: () => TOP_LEVEL_COMMA_RE,
   additionalAttributeSelectors: () => additionalAttributeSelectors,
   attributeResolver: () => attributeResolver,
   autoDetectBodyHooks: () => autoDetectBodyHooks,
   canonicalizeElement: () => canonicalizeElement,
   canonicalizeTree: () => canonicalizeTree,
   claimHxOnAttribute: () => claimHxOnAttribute,
+  claimedAttrNames: () => claimedAttrNames,
   createExtension: () => createExtension,
   hasAnyVocab: () => hasAnyVocab,
   hasBodyExecutor: () => hasBodyExecutor,
   hasBodyTranslator: () => hasBodyTranslator,
   installAutoSweep: () => installAutoSweep,
   installResolverMode: () => installResolverMode,
+  isClaimed: () => isClaimed,
   isLangRegistered: () => isLangRegistered,
   isResolverMode: () => isResolverMode,
   langOf: () => langOf,
+  neutralizesOnClaim: () => neutralizesOnClaim,
   normLang: () => normLang,
   onBodyHooksChanged: () => onBodyHooksChanged,
   onVocabUpdate: () => onVocabUpdate,
   register: () => register,
   registerWith: () => registerWith,
+  removeClaimedCanonicalAttrs: () => removeClaimedCanonicalAttrs,
   resetBodyHooks: () => resetBodyHooks,
   resetRegistry: () => resetRegistry,
   setBodyExecutor: () => setBodyExecutor,
   setBodyTranslator: () => setBodyTranslator,
+  setNeutralizeOnClaim: () => setNeutralizeOnClaim,
   setResolverMode: () => setResolverMode,
+  setTriggerSpecSplitter: () => setTriggerSpecSplitter,
   translateTriggerValue: () => translateTriggerValue,
-  vocabFor: () => vocabFor
+  vocabFor: () => vocabFor,
+  wasCreatedByAdapter: () => wasCreatedByAdapter
 });
 module.exports = __toCommonJS(src_exports);
 
@@ -110,10 +118,18 @@ function resetRegistry() {
 }
 
 // src/hx-on.ts
+var hasOwn = (o, k) => Object.prototype.hasOwnProperty.call(o, k);
 var executor = null;
 var translator = null;
 var hookChangeListeners = /* @__PURE__ */ new Set();
 var claimed = /* @__PURE__ */ new WeakMap();
+var neutralizeOnClaim = true;
+function setNeutralizeOnClaim(enabled) {
+  neutralizeOnClaim = enabled;
+}
+function neutralizesOnClaim() {
+  return neutralizeOnClaim;
+}
 function setBodyExecutor(fn) {
   executor = fn;
   for (const listener of hookChangeListeners) listener();
@@ -133,44 +149,76 @@ function onBodyHooksChanged(listener) {
     hookChangeListeners.delete(listener);
   };
 }
+function isClaimed(elt) {
+  return (claimed.get(elt)?.size ?? 0) > 0;
+}
+function claimedAttrNames(elt) {
+  const names = /* @__PURE__ */ new Set();
+  const claims = claimed.get(elt);
+  if (claims) for (const c of claims.values()) names.add(c.attrName);
+  return names;
+}
+function removeClaimedCanonicalAttrs(elt) {
+  let n = 0;
+  for (const name of claimedAttrNames(elt)) {
+    if (name.startsWith("hx-on:") && elt.hasAttribute(name)) {
+      elt.removeAttribute(name);
+      n++;
+    }
+  }
+  return n;
+}
 function eventNameForSuffix(rawSuffix, events) {
   if (rawSuffix.startsWith(":")) return `htmx${rawSuffix}`;
-  return events[rawSuffix] ?? rawSuffix;
+  return hasOwn(events, rawSuffix) ? events[rawSuffix] : rawSuffix;
 }
-function claimHxOnAttribute(elt, attrName, lang, events) {
+function claimHxOnAttribute(elt, attrName, lang, events, options = {}) {
   if (!executor) return false;
   const colon = attrName.indexOf(":");
   if (colon <= 0) return false;
   const eventName = eventNameForSuffix(attrName.slice(colon + 1), events);
-  const already = claimed.get(elt);
-  if (already?.has(eventName)) {
-    if (attrName.startsWith("hx-on:") && elt.hasAttribute(attrName)) {
+  const canonical = attrName.startsWith("hx-on:");
+  const body = elt.getAttribute(attrName) ?? "";
+  let claims = claimed.get(elt);
+  const existing = claims?.get(eventName);
+  if (existing) {
+    if (existing.attrName === attrName) {
+      if (existing.body !== body) {
+        existing.body = body;
+        existing.translated = null;
+      }
+      if (canonical && neutralizeOnClaim && elt.hasAttribute(attrName)) {
+        elt.removeAttribute(attrName);
+        return true;
+      }
+      return false;
+    }
+    if (canonical && (options.adapterCreated || neutralizeOnClaim) && elt.hasAttribute(attrName)) {
       elt.removeAttribute(attrName);
       return true;
     }
     return false;
   }
-  const body = elt.getAttribute(attrName) ?? "";
-  let translatedBody = null;
+  const claim = { attrName, lang, body, translated: null };
   elt.addEventListener(eventName, (evt) => {
     if (!executor) return;
-    if (translatedBody === null) {
-      translatedBody = lang !== "en" && translator ? translator(body, lang) : body;
+    if (claim.translated === null) {
+      claim.translated = claim.lang !== "en" && translator ? translator(claim.body, claim.lang) : claim.body;
     }
     try {
-      executor(translatedBody, elt, evt);
+      executor(claim.translated, elt, evt);
     } catch (err) {
       if (typeof console !== "undefined") {
         console.error(`[htmx-i18n] hx-on body execution failed (${attrName} \u2192 ${eventName})`, err);
       }
     }
   });
-  if (attrName.startsWith("hx-on:")) elt.removeAttribute(attrName);
-  if (already) {
-    already.add(eventName);
-  } else {
-    claimed.set(elt, /* @__PURE__ */ new Set([eventName]));
+  if (!claims) {
+    claims = /* @__PURE__ */ new Map();
+    claimed.set(elt, claims);
   }
+  claims.set(eventName, claim);
+  if (canonical && neutralizeOnClaim) elt.removeAttribute(attrName);
   return true;
 }
 function autoDetectBodyHooks(win) {
@@ -191,6 +239,7 @@ function resetBodyHooks() {
   translator = null;
   hookChangeListeners.clear();
   claimed = /* @__PURE__ */ new WeakMap();
+  neutralizeOnClaim = true;
 }
 
 // src/resolver.ts
@@ -242,19 +291,36 @@ function installResolverMode(htmx) {
 }
 
 // src/canonicalize.ts
+var hasOwn2 = (o, k) => Object.prototype.hasOwnProperty.call(o, k);
 var NS_RE = /^(?:hx|sse|ws)-/;
+var TOP_LEVEL_COMMA_RE = /,(?![^\[]*\])(?![^(]*\))(?![^<]*\/>)(?=(?:[^"']|"[^"]*"|'[^']*')*$)/;
+var mirrorSplit = (value) => value.split(TOP_LEVEL_COMMA_RE);
+var splitSpecs = mirrorSplit;
+function setTriggerSpecSplitter(fn) {
+  splitSpecs = fn ?? mirrorSplit;
+}
+function isTriggerAttr(name) {
+  return name === "hx-trigger" || name.startsWith("hx-trigger:");
+}
 function translateTriggerValue(value, events) {
-  return value.split(",").map((spec) => {
-    const trimmed = spec.trim();
-    if (!trimmed) return trimmed;
-    const parts = trimmed.split(/\s+/);
-    const m = parts[0].match(/^([^[\s]+)(\[.*)?$/);
-    if (m) {
-      const translated = events[m[1]];
-      if (translated) parts[0] = translated + (m[2] ?? "");
-    }
-    return parts.join(" ");
-  }).join(", ");
+  return splitSpecs(value).map(
+    (spec) => spec.replace(
+      /^(\s*)([^[\s]+)/,
+      (whole, ws, evt) => hasOwn2(events, evt) ? ws + events[evt] : whole
+    )
+  ).join(",");
+}
+var created = /* @__PURE__ */ new WeakMap();
+function markCreated(elt, name) {
+  let names = created.get(elt);
+  if (!names) {
+    names = /* @__PURE__ */ new Set();
+    created.set(elt, names);
+  }
+  names.add(name);
+}
+function wasCreatedByAdapter(elt, name) {
+  return created.get(elt)?.has(name) ?? false;
 }
 function canonicalizeElement(elt) {
   if (!elt.attributes || elt.attributes.length === 0) return false;
@@ -276,23 +342,43 @@ function canonicalizeElement(elt) {
   }
   const attrs = vocab?.attrs ?? {};
   const events = vocab?.events ?? {};
+  let hasEvents = false;
+  for (const _ in events) {
+    hasEvents = true;
+    break;
+  }
   let changed = false;
   for (const attr of Array.from(elt.attributes)) {
     const name = attr.name;
     if (!NS_RE.test(name)) continue;
     if (executorMode && name.startsWith("hx-on:")) {
-      if (claimHxOnAttribute(elt, name, lang, events)) changed = true;
+      if (claimHxOnAttribute(elt, name, lang, events, {
+        adapterCreated: wasCreatedByAdapter(elt, name)
+      })) {
+        changed = true;
+      }
+      continue;
+    }
+    if (isTriggerAttr(name)) {
+      if (hasEvents) {
+        const translated = translateTriggerValue(attr.value, events);
+        if (translated !== attr.value) {
+          elt.setAttribute(name, translated);
+          changed = true;
+        }
+      }
       continue;
     }
-    let canonical = attrs[name];
+    let canonical = hasOwn2(attrs, name) ? attrs[name] : void 0;
     let colonBase;
     if (!canonical) {
       const colon = name.indexOf(":");
       if (colon > 0) {
-        colonBase = attrs[name.slice(0, colon)];
+        const base = name.slice(0, colon);
+        colonBase = hasOwn2(attrs, base) ? attrs[base] : void 0;
         if (colonBase) {
           const suffix = name.slice(colon + 1);
-          canonical = `${colonBase}:${events[suffix] ?? suffix}`;
+          canonical = colonBase === "hx-on" ? `${colonBase}:${hasOwn2(events, suffix) ? events[suffix] : suffix}` : `${colonBase}:${suffix}`;
         }
       }
     }
@@ -303,18 +389,11 @@ function canonicalizeElement(elt) {
     }
     if (canonical === name || elt.hasAttribute(canonical)) continue;
     let value = attr.value;
-    if (canonical === "hx-trigger") value = translateTriggerValue(value, events);
+    if (isTriggerAttr(canonical)) value = translateTriggerValue(value, events);
     elt.setAttribute(canonical, value);
+    markCreated(elt, canonical);
     changed = true;
   }
-  const trigger = elt.getAttribute("hx-trigger");
-  if (trigger !== null && Object.keys(events).length > 0) {
-    const translated = translateTriggerValue(trigger, events);
-    if (translated !== trigger) {
-      elt.setAttribute("hx-trigger", translated);
-      changed = true;
-    }
-  }
   return changed;
 }
 function canonicalizeTree(root) {
@@ -333,9 +412,24 @@ function canonicalizeTree(root) {
 
 // src/extension.ts
 var EXTENSION_NAME = "lokascript-i18n";
-function createExtension() {
+function isHtmxBindableHxOn(name, prefixes, mc) {
+  for (const p of prefixes) {
+    if (name === p) return true;
+    if (name.startsWith(p) && name.charAt(p.length) === mc) return true;
+  }
+  return false;
+}
+function createExtension(htmx) {
+  const cfg = htmx?.config;
+  const prefix = cfg && "prefix" in cfg ? cfg.prefix ?? "" : "data-hx-";
+  const mc = cfg?.metaCharacter || ":";
+  const hxOnPrefixes = prefix ? ["hx-on", prefix + "on"] : ["hx-on"];
   return {
-    // htmx v4 (verified on 4.0.0-beta5): fires on each process() root
+    init(internalAPI) {
+      const split = internalAPI?.HCON?.split;
+      if (typeof split === "function") setTriggerSpecSplitter(split.bind(internalAPI.HCON));
+    },
+    // htmx v4 (verified on 4.0.0): fires on each process() root
     // before element init and hx-on binding.
     htmx_before_process(elt) {
       canonicalizeTree(elt);
@@ -344,6 +438,36 @@ function createExtension() {
     htmx_before_process_node(elt) {
       canonicalizeTree(elt);
     },
+    // htmx v4 (verified on 4.0.0): fires per node carrying an
+    // hx-on-family attribute, cancelable — returning false makes htmx
+    // skip JS-binding that node entirely. This is executor mode's
+    // zero-mutation double-execution guard, decided from what the sweep
+    // RECORDED on the node (not from whether an executor is set now):
+    //
+    // - nothing claimed on this node → htmx proceeds as usual;
+    // - every hx-on attribute htmx would bind here is claimed → cancel,
+    //   the authored attributes stay in the DOM;
+    // - the node also carries forms htmx must bind and the adapter never
+    //   claims (the legacy composite `hx-on="event -> code"`, the
+    //   `config.prefix` spelling, a custom meta character) → per-node
+    //   cancellation would kill those too, so fall back to removing the
+    //   claimed canonical attrs and let htmx bind the rest.
+    htmx_before_on_init(elt) {
+      const claimedNames = claimedAttrNames(elt);
+      if (claimedNames.size === 0) return void 0;
+      let unclaimedBindable = false;
+      for (const attr of Array.from(elt.attributes)) {
+        const name = attr.name;
+        if (claimedNames.has(name)) continue;
+        if (isHtmxBindableHxOn(name, hxOnPrefixes, mc)) {
+          unclaimedBindable = true;
+          break;
+        }
+      }
+      if (!unclaimedBindable) return false;
+      removeClaimedCanonicalAttrs(elt);
+      return void 0;
+    },
     // htmx v1/v2 fallback: single event dispatcher.
     onEvent(name, evt) {
       if (name !== "htmx:beforeProcessNode") return;
@@ -355,13 +479,23 @@ function createExtension() {
 }
 function registerWith(htmx) {
   if (!htmx) return null;
-  const ext = createExtension();
+  const ext = createExtension(htmx);
   if (typeof htmx.registerExtension === "function") {
-    htmx.registerExtension(EXTENSION_NAME, ext);
+    if (htmx.registerExtension(EXTENSION_NAME, ext) === false) {
+      if (typeof console !== "undefined") {
+        console.warn(
+          `[htmx-i18n] htmx.registerExtension("${EXTENSION_NAME}") returned false \u2014 the extension is not registered. If htmx.config.extensions (the <meta name="htmx-config"> allowlist) is set, add "${EXTENSION_NAME}" to it. Swapped-in content will not be canonicalized; executor-mode claims fall back to removing canonical hx-on:* attrs.`
+        );
+      }
+      setNeutralizeOnClaim(true);
+      return null;
+    }
+    setNeutralizeOnClaim(false);
     return "v4";
   }
   if (typeof htmx.defineExtension === "function") {
     htmx.defineExtension(EXTENSION_NAME, ext);
+    setNeutralizeOnClaim(true);
     return "v2";
   }
   return null;
@@ -370,22 +504,33 @@ function installAutoSweep(doc = document) {
   const sweep = () => {
     canonicalizeTree(doc.body ?? doc.documentElement);
   };
-  let removeDomListener = null;
-  if (doc.readyState === "loading") {
-    const onReady = () => sweep();
-    doc.addEventListener("DOMContentLoaded", onReady, { once: true });
-    removeDomListener = () => doc.removeEventListener("DOMContentLoaded", onReady);
-  } else {
+  let ready = doc.readyState === "complete";
+  let removeReadyListeners = null;
+  if (ready) {
     sweep();
+  } else {
+    const onReady = () => {
+      if (ready) return;
+      ready = true;
+      removeReadyListeners?.();
+      sweep();
+    };
+    const win = doc.defaultView;
+    doc.addEventListener("DOMContentLoaded", onReady);
+    win?.addEventListener("load", onReady);
+    removeReadyListeners = () => {
+      doc.removeEventListener("DOMContentLoaded", onReady);
+      win?.removeEventListener("load", onReady);
+    };
   }
   const unsubscribeVocab = onVocabUpdate(() => {
-    if (doc.readyState !== "loading") sweep();
+    if (ready) sweep();
   });
   const unsubscribeBodyHooks = onBodyHooksChanged(() => {
-    if (doc.readyState !== "loading") sweep();
+    if (ready) sweep();
   });
   return () => {
-    removeDomListener?.();
+    removeReadyListeners?.();
     unsubscribeVocab();
     unsubscribeBodyHooks();
   };
@@ -393,32 +538,40 @@ function installAutoSweep(doc = document) {
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   EXTENSION_NAME,
+  TOP_LEVEL_COMMA_RE,
   additionalAttributeSelectors,
   attributeResolver,
   autoDetectBodyHooks,
   canonicalizeElement,
   canonicalizeTree,
   claimHxOnAttribute,
+  claimedAttrNames,
   createExtension,
   hasAnyVocab,
   hasBodyExecutor,
   hasBodyTranslator,
   installAutoSweep,
   installResolverMode,
+  isClaimed,
   isLangRegistered,
   isResolverMode,
   langOf,
+  neutralizesOnClaim,
   normLang,
   onBodyHooksChanged,
   onVocabUpdate,
   register,
   registerWith,
+  removeClaimedCanonicalAttrs,
   resetBodyHooks,
   resetRegistry,
   setBodyExecutor,
   setBodyTranslator,
+  setNeutralizeOnClaim,
   setResolverMode,
+  setTriggerSpecSplitter,
   translateTriggerValue,
-  vocabFor
+  vocabFor,
+  wasCreatedByAdapter
 });
 //# sourceMappingURL=index.cjs.map