add CompilationCallback

and load polyfill depending the source content

.github/workflows/build.yml

@@ -98,7 +98,9 @@ jobs:
       ARCH: aarch64
       OS: macos
 
-    runs-on: macos-latest
+    # macos-14 runs on arm CPU. see
+    # https://github.com/actions/runner-images?tab=readme-ov-file
+    runs-on: macos-14
     timeout-minutes: 15
 
     steps:
@@ -136,6 +138,11 @@ jobs:
       ARCH: x86_64
       OS: macos
 
+    # macos-13 runs on x86 CPU. see
+    # https://github.com/actions/runner-images?tab=readme-ov-file
+    # If we want to build for macos-14 or superior, we need to switch to
+    # macos-14-large.
+    # No need for now, but maybe we will need it in the short term.
     runs-on: macos-13
     timeout-minutes: 15
 

.github/workflows/e2e-test.yml

@@ -45,6 +45,9 @@ jobs:
     runs-on: ubuntu-latest
     timeout-minutes: 15
 
+    # Don't run the CI with draft PR.
+    if: github.event.pull_request.draft == false
+
     steps:
       - uses: actions/checkout@v4
         with:

README.md

@@ -18,7 +18,7 @@ Lightpanda is the open-source browser made for headless usage:
 
 - Javascript execution
 - Support of Web APIs (partial, WIP)
-- Compatible with Playwright[^1], Puppeteer through CDP (WIP)
+- Compatible with Playwright[^1], Puppeteer, chromedp through CDP
 
 Fast web automation for AI agents, LLM training, scraping and testing:
 
@@ -41,7 +41,8 @@ Due to the nature of Playwright, a script that works with the current version of
 
 ## Quick start
 
