Add zig listener support to netsurf event handler

karlseguin · karlseguin · commit 072bc514f45b · 2025-04-18T16:20:46.000+08:00
Add _click handler to HTMLElement Register zig click listener on document. Largely waiting on https://github.com/lightpanda-io/browser/pull/501/files to finalize the placeholders.
diff --git a/src/browser/browser.zig b/src/browser/browser.zig
@@ -481,6 +481,16 @@ pub const Page = struct {
         // save a document's pointer in the page.
         self.doc = doc;
 
+        const document_element = (try parser.documentGetDocumentElement(doc)) orelse return error.DocumentElementError;
+        try parser.eventTargetAddZigListener(
+            parser.toEventTarget(parser.Element, document_element),
+            arena,
+            "click",
+            windowClicked,
+            self,
+            false,
+        );
+
         // TODO set document.readyState to interactive
         // https://html.spec.whatwg.org/#reporting-document-loading-status
 
@@ -728,6 +738,29 @@ pub const Page = struct {
         return request;
     }
 
+    fn windowClicked(ctx: *anyopaque, event: *parser.Event) void {
+        const self: *Page = @alignCast(@ptrCast(ctx));
+        self._windowClicked(event) catch |err| {
+            log.err("window click handler: {}", .{err});
+        };
+    }
+
+    fn _windowClicked(self: *Page, event: *parser.Event) !void {
+        _ = self;
+
+        const target = (try parser.eventTarget(event)) orelse return;
+
+        const node = parser.eventTargetToNode(target);
+        if (try parser.nodeType(node) != .element) {
+            return;
+        }
+
+        const element: *parser.ElementHTML = @ptrCast(node);
+        const tag_name = try parser.elementHTMLGetTagType(element);
+        // TODO https://github.com/lightpanda-io/browser/pull/501
+        _ = tag_name;
+    }
+
     const Script = struct {
         element: *parser.Element,
         kind: Kind,
diff --git a/src/browser/dom/mutation_observer.zig b/src/browser/dom/mutation_observer.zig
@@ -104,15 +104,15 @@ pub const MutationObserver = struct {
                 arena,
                 "DOMNodeInserted",
                 EventHandler,
-                .{ .cbk = self.cbk, .data = o, .deinitFunc = deinitFunc },
+                .{ .cbk = self.cbk, .ctx = o, .deinitFunc = deinitFunc },
                 false,
             );
             try parser.eventTargetAddEventListener(
                 parser.toEventTarget(parser.Node, node),
                 arena,
                 "DOMNodeRemoved",
                 EventHandler,
-                .{ .cbk = self.cbk, .data = o, .deinitFunc = deinitFunc },
+                .{ .cbk = self.cbk, .ctx = o, .deinitFunc = deinitFunc },
                 false,
             );
         }
@@ -122,7 +122,7 @@ pub const MutationObserver = struct {
                 arena,
                 "DOMAttrModified",
                 EventHandler,
-                .{ .cbk = self.cbk, .data = o, .deinitFunc = deinitFunc },
+                .{ .cbk = self.cbk, .ctx = o, .deinitFunc = deinitFunc },
                 false,
             );
         }
@@ -132,7 +132,7 @@ pub const MutationObserver = struct {
                 arena,
                 "DOMCharacterDataModified",
                 EventHandler,
-                .{ .cbk = self.cbk, .data = o, .deinitFunc = deinitFunc },
+                .{ .cbk = self.cbk, .ctx = o, .deinitFunc = deinitFunc },
                 false,
             );
         }
@@ -142,7 +142,7 @@ pub const MutationObserver = struct {
                 arena,
                 "DOMSubtreeModified",
                 EventHandler,
-                .{ .cbk = self.cbk, .data = o, .deinitFunc = deinitFunc },
+                .{ .cbk = self.cbk, .ctx = o, .deinitFunc = deinitFunc },
                 false,
             );
         }
@@ -261,7 +261,7 @@ const EventHandler = struct {
         return false;
     }
 
