Merge pull request #809 from lightpanda-io/html_element_dataset

Add element.dataset API

Author: karlseguin

src/browser/State.zig

@@ -28,6 +28,7 @@
 
 const Env = @import("env.zig").Env;
 const parser = @import("netsurf.zig");
+const DataSet = @import("html/DataSet.zig");
 const CSSStyleDeclaration = @import("cssom/css_style_declaration.zig").CSSStyleDeclaration;
 
 // for HTMLScript (but probably needs to be added to more)
@@ -36,6 +37,7 @@ onerror: ?Env.Function = null,
 
 // for HTMLElement
 style: CSSStyleDeclaration = .empty,
+dataset: ?DataSet = null,
 
 // for html/document
 ready_state: ReadyState = .loading,

src/browser/html/DataSet.zig

@@ -0,0 +1,100 @@
+// Copyright (C) 2023-2024  Lightpanda (Selecy SAS)
+//
+// Francis Bouvier <francis@lightpanda.io>
+// Pierre Tachoire <pierre@lightpanda.io>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as
+// published by the Free Software Foundation, either version 3 of the
+// License, or (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <https://www.gnu.org/licenses/>.
+const std = @import("std");
+const parser = @import("../netsurf.zig");
+const Page = @import("../page.zig").Page;
+
+const Allocator = std.mem.Allocator;
+
+const DataSet = @This();
+
+element: *parser.Element,
+
+const GetResult = union(enum) {
+    value: []const u8,
+    undefined: void,
+};
+pub fn named_get(self: *const DataSet, name: []const u8, _: *bool, page: *Page) !GetResult {
+    const normalized_name = try normalize(page.call_arena, name);
+    if (try parser.elementGetAttribute(self.element, normalized_name)) |value| {
+        return .{ .value = value };
+    }
+    return .{ .undefined = {} };
+}
+
+pub fn named_set(self: *DataSet, name: []const u8, value: []const u8, _: *bool, page: *Page) !void {
+    const normalized_name = try normalize(page.call_arena, name);
+    try parser.elementSetAttribute(self.element, normalized_name, value);
+}
+
+pub fn named_delete(self: *DataSet, name: []const u8, _: *bool, page: *Page) !void {
+    const normalized_name = try normalize(page.call_arena, name);
+    try parser.elementRemoveAttribute(self.element, normalized_name);
+}
+
+fn normalize(allocator: Allocator, name: []const u8) ![]const u8 {
+    var upper_count: usize = 0;
+    for (name) |c| {
+        if (std.ascii.isUpper(c)) {
+            upper_count += 1;
+        }
+    }
+    // for every upper-case letter, we'll probably need a dash before it
+    // and we need the 'data-' prefix
+    var normalized = try allocator.alloc(u8, name.len + upper_count + 5);
+
+    @memcpy(normalized[0..5], "data-");
+    if (upper_count == 0) {
+        @memcpy(normalized[5..], name);
+        return normalized;
+    }
+
+    var pos: usize = 5;
+    for (name) |c| {
+        if (std.ascii.isUpper(c)) {
+            normalized[pos] = '-';
+            pos += 1;
+            normalized[pos] = c + 32;
+        } else {
+            normalized[pos] = c;
+        }
+        pos += 1;
+    }
+    return normalized;
+}
+
+const testing = @import("../../testing.zig");
+test "Browser.HTML.DataSet" {
+    var runner = try testing.jsRunner(testing.tracking_allocator, .{ .html = "" });
+    defer runner.deinit();
+
+    try runner.testCases(&.{
+        .{ "let el1 = document.createElement('div')", null },
+        .{ "el1.dataset.x", "undefined" },
+        .{ "el1.dataset.x = '123'", "123" },
+        .{ "delete el1.dataset.x", "true" },
+        .{ "el1.dataset.x", "undefined" },
+        .{ "delete el1.dataset.other", "true" }, // yes, this is right
+
+        .{ "let ds1 = el1.dataset", null },
+        .{ "ds1.helloWorld = 'yes'", null },
+        .{ "el1.getAttribute('data-hello-world')", "yes" },
+        .{ "el1.setAttribute('data-this-will-work', 'positive')", null },
+        .{ "ds1.thisWillWork", "positive" },
+    }, .{});
+}

src/browser/html/elements.zig

@@ -27,6 +27,7 @@ const urlStitch = @import("../../url.zig").URL.stitch;
 const URL = @import("../url/url.zig").URL;
 const Node = @import("../dom/node.zig").Node;
 const Element = @import("../dom/element.zig").Element;
+const DataSet = @import("DataSet.zig");
 
 const CSSStyleDeclaration = @import("../cssom/css_style_declaration.zig").CSSStyleDeclaration;
 
