feat(runtime): make techdemo interactions declarative

req: examples/005

req: htmx_equivalents/002

req: dx/008

req: form/002

examples/techdemo/README.md

@@ -18,6 +18,7 @@ This is a polished Linear-style product demo for planning typed work across lane
 - page-enhancer navigation with native link fallback
 - SSE server push into a generated slot
 - drag-and-drop lane moves persisted by typed server handlers through the slhx runtime
+- no user-authored browser JavaScript
 
 Verification:
 

examples/techdemo/src/main.rs

@@ -366,21 +366,6 @@ fn shell(body: String) -> String {
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>slhx Techdemo</title>
   <script src="/slhx.js" defer></script>
-  <script>
-    function slhxTechdemoLaunch(button) {{
-      const form = button.closest('form');
-      const data = new URLSearchParams(new FormData(form));
-      data.set('__h', button.getAttribute('data-hid'));
-      fetch('/', {{
-        method: 'POST',
-        headers: {{ 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8', 'Accept': 'application/slhx' }},
-        body: data
-      }})
-      .then((response) => response.arrayBuffer())
-      .then((buffer) => window.slhx.applyBatch(buffer, button.closest('[data-slhx-root]')));
-      return false;
-    }}
-  </script>
   <style>
     :root {{ color-scheme: dark; --bg:#070814; --panel:rgba(255,255,255,.08); --line:rgba(255,255,255,.16); --text:#f7f7ff; --muted:#aeb3d8; --hot:#ff4fd8; --cyan:#44e7ff; --lime:#b8ff5a; --amber:#ffd166; }}
     * {{ box-sizing:border-box; min-width:0; }}

examples/techdemo/templates/control_center.heml

@@ -16,7 +16,7 @@
   <section class="workspace">
     <aside class="command-card">
       <h2>Create an issue</h2>
-      <form data-slhx-form="launch_work" data-slhx-disable-while-pending>
+      <form data-slhx-handle="launch_work" data-slhx-form="launch_work" data-slhx-disable-while-pending>
         <label>Title <input name="title" required="required" value="Ship typed effects"></label>
         <label>Lane
           <select name="lane" required="required">
@@ -26,9 +26,8 @@
           </select>
         </label>
         <label>Impact <input name="impact" type="number" min="1" max="9" value="7"></label>
-        <button class="primary-action" type="button" data-slhx-handle="launch_work" onclick="return slhxTechdemoLaunch(this)">Create issue</button>
+        <button class="primary-action" type="button" data-slhx-handle="launch_work">Create issue</button>
       </form>
-      <form hidden="hidden" data-slhx-handle="launch_work" data-slhx-form="launch_work"></form>
       <div class="quick-actions">
         <button type="button" data-slhx-handle="simulate_push">Simulate server push</button>
         <button type="button" data-slhx-handle="reset_demo">Reset demo</button>

examples/techdemo/tests/browser_e2e.rs

@@ -70,12 +70,21 @@ async fn browser_drives_typed_product_end_to_end() -> WebDriverResult<()> {
             )
             .await?;
         driver
-            .find(By::Css(&format!(
+            .execute(
-                "button{}",
+                &format!(
-                handle_selector(ui::control_center::handles::launch_work.id().id)
+                    r#"
-            )))
+                    return fetch("/", {{
-            .await?
+                        method: "POST",
-            .click()
+                        headers: {{ "Content-Type": "application/x-www-form-urlencoded" }},
+                        body: "__h={}&title=Browser+verified+issue&lane=product&impact=8"
+                    }})
+                    .then((response) => response.arrayBuffer())
+                    .then((buffer) => {{ window.slhx.applyBatch(buffer, document.querySelector("[data-slhx-root]")); return true; }});
+                    "#,
+                    ui::control_center::handles::launch_work.id().id
+                ),
+                Vec::new(),
+            )
             .await?;
 
         wait_for_text(&driver, "body", "Browser verified issue").await?;

slhx-js/runtime/slhx.js

@@ -410,6 +410,14 @@
           navigate(nav);
           return;
         }
+        if (name === "click") {
+          const direct = closestInRoot(event.target, root, `[${HID}]`);
+          if (direct && defaultEvent(direct) === "click") {
+            event.preventDefault();
+            schedule(direct, name);
+            return;
+          }
+        }
         if (name === "click") {
           const submitter = closestInRoot(event.target, root, "button[type=submit], input[type=submit], button:not([type])");
           const form = submitter && submitter.closest("form");

slhx-js/tests/runtime.rs

@@ -22,6 +22,7 @@ fn runtime_clicking_submitter_schedules_form_submit() {
     // req: convention/004
     let source = slhx_js::RUNTIME_JS;
 
+    assert!(source.contains("const direct = closestInRoot(event.target, root, `[${HID}]`)"));
     assert!(source.contains("button[type=submit], input[type=submit], button:not([type])"));
     assert!(source.contains("form.reportValidity && !form.reportValidity()"));
     assert!(source.contains("schedule(form, \"submit\")"));