talkdom 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2026 Eringen
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,221 @@
+# talkDOM
+
+Smalltalk _inspired_ message passing for the DOM. Declarative HTTP interactions via HTML attributes. No build step, no dependencies. As a big admirer of [htmx](https://htmx.org), it was a major muse when starting this project. ALL HAIL THE HORSEY!
+
+## How it works
+
+Receivers are named DOM elements. Senders dispatch keyword messages to receivers.
+which is currently in use @ [eringen.com](https://eringen.com)
+
+```html
+<div receiver="content"></div>
+<button sender="content get: /partial apply: inner">Load</button>
+```
+
+The sender attribute is parsed as a Smalltalk keyword message:
+
+```
+content get: /partial apply: inner
+^^^^^^^                             receiver name
+        ^^^^                        keyword 1
+             ^^^^^^^^               arg 1
+                      ^^^^^^        keyword 2
+                             ^^^^^  arg 2
+
+selector: "get:apply:"
+args:     ["/partial", "inner"]
+```
+
+## Features
+
+- `get:`, `post:`, `put:`, `delete:` selectors (return response for piping)
+- `get:apply:`, `post:apply:`, `put:apply:`, `delete:apply:` shorthand selectors
+- `apply:` consumes piped content
+- Apply operations: `inner`, `text`, `append`, `outer`
+- Pipes (`|`) chain return values between messages
+- Independent messages (`;`) fire separately
+- An element can be both sender and receiver
+- Receivers declare allowed operations via `accepts`
+- Polling with `poll:` keyword
+- Persistent state via `persist` attribute
+- URL persistence via `push-url` attribute
+- Server-triggered messages via `X-TalkDOM-Trigger` response header
+- Lifecycle events (`talkdom:done`, `talkdom:error`) on receiver elements
+- Programmatic API via `talkDOM.send` (returns a promise)
+- Extensible methods via `talkDOM.methods`
+
+## Usage
+
+```html
+<!-- jsDelivr -->
+<script src="https://cdn.jsdelivr.net/npm/talkdom/dist/talkdom.min.js"></script>
+
+<!-- unpkg -->
+<script src="https://unpkg.com/talkdom/dist/talkdom.min.js"></script>
+
+<!-- local -->
+<script src="index.js"></script>
+```
+
+## Multiple targets
+
+A sender can address multiple receivers with `;`:
+
+```html
+<button sender="content get: /page apply: inner; log get: /page apply: text">Load</button>
+```
+
+Multiple elements can share the same receiver name. All matching elements receive the message:
+
+```html
+<div receiver="alert" class="top-banner"></div>
+<div receiver="alert" class="bottom-banner"></div>
+<button sender="alert get: /notice apply: inner">Notify both</button>
+```
+
+## Pipes
+
+`|` chains the return value of one message into the next as the first argument.
+
+```html
+<!-- fetch then apply -->
+<button sender="content get: /partial | content apply: inner">Load</button>
+
+<!-- pipe to a different receiver -->
+<button sender="content get: /partial | sidebar apply: append">Load to sidebar</button>
+```
+
+## Accepts
+
+Receivers declare what operations they allow.
+
+```html
+<div receiver="content" accepts="inner text"></div>
+```
+
+## Polling
+
+Receivers poll by adding `poll:` as the last keyword with an interval (`s` or `ms`) as its argument. The method keywords before `poll:` run on each tick.
+
+```html
+<div receiver="feed get:apply: /updates inner poll: 10s"></div>
+```
+
+Polling stops automatically when the element is removed from the DOM.
+
+## Persist
+
+Receivers with `persist` save their content to `localStorage` after each apply and restore it on page load.
+
+```html
+<div receiver="sidebar" persist></div>
+```
+
+## Push URL
+
+Senders with `push-url` update the browser URL via `history.pushState`. The message replays on back/forward navigation.
+
+```html
+<button sender="content get: /about apply: inner" push-url="/about">About</button>
+```
+
+If `push-url` has no value, the first message's first arg is used as the URL.
+
+## Server trigger
+
+The server can trigger client-side messages by setting the `X-TalkDOM-Trigger` response header. The value uses the same message syntax.
+
+```
+X-TalkDOM-Trigger: toast apply: Saved inner
+```
+
+Multiple triggers separated by `;`:
+
+```
+X-TalkDOM-Trigger: toast apply: Saved inner; counter get: /count apply: text
+```
+
+Works with pipes, extended methods, and everything else — it dispatches through the same path as sender clicks.
+
+For CORS, expose the header: `Access-Control-Expose-Headers: X-TalkDOM-Trigger`.
+
+## Request headers
+
+Every fetch sends:
+
+| Header | Value |
+|---|---|
+| `X-TalkDOM-Request` | `"true"` |
+| `X-TalkDOM-Current-URL` | `location.href` |
+| `X-TalkDOM-Receiver` | receiver name (if element has one) |
+| `X-CSRF-Token` | from `<meta name="csrf-token">` (non-GET only) |
+
+## Self-replacing elements
+
+```html
+<button receiver="btn" sender="btn get: /next-step.html apply: outer">Click me</button>
+```
+
+## Lifecycle events
+
+Every operation dispatches a `CustomEvent` on the receiver element after completion. Events bubble, so you can listen at any ancestor or `document`.
+
+| Event | When | Detail |
+|---|---|---|
+| `talkdom:done` | Method completed successfully | `{ receiver, selector, args }` |
+| `talkdom:error` | Method rejected (HTTP error, network failure, confirm cancel) | `{ receiver, selector, args, error }` |
+
+```js
+// per-element
+document.getElementById("content").addEventListener("talkdom:done", function (e) {
+  console.log(e.detail.selector, "finished");
+});
+
+// global
+document.addEventListener("talkdom:error", function (e) {
+  alert("Failed: " + e.detail.error);
+});
+```
+
+For `apply: outer`, the event fires on the replacement element (looked up by receiver name) so it still bubbles.
+
+## Programmatic API
+
+`talkDOM.send` accepts the same message syntax as the `sender` attribute and returns a promise.
+
+```js
+// single operation
+talkDOM.send("#content get:apply: /api/data inner").then(function () {
+  console.log("done");
+});
+
+// pipes
+await talkDOM.send("#content get: /api/data | #output apply: inner");
+
+// parallel chains
+await talkDOM.send("#a get:apply: /x inner ; #b get:apply: /y inner");
+
+// errors propagate
+talkDOM.send("#content get:apply: /bad-url inner").catch(function (err) {
+  console.error("failed", err);
+});
+```
+
+## Extending
+
+```js
+talkDOM.methods["toggle:"] = function (el, cls) {
+  el.classList.toggle(cls);
+};
+```
+
+```js
+talkDOM.methods["show:"] = function (el, message) {
+  el.textContent = message;
+  el.style.display = "block";
+};
+```
+
+## License
+
+MIT. See [LICENSE](LICENSE).

package/dist/talkdom.min.js

@@ -0,0 +1 @@
+!function(){function e(e){for(var t=e.trim(),r=t.split(/\s+/),n=r[0],o=t.substring(n.length).trim(),i=r.slice(1),c=[],s=[],u=[],a=0;a<i.length;a++){var l=i[a];l.endsWith(":")?(c.length>0&&u.length>0?(s.push(u.join(" ")),u=[]):c.length>0&&s.push(""),c.push(l)):u.push(l)}return c.length>0&&s.push(u.join(" ")),{receiver:n,selector:c.join(""),keywords:c,args:s,body:o}}function t(e){return e.getAttribute("receiver").trim().split(/\s+/)[0]}function r(e){return document.querySelectorAll('[receiver~="'+e+'"]')}function n(e,r,n){if(function(e,t){var r=e.getAttribute("accepts");return!r||-1!==r.split(/\s+/).indexOf(t)}(e,r)){switch(r){case"inner":e.innerHTML=n;break;case"text":e.textContent=n;break;case"append":e.insertAdjacentHTML("beforeend",n);break;case"outer":e.outerHTML=n}return function(e,r){if(e.hasAttribute("receiver")&&e.hasAttribute("persist")){var n="talkDOM:"+t(e);"outer"===r?localStorage.setItem(n,JSON.stringify({op:r,content:e.outerHTML})):localStorage.setItem(n,JSON.stringify({op:r,content:e.innerHTML}))}}(e,r),n}console.error(t(e)+" does not accept "+r)}function o(e,t,r){var n,o={"X-TalkDOM-Request":"true","X-TalkDOM-Current-URL":location.href};if(r&&(o["X-TalkDOM-Receiver"]=r),"GET"!==e){var i=(n=document.querySelector('meta[name="csrf-token"]'))?n.getAttribute("content"):"";i&&(o["X-CSRF-Token"]=i)}return fetch(t,{method:e,headers:o}).then(function(r){if(!r.ok)return console.error("talkDOM: "+e+" "+t+" "+r.status),Promise.reject(r.status);var n=r.headers.get("X-TalkDOM-Trigger");return r.text().then(function(e){return n&&f(n),e})},function(r){return console.error("talkDOM: "+e+" "+t+" failed",r),Promise.reject(r)})}function i(e){return e.hasAttribute("receiver")?t(e):""}const c={"get:":function(e,t){return o("GET",t,i(e))},"post:":function(e,t){return o("POST",t,i(e))},"put:":function(e,t){return o("PUT",t,i(e))},"delete:":function(e,t){return o("DELETE",t,i(e))},"confirm:":function(e,t){if(!confirm(t))return Promise.reject("cancelled")},"apply:":function(e,t,r){n(e,r,t)},"get:apply:":function(e,t,r){return o("GET",t,i(e)).then(function(t){n(e,r,t)})},"post:apply:":function(e,t,r){return o("POST",t,i(e)).then(function(t){n(e,r,t)})},"put:apply:":function(e,t,r){return o("PUT",t,i(e)).then(function(t){n(e,r,t)})},"delete:apply:":function(e,t,r){return o("DELETE",t,i(e)).then(function(t){n(e,r,t)})}};var s=!1;function u(e){e&&e.sender&&(s=!0,f(e.sender),s=!1)}function a(e,t){var n=r(e.receiver);if(0!==n.length){var o=c[e.selector];if(o){var i,s=void 0!==t?[t].concat(e.args):e.args;return n.forEach(function(t){var n={receiver:e.receiver,selector:e.selector,args:e.args},c=t.parentNode,u=t.nextElementSibling;function a(){return t.isConnected?t:(u&&u.isConnected?u.previousElementSibling:c&&c.isConnected?c.lastElementChild:null)||r(e.receiver)[0]}if((i=o(t,...s))&&"function"==typeof i.then)i.then(function(){var e=a();e&&e.dispatchEvent(new CustomEvent("talkdom:done",{bubbles:!0,detail:n}))},function(e){n.error=e;var t=a();t&&t.dispatchEvent(new CustomEvent("talkdom:error",{bubbles:!0,detail:n}))});else{var l=a();l&&l.dispatchEvent(new CustomEvent("talkdom:done",{bubbles:!0,detail:n}))}}),i}console.error(e.receiver+" does not understand "+e.selector)}else console.error(e.receiver+" not found")}function l(t){var r=t.split(";").map(function(t){var r=t.trim();if(!r)return Promise.resolve();var n=r.split("|").map(function(e){return e.trim()}).filter(Boolean);return 1===n.length?Promise.resolve(a(e(n[0]))):n.reduce(function(t,r){var n=e(r);return Promise.resolve(t).then(function(e){return a(n,e)})},void 0)});return Promise.all(r)}function f(e){l(e).catch(function(){})}function d(t){var r=t.getAttribute("sender");f(r),s||function(t,r){if(t.hasAttribute("push-url")){var n=t.getAttribute("push-url");n||(n=e(r.split(";")[0].split("|")[0].trim()).args[0]||""),n&&location.pathname+location.search!==n&&history.pushState({sender:r},"",n)}}(t,r)}window.addEventListener("popstate",function(e){u(e.state)}),document.addEventListener("click",function(e){const t=e.target.closest("[sender]");t&&(e.preventDefault(),d(t))}),document.querySelectorAll("[persist]").forEach(function(e){if(e.hasAttribute("receiver")){var r=t(e),n=localStorage.getItem("talkDOM:"+r);if(n){var o;try{o=JSON.parse(n)}catch(e){return void localStorage.removeItem("talkDOM:"+r)}"outer"===o.op?e.outerHTML=o.content:e.innerHTML=o.content}}}),u(history.state),document.querySelectorAll("[receiver]").forEach(function(t){var n=e(t.getAttribute("receiver"));if("poll:"===n.keywords[n.keywords.length-1]){var o=function(e){var t=e.match(/^(\d+)(s|ms)$/);if(!t)return null;var r=parseInt(t[1],10);return"s"===t[2]?1e3*r:r}(n.args[n.args.length-1]);if(o)var i=n.keywords.slice(0,-1).join(""),s=n.args.slice(0,-1),u=n.receiver,a=r(u),l=setInterval(function(){if(t.isConnected){if(0!==a.length&&a[0].isConnected||(a=r(u)),0!==a.length){var e=c[i];e?a.forEach(function(t){e(t,...s)}):console.error(u+" does not understand "+i)}}else clearInterval(l)},o);else console.error("poll: invalid interval for "+n.receiver)}}),window.talkDOM={methods:c,send:l}}();

package/index.js

@@ -0,0 +1,307 @@
+(function () {
+
+  // Parse "receiver keyword: arg keyword: arg" into structured message object.
+  // Tokens ending with ":" are keywords, everything else fills args.
+  function parseMessage(str) {
+    var trimmed = str.trim();
+    var tokens = trimmed.split(/\s+/);
+    var receiver = tokens[0];
+    var body = trimmed.substring(receiver.length).trim();
+    var rest = tokens.slice(1);
+    var keywords = [];
+    var args = [];
+    var currentArg = [];
+
+    for (var i = 0; i < rest.length; i++) {
+      var token = rest[i];
+      if (token.endsWith(":")) {
+        if (keywords.length > 0 && currentArg.length > 0) {
+          args.push(currentArg.join(" "));
+          currentArg = [];
+        } else if (keywords.length > 0) {
+          args.push("");
+        }
+        keywords.push(token);
+      } else {
+        currentArg.push(token);
+      }
+    }
+    if (keywords.length > 0) {
+      args.push(currentArg.join(" "));
+    }
+
+    return { receiver: receiver, selector: keywords.join(""), keywords: keywords, args: args, body: body };
+  }
+
+  // Extract the first word from the receiver attribute (the name).
+  function receiverName(el) {
+    return el.getAttribute("receiver").trim().split(/\s+/)[0];
+  }
+
+  // Find all elements whose receiver attribute contains the given name.
+  function findReceivers(name) {
+    return document.querySelectorAll('[receiver~="' + name + '"]');
+  }
+
+  // Check if a receiver allows a given apply operation (inner, text, append, outer).
+  // No "accepts" attribute means everything is allowed.
+  function accepts(el, op) {
+    var attr = el.getAttribute("accepts");
+    if (!attr) return true;
+    return attr.split(/\s+/).indexOf(op) !== -1;
+  }
+
+  // Save receiver content to localStorage after apply, keyed by receiver name.
+  function persist(el, op) {
+    if (!el.hasAttribute("receiver") || !el.hasAttribute("persist")) return;
+    var name = receiverName(el);
+    var key = "talkDOM:" + name;
+    if (op === "outer") {
+      localStorage.setItem(key, JSON.stringify({ op: op, content: el.outerHTML }));
+    } else {
+      localStorage.setItem(key, JSON.stringify({ op: op, content: el.innerHTML }));
+    }
+  }
+
+  // On page load, restore persisted receiver content from localStorage.
+  function restore() {
+    document.querySelectorAll("[persist]").forEach(function (el) {
+      if (!el.hasAttribute("receiver")) return;
+      var name = receiverName(el);
+      var raw = localStorage.getItem("talkDOM:" + name);
+      if (!raw) return;
+      var state;
+      try { state = JSON.parse(raw); } catch (e) { localStorage.removeItem("talkDOM:" + name); return; }
+      if (state.op === "outer") {
+        el.outerHTML = state.content;
+      } else {
+        el.innerHTML = state.content;
+      }
+    });
+  }
+
+  // Apply content to an element using the specified operation (inner, text, append, outer).
+  function apply(el, op, content) {
+    if (!accepts(el, op)) {
+      console.error(receiverName(el) + " does not accept " + op);
+      return;
+    }
+    switch (op) {
+      case "inner": el.innerHTML = content; break;
+      case "text": el.textContent = content; break;
+      case "append": el.insertAdjacentHTML("beforeend", content); break;
+      case "outer": el.outerHTML = content; break;
+    }
+    persist(el, op);
+    return content;
+  }
+
+  function csrfToken() {
+    var meta = document.querySelector('meta[name="csrf-token"]');
+    return meta ? meta.getAttribute("content") : "";
+  }
+
+  // Perform a fetch with talkDOM headers. Returns a promise resolving to response text.
+  // Fires server-triggered messages from X-TalkDOM-Trigger header if present.
+  function request(method, url, receiver) {
+    var headers = {
+      "X-TalkDOM-Request": "true",
+      "X-TalkDOM-Current-URL": location.href,
+    };
+    if (receiver) {
+      headers["X-TalkDOM-Receiver"] = receiver;
+    }
+    if (method !== "GET") {
+      var token = csrfToken();
+      if (token) headers["X-CSRF-Token"] = token;
+    }
+    return fetch(url, { method: method, headers: headers }).then(function (r) {
+      if (!r.ok) {
+        console.error("talkDOM: " + method + " " + url + " " + r.status);
+        return Promise.reject(r.status);
+      }
+      var trigger = r.headers.get("X-TalkDOM-Trigger");
+      return r.text().then(function (text) {
+        if (trigger) dispatchRaw(trigger);
+        return text;
+      });
+    }, function (err) {
+      console.error("talkDOM: " + method + " " + url + " failed", err);
+      return Promise.reject(err);
+    });
+  }
+
+  function recName(el) {
+    return el.hasAttribute("receiver") ? receiverName(el) : "";
+  }
+
+  // Built-in method table. Each method receives (el, ...args) from the parsed message.
+  // Extensible via talkDOM.methods at runtime.
+  const methods = {
+    "get:": function (el, url) { return request("GET", url, recName(el)); },
+    "post:": function (el, url) { return request("POST", url, recName(el)); },
+    "put:": function (el, url) { return request("PUT", url, recName(el)); },
+    "delete:": function (el, url) { return request("DELETE", url, recName(el)); },
+    "confirm:": function (el, message) { if (!confirm(message)) return Promise.reject("cancelled"); },
+    "apply:": function (el, content, op) { apply(el, op, content); },
+    "get:apply:": function (el, url, op) { return request("GET", url, recName(el)).then(function (t) { apply(el, op, t); }); },
+    "post:apply:": function (el, url, op) { return request("POST", url, recName(el)).then(function (t) { apply(el, op, t); }); },
+    "put:apply:": function (el, url, op) { return request("PUT", url, recName(el)).then(function (t) { apply(el, op, t); }); },
+    "delete:apply:": function (el, url, op) { return request("DELETE", url, recName(el)).then(function (t) { apply(el, op, t); }); },
+  };
+
+  var pushing = false;
+
+  // Push URL to browser history. Uses push-url attr value, or falls back to first message arg.
+  function pushUrl(senderEl, raw) {
+    if (!senderEl.hasAttribute("push-url")) return;
+    var url = senderEl.getAttribute("push-url");
+    if (!url) {
+      var firstMsg = parseMessage(raw.split(";")[0].split("|")[0].trim());
+      url = firstMsg.args[0] || "";
+    }
+    if (url && (location.pathname + location.search) !== url) {
+      history.pushState({ sender: raw }, "", url);
+    }
+  }
+
+  // Re-dispatch a sender message from history state (back/forward navigation).
+  function replayState(state) {
+    if (!state || !state.sender) return;
+    pushing = true;
+    dispatchRaw(state.sender);
+    pushing = false;
+  }
+
+  window.addEventListener("popstate", function (e) {
+    replayState(e.state);
+  });
+
+  // Deliver a parsed message to all matching receivers. Fires talkdom:done or talkdom:error
+  // lifecycle events on the receiver element (or its replacement if outer-swapped).
+  function send(msg, piped) {
+    var els = findReceivers(msg.receiver);
+    if (els.length === 0) {
+      console.error(msg.receiver + " not found");
+      return;
+    }
+    var method = methods[msg.selector];
+    if (!method) {
+      console.error(msg.receiver + " does not understand " + msg.selector);
+      return;
+    }
+    var args = piped !== undefined ? [piped].concat(msg.args) : msg.args;
+    var result;
+    els.forEach(function (el) {
+      var detail = { receiver: msg.receiver, selector: msg.selector, args: msg.args };
+      var parent = el.parentNode;
+      var next = el.nextElementSibling;
+      result = method(el, ...args);
+      function resolveTarget() {
+        if (el.isConnected) return el;
+        var candidate = next && next.isConnected ? next.previousElementSibling
+          : parent && parent.isConnected ? parent.lastElementChild : null;
+        return candidate || findReceivers(msg.receiver)[0];
+      }
+      if (result && typeof result.then === "function") {
+        result.then(function () {
+          var target = resolveTarget();
+          if (target) target.dispatchEvent(new CustomEvent("talkdom:done", { bubbles: true, detail: detail }));
+        }, function (err) {
+          detail.error = err;
+          var target = resolveTarget();
+          if (target) target.dispatchEvent(new CustomEvent("talkdom:error", { bubbles: true, detail: detail }));
+        });
+      } else {
+        var target = resolveTarget();
+        if (target) target.dispatchEvent(new CustomEvent("talkdom:done", { bubbles: true, detail: detail }));
+      }
+    });
+    return result;
+  }
+
+  // Programmatic API: parse and execute a raw message string (supports pipes and semicolons).
+  // Returns a promise that resolves when all chains complete.
+  function run(raw) {
+    var chains = raw.split(";").map(function (chain) {
+      var trimmed = chain.trim();
+      if (!trimmed) return Promise.resolve();
+      var steps = trimmed.split("|").map(function (s) { return s.trim(); }).filter(Boolean);
+      if (steps.length === 1) {
+        return Promise.resolve(send(parseMessage(steps[0])));
+      }
+      return steps.reduce(function (prev, step) {
+        var msg = parseMessage(step);
+        return Promise.resolve(prev).then(function (piped) {
+          return send(msg, piped);
+        });
+      }, undefined);
+    });
+    return Promise.all(chains);
+  }
+
+  // Fire-and-forget dispatch used by declarative senders and server triggers.
+  function dispatchRaw(raw) {
+    run(raw).catch(function () {});
+  }
+
+  // Entry point for a sender click: dispatch its message and optionally push URL.
+  function dispatch(senderEl) {
+    var raw = senderEl.getAttribute("sender");
+    dispatchRaw(raw);
+    if (!pushing) pushUrl(senderEl, raw);
+  }
+
+  function parseInterval(str) {
+    var match = str.match(/^(\d+)(s|ms)$/);
+    if (!match) return null;
+    var n = parseInt(match[1], 10);
+    return match[2] === "s" ? n * 1000 : n;
+  }
+
+  // Set up a repeating interval for receivers with a poll: keyword.
+  // Stops automatically when the element is removed from the DOM.
+  function startPolling(el) {
+    var attr = el.getAttribute("receiver");
+    var msg = parseMessage(attr);
+    if (msg.keywords[msg.keywords.length - 1] !== "poll:") return;
+    var interval = parseInterval(msg.args[msg.args.length - 1]);
+    if (!interval) {
+      console.error("poll: invalid interval for " + msg.receiver);
+      return;
+    }
+    var selector = msg.keywords.slice(0, -1).join("");
+    var args = msg.args.slice(0, -1);
+    var name = msg.receiver;
+    var cachedTargets = findReceivers(name);
+    var id = setInterval(function () {
+      if (!el.isConnected) { clearInterval(id); return; }
+      if (cachedTargets.length === 0 || !cachedTargets[0].isConnected) {
+        cachedTargets = findReceivers(name);
+      }
+      if (cachedTargets.length === 0) return;
+      var method = methods[selector];
+      if (!method) {
+        console.error(name + " does not understand " + selector);
+        return;
+      }
+      cachedTargets.forEach(function (target) { method(target, ...args); });
+    }, interval);
+  }
+
+  // Global click handler: delegate to any element with a sender attribute.
+  document.addEventListener("click", function (e) {
+    const sender = e.target.closest("[sender]");
+    if (sender) {
+      e.preventDefault();
+      dispatch(sender);
+    }
+  });
+
+  restore();
+  replayState(history.state);
+  document.querySelectorAll("[receiver]").forEach(startPolling);
+
+  window.talkDOM = { methods: methods, send: run };
+
+}());

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "talkdom",
+  "version": "0.1.0",
+  "description": "Smalltalk-inspired message passing for the DOM",
+  "main": "index.js",
+  "jsdelivr": "dist/talkdom.min.js",
+  "unpkg": "dist/talkdom.min.js",
+  "files": [
+    "index.js",
+    "dist/"
+  ],
+  "scripts": {
+    "build": "mkdir -p dist && terser index.js -o dist/talkdom.min.js -c -m",
+    "prepublishOnly": "npm run build"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/eringen/talkdom.git"
+  },
+  "keywords": [
+    "dom",
+    "html",
+    "declarative",
+    "htmx",
+    "smalltalk"
+  ],
+  "license": "MIT",
+  "devDependencies": {
+    "terser": "^5.46.1"
+  }
+}