-### Install from the nightly builds
+### Install 
+**Install from the nightly builds**
 
 You can download the last binary from the [nightly
 builds](https://github.com/lightpanda-io/browser/releases/tag/nightly) for
@@ -64,6 +65,17 @@ chmod a+x ./lightpanda
 The Lightpanda browser is compatible to run on windows inside WSL. Follow the Linux instruction for installation from a WSL terminal.
 It is recommended to install clients like Puppeteer on the Windows host.
 
+**Install from Docker**
+
+Lightpanda provides [official Docker
+images](https://hub.docker.com/r/lightpanda/browser) for both Linux amd64 and
+arm64 architectures.
+The following command fetches the Docker image and starts a new container exposing Lightpanda's CDP server on port `9222`.
+The `--privileged` option is required because the browser requires `io_uring` syscalls which are blocked by default by Docker.
+```console
+docker run -d --name lightpanda -p 9222:9222 --privileged lightpanda/browser:nightly
+```
+
 ### Dump a URL
 
 ```console
@@ -124,21 +136,27 @@ By default, Lightpanda collects and sends usage telemetry. This can be disabled
 
 ## Status
 
-Lightpanda is still a work in progress and is currently at a Beta stage.
-
-:warning: You should expect most websites to fail or crash.
+Lightpanda is in Beta and currently a work in progress. Stability and coverage are improving and many websites now work.
+You may still encounter errors or crashes. Please open an issue with specifics if so.
 
 Here are the key features we have implemented:
 
+- [x] HTTP loader
 - [x] HTTP loader
 - [x] HTML parser and DOM tree (based on Netsurf libs)
 - [x] Javascript support (v8)
-- [x] Basic DOM APIs
+- [x] DOM APIs
 - [x] Ajax
   - [x] XHR API
-  - [x] Fetch API
+  - [x] Fetch API (polyfill)
 - [x] DOM dump
-- [x] Basic CDP/websockets server
+- [x] CDP/websockets server
+- [x] Click
+- [x] Input form
+- [x] Cookies
+- [x] Custom HTTP headers
+- [ ] Proxy support
+- [ ] Network interception 
 
 NOTE: There are hundreds of Web APIs. Developing a browser (even just for headless mode) is a huge task. Coverage will increase over time.
 

build.zig.zon

@@ -5,18 +5,18 @@
     .fingerprint = 0xda130f3af836cea0,
     .dependencies = .{
         .tls = .{
-            .url = "https://github.com/ianic/tls.zig/archive/8250aa9184fbad99983b32411bbe1a5d2fd6f4b7.tar.gz",
-            .hash = "tls-0.1.0-ER2e0pU3BQB-UD2_s90uvppceH_h4KZxtHCrCct8L054",
+            .url = "https://github.com/ianic/tls.zig/archive/55845f755d9e2e821458ea55693f85c737cd0c7a.tar.gz",
+            .hash = "tls-0.1.0-ER2e0m43BQAshi8ixj1qf3w2u2lqKtXtkrxUJ4AGZDcl",
         },
         .tigerbeetle_io = .{
             .url = "https://github.com/lightpanda-io/tigerbeetle-io/archive/61d9652f1a957b7f4db723ea6aa0ce9635e840ce.tar.gz",
             .hash = "tigerbeetle_io-0.0.0-ViLgxpyRBAB5BMfIcj3KMXfbJzwARs9uSl8aRy2OXULd",
         },
-        //.v8 = .{
-        //    .url = "https://github.com/lightpanda-io/zig-v8-fork/archive/dd087771378ea854452bcb010309fa9ffe5a9cac.tar.gz",
-        //    .hash = "v8-0.0.0-xddH66e8AwBL3O_A8yWQYQIyfMbKHFNVQr_NqM6YjU11",
-        //},
-        .v8 = .{ .path = "../zig-v8-fork" },
+        .v8 = .{
+            .url = "https://github.com/lightpanda-io/zig-v8-fork/archive/dd087771378ea854452bcb010309fa9ffe5a9cac.tar.gz",
+            .hash = "v8-0.0.0-xddH66e8AwBL3O_A8yWQYQIyfMbKHFNVQr_NqM6YjU11",
+        },
+        //.v8 = .{ .path = "../zig-v8-fork" },
         //.tigerbeetle_io = .{ .path = "../tigerbeetle-io" },
     },
 }

src/browser/State.zig

@@ -29,6 +29,7 @@
 const Env = @import("env.zig").Env;
 const parser = @import("netsurf.zig");
 const DataSet = @import("html/DataSet.zig");
+const ShadowRoot = @import("dom/shadow_root.zig").ShadowRoot;
 const CSSStyleDeclaration = @import("cssom/css_style_declaration.zig").CSSStyleDeclaration;
 
 // for HTMLScript (but probably needs to be added to more)
@@ -62,6 +63,8 @@ explicit_index_set: bool = false,
 
 template_content: ?*parser.DocumentFragment = null,
 
+shadow_root: ?*ShadowRoot = null,
+
 const ReadyState = enum {
     loading,
     interactive,

src/browser/css/parser.zig

@@ -204,7 +204,7 @@ pub const Parser = struct {
         }
 
         const c = p.s[p.i];
-        if (!nameStart(c) or c == '\\') {
+        if (!(nameStart(c) or c == '\\')) {
             return ParseError.ExpectedSelector;
         }
 
@@ -582,6 +582,7 @@ pub const Parser = struct {
             .only_of_type => return .{ .pseudo_class_only_child = true },
             .input, .empty, .root, .link => return .{ .pseudo_class = pseudo_class },
             .enabled, .disabled, .checked => return .{ .pseudo_class = pseudo_class },
+            .visible => return .{ .pseudo_class = pseudo_class },
             .lang => {
                 if (!p.consumeParenthesis()) return ParseError.ExpectedParenthesis;
                 if (p.i == p.s.len) return ParseError.UnmatchParenthesis;
@@ -605,7 +606,7 @@ pub const Parser = struct {
             .after, .backdrop, .before, .cue, .first_letter => return .{ .pseudo_element = pseudo_class },
             .first_line, .grammar_error, .marker, .placeholder => return .{ .pseudo_element = pseudo_class },
             .selection, .spelling_error => return .{ .pseudo_element = pseudo_class },
-            .modal => return .{ .pseudo_element = pseudo_class },
+            .modal, .popover_open => return .{ .pseudo_element = pseudo_class },
         }
     }
 
@@ -949,3 +950,36 @@ test "parser.parseString" {
         };
     }
 }
+
+test "parser.parse" {
+    var arena = std.heap.ArenaAllocator.init(std.testing.allocator);
+    defer arena.deinit();
+    const alloc = arena.allocator();
+
+    const testcases = [_]struct {
+        s: []const u8, // given value
+        exp: Selector, // expected value
+        err: bool = false,
+    }{
+        .{ .s = "root", .exp = .{ .tag = "root" } },
+        .{ .s = ".root", .exp = .{ .class = "root" } },
+        .{ .s = ":root", .exp = .{ .pseudo_class = .root } },
+        .{ .s = ".\\:bar", .exp = .{ .class = ":bar" } },
+        .{ .s = ".foo\\:bar", .exp = .{ .class = "foo:bar" } },
+    };
+
+    for (testcases) |tc| {
+        var p = Parser{ .s = tc.s, .opts = .{} };
+        const sel = p.parse(alloc) catch |e| {
+            // if error was expected, continue.
+            if (tc.err) continue;
+
+            std.debug.print("test case {s}\n", .{tc.s});
+            return e;
+        };
+        std.testing.expectEqualDeep(tc.exp, sel) catch |e| {
+            std.debug.print("test case {s} : {}\n", .{ tc.s, sel });
+            return e;
+        };
+    }
+}

src/browser/css/selector.zig

@@ -99,6 +99,8 @@ pub const PseudoClass = enum {
     selection,
     spelling_error,
     modal,
+    popover_open,
+    visible,
 
     pub const Error = error{
         InvalidPseudoClass,
@@ -114,52 +116,108 @@ pub const PseudoClass = enum {
     }
 
     pub fn parse(s: []const u8) Error!PseudoClass {
-        if (std.ascii.eqlIgnoreCase(s, "not")) return .not;
-        if (std.ascii.eqlIgnoreCase(s, "has")) return .has;
-        if (std.ascii.eqlIgnoreCase(s, "haschild")) return .haschild;
-        if (std.ascii.eqlIgnoreCase(s, "contains")) return .contains;
-        if (std.ascii.eqlIgnoreCase(s, "containsown")) return .containsown;
-        if (std.ascii.eqlIgnoreCase(s, "matches")) return .matches;
-        if (std.ascii.eqlIgnoreCase(s, "matchesown")) return .matchesown;
-        if (std.ascii.eqlIgnoreCase(s, "nth-child")) return .nth_child;
-        if (std.ascii.eqlIgnoreCase(s, "nth-last-child")) return .nth_last_child;
-        if (std.ascii.eqlIgnoreCase(s, "nth-of-type")) return .nth_of_type;
-        if (std.ascii.eqlIgnoreCase(s, "nth-last-of-type")) return .nth_last_of_type;
-        if (std.ascii.eqlIgnoreCase(s, "first-child")) return .first_child;
-        if (std.ascii.eqlIgnoreCase(s, "last-child")) return .last_child;
-        if (std.ascii.eqlIgnoreCase(s, "first-of-type")) return .first_of_type;
-        if (std.ascii.eqlIgnoreCase(s, "last-of-type")) return .last_of_type;
-        if (std.ascii.eqlIgnoreCase(s, "only-child")) return .only_child;
-        if (std.ascii.eqlIgnoreCase(s, "only-of-type")) return .only_of_type;
-        if (std.ascii.eqlIgnoreCase(s, "input")) return .input;
-        if (std.ascii.eqlIgnoreCase(s, "empty")) return .empty;
-        if (std.ascii.eqlIgnoreCase(s, "root")) return .root;
-        if (std.ascii.eqlIgnoreCase(s, "link")) return .link;
-        if (std.ascii.eqlIgnoreCase(s, "lang")) return .lang;
-        if (std.ascii.eqlIgnoreCase(s, "enabled")) return .enabled;
-        if (std.ascii.eqlIgnoreCase(s, "disabled")) return .disabled;
-        if (std.ascii.eqlIgnoreCase(s, "checked")) return .checked;
-        if (std.ascii.eqlIgnoreCase(s, "visited")) return .visited;
-        if (std.ascii.eqlIgnoreCase(s, "hover")) return .hover;
-        if (std.ascii.eqlIgnoreCase(s, "active")) return .active;
-        if (std.ascii.eqlIgnoreCase(s, "focus")) return .focus;
-        if (std.ascii.eqlIgnoreCase(s, "target")) return .target;
-        if (std.ascii.eqlIgnoreCase(s, "after")) return .after;
-        if (std.ascii.eqlIgnoreCase(s, "backdrop")) return .backdrop;
-        if (std.ascii.eqlIgnoreCase(s, "before")) return .before;
-        if (std.ascii.eqlIgnoreCase(s, "cue")) return .cue;
-        if (std.ascii.eqlIgnoreCase(s, "first-letter")) return .first_letter;
-        if (std.ascii.eqlIgnoreCase(s, "first-line")) return .first_line;
-        if (std.ascii.eqlIgnoreCase(s, "grammar-error")) return .grammar_error;
-        if (std.ascii.eqlIgnoreCase(s, "marker")) return .marker;
-        if (std.ascii.eqlIgnoreCase(s, "placeholder")) return .placeholder;
-        if (std.ascii.eqlIgnoreCase(s, "selection")) return .selection;
-        if (std.ascii.eqlIgnoreCase(s, "spelling-error")) return .spelling_error;
-        if (std.ascii.eqlIgnoreCase(s, "modal")) return .modal;
+        const longest_selector = "nth-last-of-type";
+        if (s.len > longest_selector.len) {
+            return Error.InvalidPseudoClass;
+        }
+
+        var buf: [longest_selector.len]u8 = undefined;
+        const selector = std.ascii.lowerString(&buf, s);
+
+        switch (selector.len) {
+            3 => switch (@as(u24, @bitCast(selector[0..3].*))) {
+                asUint(u24, "cue") => return .cue,
+                asUint(u24, "has") => return .has,
+                asUint(u24, "not") => return .not,
+                else => {},
+            },
+            4 => switch (@as(u32, @bitCast(selector[0..4].*))) {
+                asUint(u32, "lang") => return .lang,
+                asUint(u32, "link") => return .link,
+                asUint(u32, "root") => return .root,
+                else => {},
+            },
+            5 => switch (@as(u40, @bitCast(selector[0..5].*))) {
+                asUint(u40, "after") => return .after,
+                asUint(u40, "empty") => return .empty,
+                asUint(u40, "focus") => return .focus,
+                asUint(u40, "hover") => return .hover,
+                asUint(u40, "input") => return .input,
+                asUint(u40, "modal") => return .modal,
+                else => {},
+            },
+            6 => switch (@as(u48, @bitCast(selector[0..6].*))) {
+                asUint(u48, "active") => return .active,
+                asUint(u48, "before") => return .before,
+                asUint(u48, "marker") => return .marker,
+                asUint(u48, "target") => return .target,
+                else => {},
+            },
+            7 => switch (@as(u56, @bitCast(selector[0..7].*))) {
+                asUint(u56, "checked") => return .checked,
+                asUint(u56, "enabled") => return .enabled,
+                asUint(u56, "matches") => return .matches,
+                asUint(u56, "visited") => return .visited,
+                asUint(u56, "visible") => return .visible,
+                else => {},
+            },
+            8 => switch (@as(u64, @bitCast(selector[0..8].*))) {
+                asUint(u64, "backdrop") => return .backdrop,
+                asUint(u64, "contains") => return .contains,
+                asUint(u64, "disabled") => return .disabled,
+                asUint(u64, "haschild") => return .haschild,
+                else => {},
+            },
+            9 => switch (@as(u72, @bitCast(selector[0..9].*))) {
+                asUint(u72, "nth-child") => return .nth_child,
+                asUint(u72, "selection") => return .selection,
+                else => {},
+            },
+            10 => switch (@as(u80, @bitCast(selector[0..10].*))) {
+                asUint(u80, "first-line") => return .first_line,
+                asUint(u80, "last-child") => return .last_child,
+                asUint(u80, "matchesown") => return .matchesown,
+                asUint(u80, "only-child") => return .only_child,
+                else => {},
+            },
+            11 => switch (@as(u88, @bitCast(selector[0..11].*))) {
+                asUint(u88, "containsown") => return .containsown,
+                asUint(u88, "first-child") => return .first_child,
+                asUint(u88, "nth-of-type") => return .nth_of_type,
+                asUint(u88, "placeholder") => return .placeholder,
+                else => {},
+            },
+            12 => switch (@as(u96, @bitCast(selector[0..12].*))) {
+                asUint(u96, "first-letter") => return .first_letter,
+                asUint(u96, "last-of-type") => return .last_of_type,
+                asUint(u96, "only-of-type") => return .only_of_type,
+                asUint(u96, "popover-open") => return .popover_open,
+                else => {},
+            },
+            13 => switch (@as(u104, @bitCast(selector[0..13].*))) {
+                asUint(u104, "first-of-type") => return .first_of_type,
+                asUint(u104, "grammar-error") => return .grammar_error,
+                else => {},
+            },
+            14 => switch (@as(u112, @bitCast(selector[0..14].*))) {
+                asUint(u112, "nth-last-child") => return .nth_last_child,
+                asUint(u112, "spelling-error") => return .spelling_error,
+                else => {},
+            },
+            16 => switch (@as(u128, @bitCast(selector[0..16].*))) {
+                asUint(u128, "nth-last-of-type") => return .nth_last_of_type,
+                else => {},
+            },
+            else => {},
+        }
         return Error.InvalidPseudoClass;
     }
 };
 
+fn asUint(comptime T: type, comptime string: []const u8) T {
+    return @bitCast(string[0..string.len].*);
+}
+
 pub const Selector = union(enum) {
     pub const Error = error{
         UnknownCombinedCombinator,
@@ -511,6 +569,8 @@ pub const Selector = union(enum) {
                     // TODO implement using the url fragment.
                     // see https://developer.mozilla.org/en-US/docs/Web/CSS/:target
                     .target => return false,
+                    // visible always returns true.
+                    .visible => return true,
 
                     // all others pseudo class are handled by specialized
                     // pseudo_class_X selectors.

src/browser/dom/attribute.zig

@@ -15,7 +15,6 @@
 //
 // 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 parser = @import("../netsurf.zig");
 
 const Node = @import("node.zig").Node;
@@ -47,7 +46,14 @@ pub const Attr = struct {
     }
 
     pub fn set_value(self: *parser.Attribute, v: []const u8) !?[]const u8 {
-        try parser.attributeSetValue(self, v);
+        if (try parser.attributeGetOwnerElement(self)) |el| {
+            // if possible, go through the element, as that triggers a
+            // DOMAttrModified event (which MutationObserver cares about)
+            const name = try parser.attributeGetName(self);
+            try parser.elementSetAttribute(el, name, v);
+        } else {
+            try parser.attributeSetValue(self, v);
+        }
         return v;
     }
 

src/browser/dom/document.zig

@@ -32,6 +32,7 @@ const css = @import("css.zig");
 const Element = @import("element.zig").Element;
 const ElementUnion = @import("element.zig").Union;
 const TreeWalker = @import("tree_walker.zig").TreeWalker;
+const CSSStyleSheet = @import("../cssom/css_stylesheet.zig").CSSStyleSheet;
 const Range = @import("range.zig").Range;
 
 const Env = @import("../env.zig").Env;
@@ -122,28 +123,11 @@ pub const Document = struct {
         return try Element.toInterface(e);
     }
 
-    const CreateElementResult = union(enum) {
-        element: ElementUnion,
-        custom: Env.JsObject,
-    };
-
-    pub fn _createElement(self: *parser.Document, tag_name: []const u8, page: *Page) !CreateElementResult {
-        const custom_element = page.window.custom_elements._get(tag_name) orelse {
-            const e = try parser.documentCreateElement(self, tag_name);
-            return .{ .element = try Element.toInterface(e) };
-        };
-
-        var result: Env.Function.Result = undefined;
-        const js_obj = custom_element.newInstance(&result) catch |err| {
-            log.fatal(.user_script, "newInstance error", .{
-                .err = result.exception,
-                .stack = result.stack,
-                .tag_name = tag_name,
-                .source = "createElement",
-            });
-            return err;
-        };
-        return .{ .custom = js_obj };
+    pub fn _createElement(self: *parser.Document, tag_name: []const u8) !ElementUnion {
+        // The element’s namespace is the HTML namespace when document is an HTML document
+        // https://dom.spec.whatwg.org/#ref-for-dom-document-createelement%E2%91%A0
+        const e = try parser.documentCreateElementNS(self, "http://www.w3.org/1999/xhtml", tag_name);
+        return Element.toInterface(e);
     }
 
     pub fn _createElementNS(self: *parser.Document, ns: []const u8, tag_name: []const u8) !ElementUnion {
@@ -237,7 +221,7 @@ pub const Document = struct {
     pub fn _querySelector(self: *parser.Document, selector: []const u8, page: *Page) !?ElementUnion {
         if (selector.len == 0) return null;
 
-        const n = try css.querySelector(page.arena, parser.documentToNode(self), selector);
+        const n = try css.querySelector(page.call_arena, parser.documentToNode(self), selector);
 
         if (n == null) return null;
 
@@ -295,6 +279,11 @@ pub const Document = struct {
     pub fn _createRange(_: *parser.Document, page: *Page) Range {
         return Range.constructor(page);
     }
+
+    // TODO: dummy implementation
+    pub fn get_styleSheets(_: *parser.Document) []CSSStyleSheet {
+        return &.{};
+    }
 };
 
 const testing = @import("../../testing.zig");
@@ -463,6 +452,9 @@ test "Browser.DOM.Document" {
             ,
             "1",
         },
+
+        .{ "document.querySelectorAll('.\\\\:popover-open').length", "0" },
+        .{ "document.querySelectorAll('.foo\\\\:bar').length", "0" },
     }, .{});
 
     try runner.testCases(&.{
@@ -471,6 +463,10 @@ test "Browser.DOM.Document" {
         .{ "document.activeElement === document.getElementById('link')", "true" },
     }, .{});
 
+    try runner.testCases(&.{
+        .{ "document.styleSheets.length", "0" },
+    }, .{});
+
     // this test breaks the doc structure, keep it at the end of the test
     // suite.
     try runner.testCases(&.{

src/browser/dom/document_fragment.zig

@@ -16,8 +16,12 @@
 // 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 css = @import("css.zig");
 const parser = @import("../netsurf.zig");
 const Page = @import("../page.zig").Page;
+const NodeList = @import("nodelist.zig").NodeList;
+const Element = @import("element.zig").Element;
+const ElementUnion = @import("element.zig").Union;
 
 const Node = @import("node.zig").Node;
 
@@ -53,6 +57,20 @@ pub const DocumentFragment = struct {
     pub fn _replaceChildren(self: *parser.DocumentFragment, nodes: []const Node.NodeOrText) !void {
         return Node.replaceChildren(parser.documentFragmentToNode(self), nodes);
     }
+
+    pub fn _querySelector(self: *parser.DocumentFragment, selector: []const u8, page: *Page) !?ElementUnion {
+        if (selector.len == 0) return null;
+
+        const n = try css.querySelector(page.call_arena, parser.documentFragmentToNode(self), selector);
+
+        if (n == null) return null;
+
+        return try Element.toInterface(parser.nodeToElement(n.?));
+    }
+
+    pub fn _querySelectorAll(self: *parser.DocumentFragment, selector: []const u8, page: *Page) !NodeList {
+        return css.querySelectorAll(page.arena, parser.documentFragmentToNode(self), selector);
+    }
 };
 
 const testing = @import("../../testing.zig");
@@ -83,5 +101,11 @@ test "Browser.DOM.DocumentFragment" {
 
         .{ "document.getElementsByTagName('body')[0].append(f.cloneNode(true));", null },
         .{ "document.getElementById('x') != null;", "true" },
+
+        .{ "document.querySelector('.hello')", "null" },
+        .{ "document.querySelectorAll('.hello').length", "0" },
+
+        .{ "document.querySelector('#x').id", "x" },
+        .{ "document.querySelectorAll('#x')[0].id", "x" },
     }, .{});
 }

src/browser/dom/dom.zig

@@ -23,6 +23,7 @@ const NamedNodeMap = @import("namednodemap.zig").NamedNodeMap;
 const DOMTokenList = @import("token_list.zig");
 const NodeList = @import("nodelist.zig");
 const Node = @import("node.zig");
+const ResizeObserver = @import("resize_observer.zig");
 const MutationObserver = @import("mutation_observer.zig");
 const IntersectionObserver = @import("intersection_observer.zig");
 const DOMParser = @import("dom_parser.zig").DOMParser;
@@ -40,6 +41,7 @@ pub const Interfaces = .{
     NodeList.Interfaces,
     Node.Node,
     Node.Interfaces,
+    ResizeObserver.Interfaces,
     MutationObserver.Interfaces,
     IntersectionObserver.Interfaces,
     DOMParser,

src/browser/dom/element.zig

@@ -30,6 +30,8 @@ const Node = @import("node.zig").Node;
 const Walker = @import("walker.zig").WalkerDepthFirst;
 const NodeList = @import("nodelist.zig").NodeList;
 const HTMLElem = @import("../html/elements.zig");
+const ShadowRoot = @import("../dom/shadow_root.zig").ShadowRoot;
+
 pub const Union = @import("../html/elements.zig").Union;
 
 // WEB IDL https://dom.spec.whatwg.org/#element
@@ -127,16 +129,40 @@ pub const Element = struct {
         // remove existing children
         try Node.removeChildren(node);
 
-        // get fragment body children
-        const children = try parser.documentFragmentBodyChildren(fragment) orelse return;
+        // I'm not sure what the exact behavior is supposed to be. Initially,
+        // we were only copying the body of the document fragment. But it seems
+        // like head elements should be copied too. Specifically, some sites
+        // create script tags via innerHTML, which we need to capture.
+        // If you play with this in a browser, you should notice that the
+        // behavior is different depending on whether you're in a blank page
+        // or an actual document. In a blank page, something like:
+        //    x.innerHTML = '<script></script>';
+        // does _not_ create an empty script, but in a real page, it does. Weird.
+        const fragment_node = parser.documentFragmentToNode(fragment);
+        const html = try parser.nodeFirstChild(fragment_node) orelse return;
+        const head = try parser.nodeFirstChild(html) orelse return;
+        {
+            // First, copy some of the head element
+            const children = try parser.nodeGetChildNodes(head);
+            const ln = try parser.nodeListLength(children);
+            for (0..ln) |_| {
+                // always index 0, because nodeAppendChild moves the node out of
+                // the nodeList and into the new tree
+                const child = try parser.nodeListItem(children, 0) orelse continue;
+                _ = try parser.nodeAppendChild(node, child);
+            }
+        }
 
-        // append children to the node
-        const ln = try parser.nodeListLength(children);
-        for (0..ln) |_| {
-            // always index 0, because ndoeAppendChild moves the node out of
-            // the nodeList and into the new tree
-            const child = try parser.nodeListItem(children, 0) orelse continue;
-            _ = try parser.nodeAppendChild(node, child);
+        {
+            const body = try parser.nodeNextSibling(head) orelse return;
+            const children = try parser.nodeGetChildNodes(body);
+            const ln = try parser.nodeListLength(children);
+            for (0..ln) |_| {
+                // always index 0, because nodeAppendChild moves the node out of
+                // the nodeList and into the new tree
+                const child = try parser.nodeListItem(children, 0) orelse continue;
+                _ = try parser.nodeAppendChild(node, child);
+            }
         }
     }
 
@@ -160,8 +186,14 @@ pub const Element = struct {
         }
     }
 
+    // don't use parser.nodeHasAttributes(...) because that returns true/false
+    // based on the type, e.g. a node never as attributes, an element always has
+    // attributes. But, Element.hasAttributes is supposed to return true only
+    // if the element has at least 1 attribute.
     pub fn _hasAttributes(self: *parser.Element) !bool {
-        return try parser.nodeHasAttributes(parser.elementToNode(self));
+        // an element _must_ have at least an empty attribute
+        const node_map = try parser.nodeGetAttributes(parser.elementToNode(self)) orelse unreachable;
+        return try parser.namedNodeMapGetLength(node_map) > 0;
     }
 
     pub fn _getAttribute(self: *parser.Element, qname: []const u8) !?[]const u8 {
@@ -335,7 +367,7 @@ pub const Element = struct {
     pub fn _querySelector(self: *parser.Element, selector: []const u8, page: *Page) !?Union {
         if (selector.len == 0) return null;
 
-        const n = try css.querySelector(page.arena, parser.elementToNode(self), selector);
+        const n = try css.querySelector(page.call_arena, parser.elementToNode(self), selector);
 
         if (n == null) return null;
 
@@ -429,6 +461,44 @@ pub const Element = struct {
         _ = opts;
         return true;
     }
+
+    const AttachShadowOpts = struct {
+        mode: []const u8, // must be specified
+    };
+    pub fn _attachShadow(self: *parser.Element, opts: AttachShadowOpts, page: *Page) !*ShadowRoot {
+        const mode = std.meta.stringToEnum(ShadowRoot.Mode, opts.mode) orelse return error.InvalidArgument;
+        const state = try page.getOrCreateNodeState(@alignCast(@ptrCast(self)));
+        if (state.shadow_root) |sr| {
+            if (mode != sr.mode) {
+                // this is the behavior per the spec
+                return error.NotSupportedError;
+            }
+
+            // TODO: the existing shadow root should be cleared!
+            return sr;
+        }
+
+        // Not sure what to do if there is no owner document
+        const doc = try parser.nodeOwnerDocument(@ptrCast(self)) orelse return error.InvalidArgument;
+        const fragment = try parser.documentCreateDocumentFragment(doc);
+        const sr = try page.arena.create(ShadowRoot);
+        sr.* = .{
+            .host = self,
+            .mode = mode,
+            .proto = fragment,
+        };
+        state.shadow_root = sr;
+        return sr;
+    }
+
+    pub fn get_shadowRoot(self: *parser.Element, page: *Page) ?*ShadowRoot {
+        const state = page.getNodeState(@alignCast(@ptrCast(self))) orelse return null;
+        const sr = state.shadow_root orelse return null;
+        if (sr.mode == .closed) {
+            return null;
+        }
+        return sr;
+    }
 };
 
 // Tests
@@ -679,4 +749,13 @@ test "Browser.DOM.Element" {
         .{ "div1.innerHTML = \"  <link/><table></table><a href='/a'>a</a><input type='checkbox'/>\"", null },
         .{ "div1.getElementsByTagName('a').length", "1" },
     }, .{});
+
+    try runner.testCases(&.{
+        .{ "document.createElement('a').hasAttributes()", "false" },
+        .{ "var fc; (fc = document.createElement('div')).innerHTML = '<script><\\/script>'", null },
+        .{ "fc.outerHTML", "<div><script></script></div>" },
+
+        .{ "fc; (fc = document.createElement('div')).innerHTML = '<script><\\/script><p>hello</p>'", null },
+        .{ "fc.outerHTML", "<div><script></script><p>hello</p></div>" },
+    }, .{});
 }

src/browser/dom/event_target.zig

@@ -23,10 +23,12 @@ const Page = @import("../page.zig").Page;
 const EventHandler = @import("../events/event.zig").EventHandler;
 
 const DOMException = @import("exceptions.zig").DOMException;
-const Nod = @import("node.zig");
+const nod = @import("node.zig");
 
-// EventTarget interfaces
-pub const Union = Nod.Union;
+pub const Union = union(enum) {
+    node: nod.Union,
+    xhr: *@import("../xhr/xhr.zig").XMLHttpRequest,
+};
 
 // EventTarget implementation
 pub const EventTarget = struct {
@@ -39,18 +41,22 @@ pub const EventTarget = struct {
         // The window is a common non-node target, but it's easy to handle as
         // its a singleton.
         if (@intFromPtr(et) == @intFromPtr(&page.window.base)) {
-            return .{ .Window = &page.window };
+            return .{ .node = .{ .Window = &page.window } };
         }
 
         // AbortSignal is another non-node target. It has a distinct usage though
         // so we hijack the event internal type to identity if.
         switch (try parser.eventGetInternalType(e)) {
             .abort_signal => {
-                return .{ .AbortSignal = @fieldParentPtr("proto", @as(*parser.EventTargetTBase, @ptrCast(et))) };
+                return .{ .node = .{ .AbortSignal = @fieldParentPtr("proto", @as(*parser.EventTargetTBase, @ptrCast(et))) } };
+            },
+            .xhr_event => {
+                const XMLHttpRequestEventTarget = @import("../xhr/event_target.zig").XMLHttpRequestEventTarget;
+                const base: *XMLHttpRequestEventTarget = @fieldParentPtr("base", @as(*parser.EventTargetTBase, @ptrCast(et)));
+                return .{ .xhr = @fieldParentPtr("proto", base) };
             },
             else => {
-                // some of these probably need to be special-cased like abort_signal
-                return Nod.Node.toInterface(@as(*parser.Node, @ptrCast(et)));
+                return .{ .node = try nod.Node.toInterface(@as(*parser.Node, @ptrCast(et))) };
             },
         }
     }

src/browser/dom/mutation_observer.zig

@@ -22,6 +22,7 @@ const Allocator = std.mem.Allocator;
 const log = @import("../../log.zig");
 const parser = @import("../netsurf.zig");
 const Page = @import("../page.zig").Page;
+const Loop = @import("../../runtime/loop.zig").Loop;
 
 const Env = @import("../env.zig").Env;
 const NodeList = @import("nodelist.zig").NodeList;
@@ -35,25 +36,37 @@ const Walker = @import("../dom/walker.zig").WalkerChildren;
 
 // WEB IDL https://dom.spec.whatwg.org/#interface-mutationobserver
 pub const MutationObserver = struct {
+    loop: *Loop,
     cbk: Env.Function,
     arena: Allocator,
+    connected: bool,
+    scheduled: bool,
+    loop_node: Loop.CallbackNode,
 
     // List of records which were observed. When the call scope ends, we need to
     // execute our callback with it.
-    observed: std.ArrayListUnmanaged(*MutationRecord),
+    observed: std.ArrayListUnmanaged(MutationRecord),
 
     pub fn constructor(cbk: Env.Function, page: *Page) !MutationObserver {
         return .{
             .cbk = cbk,
+            .loop = page.loop,
             .observed = .{},
+            .connected = true,
+            .scheduled = false,
             .arena = page.arena,
+            .loop_node = .{ .func = callback },
         };
     }
 
-    pub fn _observe(self: *MutationObserver, node: *parser.Node, options_: ?MutationObserverInit) !void {
-        const options = options_ orelse MutationObserverInit{};
+    pub fn _observe(self: *MutationObserver, node: *parser.Node, options_: ?Options) !void {
+        const arena = self.arena;
+        var options = options_ orelse Options{};
+        if (options.attributeFilter.len > 0) {
+            options.attributeFilter = try arena.dupe([]const u8, options.attributeFilter);
+        }
 
-        const observer = try self.arena.create(Observer);
+        const observer = try arena.create(Observer);
         observer.* = .{
             .node = node,
             .options = options,
@@ -102,30 +115,34 @@ pub const MutationObserver = struct {
         }
     }
 
-    pub fn jsCallScopeEnd(self: *MutationObserver) void {
-        const record = self.observed.items;
-        if (record.len == 0) {
+    fn callback(node: *Loop.CallbackNode, _: *?u63) void {
+        const self: *MutationObserver = @fieldParentPtr("loop_node", node);
+        if (self.connected == false) {
+            self.scheduled = true;
+            return;
+        }
+        self.scheduled = false;
+
+        const records = self.observed.items;
+        if (records.len == 0) {
             return;
         }
 
         defer self.observed.clearRetainingCapacity();
 
-        for (record) |r| {
-            const records = [_]MutationRecord{r.*};
-            var result: Env.Function.Result = undefined;
-            self.cbk.tryCall(void, .{records}, &result) catch {
-                log.debug(.user_script, "callback error", .{
-                    .err = result.exception,
-                    .stack = result.stack,
-                    .source = "mutation observer",
-                });
-            };
-        }
+        var result: Env.Function.Result = undefined;
+        self.cbk.tryCall(void, .{records}, &result) catch {
+            log.debug(.user_script, "callback error", .{
+                .err = result.exception,
+                .stack = result.stack,
+                .source = "mutation observer",
+            });
+        };
     }
 
     // TODO
-    pub fn _disconnect(_: *MutationObserver) !void {
-        // TODO unregister listeners.
+    pub fn _disconnect(self: *MutationObserver) !void {
+        self.connected = false;
     }
 
     // TODO
@@ -182,31 +199,27 @@ pub const MutationRecord = struct {
     }
 };
 
-const MutationObserverInit = struct {
+const Options = struct {
     childList: bool = false,
     attributes: bool = false,
     characterData: bool = false,
     subtree: bool = false,
     attributeOldValue: bool = false,
     characterDataOldValue: bool = false,
-    // TODO
-    // attributeFilter: [][]const u8,
+    attributeFilter: [][]const u8 = &.{},
 
-    fn attr(self: MutationObserverInit) bool {
-        return self.attributes or self.attributeOldValue;
+    fn attr(self: Options) bool {
+        return self.attributes or self.attributeOldValue or self.attributeFilter.len > 0;
     }
 
-    fn cdata(self: MutationObserverInit) bool {
+    fn cdata(self: Options) bool {
         return self.characterData or self.characterDataOldValue;
     }
 };
 
 const Observer = struct {
     node: *parser.Node,
-    options: MutationObserverInit,
-
-    // record of the mutation, all observed changes in 1 call are batched
-    record: ?MutationRecord = null,
+    options: Options,
 
     // reference back to the MutationObserver so that we can access the arena
     // and batch the mutation records.
@@ -214,19 +227,34 @@ const Observer = struct {
 
     event_node: parser.EventNode,
 
-    fn appliesTo(o: *const Observer, target: *parser.Node) bool {
+    fn appliesTo(
+        self: *const Observer,
+        target: *parser.Node,
+        event_type: MutationEventType,
+        event: *parser.MutationEvent,
+    ) !bool {
+        if (event_type == .DOMAttrModified and self.options.attributeFilter.len > 0) {
+            const attribute_name = try parser.mutationEventAttributeName(event);
+            for (self.options.attributeFilter) |needle| blk: {
+                if (std.mem.eql(u8, attribute_name, needle)) {
+                    break :blk;
+                }
+            }
+            return false;
+        }
+
         // mutation on any target is always ok.
-        if (o.options.subtree) {
+        if (self.options.subtree) {
             return true;
         }
 
         // if target equals node, alway ok.
-        if (target == o.node) {
+        if (target == self.node) {
             return true;
         }
 
         // no subtree, no same target and no childlist, always noky.
-        if (!o.options.childList) {
+        if (!self.options.childList) {
             return false;
         }
 
@@ -234,7 +262,7 @@ const Observer = struct {
         const walker = Walker{};
         var next: ?*parser.Node = null;
         while (true) {
-            next = walker.get_next(o.node, next) catch break orelse break;
+            next = walker.get_next(self.node, next) catch break orelse break;
             if (next.? == target) {
                 return true;
             }
@@ -258,27 +286,22 @@ const Observer = struct {
             break :blk parser.eventTargetToNode(event_target);
         };
 
-        if (self.appliesTo(node) == false) {
-            return;
-        }
-
+        const mutation_event = parser.eventToMutationEvent(event);
         const event_type = blk: {
             const t = try parser.eventType(event);
             break :blk std.meta.stringToEnum(MutationEventType, t) orelse return;
         };
 
-        const arena = mutation_observer.arena;
-        if (self.record == null) {
-            self.record = .{
-                .target = self.node,
-                .type = event_type.recordType(),
-            };
-            try mutation_observer.observed.append(arena, &self.record.?);
+        if (try self.appliesTo(node, event_type, mutation_event) == false) {
+            return;
         }
 
-        var record = &self.record.?;
-        const mutation_event = parser.eventToMutationEvent(event);
+        var record = MutationRecord{
+            .target = self.node,
+            .type = event_type.recordType(),
+        };
 
+        const arena = mutation_observer.arena;
         switch (event_type) {
             .DOMAttrModified => {
                 record.attribute_name = parser.mutationEventAttributeName(mutation_event) catch null;
@@ -302,6 +325,13 @@ const Observer = struct {
                 }
             },
         }
+
+        try mutation_observer.observed.append(arena, record);
+
+        if (mutation_observer.scheduled == false) {
+            mutation_observer.scheduled = true;
+            _ = try mutation_observer.loop.timeout(0, &mutation_observer.loop_node);
+        }
     }
 };
 
@@ -341,10 +371,10 @@ test "Browser.DOM.MutationObserver" {
             \\ document.firstElementChild.setAttribute("foo", "bar");
             \\ // ignored b/c it's about another target.
             \\ document.firstElementChild.firstChild.setAttribute("foo", "bar");
-            \\ nb;
             ,
-            "1",
+            null,
         },
+        .{ "nb", "1" },
         .{ "mrs[0].type", "attributes" },
         .{ "mrs[0].target == document.firstElementChild", "true" },
         .{ "mrs[0].target.getAttribute('foo')", "bar" },
@@ -362,10 +392,10 @@ test "Browser.DOM.MutationObserver" {
             \\     nb2++;
             \\ }).observe(node, { characterData: true, characterDataOldValue: true });
             \\ node.data = "foo";
-            \\ nb2;
             ,
-            "1",
+            null,
         },
+        .{ "nb2", "1" },
         .{ "mrs2[0].type", "characterData" },
         .{ "mrs2[0].target == node", "true" },
         .{ "mrs2[0].target.data", "foo" },
@@ -383,7 +413,24 @@ test "Browser.DOM.MutationObserver" {
             \\ }).observe(document, { subtree:true,childList:true });
             \\ node.innerText = "2";
             ,
-            "2",
+            null,
         },
+        .{ "node.innerText", "a" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{
+            \\ var node = document.getElementById("para");
+            \\ var attrWatch = 0;
+            \\ new MutationObserver(() => {
+            \\     attrWatch++;
+            \\ }).observe(document, { attributeFilter: ["name"], subtree: true });
+            \\ node.setAttribute("id", "1");
+            ,
+            null,
+        },
+        .{ "attrWatch", "0" },
+        .{ "node.setAttribute('name', 'other');", null },
+        .{ "attrWatch", "1" },
     }, .{});
 }

src/browser/dom/namednodemap.zig

@@ -134,5 +134,7 @@ test "Browser.DOM.NamedNodeMap" {
         .{ "a['id'].name", "id" },
         .{ "a['id'].value", "content" },
         .{ "a['other']", "undefined" },
+        .{ "a[0].value = 'abc123'", null },
+        .{ "a[0].value", "abc123" },
     }, .{});
 }

src/browser/dom/performance.zig

@@ -162,7 +162,7 @@ test "Performance: get_timeOrigin" {
     try testing.expect(time_origin >= 0);
 
     // Check resolution
-    try testing.expectDelta(@rem(time_origin * std.time.us_per_ms, 100.0), 0.0, 0.1);
+    try testing.expectDelta(@rem(time_origin * std.time.us_per_ms, 100.0), 0.0, 0.2);
 }
 
 test "Performance: now" {

src/browser/dom/performance_observer.zig

@@ -17,10 +17,39 @@
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.
 
 const std = @import("std");
+const Env = @import("../env.zig").Env;
+
+const PerformanceEntry = @import("performance.zig").PerformanceEntry;
 
 // https://developer.mozilla.org/en-US/docs/Web/API/PerformanceObserver
 pub const PerformanceObserver = struct {
     pub const _supportedEntryTypes = [0][]const u8{};
+
+    pub fn constructor(cbk: Env.Function) PerformanceObserver {
+        _ = cbk;
+        return .{};
+    }
+
+    pub fn _observe(self: *const PerformanceObserver, options_: ?Options) void {
+        _ = self;
+        _ = options_;
+        return;
+    }
+
+    pub fn _disconnect(self: *PerformanceObserver) void {
+        _ = self;
+    }
+
+    pub fn _takeRecords(_: *const PerformanceObserver) []PerformanceEntry {
+        return &[_]PerformanceEntry{};
+    }
+};
+
+const Options = struct {
+    buffered: ?bool = null,
+    durationThreshold: ?f64 = null,
+    entryTypes: ?[]const []const u8 = null,
+    type: ?[]const u8 = null,
 };
 
 const testing = @import("../../testing.zig");

src/browser/dom/resize_observer.zig

@@ -0,0 +1,54 @@
+// Copyright (C) 2023-2025  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 Env = @import("../env.zig").Env;
+const parser = @import("../netsurf.zig");
+
+pub const Interfaces = .{
+    ResizeObserver,
+};
+
+// WEB IDL https://drafts.csswg.org/resize-observer/#resize-observer-interface
+pub const ResizeObserver = struct {
+    pub fn constructor(cbk: Env.Function) ResizeObserver {
+        _ = cbk;
+        return .{};
+    }
+
+    pub fn _observe(self: *const ResizeObserver, element: *parser.Element, options_: ?Options) void {
+        _ = self;
+        _ = element;
+        _ = options_;
+        return;
+    }
+
+    pub fn _unobserve(self: *const ResizeObserver, element: *parser.Element) void {
+        _ = self;
+        _ = element;
+        return;
+    }
+
+    // TODO
+    pub fn _disconnect(self: *ResizeObserver) void {
+        _ = self;
+    }
+};
+
+const Options = struct {
+    box: []const u8,
+};

src/browser/dom/shadow_root.zig

@@ -0,0 +1,66 @@
+// Copyright (C) 2023-2025  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 Element = @import("element.zig").Element;
+const ElementUnion = @import("element.zig").Union;
+
+// WEB IDL https://dom.spec.whatwg.org/#interface-shadowroot
+pub const ShadowRoot = struct {
+    pub const prototype = *parser.DocumentFragment;
+    pub const subtype = .node;
+
+    mode: Mode,
+    host: *parser.Element,
+    proto: *parser.DocumentFragment,
+
+    pub const Mode = enum {
+        open,
+        closed,
+    };
+
+    pub fn get_host(self: *const ShadowRoot) !ElementUnion {
+        return Element.toInterface(self.host);
+    }
+};
+
+const testing = @import("../../testing.zig");
+test "Browser.DOM.ShadowRoot" {
+    defer testing.reset();
+
+    var runner = try testing.jsRunner(testing.tracking_allocator, .{ .html = "" });
+    defer runner.deinit();
+
+    try runner.testCases(&.{
+        .{ "const div1 = document.createElement('div');", null },
+        .{ "let sr1 = div1.attachShadow({mode: 'open'})", null },
+        .{ "sr1.host == div1", "true" },
+        .{ "div1.attachShadow({mode: 'open'}) == sr1", "true" },
+        .{ "div1.shadowRoot == sr1", "true" },
+
+        .{ "try { div1.attachShadow({mode: 'closed'}) } catch (e) { e }", "Error: NotSupportedError" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "const div2 = document.createElement('di2');", null },
+        .{ "let sr2 = div2.attachShadow({mode: 'closed'})", null },
+        .{ "sr2.host == div2", "true" },
+        .{ "div2.shadowRoot", "null" }, // null when attached with 'closed'
+    }, .{});
+}

src/browser/env.zig

@@ -25,6 +25,7 @@ const WebApis = struct {
         @import("css/css.zig").Interfaces,
         @import("cssom/cssom.zig").Interfaces,
         @import("dom/dom.zig").Interfaces,
+        @import("dom/shadow_root.zig").ShadowRoot,
         @import("encoding/text_encoder.zig").Interfaces,
         @import("events/event.zig").Interfaces,
         @import("html/html.zig").Interfaces,
@@ -34,7 +35,6 @@ const WebApis = struct {
         @import("xhr/xhr.zig").Interfaces,
         @import("xhr/form_data.zig").Interfaces,
         @import("xmlserializer/xmlserializer.zig").Interfaces,
-        @import("webcomponents/webcomponents.zig").Interfaces,
     });
 };
 

src/browser/events/event.zig

@@ -27,6 +27,7 @@ const Page = @import("../page.zig").Page;
 const DOMException = @import("../dom/exceptions.zig").DOMException;
 const EventTarget = @import("../dom/event_target.zig").EventTarget;
 const EventTargetUnion = @import("../dom/event_target.zig").Union;
+const AbortSignal = @import("../html/AbortController.zig").AbortSignal;
 
 const CustomEvent = @import("custom_event.zig").CustomEvent;
 const ProgressEvent = @import("../xhr/progress_event.zig").ProgressEvent;
@@ -54,7 +55,7 @@ pub const Event = struct {
 
     pub fn toInterface(evt: *parser.Event) !Union {
         return switch (try parser.eventGetInternalType(evt)) {
-            .event, .abort_signal => .{ .Event = evt },
+            .event, .abort_signal, .xhr_event => .{ .Event = evt },
             .custom_event => .{ .CustomEvent = @as(*CustomEvent, @ptrCast(evt)).* },
             .progress_event => .{ .ProgressEvent = @as(*ProgressEvent, @ptrCast(evt)).* },
             .mouse_event => .{ .MouseEvent = @as(*parser.MouseEvent, @ptrCast(evt)) },
@@ -175,7 +176,7 @@ pub const EventHandler = struct {
             // that the listener won't call preventDefault() and thus can safely
             // run the default as needed).
             passive: ?bool,
-            signal: ?bool, // currently does nothing
+            signal: ?*AbortSignal, // currently does nothing
         };
     };
 
@@ -188,18 +189,14 @@ pub const EventHandler = struct {
     ) !?*EventHandler {
         var once = false;
         var capture = false;
+        var signal: ?*AbortSignal = null;
+
         if (opts_) |opts| {
             switch (opts) {
                 .capture => |c| capture = c,
                 .flags => |f| {
-                    // Done this way so that, for common cases that _only_ set
-                    // capture, i.e. {captrue: true}, it works.
-                    // But for any case that sets any of the other flags, we
-                    // error. If we don't error, this function call would succeed
-                    // but the behavior might be wrong. At this point, it's
-                    // better to be explicit and error.
-                    if (f.signal orelse false) return error.NotImplemented;
                     once = f.once orelse false;
+                    signal = f.signal orelse null;
                     capture = f.capture orelse false;
                 },
             }
@@ -207,6 +204,28 @@ pub const EventHandler = struct {
 
         const callback = (try listener.callback(target)) orelse return null;
 
+        if (signal) |s| {
+            const signal_target = parser.toEventTarget(AbortSignal, s);
+
+            const scb = try allocator.create(SignalCallback);
+            scb.* = .{
+                .target = target,
+                .capture = capture,
+                .callback_id = callback.id,
+                .typ = try allocator.dupe(u8, typ),
+                .signal_target = signal_target,
+                .signal_listener = undefined,
+                .node = .{ .func = SignalCallback.handle },
+            };
+
+            scb.signal_listener = try parser.eventTargetAddEventListener(
+                signal_target,
+                "abort",
+                &scb.node,
+                false,
+            );
+        }
+
         // check if event target has already this listener
         if (try parser.eventTargetHasListener(target, typ, capture, callback.id) != null) {
             return null;
@@ -262,6 +281,50 @@ pub const EventHandler = struct {
     }
 };
 
+const SignalCallback = struct {
+    typ: []const u8,
+    capture: bool,
+    callback_id: usize,
+    node: parser.EventNode,
+    target: *parser.EventTarget,
+    signal_target: *parser.EventTarget,
+    signal_listener: *parser.EventListener,
+
+    fn handle(node: *parser.EventNode, _: *parser.Event) void {
+        const self: *SignalCallback = @fieldParentPtr("node", node);
+        self._handle() catch |err| {
+            log.err(.app, "event signal handler", .{ .err = err });
+        };
+    }
+
+    fn _handle(self: *SignalCallback) !void {
+        const lst = try parser.eventTargetHasListener(
+            self.target,
+            self.typ,
+            self.capture,
+            self.callback_id,
+        );
+        if (lst == null) {
+            return;
+        }
+
+        try parser.eventTargetRemoveEventListener(
+            self.target,
+            self.typ,
+            lst.?,
+            self.capture,
+        );
+
+        // remove the abort signal listener itself
+        try parser.eventTargetRemoveEventListener(
+            self.signal_target,
+            "abort",
+            self.signal_listener,
+            false,
+        );
+    }
+};
+
 const testing = @import("../../testing.zig");
 test "Browser.Event" {
     var runner = try testing.jsRunner(testing.tracking_allocator, .{});
@@ -367,5 +430,18 @@ test "Browser.Event" {
         .{ "document.dispatchEvent(new Event('count'))", "true" },
         .{ "document.dispatchEvent(new Event('count'))", "true" },
         .{ "nb", "1" },
+        .{ "document.removeEventListener('count', cbk)", "undefined" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "nb = 0; function cbk(event) { nb ++; }", null },
+        .{ "let ac = new AbortController()", null },
+        .{ "document.addEventListener('count', cbk, {signal: ac.signal})", null },
+        .{ "document.dispatchEvent(new Event('count'))", "true" },
+        .{ "document.dispatchEvent(new Event('count'))", "true" },
+        .{ "ac.abort()", null },
+        .{ "document.dispatchEvent(new Event('count'))", "true" },
+        .{ "nb", "2" },
+        .{ "document.removeEventListener('count', cbk)", "undefined" },
     }, .{});
 }

src/browser/html/document.zig

@@ -42,8 +42,12 @@ pub const HTMLDocument = struct {
     // JS funcs
     // --------
 
-    pub fn get_domain(self: *parser.DocumentHTML) ![]const u8 {
-        return try parser.documentHTMLGetDomain(self);
+    pub fn get_domain(self: *parser.DocumentHTML, page: *Page) ![]const u8 {
+        // libdom's document_html get_domain always returns null, this is
+        // the way MDN recommends getting the domain anyways, since document.domain
+        // is deprecated.
+        const location = try parser.documentHTMLGetLocation(Location, self) orelse return "";
+        return location.get_host(page);
     }
 
     pub fn set_domain(_: *parser.DocumentHTML, _: []const u8) ![]const u8 {
@@ -233,19 +237,23 @@ pub const HTMLDocument = struct {
     // Since LightPanda requires the client to know what they are clicking on we do not return the underlying element at this moment
     // This can currenty only happen if the first pixel is clicked without having rendered any element. This will change when css properties are supported.
     // This returns an ElementUnion instead of a *Parser.Element in case the element somehow hasn't passed through the js runtime yet.
-    pub fn _elementFromPoint(_: *parser.DocumentHTML, x: f32, y: f32, page: *Page) !?ElementUnion {
-        const ix: i32 = @intFromFloat(@floor(x));
-        const iy: i32 = @intFromFloat(@floor(y));
-        const element = page.renderer.getElementAtPosition(ix, iy) orelse return null;
+    // While x and y should be f32, here we take i32 since that's what our
+    // "renderer" uses. By specifying i32 here, rather than f32 and doing the
+    // conversion ourself, we rely on v8's type conversion which is both more
+    // flexible (e.g. handles NaN) and will be more consistent with a browser.
+    pub fn _elementFromPoint(_: *parser.DocumentHTML, x: i32, y: i32, page: *Page) !?ElementUnion {
+        const element = page.renderer.getElementAtPosition(x, y) orelse return null;
         // TODO if pointer-events set to none the underlying element should be returned (parser.documentGetDocumentElement(self.document);?)
         return try Element.toInterface(element);
     }
 
     // Returns an array of all elements at the specified coordinates (relative to the viewport). The elements are ordered from the topmost to the bottommost box of the viewport.
-    pub fn _elementsFromPoint(_: *parser.DocumentHTML, x: f32, y: f32, page: *Page) ![]ElementUnion {
-        const ix: i32 = @intFromFloat(@floor(x));
-        const iy: i32 = @intFromFloat(@floor(y));
-        const element = page.renderer.getElementAtPosition(ix, iy) orelse return &.{};
+    // While x and y should be f32, here we take i32 since that's what our
+    // "renderer" uses. By specifying i32 here, rather than f32 and doing the
+    // conversion ourself, we rely on v8's type conversion which is both more
+    // flexible (e.g. handles NaN) and will be more consistent with a browser.
+    pub fn _elementsFromPoint(_: *parser.DocumentHTML, x: i32, y: i32, page: *Page) ![]ElementUnion {
+        const element = page.renderer.getElementAtPosition(x, y) orelse return &.{};
         // TODO if pointer-events set to none the underlying element should be returned (parser.documentGetDocumentElement(self.document);?)
 
         var list: std.ArrayListUnmanaged(ElementUnion) = .empty;
@@ -303,7 +311,7 @@ test "Browser.HTML.Document" {
     }, .{});
 
     try runner.testCases(&.{
-        .{ "document.domain", "" },
+        .{ "document.domain", "lightpanda.io" },
         .{ "document.referrer", "" },
         .{ "document.title", "" },
         .{ "document.body.localName", "body" },

src/browser/html/elements.zig

@@ -114,10 +114,6 @@ pub const HTMLElement = struct {
     pub const prototype = *Element;
     pub const subtype = .node;
 
-    pub fn constructor(page: *Page, js_this: Env.JsThis) !*parser.Element {
-        return constructHtmlElement(page, js_this);
-    }
-
     pub fn get_style(e: *parser.ElementHTML, page: *Page) !*CSSStyleDeclaration {
         const state = try page.getOrCreateNodeState(@ptrCast(e));
         return &state.style;
@@ -189,10 +185,6 @@ pub const HTMLMediaElement = struct {
     pub const Self = parser.MediaElement;
     pub const prototype = *HTMLElement;
     pub const subtype = .node;
-
-    pub fn constructor(page: *Page, js_this: Env.JsThis) !*parser.Element {
-        return constructHtmlElement(page, js_this);
-    }
 };
 
 // HTML elements
@@ -202,10 +194,6 @@ pub const HTMLUnknownElement = struct {
     pub const Self = parser.Unknown;
     pub const prototype = *HTMLElement;
     pub const subtype = .node;
-
-    pub fn constructor(page: *Page, js_this: Env.JsThis) !*parser.Element {
-        return constructHtmlElement(page, js_this);
-    }
 };
 
 // https://html.spec.whatwg.org/#the-a-element
@@ -214,10 +202,6 @@ pub const HTMLAnchorElement = struct {
     pub const prototype = *HTMLElement;
     pub const subtype = .node;
 
-    pub fn constructor(page: *Page, js_this: Env.JsThis) !*parser.Element {
-        return constructHtmlElement(page, js_this);
-    }
-
     pub fn get_target(self: *parser.Anchor) ![]const u8 {
         return try parser.anchorGetTarget(self);
     }
@@ -271,8 +255,18 @@ pub const HTMLAnchorElement = struct {
         return try parser.nodeSetTextContent(parser.anchorToNode(self), v);
     }
 
-    inline fn url(self: *parser.Anchor, page: *Page) !URL {
-        return URL.constructor(.{ .element = @alignCast(@ptrCast(self)) }, null, page); // TODO inject base url
+    fn url(self: *parser.Anchor, page: *Page) !URL {
+        // Although the URL.constructor union accepts an .{.element = X}, we
+        // can't use this here because the behavior is different.
+        //    URL.constructor(document.createElement('a')
+        // should fail (a.href isn't a valid URL)
+        // But
+        //     document.createElement('a').host
+        // should not fail, it should return an empty string
+        if (try parser.elementGetAttribute(@alignCast(@ptrCast(self)), "href")) |href| {
+            return URL.constructor(.{ .string = href }, null, page); // TODO inject base url
+        }
+        return .empty;
     }
 
     // TODO return a disposable string
@@ -455,240 +449,144 @@ pub const HTMLAppletElement = struct {
     pub const Self = parser.Applet;
     pub const prototype = *HTMLElement;
     pub const subtype = .node;
-
-    pub fn constructor(page: *Page, js_this: Env.JsThis) !*parser.Element {
-        return constructHtmlElement(page, js_this);
-    }
 };
 
 pub const HTMLAreaElement = struct {
     pub const Self = parser.Area;
     pub const prototype = *HTMLElement;
     pub const subtype = .node;
-
-    pub fn constructor(page: *Page, js_this: Env.JsThis) !*parser.Element {
-        return constructHtmlElement(page, js_this);
-    }
 };
 
 pub const HTMLAudioElement = struct {
     pub const Self = parser.Audio;
     pub const prototype = *HTMLMediaElement;
     pub const subtype = .node;
-
-    pub fn constructor(page: *Page, js_this: Env.JsThis) !*parser.Element {
-        return constructHtmlElement(page, js_this);
-    }
 };
 
 pub const HTMLBRElement = struct {
     pub const Self = parser.BR;
     pub const prototype = *HTMLElement;
     pub const subtype = .node;
-
-    pub fn constructor(page: *Page, js_this: Env.JsThis) !*parser.Element {
-        return constructHtmlElement(page, js_this);
-    }
 };
 
 pub const HTMLBaseElement = struct {
     pub const Self = parser.Base;
     pub const prototype = *HTMLElement;
     pub const subtype = .node;
-
-    pub fn constructor(page: *Page, js_this: Env.JsThis) !*parser.Element {
-        return constructHtmlElement(page, js_this);
-    }
 };
 
 pub const HTMLBodyElement = struct {
     pub const Self = parser.Body;
     pub const prototype = *HTMLElement;
     pub const subtype = .node;
-
-    pub fn constructor(page: *Page, js_this: Env.JsThis) !*parser.Element {
-        return constructHtmlElement(page, js_this);
-    }
 };
 
 pub const HTMLButtonElement = struct {
     pub const Self = parser.Button;
     pub const prototype = *HTMLElement;
     pub const subtype = .node;
-
-    pub fn constructor(page: *Page, js_this: Env.JsThis) !*parser.Element {
-        return constructHtmlElement(page, js_this);
-    }
 };
 
 pub const HTMLCanvasElement = struct {
     pub const Self = parser.Canvas;
     pub const prototype = *HTMLElement;
     pub const subtype = .node;
-
-    pub fn constructor(page: *Page, js_this: Env.JsThis) !*parser.Element {
-        return constructHtmlElement(page, js_this);
-    }
 };
 
 pub const HTMLDListElement = struct {
     pub const Self = parser.DList;
     pub const prototype = *HTMLElement;
     pub const subtype = .node;
-
-    pub fn constructor(page: *Page, js_this: Env.JsThis) !*parser.Element {
-        return constructHtmlElement(page, js_this);
-    }
 };
 
 pub const HTMLDataElement = struct {
     pub const Self = parser.Data;
     pub const prototype = *HTMLElement;
     pub const subtype = .node;
-
-    pub fn constructor(page: *Page, js_this: Env.JsThis) !*parser.Element {
-        return constructHtmlElement(page, js_this);
-    }
 };
 
 pub const HTMLDataListElement = struct {
     pub const Self = parser.DataList;
     pub const prototype = *HTMLElement;
     pub const subtype = .node;
-
-    pub fn constructor(page: *Page, js_this: Env.JsThis) !*parser.Element {
-        return constructHtmlElement(page, js_this);
-    }
 };
 
 pub const HTMLDialogElement = struct {
     pub const Self = parser.Dialog;
     pub const prototype = *HTMLElement;
     pub const subtype = .node;
-
-    pub fn constructor(page: *Page, js_this: Env.JsThis) !*parser.Element {
-        return constructHtmlElement(page, js_this);
-    }
 };
 
 pub const HTMLDirectoryElement = struct {
     pub const Self = parser.Directory;
     pub const prototype = *HTMLElement;
     pub const subtype = .node;
-
-    pub fn constructor(page: *Page, js_this: Env.JsThis) !*parser.Element {
-        return constructHtmlElement(page, js_this);
-    }
 };
 
 pub const HTMLDivElement = struct {
     pub const Self = parser.Div;
     pub const prototype = *HTMLElement;
     pub const subtype = .node;
-
-    pub fn constructor(page: *Page, js_this: Env.JsThis) !*parser.Element {
-        return constructHtmlElement(page, js_this);
-    }
 };
 
 pub const HTMLEmbedElement = struct {
     pub const Self = parser.Embed;
     pub const prototype = *HTMLElement;
     pub const subtype = .node;
-
-    pub fn constructor(page: *Page, js_this: Env.JsThis) !*parser.Element {
-        return constructHtmlElement(page, js_this);
-    }
 };
 
 pub const HTMLFieldSetElement = struct {
     pub const Self = parser.FieldSet;
     pub const prototype = *HTMLElement;
     pub const subtype = .node;
-
-    pub fn constructor(page: *Page, js_this: Env.JsThis) !*parser.Element {
-        return constructHtmlElement(page, js_this);
-    }
 };
 
 pub const HTMLFontElement = struct {
     pub const Self = parser.Font;
     pub const prototype = *HTMLElement;
     pub const subtype = .node;
-
-    pub fn constructor(page: *Page, js_this: Env.JsThis) !*parser.Element {
-        return constructHtmlElement(page, js_this);
-    }
 };
 
 pub const HTMLFrameElement = struct {
     pub const Self = parser.Frame;
     pub const prototype = *HTMLElement;
     pub const subtype = .node;
-
-    pub fn constructor(page: *Page, js_this: Env.JsThis) !*parser.Element {
-        return constructHtmlElement(page, js_this);
-    }
 };
 
 pub const HTMLFrameSetElement = struct {
     pub const Self = parser.FrameSet;
     pub const prototype = *HTMLElement;
     pub const subtype = .node;
-
-    pub fn constructor(page: *Page, js_this: Env.JsThis) !*parser.Element {
-        return constructHtmlElement(page, js_this);
-    }
 };
 
 pub const HTMLHRElement = struct {
     pub const Self = parser.HR;
     pub const prototype = *HTMLElement;
     pub const subtype = .node;
-
-    pub fn constructor(page: *Page, js_this: Env.JsThis) !*parser.Element {
-        return constructHtmlElement(page, js_this);
-    }
 };
 
 pub const HTMLHeadElement = struct {
     pub const Self = parser.Head;
     pub const prototype = *HTMLElement;
     pub const subtype = .node;
-
-    pub fn constructor(page: *Page, js_this: Env.JsThis) !*parser.Element {
-        return constructHtmlElement(page, js_this);
-    }
 };
 
 pub const HTMLHeadingElement = struct {
     pub const Self = parser.Heading;
     pub const prototype = *HTMLElement;
     pub const subtype = .node;
-
-    pub fn constructor(page: *Page, js_this: Env.JsThis) !*parser.Element {
-        return constructHtmlElement(page, js_this);
-    }
 };
 
 pub const HTMLHtmlElement = struct {
     pub const Self = parser.Html;
     pub const prototype = *HTMLElement;
     pub const subtype = .node;
-
-    pub fn constructor(page: *Page, js_this: Env.JsThis) !*parser.Element {
-        return constructHtmlElement(page, js_this);
-    }
 };
 
 pub const HTMLIFrameElement = struct {
     pub const Self = parser.IFrame;
     pub const prototype = *HTMLElement;
     pub const subtype = .node;
-
-    pub fn constructor(page: *Page, js_this: Env.JsThis) !*parser.Element {
-        return constructHtmlElement(page, js_this);
-    }
 };
 
 pub const HTMLImageElement = struct {
@@ -696,10 +594,6 @@ pub const HTMLImageElement = struct {
     pub const prototype = *HTMLElement;
     pub const subtype = .node;
 
-    pub fn constructor(page: *Page, js_this: Env.JsThis) !*parser.Element {
-        return constructHtmlElement(page, js_this);
-    }
-
     pub fn get_alt(self: *parser.Image) ![]const u8 {
         return try parser.imageGetAlt(self);
     }
@@ -759,10 +653,6 @@ pub const HTMLInputElement = struct {
     pub const prototype = *HTMLElement;
     pub const subtype = .node;
 
-    pub fn constructor(page: *Page, js_this: Env.JsThis) !*parser.Element {
-        return constructHtmlElement(page, js_this);
-    }
-
     pub fn get_defaultValue(self: *parser.Input) ![]const u8 {
         return try parser.inputGetDefaultValue(self);
     }
@@ -851,30 +741,18 @@ pub const HTMLLIElement = struct {
     pub const Self = parser.LI;
     pub const prototype = *HTMLElement;
     pub const subtype = .node;
-
-    pub fn constructor(page: *Page, js_this: Env.JsThis) !*parser.Element {
-        return constructHtmlElement(page, js_this);
-    }
 };
 
 pub const HTMLLabelElement = struct {
     pub const Self = parser.Label;
     pub const prototype = *HTMLElement;
     pub const subtype = .node;
-
-    pub fn constructor(page: *Page, js_this: Env.JsThis) !*parser.Element {
-        return constructHtmlElement(page, js_this);
-    }
 };
 
 pub const HTMLLegendElement = struct {
     pub const Self = parser.Legend;
     pub const prototype = *HTMLElement;
     pub const subtype = .node;
-
-    pub fn constructor(page: *Page, js_this: Env.JsThis) !*parser.Element {
-        return constructHtmlElement(page, js_this);
-    }
 };
 
 pub const HTMLLinkElement = struct {
@@ -882,8 +760,13 @@ pub const HTMLLinkElement = struct {
     pub const prototype = *HTMLElement;
     pub const subtype = .node;
 
-    pub fn constructor(page: *Page, js_this: Env.JsThis) !*parser.Element {
-        return constructHtmlElement(page, js_this);
+    pub fn get_href(self: *parser.Link) ![]const u8 {
+        return try parser.linkGetHref(self);
+    }
+
+    pub fn set_href(self: *parser.Link, href: []const u8, page: *const Page) !void {
+        const full = try urlStitch(page.call_arena, href, page.url.raw, .{});
+        return try parser.linkSetHref(self, full);
     }
 };
 
@@ -891,150 +774,90 @@ pub const HTMLMapElement = struct {
     pub const Self = parser.Map;
     pub const prototype = *HTMLElement;
     pub const subtype = .node;
-
-    pub fn constructor(page: *Page, js_this: Env.JsThis) !*parser.Element {
-        return constructHtmlElement(page, js_this);
-    }
 };
 
 pub const HTMLMetaElement = struct {
     pub const Self = parser.Meta;
     pub const prototype = *HTMLElement;
     pub const subtype = .node;
-
-    pub fn constructor(page: *Page, js_this: Env.JsThis) !*parser.Element {
-        return constructHtmlElement(page, js_this);
-    }
 };
 
 pub const HTMLMeterElement = struct {
     pub const Self = parser.Meter;
     pub const prototype = *HTMLElement;
     pub const subtype = .node;
-
-    pub fn constructor(page: *Page, js_this: Env.JsThis) !*parser.Element {
-        return constructHtmlElement(page, js_this);
-    }
 };
 
 pub const HTMLModElement = struct {
     pub const Self = parser.Mod;
     pub const prototype = *HTMLElement;
     pub const subtype = .node;
-
-    pub fn constructor(page: *Page, js_this: Env.JsThis) !*parser.Element {
-        return constructHtmlElement(page, js_this);
-    }
 };
 
 pub const HTMLOListElement = struct {
     pub const Self = parser.OList;
     pub const prototype = *HTMLElement;
     pub const subtype = .node;
-
-    pub fn constructor(page: *Page, js_this: Env.JsThis) !*parser.Element {
-        return constructHtmlElement(page, js_this);
-    }
 };
 
 pub const HTMLObjectElement = struct {
     pub const Self = parser.Object;
     pub const prototype = *HTMLElement;
     pub const subtype = .node;
-
-    pub fn constructor(page: *Page, js_this: Env.JsThis) !*parser.Element {
-        return constructHtmlElement(page, js_this);
-    }
 };
 
 pub const HTMLOptGroupElement = struct {
     pub const Self = parser.OptGroup;
     pub const prototype = *HTMLElement;
     pub const subtype = .node;
-
-    pub fn constructor(page: *Page, js_this: Env.JsThis) !*parser.Element {
-        return constructHtmlElement(page, js_this);
-    }
 };
 
 pub const HTMLOptionElement = struct {
     pub const Self = parser.Option;
     pub const prototype = *HTMLElement;
     pub const subtype = .node;
-
-    pub fn constructor(page: *Page, js_this: Env.JsThis) !*parser.Element {
-        return constructHtmlElement(page, js_this);
-    }
 };
 
 pub const HTMLOutputElement = struct {
     pub const Self = parser.Output;
     pub const prototype = *HTMLElement;
     pub const subtype = .node;
-
-    pub fn constructor(page: *Page, js_this: Env.JsThis) !*parser.Element {
-        return constructHtmlElement(page, js_this);
-    }
 };
 
 pub const HTMLParagraphElement = struct {
     pub const Self = parser.Paragraph;
     pub const prototype = *HTMLElement;
     pub const subtype = .node;
-
-    pub fn constructor(page: *Page, js_this: Env.JsThis) !*parser.Element {
-        return constructHtmlElement(page, js_this);
-    }
 };
 
 pub const HTMLParamElement = struct {
     pub const Self = parser.Param;
     pub const prototype = *HTMLElement;
     pub const subtype = .node;
-
-    pub fn constructor(page: *Page, js_this: Env.JsThis) !*parser.Element {
-        return constructHtmlElement(page, js_this);
-    }
 };
 
 pub const HTMLPictureElement = struct {
     pub const Self = parser.Picture;
     pub const prototype = *HTMLElement;
     pub const subtype = .node;
-
-    pub fn constructor(page: *Page, js_this: Env.JsThis) !*parser.Element {
-        return constructHtmlElement(page, js_this);
-    }
 };
 
 pub const HTMLPreElement = struct {
     pub const Self = parser.Pre;
     pub const prototype = *HTMLElement;
     pub const subtype = .node;
-
-    pub fn constructor(page: *Page, js_this: Env.JsThis) !*parser.Element {
-        return constructHtmlElement(page, js_this);
-    }
 };
 
 pub const HTMLProgressElement = struct {
     pub const Self = parser.Progress;
     pub const prototype = *HTMLElement;
     pub const subtype = .node;
-
-    pub fn constructor(page: *Page, js_this: Env.JsThis) !*parser.Element {
-        return constructHtmlElement(page, js_this);
-    }
 };
 
 pub const HTMLQuoteElement = struct {
     pub const Self = parser.Quote;
     pub const prototype = *HTMLElement;
     pub const subtype = .node;
-
-    pub fn constructor(page: *Page, js_this: Env.JsThis) !*parser.Element {
-        return constructHtmlElement(page, js_this);
-    }
 };
 
 // https://html.spec.whatwg.org/#the-script-element
@@ -1043,10 +866,6 @@ pub const HTMLScriptElement = struct {
     pub const prototype = *HTMLElement;
     pub const subtype = .node;
 
-    pub fn constructor(page: *Page, js_this: Env.JsThis) !*parser.Element {
-        return constructHtmlElement(page, js_this);
-    }
-
     pub fn get_src(self: *parser.Script) !?[]const u8 {
         return try parser.elementGetAttribute(
             parser.scriptToElt(self),
@@ -1181,90 +1000,54 @@ pub const HTMLSourceElement = struct {
     pub const Self = parser.Source;
     pub const prototype = *HTMLElement;
     pub const subtype = .node;
-
-    pub fn constructor(page: *Page, js_this: Env.JsThis) !*parser.Element {
-        return constructHtmlElement(page, js_this);
-    }
 };
 
 pub const HTMLSpanElement = struct {
     pub const Self = parser.Span;
     pub const prototype = *HTMLElement;
     pub const subtype = .node;
-
-    pub fn constructor(page: *Page, js_this: Env.JsThis) !*parser.Element {
-        return constructHtmlElement(page, js_this);
-    }
 };
 
 pub const HTMLStyleElement = struct {
     pub const Self = parser.Style;
     pub const prototype = *HTMLElement;
     pub const subtype = .node;
-
-    pub fn constructor(page: *Page, js_this: Env.JsThis) !*parser.Element {
-        return constructHtmlElement(page, js_this);
-    }
 };
 
 pub const HTMLTableElement = struct {
     pub const Self = parser.Table;
     pub const prototype = *HTMLElement;
     pub const subtype = .node;
-
-    pub fn constructor(page: *Page, js_this: Env.JsThis) !*parser.Element {
-        return constructHtmlElement(page, js_this);
-    }
 };
 
 pub const HTMLTableCaptionElement = struct {
     pub const Self = parser.TableCaption;
     pub const prototype = *HTMLElement;
     pub const subtype = .node;
-
-    pub fn constructor(page: *Page, js_this: Env.JsThis) !*parser.Element {
-        return constructHtmlElement(page, js_this);
-    }
 };
 
 pub const HTMLTableCellElement = struct {
     pub const Self = parser.TableCell;
     pub const prototype = *HTMLElement;
     pub const subtype = .node;
-
-    pub fn constructor(page: *Page, js_this: Env.JsThis) !*parser.Element {
-        return constructHtmlElement(page, js_this);
-    }
 };
 
 pub const HTMLTableColElement = struct {
     pub const Self = parser.TableCol;
     pub const prototype = *HTMLElement;
     pub const subtype = .node;
-
-    pub fn constructor(page: *Page, js_this: Env.JsThis) !*parser.Element {
-        return constructHtmlElement(page, js_this);
-    }
 };
 
 pub const HTMLTableRowElement = struct {
     pub const Self = parser.TableRow;
     pub const prototype = *HTMLElement;
     pub const subtype = .node;
-
-    pub fn constructor(page: *Page, js_this: Env.JsThis) !*parser.Element {
-        return constructHtmlElement(page, js_this);
-    }
 };
 
 pub const HTMLTableSectionElement = struct {
     pub const Self = parser.TableSection;
     pub const prototype = *HTMLElement;
     pub const subtype = .node;
-
-    pub fn constructor(page: *Page, js_this: Env.JsThis) !*parser.Element {
-        return constructHtmlElement(page, js_this);
-    }
 };
 
 pub const HTMLTemplateElement = struct {
@@ -1272,10 +1055,6 @@ pub const HTMLTemplateElement = struct {
     pub const prototype = *HTMLElement;
     pub const subtype = .node;
 
-    pub fn constructor(page: *Page, js_this: Env.JsThis) !*parser.Element {
-        return constructHtmlElement(page, js_this);
-    }
-
     pub fn get_content(self: *parser.Template, page: *Page) !*parser.DocumentFragment {
         const state = try page.getOrCreateNodeState(@alignCast(@ptrCast(self)));
         if (state.template_content) |tc| {
@@ -1291,60 +1070,36 @@ pub const HTMLTextAreaElement = struct {
     pub const Self = parser.TextArea;
     pub const prototype = *HTMLElement;
     pub const subtype = .node;
-
-    pub fn constructor(page: *Page, js_this: Env.JsThis) !*parser.Element {
-        return constructHtmlElement(page, js_this);
-    }
 };
 
 pub const HTMLTimeElement = struct {
     pub const Self = parser.Time;
     pub const prototype = *HTMLElement;
     pub const subtype = .node;
-
-    pub fn constructor(page: *Page, js_this: Env.JsThis) !*parser.Element {
-        return constructHtmlElement(page, js_this);
-    }
 };
 
 pub const HTMLTitleElement = struct {
     pub const Self = parser.Title;
     pub const prototype = *HTMLElement;
     pub const subtype = .node;
-
-    pub fn constructor(page: *Page, js_this: Env.JsThis) !*parser.Element {
-        return constructHtmlElement(page, js_this);
-    }
 };
 
 pub const HTMLTrackElement = struct {
     pub const Self = parser.Track;
     pub const prototype = *HTMLElement;
     pub const subtype = .node;
-
-    pub fn constructor(page: *Page, js_this: Env.JsThis) !*parser.Element {
-        return constructHtmlElement(page, js_this);
-    }
 };
 
 pub const HTMLUListElement = struct {
     pub const Self = parser.UList;
     pub const prototype = *HTMLElement;
     pub const subtype = .node;
-
-    pub fn constructor(page: *Page, js_this: Env.JsThis) !*parser.Element {
-        return constructHtmlElement(page, js_this);
-    }
 };
 
 pub const HTMLVideoElement = struct {
     pub const Self = parser.Video;
     pub const prototype = *HTMLElement;
     pub const subtype = .node;
-
-    pub fn constructor(page: *Page, js_this: Env.JsThis) !*parser.Element {
-        return constructHtmlElement(page, js_this);
-    }
 };
 
 pub fn toInterface(comptime T: type, e: *parser.Element) !T {
@@ -1422,16 +1177,6 @@ pub fn toInterface(comptime T: type, e: *parser.Element) !T {
     };
 }
 
-fn constructHtmlElement(page: *Page, js_this: Env.JsThis) !*parser.Element {
-    const constructor_name = try js_this.constructorName(page.call_arena);
-    if (!page.window.custom_elements.lookup.contains(constructor_name)) {
-        return error.IllegalContructor;
-    }
-
-    const el = try parser.documentCreateElement(@ptrCast(page.window.document), constructor_name);
-    return el;
-}
-
 const testing = @import("../../testing.zig");
 test "Browser.HTML.Element" {
     var runner = try testing.jsRunner(testing.tracking_allocator, .{});
@@ -1559,6 +1304,8 @@ test "Browser.HTML.Element" {
 
     try runner.testCases(&.{
         .{ "let a = document.createElement('a');", null },
+        .{ "a.href", "" },
+        .{ "a.host", "" },
         .{ "a.href = 'about'", null },
         .{ "a.href", "https://lightpanda.io/opensource-browser/about" },
     }, .{});
@@ -1569,6 +1316,16 @@ test "Browser.HTML.Element" {
         .{ "document.createElement('a').focus()", null },
         .{ "document.activeElement === focused", "true" },
     }, .{});
+
+    try runner.testCases(&.{
+        .{ "let l2 = document.createElement('link');", null },
+        .{ "l2.href", "" },
+        .{ "l2.href = 'https://lightpanda.io/opensource-browser/15'", null },
+        .{ "l2.href", "https://lightpanda.io/opensource-browser/15" },
+
+        .{ "l2.href = '/over/9000'", null },
+        .{ "l2.href", "https://lightpanda.io/over/9000" },
+    }, .{});
 }
 
 test "Browser.HTML.Element.DataSet" {

src/browser/html/window.zig

@@ -33,7 +33,6 @@ const EventTarget = @import("../dom/event_target.zig").EventTarget;
 const MediaQueryList = @import("media_query_list.zig").MediaQueryList;
 const Performance = @import("../dom/performance.zig").Performance;
 const CSSStyleDeclaration = @import("../cssom/css_style_declaration.zig").CSSStyleDeclaration;
-const CustomElementRegistry = @import("../webcomponents/custom_element_registry.zig").CustomElementRegistry;
 const Screen = @import("screen.zig").Screen;
 const Css = @import("../css/css.zig").Css;
 
@@ -61,7 +60,6 @@ pub const Window = struct {
     console: Console = .{},
     navigator: Navigator = .{},
     performance: Performance,
-    custom_elements: CustomElementRegistry = .{},
     screen: Screen = .{},
     css: Css = .{},
 
@@ -169,10 +167,6 @@ pub const Window = struct {
         return &self.performance;
     }
 
-    pub fn get_customElements(self: *Window) *CustomElementRegistry {
-        return &self.custom_elements;
-    }
-
     pub fn get_screen(self: *Window) *Screen {
         return &self.screen;
     }
@@ -298,9 +292,31 @@ pub const Window = struct {
             behavior: []const u8,
         };
     };
-    pub fn _scrollTo(_: *const Window, opts: ScrollToOpts, y: ?u32) void {
+    pub fn _scrollTo(self: *Window, opts: ScrollToOpts, y: ?u32) !void {
         _ = opts;
         _ = y;
+
+        {
+            const scroll_event = try parser.eventCreate();
+            defer parser.eventDestroy(scroll_event);
+
+            try parser.eventInit(scroll_event, "scroll", .{});
+            _ = try parser.eventTargetDispatchEvent(
+                parser.toEventTarget(Window, self),
+                scroll_event,
+            );
+        }
+
+        {
+            const scroll_end = try parser.eventCreate();
+            defer parser.eventDestroy(scroll_end);
+
+            try parser.eventInit(scroll_end, "scrollend", .{});
+            _ = try parser.eventTargetDispatchEvent(
+                parser.toEventTarget(parser.DocumentHTML, self.document),
+                scroll_end,
+            );
+        }
     }
 };
 
@@ -437,4 +453,13 @@ test "Browser.HTML.Window" {
         .{ "str", "https://ziglang.org/documentation/master/std/#std.base64.Base64Decoder" },
         .{ "try { atob('b') } catch (e) { e } ", "Error: InvalidCharacterError" },
     }, .{});
+
+    try runner.testCases(&.{
+        .{ "let scroll = false; let scrolend = false", null },
+        .{ "window.addEventListener('scroll', () => {scroll = true});", null },
+        .{ "document.addEventListener('scrollend', () => {scrollend = true});", null },
+        .{ "window.scrollTo(0)", null },
+        .{ "scroll", "true" },
+        .{ "scrollend", "true" },
+    }, .{});
 }

src/browser/netsurf.zig

@@ -527,6 +527,7 @@ pub const EventType = enum(u8) {
     mouse_event = 3,
     error_event = 4,
     abort_signal = 5,
+    xhr_event = 6,
 };
 
 pub const MutationEvent = c.dom_mutation_event;
@@ -1829,6 +1830,21 @@ pub fn anchorSetRel(a: *Anchor, rel: []const u8) !void {
     try DOMErr(err);
 }
 
+// HTMLLinkElement
+
+pub fn linkGetHref(link: *Link) ![]const u8 {
+    var res: ?*String = undefined;
+    const err = c.dom_html_link_element_get_href(link, &res);
+    try DOMErr(err);
+    if (res == null) return "";
+    return strToData(res.?);
+}
+
+pub fn linkSetHref(link: *Link, href: []const u8) !void {
+    const err = c.dom_html_link_element_set_href(link, try strFromData(href));
+    try DOMErr(err);
+}
+
 // ElementsHTML
 
 pub const MediaElement = struct { base: *c.dom_html_element };
@@ -1909,18 +1925,6 @@ pub inline fn documentFragmentToNode(doc: *DocumentFragment) *Node {
     return @as(*Node, @alignCast(@ptrCast(doc)));
 }
 
-pub fn documentFragmentBodyChildren(doc: *DocumentFragment) !?*NodeList {
-    const node = documentFragmentToNode(doc);
-    const html = try nodeFirstChild(node) orelse return null;
-    // TODO unref
-    const head = try nodeFirstChild(html) orelse return null;
-    // TODO unref
-    const body = try nodeNextSibling(head) orelse return null;
-    // TODO unref
-
-    return try nodeGetChildNodes(body);
-}
-
 // Document Position
 
 pub const DocumentPosition = enum(u32) {
@@ -2368,14 +2372,6 @@ pub inline fn documentHTMLSetBody(doc_html: *DocumentHTML, elt: ?*ElementHTML) !
     try DOMErr(err);
 }
 
-pub inline fn documentHTMLGetDomain(doc: *DocumentHTML) ![]const u8 {
-    var s: ?*String = undefined;
-    const err = documentHTMLVtable(doc).get_domain.?(doc, &s);
-    try DOMErr(err);
-    if (s == null) return "";
-    return strToData(s.?);
-}
-
 pub inline fn documentHTMLGetReferrer(doc: *DocumentHTML) ![]const u8 {
     var s: ?*String = undefined;
     const err = documentHTMLVtable(doc).get_referrer.?(doc, &s);

src/browser/page.zig

@@ -95,6 +95,8 @@ pub const Page = struct {
 
     state_pool: *std.heap.MemoryPool(State),
 
+    polyfill_loader: polyfill.Loader = .{},
+
     pub fn init(self: *Page, arena: Allocator, session: *Session) !void {
         const browser = session.browser;
         self.* = .{
@@ -117,17 +119,15 @@ pub const Page = struct {
             }),
             .main_context = undefined,
         };
-        self.main_context = try session.executor.createJsContext(&self.window, self, self, true);
+        self.main_context = try session.executor.createJsContext(&self.window, self, self, true, .{
+            .global_callback = Env.GlobalMissingCallback.init(&self.polyfill_loader),
+            .compilation_callback = Env.CompilationCallback.init(&self.polyfill_loader),
+        });
 
-        // load polyfills
-        try polyfill.load(self.arena, self.main_context);
-
-        _ = session.executor.env.snapshot(self.main_context);
-
-        _ = try session.browser.app.loop.timeout(1 * std.time.ns_per_ms, &self.microtask_node);
         // message loop must run only non-test env
         if (comptime !builtin.is_test) {
-            _ = try session.browser.app.loop.timeout(1 * std.time.ns_per_ms, &self.messageloop_node);
+            _ = try session.browser.app.loop.timeout(1 * std.time.ns_per_ms, &self.microtask_node);
+            _ = try session.browser.app.loop.timeout(100 * std.time.ns_per_ms, &self.messageloop_node);
         }
     }
 
@@ -369,18 +369,6 @@ pub const Page = struct {
             const e = parser.nodeToElement(current);
             const tag = try parser.elementHTMLGetTagType(@as(*parser.ElementHTML, @ptrCast(e)));
 
-            // if (tag == .undef) {
-            //     const tag_name = try parser.nodeLocalName(@ptrCast(e));
-            //     const custom_elements = &self.window.custom_elements;
-            //     if (custom_elements._get(tag_name)) |construct| {
-            //         try construct.printFunc();
-            //         // This is just here for testing for now.
-            //         // var result: Env.Function.Result = undefined;
-            //         // _ = try construct.newInstance(*parser.Element, &result);
-            //         log.info(.browser, "Registered WebComponent Found", .{ .element_name = tag_name });
-            //     }
-            // }
-
             if (tag != .script) {
                 // ignore non-js script.
                 continue;
@@ -1019,7 +1007,7 @@ const Script = struct {
 
         const src: []const u8 = blk: {
             const s = self.src orelse break :blk page.url.raw;
-            break :blk try URL.stitch(page.arena, s, page.url.raw, .{.alloc = .if_needed});
+            break :blk try URL.stitch(page.arena, s, page.url.raw, .{ .alloc = .if_needed });
         };
 
         // if self.src is null, then this is an inline script, and it should

src/browser/polyfill/fetch.zig

@@ -16,8 +16,6 @@ test "Browser.fetch" {
     var runner = try testing.jsRunner(testing.tracking_allocator, .{});
     defer runner.deinit();
 
-    try @import("polyfill.zig").load(testing.allocator, runner.page.main_context);
-
     try runner.testCases(&.{
         .{
             \\  var ok = false;

src/browser/polyfill/polyfill.zig

@@ -23,25 +23,104 @@ const log = @import("../../log.zig");
 const Allocator = std.mem.Allocator;
 const Env = @import("../env.zig").Env;
 
-const modules = [_]struct {
-    name: []const u8,
-    source: []const u8,
-}{
-    .{ .name = "polyfill-fetch", .source = @import("fetch.zig").source },
-};
+pub const Loader = struct {
+    state: enum { empty, loading } = .empty,
 
-pub fn load(allocator: Allocator, js_context: *Env.JsContext) !void {
-    var try_catch: Env.TryCatch = undefined;
-    try_catch.init(js_context);
-    defer try_catch.deinit();
+    done: struct {
+        fetch: bool = false,
+        webcomponents: bool = false,
+    } = .{},
 
-    for (modules) |m| {
-        _ = js_context.exec(m.source, m.name) catch |err| {
-            if (try try_catch.err(allocator)) |msg| {
-                defer allocator.free(msg);
-                log.fatal(.app, "polyfill error", .{ .name = m.name, .err = msg });
-            }
-            return err;
+    fn load(self: *Loader, comptime name: []const u8, source: []const u8, js_context: *Env.JsContext) void {
+        var try_catch: Env.TryCatch = undefined;
+        try_catch.init(js_context);
+        defer try_catch.deinit();
+
+        self.state = .loading;
+        defer self.state = .empty;
+
+        log.debug(.js, "polyfill load", .{ .name = name });
+        _ = js_context.exec(source, name) catch |err| {
+            log.fatal(.app, "polyfill error", .{
+                .name = name,
+                .err = try_catch.err(js_context.call_arena) catch @errorName(err) orelse @errorName(err),
+            });
         };
+
+        @field(self.done, name) = true;
     }
-}
+
+    // CompilationCallback implementation
+    pub fn script(self: *Loader, src: []const u8, _: ?[]const u8, js_context: *Env.JsContext) void {
+        if (!self.done.webcomponents and containsWebcomponents(src)) {
+            const source = @import("webcomponents.zig").source;
+            self.load("webcomponents", source, js_context);
+        }
+    }
+
+    // CompilationCallback implementation
+    pub fn module(self: *Loader, src: []const u8, _: []const u8, js_context: *Env.JsContext) void {
+        if (!self.done.webcomponents and containsWebcomponents(src)) {
+            const source = @import("webcomponents.zig").source;
+            self.load("webcomponents", source, js_context);
+        }
+    }
+
+    // GlobalMissingCallback implementation
+    pub fn missing(self: *Loader, name: []const u8, js_context: *Env.JsContext) bool {
+        // Avoid recursive calls during polyfill loading.
+        if (self.state == .loading) {
+            return false;
+        }
+
+        if (!self.done.fetch and isFetch(name)) {
+            const source = @import("fetch.zig").source;
+            self.load("fetch", source, js_context);
+
+            // We return false here: We want v8 to continue the calling chain
+            // to finally find the polyfill we just inserted. If we want to
+            // return false and stops the call chain, we have to use
+            // `info.GetReturnValue.Set()` function, or `undefined` will be
+            // returned immediately.
+            return false;
+        }
+
+        if (!self.done.webcomponents and isWebcomponents(name)) {
+            const source = @import("webcomponents.zig").source;
+            self.load("webcomponents", source, js_context);
+
+            // We return false here: We want v8 to continue the calling chain
+            // to finally find the polyfill we just inserted. If we want to
+            // return false and stops the call chain, we have to use
+            // `info.GetReturnValue.Set()` function, or `undefined` will be
+            // returned immediately.
+            return false;
+        }
+
+        if (comptime builtin.mode == .Debug) {
+            log.debug(.unknown_prop, "unkown global property", .{
+                .info = "but the property can exist in pure JS",
+                .property = name,
+            });
+        }
+
+        return false;
+    }
+
+    fn isFetch(name: []const u8) bool {
+        if (std.mem.eql(u8, name, "fetch")) return true;
+        if (std.mem.eql(u8, name, "Request")) return true;
+        if (std.mem.eql(u8, name, "Response")) return true;
+        if (std.mem.eql(u8, name, "Headers")) return true;
+        return false;
+    }
+
+    fn isWebcomponents(name: []const u8) bool {
+        if (std.mem.eql(u8, name, "customElements")) return true;
+        return false;
+    }
+
+    fn containsWebcomponents(src: []const u8) bool {
+        return std.mem.indexOf(u8, src, " extends ") != null;
+    }
+};

src/browser/polyfill/webcomponents.js

@@ -0,0 +1,61 @@
+/**
+@license @nocompile
+Copyright (c) 2018 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+*/
+(function(){/*
+
+ Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
+ This code may only be used under the BSD style license found at
+ http://polymer.github.io/LICENSE.txt The complete set of authors may be found
+ at http://polymer.github.io/AUTHORS.txt The complete set of contributors may
+ be found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by
+ Google as part of the polymer project is also subject to an additional IP
+ rights grant found at http://polymer.github.io/PATENTS.txt
+*/
+'use strict';var n=window.Document.prototype.createElement,p=window.Document.prototype.createElementNS,aa=window.Document.prototype.importNode,ba=window.Document.prototype.prepend,ca=window.Document.prototype.append,da=window.DocumentFragment.prototype.prepend,ea=window.DocumentFragment.prototype.append,q=window.Node.prototype.cloneNode,r=window.Node.prototype.appendChild,t=window.Node.prototype.insertBefore,u=window.Node.prototype.removeChild,v=window.Node.prototype.replaceChild,w=Object.getOwnPropertyDescriptor(window.Node.prototype,
+"textContent"),y=window.Element.prototype.attachShadow,z=Object.getOwnPropertyDescriptor(window.Element.prototype,"innerHTML"),A=window.Element.prototype.getAttribute,B=window.Element.prototype.setAttribute,C=window.Element.prototype.removeAttribute,D=window.Element.prototype.toggleAttribute,E=window.Element.prototype.getAttributeNS,F=window.Element.prototype.setAttributeNS,G=window.Element.prototype.removeAttributeNS,H=window.Element.prototype.insertAdjacentElement,fa=window.Element.prototype.insertAdjacentHTML,
+ha=window.Element.prototype.prepend,ia=window.Element.prototype.append,ja=window.Element.prototype.before,ka=window.Element.prototype.after,la=window.Element.prototype.replaceWith,ma=window.Element.prototype.remove,na=window.HTMLElement,I=Object.getOwnPropertyDescriptor(window.HTMLElement.prototype,"innerHTML"),oa=window.HTMLElement.prototype.insertAdjacentElement,pa=window.HTMLElement.prototype.insertAdjacentHTML;var qa=new Set;"annotation-xml color-profile font-face font-face-src font-face-uri font-face-format font-face-name missing-glyph".split(" ").forEach(function(a){return qa.add(a)});function ra(a){var b=qa.has(a);a=/^[a-z][.0-9_a-z]*-[-.0-9_a-z]*$/.test(a);return!b&&a}var sa=document.contains?document.contains.bind(document):document.documentElement.contains.bind(document.documentElement);
+function J(a){var b=a.isConnected;if(void 0!==b)return b;if(sa(a))return!0;for(;a&&!(a.__CE_isImportDocument||a instanceof Document);)a=a.parentNode||(window.ShadowRoot&&a instanceof ShadowRoot?a.host:void 0);return!(!a||!(a.__CE_isImportDocument||a instanceof Document))}function K(a){var b=a.children;if(b)return Array.prototype.slice.call(b);b=[];for(a=a.firstChild;a;a=a.nextSibling)a.nodeType===Node.ELEMENT_NODE&&b.push(a);return b}
+function L(a,b){for(;b&&b!==a&&!b.nextSibling;)b=b.parentNode;return b&&b!==a?b.nextSibling:null}
+function M(a,b,d){for(var f=a;f;){if(f.nodeType===Node.ELEMENT_NODE){var c=f;b(c);var e=c.localName;if("link"===e&&"import"===c.getAttribute("rel")){f=c.import;void 0===d&&(d=new Set);if(f instanceof Node&&!d.has(f))for(d.add(f),f=f.firstChild;f;f=f.nextSibling)M(f,b,d);f=L(a,c);continue}else if("template"===e){f=L(a,c);continue}if(c=c.__CE_shadowRoot)for(c=c.firstChild;c;c=c.nextSibling)M(c,b,d)}f=f.firstChild?f.firstChild:L(a,f)}};function N(){var a=!(null===O||void 0===O||!O.noDocumentConstructionObserver),b=!(null===O||void 0===O||!O.shadyDomFastWalk);this.m=[];this.g=[];this.j=!1;this.shadyDomFastWalk=b;this.I=!a}function P(a,b,d,f){var c=window.ShadyDOM;if(a.shadyDomFastWalk&&c&&c.inUse){if(b.nodeType===Node.ELEMENT_NODE&&d(b),b.querySelectorAll)for(a=c.nativeMethods.querySelectorAll.call(b,"*"),b=0;b<a.length;b++)d(a[b])}else M(b,d,f)}function ta(a,b){a.j=!0;a.m.push(b)}function ua(a,b){a.j=!0;a.g.push(b)}
+function Q(a,b){a.j&&P(a,b,function(d){return R(a,d)})}function R(a,b){if(a.j&&!b.__CE_patched){b.__CE_patched=!0;for(var d=0;d<a.m.length;d++)a.m[d](b);for(d=0;d<a.g.length;d++)a.g[d](b)}}function S(a,b){var d=[];P(a,b,function(c){return d.push(c)});for(b=0;b<d.length;b++){var f=d[b];1===f.__CE_state?a.connectedCallback(f):T(a,f)}}function U(a,b){var d=[];P(a,b,function(c){return d.push(c)});for(b=0;b<d.length;b++){var f=d[b];1===f.__CE_state&&a.disconnectedCallback(f)}}
+function V(a,b,d){d=void 0===d?{}:d;var f=d.J,c=d.upgrade||function(g){return T(a,g)},e=[];P(a,b,function(g){a.j&&R(a,g);if("link"===g.localName&&"import"===g.getAttribute("rel")){var h=g.import;h instanceof Node&&(h.__CE_isImportDocument=!0,h.__CE_registry=document.__CE_registry);h&&"complete"===h.readyState?h.__CE_documentLoadHandled=!0:g.addEventListener("load",function(){var k=g.import;if(!k.__CE_documentLoadHandled){k.__CE_documentLoadHandled=!0;var l=new Set;f&&(f.forEach(function(m){return l.add(m)}),
+l.delete(k));V(a,k,{J:l,upgrade:c})}})}else e.push(g)},f);for(b=0;b<e.length;b++)c(e[b])}
+function T(a,b){try{var d=b.ownerDocument,f=d.__CE_registry;var c=f&&(d.defaultView||d.__CE_isImportDocument)?W(f,b.localName):void 0;if(c&&void 0===b.__CE_state){c.constructionStack.push(b);try{try{if(new c.constructorFunction!==b)throw Error("The custom element constructor did not produce the element being upgraded.");}finally{c.constructionStack.pop()}}catch(k){throw b.__CE_state=2,k;}b.__CE_state=1;b.__CE_definition=c;if(c.attributeChangedCallback&&b.hasAttributes()){var e=c.observedAttributes;
+for(c=0;c<e.length;c++){var g=e[c],h=b.getAttribute(g);null!==h&&a.attributeChangedCallback(b,g,null,h,null)}}J(b)&&a.connectedCallback(b)}}catch(k){X(k)}}N.prototype.connectedCallback=function(a){var b=a.__CE_definition;if(b.connectedCallback)try{b.connectedCallback.call(a)}catch(d){X(d)}};N.prototype.disconnectedCallback=function(a){var b=a.__CE_definition;if(b.disconnectedCallback)try{b.disconnectedCallback.call(a)}catch(d){X(d)}};
+N.prototype.attributeChangedCallback=function(a,b,d,f,c){var e=a.__CE_definition;if(e.attributeChangedCallback&&-1<e.observedAttributes.indexOf(b))try{e.attributeChangedCallback.call(a,b,d,f,c)}catch(g){X(g)}};
+function va(a,b,d,f){var c=b.__CE_registry;if(c&&(null===f||"http://www.w3.org/1999/xhtml"===f)&&(c=W(c,d)))try{var e=new c.constructorFunction;if(void 0===e.__CE_state||void 0===e.__CE_definition)throw Error("Failed to construct '"+d+"': The returned value was not constructed with the HTMLElement constructor.");if("http://www.w3.org/1999/xhtml"!==e.namespaceURI)throw Error("Failed to construct '"+d+"': The constructed element's namespace must be the HTML namespace.");if(e.hasAttributes())throw Error("Failed to construct '"+
+d+"': The constructed element must not have any attributes.");if(null!==e.firstChild)throw Error("Failed to construct '"+d+"': The constructed element must not have any children.");if(null!==e.parentNode)throw Error("Failed to construct '"+d+"': The constructed element must not have a parent node.");if(e.ownerDocument!==b)throw Error("Failed to construct '"+d+"': The constructed element's owner document is incorrect.");if(e.localName!==d)throw Error("Failed to construct '"+d+"': The constructed element's local name is incorrect.");
+return e}catch(g){return X(g),b=null===f?n.call(b,d):p.call(b,f,d),Object.setPrototypeOf(b,HTMLUnknownElement.prototype),b.__CE_state=2,b.__CE_definition=void 0,R(a,b),b}b=null===f?n.call(b,d):p.call(b,f,d);R(a,b);return b}
+function X(a){var b="",d="",f=0,c=0;a instanceof Error?(b=a.message,d=a.sourceURL||a.fileName||"",f=a.line||a.lineNumber||0,c=a.column||a.columnNumber||0):b="Uncaught "+String(a);var e=void 0;void 0===ErrorEvent.prototype.initErrorEvent?e=new ErrorEvent("error",{cancelable:!0,message:b,filename:d,lineno:f,colno:c,error:a}):(e=document.createEvent("ErrorEvent"),e.initErrorEvent("error",!1,!0,b,d,f),e.preventDefault=function(){Object.defineProperty(this,"defaultPrevented",{configurable:!0,get:function(){return!0}})});
+void 0===e.error&&Object.defineProperty(e,"error",{configurable:!0,enumerable:!0,get:function(){return a}});window.dispatchEvent(e);e.defaultPrevented||console.error(a)};function wa(){var a=this;this.g=void 0;this.F=new Promise(function(b){a.l=b})}wa.prototype.resolve=function(a){if(this.g)throw Error("Already resolved.");this.g=a;this.l(a)};function xa(a){var b=document;this.l=void 0;this.h=a;this.g=b;V(this.h,this.g);"loading"===this.g.readyState&&(this.l=new MutationObserver(this.G.bind(this)),this.l.observe(this.g,{childList:!0,subtree:!0}))}function ya(a){a.l&&a.l.disconnect()}xa.prototype.G=function(a){var b=this.g.readyState;"interactive"!==b&&"complete"!==b||ya(this);for(b=0;b<a.length;b++)for(var d=a[b].addedNodes,f=0;f<d.length;f++)V(this.h,d[f])};function Y(a){this.s=new Map;this.u=new Map;this.C=new Map;this.A=!1;this.B=new Map;this.o=function(b){return b()};this.i=!1;this.v=[];this.h=a;this.D=a.I?new xa(a):void 0}Y.prototype.H=function(a,b){var d=this;if(!(b instanceof Function))throw new TypeError("Custom element constructor getters must be functions.");za(this,a);this.s.set(a,b);this.v.push(a);this.i||(this.i=!0,this.o(function(){return Aa(d)}))};
+Y.prototype.define=function(a,b){var d=this;if(!(b instanceof Function))throw new TypeError("Custom element constructors must be functions.");za(this,a);Ba(this,a,b);this.v.push(a);this.i||(this.i=!0,this.o(function(){return Aa(d)}))};function za(a,b){if(!ra(b))throw new SyntaxError("The element name '"+b+"' is not valid.");if(W(a,b))throw Error("A custom element with name '"+(b+"' has already been defined."));if(a.A)throw Error("A custom element is already being defined.");}
+function Ba(a,b,d){a.A=!0;var f;try{var c=d.prototype;if(!(c instanceof Object))throw new TypeError("The custom element constructor's prototype is not an object.");var e=function(m){var x=c[m];if(void 0!==x&&!(x instanceof Function))throw Error("The '"+m+"' callback must be a function.");return x};var g=e("connectedCallback");var h=e("disconnectedCallback");var k=e("adoptedCallback");var l=(f=e("attributeChangedCallback"))&&d.observedAttributes||[]}catch(m){throw m;}finally{a.A=!1}d={localName:b,
+constructorFunction:d,connectedCallback:g,disconnectedCallback:h,adoptedCallback:k,attributeChangedCallback:f,observedAttributes:l,constructionStack:[]};a.u.set(b,d);a.C.set(d.constructorFunction,d);return d}Y.prototype.upgrade=function(a){V(this.h,a)};
+function Aa(a){if(!1!==a.i){a.i=!1;for(var b=[],d=a.v,f=new Map,c=0;c<d.length;c++)f.set(d[c],[]);V(a.h,document,{upgrade:function(k){if(void 0===k.__CE_state){var l=k.localName,m=f.get(l);m?m.push(k):a.u.has(l)&&b.push(k)}}});for(c=0;c<b.length;c++)T(a.h,b[c]);for(c=0;c<d.length;c++){for(var e=d[c],g=f.get(e),h=0;h<g.length;h++)T(a.h,g[h]);(e=a.B.get(e))&&e.resolve(void 0)}d.length=0}}Y.prototype.get=function(a){if(a=W(this,a))return a.constructorFunction};
+Y.prototype.whenDefined=function(a){if(!ra(a))return Promise.reject(new SyntaxError("'"+a+"' is not a valid custom element name."));var b=this.B.get(a);if(b)return b.F;b=new wa;this.B.set(a,b);var d=this.u.has(a)||this.s.has(a);a=-1===this.v.indexOf(a);d&&a&&b.resolve(void 0);return b.F};Y.prototype.polyfillWrapFlushCallback=function(a){this.D&&ya(this.D);var b=this.o;this.o=function(d){return a(function(){return b(d)})}};
+function W(a,b){var d=a.u.get(b);if(d)return d;if(d=a.s.get(b)){a.s.delete(b);try{return Ba(a,b,d())}catch(f){X(f)}}}Y.prototype.define=Y.prototype.define;Y.prototype.upgrade=Y.prototype.upgrade;Y.prototype.get=Y.prototype.get;Y.prototype.whenDefined=Y.prototype.whenDefined;Y.prototype.polyfillDefineLazy=Y.prototype.H;Y.prototype.polyfillWrapFlushCallback=Y.prototype.polyfillWrapFlushCallback;function Z(a,b,d){function f(c){return function(e){for(var g=[],h=0;h<arguments.length;++h)g[h]=arguments[h];h=[];for(var k=[],l=0;l<g.length;l++){var m=g[l];m instanceof Element&&J(m)&&k.push(m);if(m instanceof DocumentFragment)for(m=m.firstChild;m;m=m.nextSibling)h.push(m);else h.push(m)}c.apply(this,g);for(g=0;g<k.length;g++)U(a,k[g]);if(J(this))for(g=0;g<h.length;g++)k=h[g],k instanceof Element&&S(a,k)}}void 0!==d.prepend&&(b.prepend=f(d.prepend));void 0!==d.append&&(b.append=f(d.append))};function Ca(a){Document.prototype.createElement=function(b){return va(a,this,b,null)};Document.prototype.importNode=function(b,d){b=aa.call(this,b,!!d);this.__CE_registry?V(a,b):Q(a,b);return b};Document.prototype.createElementNS=function(b,d){return va(a,this,d,b)};Z(a,Document.prototype,{prepend:ba,append:ca})};function Da(a){function b(f){return function(c){for(var e=[],g=0;g<arguments.length;++g)e[g]=arguments[g];g=[];for(var h=[],k=0;k<e.length;k++){var l=e[k];l instanceof Element&&J(l)&&h.push(l);if(l instanceof DocumentFragment)for(l=l.firstChild;l;l=l.nextSibling)g.push(l);else g.push(l)}f.apply(this,e);for(e=0;e<h.length;e++)U(a,h[e]);if(J(this))for(e=0;e<g.length;e++)h=g[e],h instanceof Element&&S(a,h)}}var d=Element.prototype;void 0!==ja&&(d.before=b(ja));void 0!==ka&&(d.after=b(ka));void 0!==la&&
+(d.replaceWith=function(f){for(var c=[],e=0;e<arguments.length;++e)c[e]=arguments[e];e=[];for(var g=[],h=0;h<c.length;h++){var k=c[h];k instanceof Element&&J(k)&&g.push(k);if(k instanceof DocumentFragment)for(k=k.firstChild;k;k=k.nextSibling)e.push(k);else e.push(k)}h=J(this);la.apply(this,c);for(c=0;c<g.length;c++)U(a,g[c]);if(h)for(U(a,this),c=0;c<e.length;c++)g=e[c],g instanceof Element&&S(a,g)});void 0!==ma&&(d.remove=function(){var f=J(this);ma.call(this);f&&U(a,this)})};function Ea(a){function b(c,e){Object.defineProperty(c,"innerHTML",{enumerable:e.enumerable,configurable:!0,get:e.get,set:function(g){var h=this,k=void 0;J(this)&&(k=[],P(a,this,function(x){x!==h&&k.push(x)}));e.set.call(this,g);if(k)for(var l=0;l<k.length;l++){var m=k[l];1===m.__CE_state&&a.disconnectedCallback(m)}this.ownerDocument.__CE_registry?V(a,this):Q(a,this);return g}})}function d(c,e){c.insertAdjacentElement=function(g,h){var k=J(h);g=e.call(this,g,h);k&&U(a,h);J(g)&&S(a,h);return g}}function f(c,
+e){function g(h,k){for(var l=[];h!==k;h=h.nextSibling)l.push(h);for(k=0;k<l.length;k++)V(a,l[k])}c.insertAdjacentHTML=function(h,k){h=h.toLowerCase();if("beforebegin"===h){var l=this.previousSibling;e.call(this,h,k);g(l||this.parentNode.firstChild,this)}else if("afterbegin"===h)l=this.firstChild,e.call(this,h,k),g(this.firstChild,l);else if("beforeend"===h)l=this.lastChild,e.call(this,h,k),g(l||this.firstChild,null);else if("afterend"===h)l=this.nextSibling,e.call(this,h,k),g(this.nextSibling,l);
+else throw new SyntaxError("The value provided ("+String(h)+") is not one of 'beforebegin', 'afterbegin', 'beforeend', or 'afterend'.");}}y&&(Element.prototype.attachShadow=function(c){c=y.call(this,c);if(a.j&&!c.__CE_patched){c.__CE_patched=!0;for(var e=0;e<a.m.length;e++)a.m[e](c)}return this.__CE_shadowRoot=c});z&&z.get?b(Element.prototype,z):I&&I.get?b(HTMLElement.prototype,I):ua(a,function(c){b(c,{enumerable:!0,configurable:!0,get:function(){return q.call(this,!0).innerHTML},set:function(e){var g=
+"template"===this.localName,h=g?this.content:this,k=p.call(document,this.namespaceURI,this.localName);for(k.innerHTML=e;0<h.childNodes.length;)u.call(h,h.childNodes[0]);for(e=g?k.content:k;0<e.childNodes.length;)r.call(h,e.childNodes[0])}})});Element.prototype.setAttribute=function(c,e){if(1!==this.__CE_state)return B.call(this,c,e);var g=A.call(this,c);B.call(this,c,e);e=A.call(this,c);a.attributeChangedCallback(this,c,g,e,null)};Element.prototype.setAttributeNS=function(c,e,g){if(1!==this.__CE_state)return F.call(this,
+c,e,g);var h=E.call(this,c,e);F.call(this,c,e,g);g=E.call(this,c,e);a.attributeChangedCallback(this,e,h,g,c)};Element.prototype.removeAttribute=function(c){if(1!==this.__CE_state)return C.call(this,c);var e=A.call(this,c);C.call(this,c);null!==e&&a.attributeChangedCallback(this,c,e,null,null)};D&&(Element.prototype.toggleAttribute=function(c,e){if(1!==this.__CE_state)return D.call(this,c,e);var g=A.call(this,c),h=null!==g;e=D.call(this,c,e);h!==e&&a.attributeChangedCallback(this,c,g,e?"":null,null);
+return e});Element.prototype.removeAttributeNS=function(c,e){if(1!==this.__CE_state)return G.call(this,c,e);var g=E.call(this,c,e);G.call(this,c,e);var h=E.call(this,c,e);g!==h&&a.attributeChangedCallback(this,e,g,h,c)};oa?d(HTMLElement.prototype,oa):H&&d(Element.prototype,H);pa?f(HTMLElement.prototype,pa):fa&&f(Element.prototype,fa);Z(a,Element.prototype,{prepend:ha,append:ia});Da(a)};var Fa={};function Ga(a){function b(){var d=this.constructor;var f=document.__CE_registry.C.get(d);if(!f)throw Error("Failed to construct a custom element: The constructor was not registered with `customElements`.");var c=f.constructionStack;if(0===c.length)return c=n.call(document,f.localName),Object.setPrototypeOf(c,d.prototype),c.__CE_state=1,c.__CE_definition=f,R(a,c),c;var e=c.length-1,g=c[e];if(g===Fa)throw Error("Failed to construct '"+f.localName+"': This element was already constructed.");c[e]=Fa;
+Object.setPrototypeOf(g,d.prototype);R(a,g);return g}b.prototype=na.prototype;Object.defineProperty(HTMLElement.prototype,"constructor",{writable:!0,configurable:!0,enumerable:!1,value:b});window.HTMLElement=b};function Ha(a){function b(d,f){Object.defineProperty(d,"textContent",{enumerable:f.enumerable,configurable:!0,get:f.get,set:function(c){if(this.nodeType===Node.TEXT_NODE)f.set.call(this,c);else{var e=void 0;if(this.firstChild){var g=this.childNodes,h=g.length;if(0<h&&J(this)){e=Array(h);for(var k=0;k<h;k++)e[k]=g[k]}}f.set.call(this,c);if(e)for(c=0;c<e.length;c++)U(a,e[c])}}})}Node.prototype.insertBefore=function(d,f){if(d instanceof DocumentFragment){var c=K(d);d=t.call(this,d,f);if(J(this))for(f=
+0;f<c.length;f++)S(a,c[f]);return d}c=d instanceof Element&&J(d);f=t.call(this,d,f);c&&U(a,d);J(this)&&S(a,d);return f};Node.prototype.appendChild=function(d){if(d instanceof DocumentFragment){var f=K(d);d=r.call(this,d);if(J(this))for(var c=0;c<f.length;c++)S(a,f[c]);return d}f=d instanceof Element&&J(d);c=r.call(this,d);f&&U(a,d);J(this)&&S(a,d);return c};Node.prototype.cloneNode=function(d){d=q.call(this,!!d);this.ownerDocument.__CE_registry?V(a,d):Q(a,d);return d};Node.prototype.removeChild=function(d){var f=
+d instanceof Element&&J(d),c=u.call(this,d);f&&U(a,d);return c};Node.prototype.replaceChild=function(d,f){if(d instanceof DocumentFragment){var c=K(d);d=v.call(this,d,f);if(J(this))for(U(a,f),f=0;f<c.length;f++)S(a,c[f]);return d}c=d instanceof Element&&J(d);var e=v.call(this,d,f),g=J(this);g&&U(a,f);c&&U(a,d);g&&S(a,d);return e};w&&w.get?b(Node.prototype,w):ta(a,function(d){b(d,{enumerable:!0,configurable:!0,get:function(){for(var f=[],c=this.firstChild;c;c=c.nextSibling)c.nodeType!==Node.COMMENT_NODE&&
+f.push(c.textContent);return f.join("")},set:function(f){for(;this.firstChild;)u.call(this,this.firstChild);null!=f&&""!==f&&r.call(this,document.createTextNode(f))}})})};var O=window.customElements;function Ia(){var a=new N;Ga(a);Ca(a);Z(a,DocumentFragment.prototype,{prepend:da,append:ea});Ha(a);Ea(a);window.CustomElementRegistry=Y;a=new Y(a);document.__CE_registry=a;Object.defineProperty(window,"customElements",{configurable:!0,enumerable:!0,value:a})}O&&!O.forcePolyfill&&"function"==typeof O.define&&"function"==typeof O.get||Ia();window.__CE_installPolyfill=Ia;/*
+
+Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+*/
+}).call(this);

src/browser/polyfill/webcomponents.zig

@@ -0,0 +1,33 @@
+// webcomponents.js code comes from
+// https://github.com/webcomponents/polyfills/tree/master/packages/webcomponentsjs
+//
+// The original code source is available in a "BSD style license".
+//
+// This is the `webcomponents-ce.js` bundle
+pub const source = @embedFile("webcomponents.js");
+
+const testing = @import("../../testing.zig");
+test "Browser.webcomponents" {
+    var runner = try testing.jsRunner(testing.tracking_allocator, .{ .html = "<div id=main></div>" });
+    defer runner.deinit();
+
+    try runner.testCases(&.{
+        .{
+            \\ class LightPanda extends HTMLElement {
+            \\   constructor() {
+            \\     super();
+            \\   }
+            \\   connectedCallback() {
+            \\     this.append('connected')
+            \\   }
+            \\ }
+            \\ window.customElements.define("lightpanda-test", LightPanda);
+            \\ const main = document.getElementById('main');
+            \\ main.appendChild(document.createElement('lightpanda-test'));
+            ,
+            null,
+        },
+
+        .{ "main.innerHTML", "<lightpanda-test>connected</lightpanda-test>" },
+    }, .{});
+}

src/browser/url/url.zig

@@ -54,6 +54,11 @@ pub const URL = struct {
     uri: std.Uri,
     search_params: URLSearchParams,
 
+    pub const empty = URL{
+        .uri = .{ .scheme = "" },
+        .search_params = .{},
+    };
+
     const URLArg = union(enum) {
         url: *URL,
         element: *parser.ElementHTML,

src/browser/webcomponents/custom_element_registry.zig

@@ -16,6 +16,8 @@
 // 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/>.
 
+// Currently not used. Relying on polyfill instead
+
 const std = @import("std");
 const log = @import("../../log.zig");
 const v8 = @import("v8");

src/browser/webcomponents/webcomponents.zig

@@ -1,23 +0,0 @@
-// 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 CustomElementRegistry = @import("custom_element_registry.zig").CustomElementRegistry;
-
-pub const Interfaces = .{
-    CustomElementRegistry,
-};

src/browser/xhr/event_target.zig

@@ -39,6 +39,7 @@ pub const XMLHttpRequestEventTarget = struct {
     onload_cbk: ?Function = null,
     ontimeout_cbk: ?Function = null,
     onloadend_cbk: ?Function = null,
+    onreadystatechange_cbk: ?Function = null,
 
     fn register(
         self: *XMLHttpRequestEventTarget,
@@ -86,6 +87,9 @@ pub const XMLHttpRequestEventTarget = struct {
     pub fn get_onloadend(self: *XMLHttpRequestEventTarget) ?Function {
         return self.onloadend_cbk;
     }
+    pub fn get_onreadystatechange(self: *XMLHttpRequestEventTarget) ?Function {
+        return self.onreadystatechange_cbk;
+    }
 
     pub fn set_onloadstart(self: *XMLHttpRequestEventTarget, listener: EventHandler.Listener, page: *Page) !void {
         if (self.onloadstart_cbk) |cbk| try self.unregister("loadstart", cbk.id);
@@ -111,4 +115,8 @@ pub const XMLHttpRequestEventTarget = struct {
         if (self.onloadend_cbk) |cbk| try self.unregister("loadend", cbk.id);
         self.onloadend_cbk = try self.register(page.arena, "loadend", listener);
     }
+    pub fn set_onreadystatechange(self: *XMLHttpRequestEventTarget, listener: EventHandler.Listener, page: *Page) !void {
+        if (self.onreadystatechange_cbk) |cbk| try self.unregister("readystatechange", cbk.id);
+        self.onreadystatechange_cbk = try self.register(page.arena, "readystatechange", listener);
+    }
 };

src/browser/xhr/xhr.zig

@@ -138,6 +138,13 @@ pub const XMLHttpRequest = struct {
         done = 4,
     };
 
+    // class attributes
+    pub const _UNSENT = @intFromEnum(State.unsent);
+    pub const _OPENED = @intFromEnum(State.opened);
+    pub const _HEADERS_RECEIVED = @intFromEnum(State.headers_received);
+    pub const _LOADING = @intFromEnum(State.loading);
+    pub const _DONE = @intFromEnum(State.done);
+
     // https://xhr.spec.whatwg.org/#response-type
     const ResponseType = enum {
         Empty,
@@ -360,6 +367,8 @@ pub const XMLHttpRequest = struct {
         // We can we defer event destroy once the event is dispatched.
         defer parser.eventDestroy(evt);
 
+        try parser.eventSetInternalType(evt, .xhr_event);
+
         try parser.eventInit(evt, typ, .{ .bubbles = true, .cancelable = true });
         _ = try parser.eventTargetDispatchEvent(@as(*parser.EventTarget, @ptrCast(self)), evt);
     }
@@ -579,11 +588,27 @@ pub const XMLHttpRequest = struct {
     }
 
     fn onErr(self: *XMLHttpRequest, err: anyerror) void {
-        self.state = .done;
         self.send_flag = false;
-        self.dispatchEvt("readystatechange");
-        self.dispatchProgressEvent("error", .{});
-        self.dispatchProgressEvent("loadend", .{});
+
+        // capture the state before we change it
+        const s = self.state;
+
+        const is_abort = err == DOMError.Abort;
+
+        if (is_abort) {
+            self.state = .unsent;
+        } else {
+            self.state = .done;
+            self.dispatchEvt("error");
+        }
+
+        if (s != .done or s != .unsent) {
+            self.dispatchEvt("readystatechange");
+            if (is_abort) {
+                self.dispatchProgressEvent("abort", .{});
+            }
+            self.dispatchProgressEvent("loadend", .{});
+        }
 
         const level: log.Level = if (err == DOMError.Abort) .debug else .err;
         log.log(.http, level, "error", .{
@@ -922,4 +947,26 @@ test "Browser.XHR.XMLHttpRequest" {
         // So the url has been retrieved.
         .{ "status", "200" },
     }, .{});
+
+    try runner.testCases(&.{
+        .{ "const req6 = new XMLHttpRequest()", null },
+        .{
+            \\ var readyStates = [];
+            \\ var currentTarget = null;
+            \\ req6.onreadystatechange = (e) => {
+            \\  currentTarget = e.currentTarget;
+            \\  readyStates.push(req6.readyState);
+            \\ }
+            ,
+            null,
+        },
+        .{ "req6.open('GET', 'https://127.0.0.1:9581/xhr')", null },
+        .{ "req6.send()", null },
+        .{ "readyStates.length", "4" },
+        .{ "readyStates[0] === XMLHttpRequest.OPENED", "true" },
+        .{ "readyStates[1] === XMLHttpRequest.HEADERS_RECEIVED", "true" },
+        .{ "readyStates[2] === XMLHttpRequest.LOADING", "true" },
+        .{ "readyStates[3] === XMLHttpRequest.DONE", "true" },
+        .{ "currentTarget == req6", "true" },
+    }, .{});
 }

src/cdp/cdp.zig

@@ -30,6 +30,8 @@ const Inspector = @import("../browser/env.zig").Env.Inspector;
 const Incrementing = @import("../id.zig").Incrementing;
 const Notification = @import("../notification.zig").Notification;
 
+const polyfill = @import("../browser/polyfill/polyfill.zig");
+
 pub const URL_BASE = "chrome://newtab/";
 pub const LOADER_ID = "LOADERID24DD2FD56CF1EF33C965C79C";
 
@@ -554,6 +556,10 @@ const IsolatedWorld = struct {
     executor: Env.ExecutionWorld,
     grant_universal_access: bool,
 
+    // Polyfill loader for the isolated world.
+    // We want to load polyfill in the world's context.
+    polyfill_loader: polyfill.Loader = .{},
+
     pub fn deinit(self: *IsolatedWorld) void {
         self.executor.deinit();
     }
@@ -569,7 +575,16 @@ const IsolatedWorld = struct {
     // Currently we have only 1 page/frame and thus also only 1 state in the isolate world.
     pub fn createContext(self: *IsolatedWorld, page: *Page) !void {
         if (self.executor.js_context != null) return error.Only1IsolatedContextSupported;
-        _ = try self.executor.createJsContext(&page.window, page, {}, false);
+        _ = try self.executor.createJsContext(
+            &page.window,
+            page,
+            {},
+            false,
+            .{
+                .global_callback = Env.GlobalMissingCallback.init(&self.polyfill_loader),
+                .compilation_callback = Env.CompilationCallback.init(&self.polyfill_loader),
+            },
+        );
     }
 };
 

src/cdp/domains/page.zig

@@ -284,9 +284,6 @@ pub fn pageCreated(bc: anytype, page: *Page) !void {
     if (bc.isolated_world) |*isolated_world| {
         // We need to recreate the isolated world context
         try isolated_world.createContext(page);
-
-        const polyfill = @import("../../browser/polyfill/polyfill.zig");
-        try polyfill.load(bc.arena, &isolated_world.executor.js_context.?);
     }
 }
 

src/http/client.zig

@@ -236,7 +236,7 @@ pub const Client = struct {
         return proxy_type == .connect;
     }
 
-    fn isSimpleProxy(self: *const Client) bool {
+    fn isForwardProxy(self: *const Client) bool {
         const proxy_type = self.proxy_type orelse return false;
         return proxy_type == .forward;
     }
@@ -322,11 +322,19 @@ const Connection = struct {
 
     const TLSClient = union(enum) {
         blocking: tls.Connection(std.net.Stream),
+        blocking_tlsproxy: struct {
+            proxy: tls.Connection(std.net.Stream), // Note, self-referential field. Proxy should be pinned in memory.
+            destination: tls.Connection(*tls.Connection(std.net.Stream)),
+        },
         nonblocking: tls.nonblock.Connection,
 
         fn close(self: *TLSClient) void {
             switch (self.*) {
                 .blocking => |*tls_client| tls_client.close() catch {},
+                .blocking_tlsproxy => |*tls_in_tls| {
+                    tls_in_tls.destination.close() catch {};
+                    tls_in_tls.proxy.close() catch {};
+                },
                 .nonblocking => {},
             }
         }
@@ -375,9 +383,6 @@ pub const Request = struct {
     // List of request headers
     headers: std.ArrayListUnmanaged(std.http.Header),
 
-    // whether or not we expect this connection to be secure
-    _secure: bool,
-
     // whether or not we should keep the underlying socket open and and usable
     // for other requests
     _keepalive: bool,
@@ -385,6 +390,10 @@ pub const Request = struct {
     // extracted from request_uri
     _request_port: u16,
     _request_host: []const u8,
+    // Whether or not we expect this connection to be secure, connection may still be secure due to proxy
+    _request_secure: bool,
+    // Whether or not we expect the SIMPLE/CONNECT proxy connection to be secure
+    _proxy_secure: bool,
 
     // extracted from connect_uri
     _connect_port: u16,
@@ -470,11 +479,12 @@ pub const Request = struct {
             .method = method,
             .notification = null,
             .arena = state.arena.allocator(),
-            ._secure = decomposed.secure,
             ._connect_host = decomposed.connect_host,
             ._connect_port = decomposed.connect_port,
+            ._proxy_secure = decomposed.proxy_secure,
             ._request_host = decomposed.request_host,
             ._request_port = decomposed.request_port,
+            ._request_secure = decomposed.request_secure,
             ._state = state,
             ._client = client,
             ._aborter = null,
@@ -506,12 +516,13 @@ pub const Request = struct {
     }
 
     const DecomposedURL = struct {
-        secure: bool,
         connect_port: u16,
         connect_host: []const u8,
         connect_uri: *const std.Uri,
+        proxy_secure: bool,
         request_port: u16,
         request_host: []const u8,
+        request_secure: bool,
     };
     fn decomposeURL(client: *const Client, uri: *const Uri) !DecomposedURL {
         if (uri.host == null) {
@@ -526,27 +537,31 @@ pub const Request = struct {
             connect_host = proxy.host.?.percent_encoded;
         }
 
-        const is_connect_proxy = client.isConnectProxy();
-
-        var secure: bool = undefined;
-        const scheme = if (is_connect_proxy) uri.scheme else connect_uri.scheme;
-        if (std.ascii.eqlIgnoreCase(scheme, "https")) {
-            secure = true;
-        } else if (std.ascii.eqlIgnoreCase(scheme, "http")) {
-            secure = false;
+        var request_secure: bool = undefined;
+        if (std.ascii.eqlIgnoreCase(uri.scheme, "https")) {
+            request_secure = true;
+        } else if (std.ascii.eqlIgnoreCase(uri.scheme, "http")) {
+            request_secure = false;
         } else {
             return error.UnsupportedUriScheme;
         }
-        const request_port: u16 = uri.port orelse if (secure) 443 else 80;
-        const connect_port: u16 = connect_uri.port orelse (if (is_connect_proxy) 80 else request_port);
+        const proxy_secure = client.http_proxy != null and std.ascii.eqlIgnoreCase(client.http_proxy.?.scheme, "https");
+
+        const request_port: u16 = uri.port orelse if (request_secure) 443 else 80;
+        const connect_port: u16 = connect_uri.port orelse blk: {
+            if (client.isConnectProxy()) {
+                if (proxy_secure) break :blk 443 else break :blk 80;
+            } else break :blk request_port;
+        };
 
         return .{
-            .secure = secure,
             .connect_port = connect_port,
             .connect_host = connect_host,
             .connect_uri = connect_uri,
+            .proxy_secure = proxy_secure,
             .request_port = request_port,
             .request_host = request_host,
+            .request_secure = request_secure,
         };
     }
 
@@ -655,19 +670,50 @@ pub const Request = struct {
             };
             self._connection = connection;
 
-            const is_connect_proxy = self._client.isConnectProxy();
-            if (is_connect_proxy) {
-                try SyncHandler.connect(self);
-            }
+            const tls_config = tls.config.Client{
+                .host = self._request_host,
+                .root_ca = self._client.root_ca,
+                .insecure_skip_verify = self._tls_verify_host == false,
+                // .key_log_callback = tls.config.key_log.callback,
+            };
 
-            if (self._secure) {
+            // proxy
+            const is_connect_proxy = self._client.isConnectProxy();
+
+            if (is_connect_proxy) {
+                var proxy_conn: SyncHandler.Conn = .{ .plain = self._connection.?.socket };
+
+                if (self._proxy_secure) {
+                    // Create an underlying TLS stream with the proxy
+                    var proxy_tls_config = tls_config;
+                    proxy_tls_config.host = self._connect_host;
+                    var proxy_conn_tls = try tls.client(std.net.Stream{ .handle = socket }, proxy_tls_config);
+                    proxy_conn = .{ .tls = &proxy_conn_tls };
+                }
+
+                // Connect to the proxy
+                try SyncHandler.connect(self, &proxy_conn);
+
+                if (self._proxy_secure) {
+                    if (self._request_secure) {
+                        // If secure endpoint, create the main TLS stream encapsulated into the TLS stream proxy
+                        self._connection.?.tls = .{
+                            .blocking_tlsproxy = .{
+                                .proxy = proxy_conn.tls.*,
+                                .destination = undefined,
+                            },
+                        };
+                        const proxy = &self._connection.?.tls.?.blocking_tlsproxy.proxy;
+                        self._connection.?.tls.?.blocking_tlsproxy.destination = try tls.client(proxy, tls_config);
+                    } else {
+                        // Otherwise, just use the TLS stream proxy
+                        self._connection.?.tls = .{ .blocking = proxy_conn.tls.* };
+                    }
+                }
+            }
+            if (self._request_secure and !self._proxy_secure and !self._client.isForwardProxy()) {
                 self._connection.?.tls = .{
-                    .blocking = try tls.client(std.net.Stream{ .handle = socket }, .{
-                        .host = if (is_connect_proxy) self._request_host else self._connect_host,
-                        .root_ca = self._client.root_ca,
-                        .insecure_skip_verify = self._tls_verify_host == false,
-                        // .key_log_callback = tls.config.key_log.callback,
-                    }),
+                    .blocking = try tls.client(std.net.Stream{ .handle = socket }, tls_config),
                 };
             }
 
@@ -746,7 +792,8 @@ pub const Request = struct {
             .conn = .{ .handler = async_handler, .protocol = .{ .plain = {} } },
         };
 
-        if (self._secure) {
+        if (self._client.isConnectProxy() and self._proxy_secure) log.warn(.http, "ASYNC TLS CONNECT no impl.", .{});
+        if (self._request_secure) {
             if (self._connection_from_keepalive) {
                 // If the connection came from the keepalive pool, than we already
                 // have a TLS Connection.
@@ -755,7 +802,7 @@ pub const Request = struct {
                 std.debug.assert(connection.tls == null);
                 async_handler.conn.protocol = .{
                     .handshake = tls.nonblock.Client.init(.{
-                        .host = if (self._client.isConnectProxy()) self._request_host else self._connect_host,
+                        .host = if (self._client.isConnectProxy()) self._request_host else self._connect_host, // looks wrong
                         .root_ca = self._client.root_ca,
                         .insecure_skip_verify = self._tls_verify_host == false,
                         .key_log_callback = tls.config.key_log.callback,
@@ -804,7 +851,7 @@ pub const Request = struct {
         try self.headers.append(arena, .{ .name = "User-Agent", .value = "Lightpanda/1.0" });
         try self.headers.append(arena, .{ .name = "Accept", .value = "*/*" });
 
-        if (self._client.isSimpleProxy()) {
+        if (self._client.isForwardProxy()) {
             if (self._client.proxy_auth) |proxy_auth| {
                 try self.headers.append(arena, .{ .name = "Proxy-Authorization", .value = proxy_auth });
             }
@@ -835,9 +882,10 @@ pub const Request = struct {
         const decomposed = try decomposeURL(self._client, self.request_uri);
         self.connect_uri = decomposed.connect_uri;
         self._request_host = decomposed.request_host;
+        self._request_secure = decomposed.request_secure;
         self._connect_host = decomposed.connect_host;
         self._connect_port = decomposed.connect_port;
-        self._secure = decomposed.secure;
+        self._proxy_secure = decomposed.proxy_secure;
         self._keepalive = false;
         self._redirect_count = redirect_count + 1;
 
@@ -885,7 +933,9 @@ pub const Request = struct {
             return null;
         }
 
-        return self._client.connection_manager.get(self._secure, self._connect_host, self._connect_port, blocking);
+        // A simple http proxy to an https destination is made into tls by the proxy, we see it as a plain connection
+        const expect_tls = self._proxy_secure or (self._request_secure and !self._client.isForwardProxy());
+        return self._client.connection_manager.get(expect_tls, self._connect_host, self._connect_port, blocking);
     }
 
     fn createSocket(self: *Request, blocking: bool) !struct { posix.socket_t, std.net.Address } {
@@ -908,7 +958,7 @@ pub const Request = struct {
     }
 
     fn buildHeader(self: *Request) ![]const u8 {
-        const proxied = self._client.isSimpleProxy();
+        const proxied = self._client.isForwardProxy();
 
         const buf = self._state.header_buf;
         var fbs = std.io.fixedBufferStream(buf);
@@ -1723,7 +1773,15 @@ const SyncHandler = struct {
         var conn: Conn = blk: {
             const c = request._connection.?;
             if (c.tls) |*tls_client| {
-                break :blk .{ .tls = &tls_client.blocking };
+                switch (tls_client.*) {
+                    .nonblocking => unreachable,
+                    .blocking => |*blocking| {
+                        break :blk .{ .tls = blocking };
+                    },
+                    .blocking_tlsproxy => |*blocking_tlsproxy| {
+                        break :blk .{ .tls_in_tls = &blocking_tlsproxy.destination };
+                    },
+                }
             }
             break :blk .{ .plain = c.socket };
         };
@@ -1806,11 +1864,9 @@ const SyncHandler = struct {
 
     // Unfortunately, this is called from the Request doSendSync since we need
     // to do this before setting up our TLS connection.
-    fn connect(request: *Request) !void {
-        const socket = request._connection.?.socket;
-
+    fn connect(request: *Request, conn: *Conn) !void {
         const header = try request.buildConnectHeader();
-        try Conn.writeAll(socket, header);
+        try conn.writeAll(header);
 
         var pos: usize = 0;
         var reader = request.newReader();
@@ -1821,7 +1877,7 @@ const SyncHandler = struct {
             // we only send CONNECT requests on newly established connections
             // and maybeRetryOrErr is only for connections that might have been
             // closed while being kept-alive
-            const n = try posix.read(socket, read_buf[pos..]);
+            const n = try conn.read(read_buf[pos..]);
             if (n == 0) {
                 return error.ConnectionResetByPeer;
             }
@@ -1833,6 +1889,7 @@ const SyncHandler = struct {
 
             // we don't have enough data yet.
         }
+        return;
     }
 
     fn maybeRetryOrErr(self: *SyncHandler, err: anyerror) !Response {
@@ -1882,12 +1939,13 @@ const SyncHandler = struct {
     }
 
     const Conn = union(enum) {
+        tls_in_tls: *tls.Connection(*tls.Connection(std.net.Stream)),
         tls: *tls.Connection(std.net.Stream),
         plain: posix.socket_t,
 
         fn sendRequest(self: *Conn, header: []const u8, body: ?[]const u8) !void {
             switch (self.*) {
-                .tls => |tls_client| {
+                inline .tls, .tls_in_tls => |tls_client| {
                     try tls_client.writeAll(header);
                     if (body) |b| {
                         try tls_client.writeAll(b);
@@ -1901,7 +1959,7 @@ const SyncHandler = struct {
                         };
                         return writeAllIOVec(socket, &vec);
                     }
-                    return writeAll(socket, header);
+                    return self.writeAll(header);
                 },
             }
         }
@@ -1909,6 +1967,7 @@ const SyncHandler = struct {
         fn read(self: *Conn, buf: []u8) !usize {
             const n = switch (self.*) {
                 .tls => |tls_client| try tls_client.read(buf),
+                .tls_in_tls => |tls_client| try tls_client.read(buf),
                 .plain => |socket| try posix.read(socket, buf),
             };
             if (n == 0) {
@@ -1917,6 +1976,19 @@ const SyncHandler = struct {
             return n;
         }
 
+        fn writeAll(self: *Conn, data: []const u8) !void {
+            switch (self.*) {
+                .tls => |tls_client| try tls_client.writeAll(data),
+                .tls_in_tls => |tls_client| try tls_client.writeAll(data),
+                .plain => |socket| {
+                    var i: usize = 0;
+                    while (i < data.len) {
+                        i += try posix.write(socket, data[i..]);
+                    }
+                },
+            }
+        }
+
         fn writeAllIOVec(socket: posix.socket_t, vec: []posix.iovec_const) !void {
             var i: usize = 0;
             while (true) {
@@ -1932,13 +2004,6 @@ const SyncHandler = struct {
                 vec[i].len -= n;
             }
         }
-
-        fn writeAll(socket: posix.socket_t, data: []const u8) !void {
-            var i: usize = 0;
-            while (i < data.len) {
-                i += try posix.write(socket, data[i..]);
-            }
-        }
     };
 
     // We don't ask for encoding, but some providers (CloudFront!!)
@@ -2083,6 +2148,7 @@ const Reader = struct {
         if (result.done == false) {
             // CONNECT responses should not have a body. If the header is
             // done, then the entire response should be done.
+            log.info(.http_client, "InvalidConnectResponse", .{ .status = self.response.status, .unprocessed = result.unprocessed });
             return error.InvalidConnectResponse;
         }
 
@@ -2909,14 +2975,14 @@ const ConnectionManager = struct {
         self.connection_pool.deinit();
     }
 
-    fn get(self: *ConnectionManager, secure: bool, host: []const u8, port: u16, blocking: bool) ?*Connection {
+    fn get(self: *ConnectionManager, expect_tls: bool, host: []const u8, port: u16, blocking: bool) ?*Connection {
         self.mutex.lock();
         defer self.mutex.unlock();
 
         var node = self.idle.first;
         while (node) |n| {
             const connection = n.data;
-            if (std.ascii.eqlIgnoreCase(connection.host, host) and connection.port == port and connection.blocking == blocking and ((connection.tls == null) == !secure)) {
+            if (std.ascii.eqlIgnoreCase(connection.host, host) and connection.port == port and connection.blocking == blocking and ((connection.tls == null) == !expect_tls)) {
                 self.count -= 1;
                 self.idle.remove(n);
                 self.node_pool.destroy(n);

src/log.zig

@@ -39,12 +39,13 @@ pub const Scope = enum {
     unknown_prop,
     web_api,
     xhr,
+    polyfill,
 };
 
 const Opts = struct {
     format: Format = if (is_debug) .pretty else .logfmt,
     level: Level = if (is_debug) .info else .warn,
-    filter_scopes: []const Scope = &.{.unknown_prop},
+    filter_scopes: []const Scope = &.{},
 };
 
 pub var opts = Opts{};

src/main_wpt.zig

@@ -126,8 +126,6 @@ fn run(
     });
     defer runner.deinit();
 
-    try polyfill.load(arena, runner.page.main_context);
-
     // loop over the scripts.
     const doc = parser.documentHTMLToDocument(runner.page.window.document);
     const scripts = try parser.documentGetElementsByTagName(doc, "script");

src/runtime/js.zig

@@ -81,14 +81,14 @@ pub fn Env(comptime State: type, comptime WebApis: type) type {
     // that looks like:
     //
     // const TypeLookup = struct {
-    //     comptime cat: usize = TypeMeta{.index = 0, ...},
-    //     comptime owner: usize = TypeMeta{.index = 1, ...},
+    //     comptime cat: usize = 0,
+    //     comptime owner: usize = 1,
     //     ...
     // }
     //
     // So to get the template index of `owner`, we can do:
     //
-    //  const index_id = @field(type_lookup, @typeName(@TypeOf(res)).index;
+    //  const index_id = @field(type_lookup, @typeName(@TypeOf(res));
     //
     const TypeLookup = comptime blk: {
         var fields: [Types.len]std.builtin.Type.StructField = undefined;
@@ -103,15 +103,12 @@ pub fn Env(comptime State: type, comptime WebApis: type) type {
                 @compileError(std.fmt.comptimePrint("Prototype '{s}' for type '{s} must be a pointer", .{ @typeName(Struct.prototype), @typeName(Struct) }));
             }
 
-            const subtype: ?SubType = if (@hasDecl(Struct, "subtype")) Struct.subtype else null;
-
-            const R = Receiver(Struct);
             fields[i] = .{
-                .name = @typeName(R),
-                .type = TypeMeta,
+                .name = @typeName(Receiver(Struct)),
+                .type = usize,
                 .is_comptime = true,
                 .alignment = @alignOf(usize),
-                .default_value_ptr = &TypeMeta{ .index = i, .subtype = subtype },
+                .default_value_ptr = &i,
             };
         }
         break :blk @Type(.{ .@"struct" = .{
@@ -146,7 +143,7 @@ pub fn Env(comptime State: type, comptime WebApis: type) type {
             if (@hasDecl(Struct, "prototype")) {
                 const TI = @typeInfo(Struct.prototype);
                 const proto_name = @typeName(Receiver(TI.pointer.child));
-                prototype_index = @field(TYPE_LOOKUP, proto_name).index;
+                prototype_index = @field(TYPE_LOOKUP, proto_name);
             }
             table[i] = prototype_index;
         }
@@ -158,10 +155,7 @@ pub fn Env(comptime State: type, comptime WebApis: type) type {
 
         platform: ?*const Platform,
 
-        snapshot_creator: v8.SnapshotCreator,
-
         // the global isolate
-        // owned by snapshot_creator.
         isolate: v8.Isolate,
 
         // just kept around because we need to free it on deinit
@@ -171,7 +165,7 @@ pub fn Env(comptime State: type, comptime WebApis: type) type {
         // access to its TunctionTemplate (the thing we need to create an instance
         // of it)
         // I.e.:
-        // const index = @field(TYPE_LOOKUP, @typeName(type_name)).index
+        // const index = @field(TYPE_LOOKUP, @typeName(type_name))
         // const template = templates[index];
         templates: [Types.len]v8.FunctionTemplate,
 
@@ -180,6 +174,8 @@ pub fn Env(comptime State: type, comptime WebApis: type) type {
         // index.
         prototype_lookup: [Types.len]u16,
 
+        meta_lookup: [Types.len]TypeMeta,
+
         const Self = @This();
 
         const TYPE_LOOKUP = TypeLookup{};
@@ -196,12 +192,11 @@ pub fn Env(comptime State: type, comptime WebApis: type) type {
             params.array_buffer_allocator = v8.createDefaultArrayBufferAllocator();
             errdefer v8.destroyArrayBufferAllocator(params.array_buffer_allocator.?);
 
-            var snapshot_creator = v8.SnapshotCreator.init(params);
-            errdefer snapshot_creator.deinit();
+            var isolate = v8.Isolate.init(params);
+            errdefer isolate.deinit();
 
-            var isolate = snapshot_creator.getIsolate();
-
-            // snapshot_creator enters the isolate for us.
+            isolate.enter();
+            errdefer isolate.exit();
 
             isolate.setHostInitializeImportMetaObjectCallback(struct {
                 fn callback(c_context: ?*v8.C_Context, c_module: ?*v8.C_Module, c_meta: ?*v8.C_Value) callconv(.C) void {
@@ -222,18 +217,18 @@ pub fn Env(comptime State: type, comptime WebApis: type) type {
 
             env.* = .{
                 .platform = platform,
-                .snapshot_creator = snapshot_creator,
                 .isolate = isolate,
                 .templates = undefined,
                 .allocator = allocator,
                 .isolate_params = params,
+                .meta_lookup = undefined,
                 .prototype_lookup = undefined,
             };
 
             // Populate our templates lookup. generateClass creates the
             // v8.FunctionTemplate, which we store in our env.templates.
             // The ordering doesn't matter. What matters is that, given a type
-            // we can get its index via: @field(TYPE_LOOKUP, type_name).index
+            // we can get its index via: @field(TYPE_LOOKUP, type_name)
             const templates = &env.templates;
             inline for (Types, 0..) |s, i| {
                 @setEvalBranchQuota(10_000);
@@ -242,6 +237,7 @@ pub fn Env(comptime State: type, comptime WebApis: type) type {
 
             // Above, we've created all our our FunctionTemplates. Now that we
             // have them all, we can hook up the prototypes.
+            const meta_lookup = &env.meta_lookup;
             inline for (Types, 0..) |s, i| {
                 const Struct = s.defaultValue().?;
                 if (@hasDecl(Struct, "prototype")) {
@@ -254,75 +250,45 @@ pub fn Env(comptime State: type, comptime WebApis: type) type {
                     // Just like we said above, given a type, we can get its
                     // template index.
 
-                    const proto_index = @field(TYPE_LOOKUP, proto_name).index;
+                    const proto_index = @field(TYPE_LOOKUP, proto_name);
                     templates[i].inherit(templates[proto_index]);
                 }
+
+                // while we're here, let's populate our meta lookup
+                const subtype: ?SubType = if (@hasDecl(Struct, "subtype")) Struct.subtype else null;
+
+                const proto_offset = comptime blk: {
+                    if (!@hasField(Struct, "proto")) {
+                        break :blk 0;
+                    }
+                    const proto_info = std.meta.fieldInfo(Struct, .proto);
+                    if (@typeInfo(proto_info.type) == .pointer) {
+                        // we store the offset as a negative, to so that,
+                        // when we reverse this, we know that it's
+                        // behind a pointer that we need to resolve.
+                        break :blk -@offsetOf(Struct, "proto");
+                    }
+                    break :blk @offsetOf(Struct, "proto");
+                };
+
+                meta_lookup[i] = .{
+                    .index = i,
+                    .subtype = subtype,
+                    .proto_offset = proto_offset,
+                };
             }
 
             return env;
         }
 
         pub fn deinit(self: *Self) void {
-            // The snapshot_creator owns the isolate. So it exit and deinit it
-            // for us.
-            self.snapshot_creator.deinit();
+            self.isolate.exit();
+            self.isolate.deinit();
             v8.destroyArrayBufferAllocator(self.isolate_params.array_buffer_allocator.?);
             self.allocator.destroy(self.isolate_params);
             self.allocator.destroy(self);
         }
 
-        pub fn snapshot(self: *Self, default_ctx: *const JsContext) v8.StartupData {
-            self.snapshot_creator.setDefaultContextWithCallbacks(
-                default_ctx.v8_context,
-                // SerializeInternalFieldsCallback serializes internal fields
-                // of V8 objects that contain embedder data
-                .{
-                    .callback = struct {
-                        fn callback(holder: ?*v8.C_Object, index: c_int, data: ?*anyopaque) callconv(.C) v8.StartupData {
-                            _ = holder;
-                            _ = index;
-                            _ = data;
-                            // TODO
-                            std.debug.print("SerializeInternalFieldsCallback\n", .{});
-                            return .{};
-                        }
-                    }.callback,
-                    .data = null,
-                },
-                // SerializeContextDataCallback serializes context-specific
-                // state (globals, modules, etc.)
-                .{
-                    .callback = struct {
-                        fn callback(context: ?*v8.C_Context, index: c_int, data: ?*anyopaque) callconv(.C) v8.StartupData {
-                            _ = context;
-                            _ = index;
-                            _ = data;
-                            // TODO
-                            std.debug.print("SerializeContextDataCallback\n", .{});
-                            return .{};
-                        }
-                    }.callback,
-                    .data = null,
-                },
-                // SerializeAPIWrapperCallback serializes API wrappers that
-                // bridge V8 and Native objects
-                .{
-                    .callback = struct {
-                        fn callback(holder: ?*v8.C_Object, ptr: ?*anyopaque, data: ?*anyopaque) callconv(.C) v8.StartupData {
-                            _ = holder;
-                            _ = ptr;
-                            _ = data;
-                            // TODO
-                            std.debug.print("SerializeAPIWrapperCallback\n", .{});
-                            return .{};
-                        }
-                    }.callback,
-                    .data = null,
-                },
-            );
-            return self.snapshot_creator.createBlob();
-        }
-
         pub fn newInspector(self: *Self, arena: Allocator, ctx: anytype) !Inspector {
             return Inspector.init(arena, self.isolate, ctx);
         }
@@ -398,13 +364,25 @@ pub fn Env(comptime State: type, comptime WebApis: type) type {
                 self.context_arena.deinit();
             }
 
+            pub const CreateJsContextOpt = struct {
+                global_callback: ?GlobalMissingCallback = null,
+                compilation_callback: ?CompilationCallback = null,
+            };
+
             // Only the top JsContext in the Main ExecutionWorld should hold a handle_scope.
             // A v8.HandleScope is like an arena. Once created, any "Local" that
             // v8 creates will be released (or at least, releasable by the v8 GC)
             // when the handle_scope is freed.
             // We also maintain our own "context_arena" which allows us to have
             // all page related memory easily managed.
-            pub fn createJsContext(self: *ExecutionWorld, global: anytype, state: State, module_loader: anytype, enter: bool) !*JsContext {
+            pub fn createJsContext(
+                self: *ExecutionWorld,
+                global: anytype,
+                state: State,
+                module_loader: anytype,
+                enter: bool,
+                opt: CreateJsContextOpt,
+            ) !*JsContext {
                 std.debug.assert(self.js_context == null);
 
                 const ModuleLoader = switch (@typeInfo(@TypeOf(module_loader))) {
@@ -433,6 +411,30 @@ pub fn Env(comptime State: type, comptime WebApis: type) type {
                     const global_template = js_global.getInstanceTemplate();
                     global_template.setInternalFieldCount(1);
 
+                    // Configure the missing property callback on the global
+                    // object.
+                    if (opt.global_callback != null) {
+                        const 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);
+                                    const _isolate = info.getIsolate();
+                                    const v8_context = _isolate.getCurrentContext();
+
+                                    const js_context: *JsContext = @ptrFromInt(v8_context.getEmbedderData(1).castTo(v8.BigInt).getUint64());
+
+                                    const property = valueToString(js_context.call_arena, .{ .handle = c_name.? }, _isolate, v8_context) catch "???";
+                                    if (js_context.global_callback.?.missing(property, js_context)) {
+                                        return v8.Intercepted.Yes;
+                                    }
+                                    return v8.Intercepted.No;
+                                }
+                            }.callback,
+                            .flags = v8.PropertyHandlerFlags.NonMasking | v8.PropertyHandlerFlags.OnlyInterceptStrings,
+                        };
+                        global_template.setNamedProperty(configuration, null);
+                    }
+
                     // All the FunctionTemplates that we created and setup in Env.init
                     // are now going to get associated with our global instance.
                     inline for (Types, 0..) |s, i| {
@@ -449,7 +451,7 @@ pub fn Env(comptime State: type, comptime WebApis: type) type {
                     if (@hasDecl(Global, "prototype")) {
                         const proto_type = Receiver(@typeInfo(Global.prototype).pointer.child);
                         const proto_name = @typeName(proto_type);
-                        const proto_index = @field(TYPE_LOOKUP, proto_name).index;
+                        const proto_index = @field(TYPE_LOOKUP, proto_name);
                         js_global.inherit(templates[proto_index]);
                     }
 
@@ -472,7 +474,7 @@ pub fn Env(comptime State: type, comptime WebApis: type) type {
                                 @compileError("Type '" ++ @typeName(Struct) ++ "' defines an unknown prototype: " ++ proto_name);
                             }
 
-                            const proto_index = @field(TYPE_LOOKUP, proto_name).index;
+                            const proto_index = @field(TYPE_LOOKUP, proto_name);
                             const proto_obj = templates[proto_index].getFunction(v8_context).toObject();
 
                             const self_obj = templates[i].getFunction(v8_context).toObject();
@@ -507,6 +509,7 @@ pub fn Env(comptime State: type, comptime WebApis: type) type {
                     .isolate = isolate,
                     .v8_context = v8_context,
                     .templates = &env.templates,
+                    .meta_lookup = &env.meta_lookup,
                     .handle_scope = handle_scope,
                     .call_arena = self.call_arena.allocator(),
                     .context_arena = self.context_arena.allocator(),
@@ -514,6 +517,8 @@ pub fn Env(comptime State: type, comptime WebApis: type) type {
                         .ptr = safe_module_loader,
                         .func = ModuleLoader.fetchModuleSource,
                     },
+                    .global_callback = opt.global_callback,
+                    .compilation_callback = opt.compilation_callback,
                 };
 
                 var js_context = &self.js_context.?;
@@ -609,9 +614,12 @@ pub fn Env(comptime State: type, comptime WebApis: type) type {
             v8_context: v8.Context,
             handle_scope: ?v8.HandleScope,
 
-            // references the Env.template array
+            // references Env.templates
             templates: []v8.FunctionTemplate,
 
+            // references the Env.meta_lookup
+            meta_lookup: []TypeMeta,
+
             // An arena for the lifetime of a call-group. Gets reset whenever
             // call_depth reaches 0.
             call_arena: Allocator,
@@ -653,9 +661,6 @@ pub fn Env(comptime State: type, comptime WebApis: type) type {
             // Some Zig types have code to execute to cleanup
             destructor_callbacks: std.ArrayListUnmanaged(DestructorCallback) = .empty,
 
-            // Some Zig types have code to execute when the call scope ends
-            call_scope_end_callbacks: std.ArrayListUnmanaged(CallScopeEndCallback) = .empty,
-
             // Our module cache: normalized module specifier => module.
             module_cache: std.StringHashMapUnmanaged(PersistentModule) = .empty,
 
@@ -666,6 +671,12 @@ pub fn Env(comptime State: type, comptime WebApis: type) type {
             // necessary to lookup/store the dependent module in the module_cache.
             module_identifier: std.AutoHashMapUnmanaged(u32, []const u8) = .empty,
 
+            // Global callback is called when a property is missing on the
+            // global object.
+            global_callback: ?GlobalMissingCallback = null,
+
+            compilation_callback: ?CompilationCallback = null,
+
             const ModuleLoader = struct {
                 ptr: *anyopaque,
                 func: *const fn (ptr: *anyopaque, specifier: []const u8) anyerror!?[]const u8,
@@ -752,6 +763,8 @@ pub fn Env(comptime State: type, comptime WebApis: type) type {
             }
 
             pub fn exec(self: *JsContext, src: []const u8, name: ?[]const u8) !Value {
+                if (self.compilation_callback) |cbk| cbk.script(src, name, self);
+
                 const isolate = self.isolate;
                 const v8_context = self.v8_context;
 
@@ -775,6 +788,8 @@ pub fn Env(comptime State: type, comptime WebApis: type) type {
             // compile and eval a JS module
             // It doesn't wait for callbacks execution
             pub fn module(self: *JsContext, src: []const u8, url: []const u8, cacheable: bool) !void {
+                if (self.compilation_callback) |cbk| cbk.module(src, url, self);
+
                 if (!cacheable) {
                     return self.moduleNoCache(src, url);
                 }
@@ -886,10 +901,6 @@ pub fn Env(comptime State: type, comptime WebApis: type) type {
                             try self.destructor_callbacks.append(context_arena, DestructorCallback.init(value));
                         }
 
-                        if (comptime @hasDecl(ptr.child, "jsCallScopeEnd")) {
-                            try self.call_scope_end_callbacks.append(context_arena, CallScopeEndCallback.init(value));
-                        }
-
                         // Sometimes we're creating a new v8.Object, like when
                         // we're returning a value from a function. In those cases
                         // we have the FunctionTemplate, and we can get an object
@@ -910,12 +921,13 @@ pub fn Env(comptime State: type, comptime WebApis: type) type {
                             // well as any meta data we'll need to use it later.
                             // See the TaggedAnyOpaque struct for more details.
                             const tao = try context_arena.create(TaggedAnyOpaque);
-                            const meta = @field(TYPE_LOOKUP, @typeName(ptr.child));
+                            const meta_index = @field(TYPE_LOOKUP, @typeName(ptr.child));
+                            const meta = self.meta_lookup[meta_index];
+
                             tao.* = .{
                                 .ptr = value,
                                 .index = meta.index,
                                 .subtype = meta.subtype,
-                                .offset = if (@typeInfo(ptr.child) != .@"opaque" and @hasField(ptr.child, "proto")) @offsetOf(ptr.child, "proto") else -1,
                             };
 
                             js_obj.setInternalField(0, v8.External.init(isolate, tao));
@@ -971,7 +983,7 @@ pub fn Env(comptime State: type, comptime WebApis: type) type {
                             }
                             if (@hasField(TypeLookup, @typeName(ptr.child))) {
                                 const js_obj = js_value.castTo(v8.Object);
-                                return typeTaggedAnyOpaque(named_function, *Receiver(ptr.child), js_obj);
+                                return self.typeTaggedAnyOpaque(named_function, *Receiver(ptr.child), js_obj);
                             }
                         },
                         .slice => {
@@ -1266,7 +1278,7 @@ pub fn Env(comptime State: type, comptime WebApis: type) type {
                                 // of having a version of typeTaggedAnyOpaque which
                                 // returns a boolean or an optional, we rely on the
                                 // main implementation and just handle the error.
-                                const attempt = typeTaggedAnyOpaque(named_function, *Receiver(ptr.child), js_obj);
+                                const attempt = self.typeTaggedAnyOpaque(named_function, *Receiver(ptr.child), js_obj);
                                 if (attempt) |value| {
                                     return .{ .value = value };
                                 } else |_| {
@@ -1452,6 +1464,78 @@ pub fn Env(comptime State: type, comptime WebApis: type) type {
                 try self.module_identifier.putNoClobber(arena, m.getIdentityHash(), owned_specifier);
                 return m.handle;
             }
+
+            // Reverses the mapZigInstanceToJs, making sure that our TaggedAnyOpaque
+            // contains a ptr to the correct type.
+            fn typeTaggedAnyOpaque(self: *const JsContext, comptime named_function: NamedFunction, comptime R: type, js_obj: v8.Object) !R {
+                const ti = @typeInfo(R);
+                if (ti != .pointer) {
+                    @compileError(named_function.full_name ++ "has a non-pointer Zig parameter type: " ++ @typeName(R));
+                }
+
+                const T = ti.pointer.child;
+                if (comptime isEmpty(T)) {
+                    // Empty structs aren't stored as TOAs and there's no data
+                    // stored in the JSObject's IntenrnalField. Why bother when
+                    // we can just return an empty struct here?
+                    return @constCast(@as(*const T, &.{}));
+                }
+
+                // if it isn't an empty struct, then the v8.Object should have an
+                // InternalFieldCount > 0, since our toa pointer should be embedded
+                // at index 0 of the internal field count.
+                if (js_obj.internalFieldCount() == 0) {
+                    return error.InvalidArgument;
+                }
+
+                const type_name = @typeName(T);
+                if (@hasField(TypeLookup, type_name) == false) {
+                    @compileError(named_function.full_name ++ "has an unknown Zig type: " ++ @typeName(R));
+                }
+
+                const op = js_obj.getInternalField(0).castTo(v8.External).get();
+                const toa: *TaggedAnyOpaque = @alignCast(@ptrCast(op));
+                const expected_type_index = @field(TYPE_LOOKUP, type_name);
+
+                var type_index = toa.index;
+                if (type_index == expected_type_index) {
+                    return @alignCast(@ptrCast(toa.ptr));
+                }
+
+                const meta_lookup = self.meta_lookup;
+
+                // If we have N levels deep of prototypes, then the offset is the
+                // sum at each level...
+                var total_offset: usize = 0;
+
+                // ...unless, the proto is behind a pointer, then total_offset will
+                // get reset to 0, and our base_ptr will move to the address
+                // referenced by the proto field.
+                var base_ptr: usize = @intFromPtr(toa.ptr);
+
+                // search through the prototype tree
+                while (true) {
+                    const proto_offset = meta_lookup[type_index].proto_offset;
+                    if (proto_offset < 0) {
+                        base_ptr = @as(*align(1) usize, @ptrFromInt(base_ptr + total_offset + @as(usize, @intCast(-proto_offset)))).*;
+                        total_offset = 0;
+                    } else {
+                        total_offset += @intCast(proto_offset);
+                    }
+
+                    const prototype_index = PROTOTYPE_TABLE[type_index];
+                    if (prototype_index == expected_type_index) {
+                        return @ptrFromInt(base_ptr + total_offset);
+                    }
+
+                    if (prototype_index == type_index) {
+                        // When a type has itself as the prototype, then we've
+                        // reached the end of the chain.
+                        return error.InvalidArgument;
+                    }
+                    type_index = prototype_index;
+                }
+            }
         };
 
         pub const Function = struct {
@@ -1486,7 +1570,7 @@ pub fn Env(comptime State: type, comptime WebApis: type) type {
                 const this_obj = if (@TypeOf(value) == JsObject)
                     value.js_obj
                 else
-                    try self.js_context.valueToExistingObject(value);
+                    (try self.js_context.zigValueToJs(value)).castTo(v8.Object);
 
                 return .{
                     .id = self.id,
@@ -2065,7 +2149,7 @@ pub fn Env(comptime State: type, comptime WebApis: type) type {
             const template = v8.FunctionTemplate.initCallback(isolate, struct {
                 fn callback(raw_info: ?*const v8.C_FunctionCallbackInfo) callconv(.c) void {
                     const info = v8.FunctionCallbackInfo.initFromV8(raw_info);
-                    var caller = Caller(Self, State).init(info);
+                    var caller = Caller(JsContext, State).init(info);
                     defer caller.deinit();
 
                     // See comment above. We generateConstructor on all types
@@ -2110,7 +2194,7 @@ pub fn Env(comptime State: type, comptime WebApis: type) type {
             const function_template = v8.FunctionTemplate.initCallback(isolate, struct {
                 fn callback(raw_info: ?*const v8.C_FunctionCallbackInfo) callconv(.c) void {
                     const info = v8.FunctionCallbackInfo.initFromV8(raw_info);
-                    var caller = Caller(Self, State).init(info);
+                    var caller = Caller(JsContext, State).init(info);
                     defer caller.deinit();
 
                     const named_function = comptime NamedFunction.init(Struct, name);
@@ -2127,7 +2211,7 @@ pub fn Env(comptime State: type, comptime WebApis: type) type {
             const function_template = v8.FunctionTemplate.initCallback(isolate, struct {
                 fn callback(raw_info: ?*const v8.C_FunctionCallbackInfo) callconv(.c) void {
                     const info = v8.FunctionCallbackInfo.initFromV8(raw_info);
-                    var caller = Caller(Self, State).init(info);
+                    var caller = Caller(JsContext, State).init(info);
                     defer caller.deinit();
 
                     const named_function = comptime NamedFunction.init(Struct, "static_" ++ name);
@@ -2163,7 +2247,7 @@ pub fn Env(comptime State: type, comptime WebApis: type) type {
             const getter_callback = v8.FunctionTemplate.initCallback(isolate, struct {
                 fn callback(raw_info: ?*const v8.C_FunctionCallbackInfo) callconv(.c) void {
                     const info = v8.FunctionCallbackInfo.initFromV8(raw_info);
-                    var caller = Caller(Self, State).init(info);
+                    var caller = Caller(JsContext, State).init(info);
                     defer caller.deinit();
 
                     const named_function = comptime NamedFunction.init(Struct, "get_" ++ name);
@@ -2184,7 +2268,7 @@ pub fn Env(comptime State: type, comptime WebApis: type) type {
                     const info = v8.FunctionCallbackInfo.initFromV8(raw_info);
                     std.debug.assert(info.length() == 1);
 
-                    var caller = Caller(Self, State).init(info);
+                    var caller = Caller(JsContext, State).init(info);
                     defer caller.deinit();
 
                     const named_function = comptime NamedFunction.init(Struct, "set_" ++ name);
@@ -2205,7 +2289,7 @@ pub fn Env(comptime State: type, comptime WebApis: type) type {
                 .getter = struct {
                     fn callback(idx: u32, raw_info: ?*const v8.C_PropertyCallbackInfo) callconv(.c) u8 {
                         const info = v8.PropertyCallbackInfo.initFromV8(raw_info);
-                        var caller = Caller(Self, State).init(info);
+                        var caller = Caller(JsContext, State).init(info);
                         defer caller.deinit();
 
                         const named_function = comptime NamedFunction.init(Struct, "indexed_get");
@@ -2229,11 +2313,6 @@ pub fn Env(comptime State: type, comptime WebApis: type) type {
 
         fn generateNamedIndexer(comptime Struct: type, template_proto: v8.ObjectTemplate) void {
             if (@hasDecl(Struct, "named_get") == false) {
-                if (comptime builtin.mode == .Debug) {
-                    if (log.enabled(.unknown_prop, .debug)) {
-                        generateDebugNamedIndexer(Struct, template_proto);
-                    }
-                }
                 return;
             }
 
@@ -2241,7 +2320,7 @@ pub fn Env(comptime State: type, comptime WebApis: type) type {
                 .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);
-                        var caller = Caller(Self, State).init(info);
+                        var caller = Caller(JsContext, State).init(info);
                         defer caller.deinit();
 
                         const named_function = comptime NamedFunction.init(Struct, "named_get");
@@ -2263,7 +2342,7 @@ pub fn Env(comptime State: type, comptime WebApis: type) type {
                 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);
+                        var caller = Caller(JsContext, State).init(info);
                         defer caller.deinit();
 
                         const named_function = comptime NamedFunction.init(Struct, "named_set");
@@ -2279,7 +2358,7 @@ pub fn Env(comptime State: type, comptime WebApis: type) type {
                 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);
+                        var caller = Caller(JsContext, State).init(info);
                         defer caller.deinit();
 
                         const named_function = comptime NamedFunction.init(Struct, "named_delete");
@@ -2293,31 +2372,6 @@ pub fn Env(comptime State: type, comptime WebApis: type) type {
             template_proto.setNamedProperty(configuration, null);
         }
 
-        fn generateDebugNamedIndexer(comptime Struct: type, template_proto: v8.ObjectTemplate) void {
-            const 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);
-                        const isolate = info.getIsolate();
-                        const v8_context = isolate.getCurrentContext();
-
-                        const js_context: *JsContext = @ptrFromInt(v8_context.getEmbedderData(1).castTo(v8.BigInt).getUint64());
-
-                        const property = valueToString(js_context.call_arena, .{ .handle = c_name.? }, isolate, v8_context) catch "???";
-                        log.debug(.unknown_prop, "unkown property", .{ .@"struct" = @typeName(Struct), .property = property });
-                        return v8.Intercepted.No;
-                    }
-                }.callback,
-
-                // This is really cool. Without this, we'd intercept _all_ properties
-                // even those explicitly set. So, node.length for example would get routed
-                // to our `named_get`, rather than a `get_length`. This might be
-                // useful if we run into a type that we can't model properly in Zig.
-                .flags = v8.PropertyHandlerFlags.OnlyInterceptStrings | v8.PropertyHandlerFlags.NonMasking,
-            };
-            template_proto.setNamedProperty(configuration, null);
-        }
-
         fn generateUndetectable(comptime Struct: type, template: v8.ObjectTemplate) void {
             const has_js_call_as_function = @hasDecl(Struct, "jsCallAsFunction");
 
@@ -2325,7 +2379,7 @@ pub fn Env(comptime State: type, comptime WebApis: type) type {
                 template.setCallAsFunctionHandler(struct {
                     fn callback(raw_info: ?*const v8.C_FunctionCallbackInfo) callconv(.c) void {
                         const info = v8.FunctionCallbackInfo.initFromV8(raw_info);
-                        var caller = Caller(Self, State).init(info);
+                        var caller = Caller(JsContext, State).init(info);
                         defer caller.deinit();
 
                         const named_function = comptime NamedFunction.init(Struct, "jsCallAsFunction");
@@ -2380,7 +2434,7 @@ pub fn Env(comptime State: type, comptime WebApis: type) type {
                     .one => {
                         const type_name = @typeName(ptr.child);
                         if (@hasField(TypeLookup, type_name)) {
-                            const template = templates[@field(TYPE_LOOKUP, type_name).index];
+                            const template = templates[@field(TYPE_LOOKUP, type_name)];
                             const js_obj = try JsContext.mapZigInstanceToJs(v8_context, template, value);
                             return js_obj.toValue();
                         }
@@ -2416,7 +2470,7 @@ pub fn Env(comptime State: type, comptime WebApis: type) type {
                 .@"struct" => |s| {
                     const type_name = @typeName(T);
                     if (@hasField(TypeLookup, type_name)) {
-                        const template = templates[@field(TYPE_LOOKUP, type_name).index];
+                        const template = templates[@field(TYPE_LOOKUP, type_name)];
                         const js_obj = try JsContext.mapZigInstanceToJs(v8_context, template, value);
                         return js_obj.toValue();
                     }
@@ -2485,69 +2539,6 @@ pub fn Env(comptime State: type, comptime WebApis: type) type {
 
             @compileError("A function returns an unsupported type: " ++ @typeName(T));
         }
-        // Reverses the mapZigInstanceToJs, making sure that our TaggedAnyOpaque
-        // contains a ptr to the correct type.
-        fn typeTaggedAnyOpaque(comptime named_function: NamedFunction, comptime R: type, js_obj: v8.Object) !R {
-            const ti = @typeInfo(R);
-            if (ti != .pointer) {
-                @compileError(named_function.full_name ++ "has a non-pointer Zig parameter type: " ++ @typeName(R));
-            }
-
-            const T = ti.pointer.child;
-            if (comptime isEmpty(T)) {
-                // Empty structs aren't stored as TOAs and there's no data
-                // stored in the JSObject's IntenrnalField. Why bother when
-                // we can just return an empty struct here?
-                return @constCast(@as(*const T, &.{}));
-            }
-
-            // if it isn't an empty struct, then the v8.Object should have an
-            // InternalFieldCount > 0, since our toa pointer should be embedded
-            // at index 0 of the internal field count.
-            if (js_obj.internalFieldCount() == 0) {
-                return error.InvalidArgument;
-            }
-
-            const type_name = @typeName(T);
-            if (@hasField(TypeLookup, type_name) == false) {
-                @compileError(named_function.full_name ++ "has an unknown Zig type: " ++ @typeName(R));
-            }
-
-            const op = js_obj.getInternalField(0).castTo(v8.External).get();
-            const toa: *TaggedAnyOpaque = @alignCast(@ptrCast(op));
-            const expected_type_index = @field(TYPE_LOOKUP, type_name).index;
-
-            var type_index = toa.index;
-            if (type_index == expected_type_index) {
-                return @alignCast(@ptrCast(toa.ptr));
-            }
-
-            // search through the prototype tree
-            while (true) {
-                const prototype_index = PROTOTYPE_TABLE[type_index];
-                if (prototype_index == expected_type_index) {
-                    // -1 is a sentinel value used for non-composition prototype
-                    // This is used with netsurf and we just unsafely cast one
-                    // type to another
-                    const offset = toa.offset;
-                    if (offset == -1) {
-                        return @alignCast(@ptrCast(toa.ptr));
-                    }
-
-                    // A non-negative offset means we're using composition prototype
-                    // (i.e. our struct has a "proto" field). the offset
-                    // reresents the byte offset of the field. We can use that
-                    // + the toa.ptr to get the field
-                    return @ptrFromInt(@intFromPtr(toa.ptr) + @as(usize, @intCast(offset)));
-                }
-                if (prototype_index == type_index) {
-                    // When a type has itself as the prototype, then we've
-                    // reached the end of the chain.
-                    return error.InvalidArgument;
-                }
-                type_index = prototype_index;
-            }
-        }
 
         // An interface for types that want to have their jsDeinit function to be
         // called when the call context ends
@@ -2604,27 +2595,93 @@ pub fn Env(comptime State: type, comptime WebApis: type) type {
                 self.callScopeEndFn(self.ptr);
             }
         };
+
+        // Callback called on global's property mssing.
+        // Return true to intercept the exectution or false to let the call
+        // continue the chain.
+        pub const GlobalMissingCallback = struct {
+            ptr: *anyopaque,
+            missingFn: *const fn (ptr: *anyopaque, name: []const u8, ctx: *JsContext) bool,
+
+            pub fn init(ptr: anytype) GlobalMissingCallback {
+                const T = @TypeOf(ptr);
+                const ptr_info = @typeInfo(T);
+
+                const gen = struct {
+                    pub fn missing(pointer: *anyopaque, name: []const u8, ctx: *JsContext) bool {
+                        const self: T = @ptrCast(@alignCast(pointer));
+                        return ptr_info.pointer.child.missing(self, name, ctx);
+                    }
+                };
+
+                return .{
+                    .ptr = ptr,
+                    .missingFn = gen.missing,
+                };
+            }
+
+            pub fn missing(self: GlobalMissingCallback, name: []const u8, ctx: *JsContext) bool {
+                return self.missingFn(self.ptr, name, ctx);
+            }
+        };
+
+        // CompilationCallback called before script and module compilation.
+        pub const CompilationCallback = struct {
+            ptr: *anyopaque,
+            scriptFn: *const fn (ptr: *anyopaque, source: []const u8, name: ?[]const u8, ctx: *JsContext) void,
+            moduleFn: *const fn (ptr: *anyopaque, source: []const u8, url: []const u8, ctx: *JsContext) void,
+
+            pub fn init(ptr: anytype) CompilationCallback {
+                const T = @TypeOf(ptr);
+                const ptr_info = @typeInfo(T);
+
+                const gen = struct {
+                    pub fn script(pointer: *anyopaque, source: []const u8, name: ?[]const u8, ctx: *JsContext) void {
+                        const self: T = @ptrCast(@alignCast(pointer));
+                        return ptr_info.pointer.child.script(self, source, name, ctx);
+                    }
+                    pub fn module(pointer: *anyopaque, source: []const u8, url: []const u8, ctx: *JsContext) void {
+                        const self: T = @ptrCast(@alignCast(pointer));
+                        return ptr_info.pointer.child.module(self, source, url, ctx);
+                    }
+                };
+
+                return .{
+                    .ptr = ptr,
+                    .scriptFn = gen.script,
+                    .moduleFn = gen.module,
+                };
+            }
+
+            pub fn script(self: CompilationCallback, source: []const u8, name: ?[]const u8, ctx: *JsContext) void {
+                return self.scriptFn(self.ptr, source, name, ctx);
+            }
+
+            pub fn module(self: CompilationCallback, source: []const u8, url: []const u8, ctx: *JsContext) void {
+                return self.moduleFn(self.ptr, source, url, ctx);
+            }
+        };
     };
 }
 
-// We'll create a struct with all the types we want to bind to JavaScript. The
-// fields for this struct will be the type names. The values, will be an
-// instance of this struct.
-// const TypeLookup = struct {
-//     comptime cat: usize = TypeMeta{.index = 0, subtype = null},
-//     comptime owner: usize = TypeMeta{.index = 1, subtype = .array}.
-//     ...
-// }
-// This is essentially meta data for each type.
+// This is essentially meta data for each type. Each is stored in env.meta_lookup
+// The index for a type can be retrieved via:
+//   const index = @field(TYPE_LOOKUP, @typeName(Receiver(Struct)));
+//   const meta = env.meta_lookup[index];
 const TypeMeta = struct {
     // Every type is given a unique index. That index is used to lookup various
     // things, i.e. the prototype chain.
-    index: usize,
+    index: u16,
 
     // We store the type's subtype here, so that when we create an instance of
     // the type, and bind it to JavaScript, we can store the subtype along with
     // the created TaggedAnyOpaque.s
     subtype: ?SubType,
+
+    // If this type has composition-based prototype, represents the byte-offset
+    // from ptr where the `proto` field is located. A negative offsets is used
+    // to indicate that the prototype field is behind a pointer.
+    proto_offset: i32,
 };
 
 // When we map a Zig instance into a JsObject, we'll normally store the a
@@ -2655,9 +2712,9 @@ fn isComplexAttributeType(ti: std.builtin.Type) bool {
 // probably just contained in ExecutionWorld, but having this specific logic, which
 // is somewhat repetitive between constructors, functions, getters, etc contained
 // here does feel like it makes it clenaer.
-fn Caller(comptime E: type, comptime State: type) type {
+fn Caller(comptime JsContext: type, comptime State: type) type {
     return struct {
-        js_context: *E.JsContext,
+        js_context: *JsContext,
         v8_context: v8.Context,
         isolate: v8.Isolate,
         call_arena: Allocator,
@@ -2670,7 +2727,7 @@ fn Caller(comptime E: type, comptime State: type) type {
         fn init(info: anytype) Self {
             const isolate = info.getIsolate();
             const v8_context = isolate.getCurrentContext();
-            const js_context: *E.JsContext = @ptrFromInt(v8_context.getEmbedderData(1).castTo(v8.BigInt).getUint64());
+            const js_context: *JsContext = @ptrFromInt(v8_context.getEmbedderData(1).castTo(v8.BigInt).getUint64());
 
             js_context.call_depth += 1;
             return .{
@@ -2697,10 +2754,6 @@ fn Caller(comptime E: type, comptime State: type) type {
             // Therefore, we keep a call_depth, and only reset the call_arena
             // when a top-level (call_depth == 0) function ends.
             if (call_depth == 0) {
-                for (js_context.call_scope_end_callbacks.items) |cb| {
-                    cb.callScopeEnd();
-                }
-
                 const arena: *ArenaAllocator = @alignCast(@ptrCast(js_context.call_arena.ptr));
                 _ = arena.reset(.{ .retain_with_limit = CALL_ARENA_RETAIN });
             }
@@ -2722,9 +2775,9 @@ fn Caller(comptime E: type, comptime State: type) type {
             const this = info.getThis();
             if (@typeInfo(ReturnType) == .error_union) {
                 const non_error_res = res catch |err| return err;
-                _ = try E.JsContext.mapZigInstanceToJs(self.v8_context, this, non_error_res);
+                _ = try JsContext.mapZigInstanceToJs(self.v8_context, this, non_error_res);
             } else {
-                _ = try E.JsContext.mapZigInstanceToJs(self.v8_context, this, res);
+                _ = try JsContext.mapZigInstanceToJs(self.v8_context, this, res);
             }
             info.getReturnValue().set(this);
         }
@@ -2737,7 +2790,7 @@ fn Caller(comptime E: type, comptime State: type) type {
             const js_context = self.js_context;
             const func = @field(Struct, named_function.name);
             var args = try self.getArgs(Struct, named_function, 1, info);
-            const zig_instance = try E.typeTaggedAnyOpaque(named_function, *Receiver(Struct), info.getThis());
+            const zig_instance = try js_context.typeTaggedAnyOpaque(named_function, *Receiver(Struct), info.getThis());
 
             // inject 'self' as the first parameter
             @field(args, "0") = zig_instance;
@@ -2769,7 +2822,7 @@ fn Caller(comptime E: type, comptime State: type) type {
             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());
+                    const zig_instance = try js_context.typeTaggedAnyOpaque(named_function, *Receiver(Struct), info.getThis());
                     comptime assertSelfReceiver(Struct, named_function);
                     @field(args, "0") = zig_instance;
                     @field(args, "1") = idx;
@@ -2791,12 +2844,13 @@ 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);
             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());
+            const zig_instance = try js_context.typeTaggedAnyOpaque(named_function, *Receiver(Struct), info.getThis());
             @field(args, "0") = zig_instance;
             @field(args, "1") = try self.nameToString(name);
             @field(args, "2") = &has_value;
@@ -2816,7 +2870,7 @@ fn Caller(comptime E: type, comptime State: type) type {
 
             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());
+            const zig_instance = try js_context.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);
@@ -2827,12 +2881,13 @@ fn Caller(comptime E: type, comptime State: type) type {
         }
 
         fn deleteNamedIndex(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);
             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());
+            const zig_instance = try js_context.typeTaggedAnyOpaque(named_function, *Receiver(Struct), info.getThis());
             @field(args, "0") = zig_instance;
             @field(args, "1") = try self.nameToString(name);
             @field(args, "2") = &has_value;
@@ -3448,12 +3503,6 @@ const TaggedAnyOpaque = struct {
     // PROTOTYPE_TABLE
     index: u16,
 
-    // If this type has composition-based prototype, represents the byte-offset
-    // from ptr where the `proto` field is located. The value -1 represents
-    // unsafe prototype where we can just cast ptr to the destination type
-    // (this is used extensively with netsurf)
-    offset: i32,
-
     // Ptr to the Zig instance. Between the context where it's called (i.e.
     // we have the comptime parameter info for all functions), and the index field
     // we can figure out what type this is.
@@ -3489,7 +3538,7 @@ fn valueToDetailString(arena: Allocator, value: v8.Value, isolate: v8.Isolate, v
             if (debugValueToString(arena, value.castTo(v8.Object), isolate, v8_context)) |ds| {
                 return ds;
             } else |err| {
-                log.err(.js, "debug serialize value", .{.err = err});
+                log.err(.js, "debug serialize value", .{ .err = err });
             }
         }
     }

src/runtime/test_object_types.zig

@@ -77,6 +77,117 @@ pub const MyAPI = struct {
     }
 };
 
+pub const Parent = packed struct {
+    parent_id: i32 = 0,
+
+    pub fn get_parent(self: *const Parent) i32 {
+        return self.parent_id;
+    }
+    pub fn set_parent(self: *Parent, id: i32) void {
+        self.parent_id = id;
+    }
+};
+
+pub const Middle = struct {
+    pub const prototype = *Parent;
+
+    middle_id: i32 = 0,
+    _padding_1: u8 = 0,
+    _padding_2: u8 = 1,
+    _padding_3: u8 = 2,
+    proto: Parent,
+
+    pub fn constructor() Middle {
+        return .{
+            .middle_id = 0,
+            .proto = .{ .parent_id = 0 },
+        };
+    }
+
+    pub fn get_middle(self: *const Middle) i32 {
+        return self.middle_id;
+    }
+    pub fn set_middle(self: *Middle, id: i32) void {
+        self.middle_id = id;
+    }
+};
+
+pub const Child = struct {
+    pub const prototype = *Middle;
+
+    child_id: i32 = 0,
+    _padding_1: u8 = 0,
+    proto: Middle,
+
+    pub fn constructor() Child {
+        return .{
+            .child_id = 0,
+            .proto = .{ .middle_id = 0, .proto = .{ .parent_id = 0 } },
+        };
+    }
+
+    pub fn get_child(self: *const Child) i32 {
+        return self.child_id;
+    }
+    pub fn set_child(self: *Child, id: i32) void {
+        self.child_id = id;
+    }
+};
+
+pub const MiddlePtr = packed struct {
+    pub const prototype = *Parent;
+
+    middle_id: i32 = 0,
+    _padding_1: u8 = 0,
+    _padding_2: u8 = 1,
+    _padding_3: u8 = 2,
+    proto: *Parent,
+
+    pub fn constructor(state: State) !MiddlePtr {
+        const parent = try state.arena.create(Parent);
+        parent.* = .{ .parent_id = 0 };
+        return .{
+            .middle_id = 0,
+            .proto = parent,
+        };
+    }
+
+    pub fn get_middle(self: *const MiddlePtr) i32 {
+        return self.middle_id;
+    }
+    pub fn set_middle(self: *MiddlePtr, id: i32) void {
+        self.middle_id = id;
+    }
+};
+
+pub const ChildPtr = packed struct {
+    pub const prototype = *MiddlePtr;
+
+    child_id: i32 = 0,
+    _padding_1: u8 = 0,
+    _padding_2: u8 = 1,
+    proto: *MiddlePtr,
+
+    pub fn constructor(state: State) !ChildPtr {
+        const parent = try state.arena.create(Parent);
+        const middle = try state.arena.create(MiddlePtr);
+
+        parent.* = .{ .parent_id = 0 };
+        middle.* = .{ .middle_id = 0, .proto = parent };
+        return .{
+            .child_id = 0,
+            .proto = middle,
+        };
+    }
+
+    pub fn get_child(self: *const ChildPtr) i32 {
+        return self.child_id;
+    }
+    pub fn set_child(self: *ChildPtr, id: i32) void {
+        self.child_id = id;
+    }
+};
+
 const State = struct {
     arena: Allocator,
 };
@@ -90,6 +201,11 @@ test "JS: object types" {
         Other,
         MyObject,
         MyAPI,
+        Parent,
+        Middle,
+        Child,
+        MiddlePtr,
+        ChildPtr,
     }).init(.{ .arena = arena.allocator() }, {});
 
     defer runner.deinit();
@@ -120,4 +236,40 @@ test "JS: object types" {
         // check object property
         .{ "myObjIndirect.a.val()", "4" },
     }, .{});
+
+    try runner.testCases(&.{
+        .{ "let m1 = new Middle();", null },
+        .{ "m1.middle = 2", null },
+        .{ "m1.parent = 3", null },
+        .{ "m1.middle", "2" },
+        .{ "m1.parent", "3" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "let c1 = new Child();", null },
+        .{ "c1.child = 1", null },
+        .{ "c1.middle = 2", null },
+        .{ "c1.parent = 3", null },
+        .{ "c1.child", "1" },
+        .{ "c1.middle", "2" },
+        .{ "c1.parent", "3" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "let m2 = new MiddlePtr();", null },
+        .{ "m2.middle = 2", null },
+        .{ "m2.parent = 3", null },
+        .{ "m2.middle", "2" },
+        .{ "m2.parent", "3" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "let c2 = new ChildPtr();", null },
+        .{ "c2.child = 1", null },
+        .{ "c2.middle = 2", null },
+        .{ "c2.parent = 3", null },
+        .{ "c2.child", "1" },
+        .{ "c2.middle", "2" },
+        .{ "c2.parent", "3" },
+    }, .{});
 }

src/runtime/test_primitive_types.zig

@@ -336,4 +336,8 @@ test "JS: primitive types" {
         .{ "p.returnFloat32()", "1.100000023841858,-200.03500366210938,0.0003000000142492354" },
         .{ "p.returnFloat64()", "8881.22284,-4928.3838122,-0.00004" },
     }, .{});
+
+    try runner.testCases(&.{
+        .{ "'foo\\\\:bar'", "foo\\:bar" },
+    }, .{});
 }

src/runtime/testing.zig

@@ -53,6 +53,7 @@ pub fn Runner(comptime State: type, comptime Global: type, comptime types: anyty
                 state,
                 {},
                 true,
+                .{},
             );
             return self;
         }

src/server.zig

@@ -39,7 +39,7 @@ const CDP = @import("cdp/cdp.zig").CDP;
 
 const TimeoutCheck = std.time.ns_per_ms * 100;
 
-const MAX_HTTP_REQUEST_SIZE = 2048;
+const MAX_HTTP_REQUEST_SIZE = 4096;
 
 // max message size
 // +14 for max websocket payload overhead
@@ -223,7 +223,7 @@ pub const Client = struct {
     }
 
     fn close(self: *Self) void {
-        log.info(.app, "client disconected", .{});
+        log.info(.app, "client disconnected", .{});
         self.connected = false;
         // recv only, because we might have pending writes we'd like to get
         // out (like the HTTP error response)
@@ -1142,7 +1142,7 @@ test "Client: http invalid request" {
     var c = try createTestClient();
     defer c.deinit();
 
-    const res = try c.httpRequest("GET /over/9000 HTTP/1.1\r\n" ++ "Header: " ++ ("a" ** 2050) ++ "\r\n\r\n");
+    const res = try c.httpRequest("GET /over/9000 HTTP/1.1\r\n" ++ "Header: " ++ ("a" ** 4100) ++ "\r\n\r\n");
     try testing.expectEqualStrings("HTTP/1.1 413 \r\n" ++
         "Connection: Close\r\n" ++
         "Content-Length: 17\r\n\r\n" ++