tmk241/hemx
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Preserve native interaction semantics

Browse Source
This commit is contained in:
tmk241
2026-09-01 09:21:23 +02:00
parent 3323aaecd6
commit 53f0a5db1a
11 changed files with 135 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files
hemx-js/runtime/hemx.js
+39 -34
View File
@@ -1,9 +1,9 @@
(() => {
const ROOT = "data-hemx-root";
const HID = "data-hid";
const SID = "data-sid";
const ACTION = "data-hemx-action";
const RESOURCE = "data-hemx-resource";
const runtimeAbiVersion = 1;
const FINGERPRINT = "data-hemx-fp";
const BUILD = "data-hemx-build";
const STATE = "data-hemx-st";
const pending = new WeakMap();
const queues = new WeakMap();
@@ -54,8 +54,8 @@
function formHandleId(form) {
if (!form) return null;
const holder = form.hasAttribute(HID) ? form : firstElement(form, (el) => el.hasAttribute(HID));
const raw = holder && holder.getAttribute(HID);
const holder = form.hasAttribute(ACTION) ? form : firstElement(form, (el) => el.hasAttribute(ACTION));
const raw = holder && holder.getAttribute(ACTION);
return raw && /^\d+$/.test(raw) ? raw : null;
}
@@ -68,7 +68,7 @@
}
function handleId(el) {
const raw = el && el.getAttribute(HID);
const raw = el && el.getAttribute(ACTION);
return raw && /^\d+$/.test(raw) ? raw : null;
}
@@ -173,7 +173,7 @@
const dragKey = eventName === "drop" && dragKeys.get(rootOf(el));
if (dragKey && !data.has("work_id")) data.set("work_id", dragKey);
for (const { name, value } of Array.from(el.attributes || [])) {
if (name.startsWith("data-") && !name.startsWith("data-hemx-") && name !== HID && name !== SID) {
if (name.startsWith("data-") && !name.startsWith("data-hemx-") && name !== ACTION && name !== RESOURCE) {
data.set(name.slice(5).replace(/-/g, "_"), value);
}
}
@@ -356,17 +356,25 @@
async function navigateUrl(href, root, mode = "replace") {
if (mode === "push") savePage(root);
const response = await fetch(href, {
headers: { "X-HEMX-Partial": "1", "Accept": "text/html" },
credentials: "same-origin",
});
if (!await applyResponse(response, root)) {
if (mode === "none") location.reload();
else location.href = href;
return;
try {
const response = await fetch(href, {
headers: { "X-HEMX-Partial": "1", "Accept": "text/html" },
credentials: "same-origin",
});
if (!response.ok || !await applyResponse(response, root)) {
fallbackNavigation(href, mode);
return;
}
if (mode === "push") history.pushState({ hemx: true }, "", href);
else if (mode === "replace") history.replaceState({ hemx: true }, "", href);
} catch (_) {
fallbackNavigation(href, mode);
}
if (mode === "push") history.pushState({ hemx: true }, "", href);
else if (mode === "replace") history.replaceState({ hemx: true }, "", href);
}
function fallbackNavigation(href, mode) {
if (mode === "none") location.reload();
else location.href = href;
}
async function applyResponse(response, root) {
@@ -389,7 +397,7 @@
function compatibleFingerprint(response, root) {
const received = response.headers.get("x-hemx-fingerprint");
const expected = root && root.getAttribute(FINGERPRINT);
const expected = root && root.getAttribute(BUILD);
return !received || !expected || received === expected;
}
@@ -404,7 +412,7 @@
}
throw error;
}
const expected = root && root.getAttribute(FINGERPRINT);
const expected = root && root.getAttribute(BUILD);
if (expected && String(batch.fingerprint) !== expected) {
location.reload();
return;
@@ -495,11 +503,11 @@
}
function generatedResource(el, id) {
return attrEquals(el, "data-sid", id) || attrEquals(el, "data-slot-id", id);
return attrEquals(el, RESOURCE, id);
}
function generatedForm(el, id) {
return attrEquals(el, "data-fid", id) || attrEquals(el, "data-form-id", id);
return generatedResource(el, id);
}
function generatedTarget(scope, id) {
@@ -550,7 +558,7 @@
}
function keyedTarget(scope, id, key) {
return firstElement(scope, (el) => attrEquals(el, "data-key", key) && withinGeneratedResource(el, scope, id));
return firstElement(scope, (el) => attrEquals(el, "data-hemx-key", key) && withinGeneratedResource(el, scope, id));
}
function fieldTarget(scope, id, field) {
@@ -585,8 +593,8 @@
else template.textContent = payload.value;
const nodes = Array.from(template.content.childNodes);
const firstElement = nodes.find((node) => node.nodeType === 1);
if (firstElement && key != null && !firstElement.hasAttribute("data-key")) firstElement.setAttribute("data-key", key);
if (firstElement && resourceId != null && !firstElement.hasAttribute("data-sid")) firstElement.setAttribute("data-sid", resourceId);
if (firstElement && key != null && !firstElement.hasAttribute("data-hemx-key")) firstElement.setAttribute("data-hemx-key", key);
if (firstElement && resourceId != null && !firstElement.hasAttribute("data-hemx-resource")) firstElement.setAttribute("data-hemx-resource", resourceId);
return nodes;
}
@@ -619,7 +627,7 @@
function replaceLoweredSlots(scope, doc) {
let changed = false;
forEachElement(doc.body || doc, (source) => {
const id = source.getAttribute("data-sid") || source.getAttribute("data-slot-id");
const id = source.getAttribute(RESOURCE);
if (!id) return;
const target = generatedTarget(scope, id);
if (target) {
@@ -674,15 +682,15 @@
["click", "submit", "input", "change", "keydown", "dragstart", "dragover", "drop"].forEach((name) => {
root.addEventListener(name, (event) => {
if (name === "dragstart") {
const item = closestInRoot(event.target, root, (el) => el.hasAttribute("data-key"));
const item = closestInRoot(event.target, root, (el) => el.hasAttribute("data-hemx-key"));
if (item) {
dragKeys.set(root, item.getAttribute("data-key"));
if (event.dataTransfer) event.dataTransfer.setData("text/plain", item.getAttribute("data-key"));
dragKeys.set(root, item.getAttribute("data-hemx-key"));
if (event.dataTransfer) event.dataTransfer.setData("text/plain", item.getAttribute("data-hemx-key"));
}
return;
}
if (name === "dragover") {
const drop = closestInRoot(event.target, root, (el) => el.hasAttribute(HID) && el.getAttribute("data-hemx-on") === "drop");
const drop = closestInRoot(event.target, root, (el) => el.hasAttribute(ACTION) && el.getAttribute("data-hemx-on") === "drop");
if (drop) event.preventDefault();
return;
}
@@ -696,7 +704,7 @@
return;
}
if (name === "click") {
const direct = closestInRoot(event.target, root, (el) => el.hasAttribute(HID));
const direct = closestInRoot(event.target, root, (el) => el.hasAttribute(ACTION));
if (direct && handlesEvent(direct, "click")) {
event.preventDefault();
schedule(direct, name);
@@ -717,7 +725,7 @@
}
}
let el = closestInRoot(event.target, root, (node) =>
node.hasAttribute(HID) ||
node.hasAttribute(ACTION) ||
(node.tagName === "FORM" && (pageFormHistoryMode(event.submitter || node, node) || boostRoot(node)))
);
if (name === "submit" && !el && event.target && event.target.tagName === "FORM" && (formHandleId(event.target) || pageFormHistoryMode(event.submitter || event.target, event.target))) el = event.target;
@@ -732,13 +740,10 @@
function schedule(el, eventName, source = el) {
const debounce = duration(el.getAttribute("data-hemx-debounce"));
const delay = duration(el.getAttribute("data-hemx-delay"));
const throttle = duration(el.getAttribute("data-hemx-throttle"));
if (debounce) {
clearTimeout(timers.get(el));
timers.set(el, setTimeout(() => send(el, eventName, source), debounce));
} else if (delay) {
setTimeout(() => send(el, eventName, source), delay);
} else if (throttle) {
if (timers.get(el)) return;
send(el, eventName, source).finally(() => setTimeout(() => timers.delete(el), throttle));