@@ -122,6 +123,15 @@ pub const HTMLElement = struct {
         return &state.style;
     }
 
+    pub fn get_dataset(e: *parser.ElementHTML, page: *Page) !*DataSet {
+        const state = try page.getOrCreateNodeState(@ptrCast(e));
+        if (state.dataset) |*ds| {
+            return ds;
+        }
+        state.dataset = DataSet{ .element = @ptrCast(e) };
+        return &state.dataset.?;
+    }
+
     pub fn get_innerText(e: *parser.ElementHTML) ![]const u8 {
         const n = @as(*parser.Node, @ptrCast(e));
         return try parser.nodeTextContent(n) orelse "";
@@ -1561,6 +1571,13 @@ test "Browser.HTML.Element" {
     }, .{});
 }
 
+test "Browser.HTML.Element.DataSet" {
+    var runner = try testing.jsRunner(testing.tracking_allocator, .{ .html = "<div id=x data-power='over 9000' data-empty data-some-long-key=ok></div>" });
+    defer runner.deinit();
+
+    try runner.testCases(&.{ .{ "let div = document.getElementById('x')", null }, .{ "div.dataset.nope", "undefined" }, .{ "div.dataset.power", "over 9000" }, .{ "div.dataset.empty", "" }, .{ "div.dataset.someLongKey", "ok" }, .{ "delete div.dataset.power", "true" }, .{ "div.dataset.power", "undefined" } }, .{});
+}
+
 test "Browser.HTML.HtmlInputElement.properties" {
     var runner = try testing.jsRunner(testing.tracking_allocator, .{ .url = "https://lightpanda.io/noslashattheend" });
     defer runner.deinit();

src/browser/html/html.zig

@@ -36,6 +36,7 @@ pub const Interfaces = .{
     History,
     Location,
     MediaQueryList,
+    @import("DataSet.zig"),
     @import("screen.zig").Interfaces,
     @import("error_event.zig").ErrorEvent,
 };

src/runtime/js.zig

@@ -1931,7 +1931,7 @@ pub fn Env(comptime State: type, comptime WebApis: type) type {
             }
 
             generateIndexer(Struct, template_proto);
-            generateNamedIndexer(Struct, template_proto);
+            generateNamedIndexer(Struct, template.getInstanceTemplate());
             generateUndetectable(Struct, template.getInstanceTemplate());
         }
 
@@ -2116,7 +2116,8 @@ pub fn Env(comptime State: type, comptime WebApis: type) type {
                 }
                 return;
             }
