Add DOM binding dispatch

Author: jinzhongjia

README.md

@@ -102,6 +102,11 @@ URL for navigation, and is empty for connected or disconnected events.
 Navigation attempts are intercepted while an event handler is installed; call
 `Event.client.navigate` from the handler to continue them.
 
+`Window.bind("button", ...)` also dispatches clicks from elements with
+`id="button"`, including elements added after the bridge loads. DOM click
+handlers receive no arguments and their replies are ignored; explicit
+`webui.call("button", ...)` remains available.
+
 Use `Client.run` or `Window.run` when JavaScript results and errors are not
 needed. These methods use the protocol's `JS_QUICK` command and do not consume
 pending evaluation slots.

docs/PURE_ZIG_REFACTOR.md

@@ -295,7 +295,6 @@ implementations.
 
 | Upstream API | Current gap |
 |---|---|
-| `webui_bind()` | `Window.bind` supports explicit `webui.call()` calls, but the bridge does not automatically dispatch DOM events from an element with the same ID to that binding. |
 | `webui_show()`, `webui_set_root_folder()`, `webui_set_file_handler()`, `webui_set_file_handler_window()` | Content and resource handling can only be selected when creating a window; replacing them at runtime is not implemented. |
 | `webui_show_client()` | `Client` cannot replace the content of only one connected browser. |
 | `webui_is_shown()` | There is no window-level connected/shown query. |
@@ -347,6 +346,7 @@ not implementation gaps:
 | `webui_wait()`, `webui_wait_async()` | `Running.wait()` used directly or through `std.Io` concurrency. |
 | `webui_close()`, `webui_destroy()`, `webui_exit()`, `webui_clean()` | `Window.close()`, `Running.stop()`, and `App.deinit()`. |
 | `webui_set_context()`, `webui_get_context()` | Binding and event-handler `user_data`. |
+| `webui_bind()` | `Window.bind()` handles explicit `webui.call()` requests and zero-argument DOM clicks from elements with a matching ID. |
 | `webui_get_count()`, `webui_get_size()`, `webui_get_size_at()` | `Call.arguments.len` and `Call.bytes(index).len`. |
 | `webui_get_string()`, `webui_get_string_at()`, `webui_get_int()`, `webui_get_int_at()`, `webui_get_float()`, `webui_get_float_at()`, `webui_get_bool()`, `webui_get_bool_at()` | `Call.string()`, `Call.int()`, `Call.float()`, and `Call.boolean()`. |
 | `webui_return_string()`, `webui_return_int()`, `webui_return_float()`, `webui_return_bool()` | `Call.reply()`, `Call.replyInt()`, `Call.replyFloat()`, and `Call.replyBool()`. |
@@ -384,8 +384,6 @@ This completes the behavior represented by `webui_set_public()`,
 
 ### Calls, bindings, and browser bridge
 
-- Make element-name bindings dispatch the same binding for DOM events while
-  preserving explicit `webui.call()` support.
 - Implement bridge `setLogging()`, `encode()`, `decode()`,
   `setEventCallback()`, `event`, `isHighContrast()`, and
   `allowNavigation()`.
@@ -505,5 +503,4 @@ zig build -Dtarget=aarch64-macos
 
 Continue capability parity:
 
-1. Add element-name DOM binding dispatch.
-2. Complete the public browser bridge API.
+1. Complete the public browser bridge API.

src/app.zig

@@ -1368,6 +1368,10 @@ fn onRequest(
             "globalThis.__zigWebuiEvents={};\n",
             .{window.event_binding != null},
         ) catch return failResponse(response);
+        response.print(
+            "globalThis.__zigWebuiDomBindings={};\n",
+            .{window.bindings.items.len != 0},
+        ) catch return failResponse(response);
         response.write(bridge) catch return failResponse(response);
         return .respond;
     }
@@ -1537,6 +1541,17 @@ fn onMessage(
                 connection.wsClose(.protocol_error, "");
                 return;
             };