-    fn handle(evt: ?*parser.Event, data: parser.EventHandlerData) void {
+    fn handle(evt: ?*parser.Event, data: *const parser.JSEventHandlerData) void {
         if (evt == null) return;
 
         var mrs: MutationRecords = .{};
@@ -277,7 +277,7 @@ const EventHandler = struct {
         const node = parser.eventTargetToNode(et);
 
         // retrieve the observer from the data.
-        const o: *MutationObserver.Observer = @ptrCast(@alignCast(data.data));
+        const o: *MutationObserver.Observer = @ptrCast(@alignCast(data.ctx));
 
         if (!apply(o, node)) return;
 
diff --git a/src/browser/events/event.zig b/src/browser/events/event.zig
@@ -136,7 +136,7 @@ pub const Event = struct {
 };
 
 pub const EventHandler = struct {
-    fn handle(event: ?*parser.Event, data: parser.EventHandlerData) void {
+    fn handle(event: ?*parser.Event, data: *const parser.JSEventHandlerData) void {
         var result: Callback.Result = undefined;
         data.cbk.tryCall(.{if (event) |evt| Event.toInterface(evt) catch unreachable else null}, &result) catch {
             log.err("event handler error: {s}", .{result.exception});
diff --git a/src/browser/html/elements.zig b/src/browser/html/elements.zig
@@ -130,6 +130,24 @@ pub const HTMLElement = struct {
         // attach the text node.
         _ = try parser.nodeAppendChild(n, @as(*parser.Node, @ptrCast(t)));
     }
+
+    pub fn _click(e: *parser.ElementHTML) !void {
+        _ = e;
+        // TODO needs: https://github.com/lightpanda-io/browser/pull/501
+        // TODO: when the above is merged, should we get the element coordinates?
+
+        // const event = try parser.mouseEventCreate();
+        // defer parser.mouseEventDestroy(event);
+        // try parser.mouseEventInit(event, "click", .{
+        //     .bubbles = true,
+        //     .cancelable = true,
+        //
+        //     // get the coordinates?
+        //     .x = 0,
+        //     .y = 0,
+        // });
+        // _ = try parser.elementDispatchEvent(@ptrCast(e), @ptrCast(event));
+    }
 };
 
 // Deprecated HTMLElements in Chrome (2023/03/15)
diff --git a/src/browser/netsurf.zig b/src/browser/netsurf.zig
@@ -616,10 +616,12 @@ pub fn eventTargetHasListener(
             // and capture property,
             // let's check if the callback handler is the same
             defer c.dom_event_listener_unref(listener);
-            const ehd = EventHandlerDataInternal.fromListener(listener);
-            if (ehd) |d| {
-                if (cbk_id == d.data.cbk.id) {
-                    return lst;
+            if (EventHandlerData.fromListener(listener)) |ehd| {
+                switch (ehd.*) {
+                    .js => |js| if (cbk_id == js.data.cbk.id) {
+                        return lst;
+                    },
+                    .zig => {},
                 }
             }
         }
@@ -636,100 +638,115 @@ pub fn eventTargetHasListener(
     return null;
 }
 
-// EventHandlerFunc is a zig function called when the event is dispatched to a
-// listener.
-// The EventHandlerFunc is responsible to call the callback included into the
-// EventHandlerData.
-pub const EventHandlerFunc = *const fn (event: ?*Event, data: EventHandlerData) void;
+// The *anyopque that get stored in the libdom listener, which we'll retrieve
+// when then event is dispatched so that we can execute the JS or Zig callback.
+const EventHandlerData = union(enum) {
+    js: JS,
+    zig: Zig,
 
-// EventHandler implements the function exposed in C and called by libdom.
-// It retrieves the EventHandlerInternalData and call the EventHandlerFunc with
-// the EventHandlerData in parameter.
-const EventHandler = struct {
-    fn handle(event: ?*Event, data: ?*anyopaque) callconv(.C) void {
-        if (data) |d| {
-            const ehd = EventHandlerDataInternal.get(d);
-            ehd.handler(event, ehd.data);
-
-            // NOTE: we can not call func.deinit here
-            // b/c the handler can be called several times
-            // either on this dispatch event or in anoter one
-        }
-    }
-}.handle;
-
-// EventHandlerData contains a JS callback and the data associated to the
-// handler.
-// If given, deinitFunc is called with the data pointer to allow the creator to
-// clean memory.
-// The callback is deinit by EventHandlerDataInternal. It must NOT be deinit
-// into deinitFunc.
-pub const EventHandlerData = struct {
-    cbk: Callback,
-    data: ?*anyopaque = null,
-    // deinitFunc implements the data deinitialization.
-    deinitFunc: ?DeinitFunc = null,
-
-    pub const DeinitFunc = *const fn (data: ?*anyopaque, allocator: std.mem.Allocator) void;
-};
+    const JS = struct {
+        data: JSEventHandlerData,
+        func: JSEventHandlerFunc,
+    };
 
-// EventHandlerDataInternal groups the EventHandlerFunc and the EventHandlerData.
-const EventHandlerDataInternal = struct {
-    data: EventHandlerData,
-    handler: EventHandlerFunc,
+    const Zig = struct {
+        ctx: *anyopaque,
+        func: ZigEventHandlerFunc,
+    };
 
-    fn init(alloc: std.mem.Allocator, handler: EventHandlerFunc, data: EventHandlerData) !*EventHandlerDataInternal {
-        const ptr = try alloc.create(EventHandlerDataInternal);
-        ptr.* = .{
-            .data = data,
-            .handler = handler,
-        };
-        return ptr;
+    // retrieve a EventHandlerDataInternal from a listener.
+    fn fromListener(lst: *EventListener) ?*EventHandlerData {
+        const ctx = eventListenerGetData(lst) orelse return null;
+        const ehd: *EventHandlerData = @alignCast(@ptrCast(ctx));
+        return ehd;
     }
 
-    fn deinit(self: *EventHandlerDataInternal, alloc: std.mem.Allocator) void {
-        if (self.data.deinitFunc) |d| {
-            d(self.data.data, alloc);
+    pub fn deinit(self: *EventHandlerData, alloc: std.mem.Allocator) void {
+        switch (self.*) {
+            .js => |*js| {
+                const js_data = &js.data;
+                if (js_data.deinitFunc) |df| {
+                    df(js_data.ctx, alloc);
+                }
+            },
+            .zig => {},
         }
         alloc.destroy(self);
     }
 
-    fn get(data: *anyopaque) *EventHandlerDataInternal {
-        const ptr: *align(@alignOf(*EventHandlerDataInternal)) anyopaque = @alignCast(data);
-        return @as(*EventHandlerDataInternal, @ptrCast(ptr));
+    pub fn handle(self: *EventHandlerData, event: ?*Event) void {
+        switch (self.*) {
+            .js => |*js| js.func(event, &js.data),
+            .zig => |zig| zig.func(zig.ctx, event.?),
+        }
     }
+};
 
-    // retrieve a EventHandlerDataInternal from a listener.
-    fn fromListener(lst: *EventListener) ?*EventHandlerDataInternal {
-        const data = eventListenerGetData(lst);
-        // free cbk allocation made on eventTargetAddEventListener
-        if (data == null) return null;
+pub const JSEventHandlerData = struct {
+    cbk: Callback,
+    ctx: ?*anyopaque = null,
+    // deinitFunc implements the data deinitialization.
+    deinitFunc: ?DeinitFunc = null,
 
-        return get(data.?);
-    }
+    pub const DeinitFunc = *const fn (data: ?*anyopaque, alloc: std.mem.Allocator) void;
 };
 
+const JSEventHandlerFunc = *const fn (event: ?*Event, data: *JSEventHandlerData) void;
+const ZigEventHandlerFunc = *const fn (ctx: *anyopaque, event: *Event) void;
+
 pub fn eventTargetAddEventListener(
     et: *EventTarget,
     alloc: std.mem.Allocator,
     typ: []const u8,
-    handlerFunc: EventHandlerFunc,
-    data: EventHandlerData,
+    func: JSEventHandlerFunc,
+    data: JSEventHandlerData,
     capture: bool,
 ) !void {
     // this allocation will be removed either on
     // eventTargetRemoveEventListener or eventTargetRemoveAllEventListeners
-    const ehd = try EventHandlerDataInternal.init(alloc, handlerFunc, data);
+    const ehd = try alloc.create(EventHandlerData);
+    errdefer alloc.destroy(ehd);
+    ehd.* = .{ .js = .{ .data = data, .func = func } };
     errdefer ehd.deinit(alloc);
 
     // When a function is used as an event handler, its this parameter is bound
     // to the DOM element on which the listener is placed.
     // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this#this_in_dom_event_handlers
-    try ehd.data.cbk.setThis(et);
+    try ehd.js.data.cbk.setThis(et);
+
+    return addEventTargetListener(et, typ, ehd, capture);
+}
+
+pub fn eventTargetAddZigListener(
+    et: *EventTarget,
+    alloc: std.mem.Allocator,
+    typ: []const u8,
+    func: ZigEventHandlerFunc,
+    ctx: *anyopaque,
+    capture: bool,
+) !void {
+    const ehd = try alloc.create(EventHandlerData);
+    errdefer alloc.destroy(ehd);
+    ehd.* = .{ .zig = .{ .ctx = ctx, .func = func } };
+    return addEventTargetListener(et, typ, ehd, capture);
+}
+
+fn addEventTargetListener(et: *EventTarget, typ: []const u8, data: *anyopaque, capture: bool) !void {
+    // event_handler implements the function exposed in C and called by libdom.
+    // It retrieves the EventHandler and calls the appropriate (JS or Zig)
+    // handler function with the corresponding data.
+    const event_handler = struct {
+        fn handle(event: ?*Event, ptr_: ?*anyopaque) callconv(.C) void {
+            const ptr = ptr_ orelse return;
+            @as(*EventHandlerData, @alignCast(@ptrCast(ptr))).handle(event);
+            // NOTE: we can not call func.deinit here
+            // b/c the handler can be called several times
+            // either on this dispatch event or in anoter one
+        }
+    }.handle;
 
-    const ctx = @as(*anyopaque, @ptrCast(ehd));
     var listener: ?*EventListener = undefined;
-    const errLst = c.dom_event_listener_create(EventHandler, ctx, &listener);
+    const errLst = c.dom_event_listener_create(event_handler, data, &listener);
     try DOMErr(errLst);
     defer c.dom_event_listener_unref(listener);
 
@@ -746,8 +763,9 @@ pub fn eventTargetRemoveEventListener(
     capture: bool,
 ) !void {
     // free data allocation made on eventTargetAddEventListener
-    const ehd = EventHandlerDataInternal.fromListener(lst);
-    if (ehd) |d| d.deinit(alloc);
+    if (EventHandlerData.fromListener(lst)) |ehd| {
+        ehd.deinit(alloc);
+    }
 
     const s = try strFromData(typ);
     const err = eventTargetVtable(et).remove_event_listener.?(et, s, lst, capture);
@@ -776,16 +794,21 @@ pub fn eventTargetRemoveAllEventListeners(
         if (lst) |listener| {
             defer c.dom_event_listener_unref(listener);
 
-            const ehd = EventHandlerDataInternal.fromListener(listener);
-            if (ehd) |d| d.deinit(alloc);
+            if (EventHandlerData.fromListener(listener)) |ehd| {
+                if (ehd.* == .zig) {
+                    // we don't remove Zig listeners
+                    continue;
+                }
 
-            const err = eventTargetVtable(et).remove_event_listener.?(
-                et,
-                null,
-                lst,
-                false,
-            );
-            try DOMErr(err);
+                ehd.deinit(alloc);
+                const err = eventTargetVtable(et).remove_event_listener.?(
+                    et,
+                    null,
+                    lst,
+                    false,
+                );
+                try DOMErr(err);
+            }
         }
 
         if (next == null) {
diff --git a/src/events/event.zig b/src/events/event.zig