-            const configuration = v8.NamedPropertyHandlerConfiguration{
+
+            var configuration = v8.NamedPropertyHandlerConfiguration{
                 .getter = struct {
                     fn callback(c_name: ?*const v8.C_Name, raw_info: ?*const v8.C_PropertyCallbackInfo) callconv(.c) u8 {
                         const info = v8.PropertyCallbackInfo.initFromV8(raw_info);
@@ -2138,13 +2139,37 @@ pub fn Env(comptime State: type, comptime WebApis: type) type {
                 .flags = v8.PropertyHandlerFlags.OnlyInterceptStrings | v8.PropertyHandlerFlags.NonMasking,
             };
 
-            // If you're trying to implement setter, read:
-            // https://groups.google.com/g/v8-users/c/8tahYBsHpgY/m/IteS7Wn2AAAJ
-            // The issue I had was
-            // (a) where to attache it: does it go ont he instance_template
-            //     instead of the prototype?
-            // (b) defining the getter or query to respond with the
-            //     PropertyAttribute to indicate if the property can be set
+            if (@hasDecl(Struct, "named_set")) {
+                configuration.setter = struct {
+                    fn callback(c_name: ?*const v8.C_Name, c_value: ?*const v8.C_Value, raw_info: ?*const v8.C_PropertyCallbackInfo) callconv(.c) u8 {
+                        const info = v8.PropertyCallbackInfo.initFromV8(raw_info);
+                        var caller = Caller(Self, State).init(info);
+                        defer caller.deinit();
+
+                        const named_function = comptime NamedFunction.init(Struct, "named_set");
+                        return caller.setNamedIndex(Struct, named_function, .{ .handle = c_name.? }, .{ .handle = c_value.? }, info) catch |err| blk: {
+                            caller.handleError(Struct, named_function, err, info);
+                            break :blk v8.Intercepted.No;
+                        };
+                    }
+                }.callback;
+            }
+
+            if (@hasDecl(Struct, "named_delete")) {
+                configuration.deleter = struct {
+                    fn callback(c_name: ?*const v8.C_Name, raw_info: ?*const v8.C_PropertyCallbackInfo) callconv(.c) u8 {
+                        const info = v8.PropertyCallbackInfo.initFromV8(raw_info);
+                        var caller = Caller(Self, State).init(info);
+                        defer caller.deinit();
+
+                        const named_function = comptime NamedFunction.init(Struct, "named_delete");
+                        return caller.deleteNamedIndex(Struct, named_function, .{ .handle = c_name.? }, info) catch |err| blk: {
+                            caller.handleError(Struct, named_function, err, info);
+                            break :blk v8.Intercepted.No;
+                        };
+                    }
+                }.callback;
+            }
             template_proto.setNamedProperty(configuration, null);
         }
 
@@ -2646,37 +2671,63 @@ fn Caller(comptime E: type, comptime State: type) type {
         }
 
         fn getNamedIndex(self: *Self, comptime Struct: type, comptime named_function: NamedFunction, name: v8.Name, info: v8.PropertyCallbackInfo) !u8 {
-            const js_context = self.js_context;
             const func = @field(Struct, named_function.name);
-            const NamedGet = @TypeOf(func);
-            if (@typeInfo(NamedGet).@"fn".return_type == null) {
-                @compileError(named_function.full_name ++ " must have a return type");
-            }
+            comptime assertSelfReceiver(Struct, named_function);
 
             var has_value = true;
-            var args: ParamterTypes(NamedGet) = undefined;
-            const arg_fields = @typeInfo(@TypeOf(args)).@"struct".fields;
-            switch (arg_fields.len) {
-                0, 1, 2 => @compileError(named_function.full_name ++ " must take at least a u32 and *bool parameter"),
-                3, 4 => {
-                    const zig_instance = try E.typeTaggedAnyOpaque(named_function, *Receiver(Struct), info.getThis());
-                    comptime assertSelfReceiver(Struct, named_function);
-                    @field(args, "0") = zig_instance;
-                    @field(args, "1") = try self.nameToString(name);
-                    @field(args, "2") = &has_value;
-                    if (comptime arg_fields.len == 4) {
-                        comptime assertIsStateArg(Struct, named_function, 3);
-                        @field(args, "3") = js_context.state;
-                    }
-                },
-                else => @compileError(named_function.full_name ++ " has too many parmaters"),
+            var args = try self.getArgs(Struct, named_function, 3, info);
+            const zig_instance = try E.typeTaggedAnyOpaque(named_function, *Receiver(Struct), info.getThis());
+            @field(args, "0") = zig_instance;
+            @field(args, "1") = try self.nameToString(name);
+            @field(args, "2") = &has_value;
+
+            const res = @call(.auto, func, args);
+            if (has_value == false) {
+                return v8.Intercepted.No;
             }
+            info.getReturnValue().set(try self.js_context.zigValueToJs(res));
+            return v8.Intercepted.Yes;
+        }
+
+        fn setNamedIndex(self: *Self, comptime Struct: type, comptime named_function: NamedFunction, name: v8.Name, js_value: v8.Value, info: v8.PropertyCallbackInfo) !u8 {
+            const js_context = self.js_context;
+            const func = @field(Struct, named_function.name);
+            comptime assertSelfReceiver(Struct, named_function);
+
+            var has_value = true;
+            var args = try self.getArgs(Struct, named_function, 4, info);
+            const zig_instance = try E.typeTaggedAnyOpaque(named_function, *Receiver(Struct), info.getThis());
+            @field(args, "0") = zig_instance;
+            @field(args, "1") = try self.nameToString(name);
+            @field(args, "2") = try js_context.jsValueToZig(named_function, @TypeOf(@field(args, "2")), js_value);
+            @field(args, "3") = &has_value;
 
             const res = @call(.auto, func, args);
+            return namedSetOrDeleteCall(res, has_value);
+        }
+
+        fn deleteNamedIndex(self: *Self, comptime Struct: type, comptime named_function: NamedFunction, name: v8.Name, info: v8.PropertyCallbackInfo) !u8 {
+            const func = @field(Struct, named_function.name);
+            comptime assertSelfReceiver(Struct, named_function);
+
+            var has_value = true;
+            var args = try self.getArgs(Struct, named_function, 3, info);
+            const zig_instance = try E.typeTaggedAnyOpaque(named_function, *Receiver(Struct), info.getThis());
+            @field(args, "0") = zig_instance;
+            @field(args, "1") = try self.nameToString(name);
+            @field(args, "2") = &has_value;
+
+            const res = @call(.auto, func, args);
+            return namedSetOrDeleteCall(res, has_value);
+        }
+
+        fn namedSetOrDeleteCall(res: anytype, has_value: bool) !u8 {
+            if (@typeInfo(@TypeOf(res)) == .error_union) {
+                _ = try res;
+            }
             if (has_value == false) {
                 return v8.Intercepted.No;
             }
-            info.getReturnValue().set(try js_context.zigValueToJs(res));
             return v8.Intercepted.Yes;
         }