+            if (packet.header.command == .click) {
+                if (window.binding(data)) |binding| {
+                    var call: Call = .{
+                        .gpa = app.gpa,
+                        .client = client,
+                        .arguments = &.{},
+                    };
+                    defer call.deinit();
+                    binding.handler(&call, binding.user_data) catch {};
+                }
+            }
             window.dispatch(.{
                 .kind = if (packet.header.command == .click)
                     .click
@@ -1758,6 +1773,16 @@ fn integrationHandler(call: *Call, user_data: ?*anyopaque) !void {
     try call.reply("Hello from Zig");
 }
 
+fn integrationDomBindingHandler(
+    call: *Call,
+    user_data: ?*anyopaque,
+) !void {
+    if (call.arguments.len != 0) return error.UnexpectedArgument;
+    const called: *std.atomic.Value(bool) =
+        @ptrCast(@alignCast(user_data.?));
+    called.store(true, .release);
+}
+
 const IntegrationEventState = struct {
     expected_click: []const u8,
     connected: std.atomic.Value(bool) = .init(false),
@@ -2118,6 +2143,12 @@ test "JavaScript and Zig calls complete over HTTP and WebSocket" {
     second_window.onEvent(integrationEventHandler, &secondary_events);
     var called_client_id: std.atomic.Value(u64) = .init(0);
     try window.bind("greet", integrationHandler, &called_client_id);
+    var dom_binding_called: std.atomic.Value(bool) = .init(false);
+    try window.bind(
+        "primary",
+        integrationDomBindingHandler,
+        &dom_binding_called,
+    );
     var running = try app.start(io);
     defer running.stop() catch {};
     try std.testing.expect(!std.mem.eql(
@@ -2151,16 +2182,18 @@ test "JavaScript and Zig calls complete over HTTP and WebSocket" {
         var target: [capability_len + 10]u8 = undefined;
         var response: [8192]u8 = undefined;
         const enabled = "globalThis.__zigWebuiEvents=true;";
+        const dom_bindings = "globalThis.__zigWebuiDomBindings=true;";
         const bytes = try getTestPath(
             running.inner.address,
             io,
             try std.fmt.bufPrint(&target, "/{s}/webui.js", .{
                 window.state.capability,
             }),
-            enabled,
+            dom_bindings,
             &response,
         );
         try std.testing.expect(std.mem.indexOf(u8, bytes, enabled) != null);
+        try std.testing.expect(std.mem.indexOf(u8, bytes, dom_bindings) != null);
     }
     {
         var target: [capability_len + 2]u8 = undefined;
@@ -2259,16 +2292,18 @@ test "JavaScript and Zig calls complete over HTTP and WebSocket" {
         var target: [capability_len + 10]u8 = undefined;
         var response: [8192]u8 = undefined;
         const disabled = "globalThis.__zigWebuiEvents=false;";
+        const dom_bindings = "globalThis.__zigWebuiDomBindings=false;";
         const bytes = try getTestPath(
             running.inner.address,
             io,
             try std.fmt.bufPrint(&target, "/{s}/webui.js", .{
                 external_window.state.capability,
             }),
-            disabled,
+            dom_bindings,
             &response,
         );
         try std.testing.expect(std.mem.indexOf(u8, bytes, disabled) != null);
+        try std.testing.expect(std.mem.indexOf(u8, bytes, dom_bindings) != null);
     }
 
     try std.testing.expectError(
@@ -2373,6 +2408,7 @@ test "JavaScript and Zig calls complete over HTTP and WebSocket" {
     try std.testing.expect(primary_events.connected.load(.acquire));
     try std.testing.expect(primary_events.clicked.load(.acquire));
     try std.testing.expect(primary_events.navigated.load(.acquire));
+    try std.testing.expect(dom_binding_called.load(.acquire));
     try std.testing.expect(!secondary_events.connected.load(.acquire));
     const targeted_client: Client = .{
         .state = window.state,

src/bridge.js

@@ -39,26 +39,28 @@
             socket.send(packet(command, 0, encoder.encode(value)));
     }
 
-    if (globalThis.__zigWebuiEvents) {
+    // ponytail: Zig filters IDs to avoid injecting names; send a filtered
+    // list only if pages with many unrelated IDs make click traffic matter.
+    if (globalThis.__zigWebuiEvents || globalThis.__zigWebuiDomBindings) {
         document.addEventListener("click", (event) => {
             const element = event.target?.closest?.("[id]");
             if (element) sendEvent(commandClick, element.id);
 
-            if (!("navigation" in globalThis)) {
+            if (globalThis.__zigWebuiEvents && !("navigation" in globalThis)) {
                 const link = event.target?.closest?.("a[href]");
                 if (link && connected) {
                     event.preventDefault();
                     sendEvent(commandNavigation, link.href);
                 }
             }
         });
-        if ("navigation" in globalThis) {
-            globalThis.navigation.addEventListener("navigate", (event) => {
-                if (!connected) return;
-                if (event.cancelable) event.preventDefault();
-                sendEvent(commandNavigation, event.destination.url);
-            });
-        }
+    }
+    if (globalThis.__zigWebuiEvents && "navigation" in globalThis) {
+        globalThis.navigation.addEventListener("navigate", (event) => {
+            if (!connected) return;
+            if (event.cancelable) event.preventDefault();
+            sendEvent(commandNavigation, event.destination.url);
+        });
     }
 
     socket.onopen = () => socket.send(

src/bridge.test.js

@@ -38,6 +38,7 @@ test("bridge handles commands and external script origins", async () => {
     globalThis.WebSocket = WebSocketMock;
     globalThis.__zigWebuiCapability = "0123456789abcdef0123456789abcdef";
     globalThis.__zigWebuiEvents = true;
+    globalThis.__zigWebuiDomBindings = false;
     globalThis.__zigWebuiToken = 7;
     globalThis.document = {
         addEventListener(type, listener) {
@@ -168,6 +169,50 @@ test("bridge handles commands and external script origins", async () => {
             new TextDecoder().decode(eventPacket.subarray(8)),
             "http://localhost/history",
         );
+
+        delete globalThis.navigation;
+        globalThis.__zigWebuiEvents = false;
+        globalThis.__zigWebuiDomBindings = true;
+        clickListener = undefined;
+        delete globalThis.webui;
+        delete require.cache[require.resolve("./bridge.js")];
+        require("./bridge.js");
+        const bindingSocket = WebSocketMock.instance;
+        bindingSocket.onopen();
+        await bindingSocket.onmessage({
+            data: frame(0xf5, Uint8Array.of(1)),
+        });
+        assert.equal(typeof clickListener, "function");
+
+        const dynamicButton = { id: "dynamic-binding" };
+        clickListener({
+            target: {
+                closest(selector) {
+                    return selector === "[id]" ? dynamicButton : null;
+                },
+            },
+        });
+        eventPacket = new Uint8Array(bindingSocket.sent);
+        assert.equal(eventPacket[7], 0xfc);
+        assert.equal(
+            new TextDecoder().decode(eventPacket.subarray(8)),
+            dynamicButton.id,
+        );
+
+        prevented = false;
+        const sendsBeforeLink = bindingSocket.sendCount;
+        clickListener({
+            target: {
+                closest() {
+                    return null;
+                },
+            },
+            preventDefault() {
+                prevented = true;
+            },
+        });
+        assert.equal(prevented, false);
+        assert.equal(bindingSocket.sendCount, sendsBeforeLink);
     } finally {
         delete globalThis.WebSocket;
         delete globalThis.document;
@@ -178,6 +223,7 @@ test("bridge handles commands and external script origins", async () => {
         delete globalThis.quickResult;
         delete globalThis.webui;
         delete globalThis.__zigWebuiCapability;
+        delete globalThis.__zigWebuiDomBindings;
         delete globalThis.__zigWebuiEvents;
         delete globalThis.__zigWebuiToken;
     }