Skip to content

Commit cff8857

Browse files
karlseguinkarlseguin
committed
AddEventListener object listener
Instead of taking a callback function, addEventListener can take an object that exposes a `handleEvent` function. When used this way, `this` is automatically bound. I don't think the current behavior is correct when `handleEvent` is defined as a property (getter), but I couldn't figure out how to make it work the way WPT expects, and it hopefully isn't a common usage pattern. Also added option support to removeEventListener.
1 parent 6039585 commit cff8857

File tree

4 files changed

+101
-41
lines changed

4 files changed

+101
-41
lines changed

‎src/browser/dom/event_target.zig‎

Lines changed: 31 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ pub const EventTarget = struct {
5757
pub fn _addEventListener(
5858
self: *parser.EventTarget,
5959
typ: []const u8,
60-
cbk: Env.Function,
60+
listener: EventHandler.Listener,
6161
opts_: ?AddEventListenerOpts,
6262
page: *Page,
6363
) !void {
@@ -80,6 +80,8 @@ pub const EventTarget = struct {
8080
}
8181
}
8282

83+
const cbk = (try listener.callback(self)) orelse return;
84+
8385
// check if event target has already this listener
8486
const lst = try parser.eventTargetHasListener(
8587
self,
@@ -90,8 +92,7 @@ pub const EventTarget = struct {
9092
if (lst != null) {
9193
return;
9294
}
93-
94-
const eh = try EventHandler.init(page.arena, try cbk.withThis(self));
95+
const eh = try EventHandler.init(page.arena, cbk);
9596

9697
try parser.eventTargetAddEventListener(
9798
self,
@@ -101,19 +102,34 @@ pub const EventTarget = struct {
101102
);
102103
}
103104

105+
const RemoveEventListenerOpts = union(enum) {
106+
opts: Opts,
107+
capture: bool,
108+
109+
const Opts = struct {
110+
capture: ?bool,
111+
};
112+
};
113+
104114
pub fn _removeEventListener(
105115
self: *parser.EventTarget,
106116
typ: []const u8,
107117
cbk: Env.Function,
108-
capture: ?bool,
109-
// TODO: hanle EventListenerOptions
110-
// see #https://github.com/lightpanda-io/jsruntime-lib/issues/114
118+
opts_: ?RemoveEventListenerOpts,
111119
) !void {
120+
var capture = false;
121+
if (opts_) |opts| {
122+
capture = switch (opts) {
123+
.capture => |c| c,
124+
.opts => |o| o.capture orelse false,
125+
};
126+
}
127+
112128
// check if event target has already this listener
113129
const lst = try parser.eventTargetHasListener(
114130
self,
115131
typ,
116-
capture orelse false,
132+
capture,
117133
cbk.id,
118134
);
119135
if (lst == null) {
@@ -125,7 +141,7 @@ pub const EventTarget = struct {
125141
self,
126142
typ,
127143
lst.?,
128-
capture orelse false,
144+
capture,
129145
);
130146
}
131147

@@ -244,4 +260,11 @@ test "Browser.DOM.EventTarget" {
244260
.{ "phase", "3" },
245261
.{ "cur.getAttribute('id')", "content" },
246262
}, .{});
263+
264+
try runner.testCases(&.{
265+
.{ "const obj1 = {calls: 0, handleEvent: function() { this.calls += 1; } };", null },
266+
.{ "content.addEventListener('he', obj1);", null },
267+
.{ "content.dispatchEvent(new Event('he'));", null },
268+
.{ "obj1.calls", "1" },
269+
}, .{});
247270
}

‎src/browser/events/event.zig‎

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,6 @@ const Allocator = std.mem.Allocator;
2121

2222
const log = @import("../../log.zig");
2323
const parser = @import("../netsurf.zig");
24-
const Function = @import("../env.zig").Function;
2524
const generate = @import("../../runtime/generate.zig");
2625

2726
const DOMException = @import("../dom/exceptions.zig").DOMException;
@@ -142,6 +141,24 @@ pub const EventHandler = struct {
142141
callback: Function,
143142
node: parser.EventNode,
144143

144+
const Env = @import("../env.zig").Env;
145+
const Function = Env.Function;
146+
147+
pub const Listener = union(enum) {
148+
function: Function,
149+
object: Env.JsObject,
150+
151+
pub fn callback(self: Listener, target: *parser.EventTarget) !?Function {
152+
return switch (self) {
153+
.function => |func| try func.withThis(target),
154+
.object => |obj| blk: {
155+
const func = (try obj.getFunction("handleEvent")) orelse return null;
156+
break :blk try func.withThis(try obj.persist());
157+
},
158+
};
159+
}
160+
};
161+
145162
pub fn init(allocator: Allocator, callback: Function) !*EventHandler {
146163
const eh = try allocator.create(EventHandler);
147164
eh.* = .{

‎src/browser/xhr/event_target.zig‎

Lines changed: 19 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -44,16 +44,20 @@ pub const XMLHttpRequestEventTarget = struct {
4444
self: *XMLHttpRequestEventTarget,
4545
alloc: std.mem.Allocator,
4646
typ: []const u8,
47-
cbk: Function,
48-
) !void {
47+
listener: EventHandler.Listener,
48+
) !?Function {
4949
const target = @as(*parser.EventTarget, @ptrCast(self));
50-
const eh = try EventHandler.init(alloc, try cbk.withThis(target));
50+
51+
const callback = (try listener.callback(target)) orelse return null;
52+
const eh = try EventHandler.init(alloc, callback);
5153
try parser.eventTargetAddEventListener(
5254
target,
5355
typ,
5456
&eh.node,
5557
false,
5658
);
59+
60+
return callback;
5761
}
5862
fn unregister(self: *XMLHttpRequestEventTarget, typ: []const u8, cbk_id: usize) !void {
5963
const et = @as(*parser.EventTarget, @ptrCast(self));
@@ -86,34 +90,28 @@ pub const XMLHttpRequestEventTarget = struct {
8690
return self.onloadend_cbk;
8791
}
8892

89-
pub fn set_onloadstart(self: *XMLHttpRequestEventTarget, handler: Function, page: *Page) !void {
93+
pub fn set_onloadstart(self: *XMLHttpRequestEventTarget, listener: EventHandler.Listener, page: *Page) !void {
9094
if (self.onloadstart_cbk) |cbk| try self.unregister("loadstart", cbk.id);
91-
try self.register(page.arena, "loadstart", handler);
92-
self.onloadstart_cbk = handler;
95+
self.onloadstart_cbk = try self.register(page.arena, "loadstart", listener);
9396
}
94-
pub fn set_onprogress(self: *XMLHttpRequestEventTarget, handler: Function, page: *Page) !void {
97+
pub fn set_onprogress(self: *XMLHttpRequestEventTarget, listener: EventHandler.Listener, page: *Page) !void {
9598
if (self.onprogress_cbk) |cbk| try self.unregister("progress", cbk.id);
96-
try self.register(page.arena, "progress", handler);
97-
self.onprogress_cbk = handler;
99+
self.onprogress_cbk = try self.register(page.arena, "progress", listener);
98100
}
99-
pub fn set_onabort(self: *XMLHttpRequestEventTarget, handler: Function, page: *Page) !void {
101+
pub fn set_onabort(self: *XMLHttpRequestEventTarget, listener: EventHandler.Listener, page: *Page) !void {
100102
if (self.onabort_cbk) |cbk| try self.unregister("abort", cbk.id);
101-
try self.register(page.arena, "abort", handler);
102-
self.onabort_cbk = handler;
103+
self.onabort_cbk = try self.register(page.arena, "abort", listener);
103104
}
104-
pub fn set_onload(self: *XMLHttpRequestEventTarget, handler: Function, page: *Page) !void {
105+
pub fn set_onload(self: *XMLHttpRequestEventTarget, listener: EventHandler.Listener, page: *Page) !void {
105106
if (self.onload_cbk) |cbk| try self.unregister("load", cbk.id);
106-
try self.register(page.arena, "load", handler);
107-
self.onload_cbk = handler;
107+
self.onload_cbk = try self.register(page.arena, "load", listener);
108108
}
109-
pub fn set_ontimeout(self: *XMLHttpRequestEventTarget, handler: Function, page: *Page) !void {
109+
pub fn set_ontimeout(self: *XMLHttpRequestEventTarget, listener: EventHandler.Listener, page: *Page) !void {
110110
if (self.ontimeout_cbk) |cbk| try self.unregister("timeout", cbk.id);
111-
try self.register(page.arena, "timeout", handler);
112-
self.ontimeout_cbk = handler;
111+
self.ontimeout_cbk = try self.register(page.arena, "timeout", listener);
113112
}
114-
pub fn set_onloadend(self: *XMLHttpRequestEventTarget, handler: Function, page: *Page) !void {
113+
pub fn set_onloadend(self: *XMLHttpRequestEventTarget, listener: EventHandler.Listener, page: *Page) !void {
115114
if (self.onloadend_cbk) |cbk| try self.unregister("loadend", cbk.id);
116-
try self.register(page.arena, "loadend", handler);
117-
self.onloadend_cbk = handler;
115+
self.onloadend_cbk = try self.register(page.arena, "loadend", listener);
118116
}
119117
};

‎src/runtime/js.zig‎

Lines changed: 33 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -582,7 +582,7 @@ pub fn Env(comptime State: type, comptime WebApis: type) type {
582582

583583
// Given an anytype, turns it into a v8.Object. The anytype could be:
584584
// 1 - A V8.object already
585-
// 2 - Our this JsObject wrapper around a V8.Object
585+
// 2 - Our JsObject wrapper around a V8.Object
586586
// 3 - A zig instance that has previously been given to V8
587587
// (i.e., the value has to be known to the executor)
588588
fn valueToExistingObject(self: *const Scope, value: anytype) !v8.Object {
@@ -951,15 +951,7 @@ pub fn Env(comptime State: type, comptime WebApis: type) type {
951951
if (!js_value.isFunction()) {
952952
return null;
953953
}
954-
955-
const func = v8.Persistent(v8.Function).init(self.isolate, js_value.castTo(v8.Function));
956-
try self.trackCallback(func);
957-
958-
return .{
959-
.func = func,
960-
.scope = self,
961-
.id = js_value.castTo(v8.Object).getIdentityHash(),
962-
};
954+
return try self.createFunction(js_value);
963955
}
964956

965957
const js_obj = js_value.castTo(v8.Object);
@@ -996,6 +988,20 @@ pub fn Env(comptime State: type, comptime WebApis: type) type {
996988
return value;
997989
}
998990

991+
fn createFunction(self: *Scope, js_value: v8.Value) !Function {
992+
// caller should have made sure this was a function
993+
std.debug.assert(js_value.isFunction());
994+
995+
const func = v8.Persistent(v8.Function).init(self.isolate, js_value.castTo(v8.Function));
996+
try self.trackCallback(func);
997+
998+
return .{
999+
.func = func,
1000+
.scope = self,
1001+
.id = js_value.castTo(v8.Object).getIdentityHash(),
1002+
};
1003+
}
1004+
9991005
// Probing is part of trying to map a JS value to a Zig union. There's
10001006
// a lot of ambiguity in this process, in part because some JS values
10011007
// can almost always be coerced. For example, anything can be coerced
@@ -1234,11 +1240,16 @@ pub fn Env(comptime State: type, comptime WebApis: type) type {
12341240
};
12351241

12361242
pub fn withThis(self: *const Function, value: anytype) !Function {
1243+
const this_obj = if (@TypeOf(value) == JsObject)
1244+
value.js_obj
1245+
else
1246+
try self.scope.valueToExistingObject(value);
1247+
12371248
return .{
12381249
.id = self.id,
1250+
.this = this_obj,
12391251
.func = self.func,
12401252
.scope = self.scope,
1241-
.this = try self.scope.valueToExistingObject(value),
12421253
};
12431254
}
12441255

@@ -1375,6 +1386,17 @@ pub fn Env(comptime State: type, comptime WebApis: type) type {
13751386
.js_obj = gop.value_ptr.castToObject(),
13761387
};
13771388
}
1389+
1390+
pub fn getFunction(self: JsObject, name: []const u8) !?Function {
1391+
const scope = self.scope;
1392+
const js_name = v8.String.initUtf8(scope.isolate, name);
1393+
1394+
const js_value = try self.js_obj.getValue(scope.context, js_name.toName());
1395+
if (!js_value.isFunction()) {
1396+
return null;
1397+
}
1398+
return try scope.createFunction(js_value);
1399+
}
13781400
};
13791401

13801402
// This only exists so that we know whether a function wants the opaque

0 commit comments

Comments
 (0)