Merge pull request #1435 from lightpanda-io/handle_invalid_attribute_functions

skip invalid attribute functions

.github/actions/install/action.yml

@@ -1,28 +1,63 @@
 name: "Browsercore install"
 description: "Install deps for the project browsercore"
 
+inputs:
+  arch:
+    description: 'CPU arch used to select the v8 lib'
+    required: false
+    default: 'x86_64'
+  os:
+    description: 'OS used to select the v8 lib'
+    required: false
+    default: 'linux'
+  zig-v8:
+    description: 'zig v8 version to install'
+    required: false
+    default: 'v0.2.6'
+  v8:
+    description: 'v8 version to install'
+    required: false
+    default: '14.0.365.4'
+  cache-dir:
+    description: 'cache dir to use'
+    required: false
+    default: '~/.cache'
+
 runs:
   using: "composite"
 
   steps:
+    - name: Install apt deps
+      if: ${{ inputs.os == 'linux' }}
+      shell: bash
+      run: |
+        sudo apt-get update
+        sudo apt-get install -y wget xz-utils ca-certificates clang make git
+
+    # Zig version used from the `minimum_zig_version` field in build.zig.zon
+    - uses: mlugg/setup-zig@v2
+
+    # Rust Toolchain for html5ever
+    - uses: dtolnay/rust-toolchain@stable
+
+    - name: Cache v8
+      id: cache-v8
+      uses: actions/cache@v4
+      env:
+        cache-name: cache-v8
+      with:
+        path: ${{ inputs.cache-dir }}/v8
+        key: libc_v8_${{ inputs.v8 }}_${{ inputs.os }}_${{ inputs.arch }}_${{ inputs.zig-v8 }}.a
+
+    - if: ${{ steps.cache-v8.outputs.cache-hit != 'true' }}
+      shell: bash
+      run: |
+        mkdir -p ${{ inputs.cache-dir }}/v8
+
+        wget -O ${{ inputs.cache-dir }}/v8/libc_v8.a https://github.com/lightpanda-io/zig-v8-fork/releases/download/${{ inputs.zig-v8 }}/libc_v8_${{ inputs.v8 }}_${{ inputs.os }}_${{ inputs.arch }}.a
+
     - name: install v8
       shell: bash
       run: |
-        mkdir -p vendor/zig-js-runtime/vendor/v8/${{env.ARCH}}/debug
-        ln -s /usr/local/lib/libc_v8.a vendor/zig-js-runtime/vendor/v8/${{env.ARCH}}/debug/libc_v8.a
-
-        mkdir -p vendor/zig-js-runtime/vendor/v8/${{env.ARCH}}/release
-        ln -s /usr/local/lib/libc_v8.a vendor/zig-js-runtime/vendor/v8/${{env.ARCH}}/release/libc_v8.a
-
-    - name: libiconv
-      shell: bash
-      run: |
-        ln -s /usr/local/lib/libiconv vendor/libiconv
-
-    - name: build mimalloc
-      shell: bash
-      run: make install-mimalloc
-
-    - name: build netsurf
-      shell: bash
-      run: make install-netsurf
+        mkdir -p v8
+        ln -s ${{ inputs.cache-dir }}/v8/libc_v8.a v8/libc_v8.a

.github/workflows/build.yml

@@ -0,0 +1,196 @@
+name: nightly build
+
+env:
+  AWS_ACCESS_KEY_ID: ${{ vars.NIGHTLY_BUILD_AWS_ACCESS_ID }}
+  AWS_SECRET_ACCESS_KEY: ${{ secrets.NIGHTLY_BUILD_AWS_SECRET_ACCESS_KEY }}
+  AWS_BUCKET: ${{ vars.NIGHTLY_BUILD_AWS_BUCKET }}
+  AWS_REGION: ${{ vars.NIGHTLY_BUILD_AWS_REGION }}
+  RELEASE: ${{ github.ref_type == 'tag' && github.ref_name || 'nightly' }}
+
+on:
+  push:
+    tags:
+      - '*'
+  schedule:
+    - cron: "2 2 * * *"
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+permissions:
+  contents: write
+
+jobs:
+  build-linux-x86_64:
+    env:
+      ARCH: x86_64
+      OS: linux
+
+    runs-on: ubuntu-22.04
+    timeout-minutes: 20
+
+    steps:
+      - uses: actions/checkout@v6
+        with:
+          fetch-depth: 0
+          # fetch submodules recusively, to get zig-js-runtime submodules also.
+          submodules: recursive
+
+      - uses: ./.github/actions/install
+        with:
+          os: ${{env.OS}}
+          arch: ${{env.ARCH}}
+          mode: 'release'
+
+      - name: v8 snapshot
+        run: zig build -Dprebuilt_v8_path=v8/libc_v8.a -Doptimize=ReleaseFast snapshot_creator -- src/snapshot.bin
+
+      - name: zig build
+        run: zig build -Dsnapshot_path=../../snapshot.bin -Dprebuilt_v8_path=v8/libc_v8.a -Doptimize=ReleaseFast -Dcpu=x86_64 -Dgit_commit=$(git rev-parse --short ${{ github.sha }})
+
+      - name: Rename binary
+        run: mv zig-out/bin/lightpanda lightpanda-${{ env.ARCH }}-${{ env.OS }}
+
+      - name: upload on s3
+        run: |
+          export DIR=`git show --no-patch --no-notes --pretty='%cs_%h'`
+          aws s3 cp --storage-class=GLACIER_IR lightpanda-${{ env.ARCH }}-${{ env.OS }} s3://lpd-nightly-build/${DIR}/lightpanda-${{ env.ARCH }}-${{ env.OS }}
+
+      - name: Upload the build
+        uses: ncipollo/release-action@v1
+        with:
+          allowUpdates: true
+          artifacts: lightpanda-${{ env.ARCH }}-${{ env.OS }}
+          tag: ${{ env.RELEASE }}
+          makeLatest: true
+
+  build-linux-aarch64:
+    env:
+      ARCH: aarch64
+      OS: linux
+
+    runs-on: ubuntu-22.04-arm
+    timeout-minutes: 20
+
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+          # fetch submodules recusively, to get zig-js-runtime submodules also.
+          submodules: recursive
+
+      - uses: ./.github/actions/install
+        with:
+          os: ${{env.OS}}
+          arch: ${{env.ARCH}}
+          mode: 'release'
+
+      - name: v8 snapshot
+        run: zig build -Dprebuilt_v8_path=v8/libc_v8.a -Doptimize=ReleaseFast snapshot_creator -- src/snapshot.bin
+
+      - name: zig build
+        run: zig build -Dsnapshot_path=../../snapshot.bin -Dprebuilt_v8_path=v8/libc_v8.a -Doptimize=ReleaseFast -Dcpu=generic -Dgit_commit=$(git rev-parse --short ${{ github.sha }})
+
+      - name: Rename binary
+        run: mv zig-out/bin/lightpanda lightpanda-${{ env.ARCH }}-${{ env.OS }}
+
+      - name: upload on s3
+        run: |
+          export DIR=`git show --no-patch --no-notes --pretty='%cs_%h'`
+          aws s3 cp --storage-class=GLACIER_IR lightpanda-${{ env.ARCH }}-${{ env.OS }} s3://lpd-nightly-build/${DIR}/lightpanda-${{ env.ARCH }}-${{ env.OS }}
+
+      - name: Upload the build
+        uses: ncipollo/release-action@v1
+        with:
+          allowUpdates: true
+          artifacts: lightpanda-${{ env.ARCH }}-${{ env.OS }}
+          tag: ${{ env.RELEASE }}
+          makeLatest: true
+
+  build-macos-aarch64:
+    env:
+      ARCH: aarch64
+      OS: macos
+
+    # macos-14 runs on arm CPU. see
+    # https://github.com/actions/runner-images?tab=readme-ov-file
+    runs-on: macos-14
+    timeout-minutes: 20
+
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+          # fetch submodules recusively, to get zig-js-runtime submodules also.
+          submodules: recursive
+
+      - uses: ./.github/actions/install
+        with:
+          os: ${{env.OS}}
+          arch: ${{env.ARCH}}
+          mode: 'release'
+
+      - name: v8 snapshot
+        run: zig build -Dprebuilt_v8_path=v8/libc_v8.a -Doptimize=ReleaseFast snapshot_creator -- src/snapshot.bin
+
+      - name: zig build
+        run: zig build -Dsnapshot_path=../../snapshot.bin -Dprebuilt_v8_path=v8/libc_v8.a -Doptimize=ReleaseFast -Dgit_commit=$(git rev-parse --short ${{ github.sha }})
+
+      - name: Rename binary
+        run: mv zig-out/bin/lightpanda lightpanda-${{ env.ARCH }}-${{ env.OS }}
+
+      - name: upload on s3
+        run: |
+          export DIR=`git show --no-patch --no-notes --pretty='%cs_%h'`
+          aws s3 cp --storage-class=GLACIER_IR lightpanda-${{ env.ARCH }}-${{ env.OS }} s3://lpd-nightly-build/${DIR}/lightpanda-${{ env.ARCH }}-${{ env.OS }}
+
+      - name: Upload the build
+        uses: ncipollo/release-action@v1
+        with:
+          allowUpdates: true
+          artifacts: lightpanda-${{ env.ARCH }}-${{ env.OS }}
+          tag: ${{ env.RELEASE }}
+          makeLatest: true
+
+  build-macos-x86_64:
+    env:
+      ARCH: x86_64
+      OS: macos
+
+    runs-on: macos-14-large
+    timeout-minutes: 20
+
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+          # fetch submodules recusively, to get zig-js-runtime submodules also.
+          submodules: recursive
+
+      - uses: ./.github/actions/install
+        with:
+          os: ${{env.OS}}
+          arch: ${{env.ARCH}}
+          mode: 'release'
+
+      - name: v8 snapshot
+        run: zig build -Dprebuilt_v8_path=v8/libc_v8.a -Doptimize=ReleaseFast snapshot_creator -- src/snapshot.bin
+
+      - name: zig build
+        run: zig build -Dsnapshot_path=../../snapshot.bin -Dprebuilt_v8_path=v8/libc_v8.a -Doptimize=ReleaseFast -Dgit_commit=$(git rev-parse --short ${{ github.sha }})
+
+      - name: Rename binary
+        run: mv zig-out/bin/lightpanda lightpanda-${{ env.ARCH }}-${{ env.OS }}
+
+      - name: upload on s3
+        run: |
+          export DIR=`git show --no-patch --no-notes --pretty='%cs_%h'`
+          aws s3 cp --storage-class=GLACIER_IR lightpanda-${{ env.ARCH }}-${{ env.OS }} s3://lpd-nightly-build/${DIR}/lightpanda-${{ env.ARCH }}-${{ env.OS }}
+
+      - name: Upload the build
+        uses: ncipollo/release-action@v1
+        with:
+          allowUpdates: true
+          artifacts: lightpanda-${{ env.ARCH }}-${{ env.OS }}
+          tag: ${{ env.RELEASE }}
+          makeLatest: true

.github/workflows/cla.yml

@@ -0,0 +1,34 @@
+name: "CLA Assistant"
+on:
+  issue_comment:
+    types: [created]
+  pull_request_target:
+    types: [opened,closed,synchronize]
+
+permissions:
+  actions: write
+  contents: read
+  pull-requests: write
+  statuses: write
+
+jobs:
+  CLAAssistant:
+    runs-on: ubuntu-latest
+    timeout-minutes: 5
+
+    steps:
+      - name: "CLA Assistant"
+        if: (github.event.comment.body == 'recheck' || github.event.comment.body == 'I have read the CLA Document and I hereby sign the CLA') || github.event_name == 'pull_request_target'
+        uses: contributor-assistant/github-action@v2.6.1
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          PERSONAL_ACCESS_TOKEN: ${{ secrets.CLA_GH_PAT }}
+        with:
+          path-to-signatures: 'signatures/browser/version1/cla.json'
+          path-to-document: 'https://github.com/lightpanda-io/browser/blob/main/CLA.md'
+          # branch should not be protected
+          branch: 'main'
+          allowlist: krichprollsch,francisbouvier,katie-lpd,sjorsdonkers,bornlex
+
+          remote-organization-name: lightpanda-io
+          remote-repository-name: cla

.github/workflows/e2e-integration-test.yml

@@ -0,0 +1,68 @@
+name: e2e-integration-test
+
+env:
+  LIGHTPANDA_DISABLE_TELEMETRY: true
+
+on:
+  schedule:
+    - cron: "4 4 * * *"
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+jobs:
+  zig-build-release:
+    name: zig build release
+
+    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:
+          fetch-depth: 0
+          # fetch submodules recusively, to get zig-js-runtime submodules also.
+          submodules: recursive
+
+      - uses: ./.github/actions/install
+
+      - name: zig build release
+        run: zig build -Dprebuilt_v8_path=v8/libc_v8.a -Doptimize=ReleaseFast -Dcpu=x86_64 -Dgit_commit=$(git rev-parse --short ${{ github.sha }})
+
+      - name: upload artifact
+        uses: actions/upload-artifact@v4
+        with:
+          name: lightpanda-build-release
+          path: |
+            zig-out/bin/lightpanda
+          retention-days: 1
+
+  demo-scripts:
+    name: demo-integration-scripts
+    needs: zig-build-release
+
+    runs-on: ubuntu-latest
+    timeout-minutes: 15
+
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          repository: 'lightpanda-io/demo'
+          fetch-depth: 0
+
+      - run: npm install
+
+      - name: download artifact
+        uses: actions/download-artifact@v4
+        with:
+          name: lightpanda-build-release
+
+      - run: chmod a+x ./lightpanda
+
+      - name: run end to end integration tests
+        run: |
+          ./lightpanda serve & echo $! > LPD.pid
+          go run integration/main.go
+          kill `cat LPD.pid`

.github/workflows/e2e-test.yml

@@ -0,0 +1,250 @@
+name: e2e-test
+
+env:
+  AWS_ACCESS_KEY_ID: ${{ vars.LPD_PERF_AWS_ACCESS_KEY_ID }}
+  AWS_SECRET_ACCESS_KEY: ${{ secrets.LPD_PERF_AWS_SECRET_ACCESS_KEY }}
+  AWS_BUCKET: ${{ vars.LPD_PERF_AWS_BUCKET }}
+  AWS_REGION: ${{ vars.LPD_PERF_AWS_REGION }}
+  LIGHTPANDA_DISABLE_TELEMETRY: true
+
+on:
+  push:
+    branches:
+      - main
+    paths:
+      - "build.zig"
+      - "src/**/*.zig"
+      - "src/*.zig"
+      - "vendor/zig-js-runtime"
+      - ".github/**"
+      - "vendor/**"
+  pull_request:
+
+    # By default GH trigger on types opened, synchronize and reopened.
+    # see https://docs.github.com/en/actions/using-workflows/events-that-trigger-workflows#pull_request
+    # Since we skip the job when the PR is in draft state, we want to force CI
+    # running when the PR is marked ready_for_review w/o other change.
+    # see https://github.com/orgs/community/discussions/25722#discussioncomment-3248917
+    types: [opened, synchronize, reopened, ready_for_review]
+
+    paths:
+      - ".github/**"
+      - "build.zig"
+      - "src/**/*.zig"
+      - "src/*.zig"
+      - "vendor/**"
+      - ".github/**"
+      - "vendor/**"
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+jobs:
+  zig-build-release:
+    name: zig build release
+
+    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@v6
+        with:
+          fetch-depth: 0
+          # fetch submodules recusively, to get zig-js-runtime submodules also.
+          submodules: recursive
+
+      - uses: ./.github/actions/install
+        with:
+          mode: 'release'
+
+      - name: zig build release
+        run: zig build -Dprebuilt_v8_path=v8/libc_v8.a -Doptimize=ReleaseFast -Dcpu=x86_64 -Dgit_commit=$(git rev-parse --short ${{ github.sha }})
+
+      - name: upload artifact
+        uses: actions/upload-artifact@v4
+        with:
+          name: lightpanda-build-release
+          path: |
+            zig-out/bin/lightpanda
+          retention-days: 1
+
+  demo-scripts:
+    name: demo-scripts
+    needs: zig-build-release
+
+    runs-on: ubuntu-latest
+    timeout-minutes: 15
+
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          repository: 'lightpanda-io/demo'
+          fetch-depth: 0
+
+      - run: npm install
+
+      - name: download artifact
+        uses: actions/download-artifact@v4
+        with:
+          name: lightpanda-build-release
+
+      - run: chmod a+x ./lightpanda
+
+      - name: run end to end tests
+        run: |
+          ./lightpanda serve & echo $! > LPD.pid
+          go run runner/main.go
+          kill `cat LPD.pid`
+
+      - name: build proxy
+        run: |
+          cd proxy
+          go build
+
+      - name: run end to end tests through proxy
+        run: |
+          ./proxy/proxy & echo $! > PROXY.id
+          ./lightpanda serve --http_proxy 'http://127.0.0.1:3000' & echo $! > LPD.pid
+          go run runner/main.go
+          kill `cat LPD.pid` `cat PROXY.id`
+
+      - name: run request interception through proxy
+        run: |
+          export PROXY_USERNAME=username PROXY_PASSWORD=password
+          ./proxy/proxy & echo $! > PROXY.id
+          ./lightpanda serve & echo $! > LPD.pid
+          URL=https://demo-browser.lightpanda.io/campfire-commerce/ node puppeteer/proxy_auth.js
+          BASE_URL=https://demo-browser.lightpanda.io/ node playwright/proxy_auth.js
+          kill `cat LPD.pid` `cat PROXY.id`
+
+  cdp-and-hyperfine-bench:
+    name: cdp-and-hyperfine-bench
+    needs: zig-build-release
+
+    env:
+      MAX_MEMORY: 26000
+      MAX_AVG_DURATION: 17
+      LIGHTPANDA_DISABLE_TELEMETRY: true
+
+    # use a self host runner.
+    runs-on: lpd-bench-hetzner
+    timeout-minutes: 15
+
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          repository: 'lightpanda-io/demo'
+          fetch-depth: 0
+
+      - run: npm install
+
+      - name: download artifact
+        uses: actions/download-artifact@v4
+        with:
+          name: lightpanda-build-release
+
+      - run: chmod a+x ./lightpanda
+
+      - name: start http
+        run: |
+          go run ws/main.go & echo $! > WS.pid
+          sleep 2
+
+      - name: run puppeteer
+        run: |
+          ./lightpanda serve & echo $! > LPD.pid
+          sleep 2
+          RUNS=100 npm run bench-puppeteer-cdp > puppeteer.out || exit 1
+          cat /proc/`cat LPD.pid`/status |grep VmHWM|grep -oP '\d+' > LPD.VmHWM
+          kill `cat LPD.pid`
+
+      - name: puppeteer result
+        run: cat puppeteer.out
+
+      - name: memory regression
+        run: |
+          export LPD_VmHWM=`cat LPD.VmHWM`
+          echo "Peak resident set size: $LPD_VmHWM"
+          test "$LPD_VmHWM" -le "$MAX_MEMORY"
+
+      - name: duration regression
+        run: |
+          export PUPPETEER_AVG_DURATION=`cat puppeteer.out|grep 'avg run'|sed 's/avg run duration (ms) //'`
+          echo "puppeteer avg duration: $PUPPETEER_AVG_DURATION"
+          test "$PUPPETEER_AVG_DURATION" -le "$MAX_AVG_DURATION"
+
+      - name: json output
+        run: |
+          export AVG_DURATION=`cat puppeteer.out|grep 'avg run'|sed 's/avg run duration (ms) //'`
+          export TOTAL_DURATION=`cat puppeteer.out|grep 'total duration'|sed 's/total duration (ms) //'`
+          export LPD_VmHWM=`cat LPD.VmHWM`
+          echo "{\"duration_total\":${TOTAL_DURATION},\"duration_avg\":${AVG_DURATION},\"mem_peak\":${LPD_VmHWM}}" > bench.json
+          cat bench.json
+
+      - name: run hyperfine
+        run: |
+          hyperfine --export-json=hyperfine.json --warmup 3 --runs 20 --shell=none "./lightpanda --dump http://127.0.0.1:1234/campfire-commerce/"
+
+      - name: stop http
+        run: kill `cat WS.pid`
+
+      - name: write commit
+        run: |
+          echo "${{github.sha}}" > commit.txt
+
+      - name: upload artifact
+        uses: actions/upload-artifact@v4
+        with:
+          name: bench-results
+          path: |
+            bench.json
+            hyperfine.json
+            commit.txt
+          retention-days: 10
+
+
+  perf-fmt:
+    name: perf-fmt
+    needs: cdp-and-hyperfine-bench
+
+    # Don't execute on PR
+    if: github.event_name != 'pull_request'
+
+    runs-on: ubuntu-latest
+    timeout-minutes: 15
+
+    container:
+      image: ghcr.io/lightpanda-io/perf-fmt:latest
+      credentials:
+       username: ${{ github.actor }}
+       password: ${{ secrets.GITHUB_TOKEN }}
+
+    steps:
+      - name: download artifact
+        uses: actions/download-artifact@v4
+        with:
+          name: bench-results
+
+      - name: format and send json result
+        run: /perf-fmt cdp ${{ github.sha }} bench.json
+
+      - name: format and send json result
+        run: /perf-fmt hyperfine ${{ github.sha }} hyperfine.json
+
+  browser-fetch:
+    name: browser fetch
+    needs: zig-build-release
+
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: download artifact
+        uses: actions/download-artifact@v4
+        with:
+          name: lightpanda-build-release
+
+      - run: chmod a+x ./lightpanda
+
+      - run: ./lightpanda fetch https://demo-browser.lightpanda.io/campfire-commerce/

.github/workflows/wpt.yml

@@ -1,81 +1,40 @@
 name: wpt
 
 env:
-  ARCH: x86_64-linux
   AWS_ACCESS_KEY_ID: ${{ vars.LPD_PERF_AWS_ACCESS_KEY_ID }}
   AWS_SECRET_ACCESS_KEY: ${{ secrets.LPD_PERF_AWS_SECRET_ACCESS_KEY }}
   AWS_BUCKET: ${{ vars.LPD_PERF_AWS_BUCKET }}
   AWS_REGION: ${{ vars.LPD_PERF_AWS_REGION }}
+  LIGHTPANDA_DISABLE_TELEMETRY: true
 
 on:
-  push:
-    branches:
-      - main
-    paths:
-      - "build.zig"
-      - "src/**/*.zig"
-      - "src/*.zig"
-      - "tests/wpt/**"
-      - "vendor/**"
-      - ".github/**"
-  pull_request:
+  schedule:
+    - cron: "23 2 * * *"
 
-    # By default GH trigger on types opened, synchronize and reopened.
-    # see https://docs.github.com/en/actions/using-workflows/events-that-trigger-workflows#pull_request
-    # Since we skip the job when the PR is in draft state, we want to force CI
-    # running when the PR is marked ready_for_review w/o other change.
-    # see https://github.com/orgs/community/discussions/25722#discussioncomment-3248917
-    types: [opened, synchronize, reopened, ready_for_review]
-
-    paths:
-      - ".github/**"
-      - "build.zig"
-      - "src/**/*.zig"
-      - "src/*.zig"
-      - "tests/wpt/**"
-      - "vendor/**"
-      - ".github/**"
   # Allows you to run this workflow manually from the Actions tab
   workflow_dispatch:
 
 jobs:
   wpt:
-    name: web platform tests
-
-    # Don't run the CI with draft PR.
-    if: github.event.pull_request.draft == false
+    name: web platform tests json output
 
     runs-on: ubuntu-latest
-    container:
-      image: ghcr.io/lightpanda-io/zig-browsercore:0.12.1
-      credentials:
-       username: ${{ github.actor }}
-       password: ${{ secrets.GITHUB_TOKEN }}
-
-      # docker blocks io_uring syscalls by default now.
-      # see https://github.com/tigerbeetle/tigerbeetle/pull/1995
-      # see https://github.com/moby/moby/pull/46762
-      options: "--security-opt seccomp=unconfined"
+    timeout-minutes: 90
 
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v6
         with:
           fetch-depth: 0
-          token: ${{ secrets.GH_CI_PAT }}
           # fetch submodules recusively, to get zig-js-runtime submodules also.
           submodules: recursive
 
       - uses: ./.github/actions/install
 
-      - run: zig build wpt -Dengine=v8 -- --safe --summary
+      - name: build wpt
+        run: zig build -Dprebuilt_v8_path=v8/libc_v8.a -Doptimize=ReleaseFast -- version
 
-        # For now WPT tests doesn't pass at all.
-        # We accept then to continue the job on failure.
-        # TODO remove the continue-on-error when tests will pass.
-        continue-on-error: true
-
-      - name: json output
-        run: zig build wpt -Dengine=v8 -- --safe --json > wpt.json
+      - name: run test with json output
+        run:  zig-out/bin/lightpanda-wpt --json > wpt.json
 
       - name: write commit
         run: |
@@ -94,10 +53,9 @@ jobs:
     name: perf-fmt
     needs: wpt
 
-    # Don't execute on PR
-    if: github.event_name != 'pull_request'
-
     runs-on: ubuntu-latest
+    timeout-minutes: 15
+
     container:
       image: ghcr.io/lightpanda-io/perf-fmt:latest
       credentials:

.github/workflows/zig-fmt.yml

@@ -26,19 +26,16 @@ jobs:
     if: github.event.pull_request.draft == false
 
     runs-on: ubuntu-latest
-    container:
-      image: ghcr.io/lightpanda-io/zig:0.12.1
-      credentials:
-       username: ${{ github.actor }}
-       password: ${{ secrets.GITHUB_TOKEN }}
-    outputs:
-      zig_fmt_errs: ${{ steps.fmt.outputs.zig_fmt_errs }}
+    timeout-minutes: 15
 
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v6
         with:
           fetch-depth: 0
 
+      # Zig version used from the `minimum_zig_version` field in build.zig.zon
+      - uses: mlugg/setup-zig@v2
+
       - name: Run zig fmt
         id: fmt
         run: |
@@ -57,6 +54,7 @@ jobs:
           fi
 
           echo "${delimiter}" >> "${GITHUB_OUTPUT}"
+
       - name: Fail the job
         if: steps.fmt.outputs.zig_fmt_errs != ''
         run: exit 1

.github/workflows/zig-test.yml

@@ -1,7 +1,6 @@
 name: zig-test
 
 env:
-  ARCH: x86_64-linux
   AWS_ACCESS_KEY_ID: ${{ vars.LPD_PERF_AWS_ACCESS_KEY_ID }}
   AWS_SECRET_ACCESS_KEY: ${{ secrets.LPD_PERF_AWS_SECRET_ACCESS_KEY }}
   AWS_BUCKET: ${{ vars.LPD_PERF_AWS_BUCKET }}
@@ -17,6 +16,7 @@ on:
       - "src/*.zig"
       - "vendor/zig-js-runtime"
       - ".github/**"
+      - "vendor/**"
   pull_request:
 
     # By default GH trigger on types opened, synchronize and reopened.
@@ -33,92 +33,31 @@ on:
       - "src/*.zig"
       - "vendor/**"
       - ".github/**"
+      - "vendor/**"
   # Allows you to run this workflow manually from the Actions tab
   workflow_dispatch:
 
 jobs:
-  zig-build-dev:
-    name: zig build dev
-
-    # Don't run the CI with draft PR.
-    if: github.event.pull_request.draft == false
-
-    runs-on: ubuntu-latest
-    container:
-      image: ghcr.io/lightpanda-io/zig-browsercore:0.12.1
-      credentials:
-       username: ${{ github.actor }}
-       password: ${{ secrets.GITHUB_TOKEN }}
-
-    steps:
-      - uses: actions/checkout@v4
-        with:
-          fetch-depth: 0
-          token: ${{ secrets.GH_CI_PAT }}
-          # fetch submodules recusively, to get zig-js-runtime submodules also.
-          submodules: recursive
-
-      - uses: ./.github/actions/install
-
-      - name: zig build debug
-        run: zig build -Dengine=v8
-
-  zig-build-release:
-    name: zig build release
-
-    # Don't run the CI on PR
-    if: github.event_name != 'pull_request'
-
-    runs-on: ubuntu-latest
-    container:
-      image: ghcr.io/lightpanda-io/zig-browsercore:0.12.1
-      credentials:
-       username: ${{ github.actor }}
-       password: ${{ secrets.GITHUB_TOKEN }}
-
-    steps:
-      - uses: actions/checkout@v4
-        with:
-          fetch-depth: 0
-          token: ${{ secrets.GH_CI_PAT }}
-          # fetch submodules recusively, to get zig-js-runtime submodules also.
-          submodules: recursive
-
-      - uses: ./.github/actions/install
-
-      - name: zig build release
-        run: zig build -Doptimize=ReleaseSafe -Dengine=v8
-
   zig-test:
     name: zig test
+    timeout-minutes: 15
 
     # Don't run the CI with draft PR.
     if: github.event.pull_request.draft == false
 
     runs-on: ubuntu-latest
-    container:
-      image: ghcr.io/lightpanda-io/zig-browsercore:0.12.1
-      credentials:
-       username: ${{ github.actor }}
-       password: ${{ secrets.GITHUB_TOKEN }}
-
-      # docker blocks io_uring syscalls by default now.
-      # see https://github.com/tigerbeetle/tigerbeetle/pull/1995
-      # see https://github.com/moby/moby/pull/46762
-      options: "--security-opt seccomp=unconfined"
 
     steps:
       - uses: actions/checkout@v4
         with:
           fetch-depth: 0
-          token: ${{ secrets.GH_CI_PAT }}
           # fetch submodules recusively, to get zig-js-runtime submodules also.
           submodules: recursive
 
       - uses: ./.github/actions/install
 
       - name: zig build test
-        run: zig build test -Dengine=v8 -- --json > bench.json
+        run: METRICS=true zig build -Dprebuilt_v8_path=v8/libc_v8.a test > bench.json
 
       - name: write commit
         run: |
@@ -141,6 +80,8 @@ jobs:
     if: github.event_name != 'pull_request'
 
     runs-on: ubuntu-latest
+    timeout-minutes: 15
+
     container:
       image: ghcr.io/lightpanda-io/perf-fmt:latest
       credentials:

.gitignore

@@ -1,6 +1,11 @@
 zig-cache
+/.zig-cache/
+/.lp-cache/
 zig-out
-/vendor/netsurf/build/
-/vendor/netsurf/lib/
-/vendor/netsurf/include/
+/vendor/netsurf/out
 /vendor/libiconv/
+lightpanda.id
+/v8/
+/build/
+/src/html5ever/target/
+src/snapshot.bin

.gitmodules

@@ -1,24 +1,15 @@
-[submodule "vendor/zig-js-runtime"]
-	path = vendor/zig-js-runtime
-	url = git@github.com:lightpanda-io/zig-js-runtime.git
-[submodule "vendor/netsurf/libwapcaplet"]
-	path = vendor/netsurf/libwapcaplet
-	url = git@github.com:lightpanda-io/libwapcaplet.git
-[submodule "vendor/netsurf/libparserutils"]
-	path = vendor/netsurf/libparserutils
-	url = git@github.com:lightpanda-io/libparserutils.git
-[submodule "vendor/netsurf/libdom"]
-	path = vendor/netsurf/libdom
-	url = git@github.com:lightpanda-io/libdom.git
-[submodule "vendor/netsurf/share/netsurf-buildsystem"]
-	path = vendor/netsurf/share/netsurf-buildsystem
-	url = https://source.netsurf-browser.org/buildsystem.git
-[submodule "vendor/netsurf/libhubbub"]
-	path = vendor/netsurf/libhubbub
-	url = git@github.com:lightpanda-io/libhubbub.git
 [submodule "tests/wpt"]
 	path = tests/wpt
 	url = https://github.com/lightpanda-io/wpt
-[submodule "vendor/mimalloc"]
-	path = vendor/mimalloc
-	url = git@github.com:microsoft/mimalloc.git
+[submodule "vendor/nghttp2"]
+	path = vendor/nghttp2
+	url = https://github.com/nghttp2/nghttp2.git
+[submodule "vendor/zlib"]
+	path = vendor/zlib
+	url = https://github.com/madler/zlib.git
+[submodule "vendor/curl"]
+	path = vendor/curl
+	url = https://github.com/curl/curl.git
+[submodule "vendor/brotli"]
+	path = vendor/brotli
+	url = https://github.com/google/brotli

CLA.md

@@ -0,0 +1,93 @@
+# Lightpanda (Selecy SAS) Grant and Contributor License Agreement (“Agreement”)
+
+This agreement is based on the Apache Software Foundation Contributor License
+Agreement. (v r190612)
+
+Thank you for your interest in software projects stewarded by Lightpanda
+(Selecy SAS) (“Lightpanda”). In order to clarify the intellectual property
+license granted with Contributions from any person or entity, Lightpanda must
+have a Contributor License Agreement (CLA) on file that has been agreed to by
+each Contributor, indicating agreement to the license terms below. This license
+is for your protection as a Contributor as well as the protection of Lightpanda
+and its users; it does not change your rights to use your own Contributions for
+any other purpose. This Agreement allows an individual to contribute to
+Lightpanda on that individual’s own behalf, or an entity (the “Corporation”) to
+submit Contributions to Lightpanda, to authorize Contributions submitted by its
+designated employees to Lightpanda, and to grant copyright and patent licenses
+thereto.
+
+You accept and agree to the following terms and conditions for Your present and
+future Contributions submitted to Lightpanda. Except for the license granted
+herein to Lightpanda and recipients of software distributed by Lightpanda, You
+reserve all right, title, and interest in and to Your Contributions.
+
+1. Definitions. “You” (or “Your”) shall mean the copyright owner or legal
+   entity authorized by the copyright owner that is making this Agreement with
+   Lightpanda. For legal entities, the entity making a Contribution and all
+   other entities that control, are controlled by, or are under common control
+   with that entity are considered to be a single Contributor. For the purposes
+   of this definition, “control” means (i) the power, direct or indirect, to
+   cause the direction or management of such entity, whether by contract or
+   otherwise, or (ii) ownership of fifty percent (50%) or more of the
+   outstanding shares, or (iii) beneficial ownership of such entity.
+   “Contribution” shall mean any work, as well as any modifications or
+   additions to an existing work, that is intentionally submitted by You to
+   Lightpanda for inclusion in, or documentation of, any of the products owned
+   or managed by Lightpanda (the “Work”). For the purposes of this definition,
+   “submitted” means any form of electronic, verbal, or written communication
+   sent to Lightpanda or its representatives, including but not limited to
+   communication on electronic mailing lists, source code control systems (such
+   as GitHub), and issue tracking systems that are managed by, or on behalf of,
+   Lightpanda for the purpose of discussing and improving the Work, but
+   excluding communication that is conspicuously marked or otherwise designated
+   in writing by You as “Not a Contribution.”
+
+2. Grant of Copyright License. Subject to the terms and conditions of this
+   Agreement, You hereby grant to Lightpanda and to recipients of software
+   distributed by Lightpanda a perpetual, worldwide, non-exclusive, no-charge,
+   royalty-free, irrevocable copyright license to reproduce, prepare derivative
+   works of, publicly display, publicly perform, sublicense, and distribute
+   Your Contributions and such derivative works.
+
+3. Grant of Patent License. Subject to the terms and conditions of this
+   Agreement, You hereby grant to Lightpanda and to recipients of software
+   distributed by Lightpanda a perpetual, worldwide, non-exclusive, no-charge,
+   royalty-free, irrevocable (except as stated in this section) patent license
+   to make, have made, use, offer to sell, sell, import, and otherwise transfer
+   the Work, where such license applies only to those patent claims licensable
+   by You that are necessarily infringed by Your Contribution(s) alone or by
+   combination of Your Contribution(s) with the Work to which such
+   Contribution(s) were submitted. If any entity institutes patent litigation
+   against You or any other entity (including a cross-claim or counterclaim in
+   a lawsuit) alleging that your Contribution, or the Work to which you have
+   contributed, constitutes direct or contributory patent infringement, then
+   any patent licenses granted to that entity under this Agreement for that
+   Contribution or Work shall terminate as of the date such litigation is
+   filed.
+
+4. You represent that You are legally entitled to grant the above license. If
+   You are an individual, and if Your employer(s) has rights to intellectual
+   property that you create that includes Your Contributions, you represent
+   that You have received permission to make Contributions on behalf of that
+   employer, or that Your employer has waived such rights for your
+   Contributions to Lightpanda. If You are a Corporation, any individual who
+   makes a contribution from an account associated with You will be considered
+   authorized to Contribute on Your behalf.
+
+5. You represent that each of Your Contributions is Your original creation (see
+   section 7 for submissions on behalf of others).
+
+6. You are not expected to provide support for Your Contributions,except to the
+   extent You desire to provide support. You may provide support for free, for
+   a fee, or not at all. Unless required by applicable law or agreed to in
+   writing, You provide Your Contributions on an “AS IS” BASIS, WITHOUT
+   WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied, including,
+   without limitation, any warranties or conditions of TITLE, NON-INFRINGEMENT,
+   MERCHANTABILITY, or FITNESS FOR A PARTICULAR PURPOSE.
+
+7. Should You wish to submit work that is not Your original creation, You may
+   submit it to Lightpanda separately from any Contribution, identifying the
+   complete details of its source and of any license or other restriction
+   (including, but not limited to, related patents, trademarks, and license
+   agreements) of which you are personally aware, and conspicuously marking the
+   work as “Submitted on behalf of a third-party: [named here]”.

CONTRIBUTING.md

@@ -0,0 +1,10 @@
+# Contributing
+
+Lightpanda accepts pull requests through GitHub.
+
+You have to sign our [CLA](CLA.md) during your first pull request process
+otherwise we're not able to accept your contributions.
+
+The process signature uses the [CLA assistant
+lite](https://github.com/marketplace/actions/cla-assistant-lite). You can see
+an example of the process in [#303](https://github.com/lightpanda-io/browser/pull/303).

Dockerfile

@@ -0,0 +1,82 @@
+FROM debian:stable-slim
+
+ARG MINISIG=0.12
+ARG ZIG_MINISIG=RWSGOq2NVecA2UPNdBUZykf1CCb147pkmdtYxgb3Ti+JO/wCYvhbAb/U
+ARG V8=14.0.365.4
+ARG ZIG_V8=v0.2.6
+ARG TARGETPLATFORM
+
+RUN apt-get update -yq && \
+    apt-get install -yq xz-utils ca-certificates \
+        pkg-config libglib2.0-dev \
+        clang make curl git
+
+# Get Rust
+RUN curl https://sh.rustup.rs -sSf | sh -s -- --profile minimal -y
+ENV PATH="/root/.cargo/bin:${PATH}"
+
+# install minisig
+RUN curl --fail -L -O https://github.com/jedisct1/minisign/releases/download/${MINISIG}/minisign-${MINISIG}-linux.tar.gz && \
+    tar xvzf minisign-${MINISIG}-linux.tar.gz -C /
+
+# clone lightpanda
+RUN git clone https://github.com/lightpanda-io/browser.git
+WORKDIR /browser
+
+# install zig
+RUN ZIG=$(grep '\.minimum_zig_version = "' "build.zig.zon" | cut -d'"' -f2) && \
+    case $TARGETPLATFORM in \
+      "linux/arm64") ARCH="aarch64" ;; \
+      *) ARCH="x86_64" ;; \
+    esac && \
+    curl --fail -L -O https://ziglang.org/download/${ZIG}/zig-${ARCH}-linux-${ZIG}.tar.xz && \
+    curl --fail -L -O https://ziglang.org/download/${ZIG}/zig-${ARCH}-linux-${ZIG}.tar.xz.minisig && \
+    /minisign-linux/${ARCH}/minisign -Vm zig-${ARCH}-linux-${ZIG}.tar.xz -P ${ZIG_MINISIG} && \
+    tar xvf zig-${ARCH}-linux-${ZIG}.tar.xz && \
+    mv zig-${ARCH}-linux-${ZIG} /usr/local/lib && \
+    ln -s /usr/local/lib/zig-${ARCH}-linux-${ZIG}/zig /usr/local/bin/zig
+
+# install deps
+RUN git submodule init && \
+    git submodule update --recursive
+
+# download and install v8
+RUN case $TARGETPLATFORM in \
+    "linux/arm64") ARCH="aarch64" ;; \
+    *) ARCH="x86_64" ;; \
+    esac && \
+    curl --fail -L -o libc_v8.a https://github.com/lightpanda-io/zig-v8-fork/releases/download/${ZIG_V8}/libc_v8_${V8}_linux_${ARCH}.a && \
+    mkdir -p v8/ && \
+    mv libc_v8.a v8/libc_v8.a
+
+# build v8 snapshot
+RUN zig build -Doptimize=ReleaseFast \
+    -Dprebuilt_v8_path=v8/libc_v8.a \
+    snapshot_creator -- src/snapshot.bin
+
+# build release
+RUN zig build -Doptimize=ReleaseFast \
+    -Dsnapshot_path=../../snapshot.bin \
+    -Dprebuilt_v8_path=v8/libc_v8.a \
+    -Dgit_commit=$(git rev-parse --short HEAD)
+
+FROM debian:stable-slim
+
+RUN apt-get update -yq && \
+    apt-get install -yq tini
+
+FROM debian:stable-slim
+
+# copy ca certificates
+COPY --from=0 /etc/ssl/certs/ca-certificates.crt /etc/ssl/certs/ca-certificates.crt
+
+COPY --from=0 /browser/zig-out/bin/lightpanda /bin/lightpanda
+COPY --from=1 /usr/bin/tini /usr/bin/tini
+
+EXPOSE 9222/tcp
+
+# Lightpanda install only some signal handlers, and PID 1 doesn't have a default SIGTERM signal handler.
+# Using "tini" as PID1 ensures that signals work as expected, so e.g. "docker stop" will not hang.
+# (See https://github.com/krallin/tini#why-tini).
+ENTRYPOINT ["/usr/bin/tini", "--"]
+CMD ["/bin/lightpanda", "serve", "--host", "0.0.0.0", "--port", "9222", "--log_level", "info"]

LICENSING.md

@@ -0,0 +1,14 @@
+# Licensing
+
+License names used in this document are as per [SPDX License
+List](https://spdx.org/licenses/).
+
+The default license for this project is [AGPL-3.0-only](LICENSE).
+
+The following directories and their subdirectories are licensed under their
+original upstream licenses:
+
+```
+vendor/
+tests/wpt/
+```

Makefile

@@ -3,6 +3,30 @@
 
 ZIG := zig
 BC := $(dir $(abspath $(lastword $(MAKEFILE_LIST))))
+# option test filter make test F="server"
+F=
+
+# OS and ARCH
+kernel = $(shell uname -ms)
+ifeq ($(kernel), Darwin arm64)
+	OS := macos
+	ARCH := aarch64
+else ifeq ($(kernel), Darwin x86_64)
+	OS := macos
+	ARCH := x86_64
+else ifeq ($(kernel), Linux aarch64)
+	OS := linux
+	ARCH := aarch64
+else ifeq ($(kernel), Linux arm64)
+	OS := linux
+	ARCH := aarch64
+else ifeq ($(kernel), Linux x86_64)
+	OS := linux
+	ARCH := x86_64
+else
+	$(error "Unhandled kernel: $(kernel)")
+endif
+
 
 # Infos
 # -----
@@ -10,7 +34,7 @@ BC := $(dir $(abspath $(lastword $(MAKEFILE_LIST))))
 
 ## Display this help screen
 help:
-	@printf "\e[36m%-35s %s\e[0m\n" "Command" "Usage"
+	@printf "\033[36m%-35s %s\033[0m\n" "Command" "Usage"
 	@sed -n -e '/^## /{'\
 		-e 's/## //g;'\
 		-e 'h;'\
@@ -23,189 +47,75 @@ help:
 
 # $(ZIG) commands
 # ------------
-.PHONY: build build-dev run run-release shell test bench download-zig wpt
+.PHONY: build build-v8-snapshot build-dev run run-release shell test bench wpt data end2end
 
-zig_version = $(shell grep 'recommended_zig_version = "' "vendor/zig-js-runtime/build.zig" | cut -d'"' -f2)
-kernel = $(shell uname -ms)
+## Build v8 snapshot
+build-v8-snapshot:
+	@printf "\033[36mBuilding v8 snapshot (release safe)...\033[0m\n"
+	@$(ZIG) build -Doptimize=ReleaseFast snapshot_creator -- src/snapshot.bin || (printf "\033[33mBuild ERROR\033[0m\n"; exit 1;)
+	@printf "\033[33mBuild OK\033[0m\n"
 
-## Download the zig recommended version
-download-zig:
-ifeq ($(kernel), Darwin x86_64)
-	$(eval target="macos")
-	$(eval arch="x86_64")
-else ifeq ($(kernel), Darwin arm64)
-	$(eval target="macos")
-	$(eval arch="aarch64")
-else ifeq ($(kernel), Linux aarch64)
-	$(eval target="linux")
-	$(eval arch="aarch64")
-else ifeq ($(kernel), Linux arm64)
-	$(eval target="linux")
-	$(eval arch="aarch64")
-else ifeq ($(kernel), Linux x86_64)
-	$(eval target="linux")
-	$(eval arch="x86_64")
-else
-	$(error "Unhandled kernel: $(kernel)")
-endif
-	$(eval url = "https://ziglang.org/builds/zig-$(target)-$(arch)-$(zig_version).tar.xz")
-	$(eval dest = "/tmp/zig-$(target)-$(arch)-$(zig_version).tar.xz")
-	@printf "\e[36mDownload zig version $(zig_version)...\e[0m\n"
-	@curl -o "$(dest)" -L "$(url)" || (printf "\e[33mBuild ERROR\e[0m\n"; exit 1;)
-	@printf "\e[33mDownloaded $(dest)\e[0m\n"
-
-## Build in release-safe mode
-build:
-	@printf "\e[36mBuilding (release safe)...\e[0m\n"
-	@$(ZIG) build -Doptimize=ReleaseSafe -Dengine=v8 || (printf "\e[33mBuild ERROR\e[0m\n"; exit 1;)
-	@printf "\e[33mBuild OK\e[0m\n"
+## Build in release-fast mode
+build: build-v8-snapshot
+	@printf "\033[36mBuilding (release safe)...\033[0m\n"
+	@$(ZIG) build -Doptimize=ReleaseFast -Dsnapshot_path=../../snapshot.bin -Dgit_commit=$$(git rev-parse --short HEAD) || (printf "\033[33mBuild ERROR\033[0m\n"; exit 1;)
+	@printf "\033[33mBuild OK\033[0m\n"
 
 ## Build in debug mode
 build-dev:
-	@printf "\e[36mBuilding (debug)...\e[0m\n"
-	@$(ZIG) build -Dengine=v8 || (printf "\e[33mBuild ERROR\e[0m\n"; exit 1;)
-	@printf "\e[33mBuild OK\e[0m\n"
+	@printf "\033[36mBuilding (debug)...\033[0m\n"
+	@$(ZIG) build -Dgit_commit=$$(git rev-parse --short HEAD) || (printf "\033[33mBuild ERROR\033[0m\n"; exit 1;)
+	@printf "\033[33mBuild OK\033[0m\n"
+
+## Run the server in release mode
+run: build
+	@printf "\033[36mRunning...\033[0m\n"
+	@./zig-out/bin/lightpanda || (printf "\033[33mRun ERROR\033[0m\n"; exit 1;)
 
 ## Run the server in debug mode
-run: build
-	@printf "\e[36mRunning...\e[0m\n"
-	@./zig-out/bin/browsercore || (printf "\e[33mRun ERROR\e[0m\n"; exit 1;)
+run-debug: build-dev
+	@printf "\033[36mRunning...\033[0m\n"
+	@./zig-out/bin/lightpanda || (printf "\033[33mRun ERROR\033[0m\n"; exit 1;)
 
 ## Run a JS shell in debug mode
 shell:
-	@printf "\e[36mBuilding shell...\e[0m\n"
-	@$(ZIG) build shell -Dengine=v8 || (printf "\e[33mBuild ERROR\e[0m\n"; exit 1;)
+	@printf "\033[36mBuilding shell...\033[0m\n"
+	@$(ZIG) build shell || (printf "\033[33mBuild ERROR\033[0m\n"; exit 1;)
 
 ## Run WPT tests
 wpt:
-	@printf "\e[36mBuilding wpt...\e[0m\n"
-	@$(ZIG) build wpt -Dengine=v8 -- --safe $(filter-out $@,$(MAKECMDGOALS)) || (printf "\e[33mBuild ERROR\e[0m\n"; exit 1;)
+	@printf "\033[36mBuilding wpt...\033[0m\n"
+	@$(ZIG) build wpt -- $(filter-out $@,$(MAKECMDGOALS)) || (printf "\033[33mBuild ERROR\033[0m\n"; exit 1;)
 
 wpt-summary:
-	@printf "\e[36mBuilding wpt...\e[0m\n"
-	@$(ZIG) build wpt -Dengine=v8 -- --safe --summary $(filter-out $@,$(MAKECMDGOALS)) || (printf "\e[33mBuild ERROR\e[0m\n"; exit 1;)
+	@printf "\033[36mBuilding wpt...\033[0m\n"
+	@$(ZIG) build wpt -- --summary $(filter-out $@,$(MAKECMDGOALS)) || (printf "\033[33mBuild ERROR\033[0m\n"; exit 1;)
 
-## Test
+## Test - `grep` is used to filter out the huge compile command on build
+ifeq ($(OS), macos)
 test:
-	@printf "\e[36mTesting...\e[0m\n"
-	@$(ZIG) build test -Dengine=v8 || (printf "\e[33mTest ERROR\e[0m\n"; exit 1;)
-	@printf "\e[33mTest OK\e[0m\n"
+	@script -q /dev/null sh -c 'TEST_FILTER="${F}" $(ZIG) build test -freference-trace' 2>&1 \
+		| grep --line-buffered -v "^/.*zig test -freference-trace"
+else
+test:
+	@script -qec 'TEST_FILTER="${F}" $(ZIG) build test -freference-trace' /dev/null 2>&1 \
+		| grep --line-buffered -v "^/.*zig test -freference-trace"
+endif
+
+## Run demo/runner end to end tests
+end2end:
+	@test -d ../demo
+	cd ../demo && go run runner/main.go
 
 # Install and build required dependencies commands
 # ------------
-.PHONY: install-submodule
-.PHONY: install-zig-js-runtime install-zig-js-runtime-dev install-libiconv
-.PHONY: _install-netsurf install-netsurf clean-netsurf test-netsurf install-netsurf-dev
-.PHONY: install-mimalloc install-mimalloc-dev clean-mimalloc
-.PHONY: install-dev install
+.PHONY: install
 
 ## Install and build dependencies for release
-install: install-submodule install-zig-js-runtime install-netsurf install-mimalloc
+install: install-submodule
 
-## Install and build dependencies for dev
-install-dev: install-submodule install-zig-js-runtime-dev install-netsurf-dev install-mimalloc-dev
-
-install-netsurf-dev: _install-netsurf
-install-netsurf-dev: OPTCFLAGS := -O0 -g -DNDEBUG
-
-install-netsurf: _install-netsurf
-install-netsurf: OPTCFLAGS := -DNDEBUG
-
-BC_NS := $(BC)vendor/netsurf
-ICONV := $(BC)vendor/libiconv
-# TODO: add Linux iconv path (I guess it depends on the distro)
-# TODO: this way of linking libiconv is not ideal. We should have a more generic way
-# and stick to a specif version. Maybe build from source. Anyway not now.
-_install-netsurf: install-libiconv
-	@printf "\e[36mInstalling NetSurf...\e[0m\n" && \
-	ls $(ICONV) 1> /dev/null || (printf "\e[33mERROR: you need to install libiconv in your system (on MacOS on with Homebrew)\e[0m\n"; exit 1;) && \
-	export PREFIX=$(BC_NS) && \
-	export OPTLDFLAGS="-L$(ICONV)/lib" && \
-	export OPTCFLAGS="$(OPTCFLAGS) -I$(ICONV)/include" && \
-	printf "\e[33mInstalling libwapcaplet...\e[0m\n" && \
-	cd vendor/netsurf/libwapcaplet && \
-	BUILDDIR=$(BC_NS)/build/libwapcaplet make install && \
-	cd ../libparserutils && \
-	printf "\e[33mInstalling libparserutils...\e[0m\n" && \
-	BUILDDIR=$(BC_NS)/build/libparserutils make install && \
-	cd ../libhubbub && \
-	printf "\e[33mInstalling libhubbub...\e[0m\n" && \
-	BUILDDIR=$(BC_NS)/build/libhubbub make install && \
-	rm src/treebuilder/autogenerated-element-type.c && \
-	cd ../libdom && \
-	printf "\e[33mInstalling libdom...\e[0m\n" && \
-	BUILDDIR=$(BC_NS)/build/libdom make install && \
-	printf "\e[33mRunning libdom example...\e[0m\n" && \
-	cd examples && \
-	zig cc \
-	-I$(ICONV)/include \
-	-I$(BC_NS)/include \
-	-L$(ICONV)/lib \
-	-L$(BC_NS)/lib \
-	-liconv \
-	-ldom \
-	-lhubbub \
-	-lparserutils \
-	-lwapcaplet \
-	-o a.out \
-	dom-structure-dump.c \
-	$(ICONV)/lib/libiconv.a && \
-	./a.out > /dev/null && \
-	rm a.out && \
-	printf "\e[36mDone NetSurf $(OS)\e[0m\n"
-
-clean-netsurf:
-	@printf "\e[36mCleaning NetSurf build...\e[0m\n" && \
-	cd vendor/netsurf && \
-	rm -R build && \
-	rm -R lib && \
-	rm -R include
-
-test-netsurf:
-	@printf "\e[36mTesting NetSurf...\e[0m\n" && \
-	export PREFIX=$(BC_NS) && \
-	export LDFLAGS="-L$(ICONV)/lib -L$(BC_NS)/lib" && \
-	export CFLAGS="-I$(ICONV)/include -I$(BC_NS)/include" && \
-	cd vendor/netsurf/libdom && \
-	BUILDDIR=$(BC_NS)/build/libdom make test
-
-install-libiconv:
-ifeq ("$(wildcard vendor/libiconv/lib/libiconv.a)","")
-	@mkdir -p vendor/libiconv
-	@cd vendor/libiconv && \
-	curl https://ftp.gnu.org/pub/gnu/libiconv/libiconv-1.17.tar.gz | tar -xvzf -
-	@cd vendor/libiconv/libiconv-1.17 && \
-	./configure --prefix=$(BC)vendor/libiconv --enable-static && \
-	make && make install
-endif
-
-install-zig-js-runtime-dev:
-	@cd vendor/zig-js-runtime && \
-	make install-dev
-
-install-zig-js-runtime:
-	@cd vendor/zig-js-runtime && \
-	make install
-
-.PHONY: _build_mimalloc
-_build_mimalloc:
-	@cd vendor/mimalloc && \
-		mkdir -p out/include && \
-		cp include/mimalloc.h out/include/ && \
-		cd out && \
-		cmake -DMI_BUILD_SHARED=OFF -DMI_BUILD_OBJECT=OFF -DMI_BUILD_TESTS=OFF -DMI_OVERRIDE=OFF $(OPTS) .. && \
-		make
-
-install-mimalloc-dev: _build_mimalloc
-install-mimalloc-dev: OPTS=-DCMAKE_BUILD_TYPE=Debug
-install-mimalloc-dev:
-	@cd vendor/mimalloc/out && \
-		mv libmimalloc-debug.a libmimalloc.a
-
-install-mimalloc: _build_mimalloc
-
-clean-mimalloc:
-	@rm -fr vendor/mimalloc/lib/*
+data:
+	cd src/data && go run public_suffix_list_gen.go > public_suffix_list.zig
 
 ## Init and update git submodule
 install-submodule:

README.md

@@ -2,115 +2,198 @@
   <a href="https://lightpanda.io"><img src="https://cdn.lightpanda.io/assets/images/logo/lpd-logo.png" alt="Logo" height=170></a>
 </p>
 
-<h1 align="center">Lightpanda</h1>
+<h1 align="center">Lightpanda Browser</h1>
+
+<p align="center"><a href="https://lightpanda.io/">lightpanda.io</a></p>
 
 <div align="center">
-	<br />
+
+[![License](https://img.shields.io/github/license/lightpanda-io/browser)](https://github.com/lightpanda-io/browser/blob/main/LICENSE)
+[![Twitter Follow](https://img.shields.io/twitter/follow/lightpanda_io)](https://twitter.com/lightpanda_io)
+[![GitHub stars](https://img.shields.io/github/stars/lightpanda-io/browser)](https://github.com/lightpanda-io/browser)
+
 </div>
 
 Lightpanda is the open-source browser made for headless usage:
 
 - Javascript execution
-- Support of the Web APIs (partial, WIP)
-- Compatible with Playwright, Puppeteer through CDP (WIP)
+- Support of Web APIs (partial, WIP)
+- Compatible with Playwright[^1], Puppeteer, chromedp through [CDP](https://chromedevtools.github.io/devtools-protocol/)
 
-Fast scraping and web automation with minimal memory footprint:
+Fast web automation for AI agents, LLM training, scraping and testing:
 
-- Ultra-low memory footprint (12x less than Chrome)
-- Blazingly fast & instant startup (64x faster than Chrome)
+- Ultra-low memory footprint (9x less than Chrome)
+- Exceptionally fast execution (11x faster than Chrome)
+- Instant startup
 
-<img width=500px src="https://cdn.lightpanda.io/assets/images/benchmark2.png">
+[<img width="350px" src="https://cdn.lightpanda.io/assets/images/github/execution-time.svg">
+](https://github.com/lightpanda-io/demo)
+&emsp;
+[<img width="350px" src="https://cdn.lightpanda.io/assets/images/github/memory-frame.svg">
+](https://github.com/lightpanda-io/demo)
+</div>
 
-See [benchmark details](https://github.com/lightpanda-io/demo).
+_Puppeteer requesting 100 pages from a local website on a AWS EC2 m5.large instance.
+See [benchmark details](https://github.com/lightpanda-io/demo)._
 
-## Why?
+[^1]: **Playwright support disclaimer:**
+Due to the nature of Playwright, a script that works with the current version of the browser may not function correctly with a future version. Playwright uses an intermediate JavaScript layer that selects an execution strategy based on the browser's available features. If Lightpanda adds a new [Web API](https://developer.mozilla.org/en-US/docs/Web/API), Playwright may choose to execute different code for the same script. This new code path could attempt to use features that are not yet implemented. Lightpanda makes an effort to add compatibility tests, but we can't cover all scenarios. If you encounter an issue, please create a [GitHub issue](https://github.com/lightpanda-io/browser/issues) and include the last known working version of the script.
 
-### Javascript execution is mandatory for the modern web
+## Quick start
 
-Back in the good old times, grabbing a webpage was as easy as making an HTTP request, cURL-like. It’s not possible anymore, because Javascript is everywhere, like it or not:
+### Install
+**Install from the nightly builds**
 
-- Ajax, Single Page App, Infinite loading, “click to display”, instant search, etc.
-- JS web frameworks: React, Vue, Angular & others
+You can download the last binary from the [nightly
+builds](https://github.com/lightpanda-io/browser/releases/tag/nightly) for
+Linux x86_64 and MacOS aarch64.
 
-### Chrome is not the right tool
+*For Linux*
+```console
+curl -L -o lightpanda https://github.com/lightpanda-io/browser/releases/download/nightly/lightpanda-x86_64-linux && \
+chmod a+x ./lightpanda
+```
 
-So if we need Javascript, why not use a real web browser. Let’s take a huge desktop application, hack it, and run it on the server, right? Hundreds of instance of Chrome if you use it at scale. Are you sure it’s such a good idea?
+*For MacOS*
+```console
+curl -L -o lightpanda https://github.com/lightpanda-io/browser/releases/download/nightly/lightpanda-aarch64-macos && \
+chmod a+x ./lightpanda
+```
 
-- Heavy on RAM and CPU, expensive to run
-- Hard to package, deploy and maintain at scale
-- Bloated, lots of features are not useful in headless usage
+*For Windows + WSL2*
 
-### Lightpanda is built for performance
+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.
 
-If we want both Javascript and performance, for a real headless browser, we need to start from scratch. Not yet another iteration of Chromium, really from a blank page. Crazy right? But that’s we did:
+**Install from Docker**
 
-- Not based on Chromium, Blink or WebKit
-- Low-level system programming language (Zig) with optimisations in mind
-- Opinionated, no rendering
+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`.
+```console
+docker run -d --name lightpanda -p 9222:9222 lightpanda/browser:nightly
+```
+
+### Dump a URL
+
+```console
+./lightpanda fetch --dump https://lightpanda.io
+```
+```console
+info(browser): GET https://lightpanda.io/ http.Status.ok
+info(browser): fetch script https://api.website.lightpanda.io/js/script.js: http.Status.ok
+info(browser): eval remote https://api.website.lightpanda.io/js/script.js: TypeError: Cannot read properties of undefined (reading 'pushState')
+<!DOCTYPE html>
+```
+
+### Start a CDP server
+
+```console
+./lightpanda serve --host 127.0.0.1 --port 9222
+```
+```console
+info(websocket): starting blocking worker to listen on 127.0.0.1:9222
+info(server): accepting new conn...
+```
+
+Once the CDP server started, you can run a Puppeteer script by configuring the
+`browserWSEndpoint`.
+
+```js
+'use strict'
+
+import puppeteer from 'puppeteer-core';
+
+// use browserWSEndpoint to pass the Lightpanda's CDP server address.
+const browser = await puppeteer.connect({
+  browserWSEndpoint: "ws://127.0.0.1:9222",
+});
+
+// The rest of your script remains the same.
+const context = await browser.createBrowserContext();
+const page = await context.newPage();
+
+// Dump all the links from the page.
+await page.goto('https://wikipedia.com/');
+
+const links = await page.evaluate(() => {
+  return Array.from(document.querySelectorAll('a')).map(row => {
+    return row.getAttribute('href');
+  });
+});
+
+console.log(links);
+
+await page.close();
+await context.close();
+await browser.disconnect();
+```
+
+### Telemetry
+By default, Lightpanda collects and sends usage telemetry. This can be disabled by setting an environment variable `LIGHTPANDA_DISABLE_TELEMETRY=true`. You can read Lightpanda's privacy policy at: [https://lightpanda.io/privacy-policy](https://lightpanda.io/privacy-policy).
 
 ## Status
 
-Lightpanda is still a work in progress and is currently at the Alpha stage.
+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 want to implement before releasing a Beta version:
+Here are the key features we have implemented:
 
-- [x] Loader
-- [x] HTML parser and DOM tree
-- [x] Javascript support
-- [x] Basic DOM APIs
+- [x] HTTP loader ([Libcurl](https://curl.se/libcurl/))
+- [x] HTML parser ([html5ever](https://github.com/servo/html5ever))
+- [x] DOM tree
+- [x] Javascript support ([v8](https://v8.dev/))
+- [x] DOM APIs
 - [x] Ajax
   - [x] XHR API
-  - [ ] Fetch API
+  - [x] Fetch API
 - [x] DOM dump
-- [ ] Basic CDP server
+- [x] CDP/websockets server
+- [x] Click
+- [x] Input form
+- [x] Cookies
+- [x] Custom HTTP headers
+- [x] Proxy support
+- [x] Network interception
 
-We will not provide binary versions until we reach at least the Beta stage.
-
-NOTE: There are hundreds of Web APIs. Developing a browser, even just for headless mode, is a huge task. It's more about coverage than a _working/not working_ binary situation.
+NOTE: There are hundreds of Web APIs. Developing a browser (even just for headless mode) is a huge task. Coverage will increase over time.
 
 You can also follow the progress of our Javascript support in our dedicated [zig-js-runtime](https://github.com/lightpanda-io/zig-js-runtime#development) project.
 
 ## Build from sources
 
-We do not provide yet binary versions of Lightpanda, you have to compile it from source.
-
 ### Prerequisites
 
-Lightpanda is written with [Zig](https://ziglang.org/) `0.12.1`. You have to
+Lightpanda is written with [Zig](https://ziglang.org/) `0.15.2`. You have to
 install it with the right version in order to build the project.
 
 Lightpanda also depends on
 [zig-js-runtime](https://github.com/lightpanda-io/zig-js-runtime/) (with v8),
-[Netsurf libs](https://www.netsurf-browser.org/) and
-[Mimalloc](https://microsoft.github.io/mimalloc).
+[Libcurl](https://curl.se/libcurl/) and [html5ever](https://github.com/servo/html5ever).
 
 To be able to build the v8 engine for zig-js-runtime, you have to install some libs:
 
-For Debian/Ubuntu based Linux:
+For **Debian/Ubuntu based Linux**:
 
 ```
-sudo apt install xz-utils \
-    python3 ca-certificates git \
+sudo apt install xz-utils ca-certificates \
     pkg-config libglib2.0-dev \
-    gperf libexpat1-dev \
-    cmake clang
+    clang make curl git
+```
+You also need to [install Rust](https://rust-lang.org/tools/install/).
+
+For systems with [**Nix**](https://nixos.org/download/), you can use the devShell:
+```
+nix develop
 ```
 
-For MacOS, you only need cmake:
-
+For **MacOS**, you need cmake and [Rust](https://rust-lang.org/tools/install/).
 ```
 brew install cmake
 ```
 
-### Install and build dependencies
-
-#### All in one build
-
-You can run `make install` to install deps all in one (or `make install-dev` if you need the development versions).
-
-Be aware that the build task is very long and cpu consuming, as you will build from sources all dependancies, including the v8 Javascript engine.
-
-#### Step by step build dependancy
+### Install Git submodules
 
 The project uses git submodules for dependencies.
 
@@ -120,41 +203,31 @@ To init or update the submodules in the `vendor/` directory:
 make install-submodule
 ```
 
-**Netsurf libs**
+This is an alias for `git submodule init && git submodule update`.
 
-Netsurf libs are used for HTML parsing and DOM tree generation.
+### Build and run
 
+You an build the entire browser with `make build` or `make build-dev` for debug
+env.
+
+But you can directly use the zig command: `zig build run`.
+
+#### Embed v8 snapshot
+
+Lighpanda uses v8 snapshot. By default, it is created on startup but you can
+embed it by using the following commands:
+
+Generate the snapshot.
 ```
-make install-netsurf
+zig build snapshot_creator -- src/snapshot.bin
 ```
 
-For dev env, use `make install-netsurf-dev`.
-
-**Mimalloc**
-
-Mimalloc is used as a C memory allocator.
-
+Build using the snapshot binary.
 ```
-make install-mimalloc
+zig build -Dsnapshot_path=../../snapshot.bin
 ```
 
-For dev env, use `make install-mimalloc-dev`.
-
-Note: when Mimalloc is built in dev mode, you can dump memory stats with the
-env var `MIMALLOC_SHOW_STATS=1`. See
-[https://microsoft.github.io/mimalloc/environment.html](https://microsoft.github.io/mimalloc/environment.html).
-
-**zig-js-runtime**
-
-Our own Zig/Javascript runtime, which includes the v8 Javascript engine.
-
-This build task is very long and cpu consuming, as you will build v8 from sources.
-
-```
-make install-zig-js-runtime
-```
-
-For dev env, use `make iinstall-zig-js-runtime-dev`.
+See [#1279](https://github.com/lightpanda-io/browser/pull/1279) for more details.
 
 ## Test
 
@@ -162,6 +235,20 @@ For dev env, use `make iinstall-zig-js-runtime-dev`.
 
 You can test Lightpanda by running `make test`.
 
+### End to end tests
+
+To run end to end tests, you need to clone the [demo
+repository](https://github.com/lightpanda-io/demo) into `../demo` dir.
+
+You have to install the [demo's node
+requirements](https://github.com/lightpanda-io/demo?tab=readme-ov-file#dependencies-1)
+
+You also need to install [Go](https://go.dev) > v1.24.
+
+```
+make end2end
+```
+
 ### Web Platform Tests
 
 Lightpanda is tested against the standardized [Web Platform
@@ -196,3 +283,35 @@ To add a new test, copy the file you want from the [WPT
 repo](https://github.com/web-platform-tests/wpt) into the `tests/wpt` directory.
 
 :warning: Please keep the original directory tree structure of `tests/wpt`.
+
+## Contributing
+
+Lightpanda accepts pull requests through GitHub.
+
+You have to sign our [CLA](CLA.md) during the pull request process otherwise
+we're not able to accept your contributions.
+
+## Why?
+
+### Javascript execution is mandatory for the modern web
+
+In the good old days, scraping a webpage was as easy as making an HTTP request, cURL-like. It’s not possible anymore, because Javascript is everywhere, like it or not:
+
+- Ajax, Single Page App, infinite loading, “click to display”, instant search, etc.
+- JS web frameworks: React, Vue, Angular & others
+
+### Chrome is not the right tool
+
+If we need Javascript, why not use a real web browser? Take a huge desktop application, hack it, and run it on the server. Hundreds or thousands of instances of Chrome if you use it at scale. Are you sure it’s such a good idea?
+
+- Heavy on RAM and CPU, expensive to run
+- Hard to package, deploy and maintain at scale
+- Bloated, lots of features are not useful in headless usage
+
+### Lightpanda is built for performance
+
+If we want both Javascript and performance in a true headless browser, we need to start from scratch. Not another iteration of Chromium, really from a blank page. Crazy right? But that’s what we did:
+
+- Not based on Chromium, Blink or WebKit
+- Low-level system programming language (Zig) with optimisations in mind
+- Opinionated: without graphical rendering

build.zig

@@ -18,205 +18,726 @@
 
 const std = @import("std");
 
-const builtin = @import("builtin");
-
-const jsruntime_path = "vendor/zig-js-runtime/";
-const jsruntime = @import("vendor/zig-js-runtime/build.zig");
-const jsruntime_pkgs = jsruntime.packages(jsruntime_path);
-
-/// Do not rename this constant. It is scanned by some scripts to determine
-/// which zig version to install.
-const recommended_zig_version = jsruntime.recommended_zig_version;
-
-pub fn build(b: *std.Build) !void {
-    switch (comptime builtin.zig_version.order(std.SemanticVersion.parse(recommended_zig_version) catch unreachable)) {
-        .eq => {},
-        .lt => {
-            @compileError("The minimum version of Zig required to compile is '" ++ recommended_zig_version ++ "', found '" ++ builtin.zig_version_string ++ "'.");
-        },
-        .gt => {
-            std.debug.print(
-                "WARNING: Recommended Zig version '{s}', but found '{s}', build may fail...\n\n",
-                .{ recommended_zig_version, builtin.zig_version_string },
-            );
-        },
-    }
+const Build = std.Build;
 
+pub fn build(b: *Build) !void {
     const target = b.standardTargetOptions(.{});
-    const mode = b.standardOptimizeOption(.{});
+    const optimize = b.standardOptimizeOption(.{});
 
-    const options = try jsruntime.buildOptions(b);
+    const manifest = Manifest.init(b);
 
+    const git_commit = b.option([]const u8, "git_commit", "Current git commit");
+    const prebuilt_v8_path = b.option([]const u8, "prebuilt_v8_path", "Path to prebuilt libc_v8.a");
+    const snapshot_path = b.option([]const u8, "snapshot_path", "Path to v8 snapshot");
+
+    var opts = b.addOptions();
+    opts.addOption([]const u8, "version", manifest.version);
+    opts.addOption([]const u8, "git_commit", git_commit orelse "dev");
+    opts.addOption(?[]const u8, "snapshot_path", snapshot_path);
+
+    const enable_tsan = b.option(bool, "tsan", "Enable Thread Sanitizer");
+    const enable_csan = b.option(std.zig.SanitizeC, "csan", "Enable C Sanitizers");
+
+    const lightpanda_module = blk: {
+        const mod = b.addModule("lightpanda", .{
+            .root_source_file = b.path("src/lightpanda.zig"),
+            .target = target,
+            .optimize = optimize,
+            .link_libc = true,
+            .link_libcpp = true,
+            .sanitize_c = enable_csan,
+            .sanitize_thread = enable_tsan,
+        });
+        mod.addImport("lightpanda", mod); // allow circular "lightpanda" import
+
+        try addDependencies(b, mod, opts, prebuilt_v8_path);
+
+        break :blk mod;
+    };
+
+    {
         // browser
-    // -------
-
-    // compile and install
         const exe = b.addExecutable(.{
-        .name = "browsercore",
+            .name = "lightpanda",
+            .use_llvm = true,
+            .root_module = b.createModule(.{
                 .root_source_file = b.path("src/main.zig"),
                 .target = target,
-        .optimize = mode,
+                .optimize = optimize,
+                .sanitize_c = enable_csan,
+                .sanitize_thread = enable_tsan,
+                .imports = &.{
+                    .{ .name = "lightpanda", .module = lightpanda_module },
+                },
+            }),
         });
-    try common(b, exe, options);
         b.installArtifact(exe);
 
-    // run
         const run_cmd = b.addRunArtifact(exe);
         if (b.args) |args| {
             run_cmd.addArgs(args);
         }
-
-    // step
         const run_step = b.step("run", "Run the app");
         run_step.dependOn(&run_cmd.step);
-
-    // shell
-    // -----
-
-    // compile and install
-    const shell = b.addExecutable(.{
-        .name = "browsercore-shell",
-        .root_source_file = b.path("src/main_shell.zig"),
-        .target = target,
-        .optimize = mode,
-    });
-    try common(b, shell, options);
-    try jsruntime_pkgs.add_shell(shell);
-
-    // run
-    const shell_cmd = b.addRunArtifact(shell);
-    if (b.args) |args| {
-        shell_cmd.addArgs(args);
     }
 
-    // step
-    const shell_step = b.step("shell", "Run JS shell");
-    shell_step.dependOn(&shell_cmd.step);
+    {
+        // snapshot creator
+        const exe = b.addExecutable(.{
+            .name = "lightpanda-snapshot-creator",
+            .use_llvm = true,
+            .root_module = b.createModule(.{
+                .root_source_file = b.path("src/main_snapshot_creator.zig"),
+                .target = target,
+                .optimize = optimize,
+                .imports = &.{
+                    .{ .name = "lightpanda", .module = lightpanda_module },
+                },
+            }),
+        });
+        b.installArtifact(exe);
 
+        const run_cmd = b.addRunArtifact(exe);
+        if (b.args) |args| {
+            run_cmd.addArgs(args);
+        }
+        const run_step = b.step("snapshot_creator", "Generate a v8 snapshot");
+        run_step.dependOn(&run_cmd.step);
+    }
+
+    {
         // test
-    // ----
-
-    // compile
         const tests = b.addTest(.{
-        .root_source_file = b.path("src/run_tests.zig"),
-        .test_runner = b.path("src/test_runner.zig"),
-        .target = target,
-        .optimize = mode,
+            .root_module = lightpanda_module,
+            .use_llvm = true,
+            .test_runner = .{ .path = b.path("src/test_runner.zig"), .mode = .simple },
         });
-    try common(b, tests, options);
-
-    // add jsruntime pretty deps
-    tests.root_module.addAnonymousImport("pretty", .{
-        .root_source_file = b.path("vendor/zig-js-runtime/src/pretty.zig"),
-    });
-
         const run_tests = b.addRunArtifact(tests);
-    if (b.args) |args| {
-        run_tests.addArgs(args);
-    }
-
-    // step
         const test_step = b.step("test", "Run unit tests");
         test_step.dependOn(&run_tests.step);
+    }
 
+    {
+        // browser
+        const exe = b.addExecutable(.{
+            .name = "legacy_test",
+            .use_llvm = true,
+            .root_module = b.createModule(.{
+                .root_source_file = b.path("src/main_legacy_test.zig"),
+                .target = target,
+                .optimize = optimize,
+                .sanitize_c = enable_csan,
+                .sanitize_thread = enable_tsan,
+                .imports = &.{
+                    .{ .name = "lightpanda", .module = lightpanda_module },
+                },
+            }),
+        });
+        b.installArtifact(exe);
+
+        const run_cmd = b.addRunArtifact(exe);
+        if (b.args) |args| {
+            run_cmd.addArgs(args);
+        }
+        const run_step = b.step("legacy_test", "Run the app");
+        run_step.dependOn(&run_cmd.step);
+    }
+
+    {
         // wpt
-    // -----
-
-    // compile and install
-    const wpt = b.addExecutable(.{
-        .name = "browsercore-wpt",
+        const exe = b.addExecutable(.{
+            .name = "lightpanda-wpt",
+            .use_llvm = true,
+            .root_module = b.createModule(.{
                 .root_source_file = b.path("src/main_wpt.zig"),
                 .target = target,
-        .optimize = mode,
+                .optimize = optimize,
+                .sanitize_c = enable_csan,
+                .sanitize_thread = enable_tsan,
+                .imports = &.{
+                    .{ .name = "lightpanda", .module = lightpanda_module },
+                },
+            }),
         });
-    try common(b, wpt, options);
+        b.installArtifact(exe);
 
-    // run
-    const wpt_cmd = b.addRunArtifact(wpt);
+        const run_cmd = b.addRunArtifact(exe);
         if (b.args) |args| {
-        wpt_cmd.addArgs(args);
+            run_cmd.addArgs(args);
         }
-    // step
-    const wpt_step = b.step("wpt", "WPT tests");
-    wpt_step.dependOn(&wpt_cmd.step);
+        const run_step = b.step("wpt", "Run WPT tests");
+        run_step.dependOn(&run_cmd.step);
+    }
+}
 
-    // get
-    // -----
+fn addDependencies(b: *Build, mod: *Build.Module, opts: *Build.Step.Options, prebuilt_v8_path: ?[]const u8) !void {
+    mod.addImport("build_config", opts.createModule());
 
-    // compile and install
-    const get = b.addExecutable(.{
-        .name = "browsercore-get",
-        .root_source_file = b.path("src/main_get.zig"),
+    const target = mod.resolved_target.?;
+    const dep_opts = .{
         .target = target,
-        .optimize = mode,
-    });
-    try common(b, get, options);
-    b.installArtifact(get);
-
-    // run
-    const get_cmd = b.addRunArtifact(get);
-    if (b.args) |args| {
-        get_cmd.addArgs(args);
-    }
-    // step
-    const get_step = b.step("get", "request URL");
-    get_step.dependOn(&get_cmd.step);
-}
-
-fn common(
-    b: *std.Build,
-    step: *std.Build.Step.Compile,
-    options: jsruntime.Options,
-) !void {
-    const jsruntimemod = try jsruntime_pkgs.module(
-        b,
-        options,
-        step.root_module.optimize.?,
-        step.root_module.resolved_target.?,
-    );
-    step.root_module.addImport("jsruntime", jsruntimemod);
-
-    const netsurf = moduleNetSurf(b);
-    netsurf.addImport("jsruntime", jsruntimemod);
-    step.root_module.addImport("netsurf", netsurf);
-}
-
-fn moduleNetSurf(b: *std.Build) *std.Build.Module {
-    const mod = b.addModule("netsurf", .{
-        .root_source_file = b.path("src/netsurf/netsurf.zig"),
-    });
-    // iconv
-    mod.addObjectFile(b.path("vendor/libiconv/lib/libiconv.a"));
-    mod.addIncludePath(b.path("vendor/libiconv/include"));
-
-    // mimalloc
-    mod.addImport("mimalloc", moduleMimalloc(b));
-
-    // netsurf libs
-    const ns = "vendor/netsurf";
-    mod.addIncludePath(b.path(ns ++ "/include"));
-
-    const libs: [4][]const u8 = .{
-        "libdom",
-        "libhubbub",
-        "libparserutils",
-        "libwapcaplet",
+        .optimize = mod.optimize.?,
+        .prebuilt_v8_path = prebuilt_v8_path,
+        .cache_root = b.pathFromRoot(".lp-cache"),
     };
-    inline for (libs) |lib| {
-        mod.addObjectFile(b.path(ns ++ "/lib/" ++ lib ++ ".a"));
-        mod.addIncludePath(b.path(ns ++ "/" ++ lib ++ "/src"));
+
+    mod.addIncludePath(b.path("vendor/lightpanda"));
+
+    {
+        // html5ever
+
+        // Build step to install html5ever dependency.
+        const html5ever_argv = blk: {
+            const argv: []const []const u8 = &.{
+                "cargo",
+                "build",
+                // Seems cargo can figure out required paths out of Cargo.toml.
+                "--manifest-path",
+                "src/html5ever/Cargo.toml",
+                // TODO: We can prefer `--artifact-dir` once it become stable.
+                "--target-dir",
+                b.getInstallPath(.prefix, "html5ever"),
+                // This must be the last argument.
+                "--release",
+            };
+
+            break :blk switch (mod.optimize.?) {
+                // Prefer dev build on debug option.
+                .Debug => argv[0 .. argv.len - 1],
+                else => argv,
+            };
+        };
+        const html5ever_exec_cargo = b.addSystemCommand(html5ever_argv);
+        const html5ever_step = b.step("html5ever", "Install html5ever dependency (requires cargo)");
+        html5ever_step.dependOn(&html5ever_exec_cargo.step);
+        opts.step.dependOn(html5ever_step);
+
+        const html5ever_obj = switch (mod.optimize.?) {
+            .Debug => b.getInstallPath(.prefix, "html5ever/debug/liblitefetch_html5ever.a"),
+            // Release builds.
+            else => b.getInstallPath(.prefix, "html5ever/release/liblitefetch_html5ever.a"),
+        };
+
+        mod.addObjectFile(.{ .cwd_relative = html5ever_obj });
     }
 
-    return mod;
-}
+    {
+        // v8
+        const v8_opts = b.addOptions();
+        v8_opts.addOption(bool, "inspector_subtype", false);
 
-fn moduleMimalloc(b: *std.Build) *std.Build.Module {
-    const mod = b.addModule("mimalloc", .{
-        .root_source_file = b.path("src/mimalloc/mimalloc.zig"),
+        const v8_mod = b.dependency("v8", dep_opts).module("v8");
+        v8_mod.addOptions("default_exports", v8_opts);
+        mod.addImport("v8", v8_mod);
+    }
+
+    {
+        //curl
+        {
+            const is_linux = target.result.os.tag == .linux;
+            if (is_linux) {
+                mod.addCMacro("HAVE_LINUX_TCP_H", "1");
+                mod.addCMacro("HAVE_MSG_NOSIGNAL", "1");
+                mod.addCMacro("HAVE_GETHOSTBYNAME_R", "1");
+            }
+            mod.addCMacro("_FILE_OFFSET_BITS", "64");
+            mod.addCMacro("BUILDING_LIBCURL", "1");
+            mod.addCMacro("CURL_DISABLE_AWS", "1");
+            mod.addCMacro("CURL_DISABLE_DICT", "1");
+            mod.addCMacro("CURL_DISABLE_DOH", "1");
+            mod.addCMacro("CURL_DISABLE_FILE", "1");
+            mod.addCMacro("CURL_DISABLE_FTP", "1");
+            mod.addCMacro("CURL_DISABLE_GOPHER", "1");
+            mod.addCMacro("CURL_DISABLE_KERBEROS", "1");
+            mod.addCMacro("CURL_DISABLE_IMAP", "1");
+            mod.addCMacro("CURL_DISABLE_IPFS", "1");
+            mod.addCMacro("CURL_DISABLE_LDAP", "1");
+            mod.addCMacro("CURL_DISABLE_LDAPS", "1");
+            mod.addCMacro("CURL_DISABLE_MQTT", "1");
+            mod.addCMacro("CURL_DISABLE_NTLM", "1");
+            mod.addCMacro("CURL_DISABLE_PROGRESS_METER", "1");
+            mod.addCMacro("CURL_DISABLE_POP3", "1");
+            mod.addCMacro("CURL_DISABLE_RTSP", "1");
+            mod.addCMacro("CURL_DISABLE_SMB", "1");
+            mod.addCMacro("CURL_DISABLE_SMTP", "1");
+            mod.addCMacro("CURL_DISABLE_TELNET", "1");
+            mod.addCMacro("CURL_DISABLE_TFTP", "1");
+            mod.addCMacro("CURL_EXTERN_SYMBOL", "__attribute__ ((__visibility__ (\"default\"))");
+            mod.addCMacro("CURL_OS", if (is_linux) "\"Linux\"" else "\"mac\"");
+            mod.addCMacro("CURL_STATICLIB", "1");
+            mod.addCMacro("ENABLE_IPV6", "1");
+            mod.addCMacro("HAVE_ALARM", "1");
+            mod.addCMacro("HAVE_ALLOCA_H", "1");
+            mod.addCMacro("HAVE_ARPA_INET_H", "1");
+            mod.addCMacro("HAVE_ARPA_TFTP_H", "1");
+            mod.addCMacro("HAVE_ASSERT_H", "1");
+            mod.addCMacro("HAVE_BASENAME", "1");
+            mod.addCMacro("HAVE_BOOL_T", "1");
+            mod.addCMacro("HAVE_BROTLI", "1");
+            mod.addCMacro("HAVE_BUILTIN_AVAILABLE", "1");
+            mod.addCMacro("HAVE_CLOCK_GETTIME_MONOTONIC", "1");
+            mod.addCMacro("HAVE_DLFCN_H", "1");
+            mod.addCMacro("HAVE_ERRNO_H", "1");
+            mod.addCMacro("HAVE_FCNTL", "1");
+            mod.addCMacro("HAVE_FCNTL_H", "1");
+            mod.addCMacro("HAVE_FCNTL_O_NONBLOCK", "1");
+            mod.addCMacro("HAVE_FREEADDRINFO", "1");
+            mod.addCMacro("HAVE_FSETXATTR", "1");
+            mod.addCMacro("HAVE_FSETXATTR_5", "1");
+            mod.addCMacro("HAVE_FTRUNCATE", "1");
+            mod.addCMacro("HAVE_GETADDRINFO", "1");
+            mod.addCMacro("HAVE_GETEUID", "1");
+            mod.addCMacro("HAVE_GETHOSTBYNAME", "1");
+            mod.addCMacro("HAVE_GETHOSTBYNAME_R_6", "1");
+            mod.addCMacro("HAVE_GETHOSTNAME", "1");
+            mod.addCMacro("HAVE_GETPEERNAME", "1");
+            mod.addCMacro("HAVE_GETPPID", "1");
+            mod.addCMacro("HAVE_GETPPID", "1");
+            mod.addCMacro("HAVE_GETPROTOBYNAME", "1");
+            mod.addCMacro("HAVE_GETPWUID", "1");
+            mod.addCMacro("HAVE_GETPWUID_R", "1");
+            mod.addCMacro("HAVE_GETRLIMIT", "1");
+            mod.addCMacro("HAVE_GETSOCKNAME", "1");
+            mod.addCMacro("HAVE_GETTIMEOFDAY", "1");
+            mod.addCMacro("HAVE_GMTIME_R", "1");
+            mod.addCMacro("HAVE_IDN2_H", "1");
+            mod.addCMacro("HAVE_IF_NAMETOINDEX", "1");
+            mod.addCMacro("HAVE_IFADDRS_H", "1");
+            mod.addCMacro("HAVE_INET_ADDR", "1");
+            mod.addCMacro("HAVE_INET_PTON", "1");
+            mod.addCMacro("HAVE_INTTYPES_H", "1");
+            mod.addCMacro("HAVE_IOCTL", "1");
+            mod.addCMacro("HAVE_IOCTL_FIONBIO", "1");
+            mod.addCMacro("HAVE_IOCTL_SIOCGIFADDR", "1");
+            mod.addCMacro("HAVE_LDAP_URL_PARSE", "1");
+            mod.addCMacro("HAVE_LIBGEN_H", "1");
+            mod.addCMacro("HAVE_LIBZ", "1");
+            mod.addCMacro("HAVE_LL", "1");
+            mod.addCMacro("HAVE_LOCALE_H", "1");
+            mod.addCMacro("HAVE_LOCALTIME_R", "1");
+            mod.addCMacro("HAVE_LONGLONG", "1");
+            mod.addCMacro("HAVE_MALLOC_H", "1");
+            mod.addCMacro("HAVE_MEMORY_H", "1");
+            mod.addCMacro("HAVE_NET_IF_H", "1");
+            mod.addCMacro("HAVE_NETDB_H", "1");
+            mod.addCMacro("HAVE_NETINET_IN_H", "1");
+            mod.addCMacro("HAVE_NETINET_TCP_H", "1");
+            mod.addCMacro("HAVE_PIPE", "1");
+            mod.addCMacro("HAVE_POLL", "1");
+            mod.addCMacro("HAVE_POLL_FINE", "1");
+            mod.addCMacro("HAVE_POLL_H", "1");
+            mod.addCMacro("HAVE_POSIX_STRERROR_R", "1");
+            mod.addCMacro("HAVE_PTHREAD_H", "1");
+            mod.addCMacro("HAVE_PWD_H", "1");
+            mod.addCMacro("HAVE_RECV", "1");
+            mod.addCMacro("HAVE_SA_FAMILY_T", "1");
+            mod.addCMacro("HAVE_SELECT", "1");
+            mod.addCMacro("HAVE_SEND", "1");
+            mod.addCMacro("HAVE_SETJMP_H", "1");
+            mod.addCMacro("HAVE_SETLOCALE", "1");
+            mod.addCMacro("HAVE_SETRLIMIT", "1");
+            mod.addCMacro("HAVE_SETSOCKOPT", "1");
+            mod.addCMacro("HAVE_SIGACTION", "1");
+            mod.addCMacro("HAVE_SIGINTERRUPT", "1");
+            mod.addCMacro("HAVE_SIGNAL", "1");
+            mod.addCMacro("HAVE_SIGNAL_H", "1");
+            mod.addCMacro("HAVE_SIGSETJMP", "1");
+            mod.addCMacro("HAVE_SOCKADDR_IN6_SIN6_SCOPE_ID", "1");
+            mod.addCMacro("HAVE_SOCKET", "1");
+            mod.addCMacro("HAVE_STDBOOL_H", "1");
+            mod.addCMacro("HAVE_STDINT_H", "1");
+            mod.addCMacro("HAVE_STDIO_H", "1");
+            mod.addCMacro("HAVE_STDLIB_H", "1");
+            mod.addCMacro("HAVE_STRCASECMP", "1");
+            mod.addCMacro("HAVE_STRDUP", "1");
+            mod.addCMacro("HAVE_STRERROR_R", "1");
+            mod.addCMacro("HAVE_STRING_H", "1");
+            mod.addCMacro("HAVE_STRINGS_H", "1");
+            mod.addCMacro("HAVE_STRSTR", "1");
+            mod.addCMacro("HAVE_STRTOK_R", "1");
+            mod.addCMacro("HAVE_STRTOLL", "1");
+            mod.addCMacro("HAVE_STRUCT_SOCKADDR_STORAGE", "1");
+            mod.addCMacro("HAVE_STRUCT_TIMEVAL", "1");
+            mod.addCMacro("HAVE_SYS_IOCTL_H", "1");
+            mod.addCMacro("HAVE_SYS_PARAM_H", "1");
+            mod.addCMacro("HAVE_SYS_POLL_H", "1");
+            mod.addCMacro("HAVE_SYS_RESOURCE_H", "1");
+            mod.addCMacro("HAVE_SYS_SELECT_H", "1");
+            mod.addCMacro("HAVE_SYS_SOCKET_H", "1");
+            mod.addCMacro("HAVE_SYS_STAT_H", "1");
+            mod.addCMacro("HAVE_SYS_TIME_H", "1");
+            mod.addCMacro("HAVE_SYS_TYPES_H", "1");
+            mod.addCMacro("HAVE_SYS_UIO_H", "1");
+            mod.addCMacro("HAVE_SYS_UN_H", "1");
+            mod.addCMacro("HAVE_TERMIO_H", "1");
+            mod.addCMacro("HAVE_TERMIOS_H", "1");
+            mod.addCMacro("HAVE_TIME_H", "1");
+            mod.addCMacro("HAVE_UNAME", "1");
+            mod.addCMacro("HAVE_UNISTD_H", "1");
+            mod.addCMacro("HAVE_UTIME", "1");
+            mod.addCMacro("HAVE_UTIME_H", "1");
+            mod.addCMacro("HAVE_UTIMES", "1");
+            mod.addCMacro("HAVE_VARIADIC_MACROS_C99", "1");
+            mod.addCMacro("HAVE_VARIADIC_MACROS_GCC", "1");
+            mod.addCMacro("HAVE_ZLIB_H", "1");
+            mod.addCMacro("RANDOM_FILE", "\"/dev/urandom\"");
+            mod.addCMacro("RECV_TYPE_ARG1", "int");
+            mod.addCMacro("RECV_TYPE_ARG2", "void *");
+            mod.addCMacro("RECV_TYPE_ARG3", "size_t");
+            mod.addCMacro("RECV_TYPE_ARG4", "int");
+            mod.addCMacro("RECV_TYPE_RETV", "ssize_t");
+            mod.addCMacro("SEND_QUAL_ARG2", "const");
+            mod.addCMacro("SEND_TYPE_ARG1", "int");
+            mod.addCMacro("SEND_TYPE_ARG2", "void *");
+            mod.addCMacro("SEND_TYPE_ARG3", "size_t");
+            mod.addCMacro("SEND_TYPE_ARG4", "int");
+            mod.addCMacro("SEND_TYPE_RETV", "ssize_t");
+            mod.addCMacro("SIZEOF_CURL_OFF_T", "8");
+            mod.addCMacro("SIZEOF_INT", "4");
+            mod.addCMacro("SIZEOF_LONG", "8");
+            mod.addCMacro("SIZEOF_OFF_T", "8");
+            mod.addCMacro("SIZEOF_SHORT", "2");
+            mod.addCMacro("SIZEOF_SIZE_T", "8");
+            mod.addCMacro("SIZEOF_TIME_T", "8");
+            mod.addCMacro("STDC_HEADERS", "1");
+            mod.addCMacro("TIME_WITH_SYS_TIME", "1");
+            mod.addCMacro("USE_NGHTTP2", "1");
+            mod.addCMacro("USE_OPENSSL", "1");
+            mod.addCMacro("OPENSSL_IS_BORINGSSL", "1");
+            mod.addCMacro("USE_THREADS_POSIX", "1");
+            mod.addCMacro("USE_UNIX_SOCKETS", "1");
+        }
+
+        try buildZlib(b, mod);
+        try buildBrotli(b, mod);
+        const boringssl_dep = b.dependency("boringssl-zig", .{
+            .target = target,
+            .optimize = mod.optimize.?,
+            .force_pic = true,
         });
 
-    mod.addObjectFile(b.path("vendor/mimalloc/out/libmimalloc.a"));
-    mod.addIncludePath(b.path("vendor/mimalloc/out/include"));
+        const ssl = boringssl_dep.artifact("ssl");
+        ssl.bundle_ubsan_rt = false;
+        const crypto = boringssl_dep.artifact("crypto");
+        crypto.bundle_ubsan_rt = false;
 
-    return mod;
+        mod.linkLibrary(ssl);
+        mod.linkLibrary(crypto);
+        try buildNghttp2(b, mod);
+        try buildCurl(b, mod);
+
+        switch (target.result.os.tag) {
+            .macos => {
+                // needed for proxying on mac
+                mod.addSystemFrameworkPath(.{ .cwd_relative = "/System/Library/Frameworks" });
+                mod.linkFramework("CoreFoundation", .{});
+                mod.linkFramework("SystemConfiguration", .{});
+            },
+            else => {},
+        }
+    }
 }
+
+fn buildZlib(b: *Build, m: *Build.Module) !void {
+    const zlib = b.addLibrary(.{
+        .name = "zlib",
+        .root_module = m,
+    });
+
+    const root = "vendor/zlib/";
+    zlib.installHeader(b.path(root ++ "zlib.h"), "zlib.h");
+    zlib.installHeader(b.path(root ++ "zconf.h"), "zconf.h");
+    zlib.addCSourceFiles(.{ .flags = &.{
+        "-DHAVE_SYS_TYPES_H",
+        "-DHAVE_STDINT_H",
+        "-DHAVE_STDDEF_H",
+    }, .files = &.{
+        root ++ "adler32.c",
+        root ++ "compress.c",
+        root ++ "crc32.c",
+        root ++ "deflate.c",
+        root ++ "gzclose.c",
+        root ++ "gzlib.c",
+        root ++ "gzread.c",
+        root ++ "gzwrite.c",
+        root ++ "inflate.c",
+        root ++ "infback.c",
+        root ++ "inftrees.c",
+        root ++ "inffast.c",
+        root ++ "trees.c",
+        root ++ "uncompr.c",
+        root ++ "zutil.c",
+    } });
+}
+
+fn buildBrotli(b: *Build, m: *Build.Module) !void {
+    const brotli = b.addLibrary(.{
+        .name = "brotli",
+        .root_module = m,
+    });
+
+    const root = "vendor/brotli/c/";
+    brotli.addIncludePath(b.path(root ++ "include"));
+    brotli.addCSourceFiles(.{ .flags = &.{}, .files = &.{
+        root ++ "common/constants.c",
+        root ++ "common/context.c",
+        root ++ "common/dictionary.c",
+        root ++ "common/platform.c",
+        root ++ "common/shared_dictionary.c",
+        root ++ "common/transform.c",
+        root ++ "dec/bit_reader.c",
+        root ++ "dec/decode.c",
+        root ++ "dec/huffman.c",
+        root ++ "dec/prefix.c",
+        root ++ "dec/state.c",
+        root ++ "dec/static_init.c",
+    } });
+}
+
+fn buildNghttp2(b: *Build, m: *Build.Module) !void {
+    const nghttp2 = b.addLibrary(.{
+        .name = "nghttp2",
+        .root_module = m,
+    });
+
+    const root = "vendor/nghttp2/";
+    nghttp2.addIncludePath(b.path(root ++ "lib"));
+    nghttp2.addIncludePath(b.path(root ++ "lib/includes"));
+    nghttp2.addCSourceFiles(.{ .flags = &.{
+        "-DNGHTTP2_STATICLIB",
+        "-DHAVE_NETINET_IN",
+        "-DHAVE_TIME_H",
+    }, .files = &.{
+        root ++ "lib/sfparse.c",
+        root ++ "lib/nghttp2_alpn.c",
+        root ++ "lib/nghttp2_buf.c",
+        root ++ "lib/nghttp2_callbacks.c",
+        root ++ "lib/nghttp2_debug.c",
+        root ++ "lib/nghttp2_extpri.c",
+        root ++ "lib/nghttp2_frame.c",
+        root ++ "lib/nghttp2_hd.c",
+        root ++ "lib/nghttp2_hd_huffman.c",
+        root ++ "lib/nghttp2_hd_huffman_data.c",
+        root ++ "lib/nghttp2_helper.c",
+        root ++ "lib/nghttp2_http.c",
+        root ++ "lib/nghttp2_map.c",
+        root ++ "lib/nghttp2_mem.c",
+        root ++ "lib/nghttp2_option.c",
+        root ++ "lib/nghttp2_outbound_item.c",
+        root ++ "lib/nghttp2_pq.c",
+        root ++ "lib/nghttp2_priority_spec.c",
+        root ++ "lib/nghttp2_queue.c",
+        root ++ "lib/nghttp2_rcbuf.c",
+        root ++ "lib/nghttp2_session.c",
+        root ++ "lib/nghttp2_stream.c",
+        root ++ "lib/nghttp2_submit.c",
+        root ++ "lib/nghttp2_version.c",
+        root ++ "lib/nghttp2_ratelim.c",
+        root ++ "lib/nghttp2_time.c",
+    } });
+}
+
+fn buildCurl(b: *Build, m: *Build.Module) !void {
+    const curl = b.addLibrary(.{
+        .name = "curl",
+        .root_module = m,
+    });
+
+    const root = "vendor/curl/";
+
+    curl.addIncludePath(b.path(root ++ "lib"));
+    curl.addIncludePath(b.path(root ++ "include"));
+    curl.addIncludePath(b.path("vendor/zlib"));
+
+    curl.addCSourceFiles(.{
+        .flags = &.{},
+        .files = &.{
+            root ++ "lib/altsvc.c",
+            root ++ "lib/amigaos.c",
+            root ++ "lib/asyn-ares.c",
+            root ++ "lib/asyn-base.c",
+            root ++ "lib/asyn-thrdd.c",
+            root ++ "lib/bufq.c",
+            root ++ "lib/bufref.c",
+            root ++ "lib/cf-h1-proxy.c",
+            root ++ "lib/cf-h2-proxy.c",
+            root ++ "lib/cf-haproxy.c",
+            root ++ "lib/cf-https-connect.c",
+            root ++ "lib/cf-socket.c",
+            root ++ "lib/cfilters.c",
+            root ++ "lib/conncache.c",
+            root ++ "lib/connect.c",
+            root ++ "lib/content_encoding.c",
+            root ++ "lib/cookie.c",
+            root ++ "lib/cshutdn.c",
+            root ++ "lib/curl_addrinfo.c",
+            root ++ "lib/curl_des.c",
+            root ++ "lib/curl_endian.c",
+            root ++ "lib/curl_fnmatch.c",
+            root ++ "lib/curl_get_line.c",
+            root ++ "lib/curl_gethostname.c",
+            root ++ "lib/curl_gssapi.c",
+            root ++ "lib/curl_memrchr.c",
+            root ++ "lib/curl_ntlm_core.c",
+            root ++ "lib/curl_range.c",
+            root ++ "lib/curl_rtmp.c",
+            root ++ "lib/curl_sasl.c",
+            root ++ "lib/curl_sha512_256.c",
+            root ++ "lib/curl_sspi.c",
+            root ++ "lib/curl_threads.c",
+            root ++ "lib/curl_trc.c",
+            root ++ "lib/cw-out.c",
+            root ++ "lib/cw-pause.c",
+            root ++ "lib/dict.c",
+            root ++ "lib/doh.c",
+            root ++ "lib/dynhds.c",
+            root ++ "lib/easy.c",
+            root ++ "lib/easygetopt.c",
+            root ++ "lib/easyoptions.c",
+            root ++ "lib/escape.c",
+            root ++ "lib/fake_addrinfo.c",
+            root ++ "lib/file.c",
+            root ++ "lib/fileinfo.c",
+            root ++ "lib/fopen.c",
+            root ++ "lib/formdata.c",
+            root ++ "lib/ftp.c",
+            root ++ "lib/ftplistparser.c",
+            root ++ "lib/getenv.c",
+            root ++ "lib/getinfo.c",
+            root ++ "lib/gopher.c",
+            root ++ "lib/hash.c",
+            root ++ "lib/headers.c",
+            root ++ "lib/hmac.c",
+            root ++ "lib/hostip.c",
+            root ++ "lib/hostip4.c",
+            root ++ "lib/hostip6.c",
+            root ++ "lib/hsts.c",
+            root ++ "lib/http.c",
+            root ++ "lib/http1.c",
+            root ++ "lib/http2.c",
+            root ++ "lib/http_aws_sigv4.c",
+            root ++ "lib/http_chunks.c",
+            root ++ "lib/http_digest.c",
+            root ++ "lib/http_negotiate.c",
+            root ++ "lib/http_ntlm.c",
+            root ++ "lib/http_proxy.c",
+            root ++ "lib/httpsrr.c",
+            root ++ "lib/idn.c",
+            root ++ "lib/if2ip.c",
+            root ++ "lib/imap.c",
+            root ++ "lib/krb5.c",
+            root ++ "lib/ldap.c",
+            root ++ "lib/llist.c",
+            root ++ "lib/macos.c",
+            root ++ "lib/md4.c",
+            root ++ "lib/md5.c",
+            root ++ "lib/memdebug.c",
+            root ++ "lib/mime.c",
+            root ++ "lib/mprintf.c",
+            root ++ "lib/mqtt.c",
+            root ++ "lib/multi.c",
+            root ++ "lib/multi_ev.c",
+            root ++ "lib/netrc.c",
+            root ++ "lib/noproxy.c",
+            root ++ "lib/openldap.c",
+            root ++ "lib/parsedate.c",
+            root ++ "lib/pingpong.c",
+            root ++ "lib/pop3.c",
+            root ++ "lib/progress.c",
+            root ++ "lib/psl.c",
+            root ++ "lib/rand.c",
+            root ++ "lib/rename.c",
+            root ++ "lib/request.c",
+            root ++ "lib/rtsp.c",
+            root ++ "lib/select.c",
+            root ++ "lib/sendf.c",
+            root ++ "lib/setopt.c",
+            root ++ "lib/sha256.c",
+            root ++ "lib/share.c",
+            root ++ "lib/slist.c",
+            root ++ "lib/smb.c",
+            root ++ "lib/smtp.c",
+            root ++ "lib/socketpair.c",
+            root ++ "lib/socks.c",
+            root ++ "lib/socks_gssapi.c",
+            root ++ "lib/socks_sspi.c",
+            root ++ "lib/speedcheck.c",
+            root ++ "lib/splay.c",
+            root ++ "lib/strcase.c",
+            root ++ "lib/strdup.c",
+            root ++ "lib/strequal.c",
+            root ++ "lib/strerror.c",
+            root ++ "lib/system_win32.c",
+            root ++ "lib/telnet.c",
+            root ++ "lib/tftp.c",
+            root ++ "lib/transfer.c",
+            root ++ "lib/uint-bset.c",
+            root ++ "lib/uint-hash.c",
+            root ++ "lib/uint-spbset.c",
+            root ++ "lib/uint-table.c",
+            root ++ "lib/url.c",
+            root ++ "lib/urlapi.c",
+            root ++ "lib/version.c",
+            root ++ "lib/ws.c",
+            root ++ "lib/curlx/base64.c",
+            root ++ "lib/curlx/dynbuf.c",
+            root ++ "lib/curlx/inet_ntop.c",
+            root ++ "lib/curlx/nonblock.c",
+            root ++ "lib/curlx/strparse.c",
+            root ++ "lib/curlx/timediff.c",
+            root ++ "lib/curlx/timeval.c",
+            root ++ "lib/curlx/wait.c",
+            root ++ "lib/curlx/warnless.c",
+            root ++ "lib/vquic/curl_ngtcp2.c",
+            root ++ "lib/vquic/curl_osslq.c",
+            root ++ "lib/vquic/curl_quiche.c",
+            root ++ "lib/vquic/vquic.c",
+            root ++ "lib/vquic/vquic-tls.c",
+            root ++ "lib/vauth/cleartext.c",
+            root ++ "lib/vauth/cram.c",
+            root ++ "lib/vauth/digest.c",
+            root ++ "lib/vauth/digest_sspi.c",
+            root ++ "lib/vauth/gsasl.c",
+            root ++ "lib/vauth/krb5_gssapi.c",
+            root ++ "lib/vauth/krb5_sspi.c",
+            root ++ "lib/vauth/ntlm.c",
+            root ++ "lib/vauth/ntlm_sspi.c",
+            root ++ "lib/vauth/oauth2.c",
+            root ++ "lib/vauth/spnego_gssapi.c",
+            root ++ "lib/vauth/spnego_sspi.c",
+            root ++ "lib/vauth/vauth.c",
+            root ++ "lib/vtls/cipher_suite.c",
+            root ++ "lib/vtls/openssl.c",
+            root ++ "lib/vtls/hostcheck.c",
+            root ++ "lib/vtls/keylog.c",
+            root ++ "lib/vtls/vtls.c",
+            root ++ "lib/vtls/vtls_scache.c",
+            root ++ "lib/vtls/x509asn1.c",
+        },
+    });
+}
+
+const Manifest = struct {
+    version: []const u8,
+    minimum_zig_version: []const u8,
+
+    fn init(b: *std.Build) Manifest {
+        const input = @embedFile("build.zig.zon");
+
+        var diagnostics: std.zon.parse.Diagnostics = .{};
+        defer diagnostics.deinit(b.allocator);
+
+        return std.zon.parse.fromSlice(Manifest, b.allocator, input, &diagnostics, .{
+            .free_on_error = true,
+            .ignore_unknown_fields = true,
+        }) catch |err| {
+            switch (err) {
+                error.OutOfMemory => @panic("OOM"),
+                error.ParseZon => {
+                    std.debug.print("Parse diagnostics:\n{f}\n", .{diagnostics});
+                    std.process.exit(1);
+                },
+            }
+        };
+    }
+};

build.zig.zon

@@ -0,0 +1,18 @@
+.{
+    .name = .browser,
+    .paths = .{""},
+    .version = "0.0.0",
+    .fingerprint = 0xda130f3af836cea0, // Changing this has security and trust implications.
+    .minimum_zig_version = "0.15.2",
+    .dependencies = .{
+        .v8 = .{
+            .url = "https://github.com/lightpanda-io/zig-v8-fork/archive/v0.2.6.tar.gz",
+            .hash = "v8-0.0.0-xddH60NRBAAWmpZq9nWdfFAEqVJ9zqJnvr1Nl9m2AbcY",
+        },
+        //.v8 = .{ .path = "../zig-v8-fork" },
+        .@"boringssl-zig" = .{
+            .url = "git+https://github.com/Syndica/boringssl-zig.git#c53df00d06b02b755ad88bbf4d1202ed9687b096",
+            .hash = "boringssl-0.1.0-VtJeWehMAAA4RNnwRnzEvKcS9rjsR1QVRw1uJrwXxmVK",
+        },
+    },
+}

flake.lock

@@ -0,0 +1,219 @@
+{
+  "nodes": {
+    "fenix": {
+      "inputs": {
+        "nixpkgs": [
+          "nixpkgs"
+        ],
+        "rust-analyzer-src": "rust-analyzer-src"
+      },
+      "locked": {
+        "lastModified": 1763016383,
+        "narHash": "sha256-eYmo7FNvm3q08iROzwIi8i9dWuUbJJl3uLR3OLnSmdI=",
+        "owner": "nix-community",
+        "repo": "fenix",
+        "rev": "0fad5c0e5c531358e7174cd666af4608f08bc3ba",
+        "type": "github"
+      },
+      "original": {
+        "owner": "nix-community",
+        "repo": "fenix",
+        "type": "github"
+      }
+    },
+    "flake-compat": {
+      "flake": false,
+      "locked": {
+        "lastModified": 1696426674,
+        "narHash": "sha256-kvjfFW7WAETZlt09AgDn1MrtKzP7t90Vf7vypd3OL1U=",
+        "owner": "edolstra",
+        "repo": "flake-compat",
+        "rev": "0f9255e01c2351cc7d116c072cb317785dd33b33",
+        "type": "github"
+      },
+      "original": {
+        "owner": "edolstra",
+        "repo": "flake-compat",
+        "type": "github"
+      }
+    },
+    "flake-utils": {
+      "inputs": {
+        "systems": "systems"
+      },
+      "locked": {
+        "lastModified": 1731533236,
+        "narHash": "sha256-l0KFg5HjrsfsO/JpG+r7fRrqm12kzFHyUHqHCVpMMbI=",
+        "owner": "numtide",
+        "repo": "flake-utils",
+        "rev": "11707dc2f618dd54ca8739b309ec4fc024de578b",
+        "type": "github"
+      },
+      "original": {
+        "owner": "numtide",
+        "repo": "flake-utils",
+        "type": "github"
+      }
+    },
+    "flake-utils_2": {
+      "inputs": {
+        "systems": "systems_2"
+      },
+      "locked": {
+        "lastModified": 1705309234,
+        "narHash": "sha256-uNRRNRKmJyCRC/8y1RqBkqWBLM034y4qN7EprSdmgyA=",
+        "owner": "numtide",
+        "repo": "flake-utils",
+        "rev": "1ef2e671c3b0c19053962c07dbda38332dcebf26",
+        "type": "github"
+      },
+      "original": {
+        "owner": "numtide",
+        "repo": "flake-utils",
+        "type": "github"
+      }
+    },
+    "gitignore": {
+      "inputs": {
+        "nixpkgs": [
+          "zlsPkg",
+          "nixpkgs"
+        ]
+      },
+      "locked": {
+        "lastModified": 1709087332,
+        "narHash": "sha256-HG2cCnktfHsKV0s4XW83gU3F57gaTljL9KNSuG6bnQs=",
+        "owner": "hercules-ci",
+        "repo": "gitignore.nix",
+        "rev": "637db329424fd7e46cf4185293b9cc8c88c95394",
+        "type": "github"
+      },
+      "original": {
+        "owner": "hercules-ci",
+        "repo": "gitignore.nix",
+        "type": "github"
+      }
+    },
+    "nixpkgs": {
+      "locked": {
+        "lastModified": 1763043403,
+        "narHash": "sha256-DgCTbHdIpzbXSlQlOZEWj8oPt2lrRMlSk03oIstvkVQ=",
+        "owner": "nixos",
+        "repo": "nixpkgs",
+        "rev": "75e04ecd084f93d4105ce68c07dac7656291fe2e",
+        "type": "github"
+      },
+      "original": {
+        "owner": "nixos",
+        "ref": "release-25.05",
+        "repo": "nixpkgs",
+        "type": "github"
+      }
+    },
+    "root": {
+      "inputs": {
+        "fenix": "fenix",
+        "flake-utils": "flake-utils",
+        "nixpkgs": "nixpkgs",
+        "zigPkgs": "zigPkgs",
+        "zlsPkg": "zlsPkg"
+      }
+    },
+    "rust-analyzer-src": {
+      "flake": false,
+      "locked": {
+        "lastModified": 1762860488,
+        "narHash": "sha256-rMfWMCOo/pPefM2We0iMBLi2kLBAnYoB9thi4qS7uk4=",
+        "owner": "rust-lang",
+        "repo": "rust-analyzer",
+        "rev": "2efc80078029894eec0699f62ec8d5c1a56af763",
+        "type": "github"
+      },
+      "original": {
+        "owner": "rust-lang",
+        "ref": "nightly",
+        "repo": "rust-analyzer",
+        "type": "github"
+      }
+    },
+    "systems": {
+      "locked": {
+        "lastModified": 1681028828,
+        "narHash": "sha256-Vy1rq5AaRuLzOxct8nz4T6wlgyUR7zLU309k9mBC768=",
+        "owner": "nix-systems",
+        "repo": "default",
+        "rev": "da67096a3b9bf56a91d16901293e51ba5b49a27e",
+        "type": "github"
+      },
+      "original": {
+        "owner": "nix-systems",
+        "repo": "default",
+        "type": "github"
+      }
+    },
+    "systems_2": {
+      "locked": {
+        "lastModified": 1681028828,
+        "narHash": "sha256-Vy1rq5AaRuLzOxct8nz4T6wlgyUR7zLU309k9mBC768=",
+        "owner": "nix-systems",
+        "repo": "default",
+        "rev": "da67096a3b9bf56a91d16901293e51ba5b49a27e",
+        "type": "github"
+      },
+      "original": {
+        "owner": "nix-systems",
+        "repo": "default",
+        "type": "github"
+      }
+    },
+    "zigPkgs": {
+      "inputs": {
+        "flake-compat": "flake-compat",
+        "flake-utils": "flake-utils_2",
+        "nixpkgs": [
+          "nixpkgs"
+        ]
+      },
+      "locked": {
+        "lastModified": 1762907712,
+        "narHash": "sha256-VNW/+VYIg6N4b9Iq+F0YZmm22n74IdFS7hsPLblWuOY=",
+        "owner": "mitchellh",
+        "repo": "zig-overlay",
+        "rev": "d16453ee78765e49527c56d23386cead799b6b53",
+        "type": "github"
+      },
+      "original": {
+        "owner": "mitchellh",
+        "repo": "zig-overlay",
+        "type": "github"
+      }
+    },
+    "zlsPkg": {
+      "inputs": {
+        "gitignore": "gitignore",
+        "nixpkgs": [
+          "nixpkgs"
+        ],
+        "zig-overlay": [
+          "zigPkgs"
+        ]
+      },
+      "locked": {
+        "lastModified": 1756048867,
+        "narHash": "sha256-GFzSHUljcxy7sM1PaabbkQUdUnLwpherekPWJFxXtnk=",
+        "owner": "zigtools",
+        "repo": "zls",
+        "rev": "ce6c8f02c78e622421cfc2405c67c5222819ec03",
+        "type": "github"
+      },
+      "original": {
+        "owner": "zigtools",
+        "ref": "0.15.0",
+        "repo": "zls",
+        "type": "github"
+      }
+    }
+  },
+  "root": "root",
+  "version": 7
+}

flake.nix

@@ -0,0 +1,85 @@
+{
+  description = "headless browser designed for AI and automation";
+
+  inputs = {
+    nixpkgs.url = "github:nixos/nixpkgs/release-25.05";
+
+    zigPkgs.url = "github:mitchellh/zig-overlay";
+    zigPkgs.inputs.nixpkgs.follows = "nixpkgs";
+
+    zlsPkg.url = "github:zigtools/zls/0.15.0";
+    zlsPkg.inputs.zig-overlay.follows = "zigPkgs";
+    zlsPkg.inputs.nixpkgs.follows = "nixpkgs";
+
+    fenix = {
+      url = "github:nix-community/fenix";
+      inputs.nixpkgs.follows = "nixpkgs";
+    };
+
+    flake-utils.url = "github:numtide/flake-utils";
+  };
+
+  outputs =
+    {
+      nixpkgs,
+      zigPkgs,
+      zlsPkg,
+      fenix,
+      flake-utils,
+      ...
+    }:
+    flake-utils.lib.eachDefaultSystem (
+      system:
+      let
+        overlays = [
+          (final: prev: {
+            zigpkgs = zigPkgs.packages.${prev.system};
+            zls = zlsPkg.packages.${prev.system}.default;
+          })
+        ];
+
+        pkgs = import nixpkgs {
+          inherit system overlays;
+        };
+
+        rustToolchain = fenix.packages.${system}.stable.toolchain;
+
+        # We need crtbeginS.o for building.
+        crtFiles = pkgs.runCommand "crt-files" { } ''
+          mkdir -p $out/lib
+          cp -r ${pkgs.gcc.cc}/lib/gcc $out/lib/gcc
+        '';
+
+        # This build pipeline is very unhappy without an FHS-compliant env.
+        fhs = pkgs.buildFHSEnv {
+          name = "fhs-shell";
+          multiArch = true;
+          targetPkgs =
+            pkgs: with pkgs; [
+              # Build Tools
+              zigpkgs."0.15.2"
+              zls
+              rustToolchain
+              python3
+              pkg-config
+              cmake
+              gperf
+
+              # GCC
+              gcc
+              gcc.cc.lib
+              crtFiles
+
+              # Libaries
+              expat.dev
+              glib.dev
+              glibc.dev
+              zlib
+            ];
+        };
+      in
+      {
+        devShells.default = fhs.env;
+      }
+    );
+}

src/App.zig

@@ -0,0 +1,145 @@
+// 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 Allocator = std.mem.Allocator;
+
+const log = @import("log.zig");
+const Snapshot = @import("browser/js/Snapshot.zig");
+const Platform = @import("browser/js/Platform.zig");
+const Telemetry = @import("telemetry/telemetry.zig").Telemetry;
+
+pub const Http = @import("http/Http.zig");
+pub const ArenaPool = @import("ArenaPool.zig");
+pub const Notification = @import("Notification.zig");
+
+// Container for global state / objects that various parts of the system
+// might need.
+const App = @This();
+
+http: Http,
+config: Config,
+platform: Platform,
+snapshot: Snapshot,
+telemetry: Telemetry,
+allocator: Allocator,
+arena_pool: ArenaPool,
+app_dir_path: ?[]const u8,
+notification: *Notification,
+shutdown: bool = false,
+
+pub const RunMode = enum {
+    help,
+    fetch,
+    serve,
+    version,
+};
+
+pub const Config = struct {
+    run_mode: RunMode,
+    tls_verify_host: bool = true,
+    http_proxy: ?[:0]const u8 = null,
+    proxy_bearer_token: ?[:0]const u8 = null,
+    http_timeout_ms: ?u31 = null,
+    http_connect_timeout_ms: ?u31 = null,
+    http_max_host_open: ?u8 = null,
+    http_max_concurrent: ?u8 = null,
+    user_agent: [:0]const u8,
+};
+
+pub fn init(allocator: Allocator, config: Config) !*App {
+    const app = try allocator.create(App);
+    errdefer allocator.destroy(app);
+
+    app.config = config;
+    app.allocator = allocator;
+
+    app.notification = try Notification.init(allocator, null);
+    errdefer app.notification.deinit();
+
+    app.http = try Http.init(allocator, .{
+        .max_host_open = config.http_max_host_open orelse 4,
+        .max_concurrent = config.http_max_concurrent orelse 10,
+        .timeout_ms = config.http_timeout_ms orelse 5000,
+        .connect_timeout_ms = config.http_connect_timeout_ms orelse 0,
+        .http_proxy = config.http_proxy,
+        .tls_verify_host = config.tls_verify_host,
+        .proxy_bearer_token = config.proxy_bearer_token,
+        .user_agent = config.user_agent,
+    });
+    errdefer app.http.deinit();
+
+    app.platform = try Platform.init();
+    errdefer app.platform.deinit();
+
+    app.snapshot = try Snapshot.load();
+    errdefer app.snapshot.deinit();
+
+    app.app_dir_path = getAndMakeAppDir(allocator);
+
+    app.telemetry = try Telemetry.init(app, config.run_mode);
+    errdefer app.telemetry.deinit();
+
+    try app.telemetry.register(app.notification);
+
+    app.arena_pool = ArenaPool.init(allocator);
+    errdefer app.arena_pool.deinit();
+
+    return app;
+}
+
+pub fn deinit(self: *App) void {
+    if (@atomicRmw(bool, &self.shutdown, .Xchg, true, .monotonic)) {
+        return;
+    }
+
+    const allocator = self.allocator;
+    if (self.app_dir_path) |app_dir_path| {
+        allocator.free(app_dir_path);
+        self.app_dir_path = null;
+    }
+    self.telemetry.deinit();
+    self.notification.deinit();
+    self.http.deinit();
+    self.snapshot.deinit();
+    self.platform.deinit();
+    self.arena_pool.deinit();
+
+    allocator.destroy(self);
+}
+
+fn getAndMakeAppDir(allocator: Allocator) ?[]const u8 {
+    if (@import("builtin").is_test) {
+        return allocator.dupe(u8, "/tmp") catch unreachable;
+    }
+    const app_dir_path = std.fs.getAppDataDir(allocator, "lightpanda") catch |err| {
+        log.warn(.app, "get data dir", .{ .err = err });
+        return null;
+    };
+
+    std.fs.cwd().makePath(app_dir_path) catch |err| switch (err) {
+        error.PathAlreadyExists => return app_dir_path,
+        else => {
+            allocator.free(app_dir_path);
+            log.warn(.app, "create data dir", .{ .err = err, .path = app_dir_path });
+            return null;
+        },
+    };
+    return app_dir_path;
+}

src/ArenaPool.zig

@@ -0,0 +1,84 @@
+// Copyright (C) 2023-2026  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 Allocator = std.mem.Allocator;
+const ArenaAllocator = std.heap.ArenaAllocator;
+
+const ArenaPool = @This();
+
+allocator: Allocator,
+retain_bytes: usize,
+free_list_len: u16 = 0,
+free_list: ?*Entry = null,
+free_list_max: u16,
+entry_pool: std.heap.MemoryPool(Entry),
+
+const Entry = struct {
+    next: ?*Entry,
+    arena: ArenaAllocator,
+};
+
+pub fn init(allocator: Allocator) ArenaPool {
+    return .{
+        .allocator = allocator,
+        .free_list_max = 512, //  TODO make configurable
+        .retain_bytes = 1024 * 16, // TODO make configurable
+        .entry_pool = std.heap.MemoryPool(Entry).init(allocator),
+    };
+}
+
+pub fn deinit(self: *ArenaPool) void {
+    var entry = self.free_list;
+    while (entry) |e| {
+        entry = e.next;
+        e.arena.deinit();
+    }
+    self.entry_pool.deinit();
+}
+
+pub fn acquire(self: *ArenaPool) !Allocator {
+    if (self.free_list) |entry| {
+        self.free_list = entry.next;
+        return entry.arena.allocator();
+    }
+
+    const entry = try self.entry_pool.create();
+    entry.* = .{
+        .next = null,
+        .arena = ArenaAllocator.init(self.allocator),
+    };
+
+    return entry.arena.allocator();
+}
+
+pub fn release(self: *ArenaPool, allocator: Allocator) void {
+    const arena: *std.heap.ArenaAllocator = @ptrCast(@alignCast(allocator.ptr));
+    const entry: *Entry = @fieldParentPtr("arena", arena);
+
+    if (self.free_list_len == self.free_list_max) {
+        arena.deinit();
+        self.entry_pool.destroy(entry);
+        return;
+    }
+
+    _ = arena.reset(.{ .retain_with_limit = self.retain_bytes });
+    entry.next = self.free_list;
+    self.free_list = entry;
+}

src/Notification.zig

@@ -0,0 +1,413 @@
+// 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 lp = @import("lightpanda");
+
+const log = @import("log.zig");
+const Page = @import("browser/Page.zig");
+const Transfer = @import("http/Client.zig").Transfer;
+
+const Allocator = std.mem.Allocator;
+
+const List = std.DoublyLinkedList;
+
+// Allows code to register for and emit events.
+// Keeps two lists
+// 1 - for a given event type, a linked list of all the listeners
+// 2 - for a given listener, a list of all it's registration
+// The 2nd one is so that a listener can unregister all of it's listeners
+// (there's currently no need for a listener to unregister only 1 or more
+// specific listener).
+//
+// Scoping is important. Imagine we created a global singleton registry, and our
+// CDP code registers for the "network_bytes_sent" event, because it needs to
+// send messages to the client when this happens. Our HTTP client could then
+// emit a "network_bytes_sent" message. It would be easy, and it would work.
+// That is, it would work until the Telemetry code makes an HTTP request, and
+// because everything's just one big global, that gets picked up by the
+// registered CDP listener, and the telemetry network activity gets sent to the
+// CDP client.
+//
+// To avoid this, one way or another, we need scoping. We could still have
+// a global registry but every "register" and every "emit" has some type of
+// "scope". This would have a run-time cost and still require some coordination
+// between components to share a common scope.
+//
+// Instead, the approach that we take is to have a notification instance per
+// scope. This makes some things harder, but we only plan on having 2
+// notification instances  at a given time: one in a Browser and one in the App.
+// What about something like Telemetry, which lives outside of a Browser but
+// still cares about Browser-events (like .page_navigate)? When the Browser
+// notification is created, a `notification_created` event is raised in the
+// App's notification, which Telemetry is registered for. This allows Telemetry
+// to register for events in the Browser notification. See the Telemetry's
+// register function.
+const Notification = @This();
+// Every event type (which are hard-coded), has a list of Listeners.
+// When the event happens, we dispatch to those listener.
+event_listeners: EventListeners,
+
+// list of listeners for a specified receiver
+// @intFromPtr(receiver) -> [listener1, listener2, ...]
+// Used when `unregisterAll` is called.
+listeners: std.AutoHashMapUnmanaged(usize, std.ArrayListUnmanaged(*Listener)),
+
+allocator: Allocator,
+mem_pool: std.heap.MemoryPool(Listener),
+
+const EventListeners = struct {
+    page_remove: List = .{},
+    page_created: List = .{},
+    page_navigate: List = .{},
+    page_navigated: List = .{},
+    page_network_idle: List = .{},
+    page_network_almost_idle: List = .{},
+    http_request_fail: List = .{},
+    http_request_start: List = .{},
+    http_request_intercept: List = .{},
+    http_request_done: List = .{},
+    http_request_auth_required: List = .{},
+    http_response_data: List = .{},
+    http_response_header_done: List = .{},
+    notification_created: List = .{},
+};
+
+const Events = union(enum) {
+    page_remove: PageRemove,
+    page_created: *Page,
+    page_navigate: *const PageNavigate,
+    page_navigated: *const PageNavigated,
+    page_network_idle: *const PageNetworkIdle,
+    page_network_almost_idle: *const PageNetworkAlmostIdle,
+    http_request_fail: *const RequestFail,
+    http_request_start: *const RequestStart,
+    http_request_intercept: *const RequestIntercept,
+    http_request_auth_required: *const RequestAuthRequired,
+    http_request_done: *const RequestDone,
+    http_response_data: *const ResponseData,
+    http_response_header_done: *const ResponseHeaderDone,
+    notification_created: *Notification,
+};
+const EventType = std.meta.FieldEnum(Events);
+
+pub const PageRemove = struct {};
+
+pub const PageNavigate = struct {
+    req_id: usize,
+    timestamp: u64,
+    url: [:0]const u8,
+    opts: Page.NavigateOpts,
+};
+
+pub const PageNavigated = struct {
+    req_id: usize,
+    timestamp: u64,
+    url: [:0]const u8,
+    opts: Page.NavigatedOpts,
+};
+
+pub const PageNetworkIdle = struct {
+    timestamp: u64,
+};
+
+pub const PageNetworkAlmostIdle = struct {
+    timestamp: u64,
+};
+
+pub const RequestStart = struct {
+    transfer: *Transfer,
+};
+
+pub const RequestIntercept = struct {
+    transfer: *Transfer,
+    wait_for_interception: *bool,
+};
+
+pub const RequestAuthRequired = struct {
+    transfer: *Transfer,
+    wait_for_interception: *bool,
+};
+
+pub const ResponseData = struct {
+    data: []const u8,
+    transfer: *Transfer,
+};
+
+pub const ResponseHeaderDone = struct {
+    transfer: *Transfer,
+};
+
+pub const RequestDone = struct {
+    transfer: *Transfer,
+};
+
+pub const RequestFail = struct {
+    transfer: *Transfer,
+    err: anyerror,
+};
+
+pub fn init(allocator: Allocator, parent: ?*Notification) !*Notification {
+
+    // This is put on the heap because we want to raise a .notification_created
+    // event, so that, something like Telemetry, can receive the
+    // .page_navigate event on all notification instances. That can only work
+    // if we dispatch .notification_created with a *Notification.
+    const notification = try allocator.create(Notification);
+    errdefer allocator.destroy(notification);
+
+    notification.* = .{
+        .listeners = .{},
+        .event_listeners = .{},
+        .allocator = allocator,
+        .mem_pool = std.heap.MemoryPool(Listener).init(allocator),
+    };
+
+    if (parent) |pn| {
+        pn.dispatch(.notification_created, notification);
+    }
+
+    return notification;
+}
+
+pub fn deinit(self: *Notification) void {
+    const allocator = self.allocator;
+
+    var it = self.listeners.valueIterator();
+    while (it.next()) |listener| {
+        listener.deinit(allocator);
+    }
+    self.listeners.deinit(allocator);
+    self.mem_pool.deinit();
+    allocator.destroy(self);
+}
+
+pub fn register(self: *Notification, comptime event: EventType, receiver: anytype, func: EventFunc(event)) !void {
+    var list = &@field(self.event_listeners, @tagName(event));
+
+    var listener = try self.mem_pool.create();
+    errdefer self.mem_pool.destroy(listener);
+
+    listener.* = .{
+        .node = .{},
+        .list = list,
+        .receiver = receiver,
+        .event = event,
+        .func = @ptrCast(func),
+        .struct_name = @typeName(@typeInfo(@TypeOf(receiver)).pointer.child),
+    };
+
+    const allocator = self.allocator;
+    const gop = try self.listeners.getOrPut(allocator, @intFromPtr(receiver));
+    if (gop.found_existing == false) {
+        gop.value_ptr.* = .{};
+    }
+    try gop.value_ptr.append(allocator, listener);
+
+    // we don't add this until we've successfully added the entry to
+    // self.listeners
+    list.append(&listener.node);
+}
+
+pub fn unregister(self: *Notification, comptime event: EventType, receiver: anytype) void {
+    var listeners = self.listeners.getPtr(@intFromPtr(receiver)) orelse return;
+
+    var i: usize = 0;
+    while (i < listeners.items.len) {
+        const listener = listeners.items[i];
+        if (listener.event != event) {
+            i += 1;
+            continue;
+        }
+        listener.list.remove(&listener.node);
+        self.mem_pool.destroy(listener);
+        _ = listeners.swapRemove(i);
+    }
+
+    if (listeners.items.len == 0) {
+        listeners.deinit(self.allocator);
+        const removed = self.listeners.remove(@intFromPtr(receiver));
+        lp.assert(removed == true, "Notification.unregister", .{ .type = event });
+    }
+}
+
+pub fn unregisterAll(self: *Notification, receiver: *anyopaque) void {
+    var kv = self.listeners.fetchRemove(@intFromPtr(receiver)) orelse return;
+    for (kv.value.items) |listener| {
+        listener.list.remove(&listener.node);
+        self.mem_pool.destroy(listener);
+    }
+    kv.value.deinit(self.allocator);
+}
+
+pub fn dispatch(self: *Notification, comptime event: EventType, data: ArgType(event)) void {
+    const list = &@field(self.event_listeners, @tagName(event));
+
+    var node = list.first;
+    while (node) |n| {
+        const listener: *Listener = @fieldParentPtr("node", n);
+        const func: EventFunc(event) = @ptrCast(@alignCast(listener.func));
+        func(listener.receiver, data) catch |err| {
+            log.err(.app, "dispatch error", .{
+                .err = err,
+                .event = event,
+                .source = "notification",
+                .listener = listener.struct_name,
+            });
+        };
+        node = n.next;
+    }
+}
+
+// Given an event type enum, returns the type of arg the event emits
+fn ArgType(comptime event: Notification.EventType) type {
+    inline for (std.meta.fields(Notification.Events)) |f| {
+        if (std.mem.eql(u8, f.name, @tagName(event))) {
+            return f.type;
+        }
+    }
+    unreachable;
+}
+
+// Given an event type enum, returns the listening function type
+fn EventFunc(comptime event: Notification.EventType) type {
+    return *const fn (*anyopaque, ArgType(event)) anyerror!void;
+}
+
+// A listener. This is 1 receiver, with its function, and the linked list
+// node that goes in the appropriate EventListeners list.
+const Listener = struct {
+    // the receiver of the event, i.e. the self parameter to `func`
+    receiver: *anyopaque,
+
+    // the function to call
+    func: *const anyopaque,
+
+    // For logging slightly better error
+    struct_name: []const u8,
+
+    event: Notification.EventType,
+
+    // intrusive linked list node
+    node: List.Node,
+
+    // The event list this listener belongs to.
+    // We need this in order to be able to remove the node from the list
+    list: *List,
+};
+
+const testing = std.testing;
+test "Notification" {
+    var notifier = try Notification.init(testing.allocator, null);
+    defer notifier.deinit();
+
+    // noop
+    notifier.dispatch(.page_navigate, &.{
+        .req_id = 1,
+        .timestamp = 4,
+        .url = undefined,
+        .opts = .{},
+    });
+
+    var tc = TestClient{};
+
+    try notifier.register(.page_navigate, &tc, TestClient.pageNavigate);
+    notifier.dispatch(.page_navigate, &.{
+        .req_id = 1,
+        .timestamp = 4,
+        .url = undefined,
+        .opts = .{},
+    });
+    try testing.expectEqual(4, tc.page_navigate);
+
+    notifier.unregisterAll(&tc);
+    notifier.dispatch(.page_navigate, &.{
+        .req_id = 1,
+        .timestamp = 10,
+        .url = undefined,
+        .opts = .{},
+    });
+    try testing.expectEqual(4, tc.page_navigate);
+
+    try notifier.register(.page_navigate, &tc, TestClient.pageNavigate);
+    try notifier.register(.page_navigated, &tc, TestClient.pageNavigated);
+    notifier.dispatch(.page_navigate, &.{
+        .req_id = 1,
+        .timestamp = 10,
+        .url = undefined,
+        .opts = .{},
+    });
+    notifier.dispatch(.page_navigated, &.{ .req_id = 1, .timestamp = 6, .url = undefined, .opts = .{} });
+    try testing.expectEqual(14, tc.page_navigate);
+    try testing.expectEqual(6, tc.page_navigated);
+
+    notifier.unregisterAll(&tc);
+    notifier.dispatch(.page_navigate, &.{
+        .req_id = 1,
+        .timestamp = 100,
+        .url = undefined,
+        .opts = .{},
+    });
+    notifier.dispatch(.page_navigated, &.{ .req_id = 1, .timestamp = 100, .url = undefined, .opts = .{} });
+    try testing.expectEqual(14, tc.page_navigate);
+    try testing.expectEqual(6, tc.page_navigated);
+
+    {
+        // unregister
+        try notifier.register(.page_navigate, &tc, TestClient.pageNavigate);
+        try notifier.register(.page_navigated, &tc, TestClient.pageNavigated);
+        notifier.dispatch(.page_navigate, &.{ .req_id = 1, .timestamp = 100, .url = undefined, .opts = .{} });
+        notifier.dispatch(.page_navigated, &.{ .req_id = 1, .timestamp = 1000, .url = undefined, .opts = .{} });
+        try testing.expectEqual(114, tc.page_navigate);
+        try testing.expectEqual(1006, tc.page_navigated);
+
+        notifier.unregister(.page_navigate, &tc);
+        notifier.dispatch(.page_navigate, &.{ .req_id = 1, .timestamp = 100, .url = undefined, .opts = .{} });
+        notifier.dispatch(.page_navigated, &.{ .req_id = 1, .timestamp = 1000, .url = undefined, .opts = .{} });
+        try testing.expectEqual(114, tc.page_navigate);
+        try testing.expectEqual(2006, tc.page_navigated);
+
+        notifier.unregister(.page_navigated, &tc);
+        notifier.dispatch(.page_navigate, &.{ .req_id = 1, .timestamp = 100, .url = undefined, .opts = .{} });
+        notifier.dispatch(.page_navigated, &.{ .req_id = 1, .timestamp = 1000, .url = undefined, .opts = .{} });
+        try testing.expectEqual(114, tc.page_navigate);
+        try testing.expectEqual(2006, tc.page_navigated);
+
+        // already unregistered, try anyways
+        notifier.unregister(.page_navigated, &tc);
+        notifier.dispatch(.page_navigate, &.{ .req_id = 1, .timestamp = 100, .url = undefined, .opts = .{} });
+        notifier.dispatch(.page_navigated, &.{ .req_id = 1, .timestamp = 1000, .url = undefined, .opts = .{} });
+        try testing.expectEqual(114, tc.page_navigate);
+        try testing.expectEqual(2006, tc.page_navigated);
+    }
+}
+
+const TestClient = struct {
+    page_navigate: u64 = 0,
+    page_navigated: u64 = 0,
+
+    fn pageNavigate(ptr: *anyopaque, data: *const Notification.PageNavigate) !void {
+        const self: *TestClient = @ptrCast(@alignCast(ptr));
+        self.page_navigate += data.timestamp;
+    }
+
+    fn pageNavigated(ptr: *anyopaque, data: *const Notification.PageNavigated) !void {
+        const self: *TestClient = @ptrCast(@alignCast(ptr));
+        self.page_navigated += data.timestamp;
+    }
+};

src/Sighandler.zig

@@ -0,0 +1,107 @@
+// 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/>.
+
+//! This structure processes operating system signals (SIGINT, SIGTERM)
+//! and runs callbacks to clean up the system gracefully.
+//!
+//! The structure does not clear the memory allocated in the arena,
+//! clear the entire arena when exiting the program.
+const std = @import("std");
+const assert = std.debug.assert;
+const Allocator = std.mem.Allocator;
+const lp = @import("lightpanda");
+
+const log = lp.log;
+
+const SigHandler = @This();
+
+arena: Allocator,
+
+sigset: std.posix.sigset_t = undefined,
+handle_thread: ?std.Thread = null,
+
+attempt: u32 = 0,
+listeners: std.ArrayList(Listener) = .empty,
+
+pub const Listener = struct {
+    args: []const u8,
+    start: *const fn (context: *const anyopaque) void,
+};
+
+pub fn install(self: *SigHandler) !void {
+    // Block SIGINT and SIGTERM for the current thread and all created from it
+    self.sigset = std.posix.sigemptyset();
+    std.posix.sigaddset(&self.sigset, std.posix.SIG.INT);
+    std.posix.sigaddset(&self.sigset, std.posix.SIG.TERM);
+    std.posix.sigaddset(&self.sigset, std.posix.SIG.QUIT);
+    std.posix.sigprocmask(std.posix.SIG.BLOCK, &self.sigset, null);
+
+    self.handle_thread = try std.Thread.spawn(.{ .allocator = self.arena }, SigHandler.sighandle, .{self});
+    self.handle_thread.?.detach();
+}
+
+pub fn on(self: *SigHandler, func: anytype, args: std.meta.ArgsTuple(@TypeOf(func))) !void {
+    assert(@typeInfo(@TypeOf(func)).@"fn".return_type.? == void);
+
+    const Args = @TypeOf(args);
+    const TypeErased = struct {
+        fn start(context: *const anyopaque) void {
+            const args_casted: *const Args = @ptrCast(@alignCast(context));
+            @call(.auto, func, args_casted.*);
+        }
+    };
+
+    const buffer = try self.arena.alignedAlloc(u8, .of(Args), @sizeOf(Args));
+    errdefer self.arena.free(buffer);
+
+    const bytes: []const u8 = @ptrCast((&args)[0..1]);
+    @memcpy(buffer, bytes);
+
+    try self.listeners.append(self.arena, .{
+        .args = buffer,
+        .start = TypeErased.start,
+    });
+}
+
+fn sighandle(self: *SigHandler) noreturn {
+    while (true) {
+        var sig: c_int = 0;
+
+        const rc = std.c.sigwait(&self.sigset, &sig);
+        if (rc != 0) {
+            log.err(.app, "Unable to process signal {}", .{rc});
+            std.process.exit(1);
+        }
+
+        switch (sig) {
+            std.posix.SIG.INT, std.posix.SIG.TERM => {
+                if (self.attempt > 1) {
+                    std.process.exit(1);
+                }
+                self.attempt += 1;
+
+                log.info(.app, "Received termination signal...", .{});
+                for (self.listeners.items) |*item| {
+                    item.start(item.args.ptr);
+                }
+                continue;
+            },
+            else => continue,
+        }
+    }
+}

src/TestHTTPServer.zig

@@ -0,0 +1,142 @@
+// 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 TestHTTPServer = @This();
+
+shutdown: bool,
+listener: ?std.net.Server,
+handler: Handler,
+
+const Handler = *const fn (req: *std.http.Server.Request) anyerror!void;
+
+pub fn init(handler: Handler) TestHTTPServer {
+    return .{
+        .shutdown = true,
+        .listener = null,
+        .handler = handler,
+    };
+}
+
+pub fn deinit(self: *TestHTTPServer) void {
+    self.shutdown = true;
+    if (self.listener) |*listener| {
+        listener.deinit();
+    }
+}
+
+pub fn run(self: *TestHTTPServer, wg: *std.Thread.WaitGroup) !void {
+    const address = try std.net.Address.parseIp("127.0.0.1", 9582);
+
+    self.listener = try address.listen(.{ .reuse_address = true });
+    var listener = &self.listener.?;
+
+    wg.finish();
+
+    while (true) {
+        const conn = listener.accept() catch |err| {
+            if (self.shutdown) {
+                return;
+            }
+            return err;
+        };
+        const thrd = try std.Thread.spawn(.{}, handleConnection, .{ self, conn });
+        thrd.detach();
+    }
+}
+
+fn handleConnection(self: *TestHTTPServer, conn: std.net.Server.Connection) !void {
+    defer conn.stream.close();
+
+    var req_buf: [2048]u8 = undefined;
+    var conn_reader = conn.stream.reader(&req_buf);
+    var conn_writer = conn.stream.writer(&req_buf);
+
+    var http_server = std.http.Server.init(conn_reader.interface(), &conn_writer.interface);
+
+    while (true) {
+        var req = http_server.receiveHead() catch |err| switch (err) {
+            error.ReadFailed => continue,
+            error.HttpConnectionClosing => continue,
+            else => {
+                std.debug.print("Test HTTP Server error: {}\n", .{err});
+                return err;
+            },
+        };
+
+        self.handler(&req) catch |err| {
+            std.debug.print("test http error '{s}': {}\n", .{ req.head.target, err });
+            try req.respond("server error", .{ .status = .internal_server_error });
+            return;
+        };
+    }
+}
+
+pub fn sendFile(req: *std.http.Server.Request, file_path: []const u8) !void {
+    var file = std.fs.cwd().openFile(file_path, .{}) catch |err| switch (err) {
+        error.FileNotFound => return req.respond("server error", .{ .status = .not_found }),
+        else => return err,
+    };
+    defer file.close();
+
+    const stat = try file.stat();
+    var send_buffer: [4096]u8 = undefined;
+
+    var res = try req.respondStreaming(&send_buffer, .{
+        .content_length = stat.size,
+        .respond_options = .{
+            .extra_headers = &.{
+                .{ .name = "content-type", .value = getContentType(file_path) },
+            },
+        },
+    });
+
+    var read_buffer: [4096]u8 = undefined;
+    var reader = file.reader(&read_buffer);
+    _ = try res.writer.sendFileAll(&reader, .unlimited);
+    try res.writer.flush();
+    try res.end();
+}
+
+fn getContentType(file_path: []const u8) []const u8 {
+    if (std.mem.endsWith(u8, file_path, ".js")) {
+        return "application/json";
+    }
+
+    if (std.mem.endsWith(u8, file_path, ".html")) {
+        return "text/html";
+    }
+
+    if (std.mem.endsWith(u8, file_path, ".htm")) {
+        return "text/html";
+    }
+
+    if (std.mem.endsWith(u8, file_path, ".xml")) {
+        // some wpt tests do this
+        return "text/xml";
+    }
+
+    if (std.mem.endsWith(u8, file_path, ".mjs")) {
+        // mjs are ECMAScript modules
+        return "application/json";
+    }
+
+    std.debug.print("TestHTTPServer asked to serve an unknown file type: {s}\n", .{file_path});
+    return "text/html";
+}

src/async/stream.zig

@@ -1,133 +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 std = @import("std");
-const builtin = @import("builtin");
-const posix = std.posix;
-const io = std.io;
-const assert = std.debug.assert;
-
-const tcp = @import("tcp.zig");
-
-pub const Stream = struct {
-    alloc: std.mem.Allocator,
-    conn: *tcp.Conn,
-
-    handle: posix.socket_t,
-
-    pub fn close(self: Stream) void {
-        posix.close(self.handle);
-        self.alloc.destroy(self.conn);
-    }
-
-    pub const ReadError = posix.ReadError;
-    pub const WriteError = posix.WriteError;
-
-    pub const Reader = io.Reader(Stream, ReadError, read);
-    pub const Writer = io.Writer(Stream, WriteError, write);
-
-    pub fn reader(self: Stream) Reader {
-        return .{ .context = self };
-    }
-
-    pub fn writer(self: Stream) Writer {
-        return .{ .context = self };
-    }
-
-    pub fn read(self: Stream, buffer: []u8) ReadError!usize {
-        return self.conn.receive(self.handle, buffer) catch |err| switch (err) {
-            else => return error.Unexpected,
-        };
-    }
-
-    pub fn readv(s: Stream, iovecs: []const posix.iovec) ReadError!usize {
-        return posix.readv(s.handle, iovecs);
-    }
-
-    /// Returns the number of bytes read. If the number read is smaller than
-    /// `buffer.len`, it means the stream reached the end. Reaching the end of
-    /// a stream is not an error condition.
-    pub fn readAll(s: Stream, buffer: []u8) ReadError!usize {
-        return readAtLeast(s, buffer, buffer.len);
-    }
-
-    /// Returns the number of bytes read, calling the underlying read function
-    /// the minimal number of times until the buffer has at least `len` bytes
-    /// filled. If the number read is less than `len` it means the stream
-    /// reached the end. Reaching the end of the stream is not an error
-    /// condition.
-    pub fn readAtLeast(s: Stream, buffer: []u8, len: usize) ReadError!usize {
-        assert(len <= buffer.len);
-        var index: usize = 0;
-        while (index < len) {
-            const amt = try s.read(buffer[index..]);
-            if (amt == 0) break;
-            index += amt;
-        }
-        return index;
-    }
-
-    /// TODO in evented I/O mode, this implementation incorrectly uses the event loop's
-    /// file system thread instead of non-blocking. It needs to be reworked to properly
-    /// use non-blocking I/O.
-    pub fn write(self: Stream, buffer: []const u8) WriteError!usize {
-        return self.conn.send(self.handle, buffer) catch |err| switch (err) {
-            error.AccessDenied => error.AccessDenied,
-            error.WouldBlock => error.WouldBlock,
-            error.ConnectionResetByPeer => error.ConnectionResetByPeer,
-            error.MessageTooBig => error.FileTooBig,
-            error.BrokenPipe => error.BrokenPipe,
-            else => return error.Unexpected,
-        };
-    }
-
-    pub fn writeAll(self: Stream, bytes: []const u8) WriteError!void {
-        var index: usize = 0;
-        while (index < bytes.len) {
-            index += try self.write(bytes[index..]);
-        }
-    }
-
-    /// See https://github.com/ziglang/zig/issues/7699
-    /// See equivalent function: `std.fs.File.writev`.
-    pub fn writev(self: Stream, iovecs: []const posix.iovec_const) WriteError!usize {
-        if (iovecs.len == 0) return 0;
-        const first_buffer = iovecs[0].iov_base[0..iovecs[0].iov_len];
-        return try self.write(first_buffer);
-    }
-
-    /// The `iovecs` parameter is mutable because this function needs to mutate the fields in
-    /// order to handle partial writes from the underlying OS layer.
-    /// See https://github.com/ziglang/zig/issues/7699
-    /// See equivalent function: `std.fs.File.writevAll`.
-    pub fn writevAll(self: Stream, iovecs: []posix.iovec_const) WriteError!void {
-        if (iovecs.len == 0) return;
-
-        var i: usize = 0;
-        while (true) {
-            var amt = try self.writev(iovecs[i..]);
-            while (amt >= iovecs[i].iov_len) {
-                amt -= iovecs[i].iov_len;
-                i += 1;
-                if (i >= iovecs.len) return;
-            }
-            iovecs[i].iov_base += amt;
-            iovecs[i].iov_len -= amt;
-        }
-    }
-};

src/async/tcp.zig

@@ -1,112 +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 std = @import("std");
-const net = std.net;
-const Stream = @import("stream.zig").Stream;
-const Loop = @import("jsruntime").Loop;
-const NetworkImpl = Loop.Network(Conn.Command);
-
-// Conn is a TCP connection using jsruntime Loop async I/O.
-// connect, send and receive are blocking, but use async I/O in the background.
-// Client doesn't own the socket used for the connection, the caller is
-// responsible for closing it.
-pub const Conn = struct {
-    const Command = struct {
-        impl: NetworkImpl,
-
-        done: bool = false,
-        err: ?anyerror = null,
-        ln: usize = 0,
-
-        fn ok(self: *Command, err: ?anyerror, ln: usize) void {
-            self.err = err;
-            self.ln = ln;
-            self.done = true;
-        }
-
-        fn wait(self: *Command) !usize {
-            while (!self.done) try self.impl.tick();
-
-            if (self.err) |err| return err;
-            return self.ln;
-        }
-        pub fn onConnect(self: *Command, err: ?anyerror) void {
-            self.ok(err, 0);
-        }
-        pub fn onSend(self: *Command, ln: usize, err: ?anyerror) void {
-            self.ok(err, ln);
-        }
-        pub fn onReceive(self: *Command, ln: usize, err: ?anyerror) void {
-            self.ok(err, ln);
-        }
-    };
-
-    loop: *Loop,
-
-    pub fn connect(self: *Conn, socket: std.posix.socket_t, address: std.net.Address) !void {
-        var cmd = Command{ .impl = NetworkImpl.init(self.loop) };
-        cmd.impl.connect(&cmd, socket, address);
-        _ = try cmd.wait();
-    }
-
-    pub fn send(self: *Conn, socket: std.posix.socket_t, buffer: []const u8) !usize {
-        var cmd = Command{ .impl = NetworkImpl.init(self.loop) };
-        cmd.impl.send(&cmd, socket, buffer);
-        return try cmd.wait();
-    }
-
-    pub fn receive(self: *Conn, socket: std.posix.socket_t, buffer: []u8) !usize {
-        var cmd = Command{ .impl = NetworkImpl.init(self.loop) };
-        cmd.impl.receive(&cmd, socket, buffer);
-        return try cmd.wait();
-    }
-};
-
-pub fn tcpConnectToHost(alloc: std.mem.Allocator, loop: *Loop, name: []const u8, port: u16) !Stream {
-    // TODO async resolve
-    const list = try net.getAddressList(alloc, name, port);
-    defer list.deinit();
-
-    if (list.addrs.len == 0) return error.UnknownHostName;
-
-    for (list.addrs) |addr| {
-        return tcpConnectToAddress(alloc, loop, addr) catch |err| switch (err) {
-            error.ConnectionRefused => {
-                continue;
-            },
-            else => return err,
-        };
-    }
-    return std.posix.ConnectError.ConnectionRefused;
-}
-
-pub fn tcpConnectToAddress(alloc: std.mem.Allocator, loop: *Loop, addr: net.Address) !Stream {
-    const sockfd = try std.posix.socket(addr.any.family, std.posix.SOCK.STREAM, std.posix.IPPROTO.TCP);
-    errdefer std.posix.close(sockfd);
-
-    var conn = try alloc.create(Conn);
-    conn.* = Conn{ .loop = loop };
-    try conn.connect(sockfd, addr);
-
-    return Stream{
-        .alloc = alloc,
-        .conn = conn,
-        .handle = sockfd,
-    };
-}

src/async/test.zig

@@ -1,189 +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 std = @import("std");
-const http = std.http;
-const Client = @import("Client.zig");
-const Request = @import("Client.zig").Request;
-
-pub const Loop = @import("jsruntime").Loop;
-
-const url = "https://w3.org";
-
-test "blocking mode fetch API" {
-    const alloc = std.testing.allocator;
-
-    var loop = try Loop.init(alloc);
-    defer loop.deinit();
-
-    var client: Client = .{
-        .allocator = alloc,
-        .loop = &loop,
-    };
-    defer client.deinit();
-
-    // force client's CA cert scan from system.
-    try client.ca_bundle.rescan(client.allocator);
-
-    const res = try client.fetch(.{
-        .location = .{ .uri = try std.Uri.parse(url) },
-    });
-
-    try std.testing.expect(res.status == .ok);
-}
-
-test "blocking mode open/send/wait API" {
-    const alloc = std.testing.allocator;
-
-    var loop = try Loop.init(alloc);
-    defer loop.deinit();
-
-    var client: Client = .{
-        .allocator = alloc,
-        .loop = &loop,
-    };
-    defer client.deinit();
-
-    // force client's CA cert scan from system.
-    try client.ca_bundle.rescan(client.allocator);
-
-    var buf: [2014]u8 = undefined;
-    var req = try client.open(.GET, try std.Uri.parse(url), .{
-        .server_header_buffer = &buf,
-    });
-    defer req.deinit();
-
-    try req.send();
-    try req.finish();
-    try req.wait();
-
-    try std.testing.expect(req.response.status == .ok);
-}
-
-// Example how to write an async http client using the modified standard client.
-const AsyncClient = struct {
-    cli: Client,
-
-    const YieldImpl = Loop.Yield(AsyncRequest);
-    const AsyncRequest = struct {
-        const State = enum { new, open, send, finish, wait, done };
-
-        cli: *Client,
-        uri: std.Uri,
-
-        req: ?Request = undefined,
-        state: State = .new,
-
-        impl: YieldImpl,
-        err: ?anyerror = null,
-
-        buf: [2014]u8 = undefined,
-
-        pub fn deinit(self: *AsyncRequest) void {
-            if (self.req) |*r| r.deinit();
-        }
-
-        pub fn fetch(self: *AsyncRequest) void {
-            self.state = .new;
-            return self.impl.yield(self);
-        }
-
-        fn onerr(self: *AsyncRequest, err: anyerror) void {
-            self.state = .done;
-            self.err = err;
-        }
-
-        pub fn onYield(self: *AsyncRequest, err: ?anyerror) void {
-            if (err) |e| return self.onerr(e);
-
-            switch (self.state) {
-                .new => {
-                    self.state = .open;
-                    self.req = self.cli.open(.GET, self.uri, .{
-                        .server_header_buffer = &self.buf,
-                    }) catch |e| return self.onerr(e);
-                },
-                .open => {
-                    self.state = .send;
-                    self.req.?.send() catch |e| return self.onerr(e);
-                },
-                .send => {
-                    self.state = .finish;
-                    self.req.?.finish() catch |e| return self.onerr(e);
-                },
-                .finish => {
-                    self.state = .wait;
-                    self.req.?.wait() catch |e| return self.onerr(e);
-                },
-                .wait => {
-                    self.state = .done;
-                    return;
-                },
-                .done => return,
-            }
-
-            return self.impl.yield(self);
-        }
-
-        pub fn wait(self: *AsyncRequest) !void {
-            while (self.state != .done) try self.impl.tick();
-            if (self.err) |err| return err;
-        }
-    };
-
-    pub fn init(alloc: std.mem.Allocator, loop: *Loop) AsyncClient {
-        return .{
-            .cli = .{
-                .allocator = alloc,
-                .loop = loop,
-            },
-        };
-    }
-
-    pub fn deinit(self: *AsyncClient) void {
-        self.cli.deinit();
-    }
-
-    pub fn createRequest(self: *AsyncClient, uri: std.Uri) !AsyncRequest {
-        return .{
-            .impl = YieldImpl.init(self.cli.loop),
-            .cli = &self.cli,
-            .uri = uri,
-        };
-    }
-};
-
-test "non blocking client" {
-    const alloc = std.testing.allocator;
-
-    var loop = try Loop.init(alloc);
-    defer loop.deinit();
-
-    var client = AsyncClient.init(alloc, &loop);
-    defer client.deinit();
-
-    var reqs: [3]AsyncClient.AsyncRequest = undefined;
-    for (0..reqs.len) |i| {
-        reqs[i] = try client.createRequest(try std.Uri.parse(url));
-        reqs[i].fetch();
-    }
-    for (0..reqs.len) |i| {
-        try reqs[i].wait();
-        reqs[i].deinit();
-    }
-}

src/browser/Browser.zig

@@ -0,0 +1,118 @@
+// 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 Allocator = std.mem.Allocator;
+const ArenaAllocator = std.heap.ArenaAllocator;
+
+const js = @import("js/js.zig");
+const log = @import("../log.zig");
+const App = @import("../App.zig");
+
+const ArenaPool = App.ArenaPool;
+const HttpClient = App.Http.Client;
+const Notification = App.Notification;
+
+const IS_DEBUG = @import("builtin").mode == .Debug;
+
+const Session = @import("Session.zig");
+
+// Browser is an instance of the browser.
+// You can create multiple browser instances.
+// A browser contains only one session.
+const Browser = @This();
+
+env: js.Env,
+app: *App,
+session: ?Session,
+allocator: Allocator,
+arena_pool: *ArenaPool,
+http_client: *HttpClient,
+call_arena: ArenaAllocator,
+page_arena: ArenaAllocator,
+session_arena: ArenaAllocator,
+transfer_arena: ArenaAllocator,
+notification: *Notification,
+
+pub fn init(app: *App) !Browser {
+    const allocator = app.allocator;
+
+    var env = try js.Env.init(allocator, &app.platform, &app.snapshot);
+    errdefer env.deinit();
+
+    const notification = try Notification.init(allocator, app.notification);
+    app.http.client.notification = notification;
+    app.http.client.next_request_id = 0; // Should we track ids in CDP only?
+    errdefer notification.deinit();
+
+    return .{
+        .app = app,
+        .env = env,
+        .session = null,
+        .allocator = allocator,
+        .notification = notification,
+        .arena_pool = &app.arena_pool,
+        .http_client = app.http.client,
+        .call_arena = ArenaAllocator.init(allocator),
+        .page_arena = ArenaAllocator.init(allocator),
+        .session_arena = ArenaAllocator.init(allocator),
+        .transfer_arena = ArenaAllocator.init(allocator),
+    };
+}
+
+pub fn deinit(self: *Browser) void {
+    self.closeSession();
+    self.env.deinit();
+    self.call_arena.deinit();
+    self.page_arena.deinit();
+    self.session_arena.deinit();
+    self.transfer_arena.deinit();
+    self.http_client.notification = null;
+    self.notification.deinit();
+}
+
+pub fn newSession(self: *Browser) !*Session {
+    self.closeSession();
+    self.session = @as(Session, undefined);
+    const session = &self.session.?;
+    try Session.init(session, self);
+    return session;
+}
+
+pub fn closeSession(self: *Browser) void {
+    if (self.session) |*session| {
+        session.deinit();
+        self.session = null;
+        _ = self.session_arena.reset(.{ .retain_with_limit = 1 * 1024 * 1024 });
+        self.env.memoryPressureNotification(.critical);
+    }
+}
+
+pub fn runMicrotasks(self: *const Browser) void {
+    self.env.runMicrotasks();
+}
+
+pub fn runMessageLoop(self: *const Browser) void {
+    while (self.env.pumpMessageLoop()) {
+        if (comptime IS_DEBUG) {
+            log.debug(.browser, "pumpMessageLoop", .{});
+        }
+    }
+    self.env.runIdleTasks();
+}

src/browser/EventManager.zig

@@ -0,0 +1,527 @@
+// 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 builtin = @import("builtin");
+
+const log = @import("../log.zig");
+const String = @import("../string.zig").String;
+
+const js = @import("js/js.zig");
+const Page = @import("Page.zig");
+
+const Node = @import("webapi/Node.zig");
+const Event = @import("webapi/Event.zig");
+const EventTarget = @import("webapi/EventTarget.zig");
+
+const Allocator = std.mem.Allocator;
+
+const IS_DEBUG = builtin.mode == .Debug;
+
+pub const EventManager = @This();
+
+page: *Page,
+arena: Allocator,
+listener_pool: std.heap.MemoryPool(Listener),
+list_pool: std.heap.MemoryPool(std.DoublyLinkedList),
+lookup: std.AutoHashMapUnmanaged(usize, *std.DoublyLinkedList),
+dispatch_depth: usize,
+deferred_removals: std.ArrayList(struct { list: *std.DoublyLinkedList, listener: *Listener }),
+
+pub fn init(page: *Page) EventManager {
+    return .{
+        .page = page,
+        .lookup = .{},
+        .arena = page.arena,
+        .list_pool = std.heap.MemoryPool(std.DoublyLinkedList).init(page.arena),
+        .listener_pool = std.heap.MemoryPool(Listener).init(page.arena),
+        .dispatch_depth = 0,
+        .deferred_removals = .{},
+    };
+}
+
+pub const RegisterOptions = struct {
+    once: bool = false,
+    capture: bool = false,
+    passive: bool = false,
+    signal: ?*@import("webapi/AbortSignal.zig") = null,
+};
+
+pub const Callback = union(enum) {
+    function: js.Function,
+    object: js.Object,
+};
+
+pub fn register(self: *EventManager, target: *EventTarget, typ: []const u8, callback: Callback, opts: RegisterOptions) !void {
+    if (comptime IS_DEBUG) {
+        log.debug(.event, "eventManager.register", .{ .type = typ, .capture = opts.capture, .once = opts.once, .target = target });
+    }
+
+    // If a signal is provided and already aborted, don't register the listener
+    if (opts.signal) |signal| {
+        if (signal.getAborted()) {
+            return;
+        }
+    }
+
+    const gop = try self.lookup.getOrPut(self.arena, @intFromPtr(target));
+    if (gop.found_existing) {
+        // check for duplicate callbacks already registered
+        var node = gop.value_ptr.*.first;
+        while (node) |n| {
+            const listener: *Listener = @alignCast(@fieldParentPtr("node", n));
+            if (listener.typ.eqlSlice(typ)) {
+                const is_duplicate = switch (callback) {
+                    .object => |obj| listener.function.eqlObject(obj),
+                    .function => |func| listener.function.eqlFunction(func),
+                };
+                if (is_duplicate and listener.capture == opts.capture) {
+                    return;
+                }
+            }
+            node = n.next;
+        }
+    } else {
+        gop.value_ptr.* = try self.list_pool.create();
+        gop.value_ptr.*.* = .{};
+    }
+
+    const func = switch (callback) {
+        .function => |f| Function{ .value = try f.persist() },
+        .object => |o| Function{ .object = try o.persist() },
+    };
+
+    const listener = try self.listener_pool.create();
+    listener.* = .{
+        .node = .{},
+        .once = opts.once,
+        .capture = opts.capture,
+        .passive = opts.passive,
+        .function = func,
+        .signal = opts.signal,
+        .typ = try String.init(self.arena, typ, .{}),
+    };
+    // append the listener to the list of listeners for this target
+    gop.value_ptr.*.append(&listener.node);
+}
+
+pub fn remove(self: *EventManager, target: *EventTarget, typ: []const u8, callback: Callback, use_capture: bool) void {
+    const list = self.lookup.get(@intFromPtr(target)) orelse return;
+    if (findListener(list, typ, callback, use_capture)) |listener| {
+        self.removeListener(list, listener);
+    }
+}
+
+pub fn dispatch(self: *EventManager, target: *EventTarget, event: *Event) !void {
+    if (comptime IS_DEBUG) {
+        log.debug(.event, "eventManager.dispatch", .{ .type = event._type_string.str(), .bubbles = event._bubbles });
+    }
+
+    event._target = target;
+    event._dispatch_target = target; // Store original target for composedPath()
+    var was_handled = false;
+
+    defer if (was_handled) {
+        var ls: js.Local.Scope = undefined;
+        self.page.js.localScope(&ls);
+        defer ls.deinit();
+        ls.local.runMicrotasks();
+    };
+
+    switch (target._type) {
+        .node => |node| try self.dispatchNode(node, event, &was_handled),
+        .xhr,
+        .window,
+        .abort_signal,
+        .media_query_list,
+        .message_port,
+        .text_track_cue,
+        .navigation,
+        .screen,
+        .screen_orientation,
+        .generic,
+        => {
+            const list = self.lookup.get(@intFromPtr(target)) orelse return;
+            try self.dispatchAll(list, target, event, &was_handled);
+        },
+    }
+}
+
+// There are a lot of events that can be attached via addEventListener or as
+// a property, like the XHR events, or window.onload. You might think that the
+// property is just a shortcut for calling addEventListener, but they are distinct.
+// An event set via property cannot be removed by removeEventListener. If you
+// set both the property and add a listener, they both execute.
+const DispatchWithFunctionOptions = struct {
+    context: []const u8,
+    inject_target: bool = true,
+};
+pub fn dispatchWithFunction(self: *EventManager, target: *EventTarget, event: *Event, function_: ?js.Function, comptime opts: DispatchWithFunctionOptions) !void {
+    if (comptime IS_DEBUG) {
+        log.debug(.event, "dispatchWithFunction", .{ .type = event._type_string.str(), .context = opts.context, .has_function = function_ != null });
+    }
+
+    if (comptime opts.inject_target) {
+        event._target = target;
+        event._dispatch_target = target; // Store original target for composedPath()
+    }
+
+    var was_dispatched = false;
+    defer if (was_dispatched) {
+        var ls: js.Local.Scope = undefined;
+        self.page.js.localScope(&ls);
+        defer ls.deinit();
+        ls.local.runMicrotasks();
+    };
+
+    if (function_) |func| {
+        event._current_target = target;
+        if (func.callWithThis(void, target, .{event})) {
+            was_dispatched = true;
+        } else |err| {
+            // a non-JS error
+            log.warn(.event, opts.context, .{ .err = err });
+        }
+    }
+
+    const list = self.lookup.get(@intFromPtr(target)) orelse return;
+    try self.dispatchAll(list, target, event, &was_dispatched);
+}
+
+fn dispatchNode(self: *EventManager, target: *Node, event: *Event, was_handled: *bool) !void {
+    const ShadowRoot = @import("webapi/ShadowRoot.zig");
+
+    // Defer runs even on early return - ensures event phase is reset
+    // and default actions execute (unless prevented)
+    defer {
+        event._event_phase = .none;
+
+        // Execute default action if not prevented
+        if (event._prevent_default) {
+            // can't return in a defer (╯°□°)╯︵ ┻━┻
+        } else if (event._type_string.eqlSlice("click")) {
+            self.page.handleClick(target) catch |err| {
+                log.warn(.event, "page.click", .{ .err = err });
+            };
+        } else if (event._type_string.eqlSlice("keydown")) {
+            self.page.handleKeydown(target, event) catch |err| {
+                log.warn(.event, "page.keydown", .{ .err = err });
+            };
+        }
+    }
+
+    var path_len: usize = 0;
+    var path_buffer: [128]*EventTarget = undefined;
+
+    var node: ?*Node = target;
+    while (node) |n| {
+        if (path_len >= path_buffer.len) break;
+        path_buffer[path_len] = n.asEventTarget();
+        path_len += 1;
+
+        // Check if this node is a shadow root
+        if (n.is(ShadowRoot)) |shadow| {
+            event._needs_retargeting = true;
+
+            // If event is not composed, stop at shadow boundary
+            if (!event._composed) {
+                break;
+            }
+
+            // Otherwise, jump to the shadow host and continue
+            node = shadow._host.asNode();
+            continue;
+        }
+
+        node = n._parent;
+    }
+
+    // Even though the window isn't part of the DOM, events always propagate
+    // through it in the capture phase (unless we stopped at a shadow boundary)
+    if (path_len < path_buffer.len) {
+        path_buffer[path_len] = self.page.window.asEventTarget();
+        path_len += 1;
+    }
+
+    const path = path_buffer[0..path_len];
+
+    // Phase 1: Capturing phase (root → target, excluding target)
+    // This happens for all events, regardless of bubbling
+    event._event_phase = .capturing_phase;
+    var i: usize = path_len;
+    while (i > 1) {
+        i -= 1;
+        const current_target = path[i];
+        if (self.lookup.get(@intFromPtr(current_target))) |list| {
+            try self.dispatchPhase(list, current_target, event, was_handled, true);
+            if (event._stop_propagation) {
+                return;
+            }
+        }
+    }
+
+    // Phase 2: At target
+    event._event_phase = .at_target;
+    const target_et = target.asEventTarget();
+    if (self.lookup.get(@intFromPtr(target_et))) |list| {
+        try self.dispatchPhase(list, target_et, event, was_handled, null);
+        if (event._stop_propagation) {
+            return;
+        }
+    }
+
+    // Phase 3: Bubbling phase (target → root, excluding target)
+    // This only happens if the event bubbles
+    if (event._bubbles) {
+        event._event_phase = .bubbling_phase;
+        for (path[1..]) |current_target| {
+            if (self.lookup.get(@intFromPtr(current_target))) |list| {
+                try self.dispatchPhase(list, current_target, event, was_handled, false);
+                if (event._stop_propagation) {
+                    break;
+                }
+            }
+        }
+    }
+}
+
+fn dispatchPhase(self: *EventManager, list: *std.DoublyLinkedList, current_target: *EventTarget, event: *Event, was_handled: *bool, comptime capture_only: ?bool) !void {
+    const page = self.page;
+    const typ = event._type_string;
+
+    // Track dispatch depth for deferred removal
+    self.dispatch_depth += 1;
+    defer {
+        const dispatch_depth = self.dispatch_depth;
+        // Only destroy deferred listeners when we exit the outermost dispatch
+        if (dispatch_depth == 1) {
+            for (self.deferred_removals.items) |removal| {
+                removal.list.remove(&removal.listener.node);
+                self.listener_pool.destroy(removal.listener);
+            }
+            self.deferred_removals.clearRetainingCapacity();
+        } else {
+            self.dispatch_depth = dispatch_depth - 1;
+        }
+    }
+
+    // Use the last listener in the list as sentinel - listeners added during dispatch will be after it
+    const last_node = list.last orelse return;
+    const last_listener: *Listener = @alignCast(@fieldParentPtr("node", last_node));
+
+    // Iterate through the list, stopping after we've encountered the last_listener
+    var node = list.first;
+    var is_done = false;
+    while (node) |n| {
+        if (is_done) {
+            break;
+        }
+
+        const listener: *Listener = @alignCast(@fieldParentPtr("node", n));
+        is_done = (listener == last_listener);
+        node = n.next;
+
+        // Skip non-matching listeners
+        if (!listener.typ.eql(typ)) {
+            continue;
+        }
+        if (comptime capture_only) |capture| {
+            if (listener.capture != capture) {
+                continue;
+            }
+        }
+
+        // Skip removed listeners
+        if (listener.removed) {
+            continue;
+        }
+
+        // If the listener has an aborted signal, remove it and skip
+        if (listener.signal) |signal| {
+            if (signal.getAborted()) {
+                self.removeListener(list, listener);
+                continue;
+            }
+        }
+
+        // Remove "once" listeners BEFORE calling them so nested dispatches don't see them
+        if (listener.once) {
+            self.removeListener(list, listener);
+        }
+
+        was_handled.* = true;
+        event._current_target = current_target;
+
+        // Compute adjusted target for shadow DOM retargeting (only if needed)
+        const original_target = event._target;
+        if (event._needs_retargeting) {
+            event._target = getAdjustedTarget(original_target, current_target);
+        }
+
+        var ls: js.Local.Scope = undefined;
+        page.js.localScope(&ls);
+        defer ls.deinit();
+
+        switch (listener.function) {
+            .value => |value| try ls.toLocal(value).callWithThis(void, current_target, .{event}),
+            .string => |string| {
+                const str = try page.call_arena.dupeZ(u8, string.str());
+                try ls.local.eval(str, null);
+            },
+            .object => |obj_global| {
+                const obj = ls.toLocal(obj_global);
+                if (try obj.getFunction("handleEvent")) |handleEvent| {
+                    try handleEvent.callWithThis(void, obj, .{event});
+                }
+            },
+        }
+
+        // Restore original target (only if we changed it)
+        if (event._needs_retargeting) {
+            event._target = original_target;
+        }
+
+        if (event._stop_immediate_propagation) {
+            return;
+        }
+    }
+}
+
+//  Non-Node dispatching (XHR, Window without propagation)
+fn dispatchAll(self: *EventManager, list: *std.DoublyLinkedList, current_target: *EventTarget, event: *Event, was_handled: *bool) !void {
+    return self.dispatchPhase(list, current_target, event, was_handled, null);
+}
+
+fn removeListener(self: *EventManager, list: *std.DoublyLinkedList, listener: *Listener) void {
+    // If we're in a dispatch, defer removal to avoid invalidating iteration
+    if (self.dispatch_depth > 0) {
+        listener.removed = true;
+        self.deferred_removals.append(self.arena, .{ .list = list, .listener = listener }) catch unreachable;
+    } else {
+        // Outside dispatch, remove immediately
+        list.remove(&listener.node);
+        self.listener_pool.destroy(listener);
+    }
+}
+
+fn findListener(list: *const std.DoublyLinkedList, typ: []const u8, callback: Callback, capture: bool) ?*Listener {
+    var node = list.first;
+    while (node) |n| {
+        node = n.next;
+        const listener: *Listener = @alignCast(@fieldParentPtr("node", n));
+        const matches = switch (callback) {
+            .object => |obj| listener.function.eqlObject(obj),
+            .function => |func| listener.function.eqlFunction(func),
+        };
+        if (!matches) {
+            continue;
+        }
+        if (listener.capture != capture) {
+            continue;
+        }
+        if (!listener.typ.eqlSlice(typ)) {
+            continue;
+        }
+        return listener;
+    }
+    return null;
+}
+
+const Listener = struct {
+    typ: String,
+    once: bool,
+    capture: bool,
+    passive: bool,
+    function: Function,
+    signal: ?*@import("webapi/AbortSignal.zig") = null,
+    node: std.DoublyLinkedList.Node,
+    removed: bool = false,
+};
+
+const Function = union(enum) {
+    value: js.Function.Global,
+    string: String,
+    object: js.Object.Global,
+
+    fn eqlFunction(self: Function, func: js.Function) bool {
+        return switch (self) {
+            .value => |v| v.isEqual(func),
+            else => false,
+        };
+    }
+
+    fn eqlObject(self: Function, obj: js.Object) bool {
+        return switch (self) {
+            .object => |o| return o.isEqual(obj),
+            else => false,
+        };
+    }
+};
+
+// Computes the adjusted target for shadow DOM event retargeting
+// Returns the lowest shadow-including ancestor of original_target that is
+// also an ancestor-or-self of current_target
+fn getAdjustedTarget(original_target: ?*EventTarget, current_target: *EventTarget) ?*EventTarget {
+    const ShadowRoot = @import("webapi/ShadowRoot.zig");
+
+    const orig_node = switch ((original_target orelse return null)._type) {
+        .node => |n| n,
+        else => return original_target,
+    };
+    const curr_node = switch (current_target._type) {
+        .node => |n| n,
+        else => return original_target,
+    };
+
+    // Walk up from original target, checking if we can reach current target
+    var node: ?*Node = orig_node;
+    while (node) |n| {
+        // Check if current_target is an ancestor of n (or n itself)
+        if (isAncestorOrSelf(curr_node, n)) {
+            return n.asEventTarget();
+        }
+
+        // Cross shadow boundary if needed
+        if (n.is(ShadowRoot)) |shadow| {
+            node = shadow._host.asNode();
+            continue;
+        }
+
+        node = n._parent;
+    }
+
+    return original_target;
+}
+
+// Check if ancestor is an ancestor of (or the same as) node
+// WITHOUT crossing shadow boundaries (just regular DOM tree)
+fn isAncestorOrSelf(ancestor: *Node, node: *Node) bool {
+    if (ancestor == node) {
+        return true;
+    }
+
+    var current: ?*Node = node._parent;
+    while (current) |n| {
+        if (n == ancestor) {
+            return true;
+        }
+        current = n._parent;
+    }
+
+    return false;
+}

src/browser/Factory.zig

@@ -0,0 +1,467 @@
+// Copyright (C) 2023-2026  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 builtin = @import("builtin");
+const reflect = @import("reflect.zig");
+
+const log = @import("../log.zig");
+const String = @import("../string.zig").String;
+
+const SlabAllocator = @import("../slab.zig").SlabAllocator;
+
+const Page = @import("Page.zig");
+const Node = @import("webapi/Node.zig");
+const Event = @import("webapi/Event.zig");
+const UIEvent = @import("webapi/event/UIEvent.zig");
+const MouseEvent = @import("webapi/event/MouseEvent.zig");
+const Element = @import("webapi/Element.zig");
+const Document = @import("webapi/Document.zig");
+const EventTarget = @import("webapi/EventTarget.zig");
+const XMLHttpRequestEventTarget = @import("webapi/net/XMLHttpRequestEventTarget.zig");
+const Blob = @import("webapi/Blob.zig");
+const AbstractRange = @import("webapi/AbstractRange.zig");
+
+const Allocator = std.mem.Allocator;
+
+const IS_DEBUG = builtin.mode == .Debug;
+const assert = std.debug.assert;
+
+const Factory = @This();
+_page: *Page,
+_slab: SlabAllocator,
+
+fn PrototypeChain(comptime types: []const type) type {
+    return struct {
+        const Self = @This();
+        memory: []u8,
+
+        fn totalSize() usize {
+            var size: usize = 0;
+            for (types) |T| {
+                size = std.mem.alignForward(usize, size, @alignOf(T));
+                size += @sizeOf(T);
+            }
+            return size;
+        }
+
+        fn maxAlign() std.mem.Alignment {
+            var alignment: std.mem.Alignment = .@"1";
+
+            for (types) |T| {
+                alignment = std.mem.Alignment.max(alignment, std.mem.Alignment.of(T));
+            }
+
+            return alignment;
+        }
+
+        fn getType(comptime index: usize) type {
+            return types[index];
+        }
+
+        fn allocate(allocator: std.mem.Allocator) !Self {
+            const size = comptime Self.totalSize();
+            const alignment = comptime Self.maxAlign();
+
+            const memory = try allocator.alignedAlloc(u8, alignment, size);
+            return .{ .memory = memory };
+        }
+
+        fn get(self: *const Self, comptime index: usize) *getType(index) {
+            var offset: usize = 0;
+            inline for (types, 0..) |T, i| {
+                offset = std.mem.alignForward(usize, offset, @alignOf(T));
+
+                if (i == index) {
+                    return @as(*T, @ptrCast(@alignCast(self.memory.ptr + offset)));
+                }
+                offset += @sizeOf(T);
+            }
+            unreachable;
+        }
+
+        fn set(self: *const Self, comptime index: usize, value: getType(index)) void {
+            const ptr = self.get(index);
+            ptr.* = value;
+        }
+
+        fn setRoot(self: *const Self, comptime T: type) void {
+            const ptr = self.get(0);
+            ptr.* = .{ ._type = unionInit(T, self.get(1)) };
+        }
+
+        fn setMiddle(self: *const Self, comptime index: usize, comptime T: type) void {
+            assert(index >= 1);
+            assert(index < types.len);
+
+            const ptr = self.get(index);
+            ptr.* = .{ ._proto = self.get(index - 1), ._type = unionInit(T, self.get(index + 1)) };
+        }
+
+        fn setMiddleWithValue(self: *const Self, comptime index: usize, comptime T: type, value: anytype) void {
+            assert(index >= 1);
+
+            const ptr = self.get(index);
+            ptr.* = .{ ._proto = self.get(index - 1), ._type = unionInit(T, value) };
+        }
+
+        fn setLeaf(self: *const Self, comptime index: usize, value: anytype) void {
+            assert(index >= 1);
+
+            const ptr = self.get(index);
+            ptr.* = value;
+            ptr._proto = self.get(index - 1);
+        }
+    };
+}
+
+fn AutoPrototypeChain(comptime types: []const type) type {
+    return struct {
+        fn create(allocator: std.mem.Allocator, leaf_value: anytype) !*@TypeOf(leaf_value) {
+            const chain = try PrototypeChain(types).allocate(allocator);
+
+            const RootType = types[0];
+            chain.setRoot(RootType.Type);
+
+            inline for (1..types.len - 1) |i| {
+                const MiddleType = types[i];
+                chain.setMiddle(i, MiddleType.Type);
+            }
+
+            chain.setLeaf(types.len - 1, leaf_value);
+            return chain.get(types.len - 1);
+        }
+    };
+}
+
+pub fn init(page: *Page) Factory {
+    return .{
+        ._page = page,
+        ._slab = SlabAllocator.init(page.arena, 128),
+    };
+}
+
+// this is a root object
+pub fn eventTarget(self: *Factory, child: anytype) !*@TypeOf(child) {
+    const allocator = self._slab.allocator();
+    const chain = try PrototypeChain(
+        &.{ EventTarget, @TypeOf(child) },
+    ).allocate(allocator);
+
+    const event_ptr = chain.get(0);
+    event_ptr.* = .{
+        ._type = unionInit(EventTarget.Type, chain.get(1)),
+    };
+    chain.setLeaf(1, child);
+
+    return chain.get(1);
+}
+
+fn eventInit(typ: []const u8, value: anytype, page: *Page) !Event {
+    // Round to 2ms for privacy (browsers do this)
+    const raw_timestamp = @import("../datetime.zig").milliTimestamp(.monotonic);
+    const time_stamp = (raw_timestamp / 2) * 2;
+
+    return .{
+        ._type = unionInit(Event.Type, value),
+        ._type_string = try String.init(page.arena, typ, .{}),
+        ._time_stamp = time_stamp,
+    };
+}
+
+// this is a root object
+pub fn event(self: *Factory, typ: []const u8, child: anytype) !*@TypeOf(child) {
+    const allocator = self._slab.allocator();
+
+    const chain = try PrototypeChain(
+        &.{ Event, @TypeOf(child) },
+    ).allocate(allocator);
+
+    // Special case: Event has a _type_string field, so we need manual setup
+    const event_ptr = chain.get(0);
+    event_ptr.* = try eventInit(typ, chain.get(1), self._page);
+    chain.setLeaf(1, child);
+
+    return chain.get(1);
+}
+
+pub fn uiEvent(self: *Factory, typ: []const u8, child: anytype) !*@TypeOf(child) {
+    const allocator = self._slab.allocator();
+
+    const chain = try PrototypeChain(
+        &.{ Event, UIEvent, @TypeOf(child) },
+    ).allocate(allocator);
+
+    // Special case: Event has a _type_string field, so we need manual setup
+    const event_ptr = chain.get(0);
+    event_ptr.* = try eventInit(typ, chain.get(1), self._page);
+    chain.setMiddle(1, UIEvent.Type);
+    chain.setLeaf(2, child);
+
+    return chain.get(2);
+}
+
+pub fn mouseEvent(self: *Factory, typ: []const u8, mouse: MouseEvent, child: anytype) !*@TypeOf(child) {
+    const allocator = self._slab.allocator();
+
+    const chain = try PrototypeChain(
+        &.{ Event, UIEvent, MouseEvent, @TypeOf(child) },
+    ).allocate(allocator);
+
+    // Special case: Event has a _type_string field, so we need manual setup
+    const event_ptr = chain.get(0);
+    event_ptr.* = try eventInit(typ, chain.get(1), self._page);
+    chain.setMiddle(1, UIEvent.Type);
+
+    // Set MouseEvent with all its fields
+    const mouse_ptr = chain.get(2);
+    mouse_ptr.* = mouse;
+    mouse_ptr._proto = chain.get(1);
+    mouse_ptr._type = unionInit(MouseEvent.Type, chain.get(3));
+
+    chain.setLeaf(3, child);
+
+    return chain.get(3);
+}
+
+pub fn blob(self: *Factory, child: anytype) !*@TypeOf(child) {
+    const allocator = self._slab.allocator();
+
+    // Special case: Blob has slice and mime fields, so we need manual setup
+    const chain = try PrototypeChain(
+        &.{ Blob, @TypeOf(child) },
+    ).allocate(allocator);
+
+    const blob_ptr = chain.get(0);
+    blob_ptr.* = .{
+        ._type = unionInit(Blob.Type, chain.get(1)),
+        ._slice = "",
+        ._mime = "",
+    };
+    chain.setLeaf(1, child);
+
+    return chain.get(1);
+}
+
+pub fn abstractRange(self: *Factory, child: anytype, page: *Page) !*@TypeOf(child) {
+    const allocator = self._slab.allocator();
+    const chain = try PrototypeChain(&.{ AbstractRange, @TypeOf(child) }).allocate(allocator);
+
+    const doc = page.document.asNode();
+    chain.set(0, AbstractRange{
+        ._type = unionInit(AbstractRange.Type, chain.get(1)),
+        ._end_offset = 0,
+        ._start_offset = 0,
+        ._end_container = doc,
+        ._start_container = doc,
+    });
+    chain.setLeaf(1, child);
+    return chain.get(1);
+}
+
+pub fn node(self: *Factory, child: anytype) !*@TypeOf(child) {
+    const allocator = self._slab.allocator();
+    return try AutoPrototypeChain(
+        &.{ EventTarget, Node, @TypeOf(child) },
+    ).create(allocator, child);
+}
+
+pub fn document(self: *Factory, child: anytype) !*@TypeOf(child) {
+    const allocator = self._slab.allocator();
+    return try AutoPrototypeChain(
+        &.{ EventTarget, Node, Document, @TypeOf(child) },
+    ).create(allocator, child);
+}
+
+pub fn documentFragment(self: *Factory, child: anytype) !*@TypeOf(child) {
+    const allocator = self._slab.allocator();
+    return try AutoPrototypeChain(
+        &.{ EventTarget, Node, Node.DocumentFragment, @TypeOf(child) },
+    ).create(allocator, child);
+}
+
+pub fn element(self: *Factory, child: anytype) !*@TypeOf(child) {
+    const allocator = self._slab.allocator();
+    return try AutoPrototypeChain(
+        &.{ EventTarget, Node, Element, @TypeOf(child) },
+    ).create(allocator, child);
+}
+
+pub fn htmlElement(self: *Factory, child: anytype) !*@TypeOf(child) {
+    const allocator = self._slab.allocator();
+    return try AutoPrototypeChain(
+        &.{ EventTarget, Node, Element, Element.Html, @TypeOf(child) },
+    ).create(allocator, child);
+}
+
+pub fn htmlMediaElement(self: *Factory, child: anytype) !*@TypeOf(child) {
+    const allocator = self._slab.allocator();
+    return try AutoPrototypeChain(
+        &.{ EventTarget, Node, Element, Element.Html, Element.Html.Media, @TypeOf(child) },
+    ).create(allocator, child);
+}
+
+pub fn svgElement(self: *Factory, tag_name: []const u8, child: anytype) !*@TypeOf(child) {
+    const allocator = self._slab.allocator();
+    const ChildT = @TypeOf(child);
+
+    if (ChildT == Element.Svg) {
+        return self.element(child);
+    }
+
+    const chain = try PrototypeChain(
+        &.{ EventTarget, Node, Element, Element.Svg, ChildT },
+    ).allocate(allocator);
+
+    chain.setRoot(EventTarget.Type);
+    chain.setMiddle(1, Node.Type);
+    chain.setMiddle(2, Element.Type);
+
+    // will never allocate, can't fail
+    const tag_name_str = String.init(self._page.arena, tag_name, .{}) catch unreachable;
+
+    // Manually set Element.Svg with the tag_name
+    chain.set(3, .{
+        ._proto = chain.get(2),
+        ._tag_name = tag_name_str,
+        ._type = unionInit(Element.Svg.Type, chain.get(4)),
+    });
+
+    chain.setLeaf(4, child);
+    return chain.get(4);
+}
+
+pub fn xhrEventTarget(_: *const Factory, allocator: Allocator, child: anytype) !*@TypeOf(child) {
+    return try AutoPrototypeChain(
+        &.{ EventTarget, XMLHttpRequestEventTarget, @TypeOf(child) },
+    ).create(allocator, child);
+}
+
+pub fn textTrackCue(self: *Factory, child: anytype) !*@TypeOf(child) {
+    const allocator = self._slab.allocator();
+    const TextTrackCue = @import("webapi/media/TextTrackCue.zig");
+
+    return try AutoPrototypeChain(
+        &.{ EventTarget, TextTrackCue, @TypeOf(child) },
+    ).create(allocator, child);
+}
+
+pub fn destroy(self: *Factory, value: anytype) void {
+    const S = reflect.Struct(@TypeOf(value));
+
+    if (comptime IS_DEBUG) {
+        // We should always destroy from the leaf down.
+        if (@hasDecl(S, "_prototype_root")) {
+            // A Event{._type == .generic} (or any other similar types)
+            // _should_ be destoyed directly. The _type = .generic is a pseudo
+            // child
+            if (S != Event or value._type != .generic) {
+                log.fatal(.bug, "factory.destroy.event", .{ .type = @typeName(S) });
+                unreachable;
+            }
+        }
+    }
+
+    if (comptime @hasField(S, "_proto")) {
+        self.destroyChain(value, true, 0, std.mem.Alignment.@"1");
+    } else {
+        self.destroyStandalone(value);
+    }
+}
+
+pub fn destroyStandalone(self: *Factory, value: anytype) void {
+    const allocator = self._slab.allocator();
+    allocator.destroy(value);
+}
+
+fn destroyChain(
+    self: *Factory,
+    value: anytype,
+    comptime first: bool,
+    old_size: usize,
+    old_align: std.mem.Alignment,
+) void {
+    const S = reflect.Struct(@TypeOf(value));
+    const allocator = self._slab.allocator();
+
+    // aligns the old size to the alignment of this element
+    const current_size = std.mem.alignForward(usize, old_size, @alignOf(S));
+    const new_size = current_size + @sizeOf(S);
+    const new_align = std.mem.Alignment.max(old_align, std.mem.Alignment.of(S));
+
+    // This is initially called from a deinit. We don't want to call that
+    // same deinit. So when this is the first time destroyChain is called
+    // we don't call deinit (because we're in that deinit)
+    if (!comptime first) {
+        // But if it isn't the first time
+        if (@hasDecl(S, "deinit")) {
+            // And it has a deinit, we'll call it
+            switch (@typeInfo(@TypeOf(S.deinit)).@"fn".params.len) {
+                1 => value.deinit(),
+                2 => value.deinit(self._page),
+                else => @compileLog(@typeName(S) ++ " has an invalid deinit function"),
+            }
+        }
+    }
+
+    if (@hasField(S, "_proto")) {
+        self.destroyChain(value._proto, false, new_size, new_align);
+    } else {
+        // no proto so this is the head of the chain.
+        // we use this as the ptr to the start of the chain.
+        // and we have summed up the length.
+        assert(@hasDecl(S, "_prototype_root"));
+
+        const memory_ptr: [*]u8 = @ptrCast(@constCast(value));
+        const len = std.mem.alignForward(usize, new_size, new_align.toByteUnits());
+        allocator.rawFree(memory_ptr[0..len], new_align, @returnAddress());
+    }
+}
+
+pub fn createT(self: *Factory, comptime T: type) !*T {
+    const allocator = self._slab.allocator();
+    return try allocator.create(T);
+}
+
+pub fn create(self: *Factory, value: anytype) !*@TypeOf(value) {
+    const ptr = try self.createT(@TypeOf(value));
+    ptr.* = value;
+    return ptr;
+}
+
+fn unionInit(comptime T: type, value: anytype) T {
+    const V = @TypeOf(value);
+    const field_name = comptime unionFieldName(T, V);
+    return @unionInit(T, field_name, value);
+}
+
+// There can be friction between comptime and runtime. Comptime has to
+// account for all possible types, even if some runtime flow makes certain
+// cases impossible. At runtime, we always call `unionFieldName` with the
+// correct struct or pointer type. But at comptime time, `unionFieldName`
+// is called with both variants (S and *S). So we use reflect.Struct().
+// This only works because we never have a union with a field S and another
+// field *S.
+fn unionFieldName(comptime T: type, comptime V: type) []const u8 {
+    inline for (@typeInfo(T).@"union".fields) |field| {
+        if (reflect.Struct(field.type) == reflect.Struct(V)) {
+            return field.name;
+        }
+    }
+    @compileError(@typeName(V) ++ " is not a valid type for " ++ @typeName(T) ++ ".type");
+}

src/browser/Mime.zig

@@ -0,0 +1,530 @@
+// 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 Mime = @This();
+content_type: ContentType,
+params: []const u8 = "",
+// IANA defines max. charset value length as 40.
+// We keep 41 for null-termination since HTML parser expects in this format.
+charset: [41]u8 = default_charset,
+charset_len: usize = 5,
+
+/// String "UTF-8" continued by null characters.
+pub const default_charset = .{ 'U', 'T', 'F', '-', '8' } ++ .{0} ** 36;
+
+/// Mime with unknown Content-Type, empty params and empty charset.
+pub const unknown = Mime{ .content_type = .{ .unknown = {} } };
+
+pub const ContentTypeEnum = enum {
+    text_xml,
+    text_html,
+    text_javascript,
+    text_plain,
+    text_css,
+    application_json,
+    unknown,
+    other,
+};
+
+pub const ContentType = union(ContentTypeEnum) {
+    text_xml: void,
+    text_html: void,
+    text_javascript: void,
+    text_plain: void,
+    text_css: void,
+    application_json: void,
+    unknown: void,
+    other: struct { type: []const u8, sub_type: []const u8 },
+};
+
+pub fn contentTypeString(mime: *const Mime) []const u8 {
+    return switch (mime.content_type) {
+        .text_xml => "text/xml",
+        .text_html => "text/html",
+        .text_javascript => "application/javascript",
+        .text_plain => "text/plain",
+        .text_css => "text/css",
+        .application_json => "application/json",
+        else => "",
+    };
+}
+
+/// Returns the null-terminated charset value.
+pub fn charsetStringZ(mime: *const Mime) [:0]const u8 {
+    return mime.charset[0..mime.charset_len :0];
+}
+
+pub fn charsetString(mime: *const Mime) []const u8 {
+    return mime.charset[0..mime.charset_len];
+}
+
+/// Removes quotes of value if quotes are given.
+///
+/// Currently we don't validate the charset.
+/// See section 2.3 Naming Requirements:
+/// https://datatracker.ietf.org/doc/rfc2978/
+fn parseCharset(value: []const u8) error{ CharsetTooBig, Invalid }![]const u8 {
+    // Cannot be larger than 40.
+    // https://datatracker.ietf.org/doc/rfc2978/
+    if (value.len > 40) return error.CharsetTooBig;
+
+    // If the first char is a quote, look for a pair.
+    if (value[0] == '"') {
+        if (value.len < 3 or value[value.len - 1] != '"') {
+            return error.Invalid;
+        }
+
+        return value[1 .. value.len - 1];
+    }
+
+    // No quotes.
+    return value;
+}
+
+pub fn parse(input: []u8) !Mime {
+    if (input.len > 255) {
+        return error.TooBig;
+    }
+
+    // Zig's trim API is broken. The return type is always `[]const u8`,
+    // even if the input type is `[]u8`. @constCast is safe here.
+    var normalized = @constCast(std.mem.trim(u8, input, &std.ascii.whitespace));
+    _ = std.ascii.lowerString(normalized, normalized);
+
+    const content_type, const type_len = try parseContentType(normalized);
+    if (type_len >= normalized.len) {
+        return .{ .content_type = content_type };
+    }
+
+    const params = trimLeft(normalized[type_len..]);
+
+    var charset: [41]u8 = undefined;
+    var charset_len: usize = undefined;
+
+    var it = std.mem.splitScalar(u8, params, ';');
+    while (it.next()) |attr| {
+        const i = std.mem.indexOfScalarPos(u8, attr, 0, '=') orelse return error.Invalid;
+        const name = trimLeft(attr[0..i]);
+
+        const value = trimRight(attr[i + 1 ..]);
+        if (value.len == 0) {
+            return error.Invalid;
+        }
+
+        const attribute_name = std.meta.stringToEnum(enum {
+            charset,
+        }, name) orelse continue;
+
+        switch (attribute_name) {
+            .charset => {
+                if (value.len == 0) {
+                    break;
+                }
+
+                const attribute_value = try parseCharset(value);
+                @memcpy(charset[0..attribute_value.len], attribute_value);
+                // Null-terminate right after attribute value.
+                charset[attribute_value.len] = 0;
+                charset_len = attribute_value.len;
+            },
+        }
+    }
+
+    return .{
+        .params = params,
+        .charset = charset,
+        .charset_len = charset_len,
+        .content_type = content_type,
+    };
+}
+
+pub fn sniff(body: []const u8) ?Mime {
+    // 0x0C is form feed
+    const content = std.mem.trimLeft(u8, body, &.{ ' ', '\t', '\n', '\r', 0x0C });
+    if (content.len == 0) {
+        return null;
+    }
+
+    if (content[0] != '<') {
+        if (std.mem.startsWith(u8, content, &.{ 0xEF, 0xBB, 0xBF })) {
+            // UTF-8 BOM
+            return .{ .content_type = .{ .text_plain = {} } };
+        }
+        if (std.mem.startsWith(u8, content, &.{ 0xFE, 0xFF })) {
+            // UTF-16 big-endian BOM
+            return .{ .content_type = .{ .text_plain = {} } };
+        }
+        if (std.mem.startsWith(u8, content, &.{ 0xFF, 0xFE })) {
+            // UTF-16 little-endian BOM
+            return .{ .content_type = .{ .text_plain = {} } };
+        }
+        return null;
+    }
+
+    // The longest prefix we have is "<!DOCTYPE HTML ", 15 bytes. If we're
+    // here, we already know content[0] == '<', so we can skip that. So 14
+    // bytes.
+
+    // +1 because we don't need the leading '<'
+    var buf: [14]u8 = undefined;
+
+    const stripped = content[1..];
+    const prefix_len = @min(stripped.len, buf.len);
+    const prefix = std.ascii.lowerString(&buf, stripped[0..prefix_len]);
+
+    // we already know it starts with a <
+    const known_prefixes = [_]struct { []const u8, ContentType }{
+        .{ "!doctype html", .{ .text_html = {} } },
+        .{ "html", .{ .text_html = {} } },
+        .{ "script", .{ .text_html = {} } },
+        .{ "iframe", .{ .text_html = {} } },
+        .{ "h1", .{ .text_html = {} } },
+        .{ "div", .{ .text_html = {} } },
+        .{ "font", .{ .text_html = {} } },
+        .{ "table", .{ .text_html = {} } },
+        .{ "a", .{ .text_html = {} } },
+        .{ "style", .{ .text_html = {} } },
+        .{ "title", .{ .text_html = {} } },
+        .{ "b", .{ .text_html = {} } },
+        .{ "body", .{ .text_html = {} } },
+        .{ "br", .{ .text_html = {} } },
+        .{ "p", .{ .text_html = {} } },
+        .{ "!--", .{ .text_html = {} } },
+        .{ "xml", .{ .text_xml = {} } },
+    };
+    inline for (known_prefixes) |kp| {
+        const known_prefix = kp.@"0";
+        if (std.mem.startsWith(u8, prefix, known_prefix) and prefix.len > known_prefix.len) {
+            const next = prefix[known_prefix.len];
+            // a "tag-terminating-byte"
+            if (next == ' ' or next == '>') {
+                return .{ .content_type = kp.@"1" };
+            }
+        }
+    }
+
+    return null;
+}
+
+pub fn isHTML(self: *const Mime) bool {
+    return self.content_type == .text_html;
+}
+
+// we expect value to be lowercase
+fn parseContentType(value: []const u8) !struct { ContentType, usize } {
+    const end = std.mem.indexOfScalarPos(u8, value, 0, ';') orelse value.len;
+    const type_name = trimRight(value[0..end]);
+    const attribute_start = end + 1;
+
+    if (std.meta.stringToEnum(enum {
+        @"text/xml",
+        @"text/html",
+        @"text/css",
+        @"text/plain",
+
+        @"text/javascript",
+        @"application/javascript",
+        @"application/x-javascript",
+
+        @"application/json",
+    }, type_name)) |known_type| {
+        const ct: ContentType = switch (known_type) {
+            .@"text/xml" => .{ .text_xml = {} },
+            .@"text/html" => .{ .text_html = {} },
+            .@"text/javascript", .@"application/javascript", .@"application/x-javascript" => .{ .text_javascript = {} },
+            .@"text/plain" => .{ .text_plain = {} },
+            .@"text/css" => .{ .text_css = {} },
+            .@"application/json" => .{ .application_json = {} },
+        };
+        return .{ ct, attribute_start };
+    }
+
+    const separator = std.mem.indexOfScalarPos(u8, type_name, 0, '/') orelse return error.Invalid;
+
+    const main_type = value[0..separator];
+    const sub_type = trimRight(value[separator + 1 .. end]);
+
+    if (main_type.len == 0 or validType(main_type) == false) {
+        return error.Invalid;
+    }
+    if (sub_type.len == 0 or validType(sub_type) == false) {
+        return error.Invalid;
+    }
+
+    return .{ .{ .other = .{
+        .type = main_type,
+        .sub_type = sub_type,
+    } }, attribute_start };
+}
+
+const VALID_CODEPOINTS = blk: {
+    var v: [256]bool = undefined;
+    for (0..256) |i| {
+        v[i] = std.ascii.isAlphanumeric(i);
+    }
+    for ("!#$%&\\*+-.^'_`|~") |b| {
+        v[b] = true;
+    }
+    break :blk v;
+};
+
+fn validType(value: []const u8) bool {
+    for (value) |b| {
+        if (VALID_CODEPOINTS[b] == false) {
+            return false;
+        }
+    }
+    return true;
+}
+
+fn trimLeft(s: []const u8) []const u8 {
+    return std.mem.trimLeft(u8, s, &std.ascii.whitespace);
+}
+
+fn trimRight(s: []const u8) []const u8 {
+    return std.mem.trimRight(u8, s, &std.ascii.whitespace);
+}
+
+const testing = @import("../testing.zig");
+test "Mime: invalid" {
+    defer testing.reset();
+
+    const invalids = [_][]const u8{
+        "",
+        "text",
+        "text /html",
+        "text/ html",
+        "text / html",
+        "text/html other",
+        "text/html; x",
+        "text/html; x=",
+        "text/html; x=  ",
+        "text/html; = ",
+        "text/html;=",
+        "text/html; charset=\"\"",
+        "text/html; charset=\"",
+        "text/html; charset=\"\\",
+    };
+
+    for (invalids) |invalid| {
+        const mutable_input = try testing.arena_allocator.dupe(u8, invalid);
+        try testing.expectError(error.Invalid, Mime.parse(mutable_input));
+    }
+}
+
+test "Mime: parse common" {
+    defer testing.reset();
+
+    try expect(.{ .content_type = .{ .text_xml = {} } }, "text/xml");
+    try expect(.{ .content_type = .{ .text_html = {} } }, "text/html");
+    try expect(.{ .content_type = .{ .text_plain = {} } }, "text/plain");
+
+    try expect(.{ .content_type = .{ .text_xml = {} } }, "text/xml;");
+    try expect(.{ .content_type = .{ .text_html = {} } }, "text/html;");
+    try expect(.{ .content_type = .{ .text_plain = {} } }, "text/plain;");
+
+    try expect(.{ .content_type = .{ .text_xml = {} } }, "  \ttext/xml");
+    try expect(.{ .content_type = .{ .text_html = {} } }, "text/html   ");
+    try expect(.{ .content_type = .{ .text_plain = {} } }, "text/plain \t\t");
+
+    try expect(.{ .content_type = .{ .text_xml = {} } }, "TEXT/xml");
+    try expect(.{ .content_type = .{ .text_html = {} } }, "text/Html");
+    try expect(.{ .content_type = .{ .text_plain = {} } }, "TEXT/PLAIN");
+
+    try expect(.{ .content_type = .{ .text_xml = {} } }, " TeXT/xml");
+    try expect(.{ .content_type = .{ .text_html = {} } }, "teXt/HtML  ;");
+    try expect(.{ .content_type = .{ .text_plain = {} } }, "tExT/PlAiN;");
+
+    try expect(.{ .content_type = .{ .text_javascript = {} } }, "text/javascript");
+    try expect(.{ .content_type = .{ .text_javascript = {} } }, "Application/JavaScript");
+    try expect(.{ .content_type = .{ .text_javascript = {} } }, "application/x-javascript");
+
+    try expect(.{ .content_type = .{ .application_json = {} } }, "application/json");
+    try expect(.{ .content_type = .{ .text_css = {} } }, "text/css");
+}
+
+test "Mime: parse uncommon" {
+    defer testing.reset();
+
+    const text_csv = Expectation{
+        .content_type = .{ .other = .{ .type = "text", .sub_type = "csv" } },
+    };
+    try expect(text_csv, "text/csv");
+    try expect(text_csv, "text/csv;");
+    try expect(text_csv, "  text/csv\t  ");
+    try expect(text_csv, "  text/csv\t  ;");
+
+    try expect(
+        .{ .content_type = .{ .other = .{ .type = "text", .sub_type = "csv" } } },
+        "Text/CSV",
+    );
+}
+
+test "Mime: parse charset" {
+    defer testing.reset();
+
+    try expect(.{
+        .content_type = .{ .text_xml = {} },
+        .charset = "utf-8",
+        .params = "charset=utf-8",
+    }, "text/xml; charset=utf-8");
+
+    try expect(.{
+        .content_type = .{ .text_xml = {} },
+        .charset = "utf-8",
+        .params = "charset=\"utf-8\"",
+    }, "text/xml;charset=\"UTF-8\"");
+
+    try expect(.{
+        .content_type = .{ .text_html = {} },
+        .charset = "iso-8859-1",
+        .params = "charset=\"iso-8859-1\"",
+    }, "text/html; charset=\"iso-8859-1\"");
+
+    try expect(.{
+        .content_type = .{ .text_html = {} },
+        .charset = "iso-8859-1",
+        .params = "charset=\"iso-8859-1\"",
+    }, "text/html; charset=\"ISO-8859-1\"");
+
+    try expect(.{
+        .content_type = .{ .text_xml = {} },
+        .charset = "custom-non-standard-charset-value",
+        .params = "charset=\"custom-non-standard-charset-value\"",
+    }, "text/xml;charset=\"custom-non-standard-charset-value\"");
+}
+
+test "Mime: isHTML" {
+    defer testing.reset();
+
+    const assert = struct {
+        fn assert(expected: bool, input: []const u8) !void {
+            const mutable_input = try testing.arena_allocator.dupe(u8, input);
+            var mime = try Mime.parse(mutable_input);
+            try testing.expectEqual(expected, mime.isHTML());
+        }
+    }.assert;
+    try assert(true, "text/html");
+    try assert(true, "text/html;");
+    try assert(true, "text/html; charset=utf-8");
+    try assert(false, "text/htm"); // htm not html
+    try assert(false, "text/plain");
+    try assert(false, "over/9000");
+}
+
+test "Mime: sniff" {
+    try testing.expectEqual(null, Mime.sniff(""));
+    try testing.expectEqual(null, Mime.sniff("<htm"));
+    try testing.expectEqual(null, Mime.sniff("<html!"));
+    try testing.expectEqual(null, Mime.sniff("<a_"));
+    try testing.expectEqual(null, Mime.sniff("<!doctype html"));
+    try testing.expectEqual(null, Mime.sniff("<!doctype  html>"));
+    try testing.expectEqual(null, Mime.sniff("\n  <!doctype  html>"));
+    try testing.expectEqual(null, Mime.sniff("\n \t <font/>"));
+
+    const expectHTML = struct {
+        fn expect(input: []const u8) !void {
+            try testing.expectEqual(.text_html, std.meta.activeTag(Mime.sniff(input).?.content_type));
+        }
+    }.expect;
+
+    try expectHTML("<!doctype html ");
+    try expectHTML("\n  \t    <!DOCTYPE HTML ");
+
+    try expectHTML("<html ");
+    try expectHTML("\n  \t    <HtmL> even more stufff");
+
+    try expectHTML("<script>");
+    try expectHTML("\n  \t    <SCRIpt >alert(document.cookies)</script>");
+
+    try expectHTML("<iframe>");
+    try expectHTML(" \t    <ifRAME >");
+
+    try expectHTML("<h1>");
+    try expectHTML("  <H1>");
+
+    try expectHTML("<div>");
+    try expectHTML("\n\r\r  <DiV>");
+
+    try expectHTML("<font>");
+    try expectHTML("  <fonT>");
+
+    try expectHTML("<table>");
+    try expectHTML("\t\t<TAblE>");
+
+    try expectHTML("<a>");
+    try expectHTML("\n\n<A>");
+
+    try expectHTML("<style>");
+    try expectHTML("    \n\t <STyLE>");
+
+    try expectHTML("<title>");
+    try expectHTML("    \n\t <TITLE>");
+
+    try expectHTML("<b>");
+    try expectHTML("    \n\t <B>");
+
+    try expectHTML("<body>");
+    try expectHTML("    \n\t <BODY>");
+
+    try expectHTML("<br>");
+    try expectHTML("    \n\t <BR>");
+
+    try expectHTML("<p>");
+    try expectHTML("    \n\t <P>");
+
+    try expectHTML("<!-->");
+    try expectHTML("    \n\t <!-->");
+}
+
+const Expectation = struct {
+    content_type: Mime.ContentType,
+    params: []const u8 = "",
+    charset: ?[]const u8 = null,
+};
+
+fn expect(expected: Expectation, input: []const u8) !void {
+    const mutable_input = try testing.arena_allocator.dupe(u8, input);
+
+    const actual = try Mime.parse(mutable_input);
+    try testing.expectEqual(
+        std.meta.activeTag(expected.content_type),
+        std.meta.activeTag(actual.content_type),
+    );
+
+    switch (expected.content_type) {
+        .other => |e| {
+            const a = actual.content_type.other;
+            try testing.expectEqual(e.type, a.type);
+            try testing.expectEqual(e.sub_type, a.sub_type);
+        },
+        else => {}, // already asserted above
+    }
+
+    try testing.expectEqual(expected.params, actual.params);
+
+    if (expected.charset) |ec| {
+        // We remove the null characters for testing purposes here.
+        try testing.expectEqual(ec, actual.charsetString());
+    } else {
+        const m: Mime = .unknown;
+        try testing.expectEqual(m.charsetStringZ(), actual.charsetStringZ());
+    }
+}

src/browser/Scheduler.zig

@@ -0,0 +1,117 @@
+// 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 builtin = @import("builtin");
+
+const js = @import("js/js.zig");
+const log = @import("../log.zig");
+const milliTimestamp = @import("../datetime.zig").milliTimestamp;
+
+const IS_DEBUG = builtin.mode == .Debug;
+
+const Queue = std.PriorityQueue(Task, void, struct {
+    fn compare(_: void, a: Task, b: Task) std.math.Order {
+        const time_order = std.math.order(a.run_at, b.run_at);
+        if (time_order != .eq) return time_order;
+        // Break ties with sequence number to maintain FIFO order
+        return std.math.order(a.sequence, b.sequence);
+    }
+}.compare);
+
+const Scheduler = @This();
+
+_sequence: u64,
+low_priority: Queue,
+high_priority: Queue,
+
+pub fn init(allocator: std.mem.Allocator) Scheduler {
+    return .{
+        ._sequence = 0,
+        .low_priority = Queue.init(allocator, {}),
+        .high_priority = Queue.init(allocator, {}),
+    };
+}
+
+const AddOpts = struct {
+    name: []const u8 = "",
+    low_priority: bool = false,
+};
+pub fn add(self: *Scheduler, ctx: *anyopaque, cb: Callback, run_in_ms: u32, opts: AddOpts) !void {
+    if (comptime IS_DEBUG) {
+        log.debug(.scheduler, "scheduler.add", .{ .name = opts.name, .run_in_ms = run_in_ms, .low_priority = opts.low_priority });
+    }
+    var queue = if (opts.low_priority) &self.low_priority else &self.high_priority;
+    const seq = self._sequence + 1;
+    self._sequence = seq;
+    return queue.add(.{
+        .ctx = ctx,
+        .callback = cb,
+        .sequence = seq,
+        .name = opts.name,
+        .run_at = milliTimestamp(.monotonic) + run_in_ms,
+    });
+}
+
+pub fn run(self: *Scheduler) !?u64 {
+    _ = try self.runQueue(&self.low_priority);
+    return self.runQueue(&self.high_priority);
+}
+
+fn runQueue(self: *Scheduler, queue: *Queue) !?u64 {
+    if (queue.count() == 0) {
+        return null;
+    }
+
+    const now = milliTimestamp(.monotonic);
+
+    while (queue.peek()) |*task_| {
+        if (task_.run_at > now) {
+            return @intCast(task_.run_at - now);
+        }
+        var task = queue.remove();
+        if (comptime IS_DEBUG) {
+            log.debug(.scheduler, "scheduler.runTask", .{ .name = task.name });
+        }
+
+        const repeat_in_ms = task.callback(task.ctx) catch |err| {
+            log.warn(.scheduler, "task.callback", .{ .name = task.name, .err = err });
+            continue;
+        };
+
+        if (repeat_in_ms) |ms| {
+            // Task cannot be repeated immediately, and they should know that
+            if (comptime IS_DEBUG) {
+                std.debug.assert(ms != 0);
+            }
+            task.run_at = now + ms;
+            try self.low_priority.add(task);
+        }
+    }
+    return null;
+}
+
+const Task = struct {
+    run_at: u64,
+    sequence: u64,
+    ctx: *anyopaque,
+    name: []const u8,
+    callback: Callback,
+};
+
+const Callback = *const fn (ctx: *anyopaque) anyerror!?u32;

src/browser/Session.zig

@@ -0,0 +1,176 @@
+// 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 lp = @import("lightpanda");
+
+const log = @import("../log.zig");
+
+const js = @import("js/js.zig");
+const storage = @import("webapi/storage/storage.zig");
+const Navigation = @import("webapi/navigation/Navigation.zig");
+const History = @import("webapi/History.zig");
+
+const Page = @import("Page.zig");
+const Browser = @import("Browser.zig");
+
+const Allocator = std.mem.Allocator;
+const IS_DEBUG = @import("builtin").mode == .Debug;
+
+// Session is like a browser's tab.
+// It owns the js env and the loader for all the pages of the session.
+// You can create successively multiple pages for a session, but you must
+// deinit a page before running another one.
+const Session = @This();
+
+browser: *Browser,
+
+// Used to create our Inspector and in the BrowserContext.
+arena: Allocator,
+
+// The page's arena is unsuitable for data that has to existing while
+// navigating from one page to another. For example, if we're clicking
+// on an HREF, the URL exists in the original page (where the click
+// originated) but also has to exist in the new page.
+// While we could use the Session's arena, this could accumulate a lot of
+// memory if we do many navigation events. The `transfer_arena` is meant to
+// bridge the gap: existing long enough to store any data needed to end one
+// page and start another.
+transfer_arena: Allocator,
+
+executor: js.ExecutionWorld,
+cookie_jar: storage.Cookie.Jar,
+storage_shed: storage.Shed,
+
+history: History,
+navigation: Navigation,
+
+page: ?*Page = null,
+
+pub fn init(self: *Session, browser: *Browser) !void {
+    var executor = try browser.env.newExecutionWorld();
+    errdefer executor.deinit();
+
+    const allocator = browser.app.allocator;
+    const session_allocator = browser.session_arena.allocator();
+
+    self.* = .{
+        .browser = browser,
+        .executor = executor,
+        .storage_shed = .{},
+        .arena = session_allocator,
+        .cookie_jar = storage.Cookie.Jar.init(allocator),
+        .navigation = .{},
+        .history = .{},
+        .transfer_arena = browser.transfer_arena.allocator(),
+    };
+}
+
+pub fn deinit(self: *Session) void {
+    if (self.page != null) {
+        self.removePage();
+    }
+    self.cookie_jar.deinit();
+    self.storage_shed.deinit(self.browser.app.allocator);
+    self.executor.deinit();
+}
+
+// NOTE: the caller is not the owner of the returned value,
+// the pointer on Page is just returned as a convenience
+pub fn createPage(self: *Session) !*Page {
+    lp.assert(self.page == null, "Session.createPage - page not null", .{});
+
+    const page_arena = &self.browser.page_arena;
+    _ = page_arena.reset(.{ .retain_with_limit = 1 * 1024 * 1024 });
+
+    self.page = try Page.init(page_arena.allocator(), self.browser.call_arena.allocator(), self);
+    const page = self.page.?;
+
+    // Creates a new NavigationEventTarget for this page.
+    try self.navigation.onNewPage(page);
+
+    if (comptime IS_DEBUG) {
+        log.debug(.browser, "create page", .{});
+    }
+    // start JS env
+    // Inform CDP the main page has been created such that additional context for other Worlds can be created as well
+    self.browser.notification.dispatch(.page_created, page);
+
+    return page;
+}
+
+pub fn removePage(self: *Session) void {
+    // Inform CDP the page is going to be removed, allowing other worlds to remove themselves before the main one
+    self.browser.notification.dispatch(.page_remove, .{});
+    lp.assert(self.page != null, "Session.removePage - page is null", .{});
+
+    self.page.?.deinit();
+    self.page = null;
+
+    self.navigation.onRemovePage();
+
+    if (comptime IS_DEBUG) {
+        log.debug(.browser, "remove page", .{});
+    }
+}
+
+pub fn currentPage(self: *Session) ?*Page {
+    return self.page orelse return null;
+}
+
+pub const WaitResult = enum {
+    done,
+    no_page,
+    cdp_socket,
+    navigate,
+};
+
+pub fn wait(self: *Session, wait_ms: u32) WaitResult {
+    while (true) {
+        const page = self.page orelse return .no_page;
+        switch (page.wait(wait_ms)) {
+            .navigate => self.processScheduledNavigation() catch return .done,
+            else => |result| return result,
+        }
+        // if we've successfull navigated, we'll give the new page another
+        // page.wait(wait_ms)
+    }
+}
+
+fn processScheduledNavigation(self: *Session) !void {
+    const qn = self.page.?._queued_navigation.?;
+    defer _ = self.browser.transfer_arena.reset(.{ .retain_with_limit = 8 * 1024 });
+
+    // This was already aborted on the page, but it would be pretty
+    // bad if old requests went to the new page, so let's make double sure
+    self.browser.http_client.abort();
+    self.removePage();
+
+    const page = self.createPage() catch |err| {
+        log.err(.browser, "queued navigation page error", .{
+            .err = err,
+            .url = qn.url,
+        });
+        return err;
+    };
+
+    page.navigate(qn.url, qn.opts) catch |err| {
+        log.err(.browser, "queued navigation error", .{ .err = err, .url = qn.url });
+        return err;
+    };
+}

src/browser/URL.zig

@@ -0,0 +1,781 @@
+// 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 lp = @import("lightpanda");
+const Allocator = std.mem.Allocator;
+
+const ResolveOpts = struct {
+    always_dupe: bool = false,
+};
+// path is anytype, so that it can be used with both []const u8 and [:0]const u8
+pub fn resolve(allocator: Allocator, base: [:0]const u8, path: anytype, comptime opts: ResolveOpts) ![:0]const u8 {
+    const PT = @TypeOf(path);
+    if (base.len == 0 or isCompleteHTTPUrl(path)) {
+        if (comptime opts.always_dupe or !isNullTerminated(PT)) {
+            return allocator.dupeZ(u8, path);
+        }
+        return path;
+    }
+
+    if (path.len == 0) {
+        if (comptime opts.always_dupe) {
+            return allocator.dupeZ(u8, base);
+        }
+        return base;
+    }
+
+    if (path[0] == '?') {
+        const base_path_end = std.mem.indexOfAny(u8, base, "?#") orelse base.len;
+        return std.mem.joinZ(allocator, "", &.{ base[0..base_path_end], path });
+    }
+    if (path[0] == '#') {
+        const base_fragment_start = std.mem.indexOfScalar(u8, base, '#') orelse base.len;
+        return std.mem.joinZ(allocator, "", &.{ base[0..base_fragment_start], path });
+    }
+
+    if (std.mem.startsWith(u8, path, "//")) {
+        // network-path reference
+        const index = std.mem.indexOfScalar(u8, base, ':') orelse {
+            if (comptime isNullTerminated(PT)) {
+                return path;
+            }
+            return allocator.dupeZ(u8, path);
+        };
+        const protocol = base[0 .. index + 1];
+        return std.mem.joinZ(allocator, "", &.{ protocol, path });
+    }
+
+    const scheme_end = std.mem.indexOf(u8, base, "://");
+    const authority_start = if (scheme_end) |end| end + 3 else 0;
+    const path_start = std.mem.indexOfScalarPos(u8, base, authority_start, '/') orelse base.len;
+
+    if (path[0] == '/') {
+        return std.mem.joinZ(allocator, "", &.{ base[0..path_start], path });
+    }
+
+    var normalized_base: []const u8 = base[0..path_start];
+    if (path_start < base.len) {
+        if (std.mem.lastIndexOfScalar(u8, base[path_start + 1 ..], '/')) |pos| {
+            normalized_base = base[0 .. path_start + 1 + pos];
+        }
+    }
+
+    // trailing space so that we always have space to append the null terminator
+    // and so that we can compare the next two characters without needing to length check
+    var out = try std.mem.join(allocator, "", &.{ normalized_base, "/", path, "  " });
+    const end = out.len - 2;
+
+    const path_marker = path_start + 1;
+
+    // Strip out ./ and ../. This is done in-place, because doing so can
+    // only ever make `out` smaller. After this, `out` cannot be freed by
+    // an allocator, which is ok, because we expect allocator to be an arena.
+    var in_i: usize = 0;
+    var out_i: usize = 0;
+    while (in_i < end) {
+        if (out[in_i] == '.' and (out_i == 0 or out[out_i - 1] == '/')) {
+            if (out[in_i + 1] == '/') { // always safe, because we added a whitespace
+                // /./
+                in_i += 2;
+                continue;
+            }
+            if (out[in_i + 1] == '.' and out[in_i + 2] == '/') { // always safe, because we added two whitespaces
+                // /../
+                if (out_i > path_marker) {
+                    // go back before the /
+                    out_i -= 2;
+                    while (out_i > 1 and out[out_i - 1] != '/') {
+                        out_i -= 1;
+                    }
+                } else {
+                    // if out_i == path_marker, than we've reached the start of
+                    // the path. We can't ../ any more. E.g.:
+                    //    http://www.example.com/../hello.
+                    // You might think that's an error, but, at least with
+                    //     new URL('../hello', 'http://www.example.com/')
+                    // it just ignores the extra ../
+                }
+                in_i += 3;
+                continue;
+            }
+            if (in_i == end - 1) {
+                // ignore trailing dot
+                break;
+            }
+        }
+
+        const c = out[in_i];
+        out[out_i] = c;
+        in_i += 1;
+        out_i += 1;
+    }
+
+    // we always have an extra space
+    out[out_i] = 0;
+    return out[0..out_i :0];
+}
+
+fn isNullTerminated(comptime value: type) bool {
+    return @typeInfo(value).pointer.sentinel_ptr != null;
+}
+
+pub fn isCompleteHTTPUrl(url: []const u8) bool {
+    if (url.len < 3) { // Minimum is "x://"
+        return false;
+    }
+
+    // very common case
+    if (url[0] == '/') {
+        return false;
+    }
+
+    // Check if there's a scheme (protocol) ending with ://
+    const colon_pos = std.mem.indexOfScalar(u8, url, ':') orelse return false;
+
+    // Check if it's followed by //
+    if (colon_pos + 2 >= url.len or url[colon_pos + 1] != '/' or url[colon_pos + 2] != '/') {
+        return false;
+    }
+
+    // Validate that everything before the colon is a valid scheme
+    // A scheme must start with a letter and contain only letters, digits, +, -, .
+    if (colon_pos == 0) {
+        return false;
+    }
+
+    const scheme = url[0..colon_pos];
+    if (!std.ascii.isAlphabetic(scheme[0])) {
+        return false;
+    }
+
+    for (scheme[1..]) |c| {
+        if (!std.ascii.isAlphanumeric(c) and c != '+' and c != '-' and c != '.') {
+            return false;
+        }
+    }
+
+    return true;
+}
+
+pub fn getUsername(raw: [:0]const u8) []const u8 {
+    const user_info = getUserInfo(raw) orelse return "";
+    const pos = std.mem.indexOfScalarPos(u8, user_info, 0, ':') orelse return user_info;
+    return user_info[0..pos];
+}
+
+pub fn getPassword(raw: [:0]const u8) []const u8 {
+    const user_info = getUserInfo(raw) orelse return "";
+    const pos = std.mem.indexOfScalarPos(u8, user_info, 0, ':') orelse return "";
+    return user_info[pos + 1 ..];
+}
+
+pub fn getPathname(raw: [:0]const u8) []const u8 {
+    const protocol_end = std.mem.indexOf(u8, raw, "://") orelse 0;
+    const path_start = std.mem.indexOfScalarPos(u8, raw, if (protocol_end > 0) protocol_end + 3 else 0, '/') orelse raw.len;
+
+    const query_or_hash_start = std.mem.indexOfAnyPos(u8, raw, path_start, "?#") orelse raw.len;
+
+    if (path_start >= query_or_hash_start) {
+        if (std.mem.indexOf(u8, raw, "://") != null) return "/";
+        return "";
+    }
+
+    return raw[path_start..query_or_hash_start];
+}
+
+pub fn getProtocol(raw: [:0]const u8) []const u8 {
+    const pos = std.mem.indexOfScalarPos(u8, raw, 0, ':') orelse return "";
+    return raw[0 .. pos + 1];
+}
+
+pub fn isHTTPS(raw: [:0]const u8) bool {
+    return std.mem.startsWith(u8, raw, "https:");
+}
+
+pub fn getHostname(raw: [:0]const u8) []const u8 {
+    const host = getHost(raw);
+    const pos = std.mem.lastIndexOfScalar(u8, host, ':') orelse return host;
+    return host[0..pos];
+}
+
+pub fn getPort(raw: [:0]const u8) []const u8 {
+    const host = getHost(raw);
+    const pos = std.mem.lastIndexOfScalar(u8, host, ':') orelse return "";
+
+    if (pos + 1 >= host.len) {
+        return "";
+    }
+
+    for (host[pos + 1 ..]) |c| {
+        if (c < '0' or c > '9') {
+            return "";
+        }
+    }
+
+    return host[pos + 1 ..];
+}
+
+pub fn getSearch(raw: [:0]const u8) []const u8 {
+    const pos = std.mem.indexOfScalarPos(u8, raw, 0, '?') orelse return "";
+    const query_part = raw[pos..];
+
+    if (std.mem.indexOfScalarPos(u8, query_part, 0, '#')) |fragment_start| {
+        return query_part[0..fragment_start];
+    }
+
+    return query_part;
+}
+
+pub fn getHash(raw: [:0]const u8) []const u8 {
+    const start = std.mem.indexOfScalarPos(u8, raw, 0, '#') orelse return "";
+    return raw[start..];
+}
+
+pub fn getOrigin(allocator: Allocator, raw: [:0]const u8) !?[]const u8 {
+    const scheme_end = std.mem.indexOf(u8, raw, "://") orelse return null;
+
+    // Only HTTP and HTTPS schemes have origins
+    const protocol = raw[0 .. scheme_end + 1];
+    if (!std.mem.eql(u8, protocol, "http:") and !std.mem.eql(u8, protocol, "https:")) {
+        return null;
+    }
+
+    var authority_start = scheme_end + 3;
+    const has_user_info = if (std.mem.indexOf(u8, raw[authority_start..], "@")) |pos| blk: {
+        authority_start += pos + 1;
+        break :blk true;
+    } else false;
+
+    // Find end of authority (start of path/query/fragment or end of string)
+    const authority_end_relative = std.mem.indexOfAny(u8, raw[authority_start..], "/?#");
+    const authority_end = if (authority_end_relative) |end|
+        authority_start + end
+    else
+        raw.len;
+
+    // Check for port in the host:port section
+    const host_part = raw[authority_start..authority_end];
+    if (std.mem.lastIndexOfScalar(u8, host_part, ':')) |colon_pos_in_host| {
+        const port = host_part[colon_pos_in_host + 1 ..];
+
+        // Validate it's actually a port (all digits)
+        for (port) |c| {
+            if (c < '0' or c > '9') {
+                // Not a port (probably IPv6)
+                if (has_user_info) {
+                    // Need to allocate to exclude user info
+                    return try std.fmt.allocPrint(allocator, "{s}//{s}", .{ raw[0 .. scheme_end + 1], host_part });
+                }
+                // Can return a slice
+                return raw[0..authority_end];
+            }
+        }
+
+        // Check if it's a default port that should be excluded from origin
+        const is_default =
+            (std.mem.eql(u8, protocol, "http:") and std.mem.eql(u8, port, "80")) or
+            (std.mem.eql(u8, protocol, "https:") and std.mem.eql(u8, port, "443"));
+
+        if (is_default or has_user_info) {
+            // Need to allocate to build origin without default port and/or user info
+            const hostname = host_part[0..colon_pos_in_host];
+            if (is_default) {
+                return try std.fmt.allocPrint(allocator, "{s}//{s}", .{ protocol, hostname });
+            } else {
+                return try std.fmt.allocPrint(allocator, "{s}//{s}", .{ protocol, host_part });
+            }
+        }
+    } else if (has_user_info) {
+        // No port, but has user info - need to allocate
+        return try std.fmt.allocPrint(allocator, "{s}//{s}", .{ raw[0 .. scheme_end + 1], host_part });
+    }
+
+    // Common case: no user info, no default port - return slice (zero allocation!)
+    return raw[0..authority_end];
+}
+
+fn getUserInfo(raw: [:0]const u8) ?[]const u8 {
+    const scheme_end = std.mem.indexOf(u8, raw, "://") orelse return null;
+    const authority_start = scheme_end + 3;
+
+    const pos = std.mem.indexOfScalar(u8, raw[authority_start..], '@') orelse return null;
+    const path_start = std.mem.indexOfScalarPos(u8, raw, authority_start, '/') orelse raw.len;
+
+    const full_pos = authority_start + pos;
+    if (full_pos < path_start) {
+        return raw[authority_start..full_pos];
+    }
+
+    return null;
+}
+
+pub fn getHost(raw: [:0]const u8) []const u8 {
+    const scheme_end = std.mem.indexOf(u8, raw, "://") orelse return "";
+
+    var authority_start = scheme_end + 3;
+    if (std.mem.indexOf(u8, raw[authority_start..], "@")) |pos| {
+        authority_start += pos + 1;
+    }
+
+    const authority = raw[authority_start..];
+    const path_start = std.mem.indexOfAny(u8, authority, "/?#") orelse return authority;
+    return authority[0..path_start];
+}
+
+// Returns true if these two URLs point to the same document.
+pub fn eqlDocument(first: [:0]const u8, second: [:0]const u8) bool {
+    // First '#' signifies the start of the fragment.
+    const first_hash_index = std.mem.indexOfScalar(u8, first, '#') orelse first.len;
+    const second_hash_index = std.mem.indexOfScalar(u8, second, '#') orelse second.len;
+    return std.mem.eql(u8, first[0..first_hash_index], second[0..second_hash_index]);
+}
+
+// Helper function to build a URL from components
+pub fn buildUrl(
+    allocator: Allocator,
+    protocol: []const u8,
+    host: []const u8,
+    pathname: []const u8,
+    search: []const u8,
+    hash: []const u8,
+) ![:0]const u8 {
+    return std.fmt.allocPrintSentinel(allocator, "{s}//{s}{s}{s}{s}", .{
+        protocol,
+        host,
+        pathname,
+        search,
+        hash,
+    }, 0);
+}
+
+pub fn setProtocol(current: [:0]const u8, value: []const u8, allocator: Allocator) ![:0]const u8 {
+    const host = getHost(current);
+    const pathname = getPathname(current);
+    const search = getSearch(current);
+    const hash = getHash(current);
+
+    // Add : suffix if not present
+    const protocol = if (value.len > 0 and value[value.len - 1] != ':')
+        try std.fmt.allocPrint(allocator, "{s}:", .{value})
+    else
+        value;
+
+    return buildUrl(allocator, protocol, host, pathname, search, hash);
+}
+
+pub fn setHost(current: [:0]const u8, value: []const u8, allocator: Allocator) ![:0]const u8 {
+    const protocol = getProtocol(current);
+    const pathname = getPathname(current);
+    const search = getSearch(current);
+    const hash = getHash(current);
+
+    // Check if the host includes a port
+    const colon_pos = std.mem.lastIndexOfScalar(u8, value, ':');
+    const clean_host = if (colon_pos) |pos| blk: {
+        const port_str = value[pos + 1 ..];
+        // Remove default ports
+        if (std.mem.eql(u8, protocol, "https:") and std.mem.eql(u8, port_str, "443")) {
+            break :blk value[0..pos];
+        }
+        if (std.mem.eql(u8, protocol, "http:") and std.mem.eql(u8, port_str, "80")) {
+            break :blk value[0..pos];
+        }
+        break :blk value;
+    } else value;
+
+    return buildUrl(allocator, protocol, clean_host, pathname, search, hash);
+}
+
+pub fn setHostname(current: [:0]const u8, value: []const u8, allocator: Allocator) ![:0]const u8 {
+    const current_port = getPort(current);
+    const new_host = if (current_port.len > 0)
+        try std.fmt.allocPrint(allocator, "{s}:{s}", .{ value, current_port })
+    else
+        value;
+
+    return setHost(current, new_host, allocator);
+}
+
+pub fn setPort(current: [:0]const u8, value: ?[]const u8, allocator: Allocator) ![:0]const u8 {
+    const hostname = getHostname(current);
+    const protocol = getProtocol(current);
+
+    // Handle null or default ports
+    const new_host = if (value) |port_str| blk: {
+        if (port_str.len == 0) {
+            break :blk hostname;
+        }
+        // Check if this is a default port for the protocol
+        if (std.mem.eql(u8, protocol, "https:") and std.mem.eql(u8, port_str, "443")) {
+            break :blk hostname;
+        }
+        if (std.mem.eql(u8, protocol, "http:") and std.mem.eql(u8, port_str, "80")) {
+            break :blk hostname;
+        }
+        break :blk try std.fmt.allocPrint(allocator, "{s}:{s}", .{ hostname, port_str });
+    } else hostname;
+
+    return setHost(current, new_host, allocator);
+}
+
+pub fn setPathname(current: [:0]const u8, value: []const u8, allocator: Allocator) ![:0]const u8 {
+    const protocol = getProtocol(current);
+    const host = getHost(current);
+    const search = getSearch(current);
+    const hash = getHash(current);
+
+    // Add / prefix if not present and value is not empty
+    const pathname = if (value.len > 0 and value[0] != '/')
+        try std.fmt.allocPrint(allocator, "/{s}", .{value})
+    else
+        value;
+
+    return buildUrl(allocator, protocol, host, pathname, search, hash);
+}
+
+pub fn setSearch(current: [:0]const u8, value: []const u8, allocator: Allocator) ![:0]const u8 {
+    const protocol = getProtocol(current);
+    const host = getHost(current);
+    const pathname = getPathname(current);
+    const hash = getHash(current);
+
+    // Add ? prefix if not present and value is not empty
+    const search = if (value.len > 0 and value[0] != '?')
+        try std.fmt.allocPrint(allocator, "?{s}", .{value})
+    else
+        value;
+
+    return buildUrl(allocator, protocol, host, pathname, search, hash);
+}
+
+pub fn setHash(current: [:0]const u8, value: []const u8, allocator: Allocator) ![:0]const u8 {
+    const protocol = getProtocol(current);
+    const host = getHost(current);
+    const pathname = getPathname(current);
+    const search = getSearch(current);
+
+    // Add # prefix if not present and value is not empty
+    const hash = if (value.len > 0 and value[0] != '#')
+        try std.fmt.allocPrint(allocator, "#{s}", .{value})
+    else
+        value;
+
+    return buildUrl(allocator, protocol, host, pathname, search, hash);
+}
+
+pub fn concatQueryString(arena: Allocator, url: []const u8, query_string: []const u8) ![:0]const u8 {
+    if (query_string.len == 0) {
+        return arena.dupeZ(u8, url);
+    }
+
+    var buf: std.ArrayList(u8) = .empty;
+
+    // the most space well need is the url + ('?' or '&') + the query_string + null terminator
+    try buf.ensureTotalCapacity(arena, url.len + 2 + query_string.len);
+    buf.appendSliceAssumeCapacity(url);
+
+    if (std.mem.indexOfScalar(u8, url, '?')) |index| {
+        const last_index = url.len - 1;
+        if (index != last_index and url[last_index] != '&') {
+            buf.appendAssumeCapacity('&');
+        }
+    } else {
+        buf.appendAssumeCapacity('?');
+    }
+    buf.appendSliceAssumeCapacity(query_string);
+    buf.appendAssumeCapacity(0);
+    return buf.items[0 .. buf.items.len - 1 :0];
+}
+
+const testing = @import("../testing.zig");
+test "URL: isCompleteHTTPUrl" {
+    try testing.expectEqual(true, isCompleteHTTPUrl("http://example.com/about"));
+    try testing.expectEqual(true, isCompleteHTTPUrl("HttP://example.com/about"));
+    try testing.expectEqual(true, isCompleteHTTPUrl("httpS://example.com/about"));
+    try testing.expectEqual(true, isCompleteHTTPUrl("HTTPs://example.com/about"));
+    try testing.expectEqual(true, isCompleteHTTPUrl("ftp://example.com/about"));
+
+    try testing.expectEqual(false, isCompleteHTTPUrl("/example.com"));
+    try testing.expectEqual(false, isCompleteHTTPUrl("../../about"));
+    try testing.expectEqual(false, isCompleteHTTPUrl("about"));
+}
+
+test "URL: resolve regression (#1093)" {
+    defer testing.reset();
+
+    const Case = struct {
+        base: [:0]const u8,
+        path: [:0]const u8,
+        expected: [:0]const u8,
+    };
+
+    const cases = [_]Case{
+        .{
+            .base = "https://alas.aws.amazon.com/alas2.html",
+            .path = "../static/bootstrap.min.css",
+            .expected = "https://alas.aws.amazon.com/static/bootstrap.min.css",
+        },
+    };
+
+    for (cases) |case| {
+        const result = try resolve(testing.arena_allocator, case.base, case.path, .{});
+        try testing.expectString(case.expected, result);
+    }
+}
+
+test "URL: resolve" {
+    defer testing.reset();
+
+    const Case = struct {
+        base: [:0]const u8,
+        path: [:0]const u8,
+        expected: [:0]const u8,
+    };
+
+    const cases = [_]Case{
+        .{
+            .base = "https://example/dir",
+            .path = "abc../test",
+            .expected = "https://example/abc../test",
+        },
+        .{
+            .base = "https://example/dir",
+            .path = "abc.",
+            .expected = "https://example/abc.",
+        },
+        .{
+            .base = "https://example/dir",
+            .path = "abc/.",
+            .expected = "https://example/abc/",
+        },
+        .{
+            .base = "https://example/xyz/abc/123",
+            .path = "something.js",
+            .expected = "https://example/xyz/abc/something.js",
+        },
+        .{
+            .base = "https://example/xyz/abc/123",
+            .path = "/something.js",
+            .expected = "https://example/something.js",
+        },
+        .{
+            .base = "https://example/",
+            .path = "something.js",
+            .expected = "https://example/something.js",
+        },
+        .{
+            .base = "https://example/",
+            .path = "/something.js",
+            .expected = "https://example/something.js",
+        },
+        .{
+            .base = "https://example",
+            .path = "something.js",
+            .expected = "https://example/something.js",
+        },
+        .{
+            .base = "https://example",
+            .path = "abc/something.js",
+            .expected = "https://example/abc/something.js",
+        },
+        .{
+            .base = "https://example/nested",
+            .path = "abc/something.js",
+            .expected = "https://example/abc/something.js",
+        },
+        .{
+            .base = "https://example/nested/",
+            .path = "abc/something.js",
+            .expected = "https://example/nested/abc/something.js",
+        },
+        .{
+            .base = "https://example/nested/",
+            .path = "/abc/something.js",
+            .expected = "https://example/abc/something.js",
+        },
+        .{
+            .base = "https://example/nested/",
+            .path = "http://www.github.com/example/",
+            .expected = "http://www.github.com/example/",
+        },
+        .{
+            .base = "https://example/nested/",
+            .path = "",
+            .expected = "https://example/nested/",
+        },
+        .{
+            .base = "https://example/abc/aaa",
+            .path = "./hello/./world",
+            .expected = "https://example/abc/hello/world",
+        },
+        .{
+            .base = "https://example/abc/aaa/",
+            .path = "../hello",
+            .expected = "https://example/abc/hello",
+        },
+        .{
+            .base = "https://example/abc/aaa",
+            .path = "../hello",
+            .expected = "https://example/hello",
+        },
+        .{
+            .base = "https://example/abc/aaa/",
+            .path = "./.././.././hello",
+            .expected = "https://example/hello",
+        },
+        .{
+            .base = "some/page",
+            .path = "hello",
+            .expected = "some/hello",
+        },
+        .{
+            .base = "some/page/",
+            .path = "hello",
+            .expected = "some/page/hello",
+        },
+        .{
+            .base = "some/page/other",
+            .path = ".././hello",
+            .expected = "some/hello",
+        },
+        .{
+            .base = "https://www.example.com/hello/world",
+            .path = "//example/about",
+            .expected = "https://example/about",
+        },
+        .{
+            .base = "http:",
+            .path = "//example.com/over/9000",
+            .expected = "http://example.com/over/9000",
+        },
+        .{
+            .base = "https://example.com/",
+            .path = "../hello",
+            .expected = "https://example.com/hello",
+        },
+        .{
+            .base = "https://www.example.com/hello/world/",
+            .path = "../../../../example/about",
+            .expected = "https://www.example.com/example/about",
+        },
+    };
+
+    for (cases) |case| {
+        const result = try resolve(testing.arena_allocator, case.base, case.path, .{});
+        try testing.expectString(case.expected, result);
+    }
+}
+
+test "URL: eqlDocument" {
+    defer testing.reset();
+    {
+        const url = "https://lightpanda.io/about";
+        try testing.expectEqual(true, eqlDocument(url, url));
+    }
+    {
+        const url1 = "https://lightpanda.io/about";
+        const url2 = "http://lightpanda.io/about";
+        try testing.expectEqual(false, eqlDocument(url1, url2));
+    }
+    {
+        const url1 = "https://lightpanda.io/about";
+        const url2 = "https://example.com/about";
+        try testing.expectEqual(false, eqlDocument(url1, url2));
+    }
+    {
+        const url1 = "https://lightpanda.io:8080/about";
+        const url2 = "https://lightpanda.io:9090/about";
+        try testing.expectEqual(false, eqlDocument(url1, url2));
+    }
+    {
+        const url1 = "https://lightpanda.io/about";
+        const url2 = "https://lightpanda.io/contact";
+        try testing.expectEqual(false, eqlDocument(url1, url2));
+    }
+    {
+        const url1 = "https://lightpanda.io/about?foo=bar";
+        const url2 = "https://lightpanda.io/about?baz=qux";
+        try testing.expectEqual(false, eqlDocument(url1, url2));
+    }
+    {
+        const url1 = "https://lightpanda.io/about#section1";
+        const url2 = "https://lightpanda.io/about#section2";
+        try testing.expectEqual(true, eqlDocument(url1, url2));
+    }
+    {
+        const url1 = "https://lightpanda.io/about";
+        const url2 = "https://lightpanda.io/about/";
+        try testing.expectEqual(false, eqlDocument(url1, url2));
+    }
+    {
+        const url1 = "https://lightpanda.io/about?foo=bar";
+        const url2 = "https://lightpanda.io/about";
+        try testing.expectEqual(false, eqlDocument(url1, url2));
+    }
+    {
+        const url1 = "https://lightpanda.io/about";
+        const url2 = "https://lightpanda.io/about?foo=bar";
+        try testing.expectEqual(false, eqlDocument(url1, url2));
+    }
+    {
+        const url1 = "https://lightpanda.io/about?foo=bar";
+        const url2 = "https://lightpanda.io/about?foo=bar";
+        try testing.expectEqual(true, eqlDocument(url1, url2));
+    }
+    {
+        const url1 = "https://lightpanda.io/about?";
+        const url2 = "https://lightpanda.io/about";
+        try testing.expectEqual(false, eqlDocument(url1, url2));
+    }
+    {
+        const url1 = "https://duckduckgo.com/";
+        const url2 = "https://duckduckgo.com/?q=lightpanda";
+        try testing.expectEqual(false, eqlDocument(url1, url2));
+    }
+}
+
+test "URL: concatQueryString" {
+    defer testing.reset();
+    const arena = testing.arena_allocator;
+
+    {
+        const url = try concatQueryString(arena, "https://www.lightpanda.io/", "");
+        try testing.expectEqual("https://www.lightpanda.io/", url);
+    }
+
+    {
+        const url = try concatQueryString(arena, "https://www.lightpanda.io/index?", "");
+        try testing.expectEqual("https://www.lightpanda.io/index?", url);
+    }
+
+    {
+        const url = try concatQueryString(arena, "https://www.lightpanda.io/index?", "a=b");
+        try testing.expectEqual("https://www.lightpanda.io/index?a=b", url);
+    }
+
+    {
+        const url = try concatQueryString(arena, "https://www.lightpanda.io/index?1=2", "a=b");
+        try testing.expectEqual("https://www.lightpanda.io/index?1=2&a=b", url);
+    }
+
+    {
+        const url = try concatQueryString(arena, "https://www.lightpanda.io/index?1=2&", "a=b");
+        try testing.expectEqual("https://www.lightpanda.io/index?1=2&a=b", url);
+    }
+}

src/browser/browser.zig

@@ -1,560 +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 std = @import("std");
-const builtin = @import("builtin");
-
-const Types = @import("root").Types;
-
-const parser = @import("netsurf");
-const Loader = @import("loader.zig").Loader;
-const Dump = @import("dump.zig");
-const Mime = @import("mime.zig");
-
-const jsruntime = @import("jsruntime");
-const Loop = jsruntime.Loop;
-const Env = jsruntime.Env;
-
-const apiweb = @import("../apiweb.zig");
-
-const Window = @import("../html/window.zig").Window;
-const Walker = @import("../dom/walker.zig").WalkerDepthFirst;
-
-const storage = @import("../storage/storage.zig");
-
-const FetchResult = std.http.Client.FetchResult;
-
-const UserContext = @import("../user_context.zig").UserContext;
-const HttpClient = @import("../async/Client.zig");
-
-const log = std.log.scoped(.browser);
-
-// Browser is an instance of the browser.
-// You can create multiple browser instances.
-// A browser contains only one session.
-// TODO allow multiple sessions per browser.
-pub const Browser = struct {
-    session: *Session,
-
-    pub fn init(alloc: std.mem.Allocator, vm: jsruntime.VM) !Browser {
-        // We want to ensure the caller initialised a VM, but the browser
-        // doesn't use it directly...
-        _ = vm;
-
-        return Browser{
-            .session = try Session.init(alloc, "about:blank"),
-        };
-    }
-
-    pub fn deinit(self: *Browser) void {
-        self.session.deinit();
-    }
-
-    pub fn currentSession(self: *Browser) *Session {
-        return self.session;
-    }
-};
-
-// Session is like a browser's tab.
-// It owns the js env and the loader for all the pages of the session.
-// You can create successively multiple pages for a session, but you must
-// deinit a page before running another one.
-pub const Session = struct {
-    // allocator used to init the arena.
-    alloc: std.mem.Allocator,
-
-    // The arena is used only to bound the js env init b/c it leaks memory.
-    // see https://github.com/lightpanda-io/jsruntime-lib/issues/181
-    //
-    // The arena is initialised with self.alloc allocator.
-    // all others Session deps use directly self.alloc and not the arena.
-    arena: std.heap.ArenaAllocator,
-
-    uri: []const u8,
-
-    // TODO handle proxy
-    loader: Loader,
-    env: Env = undefined,
-    loop: Loop,
-    window: Window,
-    // TODO move the shed to the browser?
-    storageShed: storage.Shed,
-    page: ?*Page = null,
-    httpClient: HttpClient,
-
-    jstypes: [Types.len]usize = undefined,
-
-    fn init(alloc: std.mem.Allocator, uri: []const u8) !*Session {
-        var self = try alloc.create(Session);
-        self.* = Session{
-            .uri = uri,
-            .alloc = alloc,
-            .arena = std.heap.ArenaAllocator.init(alloc),
-            .window = Window.create(null),
-            .loader = Loader.init(alloc),
-            .loop = try Loop.init(alloc),
-            .storageShed = storage.Shed.init(alloc),
-            .httpClient = undefined,
-        };
-
-        self.env = try Env.init(self.arena.allocator(), &self.loop, null);
-        self.httpClient = .{ .allocator = alloc, .loop = &self.loop };
-        try self.env.load(&self.jstypes);
-
-        return self;
-    }
-
-    fn deinit(self: *Session) void {
-        if (self.page) |page| page.end();
-
-        self.env.deinit();
-        self.arena.deinit();
-
-        self.loader.deinit();
-        self.loop.deinit();
-        self.storageShed.deinit();
-        self.httpClient.deinit();
-        self.alloc.destroy(self);
-    }
-
-    pub fn createPage(self: *Session) !Page {
-        return Page.init(self.alloc, self);
-    }
-};
-
-// Page navigates to an url.
-// You can navigates multiple urls with the same page, but you have to call
-// end() to stop the previous navigation before starting a new one.
-// The page handle all its memory in an arena allocator. The arena is reseted
-// when end() is called.
-pub const Page = struct {
-    arena: std.heap.ArenaAllocator,
-    session: *Session,
-    doc: ?*parser.Document = null,
-
-    // handle url
-    rawuri: ?[]const u8 = null,
-    uri: std.Uri = undefined,
-    origin: ?[]const u8 = null,
-
-    raw_data: ?[]const u8 = null,
-
-    fn init(
-        alloc: std.mem.Allocator,
-        session: *Session,
-    ) !Page {
-        if (session.page != null) return error.SessionPageExists;
-        var page = Page{
-            .arena = std.heap.ArenaAllocator.init(alloc),
-            .session = session,
-        };
-        session.page = &page;
-        return page;
-    }
-
-    // reset js env and mem arena.
-    pub fn end(self: *Page) void {
-        self.session.env.stop();
-        // TODO unload document: https://html.spec.whatwg.org/#unloading-documents
-
-        // clear netsurf memory arena.
-        parser.deinit();
-
-        _ = self.arena.reset(.free_all);
-    }
-
-    pub fn deinit(self: *Page) void {
-        self.arena.deinit();
-        self.session.page = null;
-    }
-
-    // dump writes the page content into the given file.
-    pub fn dump(self: *Page, out: std.fs.File) !void {
-
-        // if no HTML document pointer available, dump the data content only.
-        if (self.doc == null) {
-            // no data loaded, nothing to do.
-            if (self.raw_data == null) return;
-            return try out.writeAll(self.raw_data.?);
-        }
-
-        // if the page has a pointer to a document, dumps the HTML.
-        try Dump.writeHTML(self.doc.?, out);
-    }
-
-    pub fn wait(self: *Page) !void {
-        const alloc = self.arena.allocator();
-        var res = try self.session.env.waitTryCatch(alloc);
-        defer res.deinit(alloc);
-
-        if (res.success) {
-            log.debug("wait: {s}", .{res.result});
-        } else {
-            if (builtin.mode == .Debug and res.stack != null) {
-                log.info("wait: {s}", .{res.stack.?});
-            } else {
-                log.info("wait: {s}", .{res.result});
-            }
-        }
-
-        return;
-    }
-
-    // spec reference: https://html.spec.whatwg.org/#document-lifecycle
-    pub fn navigate(self: *Page, uri: []const u8) !void {
-        const alloc = self.arena.allocator();
-
-        log.debug("starting GET {s}", .{uri});
-
-        // own the url
-        if (self.rawuri) |prev| alloc.free(prev);
-        self.rawuri = try alloc.dupe(u8, uri);
-        self.uri = std.Uri.parse(self.rawuri.?) catch try std.Uri.parseAfterScheme("", self.rawuri.?);
-
-        // prepare origin value.
-        var buf = std.ArrayList(u8).init(alloc);
-        defer buf.deinit();
-        try self.uri.writeToStream(.{
-            .scheme = true,
-            .authority = true,
-        }, buf.writer());
-        self.origin = try buf.toOwnedSlice();
-
-        // TODO handle fragment in url.
-
-        // load the data
-        var resp = try self.session.loader.get(alloc, self.uri);
-        defer resp.deinit();
-
-        const req = resp.req;
-
-        log.info("GET {any} {d}", .{ self.uri, req.response.status });
-
-        // TODO handle redirection
-        if (req.response.status != .ok) {
-            log.debug("{?} {d} {s}", .{
-                req.response.version,
-                req.response.status,
-                req.response.reason,
-                // TODO log headers
-            });
-            return error.BadStatusCode;
-        }
-
-        // TODO handle charset
-        // https://html.spec.whatwg.org/#content-type
-        var it = req.response.iterateHeaders();
-        var ct: ?[]const u8 = null;
-        while (true) {
-            const h = it.next() orelse break;
-            if (std.ascii.eqlIgnoreCase(h.name, "Content-Type")) {
-                ct = try alloc.dupe(u8, h.value);
-            }
-        }
-        if (ct == null) {
-            // no content type in HTTP headers.
-            // TODO try to sniff mime type from the body.
-            log.info("no content-type HTTP header", .{});
-            return;
-        }
-        defer alloc.free(ct.?);
-
-        log.debug("header content-type: {s}", .{ct.?});
-        const mime = try Mime.parse(ct.?);
-        if (mime.eql(Mime.HTML)) {
-            try self.loadHTMLDoc(req.reader(), mime.charset orelse "utf-8");
-        } else {
-            log.info("non-HTML document: {s}", .{ct.?});
-
-            // save the body into the page.
-            self.raw_data = try req.reader().readAllAlloc(alloc, 16 * 1024 * 1024);
-        }
-    }
-
-    // https://html.spec.whatwg.org/#read-html
-    fn loadHTMLDoc(self: *Page, reader: anytype, charset: []const u8) !void {
-        const alloc = self.arena.allocator();
-
-        // start netsurf memory arena.
-        try parser.init();
-
-        log.debug("parse html with charset {s}", .{charset});
-
-        const ccharset = try alloc.dupeZ(u8, charset);
-        defer alloc.free(ccharset);
-
-        const html_doc = try parser.documentHTMLParse(reader, ccharset);
-        const doc = parser.documentHTMLToDocument(html_doc);
-
-        // save a document's pointer in the page.
-        self.doc = doc;
-
-        // TODO set document.readyState to interactive
-        // https://html.spec.whatwg.org/#reporting-document-loading-status
-
-        // inject the URL to the document including the fragment.
-        try parser.documentSetDocumentURI(doc, self.rawuri orelse "about:blank");
-
-        // TODO set the referrer to the document.
-
-        self.session.window.replaceDocument(html_doc);
-        self.session.window.setStorageShelf(
-            try self.session.storageShed.getOrPut(self.origin orelse "null"),
-        );
-
-        // https://html.spec.whatwg.org/#read-html
-
-        // start JS env
-        // TODO load the js env concurrently with the HTML parsing.
-        log.debug("start js env", .{});
-        try self.session.env.start(alloc);
-
-        // replace the user context document with the new one.
-        try self.session.env.setUserContext(.{
-            .document = html_doc,
-            .httpClient = &self.session.httpClient,
-        });
-
-        // add global objects
-        log.debug("setup global env", .{});
-        try self.session.env.bindGlobal(&self.session.window);
-
-        // browse the DOM tree to retrieve scripts
-        // TODO execute the synchronous scripts during the HTL parsing.
-        // TODO fetch the script resources concurrently but execute them in the
-        // declaration order for synchronous ones.
-
-        // sasync stores scripts which can be run asynchronously.
-        // for now they are just run after the non-async one in order to
-        // dispatch DOMContentLoaded the sooner as possible.
-        var sasync = std.ArrayList(*parser.Element).init(alloc);
-        defer sasync.deinit();
-
-        const root = parser.documentToNode(doc);
-        const walker = Walker{};
-        var next: ?*parser.Node = null;
-        while (true) {
-            next = try walker.get_next(root, next) orelse break;
-
-            // ignore non-elements nodes.
-            if (try parser.nodeType(next.?) != .element) {
-                continue;
-            }
-
-            const e = parser.nodeToElement(next.?);
-            const tag = try parser.elementHTMLGetTagType(@as(*parser.ElementHTML, @ptrCast(e)));
-
-            // ignore non-script tags
-            if (tag != .script) continue;
-
-            // ignore non-js script.
-            // > type
-            // > Attribute is not set (default), an empty string, or a JavaScript MIME
-            // > type indicates that the script is a "classic script", containing
-            // > JavaScript code.
-            // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attribute_is_not_set_default_an_empty_string_or_a_javascript_mime_type
-            const stype = try parser.elementGetAttribute(e, "type");
-            if (!isJS(stype)) {
-                continue;
-            }
-
-            // Ignore the defer attribute b/c we analyze all script
-            // after the document has been parsed.
-            // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#defer
-
-            // TODO use fetchpriority
-            // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#fetchpriority
-
-            // > async
-            // > For classic scripts, if the async attribute is present,
-            // > then the classic script will be fetched in parallel to
-            // > parsing and evaluated as soon as it is available.
-            // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#async
-            if (try parser.elementGetAttribute(e, "async") != null) {
-                try sasync.append(e);
-                continue;
-            }
-
-            // TODO handle for attribute
-            // TODO handle event attribute
-
-            // TODO defer
-            // > This Boolean attribute is set to indicate to a browser
-            // > that the script is meant to be executed after the
-            // > document has been parsed, but before firing
-            // > DOMContentLoaded.
-            // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#defer
-            // defer allow us to load a script w/o blocking the rest of
-            // evaluations.
-
-            // > Scripts without async, defer or type="module"
-            // > attributes, as well as inline scripts without the
-            // > type="module" attribute, are fetched and executed
-            // > immediately before the browser continues to parse the
-            // > page.
-            // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#notes
-            self.evalScript(e) catch |err| log.warn("evaljs: {any}", .{err});
-        }
-
-        // TODO wait for deferred scripts
-
-        // dispatch DOMContentLoaded before the transition to "complete",
-        // at the point where all subresources apart from async script elements
-        // have loaded.
-        // https://html.spec.whatwg.org/#reporting-document-loading-status
-        const evt = try parser.eventCreate();
-        defer parser.eventDestroy(evt);
-
-        try parser.eventInit(evt, "DOMContentLoaded", .{ .bubbles = true, .cancelable = true });
-        _ = try parser.eventTargetDispatchEvent(parser.toEventTarget(parser.DocumentHTML, html_doc), evt);
-
-        // eval async scripts.
-        for (sasync.items) |e| {
-            self.evalScript(e) catch |err| log.warn("evaljs: {any}", .{err});
-        }
-
-        // TODO wait for async scripts
-
-        // TODO set document.readyState to complete
-
-        // dispatch window.load event
-        const loadevt = try parser.eventCreate();
-        defer parser.eventDestroy(loadevt);
-
-        try parser.eventInit(loadevt, "load", .{});
-        _ = try parser.eventTargetDispatchEvent(
-            parser.toEventTarget(Window, &self.session.window),
-            loadevt,
-        );
-    }
-
-    // evalScript evaluates the src in priority.
-    // if no src is present, we evaluate the text source.
-    // https://html.spec.whatwg.org/multipage/scripting.html#script-processing-model
-    fn evalScript(self: *Page, e: *parser.Element) !void {
-        const alloc = self.arena.allocator();
-
-        // https://html.spec.whatwg.org/multipage/webappapis.html#fetch-a-classic-script
-        const opt_src = try parser.elementGetAttribute(e, "src");
-        if (opt_src) |src| {
-            log.debug("starting GET {s}", .{src});
-
-            self.fetchScript(src) catch |err| {
-                switch (err) {
-                    FetchError.BadStatusCode => return err,
-
-                    // TODO If el's result is null, then fire an event named error at
-                    // el, and return.
-                    FetchError.NoBody => return,
-
-                    FetchError.JsErr => {}, // nothing to do here.
-                    else => return err,
-                }
-            };
-
-            // TODO If el's from an external file is true, then fire an event
-            // named load at el.
-
-            return;
-        }
-
-        const opt_text = try parser.nodeTextContent(parser.elementToNode(e));
-        if (opt_text) |text| {
-            // TODO handle charset attribute
-            var res = try self.session.env.execTryCatch(alloc, text, "");
-            defer res.deinit(alloc);
-
-            if (res.success) {
-                log.debug("eval inline: {s}", .{res.result});
-            } else {
-                if (builtin.mode == .Debug and res.stack != null) {
-                    log.info("eval inline: {s}", .{res.stack.?});
-                } else {
-                    log.info("eval inline: {s}", .{res.result});
-                }
-            }
-
-            return;
-        }
-
-        // nothing has been loaded.
-        // TODO If el's result is null, then fire an event named error at
-        // el, and return.
-    }
-
-    const FetchError = error{
-        BadStatusCode,
-        NoBody,
-        JsErr,
-    };
-
-    // fetchScript senf a GET request to the src and execute the script
-    // received.
-    fn fetchScript(self: *Page, src: []const u8) !void {
-        const alloc = self.arena.allocator();
-
-        log.debug("starting fetch script {s}", .{src});
-
-        var buffer: [1024]u8 = undefined;
-        var b: []u8 = buffer[0..];
-        const u = try std.Uri.resolve_inplace(self.uri, src, &b);
-
-        var fetchres = try self.session.loader.get(alloc, u);
-        defer fetchres.deinit();
-
-        const resp = fetchres.req.response;
-
-        log.info("fech script {any}: {d}", .{ u, resp.status });
-
-        if (resp.status != .ok) return FetchError.BadStatusCode;
-
-        // TODO check content-type
-        const body = try fetchres.req.reader().readAllAlloc(alloc, 16 * 1024 * 1024);
-        defer alloc.free(body);
-
-        // check no body
-        if (body.len == 0) return FetchError.NoBody;
-
-        var res = try self.session.env.execTryCatch(alloc, body, src);
-        defer res.deinit(alloc);
-
-        if (res.success) {
-            log.debug("eval remote {s}: {s}", .{ src, res.result });
-        } else {
-            if (builtin.mode == .Debug and res.stack != null) {
-                log.info("eval remote {s}: {s}", .{ src, res.stack.? });
-            } else {
-                log.info("eval remote {s}: {s}", .{ src, res.result });
-            }
-            return FetchError.JsErr;
-        }
-    }
-
-    // > type
-    // > Attribute is not set (default), an empty string, or a JavaScript MIME
-    // > type indicates that the script is a "classic script", containing
-    // > JavaScript code.
-    // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attribute_is_not_set_default_an_empty_string_or_a_javascript_mime_type
-    fn isJS(stype: ?[]const u8) bool {
-        if (stype == null or stype.?.len == 0) return true;
-        if (std.mem.eql(u8, stype.?, "application/javascript")) return true;
-        if (!std.mem.eql(u8, stype.?, "module")) return true;
-
-        return false;
-    }
-};

src/browser/color.zig

@@ -0,0 +1,298 @@
+// 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 Io = std.Io;
+
+pub fn isHexColor(value: []const u8) bool {
+    if (value.len == 0) {
+        return false;
+    }
+
+    if (value[0] != '#') {
+        return false;
+    }
+
+    const hex_part = value[1..];
+    switch (hex_part.len) {
+        3, 4, 6, 8 => for (hex_part) |c| if (!std.ascii.isHex(c)) return false,
+        else => return false,
+    }
+
+    return true;
+}
+
+pub const RGBA = packed struct(u32) {
+    r: u8,
+    g: u8,
+    b: u8,
+    /// Opaque by default.
+    a: u8 = std.math.maxInt(u8),
+
+    pub const Named = struct {
+        // Basic colors (CSS Level 1)
+        pub const black: RGBA = .init(0, 0, 0, 1);
+        pub const silver: RGBA = .init(192, 192, 192, 1);
+        pub const gray: RGBA = .init(128, 128, 128, 1);
+        pub const white: RGBA = .init(255, 255, 255, 1);
+        pub const maroon: RGBA = .init(128, 0, 0, 1);
+        pub const red: RGBA = .init(255, 0, 0, 1);
+        pub const purple: RGBA = .init(128, 0, 128, 1);
+        pub const fuchsia: RGBA = .init(255, 0, 255, 1);
+        pub const green: RGBA = .init(0, 128, 0, 1);
+        pub const lime: RGBA = .init(0, 255, 0, 1);
+        pub const olive: RGBA = .init(128, 128, 0, 1);
+        pub const yellow: RGBA = .init(255, 255, 0, 1);
+        pub const navy: RGBA = .init(0, 0, 128, 1);
+        pub const blue: RGBA = .init(0, 0, 255, 1);
+        pub const teal: RGBA = .init(0, 128, 128, 1);
+        pub const aqua: RGBA = .init(0, 255, 255, 1);
+
+        // Extended colors (CSS Level 2+)
+        pub const aliceblue: RGBA = .init(240, 248, 255, 1);
+        pub const antiquewhite: RGBA = .init(250, 235, 215, 1);
+        pub const aquamarine: RGBA = .init(127, 255, 212, 1);
+        pub const azure: RGBA = .init(240, 255, 255, 1);
+        pub const beige: RGBA = .init(245, 245, 220, 1);
+        pub const bisque: RGBA = .init(255, 228, 196, 1);
+        pub const blanchedalmond: RGBA = .init(255, 235, 205, 1);
+        pub const blueviolet: RGBA = .init(138, 43, 226, 1);
+        pub const brown: RGBA = .init(165, 42, 42, 1);
+        pub const burlywood: RGBA = .init(222, 184, 135, 1);
+        pub const cadetblue: RGBA = .init(95, 158, 160, 1);
+        pub const chartreuse: RGBA = .init(127, 255, 0, 1);
+        pub const chocolate: RGBA = .init(210, 105, 30, 1);
+        pub const coral: RGBA = .init(255, 127, 80, 1);
+        pub const cornflowerblue: RGBA = .init(100, 149, 237, 1);
+        pub const cornsilk: RGBA = .init(255, 248, 220, 1);
+        pub const crimson: RGBA = .init(220, 20, 60, 1);
+        pub const cyan: RGBA = .init(0, 255, 255, 1); // Synonym of aqua
+        pub const darkblue: RGBA = .init(0, 0, 139, 1);
+        pub const darkcyan: RGBA = .init(0, 139, 139, 1);
+        pub const darkgoldenrod: RGBA = .init(184, 134, 11, 1);
+        pub const darkgray: RGBA = .init(169, 169, 169, 1);
+        pub const darkgreen: RGBA = .init(0, 100, 0, 1);
+        pub const darkgrey: RGBA = .init(169, 169, 169, 1); // Synonym of darkgray
+        pub const darkkhaki: RGBA = .init(189, 183, 107, 1);
+        pub const darkmagenta: RGBA = .init(139, 0, 139, 1);
+        pub const darkolivegreen: RGBA = .init(85, 107, 47, 1);
+        pub const darkorange: RGBA = .init(255, 140, 0, 1);
+        pub const darkorchid: RGBA = .init(153, 50, 204, 1);
+        pub const darkred: RGBA = .init(139, 0, 0, 1);
+        pub const darksalmon: RGBA = .init(233, 150, 122, 1);
+        pub const darkseagreen: RGBA = .init(143, 188, 143, 1);
+        pub const darkslateblue: RGBA = .init(72, 61, 139, 1);
+        pub const darkslategray: RGBA = .init(47, 79, 79, 1);
+        pub const darkslategrey: RGBA = .init(47, 79, 79, 1); // Synonym of darkslategray
+        pub const darkturquoise: RGBA = .init(0, 206, 209, 1);
+        pub const darkviolet: RGBA = .init(148, 0, 211, 1);
+        pub const deeppink: RGBA = .init(255, 20, 147, 1);
+        pub const deepskyblue: RGBA = .init(0, 191, 255, 1);
+        pub const dimgray: RGBA = .init(105, 105, 105, 1);
+        pub const dimgrey: RGBA = .init(105, 105, 105, 1); // Synonym of dimgray
+        pub const dodgerblue: RGBA = .init(30, 144, 255, 1);
+        pub const firebrick: RGBA = .init(178, 34, 34, 1);
+        pub const floralwhite: RGBA = .init(255, 250, 240, 1);
+        pub const forestgreen: RGBA = .init(34, 139, 34, 1);
+        pub const gainsboro: RGBA = .init(220, 220, 220, 1);
+        pub const ghostwhite: RGBA = .init(248, 248, 255, 1);
+        pub const gold: RGBA = .init(255, 215, 0, 1);
+        pub const goldenrod: RGBA = .init(218, 165, 32, 1);
+        pub const greenyellow: RGBA = .init(173, 255, 47, 1);
+        pub const grey: RGBA = .init(128, 128, 128, 1); // Synonym of gray
+        pub const honeydew: RGBA = .init(240, 255, 240, 1);
+        pub const hotpink: RGBA = .init(255, 105, 180, 1);
+        pub const indianred: RGBA = .init(205, 92, 92, 1);
+        pub const indigo: RGBA = .init(75, 0, 130, 1);
+        pub const ivory: RGBA = .init(255, 255, 240, 1);
+        pub const khaki: RGBA = .init(240, 230, 140, 1);
+        pub const lavender: RGBA = .init(230, 230, 250, 1);
+        pub const lavenderblush: RGBA = .init(255, 240, 245, 1);
+        pub const lawngreen: RGBA = .init(124, 252, 0, 1);
+        pub const lemonchiffon: RGBA = .init(255, 250, 205, 1);
+        pub const lightblue: RGBA = .init(173, 216, 230, 1);
+        pub const lightcoral: RGBA = .init(240, 128, 128, 1);
+        pub const lightcyan: RGBA = .init(224, 255, 255, 1);
+        pub const lightgoldenrodyellow: RGBA = .init(250, 250, 210, 1);
+        pub const lightgray: RGBA = .init(211, 211, 211, 1);
+        pub const lightgreen: RGBA = .init(144, 238, 144, 1);
+        pub const lightgrey: RGBA = .init(211, 211, 211, 1); // Synonym of lightgray
+        pub const lightpink: RGBA = .init(255, 182, 193, 1);
+        pub const lightsalmon: RGBA = .init(255, 160, 122, 1);
+        pub const lightseagreen: RGBA = .init(32, 178, 170, 1);
+        pub const lightskyblue: RGBA = .init(135, 206, 250, 1);
+        pub const lightslategray: RGBA = .init(119, 136, 153, 1);
+        pub const lightslategrey: RGBA = .init(119, 136, 153, 1); // Synonym of lightslategray
+        pub const lightsteelblue: RGBA = .init(176, 196, 222, 1);
+        pub const lightyellow: RGBA = .init(255, 255, 224, 1);
+        pub const limegreen: RGBA = .init(50, 205, 50, 1);
+        pub const linen: RGBA = .init(250, 240, 230, 1);
+        pub const magenta: RGBA = .init(255, 0, 255, 1); // Synonym of fuchsia
+        pub const mediumaquamarine: RGBA = .init(102, 205, 170, 1);
+        pub const mediumblue: RGBA = .init(0, 0, 205, 1);
+        pub const mediumorchid: RGBA = .init(186, 85, 211, 1);
+        pub const mediumpurple: RGBA = .init(147, 112, 219, 1);
+        pub const mediumseagreen: RGBA = .init(60, 179, 113, 1);
+        pub const mediumslateblue: RGBA = .init(123, 104, 238, 1);
+        pub const mediumspringgreen: RGBA = .init(0, 250, 154, 1);
+        pub const mediumturquoise: RGBA = .init(72, 209, 204, 1);
+        pub const mediumvioletred: RGBA = .init(199, 21, 133, 1);
+        pub const midnightblue: RGBA = .init(25, 25, 112, 1);
+        pub const mintcream: RGBA = .init(245, 255, 250, 1);
+        pub const mistyrose: RGBA = .init(255, 228, 225, 1);
+        pub const moccasin: RGBA = .init(255, 228, 181, 1);
+        pub const navajowhite: RGBA = .init(255, 222, 173, 1);
+        pub const oldlace: RGBA = .init(253, 245, 230, 1);
+        pub const olivedrab: RGBA = .init(107, 142, 35, 1);
+        pub const orange: RGBA = .init(255, 165, 0, 1);
+        pub const orangered: RGBA = .init(255, 69, 0, 1);
+        pub const orchid: RGBA = .init(218, 112, 214, 1);
+        pub const palegoldenrod: RGBA = .init(238, 232, 170, 1);
+        pub const palegreen: RGBA = .init(152, 251, 152, 1);
+        pub const paleturquoise: RGBA = .init(175, 238, 238, 1);
+        pub const palevioletred: RGBA = .init(219, 112, 147, 1);
+        pub const papayawhip: RGBA = .init(255, 239, 213, 1);
+        pub const peachpuff: RGBA = .init(255, 218, 185, 1);
+        pub const peru: RGBA = .init(205, 133, 63, 1);
+        pub const pink: RGBA = .init(255, 192, 203, 1);
+        pub const plum: RGBA = .init(221, 160, 221, 1);
+        pub const powderblue: RGBA = .init(176, 224, 230, 1);
+        pub const rebeccapurple: RGBA = .init(102, 51, 153, 1);
+        pub const rosybrown: RGBA = .init(188, 143, 143, 1);
+        pub const royalblue: RGBA = .init(65, 105, 225, 1);
+        pub const saddlebrown: RGBA = .init(139, 69, 19, 1);
+        pub const salmon: RGBA = .init(250, 128, 114, 1);
+        pub const sandybrown: RGBA = .init(244, 164, 96, 1);
+        pub const seagreen: RGBA = .init(46, 139, 87, 1);
+        pub const seashell: RGBA = .init(255, 245, 238, 1);
+        pub const sienna: RGBA = .init(160, 82, 45, 1);
+        pub const skyblue: RGBA = .init(135, 206, 235, 1);
+        pub const slateblue: RGBA = .init(106, 90, 205, 1);
+        pub const slategray: RGBA = .init(112, 128, 144, 1);
+        pub const slategrey: RGBA = .init(112, 128, 144, 1); // Synonym of slategray
+        pub const snow: RGBA = .init(255, 250, 250, 1);
+        pub const springgreen: RGBA = .init(0, 255, 127, 1);
+        pub const steelblue: RGBA = .init(70, 130, 180, 1);
+        pub const tan: RGBA = .init(210, 180, 140, 1);
+        pub const thistle: RGBA = .init(216, 191, 216, 1);
+        pub const tomato: RGBA = .init(255, 99, 71, 1);
+        pub const transparent: RGBA = .init(0, 0, 0, 0);
+        pub const turquoise: RGBA = .init(64, 224, 208, 1);
+        pub const violet: RGBA = .init(238, 130, 238, 1);
+        pub const wheat: RGBA = .init(245, 222, 179, 1);
+        pub const whitesmoke: RGBA = .init(245, 245, 245, 1);
+        pub const yellowgreen: RGBA = .init(154, 205, 50, 1);
+    };
+
+    pub fn init(r: u8, g: u8, b: u8, a: f32) RGBA {
+        const clamped = std.math.clamp(a, 0, 1);
+        return .{ .r = r, .g = g, .b = b, .a = @intFromFloat(clamped * 255) };
+    }
+
+    /// Finds a color by its name.
+    pub fn find(name: []const u8) ?RGBA {
+        const match = std.meta.stringToEnum(std.meta.DeclEnum(Named), name) orelse return null;
+
+        return switch (match) {
+            inline else => |comptime_enum| @field(Named, @tagName(comptime_enum)),
+        };
+    }
+
+    /// Parses the given color.
+    /// Currently we only parse hex colors and named colors; other variants
+    /// require CSS evaluation.
+    pub fn parse(input: []const u8) !RGBA {
+        if (!isHexColor(input)) {
+            // Try named colors.
+            return find(input) orelse return error.Invalid;
+        }
+
+        const slice = input[1..];
+        switch (slice.len) {
+            // This means the digit for a color is repeated.
+            // Given HEX is #f0c, its interpreted the same as #FF00CC.
+            3 => {
+                const r = try std.fmt.parseInt(u8, &.{ slice[0], slice[0] }, 16);
+                const g = try std.fmt.parseInt(u8, &.{ slice[1], slice[1] }, 16);
+                const b = try std.fmt.parseInt(u8, &.{ slice[2], slice[2] }, 16);
+                return .{ .r = r, .g = g, .b = b, .a = 255 };
+            },
+            4 => {
+                const r = try std.fmt.parseInt(u8, &.{ slice[0], slice[0] }, 16);
+                const g = try std.fmt.parseInt(u8, &.{ slice[1], slice[1] }, 16);
+                const b = try std.fmt.parseInt(u8, &.{ slice[2], slice[2] }, 16);
+                const a = try std.fmt.parseInt(u8, &.{ slice[3], slice[3] }, 16);
+                return .{ .r = r, .g = g, .b = b, .a = a };
+            },
+            // Regular HEX format.
+            6 => {
+                const r = try std.fmt.parseInt(u8, slice[0..2], 16);
+                const g = try std.fmt.parseInt(u8, slice[2..4], 16);
+                const b = try std.fmt.parseInt(u8, slice[4..6], 16);
+                return .{ .r = r, .g = g, .b = b, .a = 255 };
+            },
+            8 => {
+                const r = try std.fmt.parseInt(u8, slice[0..2], 16);
+                const g = try std.fmt.parseInt(u8, slice[2..4], 16);
+                const b = try std.fmt.parseInt(u8, slice[4..6], 16);
+                const a = try std.fmt.parseInt(u8, slice[6..8], 16);
+                return .{ .r = r, .g = g, .b = b, .a = a };
+            },
+            else => return error.Invalid,
+        }
+    }
+
+    /// By default, browsers prefer lowercase formatting.
+    const format_upper = false;
+
+    /// Formats the `Color` according to web expectations.
+    /// If color is opaque, HEX is preferred; RGBA otherwise.
+    pub fn format(self: *const RGBA, writer: *Io.Writer) Io.Writer.Error!void {
+        if (self.isOpaque()) {
+            // Convert RGB to HEX.
+            // https://gristle.tripod.com/hexconv.html
+            // Hexadecimal characters up to 15.
+            const char: []const u8 = "0123456789" ++ if (format_upper) "ABCDEF" else "abcdef";
+            // This variant always prefers 6 digit format, +1 is for hash char.
+            const buffer = [7]u8{
+                '#',
+                char[self.r >> 4],
+                char[self.r & 15],
+                char[self.g >> 4],
+                char[self.g & 15],
+                char[self.b >> 4],
+                char[self.b & 15],
+            };
+
+            return writer.writeAll(&buffer);
+        }
+
+        // Prefer RGBA format for everything else.
+        return writer.print("rgba({d}, {d}, {d}, {d:.2})", .{ self.r, self.g, self.b, self.normalizedAlpha() });
+    }
+
+    /// Returns true if `Color` is opaque.
+    pub inline fn isOpaque(self: *const RGBA) bool {
+        return self.a == std.math.maxInt(u8);
+    }
+
+    /// Returns the normalized alpha value.
+    pub inline fn normalizedAlpha(self: *const RGBA) f32 {
+        return @as(f32, @floatFromInt(self.a)) / 255;
+    }
+};

src/browser/css/Parser.zig

@@ -0,0 +1,295 @@
+// 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 Tokenizer = @import("Tokenizer.zig");
+
+pub const Declaration = struct {
+    name: []const u8,
+    value: []const u8,
+    important: bool,
+};
+
+const TokenSpan = struct {
+    token: Tokenizer.Token,
+    start: usize,
+    end: usize,
+};
+
+const TokenStream = struct {
+    tokenizer: Tokenizer,
+    peeked: ?TokenSpan = null,
+
+    fn init(input: []const u8) TokenStream {
+        return .{ .tokenizer = .{ .input = input } };
+    }
+
+    fn nextRaw(self: *TokenStream) ?TokenSpan {
+        const start = self.tokenizer.position;
+        const token = self.tokenizer.next() orelse return null;
+        const end = self.tokenizer.position;
+        return .{ .token = token, .start = start, .end = end };
+    }
+
+    fn next(self: *TokenStream) ?TokenSpan {
+        if (self.peeked) |token| {
+            self.peeked = null;
+            return token;
+        }
+        return self.nextRaw();
+    }
+
+    fn peek(self: *TokenStream) ?TokenSpan {
+        if (self.peeked == null) {
+            self.peeked = self.nextRaw();
+        }
+        return self.peeked;
+    }
+};
+
+pub fn parseDeclarationsList(input: []const u8) DeclarationsIterator {
+    return DeclarationsIterator.init(input);
+}
+
+pub const DeclarationsIterator = struct {
+    input: []const u8,
+    stream: TokenStream,
+
+    pub fn init(input: []const u8) DeclarationsIterator {
+        return .{
+            .input = input,
+            .stream = TokenStream.init(input),
+        };
+    }
+
+    pub fn next(self: *DeclarationsIterator) ?Declaration {
+        while (true) {
+            self.skipTriviaAndSemicolons();
+            const peeked = self.stream.peek() orelse return null;
+
+            switch (peeked.token) {
+                .at_keyword => {
+                    _ = self.stream.next();
+                    self.skipAtRule();
+                },
+                .ident => |name| {
+                    _ = self.stream.next();
+                    if (self.consumeDeclaration(name)) |declaration| {
+                        return declaration;
+                    }
+                },
+                else => {
+                    _ = self.stream.next();
+                    self.skipInvalidDeclaration();
+                },
+            }
+        }
+
+        return null;
+    }
+
+    fn consumeDeclaration(self: *DeclarationsIterator, name: []const u8) ?Declaration {
+        self.skipTrivia();
+
+        const colon = self.stream.next() orelse return null;
+        if (!isColon(colon.token)) {
+            self.skipInvalidDeclaration();
+            return null;
+        }
+
+        const value = self.consumeValue() orelse return null;
+        return .{
+            .name = name,
+            .value = value.value,
+            .important = value.important,
+        };
+    }
+
+    const ValueResult = struct {
+        value: []const u8,
+        important: bool,
+    };
+
+    fn consumeValue(self: *DeclarationsIterator) ?ValueResult {
+        self.skipTrivia();
+
+        var depth: usize = 0;
+        var start: ?usize = null;
+        var last_sig: ?TokenSpan = null;
+        var prev_sig: ?TokenSpan = null;
+
+        while (true) {
+            const peeked = self.stream.peek() orelse break;
+            if (isSemicolon(peeked.token) and depth == 0) {
+                _ = self.stream.next();
+                break;
+            }
+
+            const span = self.stream.next() orelse break;
+            if (isWhitespaceOrComment(span.token)) {
+                continue;
+            }
+
+            if (start == null) start = span.start;
+            prev_sig = last_sig;
+            last_sig = span;
+            updateDepth(span.token, &depth);
+        }
+
+        const value_start = start orelse return null;
+        const last = last_sig orelse return null;
+
+        var important = false;
+        var end_pos = last.end;
+
+        if (isImportantPair(prev_sig, last)) {
+            important = true;
+            const bang = prev_sig orelse return null;
+            if (value_start >= bang.start) return null;
+            end_pos = bang.start;
+        }
+
+        var value_slice = self.input[value_start..end_pos];
+        value_slice = std.mem.trim(u8, value_slice, &std.ascii.whitespace);
+        if (value_slice.len == 0) return null;
+
+        return .{ .value = value_slice, .important = important };
+    }
+
+    fn skipTrivia(self: *DeclarationsIterator) void {
+        while (self.stream.peek()) |peeked| {
+            if (!isWhitespaceOrComment(peeked.token)) break;
+            _ = self.stream.next();
+        }
+    }
+
+    fn skipTriviaAndSemicolons(self: *DeclarationsIterator) void {
+        while (self.stream.peek()) |peeked| {
+            if (isWhitespaceOrComment(peeked.token) or isSemicolon(peeked.token)) {
+                _ = self.stream.next();
+            } else {
+                break;
+            }
+        }
+    }
+
+    fn skipAtRule(self: *DeclarationsIterator) void {
+        var depth: usize = 0;
+        var saw_block = false;
+
+        while (true) {
+            const peeked = self.stream.peek() orelse return;
+            if (!saw_block and isSemicolon(peeked.token) and depth == 0) {
+                _ = self.stream.next();
+                return;
+            }
+
+            const span = self.stream.next() orelse return;
+            if (isWhitespaceOrComment(span.token)) continue;
+
+            if (isBlockStart(span.token)) {
+                depth += 1;
+                saw_block = true;
+            } else if (isBlockEnd(span.token)) {
+                if (depth > 0) depth -= 1;
+                if (saw_block and depth == 0) return;
+            }
+        }
+    }
+
+    fn skipInvalidDeclaration(self: *DeclarationsIterator) void {
+        var depth: usize = 0;
+
+        while (self.stream.peek()) |peeked| {
+            if (isSemicolon(peeked.token) and depth == 0) {
+                _ = self.stream.next();
+                return;
+            }
+
+            const span = self.stream.next() orelse return;
+            if (isWhitespaceOrComment(span.token)) continue;
+            updateDepth(span.token, &depth);
+        }
+    }
+};
+
+fn isWhitespaceOrComment(token: Tokenizer.Token) bool {
+    return switch (token) {
+        .white_space, .comment => true,
+        else => false,
+    };
+}
+
+fn isSemicolon(token: Tokenizer.Token) bool {
+    return switch (token) {
+        .semicolon => true,
+        else => false,
+    };
+}
+
+fn isColon(token: Tokenizer.Token) bool {
+    return switch (token) {
+        .colon => true,
+        else => false,
+    };
+}
+
+fn isBlockStart(token: Tokenizer.Token) bool {
+    return switch (token) {
+        .curly_bracket_block, .square_bracket_block, .parenthesis_block, .function => true,
+        else => false,
+    };
+}
+
+fn isBlockEnd(token: Tokenizer.Token) bool {
+    return switch (token) {
+        .close_curly_bracket, .close_parenthesis, .close_square_bracket => true,
+        else => false,
+    };
+}
+
+fn updateDepth(token: Tokenizer.Token, depth: *usize) void {
+    if (isBlockStart(token)) {
+        depth.* += 1;
+        return;
+    }
+
+    if (isBlockEnd(token)) {
+        if (depth.* > 0) depth.* -= 1;
+    }
+}
+
+fn isImportantPair(prev_sig: ?TokenSpan, last_sig: TokenSpan) bool {
+    if (!isIdentImportant(last_sig.token)) return false;
+    const prev = prev_sig orelse return false;
+    return isBang(prev.token);
+}
+
+fn isIdentImportant(token: Tokenizer.Token) bool {
+    return switch (token) {
+        .ident => |name| std.ascii.eqlIgnoreCase(name, "important"),
+        else => false,
+    };
+}
+
+fn isBang(token: Tokenizer.Token) bool {
+    return switch (token) {
+        .delim => |c| c == '!',
+        else => false,
+    };
+}

src/browser/css/Tokenizer.zig

@@ -0,0 +1,824 @@
+// 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/>.
+
+//! This file implements the tokenization step defined in the CSS Syntax Module Level 3 specification.
+//!
+//! The algorithm accepts a valid UTF-8 string and returns a stream of tokens.
+//! The tokenization step never fails, even for complete gibberish.
+//! Validity must then be checked by the parser.
+//!
+//! NOTE: The tokenizer is not thread-safe and does not own any memory, and does not check the validity of utf8.
+//!
+//! See spec for more info: https://drafts.csswg.org/css-syntax/#tokenization
+
+const std = @import("std");
+const builtin = @import("builtin");
+const assert = std.debug.assert;
+
+const Tokenizer = @This();
+
+pub const Token = union(enum) {
+    /// A `<ident-token>`
+    ident: []const u8,
+
+    /// A `<function-token>`
+    ///
+    /// The value (name) does not include the `(` marker.
+    function: []const u8,
+
+    /// A `<at-keyword-token>`
+    ///
+    /// The value does not include the `@` marker.
+    at_keyword: []const u8,
+
+    /// A `<hash-token>` with the type flag set to "id"
+    ///
+    /// The value does not include the `#` marker.
+    id_hash: []const u8, // Hash that is a valid ID selector.
+
+    /// A `<hash-token>` with the type flag set to "unrestricted"
+    ///
+    /// The value does not include the `#` marker.
+    unrestricted_hash: []const u8,
+
+    /// A `<string-token>`
+    ///
+    /// The value does not include the quotes.
+    string: []const u8,
+
+    /// A `<bad-string-token>`
+    ///
+    /// This token always indicates a parse error.
+    bad_string: []const u8,
+
+    /// A `<url-token>`
+    ///
+    /// The value does not include the `url(` `)` markers.  Note that `url( <string-token> )` is represented by a
+    /// `Function` token.
+    url: []const u8,
+
+    /// A `<bad-url-token>`
+    ///
+    /// This token always indicates a parse error.
+    bad_url: []const u8,
+
+    /// A `<delim-token>`
+    delim: u8,
+
+    /// A `<number-token>`
+    number: struct {
+        /// Whether the number had a `+` or `-` sign.
+        ///
+        /// This is used is some cases like the <An+B> micro syntax. (See the `parse_nth` function.)
+        has_sign: bool,
+
+        /// If the origin source did not include a fractional part, the value as an integer.
+        int_value: ?i32,
+
+        /// The value as a float
+        value: f32,
+    },
+
+    /// A `<percentage-token>`
+    percentage: struct {
+        /// Whether the number had a `+` or `-` sign.
+        has_sign: bool,
+
+        /// If the origin source did not include a fractional part, the value as an integer.
+        /// It is **not** divided by 100.
+        int_value: ?i32,
+
+        /// The value as a float, divided by 100 so that the nominal range is 0.0 to 1.0.
+        unit_value: f32,
+    },
+
+    /// A `<dimension-token>`
+    dimension: struct {
+        /// Whether the number had a `+` or `-` sign.
+        ///
+        /// This is used is some cases like the <An+B> micro syntax. (See the `parse_nth` function.)
+        has_sign: bool,
+
+        /// If the origin source did not include a fractional part, the value as an integer.
+        int_value: ?i32,
+
+        /// The value as a float
+        value: f32,
+
+        /// The unit, e.g. "px" in `12px`
+        unit: []const u8,
+    },
+
+    /// A `<unicode-range-token>`
+    unicode_range: struct { bgn: u32, end: i32 },
+
+    /// A `<whitespace-token>`
+    white_space: []const u8,
+
+    /// A `<!--` `<CDO-token>`
+    cdo,
+
+    /// A `-->` `<CDC-token>`
+    cdc,
+
+    /// A `:` `<colon-token>`
+    colon, // :
+
+    /// A `;` `<semicolon-token>`
+    semicolon, // ;
+
+    /// A `,` `<comma-token>`
+    comma, // ,
+
+    /// A `<[-token>`
+    square_bracket_block,
+
+    /// A `<]-token>`
+    ///
+    /// When obtained from one of the `Parser::next*` methods,
+    /// this token is always unmatched and indicates a parse error.
+    close_square_bracket,
+
+    /// A `<(-token>`
+    parenthesis_block,
+
+    /// A `<)-token>`
+    ///
+    /// When obtained from one of the `Parser::next*` methods,
+    /// this token is always unmatched and indicates a parse error.
+    close_parenthesis,
+
+    /// A `<{-token>`
+    curly_bracket_block,
+
+    /// A `<}-token>`
+    ///
+    /// When obtained from one of the `Parser::next*` methods,
+    /// this token is always unmatched and indicates a parse error.
+    close_curly_bracket,
+
+    /// A comment.
+    ///
+    /// The CSS Syntax spec does not generate tokens for comments,
+    /// But we do for simplicity of the interface.
+    ///
+    /// The value does not include the `/*` `*/` markers.
+    comment: []const u8,
+};
+
+input: []const u8,
+
+/// Counted in bytes, not code points. From 0.
+position: usize = 0,
+
+// If true, the input has at least `n` bytes left *after* the current one.
+// That is, `Lexer.byteAt(n)` will not panic.
+fn hasAtLeast(self: *const Tokenizer, n: usize) bool {
+    return self.position + n < self.input.len;
+}
+
+fn isEof(self: *const Tokenizer) bool {
+    return !self.hasAtLeast(0);
+}
+
+fn byteAt(self: *const Tokenizer, offset: usize) u8 {
+    return self.input[self.position + offset];
+}
+
+// Assumes non-EOF
+fn nextByteUnchecked(self: *const Tokenizer) u8 {
+    return self.byteAt(0);
+}
+
+fn nextByte(self: *const Tokenizer) ?u8 {
+    return if (self.isEof())
+        null
+    else
+        self.input[self.position];
+}
+
+fn startsWith(self: *const Tokenizer, needle: []const u8) bool {
+    return std.mem.startsWith(u8, self.input[self.position..], needle);
+}
+
+fn slice(self: *const Tokenizer, start: usize, end: usize) []const u8 {
+    return self.input[start..end];
+}
+
+fn sliceFrom(self: *const Tokenizer, start_pos: usize) []const u8 {
+    return self.slice(start_pos, self.position);
+}
+
+// Advance over N bytes in the input.  This function can advance
+// over ASCII bytes (excluding newlines), or UTF-8 sequence
+// leaders (excluding leaders for 4-byte sequences).
+fn advance(self: *Tokenizer, n: usize) void {
+    if (builtin.mode == .Debug) {
+        // Each byte must either be an ASCII byte or a sequence leader,
+        // but not a 4-byte leader; also newlines are rejected.
+        for (0..n) |i| {
+            const b = self.byteAt(i);
+            assert(b != '\r' and b != '\n' and b != '\x0C');
+            assert(b <= 0x7F or (b & 0xF0 != 0xF0 and b & 0xC0 != 0x80));
+        }
+    }
+    self.position += n;
+}
+
+fn hasNewlineAt(self: *const Tokenizer, offset: usize) bool {
+    if (!self.hasAtLeast(offset)) return false;
+
+    return switch (self.byteAt(offset)) {
+        '\n', '\r', '\x0C' => true,
+        else => false,
+    };
+}
+
+fn hasNonAsciiAt(self: *const Tokenizer, offset: usize) bool {
+    if (!self.hasAtLeast(offset)) return false;
+
+    const byte = self.byteAt(offset);
+    const len_utf8 = std.unicode.utf8ByteSequenceLength(byte) catch return false;
+
+    if (!self.hasAtLeast(offset + len_utf8 - 1)) return false;
+
+    const start = self.position + offset;
+    const bytes = self.slice(start, start + len_utf8);
+
+    const codepoint = std.unicode.utf8Decode(bytes) catch return false;
+
+    // https://drafts.csswg.org/css-syntax/#non-ascii-ident-code-point
+    return switch (codepoint) {
+        '\u{00B7}', '\u{200C}', '\u{200D}', '\u{203F}', '\u{2040}' => true,
+        '\u{00C0}'...'\u{00D6}' => true,
+        '\u{00D8}'...'\u{00F6}' => true,
+        '\u{00F8}'...'\u{037D}' => true,
+        '\u{037F}'...'\u{1FFF}' => true,
+        '\u{2070}'...'\u{218F}' => true,
+        '\u{2C00}'...'\u{2FEF}' => true,
+        '\u{3001}'...'\u{D7FF}' => true,
+        '\u{F900}'...'\u{FDCF}' => true,
+        '\u{FDF0}'...'\u{FFFD}' => true,
+        else => codepoint >= '\u{10000}',
+    };
+}
+
+fn isIdentStart(self: *Tokenizer) bool {
+    if (self.isEof()) return false;
+
+    var b = self.nextByteUnchecked();
+    if (b == '-') {
+        b = if (self.hasAtLeast(1)) self.byteAt(1) else return false;
+    }
+
+    return switch (b) {
+        'a'...'z', 'A'...'Z', '_', 0x0 => true,
+        '\\' => !self.hasNewlineAt(1),
+        else => b > 0x7F, // not is ascii
+    };
+}
+
+fn consumeChar(self: *Tokenizer) void {
+    const byte = self.nextByteUnchecked();
+    const len_utf8 = std.unicode.utf8ByteSequenceLength(byte) catch 1;
+    self.position += len_utf8;
+}
+
+// Given that a newline has been seen, advance over the newline
+// and update the state.
+fn consumeNewline(self: *Tokenizer) void {
+    const byte = self.nextByteUnchecked();
+    assert(byte == '\r' or byte == '\n' or byte == '\x0C');
+
+    self.position += 1;
+    if (byte == '\r' and self.nextByte() == '\n') {
+        self.position += 1;
+    }
+}
+
+fn consumeWhiteSpace(self: *Tokenizer, newline: bool) Token {
+    const start_position = self.position;
+    if (newline) {
+        self.consumeNewline();
+    } else {
+        self.advance(1);
+    }
+    while (!self.isEof()) {
+        const b = self.nextByteUnchecked();
+        switch (b) {
+            ' ', '\t' => {
+                self.advance(1);
+            },
+            '\n', '\x0C', '\r' => {
+                self.consumeNewline();
+            },
+            else => break,
+        }
+    }
+    return .{ .white_space = self.sliceFrom(start_position) };
+}
+
+fn consumeComment(self: *Tokenizer) []const u8 {
+    self.advance(2); // consume "/*"
+    const start_position = self.position;
+    while (!self.isEof()) {
+        switch (self.nextByteUnchecked()) {
+            '*' => {
+                const end_position = self.position;
+                self.advance(1);
+                if (self.nextByte() == '/') {
+                    self.advance(1);
+                    return self.slice(start_position, end_position);
+                }
+            },
+            '\n', '\x0C', '\r' => {
+                self.consumeNewline();
+            },
+            0x0 => self.advance(1),
+            else => self.consumeChar(),
+        }
+    }
+    return self.sliceFrom(start_position);
+}
+
+fn byteToHexDigit(b: u8) ?u32 {
+    return switch (b) {
+        '0'...'9' => b - '0',
+        'a'...'f' => b - 'a' + 10,
+        'A'...'F' => b - 'A' + 10,
+        else => null,
+    };
+}
+
+fn byteToDecimalDigit(b: u8) ?u32 {
+    return if (std.ascii.isDigit(b)) b - '0' else null;
+}
+
+// (value, number of digits up to 6)
+fn consumeHexDigits(self: *Tokenizer) void {
+    var value: u32 = 0;
+    var digits: u32 = 0;
+
+    while (digits < 6 and !self.isEof()) {
+        if (byteToHexDigit(self.nextByteUnchecked())) |digit| {
+            value = value * 16 + digit;
+            digits += 1;
+            self.advance(1);
+        } else {
+            break;
+        }
+    }
+
+    _ = &value;
+}
+
+// Assumes that the U+005C REVERSE SOLIDUS (\) has already been consumed
+// and that the next input character has already been verified
+// to not be a newline.
+fn consumeEscape(self: *Tokenizer) void {
+    if (self.isEof())
+        return; // Escaped EOF
+
+    switch (self.nextByteUnchecked()) {
+        '0'...'9', 'A'...'F', 'a'...'f' => {
+            consumeHexDigits(self);
+
+            if (!self.isEof()) {
+                switch (self.nextByteUnchecked()) {
+                    ' ', '\t' => {
+                        self.advance(1);
+                    },
+                    '\n', '\x0C', '\r' => {
+                        self.consumeNewline();
+                    },
+                    else => {},
+                }
+            }
+        },
+        else => self.consumeChar(),
+    }
+}
+
+/// https://drafts.csswg.org/css-syntax/#consume-string-token
+fn consumeString(self: *Tokenizer, single_quote: bool) Token {
+    self.advance(1); // Skip the initial quote
+
+    // start_pos is at code point boundary, after " or '
+    const start_pos = self.position;
+
+    while (!self.isEof()) {
+        switch (self.nextByteUnchecked()) {
+            '"' => {
+                if (!single_quote) {
+                    const value = self.sliceFrom(start_pos);
+                    self.advance(1);
+                    return .{ .string = value };
+                }
+                self.advance(1);
+            },
+            '\'' => {
+                if (single_quote) {
+                    const value = self.sliceFrom(start_pos);
+                    self.advance(1);
+                    return .{ .string = value };
+                }
+                self.advance(1);
+            },
+            '\n', '\r', '\x0C' => {
+                return .{ .bad_string = self.sliceFrom(start_pos) };
+            },
+            '\\' => {
+                self.advance(1);
+                if (self.isEof())
+                    continue; // escaped EOF, do nothing.
+
+                switch (self.nextByteUnchecked()) {
+                    // Escaped newline
+                    '\n', '\x0C', '\r' => self.consumeNewline(),
+
+                    // Spec calls for replacing escape sequences with characters,
+                    // but this would require allocating a new string.
+                    // Therefore, we leave it as is and let the parser handle the escaping.
+                    else => self.consumeEscape(),
+                }
+            },
+            else => self.consumeChar(),
+        }
+    }
+
+    return .{ .string = self.sliceFrom(start_pos) };
+}
+
+fn consumeName(self: *Tokenizer) []const u8 {
+    // start_pos is the end of the previous token, therefore at a code point boundary
+    const start_pos = self.position;
+
+    while (!self.isEof()) {
+        switch (self.nextByteUnchecked()) {
+            'a'...'z', 'A'...'Z', '0'...'9', '_', '-' => self.advance(1),
+            '\\' => {
+                if (self.hasNewlineAt(1)) {
+                    break;
+                }
+
+                self.advance(1);
+                self.consumeEscape();
+            },
+            0x0 => self.advance(1),
+            '\x80'...'\xBF', '\xC0'...'\xEF', '\xF0'...'\xFF' => {
+                // This byte *is* part of a multi-byte code point,
+                // we’ll end up copying the whole code point before this loop does something else.
+                self.advance(1);
+            },
+            else => {
+                if (self.hasNonAsciiAt(0)) {
+                    self.consumeChar();
+                } else {
+                    break; // ASCII
+                }
+            },
+        }
+    }
+
+    return self.sliceFrom(start_pos);
+}
+
+fn consumeMark(self: *Tokenizer) Token {
+    const byte = self.nextByteUnchecked();
+    self.advance(1);
+    return switch (byte) {
+        ',' => .comma,
+        ':' => .colon,
+        ';' => .semicolon,
+        '(' => .parenthesis_block,
+        ')' => .close_parenthesis,
+        '{' => .curly_bracket_block,
+        '}' => .close_curly_bracket,
+        '[' => .square_bracket_block,
+        ']' => .close_square_bracket,
+        else => unreachable,
+    };
+}
+
+fn consumeNumeric(self: *Tokenizer) Token {
+    // Parse [+-]?\d*(\.\d+)?([eE][+-]?\d+)?
+    // But this is always called so that there is at least one digit in \d*(\.\d+)?
+
+    // Do all the math in f64 so that large numbers overflow to +/-inf
+    // and i32::{MIN, MAX} are within range.
+
+    var sign: f64 = 1.0;
+    var has_sign = false;
+    switch (self.nextByteUnchecked()) {
+        '+' => {
+            has_sign = true;
+        },
+        '-' => {
+            has_sign = true;
+            sign = -1.0;
+        },
+        else => {},
+    }
+    if (has_sign) {
+        self.advance(1);
+    }
+
+    var is_integer = true;
+    var integral_part: f64 = 0.0;
+    var fractional_part: f64 = 0.0;
+
+    while (!self.isEof()) {
+        if (byteToDecimalDigit(self.nextByteUnchecked())) |digit| {
+            integral_part = integral_part * 10.0 + @as(f64, @floatFromInt(digit));
+            self.advance(1);
+        } else {
+            break;
+        }
+    }
+
+    if (self.hasAtLeast(1) and self.nextByteUnchecked() == '.' and std.ascii.isDigit(self.byteAt(1))) {
+        is_integer = false;
+        self.advance(1); // Consume '.'
+
+        var factor: f64 = 0.1;
+        while (!self.isEof()) {
+            if (byteToDecimalDigit(self.nextByteUnchecked())) |digit| {
+                fractional_part += @as(f64, @floatFromInt(digit)) * factor;
+                factor *= 0.1;
+                self.advance(1);
+            } else {
+                break;
+            }
+        }
+    }
+
+    var value = sign * (integral_part + fractional_part);
+
+    blk: {
+        const e = self.nextByte() orelse break :blk;
+        if (e != 'e' and e != 'E') break :blk;
+
+        var mul: f64 = 1.0;
+
+        if (self.hasAtLeast(2) and (self.byteAt(1) == '+' or self.byteAt(1) == '-') and std.ascii.isDigit(self.byteAt(2))) {
+            mul = switch (self.byteAt(1)) {
+                '-' => -1.0,
+                '+' => 1.0,
+                else => unreachable,
+            };
+
+            self.advance(2);
+        } else if (self.hasAtLeast(1) and std.ascii.isDigit(self.byteAt(2))) {
+            self.advance(1);
+        } else {
+            break :blk;
+        }
+
+        is_integer = false;
+
+        var exponent: f64 = 0.0;
+        while (!self.isEof()) {
+            if (byteToDecimalDigit(self.nextByteUnchecked())) |digit| {
+                exponent = exponent * 10.0 + @as(f64, @floatFromInt(digit));
+                self.advance(1);
+            } else {
+                break;
+            }
+        }
+        value *= std.math.pow(f64, 10.0, mul * exponent);
+    }
+
+    const int_value: ?i32 = if (is_integer) blk: {
+        if (value >= std.math.maxInt(i32)) {
+            break :blk std.math.maxInt(i32);
+        }
+
+        if (value <= std.math.minInt(i32)) {
+            break :blk std.math.minInt(i32);
+        }
+
+        break :blk @as(i32, @intFromFloat(value));
+    } else null;
+
+    if (!self.isEof() and self.nextByteUnchecked() == '%') {
+        self.advance(1);
+
+        return .{ .percentage = .{
+            .has_sign = has_sign,
+            .int_value = int_value,
+            .unit_value = @as(f32, @floatCast(value / 100.0)),
+        } };
+    }
+
+    if (isIdentStart(self)) {
+        return .{ .dimension = .{
+            .has_sign = has_sign,
+            .int_value = int_value,
+            .value = @as(f32, @floatCast(value)),
+            .unit = consumeName(self),
+        } };
+    }
+
+    return .{ .number = .{
+        .has_sign = has_sign,
+        .int_value = int_value,
+        .value = @as(f32, @floatCast(value)),
+    } };
+}
+
+fn consumeUnquotedUrl(self: *Tokenizer) ?Token {
+    // TODO: true url parser
+    if (self.nextByte()) |it| {
+        return self.consumeString(it == '\'');
+    }
+
+    return null;
+}
+
+fn consumeIdentLike(self: *Tokenizer) Token {
+    const value = self.consumeName();
+
+    if (!self.isEof() and self.nextByteUnchecked() == '(') {
+        self.advance(1);
+
+        if (std.ascii.eqlIgnoreCase(value, "url")) {
+            if (self.consumeUnquotedUrl()) |result| {
+                return result;
+            }
+        }
+
+        return .{ .function = value };
+    }
+
+    return .{ .ident = value };
+}
+
+pub fn next(self: *Tokenizer) ?Token {
+    if (self.isEof()) {
+        return null;
+    }
+
+    const b = self.nextByteUnchecked();
+    return switch (b) {
+        // Consume comments
+        '/' => {
+            if (self.startsWith("/*")) {
+                return .{ .comment = self.consumeComment() };
+            } else {
+                self.advance(1);
+                return .{ .delim = '/' };
+            }
+        },
+
+        // Consume marks
+        '(', ')', '{', '}', '[', ']', ',', ':', ';' => {
+            return self.consumeMark();
+        },
+
+        // Consume as much whitespace as possible. Return a <whitespace-token>.
+        ' ', '\t' => self.consumeWhiteSpace(false),
+        '\n', '\x0C', '\r' => self.consumeWhiteSpace(true),
+
+        // Consume a string token and return it.
+        '"' => self.consumeString(false),
+        '\'' => self.consumeString(true),
+
+        '0'...'9' => self.consumeNumeric(),
+        'a'...'z', 'A'...'Z', '_', 0x0 => self.consumeIdentLike(),
+
+        '+' => {
+            if ((self.hasAtLeast(1) and std.ascii.isDigit(self.byteAt(1))) or
+                (self.hasAtLeast(2) and self.byteAt(1) == '.' and std.ascii.isDigit(self.byteAt(2))))
+            {
+                return self.consumeNumeric();
+            }
+            self.advance(1);
+            return .{ .delim = '+' };
+        },
+        '-' => {
+            if ((self.hasAtLeast(1) and std.ascii.isDigit(self.byteAt(1))) or
+                (self.hasAtLeast(2) and self.byteAt(1) == '.' and std.ascii.isDigit(self.byteAt(2))))
+            {
+                return self.consumeNumeric();
+            }
+
+            if (self.startsWith("-->")) {
+                self.advance(3);
+                return .cdc;
+            }
+
+            if (isIdentStart(self)) {
+                return self.consumeIdentLike();
+            }
+
+            self.advance(1);
+            return .{ .delim = '-' };
+        },
+        '.' => {
+            if (self.hasAtLeast(1) and std.ascii.isDigit(self.byteAt(1))) {
+                return self.consumeNumeric();
+            }
+            self.advance(1);
+            return .{ .delim = '.' };
+        },
+
+        // Consume hash token
+        '#' => {
+            self.advance(1);
+            if (self.isIdentStart()) {
+                return .{ .id_hash = self.consumeName() };
+            }
+            if (self.nextByte()) |it| {
+                switch (it) {
+                    // Any other valid case here already resulted in IDHash.
+                    '0'...'9', '-' => return .{ .unrestricted_hash = self.consumeName() },
+                    else => {},
+                }
+            }
+            return .{ .delim = '#' };
+        },
+
+        // Consume at-rules
+        '@' => {
+            self.advance(1);
+            return if (isIdentStart(self))
+                .{ .at_keyword = consumeName(self) }
+            else
+                .{ .delim = '@' };
+        },
+
+        '<' => {
+            if (self.startsWith("<!--")) {
+                self.advance(4);
+                return .cdo;
+            } else {
+                self.advance(1);
+                return .{ .delim = '<' };
+            }
+        },
+
+        '\\' => {
+            if (!self.hasNewlineAt(1)) {
+                return self.consumeIdentLike();
+            }
+
+            self.advance(1);
+            return .{ .delim = '\\' };
+        },
+
+        else => {
+            if (b > 0x7F) { // not is ascii
+                return self.consumeIdentLike();
+            }
+
+            self.advance(1);
+            return .{ .delim = b };
+        },
+    };
+}
+
+const testing = std.testing;
+
+fn expectTokensEqual(input: []const u8, tokens: []const Token) !void {
+    var lexer = Tokenizer{ .input = input };
+
+    var i: usize = 0;
+    while (lexer.next()) |token| : (i += 1) {
+        assert(i < tokens.len);
+        try testing.expectEqualDeep(tokens[i], token);
+    }
+
+    try testing.expectEqual(i, tokens.len);
+    try testing.expectEqualDeep(null, lexer.next());
+}
+
+test "smoke" {
+    try expectTokensEqual(
+        \\.lightpanda  {color:red;}
+    , &.{
+        .{ .delim = '.' },
+        .{ .ident = "lightpanda" },
+        .{ .white_space = "  " },
+        .curly_bracket_block,
+        .{ .ident = "color" },
+        .colon,
+        .{ .ident = "red" },
+        .semicolon,
+        .close_curly_bracket,
+    });
+}

src/browser/dump.zig

@@ -1,4 +1,4 @@
-// Copyright (C) 2023-2024  Lightpanda (Selecy SAS)
+// Copyright (C) 2023-2025  Lightpanda (Selecy SAS)
 //
 // Francis Bouvier <francis@lightpanda.io>
 // Pierre Tachoire <pierre@lightpanda.io>
@@ -17,116 +17,318 @@
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.
 
 const std = @import("std");
-const File = std.fs.File;
+const Page = @import("Page.zig");
+const Node = @import("webapi/Node.zig");
+const Slot = @import("webapi/element/html/Slot.zig");
 
-const parser = @import("netsurf");
-const Walker = @import("../dom/walker.zig").WalkerChildren;
+pub const RootOpts = struct {
+    with_base: bool = false,
+    strip: Opts.Strip = .{},
+    shadow: Opts.Shadow = .rendered,
+};
 
-// writer must be a std.io.Writer
-pub fn writeHTML(doc: *parser.Document, writer: anytype) !void {
-    try writer.writeAll("<!DOCTYPE html>\n");
-    try writeNode(parser.documentToNode(doc), writer);
-    try writer.writeAll("\n");
-}
+pub const Opts = struct {
+    strip: Strip = .{},
+    shadow: Shadow = .rendered,
 
-// writer must be a std.io.Writer
-pub fn writeNode(root: *parser.Node, writer: anytype) !void {
-    const walker = Walker{};
-    var next: ?*parser.Node = null;
-    while (true) {
-        next = try walker.get_next(root, next) orelse break;
-        switch (try parser.nodeType(next.?)) {
-            .element => {
-                // open the tag
-                const tag = try parser.nodeLocalName(next.?);
-                try writer.writeAll("<");
-                try writer.writeAll(tag);
+    pub const Strip = struct {
+        js: bool = false,
+        ui: bool = false,
+        css: bool = false,
+    };
 
-                // write the attributes
-                const map = try parser.nodeGetAttributes(next.?);
-                const ln = try parser.namedNodeMapGetLength(map);
-                var i: u32 = 0;
-                while (i < ln) {
-                    const attr = try parser.namedNodeMapItem(map, i) orelse break;
-                    try writer.writeAll(" ");
-                    try writer.writeAll(try parser.attributeGetName(attr));
-                    try writer.writeAll("=\"");
-                    try writer.writeAll(try parser.attributeGetValue(attr) orelse "");
-                    try writer.writeAll("\"");
-                    i += 1;
+    pub const Shadow = enum {
+        // Skip shadow DOM entirely (innerHTML/outerHTML)
+        skip,
+
+        // Dump everyhting (like "view source")
+        complete,
+
+        // Resolve slot elements (like what actually gets rendered)
+        rendered,
+    };
+};
+
+pub fn root(doc: *Node.Document, opts: RootOpts, writer: *std.Io.Writer, page: *Page) !void {
+    if (doc.is(Node.Document.HTMLDocument)) |html_doc| {
+        blk: {
+            // Ideally we just render the doctype which is part of the document
+            if (doc.asNode().firstChild()) |first| {
+                if (first._type == .document_type) {
+                    break :blk;
+                }
+            }
+            // But if the doc has no child, or the first child isn't a doctype
+            // well force it.
+            try writer.writeAll("<!DOCTYPE html>");
         }
 
-                try writer.writeAll(">");
+        if (opts.with_base) {
+            const parent = if (html_doc.getHead()) |head| head.asNode() else doc.asNode();
+            const base = try doc.createElement("base", null, page);
+            try base.setAttributeSafe(comptime .wrap("base"), .wrap(page.base()), page);
+            _ = try parent.insertBefore(base.asNode(), parent.firstChild(), page);
+        }
+    }
 
-                // void elements can't have any content.
-                if (try isVoid(parser.nodeToElement(next.?))) continue;
+    return deep(doc.asNode(), .{ .strip = opts.strip, .shadow = opts.shadow }, writer, page);
+}
 
-                // write the children
-                // TODO avoid recursion
-                try writeNode(next.?, writer);
+pub fn deep(node: *Node, opts: Opts, writer: *std.Io.Writer, page: *Page) error{WriteFailed}!void {
+    return _deep(node, opts, false, writer, page);
+}
 
-                // close the tag
-                try writer.writeAll("</");
-                try writer.writeAll(tag);
-                try writer.writeAll(">");
-            },
-            .text => {
-                const v = try parser.nodeValue(next.?) orelse continue;
-                try writer.writeAll(v);
-            },
-            .cdata_section => {
-                const v = try parser.nodeValue(next.?) orelse continue;
-                try writer.writeAll("<![CDATA[");
-                try writer.writeAll(v);
-                try writer.writeAll("]]>");
-            },
-            .comment => {
-                const v = try parser.nodeValue(next.?) orelse continue;
+fn _deep(node: *Node, opts: Opts, comptime force_slot: bool, writer: *std.Io.Writer, page: *Page) error{WriteFailed}!void {
+    switch (node._type) {
+        .cdata => |cd| {
+            if (node.is(Node.CData.Comment)) |_| {
                 try writer.writeAll("<!--");
-                try writer.writeAll(v);
+                try writer.writeAll(cd.getData());
                 try writer.writeAll("-->");
-            },
-            // TODO handle processing instruction dump
-            .processing_instruction => continue,
-            // document fragment is outside of the main document DOM, so we
-            // don't output it.
-            .document_fragment => continue,
-            // document will never be called, but required for completeness.
-            .document => continue,
-            // done globally instead, but required for completeness.
-            .document_type => continue,
-            // deprecated
-            .attribute => continue,
-            .entity_reference => continue,
-            .entity => continue,
-            .notation => continue,
+            } else if (node.is(Node.CData.ProcessingInstruction)) |pi| {
+                try writer.writeAll("<?");
+                try writer.writeAll(pi._target);
+                try writer.writeAll(" ");
+                try writer.writeAll(cd.getData());
+                try writer.writeAll("?>");
+            } else {
+                if (shouldEscapeText(node._parent)) {
+                    try writeEscapedText(cd.getData(), writer);
+                } else {
+                    try writer.writeAll(cd.getData());
                 }
             }
+        },
+        .element => |el| {
+            if (shouldStripElement(el, opts)) {
+                return;
+            }
+
+            // When opts.shadow == .rendered, we normally skip any element with
+            // a slot attribute. Only the "active" element will get rendered into
+            // the <slot name="X">. However, the `deep` function is itself used
+            // to render that "active" content, so when we're trying to render
+            // it, we don't want to skip it.
+            if ((comptime force_slot == false) and opts.shadow == .rendered) {
+                if (el.getAttributeSafe(comptime .wrap("slot"))) |_| {
+                    // Skip - will be rendered by the Slot if it's the active container
+                    return;
+                }
+            }
+
+            try el.format(writer);
+
+            if (opts.shadow == .rendered) {
+                if (el.is(Slot)) |slot| {
+                    try dumpSlotContent(slot, opts, writer, page);
+                    return writer.writeAll("</slot>");
+                }
+            }
+            if (opts.shadow != .skip) {
+                if (page._element_shadow_roots.get(el)) |shadow| {
+                    try children(shadow.asNode(), opts, writer, page);
+                    // In rendered mode, light DOM is only shown through slots, not directly
+                    if (opts.shadow == .rendered) {
+                        // Skip rendering light DOM children
+                        if (!isVoidElement(el)) {
+                            try writer.writeAll("</");
+                            try writer.writeAll(el.getTagNameDump());
+                            try writer.writeByte('>');
+                        }
+                        return;
+                    }
+                }
+            }
+
+            try children(node, opts, writer, page);
+            if (!isVoidElement(el)) {
+                try writer.writeAll("</");
+                try writer.writeAll(el.getTagNameDump());
+                try writer.writeByte('>');
+            }
+        },
+        .document => try children(node, opts, writer, page),
+        .document_type => |dt| {
+            try writer.writeAll("<!DOCTYPE ");
+            try writer.writeAll(dt.getName());
+
+            const public_id = dt.getPublicId();
+            const system_id = dt.getSystemId();
+            if (public_id.len != 0 and system_id.len != 0) {
+                try writer.writeAll(" PUBLIC \"");
+                try writeEscapedText(public_id, writer);
+                try writer.writeAll("\" \"");
+                try writeEscapedText(system_id, writer);
+                try writer.writeByte('"');
+            } else if (public_id.len != 0) {
+                try writer.writeAll(" PUBLIC \"");
+                try writeEscapedText(public_id, writer);
+                try writer.writeByte('"');
+            } else if (system_id.len != 0) {
+                try writer.writeAll(" SYSTEM \"");
+                try writeEscapedText(system_id, writer);
+                try writer.writeByte('"');
+            }
+            try writer.writeAll(">\n");
+        },
+        .document_fragment => try children(node, opts, writer, page),
+        .attribute => unreachable,
+    }
 }
 
-// area, base, br, col, embed, hr, img, input, link, meta, source, track, wbr
-// https://html.spec.whatwg.org/#void-elements
-fn isVoid(elem: *parser.Element) !bool {
-    const tag = try parser.elementHTMLGetTagType(@as(*parser.ElementHTML, @ptrCast(elem)));
-    return switch (tag) {
-        .area, .base, .br, .col, .embed, .hr, .img, .input, .link => true,
-        .meta, .source, .track, .wbr => true,
+pub fn children(parent: *Node, opts: Opts, writer: *std.Io.Writer, page: *Page) !void {
+    var it = parent.childrenIterator();
+    while (it.next()) |child| {
+        try deep(child, opts, writer, page);
+    }
+}
+
+pub fn toJSON(node: *Node, writer: *std.json.Stringify) !void {
+    try writer.beginObject();
+
+    try writer.objectField("type");
+    switch (node.type) {
+        .cdata => {
+            try writer.write("cdata");
+        },
+        .document => {
+            try writer.write("document");
+        },
+        .document_type => {
+            try writer.write("document_type");
+        },
+        .element => |*el| {
+            try writer.write("element");
+            try writer.objectField("tag");
+            try writer.write(el.tagName());
+
+            try writer.objectField("attributes");
+            try writer.beginObject();
+            var it = el.attributeIterator();
+            while (it.next()) |attr| {
+                try writer.objectField(attr.name);
+                try writer.write(attr.value);
+            }
+            try writer.endObject();
+        },
+    }
+
+    try writer.objectField("children");
+    try writer.beginArray();
+    var it = node.childrenIterator();
+    while (it.next()) |child| {
+        try toJSON(child, writer);
+    }
+    try writer.endArray();
+    try writer.endObject();
+}
+
+fn dumpSlotContent(slot: *Slot, opts: Opts, writer: *std.Io.Writer, page: *Page) !void {
+    const assigned = slot.assignedNodes(null, page) catch return;
+
+    if (assigned.len > 0) {
+        for (assigned) |assigned_node| {
+            try _deep(assigned_node, opts, true, writer, page);
+        }
+    } else {
+        try children(slot.asNode(), opts, writer, page);
+    }
+}
+
+fn isVoidElement(el: *const Node.Element) bool {
+    return switch (el._type) {
+        .html => |html| switch (html._type) {
+            .br, .hr, .img, .input, .link, .meta => true,
             else => false,
+        },
+        .svg => false,
     };
 }
 
-test "dump.writeHTML" {
-    const out = try std.fs.openFileAbsolute("/dev/null", .{ .mode = .write_only });
-    defer out.close();
+fn shouldStripElement(el: *const Node.Element, opts: Opts) bool {
+    const tag_name = el.getTagNameDump();
 
-    const file = try std.fs.cwd().openFile("test.html", .{});
-    defer file.close();
+    if (opts.strip.js) {
+        if (std.mem.eql(u8, tag_name, "script")) return true;
+        if (std.mem.eql(u8, tag_name, "noscript")) return true;
 
-    const doc_html = try parser.documentHTMLParse(file.reader(), "UTF-8");
-    // ignore close error
-    defer parser.documentHTMLClose(doc_html) catch {};
+        if (std.mem.eql(u8, tag_name, "link")) {
+            if (el.getAttributeSafe(comptime .wrap("as"))) |as| {
+                if (std.mem.eql(u8, as, "script")) return true;
+            }
+            if (el.getAttributeSafe(comptime .wrap("rel"))) |rel| {
+                if (std.mem.eql(u8, rel, "modulepreload") or std.mem.eql(u8, rel, "preload")) {
+                    if (el.getAttributeSafe(comptime .wrap("as"))) |as| {
+                        if (std.mem.eql(u8, as, "script")) return true;
+                    }
+                }
+            }
+        }
+    }
 
-    const doc = parser.documentHTMLToDocument(doc_html);
+    if (opts.strip.css or opts.strip.ui) {
+        if (std.mem.eql(u8, tag_name, "style")) return true;
 
-    try writeHTML(doc, out);
+        if (std.mem.eql(u8, tag_name, "link")) {
+            if (el.getAttributeSafe(comptime .wrap("rel"))) |rel| {
+                if (std.mem.eql(u8, rel, "stylesheet")) return true;
+            }
+        }
+    }
+
+    if (opts.strip.ui) {
+        if (std.mem.eql(u8, tag_name, "img")) return true;
+        if (std.mem.eql(u8, tag_name, "picture")) return true;
+        if (std.mem.eql(u8, tag_name, "video")) return true;
+        if (std.mem.eql(u8, tag_name, "audio")) return true;
+        if (std.mem.eql(u8, tag_name, "svg")) return true;
+        if (std.mem.eql(u8, tag_name, "canvas")) return true;
+        if (std.mem.eql(u8, tag_name, "iframe")) return true;
+    }
+
+    return false;
+}
+
+fn shouldEscapeText(node_: ?*Node) bool {
+    const node = node_ orelse return true;
+    if (node.is(Node.Element.Html.Script) != null) {
+        return false;
+    }
+    return true;
+}
+fn writeEscapedText(text: []const u8, writer: *std.Io.Writer) !void {
+    // Fast path: if no special characters, write directly
+    const first_special = std.mem.indexOfAnyPos(u8, text, 0, &.{ '&', '<', '>', 194 }) orelse {
+        return writer.writeAll(text);
+    };
+
+    try writer.writeAll(text[0..first_special]);
+    var remaining = try writeEscapedByte(text, first_special, writer);
+
+    while (std.mem.indexOfAnyPos(u8, remaining, 0, &.{ '&', '<', '>', 194 })) |offset| {
+        try writer.writeAll(remaining[0..offset]);
+        remaining = try writeEscapedByte(remaining, offset, writer);
+    }
+
+    if (remaining.len > 0) {
+        try writer.writeAll(remaining);
+    }
+}
+
+fn writeEscapedByte(input: []const u8, index: usize, writer: *std.Io.Writer) ![]const u8 {
+    switch (input[index]) {
+        '&' => try writer.writeAll("&amp;"),
+        '<' => try writer.writeAll("&lt;"),
+        '>' => try writer.writeAll("&gt;"),
+        194 => {
+            // non breaking space
+            if (input.len > index + 1 and input[index + 1] == 160) {
+                try writer.writeAll("&nbsp;");
+                return input[index + 2 ..];
+            }
+            try writer.writeByte(194);
+        },
+        else => unreachable,
+    }
+    return input[index + 1 ..];
 }

src/browser/js/Array.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 js = @import("js.zig");
+const v8 = js.v8;
+
+const Array = @This();
+
+local: *const js.Local,
+handle: *const v8.Array,
+
+pub fn len(self: Array) usize {
+    return v8.v8__Array__Length(self.handle);
+}
+
+pub fn get(self: Array, index: u32) !js.Value {
+    const ctx = self.local.ctx;
+
+    const idx = js.Integer.init(ctx.isolate.handle, index);
+    const handle = v8.v8__Object__Get(@ptrCast(self.handle), self.local.handle, idx.handle) orelse {
+        return error.JsException;
+    };
+
+    return .{
+        .local = self.local,
+        .handle = handle,
+    };
+}
+
+pub fn set(self: Array, index: u32, value: anytype, comptime opts: js.Caller.CallOpts) !bool {
+    const js_value = try self.local.zigValueToJs(value, opts);
+
+    var out: v8.MaybeBool = undefined;
+    v8.v8__Object__SetAtIndex(@ptrCast(self.handle), self.local.handle, index, js_value.handle, &out);
+    return out.has_value;
+}
+
+pub fn toObject(self: Array) js.Object {
+    return .{
+        .local = self.local,
+        .handle = @ptrCast(self.handle),
+    };
+}
+
+pub fn toValue(self: Array) js.Value {
+    return .{
+        .local = self.local,
+        .handle = @ptrCast(self.handle),
+    };
+}

src/browser/js/BigInt.zig

@@ -0,0 +1,41 @@
+// 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 js = @import("js.zig");
+const v8 = js.v8;
+
+const BigInt = @This();
+
+handle: *const v8.Integer,
+
+pub fn init(isolate: *v8.Isolate, val: anytype) BigInt {
+    const handle = switch (@TypeOf(val)) {
+        i8, i16, i32, i64, isize => v8.v8__BigInt__New(isolate, val).?,
+        u8, u16, u32, u64, usize => v8.v8__BigInt__NewFromUnsigned(isolate, val).?,
+        else => |T| @compileError("cannot create v8::BigInt from: " ++ @typeName(T)),
+    };
+    return .{ .handle = handle };
+}
+
+pub fn getInt64(self: BigInt) i64 {
+    return v8.v8__BigInt__Int64Value(self.handle, null);
+}
+
+pub fn getUint64(self: BigInt) u64 {
+    return v8.v8__BigInt__Uint64Value(self.handle, null);
+}

src/browser/js/Caller.zig

@@ -0,0 +1,585 @@
+// Copyright (C) 2023-2026  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 log = @import("../../log.zig");
+const string = @import("../../string.zig");
+
+const Page = @import("../Page.zig");
+
+const js = @import("js.zig");
+const bridge = @import("bridge.zig");
+const Context = @import("Context.zig");
+const TaggedOpaque = @import("TaggedOpaque.zig");
+
+const v8 = js.v8;
+const Allocator = std.mem.Allocator;
+const ArenaAllocator = std.heap.ArenaAllocator;
+
+const CALL_ARENA_RETAIN = 1024 * 16;
+const IS_DEBUG = @import("builtin").mode == .Debug;
+
+const Caller = @This();
+local: js.Local,
+prev_local: ?*const js.Local,
+
+// Takes the raw v8 isolate and extracts the context from it.
+pub fn init(self: *Caller, v8_isolate: *v8.Isolate) void {
+    const v8_context_handle = v8.v8__Isolate__GetCurrentContext(v8_isolate);
+
+    const embedder_data = v8.v8__Context__GetEmbedderData(v8_context_handle, 1);
+    var lossless: bool = undefined;
+    const ctx: *Context = @ptrFromInt(v8.v8__BigInt__Uint64Value(embedder_data, &lossless));
+
+    ctx.call_depth += 1;
+    self.* = Caller{
+        .local = .{
+            .ctx = ctx,
+            .handle = v8_context_handle.?,
+            .call_arena = ctx.call_arena,
+            .isolate = .{ .handle = v8_isolate },
+        },
+        .prev_local = ctx.local,
+    };
+    ctx.local = &self.local;
+}
+
+pub fn deinit(self: *Caller) void {
+    const ctx = self.local.ctx;
+    const call_depth = ctx.call_depth - 1;
+
+    // Because of callbacks, calls can be nested. Because of this, we
+    // can't clear the call_arena after _every_ call. Imagine we have
+    //    arr.forEach((i) => { console.log(i); }
+    //
+    // First we call forEach. Inside of our forEach call,
+    // we call console.log. If we reset the call_arena after this call,
+    // it'll reset it for the `forEach` call after, which might still
+    // need the data.
+    //
+    // 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) {
+        const arena: *ArenaAllocator = @ptrCast(@alignCast(ctx.call_arena.ptr));
+        _ = arena.reset(.{ .retain_with_limit = CALL_ARENA_RETAIN });
+    }
+
+    ctx.call_depth = call_depth;
+    ctx.local = self.prev_local;
+}
+
+pub const CallOpts = struct {
+    cache: ?[]const u8 = null,
+    dom_exception: bool = false,
+    null_as_undefined: bool = false,
+    as_typed_array: bool = false,
+};
+
+pub fn constructor(self: *Caller, comptime T: type, func: anytype, handle: *const v8.FunctionCallbackInfo, comptime opts: CallOpts) void {
+    var hs: js.HandleScope = undefined;
+    hs.init(self.local.isolate);
+    defer hs.deinit();
+
+    const info = FunctionCallbackInfo{ .handle = handle };
+
+    if (!info.isConstructCall()) {
+        self.handleError(T, @TypeOf(func), error.InvalidArgument, info, opts);
+        return;
+    }
+
+    self._constructor(func, info) catch |err| {
+        self.handleError(T, @TypeOf(func), err, info, opts);
+    };
+}
+
+fn _constructor(self: *Caller, func: anytype, info: FunctionCallbackInfo) !void {
+    const F = @TypeOf(func);
+    const args = try self.getArgs(F, 0, info);
+    const res = @call(.auto, func, args);
+
+    const ReturnType = @typeInfo(F).@"fn".return_type orelse {
+        @compileError(@typeName(F) ++ " has a constructor without a return type");
+    };
+
+    const new_this_handle = info.getThis();
+    var this = js.Object{ .local = &self.local, .handle = new_this_handle };
+    if (@typeInfo(ReturnType) == .error_union) {
+        const non_error_res = res catch |err| return err;
+        this = try self.local.mapZigInstanceToJs(new_this_handle, non_error_res);
+    } else {
+        this = try self.local.mapZigInstanceToJs(new_this_handle, res);
+    }
+
+    // If we got back a different object (existing wrapper), copy the prototype
+    // from new object. (this happens when we're upgrading an CustomElement)
+    if (this.handle != new_this_handle) {
+        const prototype_handle = v8.v8__Object__GetPrototype(new_this_handle).?;
+        var out: v8.MaybeBool = undefined;
+        v8.v8__Object__SetPrototype(this.handle, self.local.handle, prototype_handle, &out);
+        if (comptime IS_DEBUG) {
+            std.debug.assert(out.has_value and out.value);
+        }
+    }
+
+    info.getReturnValue().set(this.handle);
+}
+
+pub fn method(self: *Caller, comptime T: type, func: anytype, handle: *const v8.FunctionCallbackInfo, comptime opts: CallOpts) void {
+    var hs: js.HandleScope = undefined;
+    hs.init(self.local.isolate);
+    defer hs.deinit();
+
+    const info = FunctionCallbackInfo{ .handle = handle };
+    self._method(T, func, info, opts) catch |err| {
+        self.handleError(T, @TypeOf(func), err, info, opts);
+    };
+}
+
+fn _method(self: *Caller, comptime T: type, func: anytype, info: FunctionCallbackInfo, comptime opts: CallOpts) !void {
+    const F = @TypeOf(func);
+    var args = try self.getArgs(F, 1, info);
+
+    const js_this = info.getThis();
+    @field(args, "0") = try TaggedOpaque.fromJS(*T, js_this);
+
+    const res = @call(.auto, func, args);
+
+    const mapped = try self.local.zigValueToJs(res, opts);
+    const return_value = info.getReturnValue();
+    return_value.set(mapped);
+}
+
+pub fn function(self: *Caller, comptime T: type, func: anytype, handle: *const v8.FunctionCallbackInfo, comptime opts: CallOpts) void {
+    var hs: js.HandleScope = undefined;
+    hs.init(self.local.isolate);
+    defer hs.deinit();
+
+    const info = FunctionCallbackInfo{ .handle = handle };
+    self._function(func, info, opts) catch |err| {
+        self.handleError(T, @TypeOf(func), err, info, opts);
+    };
+}
+
+fn _function(self: *Caller, func: anytype, info: FunctionCallbackInfo, comptime opts: CallOpts) !void {
+    const F = @TypeOf(func);
+    const args = try self.getArgs(F, 0, info);
+    const res = @call(.auto, func, args);
+    info.getReturnValue().set(try self.local.zigValueToJs(res, opts));
+}
+
+pub fn getIndex(self: *Caller, comptime T: type, func: anytype, idx: u32, handle: *const v8.PropertyCallbackInfo, comptime opts: CallOpts) u8 {
+    var hs: js.HandleScope = undefined;
+    hs.init(self.local.isolate);
+    defer hs.deinit();
+
+    const info = PropertyCallbackInfo{ .handle = handle };
+    return self._getIndex(T, func, idx, info, opts) catch |err| {
+        self.handleError(T, @TypeOf(func), err, info, opts);
+        // not intercepted
+        return 0;
+    };
+}
+
+fn _getIndex(self: *Caller, comptime T: type, func: anytype, idx: u32, info: PropertyCallbackInfo, comptime opts: CallOpts) !u8 {
+    const F = @TypeOf(func);
+    var args = try self.getArgs(F, 2, info);
+    @field(args, "0") = try TaggedOpaque.fromJS(*T, info.getThis());
+    @field(args, "1") = idx;
+    const ret = @call(.auto, func, args);
+    return self.handleIndexedReturn(T, F, true, ret, info, opts);
+}
+
+pub fn getNamedIndex(self: *Caller, comptime T: type, func: anytype, name: *const v8.Name, handle: *const v8.PropertyCallbackInfo, comptime opts: CallOpts) u8 {
+    var hs: js.HandleScope = undefined;
+    hs.init(self.local.isolate);
+    defer hs.deinit();
+
+    const info = PropertyCallbackInfo{ .handle = handle };
+    return self._getNamedIndex(T, func, name, info, opts) catch |err| {
+        self.handleError(T, @TypeOf(func), err, info, opts);
+        // not intercepted
+        return 0;
+    };
+}
+
+fn _getNamedIndex(self: *Caller, comptime T: type, func: anytype, name: *const v8.Name, info: PropertyCallbackInfo, comptime opts: CallOpts) !u8 {
+    const F = @TypeOf(func);
+    var args = try self.getArgs(F, 2, info);
+    @field(args, "0") = try TaggedOpaque.fromJS(*T, info.getThis());
+    @field(args, "1") = try self.nameToString(@TypeOf(args.@"1"), name);
+    const ret = @call(.auto, func, args);
+    return self.handleIndexedReturn(T, F, true, ret, info, opts);
+}
+
+pub fn setNamedIndex(self: *Caller, comptime T: type, func: anytype, name: *const v8.Name, js_value: *const v8.Value, handle: *const v8.PropertyCallbackInfo, comptime opts: CallOpts) u8 {
+    var hs: js.HandleScope = undefined;
+    hs.init(self.local.isolate);
+    defer hs.deinit();
+
+    const info = PropertyCallbackInfo{ .handle = handle };
+    return self._setNamedIndex(T, func, name, .{ .local = &self.local, .handle = js_value }, info, opts) catch |err| {
+        self.handleError(T, @TypeOf(func), err, info, opts);
+        // not intercepted
+        return 0;
+    };
+}
+
+fn _setNamedIndex(self: *Caller, comptime T: type, func: anytype, name: *const v8.Name, js_value: js.Value, info: PropertyCallbackInfo, comptime opts: CallOpts) !u8 {
+    const F = @TypeOf(func);
+    var args: ParameterTypes(F) = undefined;
+    @field(args, "0") = try TaggedOpaque.fromJS(*T, info.getThis());
+    @field(args, "1") = try self.nameToString(@TypeOf(args.@"1"), name);
+    @field(args, "2") = try self.local.jsValueToZig(@TypeOf(@field(args, "2")), js_value);
+    if (@typeInfo(F).@"fn".params.len == 4) {
+        @field(args, "3") = self.local.ctx.page;
+    }
+    const ret = @call(.auto, func, args);
+    return self.handleIndexedReturn(T, F, false, ret, info, opts);
+}
+
+pub fn deleteNamedIndex(self: *Caller, comptime T: type, func: anytype, name: *const v8.Name, handle: *const v8.PropertyCallbackInfo, comptime opts: CallOpts) u8 {
+    var hs: js.HandleScope = undefined;
+    hs.init(self.local.isolate);
+    defer hs.deinit();
+
+    const info = PropertyCallbackInfo{ .handle = handle };
+    return self._deleteNamedIndex(T, func, name, info, opts) catch |err| {
+        self.handleError(T, @TypeOf(func), err, info, opts);
+        return 0;
+    };
+}
+
+fn _deleteNamedIndex(self: *Caller, comptime T: type, func: anytype, name: *const v8.Name, info: PropertyCallbackInfo, comptime opts: CallOpts) !u8 {
+    const F = @TypeOf(func);
+    var args: ParameterTypes(F) = undefined;
+    @field(args, "0") = try TaggedOpaque.fromJS(*T, info.getThis());
+    @field(args, "1") = try self.nameToString(@TypeOf(args.@"1"), name);
+    if (@typeInfo(F).@"fn".params.len == 3) {
+        @field(args, "2") = self.local.ctx.page;
+    }
+    const ret = @call(.auto, func, args);
+    return self.handleIndexedReturn(T, F, false, ret, info, opts);
+}
+
+fn handleIndexedReturn(self: *Caller, comptime T: type, comptime F: type, comptime getter: bool, ret: anytype, info: PropertyCallbackInfo, comptime opts: CallOpts) !u8 {
+    // need to unwrap this error immediately for when opts.null_as_undefined == true
+    // and we need to compare it to null;
+    const non_error_ret = switch (@typeInfo(@TypeOf(ret))) {
+        .error_union => |eu| blk: {
+            break :blk ret catch |err| {
+                // We can't compare err == error.NotHandled if error.NotHandled
+                // isn't part of the possible error set. So we first need to check
+                // if error.NotHandled is part of the error set.
+                if (isInErrorSet(error.NotHandled, eu.error_set)) {
+                    if (err == error.NotHandled) {
+                        // not intercepted
+                        return 0;
+                    }
+                }
+                self.handleError(T, F, err, info, opts);
+                // not intercepted
+                return 0;
+            };
+        },
+        else => ret,
+    };
+
+    if (comptime getter) {
+        info.getReturnValue().set(try self.local.zigValueToJs(non_error_ret, opts));
+    }
+    // intercepted
+    return 1;
+}
+
+fn isInErrorSet(err: anyerror, comptime T: type) bool {
+    inline for (@typeInfo(T).error_set.?) |e| {
+        if (err == @field(anyerror, e.name)) return true;
+    }
+    return false;
+}
+
+fn nameToString(self: *const Caller, comptime T: type, name: *const v8.Name) !T {
+    const v8_string = @as(*const v8.String, @ptrCast(name));
+    if (T == string.String) {
+        return self.local.jsStringToStringSSO(v8_string, .{});
+    }
+    if (T == string.Global) {
+        return self.local.jsStringToStringSSO(v8_string, .{ .allocator = self.local.ctx.allocator });
+    }
+    return try self.local.valueHandleToString(v8_string, .{});
+}
+
+fn handleError(self: *Caller, comptime T: type, comptime F: type, err: anyerror, info: anytype, comptime opts: CallOpts) void {
+    const isolate = self.local.isolate;
+
+    if (comptime @import("builtin").mode == .Debug and @TypeOf(info) == FunctionCallbackInfo) {
+        if (log.enabled(.js, .warn)) {
+            self.logFunctionCallError(@typeName(T), @typeName(F), err, info);
+        }
+    }
+
+    const js_err: *const v8.Value = switch (err) {
+        error.InvalidArgument => isolate.createTypeError("invalid argument"),
+        error.OutOfMemory => isolate.createError("out of memory"),
+        error.IllegalConstructor => isolate.createError("Illegal Contructor"),
+        else => blk: {
+            if (comptime opts.dom_exception) {
+                const DOMException = @import("../webapi/DOMException.zig");
+                if (DOMException.fromError(err)) |ex| {
+                    const value = self.local.zigValueToJs(ex, .{}) catch break :blk isolate.createError("internal error");
+                    break :blk value.handle;
+                }
+            }
+            break :blk isolate.createError(@errorName(err));
+        },
+    };
+
+    const js_exception = isolate.throwException(js_err);
+    info.getReturnValue().setValueHandle(js_exception);
+}
+
+// If we call a method in javascript: cat.lives('nine');
+//
+// Then we'd expect a Zig function with 2 parameters: a self and the string.
+// In this case, offset == 1. Offset is always 1 for setters or methods.
+//
+// Offset is always 0 for constructors.
+//
+// For constructors, setters and methods, we can further increase offset + 1
+// if the first parameter is an instance of Page.
+//
+// Finally, if the JS function is called with _more_ parameters and
+// the last parameter in Zig is an array, we'll try to slurp the additional
+// parameters into the array.
+fn getArgs(self: *const Caller, comptime F: type, comptime offset: usize, info: anytype) !ParameterTypes(F) {
+    const local = &self.local;
+    var args: ParameterTypes(F) = undefined;
+
+    const params = @typeInfo(F).@"fn".params[offset..];
+    // Except for the constructor, the first parameter is always `self`
+    // This isn't something we'll bind from JS, so skip it.
+    const params_to_map = blk: {
+        if (params.len == 0) {
+            return args;
+        }
+
+        // If the last parameter is the Page, set it, and exclude it
+        // from our params slice, because we don't want to bind it to
+        // a JS argument
+        if (comptime isPage(params[params.len - 1].type.?)) {
+            @field(args, tupleFieldName(params.len - 1 + offset)) = local.ctx.page;
+            break :blk params[0 .. params.len - 1];
+        }
+
+        // we have neither a Page nor a JsObject. All params must be
+        // bound to a JavaScript value.
+        break :blk params;
+    };
+
+    if (params_to_map.len == 0) {
+        return args;
+    }
+
+    const js_parameter_count = info.length();
+    const last_js_parameter = params_to_map.len - 1;
+    var is_variadic = false;
+
+    {
+        // This is going to get complicated. If the last Zig parameter
+        // is a slice AND the corresponding javascript parameter is
+        // NOT an an array, then we'll treat it as a variadic.
+
+        const last_parameter_type = params_to_map[params_to_map.len - 1].type.?;
+        const last_parameter_type_info = @typeInfo(last_parameter_type);
+        if (last_parameter_type_info == .pointer and last_parameter_type_info.pointer.size == .slice) {
+            const slice_type = last_parameter_type_info.pointer.child;
+            const corresponding_js_value = info.getArg(@intCast(last_js_parameter), local);
+            if (corresponding_js_value.isArray() == false and corresponding_js_value.isTypedArray() == false and slice_type != u8) {
+                is_variadic = true;
+                if (js_parameter_count == 0) {
+                    @field(args, tupleFieldName(params_to_map.len + offset - 1)) = &.{};
+                } else if (js_parameter_count >= params_to_map.len) {
+                    const arr = try local.call_arena.alloc(last_parameter_type_info.pointer.child, js_parameter_count - params_to_map.len + 1);
+                    for (arr, last_js_parameter..) |*a, i| {
+                        a.* = try local.jsValueToZig(slice_type, info.getArg(@intCast(i), local));
+                    }
+                    @field(args, tupleFieldName(params_to_map.len + offset - 1)) = arr;
+                } else {
+                    @field(args, tupleFieldName(params_to_map.len + offset - 1)) = &.{};
+                }
+            }
+        }
+    }
+
+    inline for (params_to_map, 0..) |param, i| {
+        const field_index = comptime i + offset;
+        if (comptime i == params_to_map.len - 1) {
+            if (is_variadic) {
+                break;
+            }
+        }
+
+        if (comptime isPage(param.type.?)) {
+            @compileError("Page must be the last parameter (or 2nd last if there's a JsThis): " ++ @typeName(F));
+        } else if (i >= js_parameter_count) {
+            if (@typeInfo(param.type.?) != .optional) {
+                return error.InvalidArgument;
+            }
+            @field(args, tupleFieldName(field_index)) = null;
+        } else {
+            const js_val = info.getArg(@intCast(i), local);
+            @field(args, tupleFieldName(field_index)) = local.jsValueToZig(param.type.?, js_val) catch {
+                return error.InvalidArgument;
+            };
+        }
+    }
+
+    return args;
+}
+
+// This is extracted to speed up compilation. When left inlined in handleError,
+// this can add as much as 10 seconds of compilation time.
+fn logFunctionCallError(self: *Caller, type_name: []const u8, func: []const u8, err: anyerror, info: FunctionCallbackInfo) void {
+    const args_dump = self.serializeFunctionArgs(info) catch "failed to serialize args";
+    log.info(.js, "function call error", .{
+        .type = type_name,
+        .func = func,
+        .err = err,
+        .args = args_dump,
+        .stack = self.local.stackTrace() catch |err1| @errorName(err1),
+    });
+}
+
+fn serializeFunctionArgs(self: *Caller, info: FunctionCallbackInfo) ![]const u8 {
+    const local = &self.local;
+    var buf = std.Io.Writer.Allocating.init(local.call_arena);
+
+    const separator = log.separator();
+    for (0..info.length()) |i| {
+        try buf.writer.print("{s}{d} - ", .{ separator, i + 1 });
+        const js_value = info.getArg(@intCast(i), local);
+        try local.debugValue(js_value, &buf.writer);
+    }
+    return buf.written();
+}
+
+// Takes a function, and returns a tuple for its argument. Used when we
+// @call a function
+fn ParameterTypes(comptime F: type) type {
+    const params = @typeInfo(F).@"fn".params;
+    var fields: [params.len]std.builtin.Type.StructField = undefined;
+
+    inline for (params, 0..) |param, i| {
+        fields[i] = .{
+            .name = tupleFieldName(i),
+            .type = param.type.?,
+            .default_value_ptr = null,
+            .is_comptime = false,
+            .alignment = @alignOf(param.type.?),
+        };
+    }
+
+    return @Type(.{ .@"struct" = .{
+        .layout = .auto,
+        .decls = &.{},
+        .fields = &fields,
+        .is_tuple = true,
+    } });
+}
+
+fn tupleFieldName(comptime i: usize) [:0]const u8 {
+    return switch (i) {
+        0 => "0",
+        1 => "1",
+        2 => "2",
+        3 => "3",
+        4 => "4",
+        5 => "5",
+        6 => "6",
+        7 => "7",
+        8 => "8",
+        9 => "9",
+        else => std.fmt.comptimePrint("{d}", .{i}),
+    };
+}
+
+fn isPage(comptime T: type) bool {
+    return T == *Page or T == *const Page;
+}
+
+// These wrap the raw v8 C API to provide a cleaner interface.
+pub const FunctionCallbackInfo = struct {
+    handle: *const v8.FunctionCallbackInfo,
+
+    pub fn length(self: FunctionCallbackInfo) u32 {
+        return @intCast(v8.v8__FunctionCallbackInfo__Length(self.handle));
+    }
+
+    pub fn getArg(self: FunctionCallbackInfo, index: u32, local: *const js.Local) js.Value {
+        return .{ .local = local, .handle = v8.v8__FunctionCallbackInfo__INDEX(self.handle, @intCast(index)).? };
+    }
+
+    pub fn getThis(self: FunctionCallbackInfo) *const v8.Object {
+        return v8.v8__FunctionCallbackInfo__This(self.handle).?;
+    }
+
+    pub fn getReturnValue(self: FunctionCallbackInfo) ReturnValue {
+        var rv: v8.ReturnValue = undefined;
+        v8.v8__FunctionCallbackInfo__GetReturnValue(self.handle, &rv);
+        return .{ .handle = rv };
+    }
+
+    fn isConstructCall(self: FunctionCallbackInfo) bool {
+        return v8.v8__FunctionCallbackInfo__IsConstructCall(self.handle);
+    }
+};
+
+pub const PropertyCallbackInfo = struct {
+    handle: *const v8.PropertyCallbackInfo,
+
+    pub fn getThis(self: PropertyCallbackInfo) *const v8.Object {
+        return v8.v8__PropertyCallbackInfo__This(self.handle).?;
+    }
+
+    pub fn getReturnValue(self: PropertyCallbackInfo) ReturnValue {
+        var rv: v8.ReturnValue = undefined;
+        v8.v8__PropertyCallbackInfo__GetReturnValue(self.handle, &rv);
+        return .{ .handle = rv };
+    }
+};
+
+const ReturnValue = struct {
+    handle: v8.ReturnValue,
+
+    pub fn set(self: ReturnValue, value: anytype) void {
+        const T = @TypeOf(value);
+        if (T == *const v8.Object) {
+            self.setValueHandle(@ptrCast(value));
+        } else if (T == *const v8.Value) {
+            self.setValueHandle(value);
+        } else if (T == js.Value) {
+            self.setValueHandle(value.handle);
+        } else {
+            @compileError("Unsupported type for ReturnValue.set: " ++ @typeName(T));
+        }
+    }
+
+    pub fn setValueHandle(self: ReturnValue, handle: *const v8.Value) void {
+        v8.v8__ReturnValue__Set(self.handle, handle);
+    }
+};

src/browser/js/Context.zig

@@ -0,0 +1,987 @@
+// 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 lp = @import("lightpanda");
+const log = @import("../../log.zig");
+
+const js = @import("js.zig");
+const bridge = @import("bridge.zig");
+const TaggedOpaque = @import("TaggedOpaque.zig");
+
+const Page = @import("../Page.zig");
+const ScriptManager = @import("../ScriptManager.zig");
+
+const v8 = js.v8;
+const Caller = js.Caller;
+
+const Allocator = std.mem.Allocator;
+
+const IS_DEBUG = @import("builtin").mode == .Debug;
+
+// Loosely maps to a Browser Page.
+const Context = @This();
+
+id: usize,
+page: *Page,
+isolate: js.Isolate,
+
+// The v8::Global<v8::Context>. When necessary, we can create a v8::Local<<v8::Context>>
+// from this, and we can free it when the context is done.
+handle: v8.Global,
+
+// True if the context is auto-entered,
+entered: bool,
+
+cpu_profiler: ?*v8.CpuProfiler = null,
+
+heap_profiler: ?*v8.HeapProfiler = null,
+
+// references Env.templates
+templates: []*const v8.FunctionTemplate,
+
+// Arena for the lifetime of the context
+arena: Allocator,
+
+// The page.call_arena
+call_arena: Allocator,
+
+// Because calls can be nested (i.e.a function calling a callback),
+// we can only reset the call_arena when call_depth == 0. If we were
+// to reset it within a callback, it would invalidate the data of
+// the call which is calling the callback.
+call_depth: usize = 0,
+
+// When a Caller is active (V8->Zig callback), this points to its Local.
+// When null, Zig->V8 calls must create a js.Local.Scope and initialize via
+// context.localScope
+local: ?*const js.Local = null,
+
+// Serves two purposes. Like `global_objects`, this is used to free
+// every Global(Object) we've created during the lifetime of the context.
+// More importantly, it serves as an identity map - for a given Zig
+// instance, we map it to the same Global(Object).
+// The key is the @intFromPtr of the Zig value
+identity_map: std.AutoHashMapUnmanaged(usize, v8.Global) = .empty,
+
+// Any type that is stored in the identity_map which has a finalizer declared
+// will have its finalizer stored here. This is only used when shutting down
+// if v8 hasn't called the finalizer directly itself.
+finalizer_callbacks: std.AutoHashMapUnmanaged(usize, FinalizerCallback) = .empty,
+
+// Some web APIs have to manage opaque values. Ideally, they use an
+// js.Object, but the js.Object has no lifetime guarantee beyond the
+// current call. They can call .persist() on their js.Object to get
+// a `Global(Object)`. We need to track these to free them.
+// This used to be a map and acted like identity_map; the key was
+// the @intFromPtr(js_obj.handle). But v8 can re-use address. Without
+// a reliable way to know if an object has already been persisted,
+// we now simply persist every time persist() is called.
+global_values: std.ArrayList(v8.Global) = .empty,
+global_objects: std.ArrayList(v8.Global) = .empty,
+global_modules: std.ArrayList(v8.Global) = .empty,
+global_promises: std.ArrayList(v8.Global) = .empty,
+global_functions: std.ArrayList(v8.Global) = .empty,
+global_promise_resolvers: std.ArrayList(v8.Global) = .empty,
+
+// Temp variants stored in HashMaps for O(1) early cleanup.
+// Key is global.data_ptr.
+global_values_temp: std.AutoHashMapUnmanaged(usize, v8.Global) = .empty,
+global_functions_temp: std.AutoHashMapUnmanaged(usize, v8.Global) = .empty,
+
+// Our module cache: normalized module specifier => module.
+module_cache: std.StringHashMapUnmanaged(ModuleEntry) = .empty,
+
+// Module => Path. The key is the module hashcode (module.getIdentityHash)
+// and the value is the full path to the module. We need to capture this
+// so that when we're asked to resolve a dependent module, and all we're
+// given is the specifier, we can form the full path. The full path is
+// necessary to lookup/store the dependent module in the module_cache.
+module_identifier: std.AutoHashMapUnmanaged(u32, [:0]const u8) = .empty,
+
+// the page's script manager
+script_manager: ?*ScriptManager,
+
+const ModuleEntry = struct {
+    // Can be null if we're asynchrously loading the module, in
+    // which case resolver_promise cannot be null.
+    module: ?js.Module.Global = null,
+
+    // The promise of the evaluating module. The resolved value is
+    // meaningless to us, but the resolver promise needs to chain
+    // to this, since we need to know when it's complete.
+    module_promise: ?js.Promise.Global = null,
+
+    // The promise for the resolver which is loading the module.
+    // (AKA, the first time we try to load it). This resolver will
+    // chain to the module_promise  and, when it's done evaluating
+    // will resolve its namespace. Any other attempt to load the
+    // module willchain to this.
+    resolver_promise: ?js.Promise.Global = null,
+};
+
+fn fromC(c_context: *const v8.Context) *Context {
+    const data = v8.v8__Context__GetEmbedderData(c_context, 1).?;
+    const big_int = js.BigInt{ .handle = @ptrCast(data) };
+    return @ptrFromInt(big_int.getUint64());
+}
+
+pub fn fromIsolate(isolate: js.Isolate) *Context {
+    const v8_context = v8.v8__Isolate__GetCurrentContext(isolate.handle).?;
+    const data = v8.v8__Context__GetEmbedderData(v8_context, 1).?;
+    const big_int = js.BigInt{ .handle = @ptrCast(data) };
+    return @ptrFromInt(big_int.getUint64());
+}
+
+pub fn deinit(self: *Context) void {
+    {
+        var it = self.identity_map.valueIterator();
+        while (it.next()) |global| {
+            v8.v8__Global__Reset(global);
+        }
+    }
+    {
+        var it = self.finalizer_callbacks.valueIterator();
+        while (it.next()) |finalizer| {
+            finalizer.deinit();
+        }
+    }
+
+    for (self.global_values.items) |*global| {
+        v8.v8__Global__Reset(global);
+    }
+
+    for (self.global_objects.items) |*global| {
+        v8.v8__Global__Reset(global);
+    }
+
+    for (self.global_modules.items) |*global| {
+        v8.v8__Global__Reset(global);
+    }
+
+    for (self.global_functions.items) |*global| {
+        v8.v8__Global__Reset(global);
+    }
+
+    for (self.global_promises.items) |*global| {
+        v8.v8__Global__Reset(global);
+    }
+
+    for (self.global_promise_resolvers.items) |*global| {
+        v8.v8__Global__Reset(global);
+    }
+
+    {
+        var it = self.global_values_temp.valueIterator();
+        while (it.next()) |global| {
+            v8.v8__Global__Reset(global);
+        }
+    }
+
+    {
+        var it = self.global_functions_temp.valueIterator();
+        while (it.next()) |global| {
+            v8.v8__Global__Reset(global);
+        }
+    }
+
+    if (self.entered) {
+        var ls: js.Local.Scope = undefined;
+        self.localScope(&ls);
+        defer ls.deinit();
+        v8.v8__Context__Exit(ls.local.handle);
+    }
+    v8.v8__Global__Reset(&self.handle);
+}
+
+pub fn weakRef(self: *Context, obj: anytype) void {
+    const global = self.identity_map.getPtr(@intFromPtr(obj)) orelse {
+        if (comptime IS_DEBUG) {
+            // should not be possible
+            std.debug.assert(false);
+        }
+        return;
+    };
+    v8.v8__Global__SetWeakFinalizer(global, obj, bridge.Struct(@TypeOf(obj)).JsApi.Meta.finalizer.from_v8, v8.kParameter);
+}
+
+pub fn strongRef(self: *Context, obj: anytype) void {
+    const global = self.identity_map.getPtr(@intFromPtr(obj)) orelse {
+        if (comptime IS_DEBUG) {
+            // should not be possible
+            std.debug.assert(false);
+        }
+        return;
+    };
+    v8.v8__Global__ClearWeak(global);
+}
+
+pub fn release(self: *Context, item: anytype) void {
+    if (@TypeOf(item) == *anyopaque) {
+        // Existing *anyopaque path for identity_map. Called internally from
+        // finalizers
+        var global = self.identity_map.fetchRemove(@intFromPtr(item)) orelse {
+            if (comptime IS_DEBUG) {
+                // should not be possible
+                std.debug.assert(false);
+            }
+            return;
+        };
+        v8.v8__Global__Reset(&global.value);
+
+        // The item has been fianalized, remove it for the finalizer callback so that
+        // we don't try to call it again on shutdown.
+        _ = self.finalizer_callbacks.fetchRemove(@intFromPtr(item)) orelse {
+            if (comptime IS_DEBUG) {
+                // should not be possible
+                std.debug.assert(false);
+            }
+        };
+        return;
+    }
+
+    var map = switch (@TypeOf(item)) {
+        js.Value.Temp => &self.global_values_temp,
+        js.Function.Temp => &self.global_functions_temp,
+        else => |T| @compileError("Context.release cannot be called with a " ++ @typeName(T)),
+    };
+
+    if (map.fetchRemove(item.handle.data_ptr)) |kv| {
+        var global = kv.value;
+        v8.v8__Global__Reset(&global);
+    }
+}
+
+// Any operation on the context have to be made from a local.
+pub fn localScope(self: *Context, ls: *js.Local.Scope) void {
+    const isolate = self.isolate;
+    js.HandleScope.init(&ls.handle_scope, isolate);
+
+    // TODO: add and init ls.hs  for the handlescope
+    ls.local = .{
+        .ctx = self,
+        .handle = @ptrCast(v8.v8__Global__Get(&self.handle, isolate.handle)),
+        .isolate = isolate,
+        .call_arena = self.call_arena,
+    };
+}
+
+pub fn toLocal(self: *Context, global: anytype) js.Local.ToLocalReturnType(@TypeOf(global)) {
+    const l = self.local orelse @panic("toLocal called without active Caller context");
+    return l.toLocal(global);
+}
+
+// This isn't expected to be called often. It's for converting attributes into
+// function calls, e.g. <body onload="doSomething"> will turn that "doSomething"
+// string into a js.Function which looks like: function(e) { doSomething(e) }
+// There might be more efficient ways to do this, but doing it this way means
+// our code only has to worry about js.Funtion, not some union of a js.Function
+// or a string.
+pub fn stringToPersistedFunction(self: *Context, str: []const u8) !js.Function.Global {
+    var ls: js.Local.Scope = undefined;
+    self.localScope(&ls);
+    defer ls.deinit();
+
+    var extra: []const u8 = "";
+    const normalized = std.mem.trim(u8, str, &std.ascii.whitespace);
+    if (normalized.len > 0 and normalized[normalized.len - 1] != ')') {
+        extra = "(e)";
+    }
+    const full = try std.fmt.allocPrintSentinel(self.call_arena, "(function(e) {{ {s}{s} }})", .{ normalized, extra }, 0);
+
+    const js_val = try ls.local.compileAndRun(full, null);
+    if (!js_val.isFunction()) {
+        return error.StringFunctionError;
+    }
+    return try (js.Function{ .local = &ls.local, .handle = @ptrCast(js_val.handle) }).persist();
+}
+
+pub fn module(self: *Context, comptime want_result: bool, local: *const js.Local, src: []const u8, url: []const u8, cacheable: bool) !(if (want_result) ModuleEntry else void) {
+    const mod, const owned_url = blk: {
+        const arena = self.arena;
+
+        // gop will _always_ initiated if cacheable == true
+        var gop: std.StringHashMapUnmanaged(ModuleEntry).GetOrPutResult = undefined;
+        if (cacheable) {
+            gop = try self.module_cache.getOrPut(arena, url);
+            if (gop.found_existing) {
+                if (gop.value_ptr.module != null) {
+                    return if (comptime want_result) gop.value_ptr.* else {};
+                }
+            } else {
+                // first time seeing this
+                gop.value_ptr.* = .{};
+            }
+        }
+
+        const owned_url = try arena.dupeZ(u8, url);
+        const m = try compileModule(local, src, owned_url);
+
+        if (cacheable) {
+            // compileModule is synchronous - nothing can modify the cache during compilation
+            lp.assert(gop.value_ptr.module == null, "Context.module has module", .{});
+            gop.value_ptr.module = try m.persist();
+            if (!gop.found_existing) {
+                gop.key_ptr.* = owned_url;
+            }
+        }
+
+        break :blk .{ m, owned_url };
+    };
+
+    try self.postCompileModule(mod, owned_url, local);
+
+    if (try mod.instantiate(resolveModuleCallback) == false) {
+        return error.ModuleInstantiationError;
+    }
+
+    const evaluated = mod.evaluate() catch {
+        if (comptime IS_DEBUG) {
+            std.debug.assert(mod.getStatus() == .kErrored);
+        }
+
+        // Some module-loading errors aren't handled by TryCatch. We need to
+        // get the error from the module itself.
+        log.warn(.js, "evaluate module", .{
+            .specifier = owned_url,
+            .message = mod.getException().toString(.{}) catch "???",
+        });
+        return error.EvaluationError;
+    };
+
+    // https://v8.github.io/api/head/classv8_1_1Module.html#a1f1758265a4082595757c3251bb40e0f
+    // Must be a promise that gets returned here.
+    lp.assert(evaluated.isPromise(), "Context.module non-promise", .{});
+
+    if (comptime !want_result) {
+        // avoid creating a bunch of persisted objects if it isn't
+        // cacheable and the caller doesn't care about results.
+        // This is pretty common, i.e. every <script type=module>
+        // within the html page.
+        if (!cacheable) {
+            return;
+        }
+    }
+
+    // anyone who cares about the result, should also want it to
+    // be cached
+    if (comptime IS_DEBUG) {
+        std.debug.assert(cacheable);
+    }
+
+    // entry has to have been created atop this function
+    const entry = self.module_cache.getPtr(owned_url).?;
+
+    // and the module must have been set after we compiled it
+    lp.assert(entry.module != null, "Context.module with module", .{});
+    if (entry.module_promise != null) {
+        // While loading this script, it's possible that it was dynamically
+        // included (either the module dynamically loaded itself (unlikely) or
+        // it included a script which dynamically imported it). If it was, then
+        // the module_promise would already be setup, and we don't need to do
+        // anything
+    } else {
+        // The *much* more likely case where the module we're trying to load
+        // didn't [directly or indirectly] dynamically load itself.
+        entry.module_promise = try evaluated.toPromise().persist();
+    }
+    return if (comptime want_result) entry.* else {};
+}
+
+fn compileModule(local: *const js.Local, src: []const u8, name: []const u8) !js.Module {
+    var origin_handle: v8.ScriptOrigin = undefined;
+    v8.v8__ScriptOrigin__CONSTRUCT2(
+        &origin_handle,
+        local.isolate.initStringHandle(name),
+        0, // resource_line_offset
+        0, // resource_column_offset
+        false, // resource_is_shared_cross_origin
+        -1, // script_id
+        null, // source_map_url
+        false, // resource_is_opaque
+        false, // is_wasm
+        true, // is_module
+        null, // host_defined_options
+    );
+
+    var source_handle: v8.ScriptCompilerSource = undefined;
+    v8.v8__ScriptCompiler__Source__CONSTRUCT2(
+        local.isolate.initStringHandle(src),
+        &origin_handle,
+        null, // cached data
+        &source_handle,
+    );
+
+    defer v8.v8__ScriptCompiler__Source__DESTRUCT(&source_handle);
+
+    const module_handle = v8.v8__ScriptCompiler__CompileModule(
+        local.isolate.handle,
+        &source_handle,
+        v8.kNoCompileOptions,
+        v8.kNoCacheNoReason,
+    ) orelse {
+        return error.JsException;
+    };
+
+    return .{
+        .local = local,
+        .handle = module_handle,
+    };
+}
+
+// After we compile a module, whether it's a top-level one, or a nested one,
+// we always want to track its identity (so that, if this module imports other
+// modules, we can resolve the full URL), and preload any dependent modules.
+fn postCompileModule(self: *Context, mod: js.Module, url: [:0]const u8, local: *const js.Local) !void {
+    try self.module_identifier.putNoClobber(self.arena, mod.getIdentityHash(), url);
+
+    // Non-async modules are blocking. We can download them in parallel, but
+    // they need to be processed serially. So we want to get the list of
+    // dependent modules this module has and start downloading them asap.
+    const requests = mod.getModuleRequests();
+    const request_len = requests.len();
+    const script_manager = self.script_manager.?;
+    for (0..request_len) |i| {
+        const specifier = try local.jsStringToZigZ(requests.get(i).specifier(), .{});
+        const normalized_specifier = try script_manager.resolveSpecifier(
+            self.call_arena,
+            url,
+            specifier,
+        );
+        const nested_gop = try self.module_cache.getOrPut(self.arena, normalized_specifier);
+        if (!nested_gop.found_existing) {
+            const owned_specifier = try self.arena.dupeZ(u8, normalized_specifier);
+            nested_gop.key_ptr.* = owned_specifier;
+            nested_gop.value_ptr.* = .{};
+            try script_manager.preloadImport(owned_specifier, url);
+        }
+    }
+}
+
+fn newFunctionWithData(local: *const js.Local, comptime callback: *const fn (?*const v8.FunctionCallbackInfo) callconv(.c) void, data: *anyopaque) js.Function {
+    const external = local.isolate.createExternal(data);
+    const handle = v8.v8__Function__New__DEFAULT2(local.handle, callback, @ptrCast(external)).?;
+    return .{
+        .local = local,
+        .handle = handle,
+    };
+}
+
+// == Callbacks ==
+// Callback from V8, asking us to load a module. The "specifier" is
+// the src of the module to load.
+fn resolveModuleCallback(
+    c_context: ?*const v8.Context,
+    c_specifier: ?*const v8.String,
+    import_attributes: ?*const v8.FixedArray,
+    c_referrer: ?*const v8.Module,
+) callconv(.c) ?*const v8.Module {
+    _ = import_attributes;
+
+    const self = fromC(c_context.?);
+    var local = js.Local{
+        .ctx = self,
+        .handle = c_context.?,
+        .isolate = self.isolate,
+        .call_arena = self.call_arena,
+    };
+
+    const specifier = local.jsStringToZigZ(c_specifier.?, .{}) catch |err| {
+        log.err(.js, "resolve module", .{ .err = err });
+        return null;
+    };
+    const referrer = js.Module{ .local = &local, .handle = c_referrer.? };
+
+    return self._resolveModuleCallback(referrer, specifier, &local) catch |err| {
+        log.err(.js, "resolve module", .{
+            .err = err,
+            .specifier = specifier,
+        });
+        return null;
+    };
+}
+
+pub fn dynamicModuleCallback(
+    c_context: ?*const v8.Context,
+    host_defined_options: ?*const v8.Data,
+    resource_name: ?*const v8.Value,
+    v8_specifier: ?*const v8.String,
+    import_attrs: ?*const v8.FixedArray,
+) callconv(.c) ?*v8.Promise {
+    _ = host_defined_options;
+    _ = import_attrs;
+
+    const self = fromC(c_context.?);
+    var local = js.Local{
+        .ctx = self,
+        .handle = c_context.?,
+        .call_arena = self.call_arena,
+        .isolate = self.isolate,
+    };
+
+    const resource = local.jsStringToZigZ(resource_name.?, .{}) catch |err| {
+        log.err(.app, "OOM", .{ .err = err, .src = "dynamicModuleCallback1" });
+        return @constCast((local.rejectPromise("Out of memory") catch return null).handle);
+    };
+
+    const specifier = local.jsStringToZigZ(v8_specifier.?, .{}) catch |err| {
+        log.err(.app, "OOM", .{ .err = err, .src = "dynamicModuleCallback2" });
+        return @constCast((local.rejectPromise("Out of memory") catch return null).handle);
+    };
+
+    const normalized_specifier = self.script_manager.?.resolveSpecifier(
+        self.arena, // might need to survive until the module is loaded
+        resource,
+        specifier,
+    ) catch |err| {
+        log.err(.app, "OOM", .{ .err = err, .src = "dynamicModuleCallback3" });
+        return @constCast((local.rejectPromise("Out of memory") catch return null).handle);
+    };
+
+    const promise = self._dynamicModuleCallback(normalized_specifier, resource, &local) catch |err| blk: {
+        log.err(.js, "dynamic module callback", .{
+            .err = err,
+        });
+        break :blk local.rejectPromise("Failed to load module") catch return null;
+    };
+    return @constCast(promise.handle);
+}
+
+pub fn metaObjectCallback(c_context: ?*v8.Context, c_module: ?*v8.Module, c_meta: ?*v8.Value) callconv(.c) void {
+    // @HandleScope  implement this without a fat context/local..
+    const self = fromC(c_context.?);
+    var local = js.Local{
+        .ctx = self,
+        .handle = c_context.?,
+        .isolate = self.isolate,
+        .call_arena = self.call_arena,
+    };
+
+    const m = js.Module{ .local = &local, .handle = c_module.? };
+    const meta = js.Object{ .local = &local, .handle = @ptrCast(c_meta.?) };
+
+    const url = self.module_identifier.get(m.getIdentityHash()) orelse {
+        // Shouldn't be possible.
+        log.err(.js, "import meta", .{ .err = error.UnknownModuleReferrer });
+        return;
+    };
+
+    const js_value = local.zigValueToJs(url, .{}) catch {
+        log.err(.js, "import meta", .{ .err = error.FailedToConvertUrl });
+        return;
+    };
+    const res = meta.defineOwnProperty("url", js_value, 0) orelse false;
+    if (!res) {
+        log.err(.js, "import meta", .{ .err = error.FailedToSet });
+    }
+}
+
+fn _resolveModuleCallback(self: *Context, referrer: js.Module, specifier: [:0]const u8, local: *const js.Local) !?*const v8.Module {
+    const referrer_path = self.module_identifier.get(referrer.getIdentityHash()) orelse {
+        // Shouldn't be possible.
+        return error.UnknownModuleReferrer;
+    };
+
+    const normalized_specifier = try self.script_manager.?.resolveSpecifier(
+        self.arena,
+        referrer_path,
+        specifier,
+    );
+
+    const entry = self.module_cache.getPtr(normalized_specifier).?;
+    if (entry.module) |m| {
+        return local.toLocal(m).handle;
+    }
+
+    var source = try self.script_manager.?.waitForImport(normalized_specifier);
+    defer source.deinit();
+
+    var try_catch: js.TryCatch = undefined;
+    try_catch.init(local);
+    defer try_catch.deinit();
+
+    const mod = try compileModule(local, source.src(), normalized_specifier);
+    try self.postCompileModule(mod, normalized_specifier, local);
+    entry.module = try mod.persist();
+    // Note: We don't instantiate/evaluate here - V8 will handle instantiation
+    // as part of the parent module's dependency chain. If there's a resolver
+    // waiting, it will be handled when the module is eventually evaluated
+    // (either as a top-level module or when accessed via dynamic import)
+    return mod.handle;
+}
+
+// Will get passed to ScriptManager and then passed back to us when
+// the src of the module is loaded
+const DynamicModuleResolveState = struct {
+    // The module that we're resolving (we'll actually resolve its
+    // namespace)
+    module: ?js.Module.Global,
+    context_id: usize,
+    context: *Context,
+    specifier: [:0]const u8,
+    resolver: js.PromiseResolver.Global,
+};
+
+fn _dynamicModuleCallback(self: *Context, specifier: [:0]const u8, referrer: []const u8, local: *const js.Local) !js.Promise {
+    const gop = try self.module_cache.getOrPut(self.arena, specifier);
+    if (gop.found_existing) {
+        if (gop.value_ptr.resolver_promise) |rp| {
+            return local.toLocal(rp);
+        }
+    }
+
+    const resolver = local.createPromiseResolver();
+    const state = try self.arena.create(DynamicModuleResolveState);
+
+    state.* = .{
+        .module = null,
+        .context = self,
+        .specifier = specifier,
+        .context_id = self.id,
+        .resolver = try resolver.persist(),
+    };
+
+    const promise = resolver.promise();
+
+    if (!gop.found_existing or gop.value_ptr.module == null) {
+        // Either this is a completely new module, or it's an entry that was
+        // created (e.g., in postCompileModule) but not yet loaded
+        // this module hasn't been seen before. This is the most
+        // complicated path.
+
+        // First, we'll setup a bare entry into our cache. This will
+        // prevent anyone one else from trying to asynchronously load
+        // it. Instead, they can just return our promise.
+        gop.value_ptr.* = ModuleEntry{
+            .module = null,
+            .module_promise = null,
+            .resolver_promise = try promise.persist(),
+        };
+
+        // Next, we need to actually load it.
+        self.script_manager.?.getAsyncImport(specifier, dynamicModuleSourceCallback, state, referrer) catch |err| {
+            const error_msg = local.newString(@errorName(err));
+            _ = resolver.reject("dynamic module get async", error_msg);
+        };
+
+        // For now, we're done. but this will be continued in
+        // `dynamicModuleSourceCallback`, once the source for the module is loaded.
+        return promise;
+    }
+
+    // So we have a module, but no async resolver. This can only
+    // happen if the module was first synchronously loaded (Does that
+    // ever even happen?!) You'd think we can just return the module
+    // but no, we need to resolve the module namespace, and the
+    // module could still be loading!
+    // We need to do part of what the first case is going to do in
+    // `dynamicModuleSourceCallback`, but we can skip some steps
+    // since the module is already loaded,
+    lp.assert(gop.value_ptr.module != null, "Context._dynamicModuleCallback has module", .{});
+
+    // If the module hasn't been evaluated yet (it was only instantiated
+    // as a static import dependency), we need to evaluate it now.
+    if (gop.value_ptr.module_promise == null) {
+        const mod = local.toLocal(gop.value_ptr.module.?);
+        const status = mod.getStatus();
+        if (status == .kEvaluated or status == .kEvaluating) {
+            // Module was already evaluated (shouldn't normally happen, but handle it).
+            // Create a pre-resolved promise with the module namespace.
+            const module_resolver = local.createPromiseResolver();
+            module_resolver.resolve("resolve module", mod.getModuleNamespace());
+            _ = try module_resolver.persist();
+            gop.value_ptr.module_promise = try module_resolver.promise().persist();
+        } else {
+            // the module was loaded, but not evaluated, we _have_ to evaluate it now
+            const evaluated = mod.evaluate() catch {
+                if (comptime IS_DEBUG) {
+                    std.debug.assert(status == .kErrored);
+                }
+                _ = resolver.reject("module evaluation", local.newString("Module evaluation failed"));
+                return promise;
+            };
+            lp.assert(evaluated.isPromise(), "Context._dynamicModuleCallback non-promise", .{});
+            gop.value_ptr.module_promise = try evaluated.toPromise().persist();
+        }
+    }
+
+    // like before, we want to set this up so that if anything else
+    // tries to load this module, it can just return our promise
+    // since we're going to be doing all the work.
+    gop.value_ptr.resolver_promise = try promise.persist();
+
+    // But we can skip direclty to `resolveDynamicModule` which is
+    // what the above callback will eventually do.
+    self.resolveDynamicModule(state, gop.value_ptr.*, local);
+    return promise;
+}
+
+fn dynamicModuleSourceCallback(ctx: *anyopaque, module_source_: anyerror!ScriptManager.ModuleSource) void {
+    const state: *DynamicModuleResolveState = @ptrCast(@alignCast(ctx));
+    var self = state.context;
+
+    var ls: js.Local.Scope = undefined;
+    self.localScope(&ls);
+    defer ls.deinit();
+
+    const local = &ls.local;
+
+    var ms = module_source_ catch |err| {
+        _ = local.toLocal(state.resolver).reject("dynamic module source", local.newString(@errorName(err)));
+        return;
+    };
+
+    const module_entry = blk: {
+        defer ms.deinit();
+
+        var try_catch: js.TryCatch = undefined;
+        try_catch.init(local);
+        defer try_catch.deinit();
+
+        break :blk self.module(true, local, ms.src(), state.specifier, true) catch |err| {
+            const caught = try_catch.caughtOrError(self.call_arena, err);
+            log.err(.js, "module compilation failed", .{
+                .caught = caught,
+                .specifier = state.specifier,
+            });
+            _ = local.toLocal(state.resolver).reject("dynamic compilation failure", local.newString(caught.exception orelse ""));
+            return;
+        };
+    };
+
+    self.resolveDynamicModule(state, module_entry, local);
+}
+
+fn resolveDynamicModule(self: *Context, state: *DynamicModuleResolveState, module_entry: ModuleEntry, local: *const js.Local) void {
+    defer local.runMicrotasks();
+
+    // we can only be here if the module has been evaluated and if
+    // we have a resolve loading this asynchronously.
+    lp.assert(module_entry.module_promise != null, "Context.resolveDynamicModule has module_promise", .{});
+    lp.assert(module_entry.resolver_promise != null, "Context.resolveDynamicModule has resolver_promise", .{});
+    if (comptime IS_DEBUG) {
+        std.debug.assert(self.module_cache.contains(state.specifier));
+    }
+    state.module = module_entry.module.?;
+
+    // We've gotten the source for the module and are evaluating it.
+    // You might think we're done, but the module evaluation is
+    // itself asynchronous. We need to chain to the module's own
+    // promise. When the module is evaluated, it resolves to the
+    // last value of the module. But, for module loading, we need to
+    // resolve to the module's namespace.
+
+    const then_callback = newFunctionWithData(local, struct {
+        pub fn callback(callback_handle: ?*const v8.FunctionCallbackInfo) callconv(.c) void {
+            const isolate = v8.v8__FunctionCallbackInfo__GetIsolate(callback_handle).?;
+            var c: Caller = undefined;
+            c.init(isolate);
+            defer c.deinit();
+
+            const info_data = v8.v8__FunctionCallbackInfo__Data(callback_handle).?;
+            const s: *DynamicModuleResolveState = @ptrCast(@alignCast(v8.v8__External__Value(@ptrCast(info_data))));
+
+            if (s.context_id != c.local.ctx.id) {
+                // The microtask is tied to the isolate, not the context
+                // it can be resolved while another context is active
+                // (Which seems crazy to me). If that happens, then
+                // another page was loaded and we MUST ignore this
+                // (most of the fields in state are not valid)
+                return;
+            }
+            const l = c.local;
+            defer l.runMicrotasks();
+            const namespace = l.toLocal(s.module.?).getModuleNamespace();
+            _ = l.toLocal(s.resolver).resolve("resolve namespace", namespace);
+        }
+    }.callback, @ptrCast(state));
+
+    const catch_callback = newFunctionWithData(local, struct {
+        pub fn callback(callback_handle: ?*const v8.FunctionCallbackInfo) callconv(.c) void {
+            const isolate = v8.v8__FunctionCallbackInfo__GetIsolate(callback_handle).?;
+            var c: Caller = undefined;
+            c.init(isolate);
+            defer c.deinit();
+
+            const info_data = v8.v8__FunctionCallbackInfo__Data(callback_handle).?;
+            const s: *DynamicModuleResolveState = @ptrCast(@alignCast(v8.v8__External__Value(@ptrCast(info_data))));
+
+            const l = &c.local;
+            const ctx = l.ctx;
+            if (s.context_id != ctx.id) {
+                return;
+            }
+
+            defer l.runMicrotasks();
+            _ = l.toLocal(s.resolver).reject("catch callback", js.Value{
+                .local = l,
+                .handle = v8.v8__FunctionCallbackInfo__Data(callback_handle).?,
+            });
+        }
+    }.callback, @ptrCast(state));
+
+    _ = local.toLocal(module_entry.module_promise.?).thenAndCatch(then_callback, catch_callback) catch |err| {
+        log.err(.js, "module evaluation is promise", .{
+            .err = err,
+            .specifier = state.specifier,
+        });
+        _ = local.toLocal(state.resolver).reject("module promise", local.newString("Failed to evaluate promise"));
+    };
+}
+
+// Microtasks
+pub fn queueMutationDelivery(self: *Context) !void {
+    self.isolate.enqueueMicrotask(struct {
+        fn run(data: ?*anyopaque) callconv(.c) void {
+            const page: *Page = @ptrCast(@alignCast(data.?));
+            page.deliverMutations();
+        }
+    }.run, self.page);
+}
+
+pub fn queueIntersectionChecks(self: *Context) !void {
+    self.isolate.enqueueMicrotask(struct {
+        fn run(data: ?*anyopaque) callconv(.c) void {
+            const page: *Page = @ptrCast(@alignCast(data.?));
+            page.performScheduledIntersectionChecks();
+        }
+    }.run, self.page);
+}
+
+pub fn queueIntersectionDelivery(self: *Context) !void {
+    self.isolate.enqueueMicrotask(struct {
+        fn run(data: ?*anyopaque) callconv(.c) void {
+            const page: *Page = @ptrCast(@alignCast(data.?));
+            page.deliverIntersections();
+        }
+    }.run, self.page);
+}
+
+pub fn queueSlotchangeDelivery(self: *Context) !void {
+    self.isolate.enqueueMicrotask(struct {
+        fn run(data: ?*anyopaque) callconv(.c) void {
+            const page: *Page = @ptrCast(@alignCast(data.?));
+            page.deliverSlotchangeEvents();
+        }
+    }.run, self.page);
+}
+
+pub fn queueMicrotaskFunc(self: *Context, cb: js.Function) void {
+    self.isolate.enqueueMicrotaskFunc(cb);
+}
+
+// == Misc ==
+// A type that has a finalizer can have its finalizer called one of two ways.
+// The first is from V8 via the WeakCallback we give to weakRef. But that isn't
+// guaranteed to fire, so we track this in ctx._finalizers and call them on
+// context shutdown.
+const FinalizerCallback = struct {
+    ptr: *anyopaque,
+    finalizerFn: *const fn (ptr: *anyopaque) void,
+
+    pub fn init(ptr: anytype) FinalizerCallback {
+        const T = bridge.Struct(@TypeOf(ptr));
+        return .{
+            .ptr = ptr,
+            .finalizerFn = struct {
+                pub fn wrap(self: *anyopaque) void {
+                    T.JsApi.Meta.finalizer.from_zig(self);
+                }
+            }.wrap,
+        };
+    }
+
+    pub fn deinit(self: FinalizerCallback) void {
+        self.finalizerFn(self.ptr);
+    }
+};
+
+// == Profiler ==
+pub fn startCpuProfiler(self: *Context) void {
+    if (comptime !IS_DEBUG) {
+        // Still testing this out, don't have it properly exposed, so add this
+        // guard for the time being to prevent any accidental/weird prod issues.
+        @compileError("CPU Profiling is only available in debug builds");
+    }
+
+    var ls: js.Local.Scope = undefined;
+    self.localScope(&ls);
+    defer ls.deinit();
+
+    std.debug.assert(self.cpu_profiler == null);
+    v8.v8__CpuProfiler__UseDetailedSourcePositionsForProfiling(self.isolate.handle);
+
+    const cpu_profiler = v8.v8__CpuProfiler__Get(self.isolate.handle).?;
+    const title = self.isolate.initStringHandle("v8_cpu_profile");
+    v8.v8__CpuProfiler__StartProfiling(cpu_profiler, title);
+    self.cpu_profiler = cpu_profiler;
+}
+
+pub fn stopCpuProfiler(self: *Context) ![]const u8 {
+    var ls: js.Local.Scope = undefined;
+    self.localScope(&ls);
+    defer ls.deinit();
+
+    const title = self.isolate.initStringHandle("v8_cpu_profile");
+    const handle = v8.v8__CpuProfiler__StopProfiling(self.cpu_profiler.?, title) orelse return error.NoProfiles;
+    const string_handle = v8.v8__CpuProfile__Serialize(handle, self.isolate.handle) orelse return error.NoProfile;
+    return ls.local.jsStringToZig(string_handle, .{});
+}
+
+pub fn startHeapProfiler(self: *Context) void {
+    if (comptime !IS_DEBUG) {
+        @compileError("Heap Profiling is only available in debug builds");
+    }
+
+    var ls: js.Local.Scope = undefined;
+    self.localScope(&ls);
+    defer ls.deinit();
+
+    std.debug.assert(self.heap_profiler == null);
+    const heap_profiler = v8.v8__HeapProfiler__Get(self.isolate.handle).?;
+
+    // Sample every 32KB, stack depth 32
+    v8.v8__HeapProfiler__StartSamplingHeapProfiler(heap_profiler, 32 * 1024, 32);
+    v8.v8__HeapProfiler__StartTrackingHeapObjects(heap_profiler, true);
+
+    self.heap_profiler = heap_profiler;
+}
+
+pub fn stopHeapProfiler(self: *Context) !struct { []const u8, []const u8 } {
+    var ls: js.Local.Scope = undefined;
+    self.localScope(&ls);
+    defer ls.deinit();
+
+    const allocating = blk: {
+        const profile = v8.v8__HeapProfiler__GetAllocationProfile(self.heap_profiler.?);
+        const string_handle = v8.v8__AllocationProfile__Serialize(profile, self.isolate.handle);
+        v8.v8__HeapProfiler__StopSamplingHeapProfiler(self.heap_profiler.?);
+        v8.v8__AllocationProfile__Delete(profile);
+        break :blk try ls.local.jsStringToZig(string_handle, .{});
+    };
+
+    const snapshot = blk: {
+        const snapshot = v8.v8__HeapProfiler__TakeHeapSnapshot(self.heap_profiler.?, null) orelse return error.NoProfiles;
+        const string_handle = v8.v8__HeapSnapshot__Serialize(snapshot, self.isolate.handle);
+        v8.v8__HeapProfiler__StopTrackingHeapObjects(self.heap_profiler.?);
+        v8.v8__HeapSnapshot__Delete(snapshot);
+        break :blk try ls.local.jsStringToZig(string_handle, .{});
+    };
+
+    return .{ allocating, snapshot };
+}

src/browser/js/Env.zig

@@ -0,0 +1,281 @@
+// 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 js = @import("js.zig");
+const v8 = js.v8;
+
+const log = @import("../../log.zig");
+
+const bridge = @import("bridge.zig");
+const Context = @import("Context.zig");
+const Isolate = @import("Isolate.zig");
+const Platform = @import("Platform.zig");
+const Snapshot = @import("Snapshot.zig");
+const Inspector = @import("Inspector.zig");
+const ExecutionWorld = @import("ExecutionWorld.zig");
+
+const Window = @import("../webapi/Window.zig");
+
+const JsApis = bridge.JsApis;
+const Allocator = std.mem.Allocator;
+const ArenaAllocator = std.heap.ArenaAllocator;
+
+// The Env maps to a V8 isolate, which represents a isolated sandbox for
+// executing JavaScript. The Env is where we'll define our V8 <-> Zig bindings,
+// and it's where we'll start ExecutionWorlds, which actually execute JavaScript.
+// The `S` parameter is arbitrary state. When we start an ExecutionWorld, an instance
+// of S must be given. This instance is available to any Zig binding.
+// The `types` parameter is a tuple of Zig structures we want to bind to V8.
+const Env = @This();
+
+allocator: Allocator,
+
+platform: *const Platform,
+
+// the global isolate
+isolate: js.Isolate,
+
+// just kept around because we need to free it on deinit
+isolate_params: *v8.CreateParams,
+
+context_id: usize,
+
+// Global handles that need to be freed on deinit
+eternal_function_templates: []v8.Eternal,
+
+// Dynamic slice to avoid circular dependency on JsApis.len at comptime
+templates: []*const v8.FunctionTemplate,
+
+// Global template created once per isolate and reused across all contexts
+global_template: v8.Eternal,
+
+pub fn init(allocator: Allocator, platform: *const Platform, snapshot: *Snapshot) !Env {
+    var params = try allocator.create(v8.CreateParams);
+    errdefer allocator.destroy(params);
+    v8.v8__Isolate__CreateParams__CONSTRUCT(params);
+    params.snapshot_blob = @ptrCast(&snapshot.startup_data);
+
+    params.array_buffer_allocator = v8.v8__ArrayBuffer__Allocator__NewDefaultAllocator().?;
+    errdefer v8.v8__ArrayBuffer__Allocator__DELETE(params.array_buffer_allocator.?);
+
+    params.external_references = &snapshot.external_references;
+
+    var isolate = js.Isolate.init(params);
+    errdefer isolate.deinit();
+
+    v8.v8__Isolate__SetHostImportModuleDynamicallyCallback(isolate.handle, Context.dynamicModuleCallback);
+    v8.v8__Isolate__SetPromiseRejectCallback(isolate.handle, promiseRejectCallback);
+    v8.v8__Isolate__SetMicrotasksPolicy(isolate.handle, v8.kExplicit);
+    v8.v8__Isolate__SetFatalErrorHandler(isolate.handle, fatalCallback);
+    v8.v8__Isolate__SetOOMErrorHandler(isolate.handle, oomCallback);
+
+    isolate.enter();
+    errdefer isolate.exit();
+
+    v8.v8__Isolate__SetHostInitializeImportMetaObjectCallback(isolate.handle, Context.metaObjectCallback);
+
+    // Allocate arrays dynamically to avoid comptime dependency on JsApis.len
+    const eternal_function_templates = try allocator.alloc(v8.Eternal, JsApis.len);
+    errdefer allocator.free(eternal_function_templates);
+
+    const templates = try allocator.alloc(*const v8.FunctionTemplate, JsApis.len);
+    errdefer allocator.free(templates);
+
+    var global_eternal: v8.Eternal = undefined;
+    {
+        var temp_scope: js.HandleScope = undefined;
+        temp_scope.init(isolate);
+        defer temp_scope.deinit();
+
+        inline for (JsApis, 0..) |JsApi, i| {
+            JsApi.Meta.class_id = i;
+            const data = v8.v8__Isolate__GetDataFromSnapshotOnce(isolate.handle, snapshot.data_start + i);
+            const function_handle: *const v8.FunctionTemplate = @ptrCast(data);
+            // Make function template eternal
+            v8.v8__Eternal__New(isolate.handle, @ptrCast(function_handle), &eternal_function_templates[i]);
+
+            // Extract the local handle from the global for easy access
+            const eternal_ptr = v8.v8__Eternal__Get(&eternal_function_templates[i], isolate.handle);
+            templates[i] = @ptrCast(@alignCast(eternal_ptr.?));
+        }
+
+        // Create global template once per isolate
+        const js_global = v8.v8__FunctionTemplate__New__DEFAULT(isolate.handle);
+        const window_name = v8.v8__String__NewFromUtf8(isolate.handle, "Window", v8.kNormal, 6);
+        v8.v8__FunctionTemplate__SetClassName(js_global, window_name);
+
+        // Find Window in JsApis by name (avoids circular import)
+        const window_index = comptime bridge.JsApiLookup.getId(Window.JsApi);
+        v8.v8__FunctionTemplate__Inherit(js_global, templates[window_index]);
+
+        const global_template_local = v8.v8__FunctionTemplate__InstanceTemplate(js_global).?;
+        v8.v8__ObjectTemplate__SetNamedHandler(global_template_local, &.{
+            .getter = bridge.unknownPropertyCallback,
+            .setter = null,
+            .query = null,
+            .deleter = null,
+            .enumerator = null,
+            .definer = null,
+            .descriptor = null,
+            .data = null,
+            .flags = v8.kOnlyInterceptStrings | v8.kNonMasking,
+        });
+        v8.v8__Eternal__New(isolate.handle, @ptrCast(global_template_local), &global_eternal);
+    }
+
+    return .{
+        .context_id = 0,
+        .isolate = isolate,
+        .platform = platform,
+        .allocator = allocator,
+        .templates = templates,
+        .isolate_params = params,
+        .eternal_function_templates = eternal_function_templates,
+        .global_template = global_eternal,
+    };
+}
+
+pub fn deinit(self: *Env) void {
+    self.allocator.free(self.templates);
+    self.allocator.free(self.eternal_function_templates);
+
+    self.isolate.exit();
+    self.isolate.deinit();
+    v8.v8__ArrayBuffer__Allocator__DELETE(self.isolate_params.array_buffer_allocator.?);
+    self.allocator.destroy(self.isolate_params);
+}
+
+pub fn newInspector(self: *Env, arena: Allocator, ctx: anytype) !*Inspector {
+    const inspector = try arena.create(Inspector);
+    try Inspector.init(inspector, self.isolate.handle, ctx);
+    return inspector;
+}
+
+pub fn runMicrotasks(self: *const Env) void {
+    self.isolate.performMicrotasksCheckpoint();
+}
+
+pub fn pumpMessageLoop(self: *const Env) bool {
+    var hs: v8.HandleScope = undefined;
+    v8.v8__HandleScope__CONSTRUCT(&hs, self.isolate.handle);
+    defer v8.v8__HandleScope__DESTRUCT(&hs);
+
+    return v8.v8__Platform__PumpMessageLoop(self.platform.handle, self.isolate.handle, false);
+}
+
+pub fn runIdleTasks(self: *const Env) void {
+    v8.v8__Platform__RunIdleTasks(self.platform.handle, self.isolate.handle, 1);
+}
+pub fn newExecutionWorld(self: *Env) !ExecutionWorld {
+    return .{
+        .env = self,
+        .context = null,
+        .context_arena = ArenaAllocator.init(self.allocator),
+    };
+}
+
+// V8 doesn't immediately free memory associated with
+// a Context, it's managed by the garbage collector. We use the
+// `lowMemoryNotification` call on the isolate to encourage v8 to free
+// any contexts which have been freed.
+// This GC is very aggressive. Use memoryPressureNotification for less
+// aggressive GC passes.
+pub fn lowMemoryNotification(self: *Env) void {
+    var handle_scope: js.HandleScope = undefined;
+    handle_scope.init(self.isolate);
+    defer handle_scope.deinit();
+    self.isolate.lowMemoryNotification();
+}
+
+// V8 doesn't immediately free memory associated with
+// a Context, it's managed by the garbage collector. We use the
+// `memoryPressureNotification` call on the isolate to encourage v8 to free
+// any contexts which have been freed.
+// The level indicates the aggressivity of the GC required:
+// moderate speeds up incremental GC
+// critical runs one full GC
+// For a more aggressive GC, use lowMemoryNotification.
+pub fn memoryPressureNotification(self: *Env, level: Isolate.MemoryPressureLevel) void {
+    var handle_scope: js.HandleScope = undefined;
+    handle_scope.init(self.isolate);
+    defer handle_scope.deinit();
+    self.isolate.memoryPressureNotification(level);
+}
+
+pub fn dumpMemoryStats(self: *Env) void {
+    const stats = self.isolate.getHeapStatistics();
+    std.debug.print(
+        \\ Total Heap Size: {d}
+        \\ Total Heap Size Executable: {d}
+        \\ Total Physical Size: {d}
+        \\ Total Available Size: {d}
+        \\ Used Heap Size: {d}
+        \\ Heap Size Limit: {d}
+        \\ Malloced Memory: {d}
+        \\ External Memory: {d}
+        \\ Peak Malloced Memory: {d}
+        \\ Number Of Native Contexts: {d}
+        \\ Number Of Detached Contexts: {d}
+        \\ Total Global Handles Size: {d}
+        \\ Used Global Handles Size: {d}
+        \\ Zap Garbage: {any}
+        \\
+    , .{ stats.total_heap_size, stats.total_heap_size_executable, stats.total_physical_size, stats.total_available_size, stats.used_heap_size, stats.heap_size_limit, stats.malloced_memory, stats.external_memory, stats.peak_malloced_memory, stats.number_of_native_contexts, stats.number_of_detached_contexts, stats.total_global_handles_size, stats.used_global_handles_size, stats.does_zap_garbage });
+}
+
+fn promiseRejectCallback(message_handle: v8.PromiseRejectMessage) callconv(.c) void {
+    const promise_handle = v8.v8__PromiseRejectMessage__GetPromise(&message_handle).?;
+    const v8_isolate = v8.v8__Object__GetIsolate(@ptrCast(promise_handle)).?;
+    const js_isolate = js.Isolate{ .handle = v8_isolate };
+    const ctx = Context.fromIsolate(js_isolate);
+
+    const local = js.Local{
+        .ctx = ctx,
+        .isolate = js_isolate,
+        .handle = v8.v8__Isolate__GetCurrentContext(v8_isolate).?,
+        .call_arena = ctx.call_arena,
+    };
+
+    const value =
+        if (v8.v8__PromiseRejectMessage__GetValue(&message_handle)) |v8_value|
+            // @HandleScope - no reason to create a js.Context here
+            local.valueHandleToString(v8_value, .{}) catch |err| @errorName(err)
+        else
+            "no value";
+
+    log.debug(.js, "unhandled rejection", .{
+        .value = value,
+        .stack = local.stackTrace() catch |err| @errorName(err) orelse "???",
+        .note = "This should be updated to call window.unhandledrejection",
+    });
+}
+
+fn fatalCallback(c_location: [*c]const u8, c_message: [*c]const u8) callconv(.c) void {
+    const location = std.mem.span(c_location);
+    const message = std.mem.span(c_message);
+    log.fatal(.app, "V8 fatal callback", .{ .location = location, .message = message });
+    @import("../../crash_handler.zig").crash("Fatal V8 Error", .{ .location = location, .message = message }, @returnAddress());
+}
+
+fn oomCallback(c_location: [*c]const u8, details: ?*const v8.OOMDetails) callconv(.c) void {
+    const location = std.mem.span(c_location);
+    const detail = if (details) |d| std.mem.span(d.detail) else "";
+    log.fatal(.app, "V8 OOM", .{ .location = location, .detail = detail });
+    @import("../../crash_handler.zig").crash("V8 OOM", .{ .location = location, .detail = detail }, @returnAddress());
+}

src/browser/js/ExecutionWorld.zig

@@ -0,0 +1,136 @@
+// 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 lp = @import("lightpanda");
+
+const log = @import("../../log.zig");
+const Page = @import("../Page.zig");
+
+const js = @import("js.zig");
+const v8 = js.v8;
+
+const Env = @import("Env.zig");
+const bridge = @import("bridge.zig");
+const Context = @import("Context.zig");
+
+const ArenaAllocator = std.heap.ArenaAllocator;
+const IS_DEBUG = @import("builtin").mode == .Debug;
+
+const CONTEXT_ARENA_RETAIN = 1024 * 64;
+
+// ExecutionWorld closely models a JS World.
+// https://chromium.googlesource.com/chromium/src/+/master/third_party/blink/renderer/bindings/core/v8/V8BindingDesign.md#World
+// https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/scripting/ExecutionWorld
+const ExecutionWorld = @This();
+
+env: *Env,
+
+// Arena whose lifetime is for a single page load. Where
+// the call_arena lives for a single function call, the context_arena
+// lives for the lifetime of the entire page. The allocator will be
+// owned by the Context, but the arena itself is owned by the ExecutionWorld
+// so that we can re-use it from context to context.
+context_arena: ArenaAllocator,
+
+// Currently a context maps to a Browser's Page. Here though, it's only a
+// mechanism to organization page-specific memory. The ExecutionWorld
+// does all the work, but having all page-specific data structures
+// grouped together helps keep things clean.
+context: ?Context = null,
+
+// no init, must be initialized via env.newExecutionWorld()
+
+pub fn deinit(self: *ExecutionWorld) void {
+    if (self.context != null) {
+        self.removeContext();
+    }
+    self.context_arena.deinit();
+}
+
+// Only the top Context in the Main ExecutionWorld should hold a handle_scope.
+// A js.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 createContext(self: *ExecutionWorld, page: *Page, enter: bool) !*Context {
+    lp.assert(self.context == null, "ExecptionWorld.createContext has context", .{});
+
+    const env = self.env;
+    const isolate = env.isolate;
+    const arena = self.context_arena.allocator();
+
+    var hs: js.HandleScope = undefined;
+    hs.init(isolate);
+    defer hs.deinit();
+
+    // Get the global template that was created once per isolate
+    const global_template: *const v8.ObjectTemplate = @ptrCast(@alignCast(v8.v8__Eternal__Get(&env.global_template, isolate.handle).?));
+    const v8_context = v8.v8__Context__New(isolate.handle, global_template, null).?;
+
+    // Create the v8::Context and wrap it in a v8::Global
+    var context_global: v8.Global = undefined;
+    v8.v8__Global__New(isolate.handle, v8_context, &context_global);
+
+    // our window wrapped in a v8::Global
+    const global_obj = v8.v8__Context__Global(v8_context).?;
+    var global_global: v8.Global = undefined;
+    v8.v8__Global__New(isolate.handle, global_obj, &global_global);
+
+    if (enter) {
+        v8.v8__Context__Enter(v8_context);
+    }
+    errdefer if (enter) {
+        v8.v8__Context__Exit(v8_context);
+    };
+
+    const context_id = env.context_id;
+    env.context_id = context_id + 1;
+
+    self.context = Context{
+        .page = page,
+        .id = context_id,
+        .entered = enter,
+        .isolate = isolate,
+        .handle = context_global,
+        .templates = env.templates,
+        .script_manager = &page._script_manager,
+        .call_arena = page.call_arena,
+        .arena = arena,
+    };
+
+    var context = &self.context.?;
+    try context.identity_map.putNoClobber(arena, @intFromPtr(page.window), global_global);
+
+    // Store a pointer to our context inside the v8 context so that, given
+    // a v8 context, we can get our context out
+    const data = isolate.initBigInt(@intFromPtr(&self.context.?));
+    v8.v8__Context__SetEmbedderData(v8_context, 1, @ptrCast(data.handle));
+
+    return &self.context.?;
+}
+
+pub fn removeContext(self: *ExecutionWorld) void {
+    var context = &(self.context orelse return);
+    context.deinit();
+    self.context = null;
+
+    self.env.isolate.notifyContextDisposed();
+    _ = self.context_arena.reset(.{ .retain_with_limit = CONTEXT_ARENA_RETAIN });
+}

src/browser/js/Function.zig

@@ -0,0 +1,243 @@
+// 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 js = @import("js.zig");
+const v8 = js.v8;
+
+const log = @import("../../log.zig");
+
+const Allocator = std.mem.Allocator;
+
+const Function = @This();
+
+local: *const js.Local,
+this: ?*const v8.Object = null,
+handle: *const v8.Function,
+
+pub const Result = struct {
+    stack: ?[]const u8,
+    exception: []const u8,
+};
+
+pub fn withThis(self: *const Function, value: anytype) !Function {
+    const local = self.local;
+    const this_obj = if (@TypeOf(value) == js.Object)
+        value.handle
+    else
+        (try local.zigValueToJs(value, .{})).handle;
+
+    return .{
+        .local = local,
+        .this = this_obj,
+        .handle = self.handle,
+    };
+}
+
+pub fn newInstance(self: *const Function, caught: *js.TryCatch.Caught) !js.Object {
+    const local = self.local;
+
+    var try_catch: js.TryCatch = undefined;
+    try_catch.init(local);
+    defer try_catch.deinit();
+
+    // This creates a new instance using this Function as a constructor.
+    // const c_args = @as(?[*]const ?*c.Value, @ptrCast(&.{}));
+    const handle = v8.v8__Function__NewInstance(self.handle, local.handle, 0, null) orelse {
+        caught.* = try_catch.caughtOrError(local.call_arena, error.Unknown);
+        return error.JsConstructorFailed;
+    };
+
+    return .{
+        .local = local,
+        .handle = handle,
+    };
+}
+
+pub fn call(self: *const Function, comptime T: type, args: anytype) !T {
+    var caught: js.TryCatch.Caught = undefined;
+    return self._tryCallWithThis(T, self.getThis(), args, &caught) catch |err| {
+        log.warn(.js, "call caught", .{ .err = err, .caught = caught });
+        return err;
+    };
+}
+
+pub fn callWithThis(self: *const Function, comptime T: type, this: anytype, args: anytype) !T {
+    var caught: js.TryCatch.Caught = undefined;
+    return self._tryCallWithThis(T, this, args, &caught) catch |err| {
+        log.warn(.js, "callWithThis caught", .{ .err = err, .caught = caught });
+        return err;
+    };
+}
+
+pub fn tryCall(self: *const Function, comptime T: type, args: anytype, caught: *js.TryCatch.Caught) !T {
+    return self._tryCallWithThis(T, self.getThis(), args, caught);
+}
+
+pub fn tryCallWithThis(self: *const Function, comptime T: type, this: anytype, args: anytype, caught: *js.TryCatch.Caught) !T {
+    return self._tryCallWithThis(T, this, args, caught);
+}
+
+pub fn _tryCallWithThis(self: *const Function, comptime T: type, this: anytype, args: anytype, caught: *js.TryCatch.Caught) !T {
+    caught.* = .{};
+    const local = self.local;
+
+    // When we're calling a function from within JavaScript itself, this isn't
+    // necessary. We're within a Caller instantiation, which will already have
+    // incremented the call_depth and it won't decrement it until the Caller is
+    // done.
+    // But some JS functions are initiated from Zig code, and not v8. For
+    // example, Observers, some event and window callbacks. In those cases, we
+    // need to increase the call_depth so that the call_arena remains valid for
+    // the duration of the function call. If we don't do this, the call_arena
+    // will be reset after each statement of the function which executes Zig code.
+    const ctx = local.ctx;
+    const call_depth = ctx.call_depth;
+    ctx.call_depth = call_depth + 1;
+    defer ctx.call_depth = call_depth;
+
+    const js_this = blk: {
+        if (@TypeOf(this) == js.Object) {
+            break :blk this;
+        }
+        break :blk try local.zigValueToJs(this, .{});
+    };
+
+    const aargs = if (comptime @typeInfo(@TypeOf(args)) == .null) struct {}{} else args;
+
+    const js_args: []const *const v8.Value = switch (@typeInfo(@TypeOf(aargs))) {
+        .@"struct" => |s| blk: {
+            const fields = s.fields;
+            var js_args: [fields.len]*const v8.Value = undefined;
+            inline for (fields, 0..) |f, i| {
+                js_args[i] = (try local.zigValueToJs(@field(aargs, f.name), .{})).handle;
+            }
+            const cargs: [fields.len]*const v8.Value = js_args;
+            break :blk &cargs;
+        },
+        .pointer => blk: {
+            var values = try local.call_arena.alloc(*const v8.Value, args.len);
+            for (args, 0..) |a, i| {
+                values[i] = (try local.zigValueToJs(a, .{})).handle;
+            }
+            break :blk values;
+        },
+        else => @compileError("JS Function called with invalid paremter type"),
+    };
+
+    const c_args = @as(?[*]const ?*v8.Value, @ptrCast(js_args.ptr));
+
+    var try_catch: js.TryCatch = undefined;
+    try_catch.init(local);
+    defer try_catch.deinit();
+
+    const handle = v8.v8__Function__Call(self.handle, local.handle, js_this.handle, @as(c_int, @intCast(js_args.len)), c_args) orelse {
+        caught.* = try_catch.caughtOrError(local.call_arena, error.JSExecCallback);
+        return error.JSExecCallback;
+    };
+
+    if (@typeInfo(T) == .void) {
+        return {};
+    }
+    return local.jsValueToZig(T, .{ .local = local, .handle = handle });
+}
+
+fn getThis(self: *const Function) js.Object {
+    const handle = if (self.this) |t| t else v8.v8__Context__Global(self.local.handle).?;
+    return .{
+        .local = self.local,
+        .handle = handle,
+    };
+}
+
+pub fn src(self: *const Function) ![]const u8 {
+    return self.local.valueToString(.{ .local = self.local, .handle = @ptrCast(self.handle) }, .{});
+}
+
+pub fn getPropertyValue(self: *const Function, name: []const u8) !?js.Value {
+    const local = self.local;
+    const key = local.isolate.initStringHandle(name);
+    const handle = v8.v8__Object__Get(self.handle, self.local.handle, key) orelse {
+        return error.JsException;
+    };
+
+    return .{
+        .local = local,
+        .handle = handle,
+    };
+}
+
+pub fn persist(self: *const Function) !Global {
+    return self._persist(true);
+}
+
+pub fn temp(self: *const Function) !Temp {
+    return self._persist(false);
+}
+
+fn _persist(self: *const Function, comptime is_global: bool) !(if (is_global) Global else Temp) {
+    var ctx = self.local.ctx;
+
+    var global: v8.Global = undefined;
+    v8.v8__Global__New(ctx.isolate.handle, self.handle, &global);
+    if (comptime is_global) {
+        try ctx.global_functions.append(ctx.arena, global);
+    } else {
+        try ctx.global_functions_temp.put(ctx.arena, global.data_ptr, global);
+    }
+    return .{ .handle = global };
+}
+
+pub fn tempWithThis(self: *const Function, value: anytype) !Temp {
+    const with_this = try self.withThis(value);
+    return with_this.temp();
+}
+
+pub fn persistWithThis(self: *const Function, value: anytype) !Global {
+    const with_this = try self.withThis(value);
+    return with_this.persist();
+}
+
+pub const Temp = G(0);
+pub const Global = G(1);
+
+fn G(comptime discriminator: u8) type {
+    return struct {
+        handle: v8.Global,
+
+        // makes the types different (G(0) != G(1)), without taking up space
+        comptime _: u8 = discriminator,
+
+        const Self = @This();
+
+        pub fn deinit(self: *Self) void {
+            v8.v8__Global__Reset(&self.handle);
+        }
+
+        pub fn local(self: *const Self, l: *const js.Local) Function {
+            return .{
+                .local = l,
+                .handle = @ptrCast(v8.v8__Global__Get(&self.handle, l.isolate.handle)),
+            };
+        }
+
+        pub fn isEqual(self: *const Self, other: Function) bool {
+            return v8.v8__Global__IsEqual(&self.handle, other.handle);
+        }
+    };
+}

src/browser/js/HandleScope.zig

@@ -0,0 +1,36 @@
+// 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 js = @import("js.zig");
+const v8 = js.v8;
+
+const HandleScope = @This();
+
+handle: v8.HandleScope,
+
+// V8 takes an address of the value that's passed in, so it needs to be stable.
+// We can't create the v8.HandleScope here, pass it to v8 and then return the
+// value, as v8 will then have taken the address of the function-scopped (and no
+// longer valid) local.
+pub fn init(self: *HandleScope, isolate: js.Isolate) void {
+    v8.v8__HandleScope__CONSTRUCT(&self.handle, isolate.handle);
+}
+
+pub fn deinit(self: *HandleScope) void {
+    v8.v8__HandleScope__DESTRUCT(&self.handle);
+}

src/browser/js/Inspector.zig

@@ -0,0 +1,515 @@
+// 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 js = @import("js.zig");
+const v8 = js.v8;
+
+const TaggedOpaque = @import("TaggedOpaque.zig");
+
+const Allocator = std.mem.Allocator;
+const RndGen = std.Random.DefaultPrng;
+
+const CONTEXT_GROUP_ID = 1;
+const CLIENT_TRUST_LEVEL = 1;
+
+const Inspector = @This();
+
+handle: *v8.Inspector,
+isolate: *v8.Isolate,
+client: Client,
+channel: Channel,
+session: Session,
+rnd: RndGen = RndGen.init(0),
+default_context: ?v8.Global,
+
+// We expect allocator to be an arena
+// Note: This initializes the pre-allocated inspector in-place
+pub fn init(self: *Inspector, isolate: *v8.Isolate, ctx: anytype) !void {
+    const ContextT = @TypeOf(ctx);
+
+    const Container = switch (@typeInfo(ContextT)) {
+        .@"struct" => ContextT,
+        .pointer => |ptr| ptr.child,
+        .void => NoopInspector,
+        else => @compileError("invalid context type"),
+    };
+    // If necessary, turn a void context into something we can safely ptrCast
+    const safe_context: *anyopaque = if (ContextT == void) @ptrCast(@constCast(&{})) else ctx;
+
+    // Initialize the fields that callbacks need first
+    self.* = .{
+        .handle = undefined,
+        .isolate = isolate,
+        .client = undefined,
+        .channel = undefined,
+        .rnd = RndGen.init(0),
+        .default_context = null,
+        .session = undefined,
+    };
+
+    // Create client and set inspector data BEFORE creating the inspector
+    // because V8 will call generateUniqueId during inspector creation
+    const client = Client.init();
+    self.client = client;
+    client.setInspector(self);
+
+    // Now create the inspector - generateUniqueId will work because data is set
+    const handle = v8.v8_inspector__Inspector__Create(isolate, client.handle).?;
+    self.handle = handle;
+
+    // Create the channel
+    const channel = Channel.init(
+        safe_context,
+        Container.onInspectorResponse,
+        Container.onInspectorEvent,
+        Container.onRunMessageLoopOnPause,
+        Container.onQuitMessageLoopOnPause,
+        isolate,
+    );
+    self.channel = channel;
+    channel.setInspector(self);
+
+    // Create the session
+    const session_handle = v8.v8_inspector__Inspector__Connect(
+        handle,
+        CONTEXT_GROUP_ID,
+        channel.handle,
+        CLIENT_TRUST_LEVEL,
+    ).?;
+    self.session = .{ .handle = session_handle };
+}
+
+pub fn deinit(self: *const Inspector) void {
+    var hs: v8.HandleScope = undefined;
+    v8.v8__HandleScope__CONSTRUCT(&hs, self.isolate);
+    defer v8.v8__HandleScope__DESTRUCT(&hs);
+
+    self.session.deinit();
+    self.client.deinit();
+    self.channel.deinit();
+    v8.v8_inspector__Inspector__DELETE(self.handle);
+}
+
+pub fn send(self: *const Inspector, msg: []const u8) void {
+    // Can't assume the main Context exists (with its HandleScope)
+    // available when doing this. Pages (and thus the HandleScope)
+    // comes and goes, but CDP can keep sending messages.
+    const isolate = self.isolate;
+    var temp_scope: v8.HandleScope = undefined;
+    v8.v8__HandleScope__CONSTRUCT(&temp_scope, isolate);
+    defer v8.v8__HandleScope__DESTRUCT(&temp_scope);
+
+    self.session.dispatchProtocolMessage(isolate, msg);
+}
+
+// From CDP docs
+// https://chromedevtools.github.io/devtools-protocol/tot/Runtime/#type-ExecutionContextDescription
+// ----
+// - name: Human readable name describing given context.
+// - origin: Execution context origin (ie. URL who initialised the request)
+// - auxData: Embedder-specific auxiliary data likely matching
+// {isDefault: boolean, type: 'default'|'isolated'|'worker', frameId: string}
+// - is_default_context: Whether the execution context is default, should match the auxData
+pub fn contextCreated(
+    self: *Inspector,
+    local: *const js.Local,
+    name: []const u8,
+    origin: []const u8,
+    aux_data: []const u8,
+    is_default_context: bool,
+) void {
+    v8.v8_inspector__Inspector__ContextCreated(
+        self.handle,
+        name.ptr,
+        name.len,
+        origin.ptr,
+        origin.len,
+        aux_data.ptr,
+        aux_data.len,
+        CONTEXT_GROUP_ID,
+        local.handle,
+    );
+
+    if (is_default_context) {
+        self.default_context = local.ctx.handle;
+    }
+}
+
+pub fn contextDestroyed(self: *Inspector, local: *const js.Local) void {
+    v8.v8_inspector__Inspector__ContextDestroyed(self.handle, local.handle);
+}
+
+pub fn resetContextGroup(self: *const Inspector) void {
+    var hs: v8.HandleScope = undefined;
+    v8.v8__HandleScope__CONSTRUCT(&hs, self.isolate);
+    defer v8.v8__HandleScope__DESTRUCT(&hs);
+
+    v8.v8_inspector__Inspector__ResetContextGroup(self.handle, CONTEXT_GROUP_ID);
+}
+
+// Retrieves the RemoteObject for a given value.
+// The value is loaded through the ExecutionWorld's mapZigInstanceToJs function,
+// just like a method return value. Therefore, if we've mapped this
+// value before, we'll get the existing js.Global(js.Object) and if not
+// we'll create it and track it for cleanup when the context ends.
+pub fn getRemoteObject(
+    self: *const Inspector,
+    local: *const js.Local,
+    group: []const u8,
+    value: anytype,
+) !RemoteObject {
+    const js_val = try local.zigValueToJs(value, .{});
+
+    // We do not want to expose this as a parameter for now
+    const generate_preview = false;
+    return self.session.wrapObject(
+        local.isolate.handle,
+        local.handle,
+        js_val.handle,
+        group,
+        generate_preview,
+    );
+}
+
+// Gets a value by object ID regardless of which context it is in.
+// Our TaggedOpaque stores the "resolved" ptr value (the most specific _type,
+// e.g. we store the ptr to the Div not the EventTarget). But, this is asking for
+// the pointer to the Node, so we need to use the same resolution mechanism which
+// is used when we're calling a function to turn the Div into a Node, which is
+// what TaggedOpaque.fromJS does.
+pub fn getNodePtr(self: *const Inspector, allocator: Allocator, object_id: []const u8, local: *js.Local) !*anyopaque {
+    // just to indicate that the caller is responsible for ensure there's a local environment
+    _ = local;
+    const unwrapped = try self.session.unwrapObject(allocator, object_id);
+    // The values context and groupId are not used here
+    const js_val = unwrapped.value;
+    if (!v8.v8__Value__IsObject(js_val)) {
+        return error.ObjectIdIsNotANode;
+    }
+
+    const Node = @import("../webapi/Node.zig");
+    // Cast to *const v8.Object for typeTaggedAnyOpaque
+    return TaggedOpaque.fromJS(*Node, @ptrCast(js_val)) catch return error.ObjectIdIsNotANode;
+}
+
+pub const RemoteObject = struct {
+    handle: *v8.RemoteObject,
+
+    pub fn deinit(self: RemoteObject) void {
+        v8.v8_inspector__RemoteObject__DELETE(self.handle);
+    }
+
+    pub fn getType(self: RemoteObject, allocator: Allocator) ![]const u8 {
+        var ctype_: v8.CZigString = .{ .ptr = null, .len = 0 };
+        if (!v8.v8_inspector__RemoteObject__getType(self.handle, &allocator, &ctype_)) return error.V8AllocFailed;
+        return cZigStringToString(ctype_) orelse return error.InvalidType;
+    }
+
+    pub fn getSubtype(self: RemoteObject, allocator: Allocator) !?[]const u8 {
+        if (!v8.v8_inspector__RemoteObject__hasSubtype(self.handle)) return null;
+
+        var csubtype: v8.CZigString = .{ .ptr = null, .len = 0 };
+        if (!v8.v8_inspector__RemoteObject__getSubtype(self.handle, &allocator, &csubtype)) return error.V8AllocFailed;
+        return cZigStringToString(csubtype);
+    }
+
+    pub fn getClassName(self: RemoteObject, allocator: Allocator) !?[]const u8 {
+        if (!v8.v8_inspector__RemoteObject__hasClassName(self.handle)) return null;
+
+        var cclass_name: v8.CZigString = .{ .ptr = null, .len = 0 };
+        if (!v8.v8_inspector__RemoteObject__getClassName(self.handle, &allocator, &cclass_name)) return error.V8AllocFailed;
+        return cZigStringToString(cclass_name);
+    }
+
+    pub fn getDescription(self: RemoteObject, allocator: Allocator) !?[]const u8 {
+        if (!v8.v8_inspector__RemoteObject__hasDescription(self.handle)) return null;
+
+        var description: v8.CZigString = .{ .ptr = null, .len = 0 };
+        if (!v8.v8_inspector__RemoteObject__getDescription(self.handle, &allocator, &description)) return error.V8AllocFailed;
+        return cZigStringToString(description);
+    }
+
+    pub fn getObjectId(self: RemoteObject, allocator: Allocator) !?[]const u8 {
+        if (!v8.v8_inspector__RemoteObject__hasObjectId(self.handle)) return null;
+
+        var cobject_id: v8.CZigString = .{ .ptr = null, .len = 0 };
+        if (!v8.v8_inspector__RemoteObject__getObjectId(self.handle, &allocator, &cobject_id)) return error.V8AllocFailed;
+        return cZigStringToString(cobject_id);
+    }
+};
+
+const Session = struct {
+    handle: *v8.InspectorSession,
+
+    fn deinit(self: Session) void {
+        v8.v8_inspector__Session__DELETE(self.handle);
+    }
+
+    fn dispatchProtocolMessage(self: Session, isolate: *v8.Isolate, msg: []const u8) void {
+        v8.v8_inspector__Session__dispatchProtocolMessage(
+            self.handle,
+            isolate,
+            msg.ptr,
+            msg.len,
+        );
+    }
+
+    fn wrapObject(
+        self: Session,
+        isolate: *v8.Isolate,
+        ctx: *const v8.Context,
+        val: *const v8.Value,
+        grpname: []const u8,
+        generatepreview: bool,
+    ) !RemoteObject {
+        const remote_object = v8.v8_inspector__Session__wrapObject(
+            self.handle,
+            isolate,
+            ctx,
+            val,
+            grpname.ptr,
+            grpname.len,
+            generatepreview,
+        ).?;
+        return .{ .handle = remote_object };
+    }
+
+    fn unwrapObject(
+        self: Session,
+        allocator: Allocator,
+        object_id: []const u8,
+    ) !UnwrappedObject {
+        const in_object_id = v8.CZigString{
+            .ptr = object_id.ptr,
+            .len = object_id.len,
+        };
+        var out_error: v8.CZigString = .{ .ptr = null, .len = 0 };
+        var out_value_handle: ?*v8.Value = null;
+        var out_context_handle: ?*v8.Context = null;
+        var out_object_group: v8.CZigString = .{ .ptr = null, .len = 0 };
+
+        const result = v8.v8_inspector__Session__unwrapObject(
+            self.handle,
+            &allocator,
+            &out_error,
+            in_object_id,
+            &out_value_handle,
+            &out_context_handle,
+            &out_object_group,
+        );
+
+        if (!result) {
+            const error_str = cZigStringToString(out_error) orelse return error.UnwrapFailed;
+            std.log.err("unwrapObject failed: {s}", .{error_str});
+            return error.UnwrapFailed;
+        }
+
+        return .{
+            .value = out_value_handle.?,
+            .context = out_context_handle.?,
+            .object_group = cZigStringToString(out_object_group),
+        };
+    }
+};
+
+const UnwrappedObject = struct {
+    value: *const v8.Value,
+    context: *const v8.Context,
+    object_group: ?[]const u8,
+};
+
+const Channel = struct {
+    handle: *v8.InspectorChannelImpl,
+
+    // callbacks
+    ctx: *anyopaque,
+    onNotif: onNotifFn = undefined,
+    onResp: onRespFn = undefined,
+    onRunMessageLoopOnPause: onRunMessageLoopOnPauseFn = undefined,
+    onQuitMessageLoopOnPause: onQuitMessageLoopOnPauseFn = undefined,
+
+    pub const onNotifFn = *const fn (ctx: *anyopaque, msg: []const u8) void;
+    pub const onRespFn = *const fn (ctx: *anyopaque, call_id: u32, msg: []const u8) void;
+    pub const onRunMessageLoopOnPauseFn = *const fn (ctx: *anyopaque, context_group_id: u32) void;
+    pub const onQuitMessageLoopOnPauseFn = *const fn (ctx: *anyopaque) void;
+
+    fn init(
+        ctx: *anyopaque,
+        onResp: onRespFn,
+        onNotif: onNotifFn,
+        onRunMessageLoopOnPause: onRunMessageLoopOnPauseFn,
+        onQuitMessageLoopOnPause: onQuitMessageLoopOnPauseFn,
+        isolate: *v8.Isolate,
+    ) Channel {
+        const handle = v8.v8_inspector__Channel__IMPL__CREATE(isolate);
+        return .{
+            .handle = handle,
+            .ctx = ctx,
+            .onResp = onResp,
+            .onNotif = onNotif,
+            .onRunMessageLoopOnPause = onRunMessageLoopOnPause,
+            .onQuitMessageLoopOnPause = onQuitMessageLoopOnPause,
+        };
+    }
+
+    fn deinit(self: Channel) void {
+        v8.v8_inspector__Channel__IMPL__DELETE(self.handle);
+    }
+
+    fn setInspector(self: Channel, inspector: *anyopaque) void {
+        v8.v8_inspector__Channel__IMPL__SET_DATA(self.handle, inspector);
+    }
+
+    fn resp(self: Channel, call_id: u32, msg: []const u8) void {
+        self.onResp(self.ctx, call_id, msg);
+    }
+
+    fn notif(self: Channel, msg: []const u8) void {
+        self.onNotif(self.ctx, msg);
+    }
+};
+
+const Client = struct {
+    handle: *v8.InspectorClientImpl,
+
+    fn init() Client {
+        return .{ .handle = v8.v8_inspector__Client__IMPL__CREATE() };
+    }
+
+    fn deinit(self: Client) void {
+        v8.v8_inspector__Client__IMPL__DELETE(self.handle);
+    }
+
+    fn setInspector(self: Client, inspector: *anyopaque) void {
+        v8.v8_inspector__Client__IMPL__SET_DATA(self.handle, inspector);
+    }
+};
+
+const NoopInspector = struct {
+    pub fn onInspectorResponse(_: *anyopaque, _: u32, _: []const u8) void {}
+    pub fn onInspectorEvent(_: *anyopaque, _: []const u8) void {}
+    pub fn onRunMessageLoopOnPause(_: *anyopaque, _: u32) void {}
+    pub fn onQuitMessageLoopOnPause(_: *anyopaque) void {}
+};
+
+fn fromData(data: *anyopaque) *Inspector {
+    return @ptrCast(@alignCast(data));
+}
+
+pub fn getTaggedOpaque(value: *const v8.Value) ?*TaggedOpaque {
+    if (!v8.v8__Value__IsObject(value)) {
+        return null;
+    }
+    const internal_field_count = v8.v8__Object__InternalFieldCount(value);
+    if (internal_field_count == 0) {
+        return null;
+    }
+
+    const external_value = v8.v8__Object__GetInternalField(value, 0).?;
+    const external_data = v8.v8__External__Value(external_value).?;
+    return @ptrCast(@alignCast(external_data));
+}
+
+fn cZigStringToString(s: v8.CZigString) ?[]const u8 {
+    if (s.ptr == null) return null;
+    return s.ptr[0..s.len];
+}
+
+// C export functions for Inspector callbacks
+pub export fn v8_inspector__Client__IMPL__generateUniqueId(
+    _: *v8.InspectorClientImpl,
+    data: *anyopaque,
+) callconv(.c) i64 {
+    const inspector: *Inspector = @ptrCast(@alignCast(data));
+    return inspector.rnd.random().int(i64);
+}
+
+pub export fn v8_inspector__Client__IMPL__runMessageLoopOnPause(
+    _: *v8.InspectorClientImpl,
+    data: *anyopaque,
+    ctx_group_id: c_int,
+) callconv(.c) void {
+    const inspector: *Inspector = @ptrCast(@alignCast(data));
+    inspector.channel.onRunMessageLoopOnPause(inspector.channel.ctx, @intCast(ctx_group_id));
+}
+
+pub export fn v8_inspector__Client__IMPL__quitMessageLoopOnPause(
+    _: *v8.InspectorClientImpl,
+    data: *anyopaque,
+) callconv(.c) void {
+    const inspector: *Inspector = @ptrCast(@alignCast(data));
+    inspector.channel.onQuitMessageLoopOnPause(inspector.channel.ctx);
+}
+
+pub export fn v8_inspector__Client__IMPL__runIfWaitingForDebugger(
+    _: *v8.InspectorClientImpl,
+    _: *anyopaque,
+    _: c_int,
+) callconv(.c) void {
+    // TODO
+}
+
+pub export fn v8_inspector__Client__IMPL__consoleAPIMessage(
+    _: *v8.InspectorClientImpl,
+    _: *anyopaque,
+    _: c_int,
+    _: v8.MessageErrorLevel,
+    _: *v8.StringView,
+    _: *v8.StringView,
+    _: c_uint,
+    _: c_uint,
+    _: *v8.StackTrace,
+) callconv(.c) void {}
+
+pub export fn v8_inspector__Client__IMPL__ensureDefaultContextInGroup(
+    _: *v8.InspectorClientImpl,
+    data: *anyopaque,
+) callconv(.c) ?*const v8.Context {
+    const inspector: *Inspector = @ptrCast(@alignCast(data));
+    const global_handle = inspector.default_context orelse return null;
+    return v8.v8__Global__Get(&global_handle, inspector.isolate);
+}
+
+pub export fn v8_inspector__Channel__IMPL__sendResponse(
+    _: *v8.InspectorChannelImpl,
+    data: *anyopaque,
+    call_id: c_int,
+    msg: [*c]u8,
+    length: usize,
+) callconv(.c) void {
+    const inspector: *Inspector = @ptrCast(@alignCast(data));
+    inspector.channel.resp(@as(u32, @intCast(call_id)), msg[0..length]);
+}
+
+pub export fn v8_inspector__Channel__IMPL__sendNotification(
+    _: *v8.InspectorChannelImpl,
+    data: *anyopaque,
+    msg: [*c]u8,
+    length: usize,
+) callconv(.c) void {
+    const inspector: *Inspector = @ptrCast(@alignCast(data));
+    inspector.channel.notif(msg[0..length]);
+}
+
+pub export fn v8_inspector__Channel__IMPL__flushProtocolNotifications(
+    _: *v8.InspectorChannelImpl,
+    _: *anyopaque,
+) callconv(.c) void {
+    // TODO
+}

src/browser/js/Integer.zig

@@ -0,0 +1,35 @@
+// 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 js = @import("js.zig");
+
+const v8 = js.v8;
+
+const Integer = @This();
+
+handle: *const v8.Integer,
+
+pub fn init(isolate: *v8.Isolate, value: anytype) Integer {
+    const handle = switch (@TypeOf(value)) {
+        i8, i16, i32 => v8.v8__Integer__New(isolate, value).?,
+        u8, u16, u32 => v8.v8__Integer__NewFromUnsigned(isolate, value).?,
+        else => |T| @compileError("cannot create v8::Integer from: " ++ @typeName(T)),
+    };
+    return .{ .handle = handle };
+}

src/browser/js/Isolate.zig

@@ -0,0 +1,128 @@
+// 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 js = @import("js.zig");
+const v8 = js.v8;
+
+const Isolate = @This();
+
+handle: *v8.Isolate,
+
+pub fn init(params: *v8.CreateParams) Isolate {
+    return .{
+        .handle = v8.v8__Isolate__New(params).?,
+    };
+}
+
+pub fn deinit(self: Isolate) void {
+    v8.v8__Isolate__Dispose(self.handle);
+}
+
+pub fn enter(self: Isolate) void {
+    v8.v8__Isolate__Enter(self.handle);
+}
+
+pub fn exit(self: Isolate) void {
+    v8.v8__Isolate__Exit(self.handle);
+}
+
+pub fn performMicrotasksCheckpoint(self: Isolate) void {
+    v8.v8__Isolate__PerformMicrotaskCheckpoint(self.handle);
+}
+
+pub fn enqueueMicrotask(self: Isolate, callback: anytype, data: anytype) void {
+    v8.v8__Isolate__EnqueueMicrotask(self.handle, callback, data);
+}
+
+pub fn enqueueMicrotaskFunc(self: Isolate, function: js.Function) void {
+    v8.v8__Isolate__EnqueueMicrotaskFunc(self.handle, function.handle);
+}
+
+pub fn lowMemoryNotification(self: Isolate) void {
+    v8.v8__Isolate__LowMemoryNotification(self.handle);
+}
+
+pub const MemoryPressureLevel = enum(u32) {
+    none = v8.kNone,
+    moderate = v8.kModerate,
+    critical = v8.kCritical,
+};
+
+pub fn memoryPressureNotification(self: Isolate, level: MemoryPressureLevel) void {
+    v8.v8__Isolate__MemoryPressureNotification(self.handle, @intFromEnum(level));
+}
+
+pub fn notifyContextDisposed(self: Isolate) void {
+    _ = v8.v8__Isolate__ContextDisposedNotification(self.handle);
+}
+
+pub fn getHeapStatistics(self: Isolate) v8.HeapStatistics {
+    var res: v8.HeapStatistics = undefined;
+    v8.v8__Isolate__GetHeapStatistics(self.handle, &res);
+    return res;
+}
+
+pub fn throwException(self: Isolate, value: *const v8.Value) *const v8.Value {
+    return v8.v8__Isolate__ThrowException(self.handle, value).?;
+}
+
+pub fn initStringHandle(self: Isolate, str: []const u8) *const v8.String {
+    return v8.v8__String__NewFromUtf8(self.handle, str.ptr, v8.kNormal, @as(c_int, @intCast(str.len))).?;
+}
+
+pub fn createError(self: Isolate, msg: []const u8) *const v8.Value {
+    const message = self.initStringHandle(msg);
+    return v8.v8__Exception__Error(message).?;
+}
+
+pub fn createTypeError(self: Isolate, msg: []const u8) *const v8.Value {
+    const message = self.initStringHandle(msg);
+    return v8.v8__Exception__TypeError(message).?;
+}
+
+pub fn initNull(self: Isolate) *const v8.Value {
+    return v8.v8__Null(self.handle).?;
+}
+
+pub fn initUndefined(self: Isolate) *const v8.Value {
+    return v8.v8__Undefined(self.handle).?;
+}
+
+pub fn initFalse(self: Isolate) *const v8.Value {
+    return v8.v8__False(self.handle).?;
+}
+
+pub fn initTrue(self: Isolate) *const v8.Value {
+    return v8.v8__True(self.handle).?;
+}
+
+pub fn initInteger(self: Isolate, val: anytype) js.Integer {
+    return js.Integer.init(self.handle, val);
+}
+
+pub fn initBigInt(self: Isolate, val: anytype) js.BigInt {
+    return js.BigInt.init(self.handle, val);
+}
+
+pub fn initNumber(self: Isolate, val: anytype) js.Number {
+    return js.Number.init(self.handle, val);
+}
+
+pub fn createExternal(self: Isolate, val: *anyopaque) *const v8.External {
+    return v8.v8__External__New(self.handle, val).?;
+}

src/browser/js/Module.zig

@@ -0,0 +1,137 @@
+// 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 js = @import("js.zig");
+const v8 = js.v8;
+
+const Module = @This();
+
+local: *const js.Local,
+handle: *const v8.Module,
+
+pub const Status = enum(u32) {
+    kUninstantiated = v8.kUninstantiated,
+    kInstantiating = v8.kInstantiating,
+    kInstantiated = v8.kInstantiated,
+    kEvaluating = v8.kEvaluating,
+    kEvaluated = v8.kEvaluated,
+    kErrored = v8.kErrored,
+};
+
+pub fn getStatus(self: Module) Status {
+    return @enumFromInt(v8.v8__Module__GetStatus(self.handle));
+}
+
+pub fn getException(self: Module) js.Value {
+    return .{
+        .local = self.local,
+        .handle = v8.v8__Module__GetException(self.handle).?,
+    };
+}
+
+pub fn getModuleRequests(self: Module) Requests {
+    return .{
+        .context_handle = self.local.handle,
+        .handle = v8.v8__Module__GetModuleRequests(self.handle).?,
+    };
+}
+
+pub fn instantiate(self: Module, cb: v8.ResolveModuleCallback) !bool {
+    var out: v8.MaybeBool = undefined;
+    v8.v8__Module__InstantiateModule(self.handle, self.local.handle, cb, &out);
+    if (out.has_value) {
+        return out.value;
+    }
+    return error.JsException;
+}
+
+pub fn evaluate(self: Module) !js.Value {
+    const res = v8.v8__Module__Evaluate(self.handle, self.local.handle) orelse return error.JsException;
+
+    if (self.getStatus() == .kErrored) {
+        return error.JsException;
+    }
+
+    return .{
+        .local = self.local,
+        .handle = res,
+    };
+}
+
+pub fn getIdentityHash(self: Module) u32 {
+    return @bitCast(v8.v8__Module__GetIdentityHash(self.handle));
+}
+
+pub fn getModuleNamespace(self: Module) js.Value {
+    return .{
+        .local = self.local,
+        .handle = v8.v8__Module__GetModuleNamespace(self.handle).?,
+    };
+}
+
+pub fn getScriptId(self: Module) u32 {
+    return @intCast(v8.v8__Module__ScriptId(self.handle));
+}
+
+pub fn persist(self: Module) !Global {
+    var ctx = self.local.ctx;
+    var global: v8.Global = undefined;
+    v8.v8__Global__New(ctx.isolate.handle, self.handle, &global);
+    try ctx.global_modules.append(ctx.arena, global);
+    return .{ .handle = global };
+}
+
+pub const Global = struct {
+    handle: v8.Global,
+
+    pub fn deinit(self: *Global) void {
+        v8.v8__Global__Reset(&self.handle);
+    }
+
+    pub fn local(self: *const Global, l: *const js.Local) Module {
+        return .{
+            .local = l,
+            .handle = @ptrCast(v8.v8__Global__Get(&self.handle, l.isolate.handle)),
+        };
+    }
+
+    pub fn isEqual(self: *const Global, other: Module) bool {
+        return v8.v8__Global__IsEqual(&self.handle, other.handle);
+    }
+};
+
+const Requests = struct {
+    handle: *const v8.FixedArray,
+    context_handle: *const v8.Context,
+
+    pub fn len(self: Requests) usize {
+        return @intCast(v8.v8__FixedArray__Length(self.handle));
+    }
+
+    pub fn get(self: Requests, idx: usize) Request {
+        return .{ .handle = v8.v8__FixedArray__Get(self.handle, self.context_handle, @intCast(idx)).? };
+    }
+};
+
+const Request = struct {
+    handle: *const v8.ModuleRequest,
+
+    pub fn specifier(self: Request) *const v8.String {
+        return v8.v8__ModuleRequest__GetSpecifier(self.handle).?;
+    }
+};

src/browser/js/Name.zig

@@ -1,4 +1,4 @@
-// Copyright (C) 2023-2024  Lightpanda (Selecy SAS)
+// Copyright (C) 2023-2025  Lightpanda (Selecy SAS)
 //
 // Francis Bouvier <francis@lightpanda.io>
 // Pierre Tachoire <pierre@lightpanda.io>
@@ -16,9 +16,9 @@
 // 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/>.
 
-pub const html: []const u8 =
-    \\<main id='content'>
-    \\<a href='foo'>OK</a>
-    \\<p>blah-blah-blah</p>
-    \\</main>
-;
+const js = @import("js.zig");
+const v8 = js.v8;
+
+const Name = @This();
+
+handle: *const v8.Name,

src/browser/js/Number.zig

@@ -0,0 +1,31 @@
+// 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 js = @import("js.zig");
+
+const v8 = js.v8;
+
+const Number = @This();
+
+handle: *const v8.Number,
+
+pub fn init(isolate: *v8.Isolate, value: anytype) Number {
+    const handle = v8.v8__Number__New(isolate, value).?;
+    return .{ .handle = handle };
+}

src/browser/js/Object.zig

@@ -0,0 +1,208 @@
+// 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 js = @import("js.zig");
+const v8 = js.v8;
+
+const IS_DEBUG = @import("builtin").mode == .Debug;
+
+const Context = @import("Context.zig");
+
+const Allocator = std.mem.Allocator;
+
+const Object = @This();
+
+local: *const js.Local,
+handle: *const v8.Object,
+
+pub fn has(self: Object, key: anytype) bool {
+    const ctx = self.local.ctx;
+    const key_handle = if (@TypeOf(key) == *const v8.String) key else ctx.isolate.initStringHandle(key);
+
+    var out: v8.MaybeBool = undefined;
+    v8.v8__Object__Has(self.handle, self.local.handle, key_handle, &out);
+    if (out.has_value) {
+        return out.value;
+    }
+    return false;
+}
+
+pub fn get(self: Object, key: anytype) !js.Value {
+    const ctx = self.local.ctx;
+
+    const key_handle = if (@TypeOf(key) == *const v8.String) key else ctx.isolate.initStringHandle(key);
+    const js_val_handle = v8.v8__Object__Get(self.handle, self.local.handle, key_handle) orelse return error.JsException;
+
+    return .{
+        .local = self.local,
+        .handle = js_val_handle,
+    };
+}
+
+pub fn set(self: Object, key: anytype, value: anytype, comptime opts: js.Caller.CallOpts) !bool {
+    const ctx = self.local.ctx;
+
+    const js_value = try self.local.zigValueToJs(value, opts);
+    const key_handle = if (@TypeOf(key) == *const v8.String) key else ctx.isolate.initStringHandle(key);
+
+    var out: v8.MaybeBool = undefined;
+    v8.v8__Object__Set(self.handle, self.local.handle, key_handle, js_value.handle, &out);
+    return out.has_value;
+}
+
+pub fn defineOwnProperty(self: Object, name: []const u8, value: js.Value, attr: v8.PropertyAttribute) ?bool {
+    const ctx = self.local.ctx;
+    const name_handle = ctx.isolate.initStringHandle(name);
+
+    var out: v8.MaybeBool = undefined;
+    v8.v8__Object__DefineOwnProperty(self.handle, self.local.handle, @ptrCast(name_handle), value.handle, attr, &out);
+
+    if (out.has_value) {
+        return out.value;
+    } else {
+        return null;
+    }
+}
+
+pub fn toString(self: Object) ![]const u8 {
+    return self.local.ctx.valueToString(self.toValue(), .{});
+}
+
+pub fn toValue(self: Object) js.Value {
+    return .{
+        .local = self.local,
+        .handle = @ptrCast(self.handle),
+    };
+}
+
+pub fn format(self: Object, writer: *std.Io.Writer) !void {
+    if (comptime IS_DEBUG) {
+        return self.local.ctx.debugValue(self.toValue(), writer);
+    }
+    const str = self.toString() catch return error.WriteFailed;
+    return writer.writeAll(str);
+}
+
+pub fn persist(self: Object) !Global {
+    var ctx = self.local.ctx;
+
+    var global: v8.Global = undefined;
+    v8.v8__Global__New(ctx.isolate.handle, self.handle, &global);
+
+    try ctx.global_objects.append(ctx.arena, global);
+
+    return .{ .handle = global };
+}
+
+pub fn getFunction(self: Object, name: []const u8) !?js.Function {
+    if (self.isNullOrUndefined()) {
+        return null;
+    }
+    const local = self.local;
+
+    const js_name = local.isolate.initStringHandle(name);
+    const js_val_handle = v8.v8__Object__Get(self.handle, local.handle, js_name) orelse return error.JsException;
+
+    if (v8.v8__Value__IsFunction(js_val_handle) == false) {
+        return null;
+    }
+    return .{
+        .local = local,
+        .handle = @ptrCast(js_val_handle),
+    };
+}
+
+pub fn callMethod(self: Object, comptime T: type, method_name: []const u8, args: anytype) !T {
+    const func = try self.getFunction(method_name) orelse return error.MethodNotFound;
+    return func.callWithThis(T, self, args);
+}
+
+pub fn isNullOrUndefined(self: Object) bool {
+    return v8.v8__Value__IsNullOrUndefined(@ptrCast(self.handle));
+}
+
+pub fn getOwnPropertyNames(self: Object) js.Array {
+    const handle = v8.v8__Object__GetOwnPropertyNames(self.handle, self.local.handle).?;
+    return .{
+        .local = self.local,
+        .handle = handle,
+    };
+}
+
+pub fn getPropertyNames(self: Object) js.Array {
+    const handle = v8.v8__Object__GetPropertyNames(self.handle, self.local.handle).?;
+    return .{
+        .local = self.local,
+        .handle = handle,
+    };
+}
+
+pub fn nameIterator(self: Object) NameIterator {
+    const handle = v8.v8__Object__GetPropertyNames(self.handle, self.local.handle).?;
+    const count = v8.v8__Array__Length(handle);
+
+    return .{
+        .local = self.local,
+        .handle = handle,
+        .count = count,
+    };
+}
+
+pub fn toZig(self: Object, comptime T: type) !T {
+    const js_value = js.Value{ .local = self.local, .handle = @ptrCast(self.handle) };
+    return self.local.jsValueToZig(T, js_value);
+}
+
+pub const Global = struct {
+    handle: v8.Global,
+
+    pub fn deinit(self: *Global) void {
+        v8.v8__Global__Reset(&self.handle);
+    }
+
+    pub fn local(self: *const Global, l: *const js.Local) Object {
+        return .{
+            .local = l,
+            .handle = @ptrCast(v8.v8__Global__Get(&self.handle, l.isolate.handle)),
+        };
+    }
+
+    pub fn isEqual(self: *const Global, other: Object) bool {
+        return v8.v8__Global__IsEqual(&self.handle, other.handle);
+    }
+};
+
+pub const NameIterator = struct {
+    count: u32,
+    idx: u32 = 0,
+    local: *const js.Local,
+    handle: *const v8.Array,
+
+    pub fn next(self: *NameIterator) !?[]const u8 {
+        const idx = self.idx;
+        if (idx == self.count) {
+            return null;
+        }
+        self.idx += 1;
+
+        const js_val_handle = v8.v8__Object__GetIndex(@ptrCast(self.handle), self.local.handle, idx) orelse return error.JsException;
+        const js_val = js.Value{ .local = self.local, .handle = js_val_handle };
+        return try self.local.valueToString(js_val, .{});
+    }
+};

src/browser/js/Platform.zig

@@ -0,0 +1,41 @@
+// 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 js = @import("js.zig");
+const v8 = js.v8;
+
+const Platform = @This();
+handle: *v8.Platform,
+
+pub fn init() !Platform {
+    if (v8.v8__V8__InitializeICU() == false) {
+        return error.FailedToInitializeICU;
+    }
+    // 0 - threadpool size, 0 == let v8 decide
+    // 1 - idle_task_support, 1 == enabled
+    const handle = v8.v8__Platform__NewDefaultPlatform(0, 1).?;
+    v8.v8__V8__InitializePlatform(handle);
+    v8.v8__V8__Initialize();
+    return .{ .handle = handle };
+}
+
+pub fn deinit(self: Platform) void {
+    _ = v8.v8__V8__Dispose();
+    v8.v8__V8__DisposePlatform();
+    v8.v8__Platform__DELETE(self.handle);
+}

src/browser/js/Promise.zig

@@ -0,0 +1,71 @@
+// 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 js = @import("js.zig");
+const v8 = js.v8;
+
+const Promise = @This();
+
+local: *const js.Local,
+handle: *const v8.Promise,
+
+pub fn toObject(self: Promise) js.Object {
+    return .{
+        .local = self.local,
+        .handle = @ptrCast(self.handle),
+    };
+}
+
+pub fn toValue(self: Promise) js.Value {
+    return .{
+        .local = self.local,
+        .handle = @ptrCast(self.handle),
+    };
+}
+
+pub fn thenAndCatch(self: Promise, on_fulfilled: js.Function, on_rejected: js.Function) !Promise {
+    if (v8.v8__Promise__Then2(self.handle, self.local.handle, on_fulfilled.handle, on_rejected.handle)) |handle| {
+        return .{
+            .local = self.local,
+            .handle = handle,
+        };
+    }
+    return error.PromiseChainFailed;
+}
+pub fn persist(self: Promise) !Global {
+    var ctx = self.local.ctx;
+    var global: v8.Global = undefined;
+    v8.v8__Global__New(ctx.isolate.handle, self.handle, &global);
+    try ctx.global_promises.append(ctx.arena, global);
+    return .{ .handle = global };
+}
+
+pub const Global = struct {
+    handle: v8.Global,
+
+    pub fn deinit(self: *Global) void {
+        v8.v8__Global__Reset(&self.handle);
+    }
+
+    pub fn local(self: *const Global, l: *const js.Local) Promise {
+        return .{
+            .local = l,
+            .handle = @ptrCast(v8.v8__Global__Get(&self.handle, l.isolate.handle)),
+        };
+    }
+};

src/browser/js/PromiseResolver.zig

@@ -0,0 +1,99 @@
+// 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 js = @import("js.zig");
+const v8 = js.v8;
+const log = @import("../../log.zig");
+
+const PromiseResolver = @This();
+
+local: *const js.Local,
+handle: *const v8.PromiseResolver,
+
+pub fn init(local: *const js.Local) PromiseResolver {
+    return .{
+        .local = local,
+        .handle = v8.v8__Promise__Resolver__New(local.handle).?,
+    };
+}
+
+pub fn promise(self: PromiseResolver) js.Promise {
+    return .{
+        .local = self.local,
+        .handle = v8.v8__Promise__Resolver__GetPromise(self.handle).?,
+    };
+}
+
+pub fn resolve(self: PromiseResolver, comptime source: []const u8, value: anytype) void {
+    self._resolve(value) catch |err| {
+        log.err(.bug, "resolve", .{ .source = source, .err = err, .persistent = false });
+    };
+}
+
+fn _resolve(self: PromiseResolver, value: anytype) !void {
+    const local = self.local;
+    const js_val = try local.zigValueToJs(value, .{});
+
+    var out: v8.MaybeBool = undefined;
+    v8.v8__Promise__Resolver__Resolve(self.handle, self.local.handle, js_val.handle, &out);
+    if (!out.has_value or !out.value) {
+        return error.FailedToResolvePromise;
+    }
+    local.runMicrotasks();
+}
+
+pub fn reject(self: PromiseResolver, comptime source: []const u8, value: anytype) void {
+    self._reject(value) catch |err| {
+        log.err(.bug, "reject", .{ .source = source, .err = err, .persistent = false });
+    };
+}
+
+fn _reject(self: PromiseResolver, value: anytype) !void {
+    const local = self.local;
+    const js_val = try local.zigValueToJs(value, .{});
+
+    var out: v8.MaybeBool = undefined;
+    v8.v8__Promise__Resolver__Reject(self.handle, local.handle, js_val.handle, &out);
+    if (!out.has_value or !out.value) {
+        return error.FailedToRejectPromise;
+    }
+    local.runMicrotasks();
+}
+
+pub fn persist(self: PromiseResolver) !Global {
+    var ctx = self.local.ctx;
+    var global: v8.Global = undefined;
+    v8.v8__Global__New(ctx.isolate.handle, self.handle, &global);
+    try ctx.global_promise_resolvers.append(ctx.arena, global);
+    return .{ .handle = global };
+}
+
+pub const Global = struct {
+    handle: v8.Global,
+
+    pub fn deinit(self: *Global) void {
+        v8.v8__Global__Reset(&self.handle);
+    }
+
+    pub fn local(self: *const Global, l: *const js.Local) PromiseResolver {
+        return .{
+            .local = l,
+            .handle = @ptrCast(v8.v8__Global__Get(&self.handle, l.isolate.handle)),
+        };
+    }
+};

src/browser/js/Snapshot.zig

@@ -0,0 +1,520 @@
+// 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 js = @import("js.zig");
+const bridge = @import("bridge.zig");
+const log = @import("../../log.zig");
+
+const IS_DEBUG = @import("builtin").mode == .Debug;
+
+const v8 = js.v8;
+const JsApis = bridge.JsApis;
+const Allocator = std.mem.Allocator;
+
+const Snapshot = @This();
+
+const embedded_snapshot_blob = if (@import("build_config").snapshot_path) |path| @embedFile(path) else "";
+
+// When creating our Snapshot, we use local function templates for every Zig type.
+// You cannot, from what I can tell, create persisted FunctionTemplates at
+// snapshot creation time. But you can embedd those templates (or any other v8
+// Data) so that it's available to contexts created from the snapshot. This is
+// the starting index of those function templates, which we can extract. At
+// creation time, in debug, we assert that this is actually a consecutive integer
+// sequence
+data_start: usize,
+
+// The snapshot data (v8.StartupData is a ptr to the data and len).
+startup_data: v8.StartupData,
+
+// V8 doesn't know how to serialize external references, and pretty much any hook
+// into Zig is an external reference (e.g. every accessor and function callback).
+// When we create the snapshot, we give it an array with the address of every
+// external reference. When we load the snapshot, we need to give it the same
+// array with the exact same number of entries in the same order (but, of course
+// cross-process, the value (address) might be different).
+external_references: [countExternalReferences()]isize,
+
+// Track whether this snapshot owns its data (was created in-process)
+// If false, the data points into embedded_snapshot_blob and will not be freed
+owns_data: bool = false,
+
+pub fn load() !Snapshot {
+    if (loadEmbedded()) |snapshot| {
+        return snapshot;
+    }
+    return create();
+}
+
+fn loadEmbedded() ?Snapshot {
+    // Binary format: [data_start: usize][blob data]
+    const min_size = @sizeOf(usize) + 1000;
+    if (embedded_snapshot_blob.len < min_size) {
+        // our blob should be in the MB, this is just a quick sanity check
+        return null;
+    }
+
+    const data_start = std.mem.readInt(usize, embedded_snapshot_blob[0..@sizeOf(usize)], .little);
+    const blob = embedded_snapshot_blob[@sizeOf(usize)..];
+
+    const startup_data = v8.StartupData{ .data = blob.ptr, .raw_size = @intCast(blob.len) };
+    if (!v8.v8__StartupData__IsValid(startup_data)) {
+        return null;
+    }
+
+    return .{
+        .owns_data = false,
+        .data_start = data_start,
+        .startup_data = startup_data,
+        .external_references = collectExternalReferences(),
+    };
+}
+
+pub fn deinit(self: Snapshot) void {
+    // Only free if we own the data (was created in-process)
+    if (self.owns_data) {
+        // V8 allocated this with `new char[]`, so we need to use the C++ delete[] operator
+        v8.v8__StartupData__DELETE(self.startup_data.data);
+    }
+}
+
+pub fn write(self: Snapshot, writer: *std.Io.Writer) !void {
+    if (!self.isValid()) {
+        return error.InvalidSnapshot;
+    }
+
+    try writer.writeInt(usize, self.data_start, .little);
+    try writer.writeAll(self.startup_data.data[0..@intCast(self.startup_data.raw_size)]);
+}
+
+pub fn fromEmbedded(self: Snapshot) bool {
+    // if the snapshot comes from the embedFile, then it'll be flagged as not
+    // owning (aka, not needing to free) the data.
+    return self.owns_data == false;
+}
+
+fn isValid(self: Snapshot) bool {
+    return v8.v8__StartupData__IsValid(self.startup_data);
+}
+
+pub fn create() !Snapshot {
+    var external_references = collectExternalReferences();
+
+    var params: v8.CreateParams = undefined;
+    v8.v8__Isolate__CreateParams__CONSTRUCT(&params);
+    params.array_buffer_allocator = v8.v8__ArrayBuffer__Allocator__NewDefaultAllocator();
+    defer v8.v8__ArrayBuffer__Allocator__DELETE(params.array_buffer_allocator.?);
+    params.external_references = @ptrCast(&external_references);
+
+    const snapshot_creator = v8.v8__SnapshotCreator__CREATE(&params);
+    defer v8.v8__SnapshotCreator__DESTRUCT(snapshot_creator);
+
+    var data_start: usize = 0;
+    const isolate = v8.v8__SnapshotCreator__getIsolate(snapshot_creator).?;
+
+    {
+        // CreateBlob, which we'll call once everything is setup, MUST NOT
+        // be called from an active HandleScope. Hence we have this scope to
+        // clean it up before we call CreateBlob
+        var handle_scope: v8.HandleScope = undefined;
+        v8.v8__HandleScope__CONSTRUCT(&handle_scope, isolate);
+        defer v8.v8__HandleScope__DESTRUCT(&handle_scope);
+
+        // Create templates (constructors only) FIRST
+        var templates: [JsApis.len]*v8.FunctionTemplate = undefined;
+        inline for (JsApis, 0..) |JsApi, i| {
+            @setEvalBranchQuota(10_000);
+            templates[i] = generateConstructor(JsApi, isolate);
+            attachClass(JsApi, isolate, templates[i]);
+        }
+
+        // Set up prototype chains BEFORE attaching properties
+        // This must come before attachClass so inheritance is set up first
+        inline for (JsApis, 0..) |JsApi, i| {
+            if (comptime protoIndexLookup(JsApi)) |proto_index| {
+                v8.v8__FunctionTemplate__Inherit(templates[i], templates[proto_index]);
+            }
+        }
+
+        // Set up the global template to inherit from Window's template
+        // This way the global object gets all Window properties through inheritance
+        const context = v8.v8__Context__New(isolate, null, null);
+        v8.v8__Context__Enter(context);
+        defer v8.v8__Context__Exit(context);
+
+        // Add templates to context snapshot
+        var last_data_index: usize = 0;
+        inline for (JsApis, 0..) |_, i| {
+            @setEvalBranchQuota(10_000);
+            const data_index = v8.v8__SnapshotCreator__AddData(snapshot_creator, @ptrCast(templates[i]));
+            if (i == 0) {
+                data_start = data_index;
+                last_data_index = data_index;
+            } else {
+                // This isn't strictly required, but it means we only need to keep
+                // the first data_index. This is based on the assumption that
+                // addDataWithContext always increases by 1. If we ever hit this
+                // error, then that assumption is wrong and we should capture
+                // all the indexes explicitly in an array.
+                if (data_index != last_data_index + 1) {
+                    return error.InvalidDataIndex;
+                }
+                last_data_index = data_index;
+            }
+        }
+
+        // Realize all templates by getting their functions and attaching to global
+        const global_obj = v8.v8__Context__Global(context);
+
+        inline for (JsApis, 0..) |JsApi, i| {
+            const func = v8.v8__FunctionTemplate__GetFunction(templates[i], context);
+
+            // Attach to global if it has a name
+            if (@hasDecl(JsApi.Meta, "name")) {
+                if (@hasDecl(JsApi.Meta, "constructor_alias")) {
+                    const alias = JsApi.Meta.constructor_alias;
+                    const v8_class_name = v8.v8__String__NewFromUtf8(isolate, alias.ptr, v8.kNormal, @intCast(alias.len));
+                    var maybe_result: v8.MaybeBool = undefined;
+                    v8.v8__Object__Set(global_obj, context, v8_class_name, func, &maybe_result);
+
+                    // @TODO: This is wrong. This name should be registered with the
+                    // illegalConstructorCallback. I.e. new Image() is OK, but
+                    // new HTMLImageElement() isn't.
+                    // But we _have_ to register the name, i.e. HTMLImageElement
+                    // has to be registered so, for now, instead of creating another
+                    // template, we just hook it into the constructor.
+                    const name = JsApi.Meta.name;
+                    const illegal_class_name = v8.v8__String__NewFromUtf8(isolate, name.ptr, v8.kNormal, @intCast(name.len));
+                    var maybe_result2: v8.MaybeBool = undefined;
+                    v8.v8__Object__Set(global_obj, context, illegal_class_name, func, &maybe_result2);
+                } else {
+                    const name = JsApi.Meta.name;
+                    const v8_class_name = v8.v8__String__NewFromUtf8(isolate, name.ptr, v8.kNormal, @intCast(name.len));
+                    var maybe_result: v8.MaybeBool = undefined;
+                    v8.v8__Object__Set(global_obj, context, v8_class_name, func, &maybe_result);
+                }
+            }
+        }
+
+        {
+            // If we want to overwrite the built-in console, we have to
+            // delete the built-in one.
+            const console_key = v8.v8__String__NewFromUtf8(isolate, "console", v8.kNormal, 7);
+            var maybe_deleted: v8.MaybeBool = undefined;
+            v8.v8__Object__Delete(global_obj, context, console_key, &maybe_deleted);
+            if (maybe_deleted.value == false) {
+                return error.ConsoleDeleteError;
+            }
+        }
+
+        // This shouldn't be necessary, but it is:
+        // https://groups.google.com/g/v8-users/c/qAQQBmbi--8
+        // TODO: see if newer V8 engines have a way around this.
+        inline for (JsApis, 0..) |JsApi, i| {
+            if (comptime protoIndexLookup(JsApi)) |proto_index| {
+                const proto_func = v8.v8__FunctionTemplate__GetFunction(templates[proto_index], context);
+                const proto_obj: *const v8.Object = @ptrCast(proto_func);
+
+                const self_func = v8.v8__FunctionTemplate__GetFunction(templates[i], context);
+                const self_obj: *const v8.Object = @ptrCast(self_func);
+
+                var maybe_result: v8.MaybeBool = undefined;
+                v8.v8__Object__SetPrototype(self_obj, context, proto_obj, &maybe_result);
+            }
+        }
+
+        {
+            // Custom exception
+            // TODO: this is an horrible hack, I can't figure out how to do this cleanly.
+            const code_str = "DOMException.prototype.__proto__ = Error.prototype";
+            const code = v8.v8__String__NewFromUtf8(isolate, code_str.ptr, v8.kNormal, @intCast(code_str.len));
+            const script = v8.v8__Script__Compile(context, code, null) orelse return error.ScriptCompileFailed;
+            _ = v8.v8__Script__Run(script, context) orelse return error.ScriptRunFailed;
+        }
+
+        v8.v8__SnapshotCreator__setDefaultContext(snapshot_creator, context);
+    }
+
+    const blob = v8.v8__SnapshotCreator__createBlob(snapshot_creator, v8.kKeep);
+
+    return .{
+        .owns_data = true,
+        .data_start = data_start,
+        .external_references = external_references,
+        .startup_data = blob,
+    };
+}
+
+// Count total callbacks needed for external_references array
+fn countExternalReferences() comptime_int {
+    @setEvalBranchQuota(100_000);
+
+    // +1 for the illegal constructor callback
+    var count: comptime_int = 1;
+
+    inline for (JsApis) |JsApi| {
+        // Constructor (only if explicit)
+        if (@hasDecl(JsApi, "constructor")) {
+            count += 1;
+        }
+
+        // Callable (htmldda)
+        if (@hasDecl(JsApi, "callable")) {
+            count += 1;
+        }
+
+        // All other callbacks
+        const declarations = @typeInfo(JsApi).@"struct".decls;
+        inline for (declarations) |d| {
+            const value = @field(JsApi, d.name);
+            const T = @TypeOf(value);
+            if (T == bridge.Accessor) {
+                count += 1; // getter
+                if (value.setter != null) count += 1; // setter
+            } else if (T == bridge.Function) {
+                count += 1;
+            } else if (T == bridge.Iterator) {
+                count += 1;
+            } else if (T == bridge.Indexed) {
+                count += 1;
+            } else if (T == bridge.NamedIndexed) {
+                count += 1; // getter
+                if (value.setter != null) count += 1;
+                if (value.deleter != null) count += 1;
+            }
+        }
+    }
+
+    return count + 1; // +1 for null terminator
+}
+
+fn collectExternalReferences() [countExternalReferences()]isize {
+    var idx: usize = 0;
+    var references = std.mem.zeroes([countExternalReferences()]isize);
+
+    references[idx] = @bitCast(@intFromPtr(&illegalConstructorCallback));
+    idx += 1;
+
+    inline for (JsApis) |JsApi| {
+        if (@hasDecl(JsApi, "constructor")) {
+            references[idx] = @bitCast(@intFromPtr(JsApi.constructor.func));
+            idx += 1;
+        }
+
+        if (@hasDecl(JsApi, "callable")) {
+            references[idx] = @bitCast(@intFromPtr(JsApi.callable.func));
+            idx += 1;
+        }
+
+        const declarations = @typeInfo(JsApi).@"struct".decls;
+        inline for (declarations) |d| {
+            const value = @field(JsApi, d.name);
+            const T = @TypeOf(value);
+            if (T == bridge.Accessor) {
+                references[idx] = @bitCast(@intFromPtr(value.getter));
+                idx += 1;
+                if (value.setter) |setter| {
+                    references[idx] = @bitCast(@intFromPtr(setter));
+                    idx += 1;
+                }
+            } else if (T == bridge.Function) {
+                references[idx] = @bitCast(@intFromPtr(value.func));
+                idx += 1;
+            } else if (T == bridge.Iterator) {
+                references[idx] = @bitCast(@intFromPtr(value.func));
+                idx += 1;
+            } else if (T == bridge.Indexed) {
+                references[idx] = @bitCast(@intFromPtr(value.getter));
+                idx += 1;
+            } else if (T == bridge.NamedIndexed) {
+                references[idx] = @bitCast(@intFromPtr(value.getter));
+                idx += 1;
+                if (value.setter) |setter| {
+                    references[idx] = @bitCast(@intFromPtr(setter));
+                    idx += 1;
+                }
+                if (value.deleter) |deleter| {
+                    references[idx] = @bitCast(@intFromPtr(deleter));
+                    idx += 1;
+                }
+            }
+        }
+    }
+
+    return references;
+}
+
+// Even if a struct doesn't have a `constructor` function, we still
+// `generateConstructor`, because this is how we create our
+// FunctionTemplate. Such classes exist, but they can't be instantiated
+// via `new ClassName()` - but they could, for example, be created in
+// Zig and returned from a function call, which is why we need the
+// FunctionTemplate.
+fn generateConstructor(comptime JsApi: type, isolate: *v8.Isolate) *v8.FunctionTemplate {
+    const callback = blk: {
+        if (@hasDecl(JsApi, "constructor")) {
+            break :blk JsApi.constructor.func;
+        }
+
+        // Use shared illegal constructor callback
+        break :blk illegalConstructorCallback;
+    };
+
+    const template = @constCast(v8.v8__FunctionTemplate__New__DEFAULT2(isolate, callback).?);
+    if (!@hasDecl(JsApi.Meta, "empty_with_no_proto")) {
+        const instance_template = v8.v8__FunctionTemplate__InstanceTemplate(template);
+        v8.v8__ObjectTemplate__SetInternalFieldCount(instance_template, 1);
+    }
+    const name_str = if (@hasDecl(JsApi.Meta, "name")) JsApi.Meta.name else @typeName(JsApi);
+    const class_name = v8.v8__String__NewFromUtf8(isolate, name_str.ptr, v8.kNormal, @intCast(name_str.len));
+    v8.v8__FunctionTemplate__SetClassName(template, class_name);
+    return template;
+}
+
+// Attaches JsApi members to the prototype template (normal case)
+fn attachClass(comptime JsApi: type, isolate: *v8.Isolate, template: *v8.FunctionTemplate) void {
+    const target = v8.v8__FunctionTemplate__PrototypeTemplate(template);
+    const instance = v8.v8__FunctionTemplate__InstanceTemplate(template);
+
+    const declarations = @typeInfo(JsApi).@"struct".decls;
+
+    inline for (declarations) |d| {
+        const name: [:0]const u8 = d.name;
+        const value = @field(JsApi, name);
+        const definition = @TypeOf(value);
+
+        switch (definition) {
+            bridge.Accessor => {
+                const js_name = v8.v8__String__NewFromUtf8(isolate, name.ptr, v8.kNormal, @intCast(name.len));
+                const getter_callback = @constCast(v8.v8__FunctionTemplate__New__DEFAULT2(isolate, value.getter).?);
+                if (value.setter == null) {
+                    if (value.static) {
+                        v8.v8__Template__SetAccessorProperty__DEFAULT(@ptrCast(template), js_name, getter_callback);
+                    } else {
+                        v8.v8__ObjectTemplate__SetAccessorProperty__DEFAULT(target, js_name, getter_callback);
+                    }
+                } else {
+                    if (comptime IS_DEBUG) {
+                        std.debug.assert(value.static == false);
+                    }
+                    const setter_callback = @constCast(v8.v8__FunctionTemplate__New__DEFAULT2(isolate, value.setter.?).?);
+                    v8.v8__ObjectTemplate__SetAccessorProperty__DEFAULT2(target, js_name, getter_callback, setter_callback);
+                }
+            },
+            bridge.Function => {
+                const function_template = @constCast(v8.v8__FunctionTemplate__New__DEFAULT2(isolate, value.func).?);
+                const js_name = v8.v8__String__NewFromUtf8(isolate, name.ptr, v8.kNormal, @intCast(name.len));
+                if (value.static) {
+                    v8.v8__Template__Set(@ptrCast(template), js_name, @ptrCast(function_template), v8.None);
+                } else {
+                    v8.v8__Template__Set(@ptrCast(target), js_name, @ptrCast(function_template), v8.None);
+                }
+            },
+            bridge.Indexed => {
+                var configuration: v8.IndexedPropertyHandlerConfiguration = .{
+                    .getter = value.getter,
+                    .setter = null,
+                    .query = null,
+                    .deleter = null,
+                    .enumerator = null,
+                    .definer = null,
+                    .descriptor = null,
+                    .data = null,
+                    .flags = 0,
+                };
+                v8.v8__ObjectTemplate__SetIndexedHandler(instance, &configuration);
+            },
+            bridge.NamedIndexed => {
+                var configuration: v8.NamedPropertyHandlerConfiguration = .{
+                    .getter = value.getter,
+                    .setter = value.setter,
+                    .query = null,
+                    .deleter = value.deleter,
+                    .enumerator = null,
+                    .definer = null,
+                    .descriptor = null,
+                    .data = null,
+                    .flags = v8.kOnlyInterceptStrings | v8.kNonMasking,
+                };
+                v8.v8__ObjectTemplate__SetNamedHandler(instance, &configuration);
+            },
+            bridge.Iterator => {
+                const function_template = @constCast(v8.v8__FunctionTemplate__New__DEFAULT2(isolate, value.func).?);
+                const js_name = if (value.async)
+                    v8.v8__Symbol__GetAsyncIterator(isolate)
+                else
+                    v8.v8__Symbol__GetIterator(isolate);
+                v8.v8__Template__Set(@ptrCast(target), js_name, @ptrCast(function_template), v8.None);
+            },
+            bridge.Property => {
+                // simpleZigValueToJs now returns raw handle directly
+                const js_value = switch (value) {
+                    .int => |v| js.simpleZigValueToJs(.{ .handle = isolate }, v, true, false),
+                };
+
+                const js_name = v8.v8__String__NewFromUtf8(isolate, name.ptr, v8.kNormal, @intCast(name.len));
+                // apply it both to the type itself
+                v8.v8__Template__Set(@ptrCast(template), js_name, js_value, v8.ReadOnly + v8.DontDelete);
+
+                // and to instances of the type
+                v8.v8__Template__Set(@ptrCast(target), js_name, js_value, v8.ReadOnly + v8.DontDelete);
+            },
+            bridge.Constructor => {}, // already handled in generateConstructor
+            else => {},
+        }
+    }
+
+    if (@hasDecl(JsApi.Meta, "htmldda")) {
+        v8.v8__ObjectTemplate__MarkAsUndetectable(instance);
+        v8.v8__ObjectTemplate__SetCallAsFunctionHandler(instance, JsApi.Meta.callable.func);
+    }
+
+    if (@hasDecl(JsApi.Meta, "name")) {
+        const js_name = v8.v8__Symbol__GetToStringTag(isolate);
+        const js_value = v8.v8__String__NewFromUtf8(isolate, JsApi.Meta.name.ptr, v8.kNormal, @intCast(JsApi.Meta.name.len));
+        v8.v8__Template__Set(@ptrCast(instance), js_name, js_value, v8.ReadOnly + v8.DontDelete);
+    }
+}
+
+fn protoIndexLookup(comptime JsApi: type) ?bridge.JsApiLookup.BackingInt {
+    @setEvalBranchQuota(2000);
+    comptime {
+        const T = JsApi.bridge.type;
+        if (!@hasField(T, "_proto")) {
+            return null;
+        }
+        const Ptr = std.meta.fieldInfo(T, ._proto).type;
+        const F = @typeInfo(Ptr).pointer.child;
+        return bridge.JsApiLookup.getId(F.JsApi);
+    }
+}
+
+// Shared illegal constructor callback for types without explicit constructors
+fn illegalConstructorCallback(raw_info: ?*const v8.FunctionCallbackInfo) callconv(.c) void {
+    const isolate = v8.v8__FunctionCallbackInfo__GetIsolate(raw_info);
+    log.warn(.js, "Illegal constructor call", .{});
+
+    const message = v8.v8__String__NewFromUtf8(isolate, "Illegal Constructor", v8.kNormal, 19);
+    const js_exception = v8.v8__Exception__TypeError(message);
+
+    _ = v8.v8__Isolate__ThrowException(isolate, js_exception);
+    var return_value: v8.ReturnValue = undefined;
+    v8.v8__FunctionCallbackInfo__GetReturnValue(raw_info, &return_value);
+    v8.v8__ReturnValue__Set(return_value, js_exception);
+}

src/browser/js/String.zig

@@ -0,0 +1,53 @@
+// 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 js = @import("js.zig");
+
+const Allocator = std.mem.Allocator;
+
+const v8 = js.v8;
+
+const String = @This();
+
+local: *const js.Local,
+handle: *const v8.String,
+
+pub const ToZigOpts = struct {
+    allocator: ?Allocator = null,
+};
+
+pub fn toZig(self: String, opts: ToZigOpts) ![]u8 {
+    return self._toZig(false, opts);
+}
+
+pub fn toZigZ(self: String, opts: ToZigOpts) ![:0]u8 {
+    return self._toZig(true, opts);
+}
+
+fn _toZig(self: String, comptime null_terminate: bool, opts: ToZigOpts) !(if (null_terminate) [:0]u8 else []u8) {
+    const isolate = self.local.isolate.handle;
+    const allocator = opts.allocator orelse self.local.ctx.call_arena;
+    const len: u32 = @intCast(v8.v8__String__Utf8Length(self.handle, isolate));
+    const buf = if (null_terminate) try allocator.allocSentinel(u8, len, 0) else try allocator.alloc(u8, len);
+
+    const options = v8.NO_NULL_TERMINATION | v8.REPLACE_INVALID_UTF8;
+    const n = v8.v8__String__WriteUtf8(self.handle, isolate, buf.ptr, buf.len, options);
+    std.debug.assert(n == len);
+    return buf;
+}

src/browser/js/TaggedOpaque.zig

@@ -0,0 +1,156 @@
+// Copyright (C) 2023-2026  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 js = @import("js.zig");
+const v8 = js.v8;
+const bridge = js.bridge;
+
+// When we return a Zig object to V8, we put it on the heap and pass it into
+// v8 as an *anyopaque (i.e. void *). When V8 gives us back the value, say, as a
+// function parameter, we know what type it _should_ be.
+//
+// In a simple/perfect world, we could use this knowledge to cast the *anyopaque
+// to the parameter type:
+//   const arg: @typeInfo(@TypeOf(function)).@"fn".params[0] = @ptrCast(v8_data);
+//
+// But there are 2 reasons we can't do that.
+//
+// == Reason 1 ==
+// The JS code might pass the wrong type:
+//
+//   var cat = new Cat();
+//   cat.setOwner(new Cat());
+//
+// The zig_setOwner method expects the 2nd parameter to be an *Owner, but
+// the JS code passed a *Cat.
+//
+// To solve this issue, we tag every returned value so that we can check what
+// type it is. In the above case, we'd expect an *Owner, but the tag would tell
+// us that we got a *Cat. We use the type index in our Types lookup as the tag.
+//
+// == Reason 2 ==
+// Because of prototype inheritance, even "correct" code can be a challenge. For
+// example, say the above JavaScript is fixed:
+//
+//   var cat = new Cat();
+//   cat.setOwner(new Owner("Leto"));
+//
+// The issue is that setOwner might not expect an *Owner, but rather a
+// *Person, which is the prototype for Owner. Now our Zig code is expecting
+// a *Person, but it was (correctly) given an *Owner.
+// For this reason, we also store the prototype chain.
+const TaggedOpaque = @This();
+
+prototype_len: u16,
+prototype_chain: [*]const PrototypeChainEntry,
+
+// 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.
+value: *anyopaque,
+
+// When we're asked to describe an object via the Inspector, we _must_ include
+// the proper subtype (and description) fields in the returned JSON.
+// V8 will give us a Value and ask us for the subtype. From the js.Value we
+// can get a js.Object, and from the js.Object, we can get out TaggedOpaque
+// which is where we store the subtype.
+subtype: ?bridge.SubType,
+
+pub const PrototypeChainEntry = struct {
+    index: bridge.JsApiLookup.BackingInt,
+    offset: u16, // offset to the _proto field
+};
+
+// Reverses the mapZigInstanceToJs, making sure that our TaggedOpaque
+// contains a ptr to the correct type.
+pub fn fromJS(comptime R: type, js_obj_handle: *const v8.Object) !R {
+    const ti = @typeInfo(R);
+    if (ti != .pointer) {
+        @compileError("non-pointer Zig parameter type: " ++ @typeName(R));
+    }
+
+    const T = ti.pointer.child;
+    const JsApi = bridge.Struct(T).JsApi;
+
+    if (@hasDecl(JsApi.Meta, "empty_with_no_proto")) {
+        // 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, &.{}));
+    }
+
+    const internal_field_count = v8.v8__Object__InternalFieldCount(js_obj_handle);
+    // Special case for Window: the global object doesn't have internal fields
+    // Window instance is stored in context.page.window instead
+    if (internal_field_count == 0) {
+        // Normally, this would be an error. All JsObject that map to a Zig type
+        // are either `empty_with_no_proto` (handled above) or have an
+        // interalFieldCount. The only exception to that is the Window...
+        const isolate = v8.v8__Object__GetIsolate(js_obj_handle).?;
+        const context = js.Context.fromIsolate(.{ .handle = isolate });
+
+        const Window = @import("../webapi/Window.zig");
+        if (T == Window) {
+            return context.page.window;
+        }
+
+        // ... Or the window's prototype.
+        // We could make this all comptime-fancy, but it's easier to hard-code
+        // the EventTarget
+
+        const EventTarget = @import("../webapi/EventTarget.zig");
+        if (T == EventTarget) {
+            return context.page.window._proto;
+        }
+
+        // Type not found in Window's prototype chain
+        return error.InvalidArgument;
+    }
+
+    // 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 (internal_field_count == 0) {
+        return error.InvalidArgument;
+    }
+
+    if (!bridge.JsApiLookup.has(JsApi)) {
+        @compileError("unknown Zig type: " ++ @typeName(R));
+    }
+
+    const internal_field_handle = v8.v8__Object__GetInternalField(js_obj_handle, 0).?;
+    const tao: *TaggedOpaque = @ptrCast(@alignCast(v8.v8__External__Value(internal_field_handle)));
+    const expected_type_index = bridge.JsApiLookup.getId(JsApi);
+
+    const prototype_chain = tao.prototype_chain[0..tao.prototype_len];
+    if (prototype_chain[0].index == expected_type_index) {
+        return @ptrCast(@alignCast(tao.value));
+    }
+
+    // Ok, let's walk up the chain
+    var ptr = @intFromPtr(tao.value);
+    for (prototype_chain[1..]) |proto| {
+        ptr += proto.offset; // the offset to the _proto field
+        const proto_ptr: **anyopaque = @ptrFromInt(ptr);
+        if (proto.index == expected_type_index) {
+            return @ptrCast(@alignCast(proto_ptr.*));
+        }
+        ptr = @intFromPtr(proto_ptr.*);
+    }
+    return error.InvalidArgument;
+}

src/browser/js/TryCatch.zig

@@ -0,0 +1,98 @@
+// Copyright (C) 2023-2026  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 js = @import("js.zig");
+const v8 = js.v8;
+
+const Allocator = std.mem.Allocator;
+
+const TryCatch = @This();
+
+handle: v8.TryCatch,
+local: *const js.Local,
+
+pub fn init(self: *TryCatch, l: *const js.Local) void {
+    self.local = l;
+    v8.v8__TryCatch__CONSTRUCT(&self.handle, l.isolate.handle);
+}
+
+pub fn caught(self: TryCatch, allocator: Allocator) ?Caught {
+    if (!v8.v8__TryCatch__HasCaught(&self.handle)) {
+        return null;
+    }
+
+    const l = self.local;
+    const line: ?u32 = blk: {
+        const handle = v8.v8__TryCatch__Message(&self.handle) orelse return null;
+        const line = v8.v8__Message__GetLineNumber(handle, l.handle);
+        break :blk if (line < 0) null else @intCast(line);
+    };
+
+    const exception: ?[]const u8 = blk: {
+        const handle = v8.v8__TryCatch__Exception(&self.handle) orelse break :blk null;
+        break :blk l.valueHandleToString(@ptrCast(handle), .{ .allocator = allocator }) catch |err| @errorName(err);
+    };
+
+    const stack: ?[]const u8 = blk: {
+        const handle = v8.v8__TryCatch__StackTrace(&self.handle, l.handle) orelse break :blk null;
+        break :blk l.valueHandleToString(@ptrCast(handle), .{ .allocator = allocator }) catch |err| @errorName(err);
+    };
+
+    return .{
+        .line = line,
+        .stack = stack,
+        .caught = true,
+        .exception = exception,
+    };
+}
+
+pub fn caughtOrError(self: TryCatch, allocator: Allocator, err: anyerror) Caught {
+    return self.caught(allocator) orelse .{
+        .caught = false,
+        .line = null,
+        .stack = null,
+        .exception = @errorName(err),
+    };
+}
+
+pub fn deinit(self: *TryCatch) void {
+    v8.v8__TryCatch__DESTRUCT(&self.handle);
+}
+
+pub const Caught = struct {
+    line: ?u32 = null,
+    caught: bool = false,
+    stack: ?[]const u8 = null,
+    exception: ?[]const u8 = null,
+
+    pub fn format(self: Caught, writer: *std.Io.Writer) !void {
+        const separator = @import("../../log.zig").separator();
+        try writer.print("{s}exception: {?s}", .{ separator, self.exception });
+        try writer.print("{s}stack: {?s}", .{ separator, self.stack });
+        try writer.print("{s}line: {?d}", .{ separator, self.line });
+        try writer.print("{s}caught: {any}", .{ separator, self.caught });
+    }
+
+    pub fn logFmt(self: Caught, comptime prefix: []const u8, writer: anytype) !void {
+        try writer.write(prefix ++ ".exception", self.exception orelse "???");
+        try writer.write(prefix ++ ".stack", self.stack orelse "na");
+        try writer.write(prefix ++ ".line", self.line);
+        try writer.write(prefix ++ ".caught", self.caught);
+    }
+};

src/browser/js/Value.zig

@@ -0,0 +1,330 @@
+// 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 js = @import("js.zig");
+
+const v8 = js.v8;
+
+const IS_DEBUG = @import("builtin").mode == .Debug;
+
+const Allocator = std.mem.Allocator;
+
+const Value = @This();
+
+local: *const js.Local,
+handle: *const v8.Value,
+
+pub fn isObject(self: Value) bool {
+    return v8.v8__Value__IsObject(self.handle);
+}
+
+pub fn isString(self: Value) bool {
+    return v8.v8__Value__IsString(self.handle);
+}
+
+pub fn isArray(self: Value) bool {
+    return v8.v8__Value__IsArray(self.handle);
+}
+
+pub fn isSymbol(self: Value) bool {
+    return v8.v8__Value__IsSymbol(self.handle);
+}
+
+pub fn isFunction(self: Value) bool {
+    return v8.v8__Value__IsFunction(self.handle);
+}
+
+pub fn isNull(self: Value) bool {
+    return v8.v8__Value__IsNull(self.handle);
+}
+
+pub fn isUndefined(self: Value) bool {
+    return v8.v8__Value__IsUndefined(self.handle);
+}
+
+pub fn isNullOrUndefined(self: Value) bool {
+    return v8.v8__Value__IsNullOrUndefined(self.handle);
+}
+
+pub fn isNumber(self: Value) bool {
+    return v8.v8__Value__IsNumber(self.handle);
+}
+
+pub fn isNumberObject(self: Value) bool {
+    return v8.v8__Value__IsNumberObject(self.handle);
+}
+
+pub fn isInt32(self: Value) bool {
+    return v8.v8__Value__IsInt32(self.handle);
+}
+
+pub fn isUint32(self: Value) bool {
+    return v8.v8__Value__IsUint32(self.handle);
+}
+
+pub fn isBigInt(self: Value) bool {
+    return v8.v8__Value__IsBigInt(self.handle);
+}
+
+pub fn isBigIntObject(self: Value) bool {
+    return v8.v8__Value__IsBigIntObject(self.handle);
+}
+
+pub fn isBoolean(self: Value) bool {
+    return v8.v8__Value__IsBoolean(self.handle);
+}
+
+pub fn isBooleanObject(self: Value) bool {
+    return v8.v8__Value__IsBooleanObject(self.handle);
+}
+
+pub fn isTrue(self: Value) bool {
+    return v8.v8__Value__IsTrue(self.handle);
+}
+
+pub fn isFalse(self: Value) bool {
+    return v8.v8__Value__IsFalse(self.handle);
+}
+
+pub fn isTypedArray(self: Value) bool {
+    return v8.v8__Value__IsTypedArray(self.handle);
+}
+
+pub fn isArrayBufferView(self: Value) bool {
+    return v8.v8__Value__IsArrayBufferView(self.handle);
+}
+
+pub fn isArrayBuffer(self: Value) bool {
+    return v8.v8__Value__IsArrayBuffer(self.handle);
+}
+
+pub fn isUint8Array(self: Value) bool {
+    return v8.v8__Value__IsUint8Array(self.handle);
+}
+
+pub fn isUint8ClampedArray(self: Value) bool {
+    return v8.v8__Value__IsUint8ClampedArray(self.handle);
+}
+
+pub fn isInt8Array(self: Value) bool {
+    return v8.v8__Value__IsInt8Array(self.handle);
+}
+
+pub fn isUint16Array(self: Value) bool {
+    return v8.v8__Value__IsUint16Array(self.handle);
+}
+
+pub fn isInt16Array(self: Value) bool {
+    return v8.v8__Value__IsInt16Array(self.handle);
+}
+
+pub fn isUint32Array(self: Value) bool {
+    return v8.v8__Value__IsUint32Array(self.handle);
+}
+
+pub fn isInt32Array(self: Value) bool {
+    return v8.v8__Value__IsInt32Array(self.handle);
+}
+
+pub fn isBigUint64Array(self: Value) bool {
+    return v8.v8__Value__IsBigUint64Array(self.handle);
+}
+
+pub fn isBigInt64Array(self: Value) bool {
+    return v8.v8__Value__IsBigInt64Array(self.handle);
+}
+
+pub fn isPromise(self: Value) bool {
+    return v8.v8__Value__IsPromise(self.handle);
+}
+
+pub fn toBool(self: Value) bool {
+    return v8.v8__Value__BooleanValue(self.handle, self.local.isolate.handle);
+}
+
+pub fn typeOf(self: Value) js.String {
+    const str_handle = v8.v8__Value__TypeOf(self.handle, self.local.isolate.handle).?;
+    return js.String{ .local = self.local, .handle = str_handle };
+}
+
+pub fn toF32(self: Value) !f32 {
+    return @floatCast(try self.toF64());
+}
+
+pub fn toF64(self: Value) !f64 {
+    var maybe: v8.MaybeF64 = undefined;
+    v8.v8__Value__NumberValue(self.handle, self.local.handle, &maybe);
+    if (!maybe.has_value) {
+        return error.JsException;
+    }
+    return maybe.value;
+}
+
+pub fn toI32(self: Value) !i32 {
+    var maybe: v8.MaybeI32 = undefined;
+    v8.v8__Value__Int32Value(self.handle, self.local.handle, &maybe);
+    if (!maybe.has_value) {
+        return error.JsException;
+    }
+    return maybe.value;
+}
+
+pub fn toU32(self: Value) !u32 {
+    var maybe: v8.MaybeU32 = undefined;
+    v8.v8__Value__Uint32Value(self.handle, self.local.handle, &maybe);
+    if (!maybe.has_value) {
+        return error.JsException;
+    }
+    return maybe.value;
+}
+
+pub fn toPromise(self: Value) js.Promise {
+    if (comptime IS_DEBUG) {
+        std.debug.assert(self.isPromise());
+    }
+    return .{
+        .local = self.local,
+        .handle = @ptrCast(self.handle),
+    };
+}
+
+pub fn toString(self: Value, opts: js.String.ToZigOpts) ![]u8 {
+    return self._toString(false, opts);
+}
+pub fn toStringZ(self: Value, opts: js.String.ToZigOpts) ![:0]u8 {
+    return self._toString(true, opts);
+}
+
+pub fn toJson(self: Value, allocator: Allocator) ![]u8 {
+    const json_str_handle = v8.v8__JSON__Stringify(self.local.handle, self.handle, null) orelse return error.JsException;
+    return self.local.jsStringToZig(json_str_handle, .{ .allocator = allocator });
+}
+
+fn _toString(self: Value, comptime null_terminate: bool, opts: js.String.ToZigOpts) !(if (null_terminate) [:0]u8 else []u8) {
+    const l = self.local;
+
+    if (self.isSymbol()) {
+        const sym_handle = v8.v8__Symbol__Description(@ptrCast(self.handle), l.isolate.handle).?;
+        return _toString(.{ .handle = @ptrCast(sym_handle), .local = l }, null_terminate, opts);
+    }
+
+    const str_handle = v8.v8__Value__ToString(self.handle, l.handle) orelse {
+        return error.JsException;
+    };
+
+    const str = js.String{ .local = l, .handle = str_handle };
+    if (comptime null_terminate) {
+        return js.String.toZigZ(str, opts);
+    }
+    return js.String.toZig(str, opts);
+}
+
+pub fn persist(self: Value) !Global {
+    return self._persist(true);
+}
+
+pub fn temp(self: Value) !Temp {
+    return self._persist(false);
+}
+
+fn _persist(self: *const Value, comptime is_global: bool) !(if (is_global) Global else Temp) {
+    var ctx = self.local.ctx;
+
+    var global: v8.Global = undefined;
+    v8.v8__Global__New(ctx.isolate.handle, self.handle, &global);
+    if (comptime is_global) {
+        try ctx.global_values.append(ctx.arena, global);
+    } else {
+        try ctx.global_values_temp.put(ctx.arena, global.data_ptr, global);
+    }
+    return .{ .handle = global };
+}
+
+pub fn toZig(self: Value, comptime T: type) !T {
+    return self.local.jsValueToZig(T, self);
+}
+
+pub fn toObject(self: Value) js.Object {
+    if (comptime IS_DEBUG) {
+        std.debug.assert(self.isObject());
+    }
+
+    return .{
+        .local = self.local,
+        .handle = @ptrCast(self.handle),
+    };
+}
+
+pub fn toArray(self: Value) js.Array {
+    if (comptime IS_DEBUG) {
+        std.debug.assert(self.isArray());
+    }
+
+    return .{
+        .local = self.local,
+        .handle = @ptrCast(self.handle),
+    };
+}
+
+pub fn toBigInt(self: Value) js.BigInt {
+    if (comptime IS_DEBUG) {
+        std.debug.assert(self.isBigInt());
+    }
+
+    return .{
+        .handle = @ptrCast(self.handle),
+    };
+}
+
+pub fn format(self: Value, writer: *std.Io.Writer) !void {
+    if (comptime IS_DEBUG) {
+        return self.local.debugValue(self, writer);
+    }
+    const str = self.toString(.{}) catch return error.WriteFailed;
+    return writer.writeAll(str);
+}
+
+pub const Temp = G(0);
+pub const Global = G(1);
+
+fn G(comptime discriminator: u8) type {
+    return struct {
+        handle: v8.Global,
+
+        // makes the types different (G(0) != G(1)), without taking up space
+        comptime _: u8 = discriminator,
+
+        const Self = @This();
+
+        pub fn deinit(self: *Self) void {
+            v8.v8__Global__Reset(&self.handle);
+        }
+
+        pub fn local(self: *const Self, l: *const js.Local) Value {
+            return .{
+                .local = l,
+                .handle = @ptrCast(v8.v8__Global__Get(&self.handle, l.isolate.handle)),
+            };
+        }
+
+        pub fn isEqual(self: *const Self, other: Value) bool {
+            return v8.v8__Global__IsEqual(&self.handle, other.handle);
+        }
+    };
+}

src/browser/js/bridge.zig

@@ -0,0 +1,781 @@
+// Copyright (C) 2023-2026  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 js = @import("js.zig");
+const lp = @import("lightpanda");
+const log = @import("../../log.zig");
+const Page = @import("../Page.zig");
+
+const v8 = js.v8;
+
+const Caller = @import("Caller.zig");
+const Context = @import("Context.zig");
+
+const IS_DEBUG = @import("builtin").mode == .Debug;
+
+pub fn Builder(comptime T: type) type {
+    return struct {
+        pub const @"type" = T;
+        pub const ClassId = u16;
+
+        pub fn constructor(comptime func: anytype, comptime opts: Constructor.Opts) Constructor {
+            return Constructor.init(T, func, opts);
+        }
+
+        pub fn accessor(comptime getter: anytype, comptime setter: anytype, comptime opts: Accessor.Opts) Accessor {
+            return Accessor.init(T, getter, setter, opts);
+        }
+
+        pub fn function(comptime func: anytype, comptime opts: Function.Opts) Function {
+            return Function.init(T, func, opts);
+        }
+
+        pub fn indexed(comptime getter_func: anytype, comptime opts: Indexed.Opts) Indexed {
+            return Indexed.init(T, getter_func, opts);
+        }
+
+        pub fn namedIndexed(comptime getter_func: anytype, setter_func: anytype, deleter_func: anytype, comptime opts: NamedIndexed.Opts) NamedIndexed {
+            return NamedIndexed.init(T, getter_func, setter_func, deleter_func, opts);
+        }
+
+        pub fn iterator(comptime func: anytype, comptime opts: Iterator.Opts) Iterator {
+            return Iterator.init(T, func, opts);
+        }
+
+        pub fn callable(comptime func: anytype, comptime opts: Callable.Opts) Callable {
+            return Callable.init(T, func, opts);
+        }
+
+        pub fn property(value: anytype) Property {
+            switch (@typeInfo(@TypeOf(value))) {
+                .comptime_int, .int => return .{ .int = value },
+                else => {},
+            }
+            @compileError("Property for " ++ @typeName(@TypeOf(value)) ++ " hasn't been defined yet");
+        }
+
+        const PrototypeChainEntry = @import("TaggedOpaque.zig").PrototypeChainEntry;
+        pub fn prototypeChain() [prototypeChainLength(T)]PrototypeChainEntry {
+            var entries: [prototypeChainLength(T)]PrototypeChainEntry = undefined;
+
+            entries[0] = .{ .offset = 0, .index = JsApiLookup.getId(T.JsApi) };
+
+            if (entries.len == 1) {
+                return entries;
+            }
+
+            var Prototype = T;
+            inline for (entries[1..]) |*entry| {
+                const Next = PrototypeType(Prototype).?;
+                entry.* = .{
+                    .index = JsApiLookup.getId(Next.JsApi),
+                    .offset = @offsetOf(Prototype, "_proto"),
+                };
+                Prototype = Next;
+            }
+            return entries;
+        }
+
+        pub fn finalizer(comptime func: *const fn (self: *T, shutdown: bool) void) Finalizer {
+            return .{
+                .from_zig = struct {
+                    fn wrap(ptr: *anyopaque) void {
+                        func(@ptrCast(@alignCast(ptr)), true);
+                    }
+                }.wrap,
+
+                .from_v8 = struct {
+                    fn wrap(handle: ?*const v8.WeakCallbackInfo) callconv(.c) void {
+                        const ptr = v8.v8__WeakCallbackInfo__GetParameter(handle.?).?;
+                        const self: *T = @ptrCast(@alignCast(ptr));
+                        // This is simply a requirement of any type that Finalizes:
+                        // It must have a _page: *Page field. We need it because
+                        // we need to check the item has already been cleared
+                        // (There are all types of weird timing issues that seem
+                        // to be possible between finalization and context shutdown,
+                        // we need to be defensive).
+                        // There _ARE_ alternatives to this. But this is simple.
+                        const ctx = self._page.js;
+                        if (!ctx.identity_map.contains(@intFromPtr(ptr))) {
+                            return;
+                        }
+                        func(self, false);
+                        ctx.release(ptr);
+                    }
+                }.wrap,
+            };
+        }
+    };
+}
+
+pub const Constructor = struct {
+    func: *const fn (?*const v8.FunctionCallbackInfo) callconv(.c) void,
+
+    const Opts = struct {
+        dom_exception: bool = false,
+    };
+
+    fn init(comptime T: type, comptime func: anytype, comptime opts: Opts) Constructor {
+        return .{ .func = struct {
+            fn wrap(handle: ?*const v8.FunctionCallbackInfo) callconv(.c) void {
+                const v8_isolate = v8.v8__FunctionCallbackInfo__GetIsolate(handle).?;
+                var caller: Caller = undefined;
+                caller.init(v8_isolate);
+                defer caller.deinit();
+
+                caller.constructor(T, func, handle.?, .{
+                    .dom_exception = opts.dom_exception,
+                });
+            }
+        }.wrap };
+    }
+};
+
+pub const Function = struct {
+    static: bool,
+    func: *const fn (?*const v8.FunctionCallbackInfo) callconv(.c) void,
+
+    const Opts = struct {
+        static: bool = false,
+        dom_exception: bool = false,
+        as_typed_array: bool = false,
+        null_as_undefined: bool = false,
+    };
+
+    fn init(comptime T: type, comptime func: anytype, comptime opts: Opts) Function {
+        return .{
+            .static = opts.static,
+            .func = struct {
+                fn wrap(handle: ?*const v8.FunctionCallbackInfo) callconv(.c) void {
+                    const v8_isolate = v8.v8__FunctionCallbackInfo__GetIsolate(handle).?;
+                    var caller: Caller = undefined;
+                    caller.init(v8_isolate);
+                    defer caller.deinit();
+
+                    if (comptime opts.static) {
+                        caller.function(T, func, handle.?, .{
+                            .dom_exception = opts.dom_exception,
+                            .as_typed_array = opts.as_typed_array,
+                            .null_as_undefined = opts.null_as_undefined,
+                        });
+                    } else {
+                        caller.method(T, func, handle.?, .{
+                            .dom_exception = opts.dom_exception,
+                            .as_typed_array = opts.as_typed_array,
+                            .null_as_undefined = opts.null_as_undefined,
+                        });
+                    }
+                }
+            }.wrap,
+        };
+    }
+};
+
+pub const Accessor = struct {
+    static: bool = false,
+    getter: ?*const fn (?*const v8.FunctionCallbackInfo) callconv(.c) void = null,
+    setter: ?*const fn (?*const v8.FunctionCallbackInfo) callconv(.c) void = null,
+
+    const Opts = struct {
+        static: bool = false,
+        cache: ?[]const u8 = null,
+        as_typed_array: bool = false,
+        null_as_undefined: bool = false,
+    };
+
+    fn init(comptime T: type, comptime getter: anytype, comptime setter: anytype, comptime opts: Opts) Accessor {
+        var accessor = Accessor{
+            .static = opts.static,
+        };
+
+        if (@typeInfo(@TypeOf(getter)) != .null) {
+            accessor.getter = struct {
+                fn wrap(handle: ?*const v8.FunctionCallbackInfo) callconv(.c) void {
+                    const v8_isolate = v8.v8__FunctionCallbackInfo__GetIsolate(handle).?;
+                    var caller: Caller = undefined;
+                    caller.init(v8_isolate);
+                    defer caller.deinit();
+
+                    if (comptime opts.static) {
+                        caller.function(T, getter, handle.?, .{
+                            .cache = opts.cache,
+                            .as_typed_array = opts.as_typed_array,
+                            .null_as_undefined = opts.null_as_undefined,
+                        });
+                    } else {
+                        caller.method(T, getter, handle.?, .{
+                            .cache = opts.cache,
+                            .as_typed_array = opts.as_typed_array,
+                            .null_as_undefined = opts.null_as_undefined,
+                        });
+                    }
+                }
+            }.wrap;
+        }
+
+        if (@typeInfo(@TypeOf(setter)) != .null) {
+            accessor.setter = struct {
+                fn wrap(handle: ?*const v8.FunctionCallbackInfo) callconv(.c) void {
+                    const v8_isolate = v8.v8__FunctionCallbackInfo__GetIsolate(handle).?;
+                    var caller: Caller = undefined;
+                    caller.init(v8_isolate);
+                    defer caller.deinit();
+
+                    caller.method(T, setter, handle.?, .{
+                        .as_typed_array = opts.as_typed_array,
+                        .null_as_undefined = opts.null_as_undefined,
+                    });
+                }
+            }.wrap;
+        }
+
+        return accessor;
+    }
+};
+
+pub const Indexed = struct {
+    getter: *const fn (idx: u32, handle: ?*const v8.PropertyCallbackInfo) callconv(.c) u8,
+
+    const Opts = struct {
+        as_typed_array: bool = false,
+        null_as_undefined: bool = false,
+    };
+
+    fn init(comptime T: type, comptime getter: anytype, comptime opts: Opts) Indexed {
+        return .{ .getter = struct {
+            fn wrap(idx: u32, handle: ?*const v8.PropertyCallbackInfo) callconv(.c) u8 {
+                const v8_isolate = v8.v8__PropertyCallbackInfo__GetIsolate(handle).?;
+                var caller: Caller = undefined;
+                caller.init(v8_isolate);
+                defer caller.deinit();
+
+                return caller.getIndex(T, getter, idx, handle.?, .{
+                    .as_typed_array = opts.as_typed_array,
+                    .null_as_undefined = opts.null_as_undefined,
+                });
+            }
+        }.wrap };
+    }
+};
+
+pub const NamedIndexed = struct {
+    getter: *const fn (c_name: ?*const v8.Name, handle: ?*const v8.PropertyCallbackInfo) callconv(.c) u8,
+    setter: ?*const fn (c_name: ?*const v8.Name, c_value: ?*const v8.Value, handle: ?*const v8.PropertyCallbackInfo) callconv(.c) u8 = null,
+    deleter: ?*const fn (c_name: ?*const v8.Name, handle: ?*const v8.PropertyCallbackInfo) callconv(.c) u8 = null,
+
+    const Opts = struct {
+        as_typed_array: bool = false,
+        null_as_undefined: bool = false,
+    };
+
+    fn init(comptime T: type, comptime getter: anytype, setter: anytype, deleter: anytype, comptime opts: Opts) NamedIndexed {
+        const getter_fn = struct {
+            fn wrap(c_name: ?*const v8.Name, handle: ?*const v8.PropertyCallbackInfo) callconv(.c) u8 {
+                const v8_isolate = v8.v8__PropertyCallbackInfo__GetIsolate(handle).?;
+                var caller: Caller = undefined;
+                caller.init(v8_isolate);
+                defer caller.deinit();
+
+                return caller.getNamedIndex(T, getter, c_name.?, handle.?, .{
+                    .as_typed_array = opts.as_typed_array,
+                    .null_as_undefined = opts.null_as_undefined,
+                });
+            }
+        }.wrap;
+
+        const setter_fn = if (@typeInfo(@TypeOf(setter)) == .null) null else struct {
+            fn wrap(c_name: ?*const v8.Name, c_value: ?*const v8.Value, handle: ?*const v8.PropertyCallbackInfo) callconv(.c) u8 {
+                const v8_isolate = v8.v8__PropertyCallbackInfo__GetIsolate(handle).?;
+                var caller: Caller = undefined;
+                caller.init(v8_isolate);
+                defer caller.deinit();
+
+                return caller.setNamedIndex(T, setter, c_name.?, c_value.?, handle.?, .{
+                    .as_typed_array = opts.as_typed_array,
+                    .null_as_undefined = opts.null_as_undefined,
+                });
+            }
+        }.wrap;
+
+        const deleter_fn = if (@typeInfo(@TypeOf(deleter)) == .null) null else struct {
+            fn wrap(c_name: ?*const v8.Name, handle: ?*const v8.PropertyCallbackInfo) callconv(.c) u8 {
+                const v8_isolate = v8.v8__PropertyCallbackInfo__GetIsolate(handle).?;
+                var caller: Caller = undefined;
+                caller.init(v8_isolate);
+                defer caller.deinit();
+
+                return caller.deleteNamedIndex(T, deleter, c_name.?, handle.?, .{
+                    .as_typed_array = opts.as_typed_array,
+                    .null_as_undefined = opts.null_as_undefined,
+                });
+            }
+        }.wrap;
+
+        return .{
+            .getter = getter_fn,
+            .setter = setter_fn,
+            .deleter = deleter_fn,
+        };
+    }
+};
+
+pub const Iterator = struct {
+    func: *const fn (?*const v8.FunctionCallbackInfo) callconv(.c) void,
+    async: bool,
+
+    const Opts = struct {
+        async: bool = false,
+        null_as_undefined: bool = false,
+    };
+
+    fn init(comptime T: type, comptime struct_or_func: anytype, comptime opts: Opts) Iterator {
+        if (@typeInfo(@TypeOf(struct_or_func)) == .type) {
+            return .{
+                .async = opts.async,
+                .func = struct {
+                    fn wrap(handle: ?*const v8.FunctionCallbackInfo) callconv(.c) void {
+                        const info = Caller.FunctionCallbackInfo{ .handle = handle.? };
+                        info.getReturnValue().set(info.getThis());
+                    }
+                }.wrap,
+            };
+        }
+
+        return .{
+            .async = opts.async,
+            .func = struct {
+                fn wrap(handle: ?*const v8.FunctionCallbackInfo) callconv(.c) void {
+                    const v8_isolate = v8.v8__FunctionCallbackInfo__GetIsolate(handle).?;
+                    var caller: Caller = undefined;
+                    caller.init(v8_isolate);
+                    defer caller.deinit();
+                    caller.method(T, struct_or_func, handle.?, .{});
+                }
+            }.wrap,
+        };
+    }
+};
+
+pub const Callable = struct {
+    func: *const fn (?*const v8.FunctionCallbackInfo) callconv(.c) void,
+
+    const Opts = struct {
+        null_as_undefined: bool = false,
+    };
+
+    fn init(comptime T: type, comptime func: anytype, comptime opts: Opts) Callable {
+        return .{ .func = struct {
+            fn wrap(handle: ?*const v8.FunctionCallbackInfo) callconv(.c) void {
+                const v8_isolate = v8.v8__FunctionCallbackInfo__GetIsolate(handle).?;
+                var caller: Caller = undefined;
+                caller.init(v8_isolate);
+                defer caller.deinit();
+
+                caller.method(T, func, handle.?, .{
+                    .null_as_undefined = opts.null_as_undefined,
+                });
+            }
+        }.wrap };
+    }
+};
+
+pub const Property = union(enum) {
+    int: i64,
+};
+
+const Finalizer = struct {
+    // The finalizer wrapper when called fro Zig. This is only called on
+    // Context.deinit
+    from_zig: *const fn (ctx: *anyopaque) void,
+
+    // The finalizer wrapper when called from V8. This may never be called
+    // (hence why we fallback to calling in Context.denit). If it is called,
+    // it is only ever called after we SetWeak on the Global.
+    from_v8: *const fn (?*const v8.WeakCallbackInfo) callconv(.c) void,
+};
+
+pub fn unknownPropertyCallback(c_name: ?*const v8.Name, handle: ?*const v8.PropertyCallbackInfo) callconv(.c) u8 {
+    const v8_isolate = v8.v8__PropertyCallbackInfo__GetIsolate(handle).?;
+    var caller: Caller = undefined;
+    caller.init(v8_isolate);
+    defer caller.deinit();
+
+    const local = &caller.local;
+
+    var hs: js.HandleScope = undefined;
+    hs.init(local.isolate);
+    defer hs.deinit();
+
+    const property: []const u8 = local.valueHandleToString(@ptrCast(c_name.?), .{}) catch {
+        return 0;
+    };
+
+    const page = local.ctx.page;
+    const document = page.document;
+
+    if (document.getElementById(property, page)) |el| {
+        const js_val = local.zigValueToJs(el, .{}) catch return 0;
+        var pc = Caller.PropertyCallbackInfo{ .handle = handle.? };
+        pc.getReturnValue().set(js_val);
+        return 1;
+    }
+
+    if (comptime IS_DEBUG) {
+        const ignored = std.StaticStringMap(void).initComptime(.{
+            .{ "process", {} },
+            .{ "ShadyDOM", {} },
+            .{ "ShadyCSS", {} },
+
+            .{ "litNonce", {} },
+            .{ "litHtmlVersions", {} },
+            .{ "litElementVersions", {} },
+            .{ "litHtmlPolyfillSupport", {} },
+            .{ "litElementHydrateSupport", {} },
+            .{ "litElementPolyfillSupport", {} },
+            .{ "reactiveElementVersions", {} },
+
+            .{ "recaptcha", {} },
+            .{ "grecaptcha", {} },
+            .{ "___grecaptcha_cfg", {} },
+            .{ "__recaptcha_api", {} },
+            .{ "__google_recaptcha_client", {} },
+
+            .{ "CLOSURE_FLAGS", {} },
+        });
+        if (!ignored.has(property)) {
+            log.debug(.unknown_prop, "unknown global property", .{
+                .info = "but the property can exist in pure JS",
+                .stack = local.stackTrace() catch "???",
+                .property = property,
+            });
+        }
+    }
+
+    // not intercepted
+    return 0;
+}
+
+// Given a Type, returns the length of the prototype chain, including self
+fn prototypeChainLength(comptime T: type) usize {
+    var l: usize = 1;
+    var Next = T;
+    while (PrototypeType(Next)) |N| {
+        Next = N;
+        l += 1;
+    }
+    return l;
+}
+
+// Given a Type, gets its prototype Type (if any)
+fn PrototypeType(comptime T: type) ?type {
+    if (!@hasField(T, "_proto")) {
+        return null;
+    }
+    return Struct(std.meta.fieldInfo(T, ._proto).type);
+}
+
+fn flattenTypes(comptime Types: []const type) [countFlattenedTypes(Types)]type {
+    var index: usize = 0;
+    var flat: [countFlattenedTypes(Types)]type = undefined;
+    for (Types) |T| {
+        if (@hasDecl(T, "registerTypes")) {
+            for (T.registerTypes()) |TT| {
+                flat[index] = TT.JsApi;
+                index += 1;
+            }
+        } else {
+            flat[index] = T.JsApi;
+            index += 1;
+        }
+    }
+    return flat;
+}
+
+fn countFlattenedTypes(comptime Types: []const type) usize {
+    var c: usize = 0;
+    for (Types) |T| {
+        c += if (@hasDecl(T, "registerTypes")) T.registerTypes().len else 1;
+    }
+    return c;
+}
+
+//  T => T
+// *T => T
+pub fn Struct(comptime T: type) type {
+    return switch (@typeInfo(T)) {
+        .@"struct" => T,
+        .pointer => |ptr| ptr.child,
+        else => @compileError("Expecting Struct or *Struct, got: " ++ @typeName(T)),
+    };
+}
+
+pub const JsApiLookup = struct {
+    /// Integer type we use for `JsApiLookup` enum. Can be u8 at min.
+    pub const BackingInt = std.math.IntFittingRange(0, @max(std.math.maxInt(u8), JsApis.len));
+
+    /// Imagine we have a type `Cat` which has a getter:
+    ///
+    ///    fn get_owner(self: *Cat) *Owner {
+    ///        return self.owner;
+    ///    }
+    ///
+    /// When we execute `caller.getter`, we'll end up doing something like:
+    ///
+    ///    const res = @call(.auto, Cat.get_owner, .{cat_instance});
+    ///
+    /// How do we turn `res`, which is an *Owner, into something we can return
+    /// to v8? We need the ObjectTemplate associated with Owner. How do we
+    /// get that? Well, we store all the ObjectTemplates in an array that's
+    /// tied to env. So we do something like:
+    ///
+    ///    env.templates[index_of_owner].initInstance(...);
+    ///
+    /// But how do we get that `index_of_owner`? `Index` is an enum
+    /// that looks like:
+    ///
+    ///    pub const Enum = enum(BackingInt) {
+    ///        cat = 0,
+    ///        owner = 1,
+    ///        ...
+    ///    }
+    ///
+    /// (`BackingInt` is calculated at comptime regarding to interfaces we have)
+    /// So to get the template index of `owner`, simply do:
+    ///
+    ///    const index_id = types.getId(@TypeOf(res));
+    ///
+    pub const Enum = blk: {
+        var fields: [JsApis.len]std.builtin.Type.EnumField = undefined;
+        for (JsApis, 0..) |JsApi, i| {
+            fields[i] = .{ .name = @typeName(JsApi), .value = i };
+        }
+
+        break :blk @Type(.{
+            .@"enum" = .{
+                .fields = &fields,
+                .tag_type = BackingInt,
+                .is_exhaustive = true,
+                .decls = &.{},
+            },
+        });
+    };
+
+    /// Returns a boolean indicating if a type exist in the lookup.
+    pub inline fn has(t: type) bool {
+        return @hasField(Enum, @typeName(t));
+    }
+
+    /// Returns the `Enum` for the given type.
+    pub inline fn getIndex(t: type) Enum {
+        return @field(Enum, @typeName(t));
+    }
+
+    /// Returns the ID for the given type.
+    pub inline fn getId(t: type) BackingInt {
+        return @intFromEnum(getIndex(t));
+    }
+};
+
+pub const SubType = enum {
+    @"error",
+    array,
+    arraybuffer,
+    dataview,
+    date,
+    generator,
+    iterator,
+    map,
+    node,
+    promise,
+    proxy,
+    regexp,
+    set,
+    typedarray,
+    wasmvalue,
+    weakmap,
+    weakset,
+    webassemblymemory,
+};
+
+pub const JsApis = flattenTypes(&.{
+    @import("../webapi/AbortController.zig"),
+    @import("../webapi/AbortSignal.zig"),
+    @import("../webapi/CData.zig"),
+    @import("../webapi/cdata/Comment.zig"),
+    @import("../webapi/cdata/Text.zig"),
+    @import("../webapi/cdata/CDATASection.zig"),
+    @import("../webapi/cdata/ProcessingInstruction.zig"),
+    @import("../webapi/collections.zig"),
+    @import("../webapi/Console.zig"),
+    @import("../webapi/Crypto.zig"),
+    @import("../webapi/CSS.zig"),
+    @import("../webapi/css/CSSRule.zig"),
+    @import("../webapi/css/CSSRuleList.zig"),
+    @import("../webapi/css/CSSStyleDeclaration.zig"),
+    @import("../webapi/css/CSSStyleRule.zig"),
+    @import("../webapi/css/CSSStyleSheet.zig"),
+    @import("../webapi/css/CSSStyleProperties.zig"),
+    @import("../webapi/css/MediaQueryList.zig"),
+    @import("../webapi/css/StyleSheetList.zig"),
+    @import("../webapi/Document.zig"),
+    @import("../webapi/HTMLDocument.zig"),
+    @import("../webapi/XMLDocument.zig"),
+    @import("../webapi/History.zig"),
+    @import("../webapi/KeyValueList.zig"),
+    @import("../webapi/DocumentFragment.zig"),
+    @import("../webapi/DocumentType.zig"),
+    @import("../webapi/ShadowRoot.zig"),
+    @import("../webapi/DOMException.zig"),
+    @import("../webapi/DOMImplementation.zig"),
+    @import("../webapi/DOMTreeWalker.zig"),
+    @import("../webapi/DOMNodeIterator.zig"),
+    @import("../webapi/DOMRect.zig"),
+    @import("../webapi/DOMParser.zig"),
+    @import("../webapi/XMLSerializer.zig"),
+    @import("../webapi/AbstractRange.zig"),
+    @import("../webapi/Range.zig"),
+    @import("../webapi/NodeFilter.zig"),
+    @import("../webapi/Element.zig"),
+    @import("../webapi/element/DOMStringMap.zig"),
+    @import("../webapi/element/Attribute.zig"),
+    @import("../webapi/element/Html.zig"),
+    @import("../webapi/element/html/IFrame.zig"),
+    @import("../webapi/element/html/Anchor.zig"),
+    @import("../webapi/element/html/Area.zig"),
+    @import("../webapi/element/html/Audio.zig"),
+    @import("../webapi/element/html/Base.zig"),
+    @import("../webapi/element/html/Body.zig"),
+    @import("../webapi/element/html/BR.zig"),
+    @import("../webapi/element/html/Button.zig"),
+    @import("../webapi/element/html/Canvas.zig"),
+    @import("../webapi/element/html/Custom.zig"),
+    @import("../webapi/element/html/Data.zig"),
+    @import("../webapi/element/html/DataList.zig"),
+    @import("../webapi/element/html/Dialog.zig"),
+    @import("../webapi/element/html/Directory.zig"),
+    @import("../webapi/element/html/Div.zig"),
+    @import("../webapi/element/html/Embed.zig"),
+    @import("../webapi/element/html/FieldSet.zig"),
+    @import("../webapi/element/html/Font.zig"),
+    @import("../webapi/element/html/Form.zig"),
+    @import("../webapi/element/html/Generic.zig"),
+    @import("../webapi/element/html/Head.zig"),
+    @import("../webapi/element/html/Heading.zig"),
+    @import("../webapi/element/html/HR.zig"),
+    @import("../webapi/element/html/Html.zig"),
+    @import("../webapi/element/html/Image.zig"),
+    @import("../webapi/element/html/Input.zig"),
+    @import("../webapi/element/html/Label.zig"),
+    @import("../webapi/element/html/Legend.zig"),
+    @import("../webapi/element/html/LI.zig"),
+    @import("../webapi/element/html/Link.zig"),
+    @import("../webapi/element/html/Map.zig"),
+    @import("../webapi/element/html/Media.zig"),
+    @import("../webapi/element/html/Meta.zig"),
+    @import("../webapi/element/html/Meter.zig"),
+    @import("../webapi/element/html/Mod.zig"),
+    @import("../webapi/element/html/Object.zig"),
+    @import("../webapi/element/html/OL.zig"),
+    @import("../webapi/element/html/OptGroup.zig"),
+    @import("../webapi/element/html/Option.zig"),
+    @import("../webapi/element/html/Output.zig"),
+    @import("../webapi/element/html/Paragraph.zig"),
+    @import("../webapi/element/html/Param.zig"),
+    @import("../webapi/element/html/Pre.zig"),
+    @import("../webapi/element/html/Progress.zig"),
+    @import("../webapi/element/html/Quote.zig"),
+    @import("../webapi/element/html/Script.zig"),
+    @import("../webapi/element/html/Select.zig"),
+    @import("../webapi/element/html/Slot.zig"),
+    @import("../webapi/element/html/Source.zig"),
+    @import("../webapi/element/html/Span.zig"),
+    @import("../webapi/element/html/Style.zig"),
+    @import("../webapi/element/html/Table.zig"),
+    @import("../webapi/element/html/TableCaption.zig"),
+    @import("../webapi/element/html/TableCell.zig"),
+    @import("../webapi/element/html/TableCol.zig"),
+    @import("../webapi/element/html/TableRow.zig"),
+    @import("../webapi/element/html/TableSection.zig"),
+    @import("../webapi/element/html/Template.zig"),
+    @import("../webapi/element/html/TextArea.zig"),
+    @import("../webapi/element/html/Time.zig"),
+    @import("../webapi/element/html/Title.zig"),
+    @import("../webapi/element/html/Track.zig"),
+    @import("../webapi/element/html/Video.zig"),
+    @import("../webapi/element/html/UL.zig"),
+    @import("../webapi/element/html/Unknown.zig"),
+    @import("../webapi/element/Svg.zig"),
+    @import("../webapi/element/svg/Generic.zig"),
+    @import("../webapi/encoding/TextDecoder.zig"),
+    @import("../webapi/encoding/TextEncoder.zig"),
+    @import("../webapi/Event.zig"),
+    @import("../webapi/event/CompositionEvent.zig"),
+    @import("../webapi/event/CustomEvent.zig"),
+    @import("../webapi/event/ErrorEvent.zig"),
+    @import("../webapi/event/MessageEvent.zig"),
+    @import("../webapi/event/ProgressEvent.zig"),
+    @import("../webapi/event/NavigationCurrentEntryChangeEvent.zig"),
+    @import("../webapi/event/PageTransitionEvent.zig"),
+    @import("../webapi/event/PopStateEvent.zig"),
+    @import("../webapi/event/UIEvent.zig"),
+    @import("../webapi/event/MouseEvent.zig"),
+    @import("../webapi/event/PointerEvent.zig"),
+    @import("../webapi/event/KeyboardEvent.zig"),
+    @import("../webapi/MessageChannel.zig"),
+    @import("../webapi/MessagePort.zig"),
+    @import("../webapi/media/MediaError.zig"),
+    @import("../webapi/media/TextTrackCue.zig"),
+    @import("../webapi/media/VTTCue.zig"),
+    @import("../webapi/animation/Animation.zig"),
+    @import("../webapi/EventTarget.zig"),
+    @import("../webapi/Location.zig"),
+    @import("../webapi/Navigator.zig"),
+    @import("../webapi/net/FormData.zig"),
+    @import("../webapi/net/Headers.zig"),
+    @import("../webapi/net/Request.zig"),
+    @import("../webapi/net/Response.zig"),
+    @import("../webapi/net/URLSearchParams.zig"),
+    @import("../webapi/net/XMLHttpRequest.zig"),
+    @import("../webapi/net/XMLHttpRequestEventTarget.zig"),
+    @import("../webapi/streams/ReadableStream.zig"),
+    @import("../webapi/streams/ReadableStreamDefaultReader.zig"),
+    @import("../webapi/streams/ReadableStreamDefaultController.zig"),
+    @import("../webapi/Node.zig"),
+    @import("../webapi/storage/storage.zig"),
+    @import("../webapi/URL.zig"),
+    @import("../webapi/Window.zig"),
+    @import("../webapi/Performance.zig"),
+    @import("../webapi/MutationObserver.zig"),
+    @import("../webapi/IntersectionObserver.zig"),
+    @import("../webapi/CustomElementRegistry.zig"),
+    @import("../webapi/ResizeObserver.zig"),
+    @import("../webapi/IdleDeadline.zig"),
+    @import("../webapi/Blob.zig"),
+    @import("../webapi/File.zig"),
+    @import("../webapi/Screen.zig"),
+    @import("../webapi/PerformanceObserver.zig"),
+    @import("../webapi/navigation/Navigation.zig"),
+    @import("../webapi/navigation/NavigationEventTarget.zig"),
+    @import("../webapi/navigation/NavigationHistoryEntry.zig"),
+    @import("../webapi/navigation/NavigationActivation.zig"),
+    @import("../webapi/canvas/CanvasRenderingContext2D.zig"),
+    @import("../webapi/canvas/WebGLRenderingContext.zig"),
+    @import("../webapi/SubtleCrypto.zig"),
+    @import("../webapi/Selection.zig"),
+});

src/browser/js/js.zig

@@ -0,0 +1,252 @@
+// 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");
+pub const v8 = @import("v8").c;
+
+const log = @import("../../log.zig");
+const string = @import("../../string.zig");
+
+pub const Env = @import("Env.zig");
+pub const bridge = @import("bridge.zig");
+pub const ExecutionWorld = @import("ExecutionWorld.zig");
+pub const Caller = @import("Caller.zig");
+pub const Context = @import("Context.zig");
+pub const Local = @import("Local.zig");
+pub const Inspector = @import("Inspector.zig");
+pub const Snapshot = @import("Snapshot.zig");
+pub const Platform = @import("Platform.zig");
+pub const Isolate = @import("Isolate.zig");
+pub const HandleScope = @import("HandleScope.zig");
+
+pub const Name = @import("Name.zig");
+pub const Value = @import("Value.zig");
+pub const Array = @import("Array.zig");
+pub const String = @import("String.zig");
+pub const Object = @import("Object.zig");
+pub const TryCatch = @import("TryCatch.zig");
+pub const Function = @import("Function.zig");
+pub const Promise = @import("Promise.zig");
+pub const Module = @import("Module.zig");
+pub const BigInt = @import("BigInt.zig");
+pub const Number = @import("Number.zig");
+pub const Integer = @import("Integer.zig");
+pub const PromiseResolver = @import("PromiseResolver.zig");
+
+const Allocator = std.mem.Allocator;
+
+pub fn Bridge(comptime T: type) type {
+    return bridge.Builder(T);
+}
+
+// If a function returns a []i32, should that map to a plain-old
+// JavaScript array, or a Int32Array? It's ambiguous. By default, we'll
+// map arrays/slices to the JavaScript arrays. If you want a TypedArray
+// wrap it in this.
+// Also, this type has nothing to do with the Env. But we place it here
+// for consistency. Want a callback? Env.Callback. Want a JsObject?
+// Env.JsObject. Want a TypedArray? Env.TypedArray.
+pub fn TypedArray(comptime T: type) type {
+    return struct {
+        values: []const T,
+
+        pub fn dupe(self: TypedArray(T), allocator: Allocator) !TypedArray(T) {
+            return .{ .values = try allocator.dupe(T, self.values) };
+        }
+    };
+}
+
+pub const ArrayBuffer = struct {
+    values: []const u8,
+
+    pub fn dupe(self: ArrayBuffer, allocator: Allocator) !ArrayBuffer {
+        return .{ .values = try allocator.dupe(u8, self.values) };
+    }
+};
+
+pub const Exception = struct {
+    local: *const Local,
+    handle: *const v8.Value,
+};
+
+// These are simple types that we can convert to JS with only an isolate. This
+// is separated from the Caller's zigValueToJs to make it available when we
+// don't have a caller (i.e., when setting static attributes on types)
+pub fn simpleZigValueToJs(isolate: Isolate, value: anytype, comptime fail: bool, comptime null_as_undefined: bool) if (fail) *const v8.Value else ?*const v8.Value {
+    switch (@typeInfo(@TypeOf(value))) {
+        .void => return isolate.initUndefined(),
+        .null => if (comptime null_as_undefined) return isolate.initUndefined() else return isolate.initNull(),
+        .bool => return if (value) isolate.initTrue() else isolate.initFalse(),
+        .int => |n| {
+            if (comptime n.bits <= 32) {
+                return @ptrCast(isolate.initInteger(value).handle);
+            }
+            if (value >= 0 and value <= 4_294_967_295) {
+                return @ptrCast(isolate.initInteger(@as(u32, @intCast(value))).handle);
+            }
+            return @ptrCast(isolate.initBigInt(value).handle);
+        },
+        .comptime_int => {
+            if (value > -2_147_483_648 and value <= 4_294_967_295) {
+                return @ptrCast(isolate.initInteger(value).handle);
+            }
+            return @ptrCast(isolate.initBigInt(value).handle);
+        },
+        .float, .comptime_float => return @ptrCast(isolate.initNumber(value).handle),
+        .pointer => |ptr| {
+            if (ptr.size == .slice and ptr.child == u8) {
+                return @ptrCast(isolate.initStringHandle(value));
+            }
+            if (ptr.size == .one) {
+                const one_info = @typeInfo(ptr.child);
+                if (one_info == .array and one_info.array.child == u8) {
+                    return @ptrCast(isolate.initStringHandle(value));
+                }
+            }
+        },
+        .array => return simpleZigValueToJs(isolate, &value, fail, null_as_undefined),
+        .optional => {
+            if (value) |v| {
+                return simpleZigValueToJs(isolate, v, fail, null_as_undefined);
+            }
+            if (comptime null_as_undefined) {
+                return isolate.initUndefined();
+            }
+            return isolate.initNull();
+        },
+        .@"struct" => {
+            switch (@TypeOf(value)) {
+                string.String => return isolate.initStringHandle(value.str()),
+                ArrayBuffer => {
+                    const values = value.values;
+                    const len = values.len;
+                    const backing_store = v8.v8__ArrayBuffer__NewBackingStore(isolate.handle, len);
+                    const data: [*]u8 = @ptrCast(@alignCast(v8.v8__BackingStore__Data(backing_store)));
+                    @memcpy(data[0..len], @as([]const u8, @ptrCast(values))[0..len]);
+                    const backing_store_ptr = v8.v8__BackingStore__TO_SHARED_PTR(backing_store);
+                    return @ptrCast(v8.v8__ArrayBuffer__New2(isolate.handle, &backing_store_ptr).?);
+                },
+                // zig fmt: off
+                TypedArray(u8), TypedArray(u16), TypedArray(u32), TypedArray(u64),
+                TypedArray(i8), TypedArray(i16), TypedArray(i32), TypedArray(i64),
+                TypedArray(f32), TypedArray(f64),
+                // zig fmt: on
+                => {
+                    const values = value.values;
+                    const value_type = @typeInfo(@TypeOf(values)).pointer.child;
+                    const len = values.len;
+                    const bits = switch (@typeInfo(value_type)) {
+                        .int => |n| n.bits,
+                        .float => |f| f.bits,
+                        else => @compileError("Invalid TypeArray type: " ++ @typeName(value_type)),
+                    };
+
+                    var array_buffer: *const v8.ArrayBuffer = undefined;
+                    if (len == 0) {
+                        array_buffer = v8.v8__ArrayBuffer__New(isolate.handle, 0).?;
+                    } else {
+                        const buffer_len = len * bits / 8;
+                        const backing_store = v8.v8__ArrayBuffer__NewBackingStore(isolate.handle, buffer_len).?;
+                        const data: [*]u8 = @ptrCast(@alignCast(v8.v8__BackingStore__Data(backing_store)));
+                        @memcpy(data[0..buffer_len], @as([]const u8, @ptrCast(values))[0..buffer_len]);
+                        const backing_store_ptr = v8.v8__BackingStore__TO_SHARED_PTR(backing_store);
+                        array_buffer = v8.v8__ArrayBuffer__New2(isolate.handle, &backing_store_ptr).?;
+                    }
+
+                    switch (@typeInfo(value_type)) {
+                        .int => |n| switch (n.signedness) {
+                            .unsigned => switch (n.bits) {
+                                8 => return @ptrCast(v8.v8__Uint8Array__New(array_buffer, 0, len).?),
+                                16 => return @ptrCast(v8.v8__Uint16Array__New(array_buffer, 0, len).?),
+                                32 => return @ptrCast(v8.v8__Uint32Array__New(array_buffer, 0, len).?),
+                                64 => return @ptrCast(v8.v8__BigUint64Array__New(array_buffer, 0, len).?),
+                                else => {},
+                            },
+                            .signed => switch (n.bits) {
+                                8 => return @ptrCast(v8.v8__Int8Array__New(array_buffer, 0, len).?),
+                                16 => return @ptrCast(v8.v8__Int16Array__New(array_buffer, 0, len).?),
+                                32 => return @ptrCast(v8.v8__Int32Array__New(array_buffer, 0, len).?),
+                                64 => return @ptrCast(v8.v8__BigInt64Array__New(array_buffer, 0, len).?),
+                                else => {},
+                            },
+                        },
+                        .float => |f| switch (f.bits) {
+                            32 => return @ptrCast(v8.v8__Float32Array__New(array_buffer, 0, len).?),
+                            64 => return @ptrCast(v8.v8__Float64Array__New(array_buffer, 0, len).?),
+                            else => {},
+                        },
+                        else => {},
+                    }
+                    // We normally don't fail in this function unless fail == true
+                    // but this can never be valid.
+                    @compileError("Invalid TypeArray type: " ++ @typeName(value_type));
+                },
+                inline String, BigInt, Integer, Number, Value, Object => return value.handle,
+                else => {},
+            }
+        },
+        .@"union" => return simpleZigValueToJs(isolate, std.meta.activeTag(value), fail, null_as_undefined),
+        .@"enum" => {
+            const T = @TypeOf(value);
+            if (@hasDecl(T, "toString")) {
+                return simpleZigValueToJs(isolate, value.toString(), fail, null_as_undefined);
+            }
+        },
+        else => {},
+    }
+    if (fail) {
+        @compileError("Unsupported Zig type " ++ @typeName(@TypeOf(value)));
+    }
+    return null;
+}
+
+// These are here, and not in Inspector.zig, because Inspector.zig isn't always
+// included (e.g. in the wpt build).
+
+// This is called from V8. Whenever the v8 inspector has to describe a value
+// it'll call this function to gets its [optional] subtype - which, from V8's
+// point of view, is an arbitrary string.
+pub export fn v8_inspector__Client__IMPL__valueSubtype(
+    _: *v8.InspectorClientImpl,
+    c_value: *const v8.Value,
+) callconv(.c) [*c]const u8 {
+    const external_entry = Inspector.getTaggedOpaque(c_value) orelse return null;
+    return if (external_entry.subtype) |st| @tagName(st) else null;
+}
+
+// Same as valueSubType above, but for the optional description field.
+// From what I can tell, some drivers _need_ the description field to be
+// present, even if it's empty. So if we have a subType for the value, we'll
+// put an empty description.
+pub export fn v8_inspector__Client__IMPL__descriptionForValueSubtype(
+    _: *v8.InspectorClientImpl,
+    v8_context: *const v8.Context,
+    c_value: *const v8.Value,
+) callconv(.c) [*c]const u8 {
+    _ = v8_context;
+
+    // We _must_ include a non-null description in order for the subtype value
+    // to be included. Besides that, I don't know if the value has any meaning
+    const external_entry = Inspector.getTaggedOpaque(c_value) orelse return null;
+    return if (external_entry.subtype == null) null else "";
+}
+
+test "TaggedAnyOpaque" {
+    // If we grow this, fine, but it should be a conscious decision
+    try std.testing.expectEqual(24, @sizeOf(@import("TaggedOpaque.zig")));
+}

src/browser/loader.zig

@@ -1,90 +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 std = @import("std");
-
-const user_agent = "Lightpanda.io/1.0";
-
-pub const Loader = struct {
-    client: std.http.Client,
-    // use 16KB for headers buffer size.
-    server_header_buffer: [1024 * 16]u8 = undefined,
-
-    pub const Response = struct {
-        alloc: std.mem.Allocator,
-        req: *std.http.Client.Request,
-
-        pub fn deinit(self: *Response) void {
-            self.req.deinit();
-            self.alloc.destroy(self.req);
-        }
-    };
-
-    pub fn init(alloc: std.mem.Allocator) Loader {
-        return Loader{
-            .client = std.http.Client{
-                .allocator = alloc,
-            },
-        };
-    }
-
-    pub fn deinit(self: *Loader) void {
-        self.client.deinit();
-    }
-
-    // see
-    // https://ziglang.org/documentation/master/std/#A;std:http.Client.fetch
-    // for reference.
-    // The caller is responsible for calling `deinit()` on the `Response`.
-    pub fn get(self: *Loader, alloc: std.mem.Allocator, uri: std.Uri) !Response {
-        var resp = Response{
-            .alloc = alloc,
-            .req = try alloc.create(std.http.Client.Request),
-        };
-        errdefer alloc.destroy(resp.req);
-
-        resp.req.* = try self.client.open(.GET, uri, .{
-            .headers = .{
-                .user_agent = .{ .override = user_agent },
-            },
-            .extra_headers = &.{
-                .{ .name = "Accept", .value = "*/*" },
-                .{ .name = "Accept-Language", .value = "en-US,en;q=0.5" },
-            },
-            .server_header_buffer = &self.server_header_buffer,
-        });
-        errdefer resp.req.deinit();
-
-        try resp.req.send();
-        try resp.req.finish();
-        try resp.req.wait();
-
-        return resp;
-    }
-};
-
-test "basic url get" {
-    const alloc = std.testing.allocator;
-    var loader = Loader.init(alloc);
-    defer loader.deinit();
-
-    var result = try loader.get(alloc, "https://en.wikipedia.org/wiki/Main_Page");
-    defer result.deinit();
-
-    try std.testing.expect(result.req.response.status == std.http.Status.ok);
-}

src/browser/mime.zig

@@ -1,157 +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 std = @import("std");
-const testing = std.testing;
-
-const strparser = @import("../str/parser.zig");
-const Reader = strparser.Reader;
-const trim = strparser.trim;
-
-const Self = @This();
-
-const MimeError = error{
-    Empty,
-    TooBig,
-    Invalid,
-    InvalidChar,
-};
-
-mtype: []const u8,
-msubtype: []const u8,
-params: []const u8 = "",
-
-charset: ?[]const u8 = null,
-boundary: ?[]const u8 = null,
-
-pub const Empty = Self{ .mtype = "", .msubtype = "" };
-pub const HTML = Self{ .mtype = "text", .msubtype = "html" };
-pub const Javascript = Self{ .mtype = "application", .msubtype = "javascript" };
-
-// https://mimesniff.spec.whatwg.org/#http-token-code-point
-fn isHTTPCodePoint(c: u8) bool {
-    return switch (c) {
-        '!', '#', '$', '%', '&', '\'', '*', '+', '-', '.', '^' => return true,
-        '_', '`', '|', '~' => return true,
-        else => std.ascii.isAlphanumeric(c),
-    };
-}
-
-fn valid(s: []const u8) bool {
-    const ln = s.len;
-    var i: usize = 0;
-    while (i < ln) {
-        if (!isHTTPCodePoint(s[i])) return false;
-        i += 1;
-    }
-    return true;
-}
-
-// https://mimesniff.spec.whatwg.org/#parsing-a-mime-type
-pub fn parse(s: []const u8) Self.MimeError!Self {
-    const ln = s.len;
-    if (ln == 0) return MimeError.Empty;
-    // limit input size
-    if (ln > 255) return MimeError.TooBig;
-
-    var res = Self{ .mtype = "", .msubtype = "" };
-    var r = Reader{ .s = s };
-
-    res.mtype = trim(r.until('/'));
-    if (res.mtype.len == 0) return MimeError.Invalid;
-    if (!valid(res.mtype)) return MimeError.InvalidChar;
-
-    if (!r.skip()) return MimeError.Invalid;
-    res.msubtype = trim(r.until(';'));
-    if (res.msubtype.len == 0) return MimeError.Invalid;
-    if (!valid(res.msubtype)) return MimeError.InvalidChar;
-
-    if (!r.skip()) return res;
-    res.params = trim(r.tail());
-    if (res.params.len == 0) return MimeError.Invalid;
-
-    // parse well known parameters.
-    // don't check invalid parameter format.
-    var rp = Reader{ .s = res.params };
-    while (true) {
-        const name = trim(rp.until('='));
-        if (!rp.skip()) return res;
-        const value = trim(rp.until(';'));
-
-        if (std.ascii.eqlIgnoreCase(name, "charset")) {
-            res.charset = value;
-        }
-        if (std.ascii.eqlIgnoreCase(name, "boundary")) {
-            res.boundary = value;
-        }
-
-        if (!rp.skip()) return res;
-    }
-
-    return res;
-}
-
-test "parse valid" {
-    for ([_][]const u8{
-        "text/html",
-        " \ttext/html",
-        "text \t/html",
-        "text/ \thtml",
-        "text/html \t",
-    }) |tc| {
-        const m = try Self.parse(tc);
-        try testing.expectEqualStrings("text", m.mtype);
-        try testing.expectEqualStrings("html", m.msubtype);
-    }
-    const m2 = try Self.parse("text/javascript1.5");
-    try testing.expectEqualStrings("text", m2.mtype);
-    try testing.expectEqualStrings("javascript1.5", m2.msubtype);
-
-    const m3 = try Self.parse("text/html; charset=utf-8");
-    try testing.expectEqualStrings("text", m3.mtype);
-    try testing.expectEqualStrings("html", m3.msubtype);
-    try testing.expectEqualStrings("charset=utf-8", m3.params);
-    try testing.expectEqualStrings("utf-8", m3.charset.?);
-
-    const m4 = try Self.parse("text/html; boundary=----");
-    try testing.expectEqualStrings("text", m4.mtype);
-    try testing.expectEqualStrings("html", m4.msubtype);
-    try testing.expectEqualStrings("boundary=----", m4.params);
-    try testing.expectEqualStrings("----", m4.boundary.?);
-}
-
-test "parse invalid" {
-    for ([_][]const u8{
-        "",
-        "te xt/html;",
-        "te@xt/html;",
-        "text/ht@ml;",
-        "text/html;",
-        "/text/html",
-        "/html",
-    }) |tc| {
-        _ = Self.parse(tc) catch continue;
-        try testing.expect(false);
-    }
-}
-
-// Compare type and subtype.
-pub fn eql(self: Self, b: Self) bool {
-    if (!std.mem.eql(u8, self.mtype, b.mtype)) return false;
-    return std.mem.eql(u8, self.msubtype, b.msubtype);
-}

src/browser/parser/Parser.zig

@@ -0,0 +1,460 @@
+// 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 lp = @import("lightpanda");
+const h5e = @import("html5ever.zig");
+
+const Page = @import("../Page.zig");
+const Node = @import("../webapi/Node.zig");
+const Element = @import("../webapi/Element.zig");
+const Allocator = std.mem.Allocator;
+const IS_DEBUG = @import("builtin").mode == .Debug;
+
+pub const ParsedNode = struct {
+    node: *Node,
+
+    // Data associated with this element to be passed back to html5ever as needed
+    // We only have this for Elements. For other types, like comments, it's null.
+    // html5ever should never ask us for this data on a non-element, and we'll
+    // assert that, with this opitonal, to make sure our assumption is correct.
+    data: ?*anyopaque,
+};
+
+const Parser = @This();
+
+page: *Page,
+err: ?Error,
+container: ParsedNode,
+arena: Allocator,
+strings: std.StringHashMapUnmanaged(void),
+
+pub fn init(arena: Allocator, node: *Node, page: *Page) Parser {
+    return .{
+        .err = null,
+        .page = page,
+        .strings = .empty,
+        .arena = arena,
+        .container = ParsedNode{
+            .data = null,
+            .node = node,
+        },
+    };
+}
+
+const Error = struct {
+    err: anyerror,
+    source: Source,
+
+    const Source = enum {
+        pop,
+        append,
+        create_element,
+        create_comment,
+        create_processing_instruction,
+        append_doctype_to_document,
+        add_attrs_if_missing,
+        get_template_content,
+        remove_from_parent,
+        reparent_children,
+        append_before_sibling,
+        append_based_on_parent_node,
+    };
+};
+
+pub fn parse(self: *Parser, html: []const u8) void {
+    h5e.html5ever_parse_document(
+        html.ptr,
+        html.len,
+        &self.container,
+        self,
+        createElementCallback,
+        getDataCallback,
+        appendCallback,
+        parseErrorCallback,
+        popCallback,
+        createCommentCallback,
+        createProcessingInstruction,
+        appendDoctypeToDocument,
+        addAttrsIfMissingCallback,
+        getTemplateContentsCallback,
+        removeFromParentCallback,
+        reparentChildrenCallback,
+        appendBeforeSiblingCallback,
+        appendBasedOnParentNodeCallback,
+    );
+}
+
+pub fn parseXML(self: *Parser, xml: []const u8) void {
+    h5e.xml5ever_parse_document(
+        xml.ptr,
+        xml.len,
+        &self.container,
+        self,
+        createXMLElementCallback,
+        getDataCallback,
+        appendCallback,
+        parseErrorCallback,
+        popCallback,
+        createCommentCallback,
+        createProcessingInstruction,
+        appendDoctypeToDocument,
+        addAttrsIfMissingCallback,
+        getTemplateContentsCallback,
+        removeFromParentCallback,
+        reparentChildrenCallback,
+        appendBeforeSiblingCallback,
+        appendBasedOnParentNodeCallback,
+    );
+}
+
+pub fn parseFragment(self: *Parser, html: []const u8) void {
+    h5e.html5ever_parse_fragment(
+        html.ptr,
+        html.len,
+        &self.container,
+        self,
+        createElementCallback,
+        getDataCallback,
+        appendCallback,
+        parseErrorCallback,
+        popCallback,
+        createCommentCallback,
+        createProcessingInstruction,
+        appendDoctypeToDocument,
+        addAttrsIfMissingCallback,
+        getTemplateContentsCallback,
+        removeFromParentCallback,
+        reparentChildrenCallback,
+        appendBeforeSiblingCallback,
+        appendBasedOnParentNodeCallback,
+    );
+}
+
+pub const Streaming = struct {
+    parser: Parser,
+    handle: ?*anyopaque,
+
+    pub fn init(arena: Allocator, node: *Node, page: *Page) Streaming {
+        return .{
+            .handle = null,
+            .parser = Parser.init(arena, node, page),
+        };
+    }
+
+    pub fn deinit(self: *Streaming) void {
+        if (self.handle) |handle| {
+            h5e.html5ever_streaming_parser_destroy(handle);
+        }
+    }
+
+    pub fn start(self: *Streaming) !void {
+        lp.assert(self.handle == null, "Parser.start non-null handle", .{});
+
+        self.handle = h5e.html5ever_streaming_parser_create(
+            &self.parser.container,
+            &self.parser,
+            createElementCallback,
+            getDataCallback,
+            appendCallback,
+            parseErrorCallback,
+            popCallback,
+            createCommentCallback,
+            createProcessingInstruction,
+            appendDoctypeToDocument,
+            addAttrsIfMissingCallback,
+            getTemplateContentsCallback,
+            removeFromParentCallback,
+            reparentChildrenCallback,
+            appendBeforeSiblingCallback,
+            appendBasedOnParentNodeCallback,
+        ) orelse return error.ParserCreationFailed;
+    }
+
+    pub fn read(self: *Streaming, data: []const u8) !void {
+        const result = h5e.html5ever_streaming_parser_feed(
+            self.handle.?,
+            data.ptr,
+            data.len,
+        );
+
+        if (result != 0) {
+            // Parser panicked - clean up and return error
+            // Note: deinit will destroy the handle if it exists
+            if (self.handle) |handle| {
+                h5e.html5ever_streaming_parser_destroy(handle);
+                self.handle = null;
+            }
+            return error.ParserPanic;
+        }
+    }
+
+    pub fn done(self: *Streaming) void {
+        h5e.html5ever_streaming_parser_finish(self.handle.?);
+    }
+};
+
+fn parseErrorCallback(ctx: *anyopaque, err: h5e.StringSlice) callconv(.c) void {
+    _ = ctx;
+    _ = err;
+    // std.debug.print("PEC: {s}\n", .{err.slice()});
+}
+
+fn popCallback(ctx: *anyopaque, node_ref: *anyopaque) callconv(.c) void {
+    const self: *Parser = @ptrCast(@alignCast(ctx));
+    self._popCallback(getNode(node_ref)) catch |err| {
+        self.err = .{ .err = err, .source = .pop };
+    };
+}
+
+fn _popCallback(self: *Parser, node: *Node) !void {
+    try self.page.nodeComplete(node);
+}
+
+fn createElementCallback(ctx: *anyopaque, data: *anyopaque, qname: h5e.QualName, attributes: h5e.AttributeIterator) callconv(.c) ?*anyopaque {
+    return _createElementCallbackWithDefaultnamespace(ctx, data, qname, attributes, .unknown);
+}
+
+fn createXMLElementCallback(ctx: *anyopaque, data: *anyopaque, qname: h5e.QualName, attributes: h5e.AttributeIterator) callconv(.c) ?*anyopaque {
+    return _createElementCallbackWithDefaultnamespace(ctx, data, qname, attributes, .xml);
+}
+
+fn _createElementCallbackWithDefaultnamespace(ctx: *anyopaque, data: *anyopaque, qname: h5e.QualName, attributes: h5e.AttributeIterator, default_namespace: Element.Namespace) ?*anyopaque {
+    const self: *Parser = @ptrCast(@alignCast(ctx));
+    return self._createElementCallback(data, qname, attributes, default_namespace) catch |err| {
+        self.err = .{ .err = err, .source = .create_element };
+        return null;
+    };
+}
+fn _createElementCallback(self: *Parser, data: *anyopaque, qname: h5e.QualName, attributes: h5e.AttributeIterator, default_namespace: Element.Namespace) !*anyopaque {
+    const page = self.page;
+    const name = qname.local.slice();
+    const namespace_string = qname.ns.slice();
+    const namespace = if (namespace_string.len == 0) default_namespace else Element.Namespace.parse(namespace_string);
+    const node = try page.createElementNS(namespace, name, attributes);
+
+    const pn = try self.arena.create(ParsedNode);
+    pn.* = .{
+        .data = data,
+        .node = node,
+    };
+    return pn;
+}
+
+fn createCommentCallback(ctx: *anyopaque, str: h5e.StringSlice) callconv(.c) ?*anyopaque {
+    const self: *Parser = @ptrCast(@alignCast(ctx));
+    return self._createCommentCallback(str.slice()) catch |err| {
+        self.err = .{ .err = err, .source = .create_comment };
+        return null;
+    };
+}
+fn _createCommentCallback(self: *Parser, str: []const u8) !*anyopaque {
+    const page = self.page;
+    const node = try page.createComment(str);
+    const pn = try self.arena.create(ParsedNode);
+    pn.* = .{
+        .data = null,
+        .node = node,
+    };
+    return pn;
+}
+
+fn createProcessingInstruction(ctx: *anyopaque, target: h5e.StringSlice, data: h5e.StringSlice) callconv(.c) ?*anyopaque {
+    const self: *Parser = @ptrCast(@alignCast(ctx));
+    return self._createProcessingInstruction(target.slice(), data.slice()) catch |err| {
+        self.err = .{ .err = err, .source = .create_processing_instruction };
+        return null;
+    };
+}
+fn _createProcessingInstruction(self: *Parser, target: []const u8, data: []const u8) !*anyopaque {
+    const page = self.page;
+    const node = try page.createProcessingInstruction(target, data);
+    const pn = try self.arena.create(ParsedNode);
+    pn.* = .{
+        .data = null,
+        .node = node,
+    };
+    return pn;
+}
+
+fn appendDoctypeToDocument(ctx: *anyopaque, name: h5e.StringSlice, public_id: h5e.StringSlice, system_id: h5e.StringSlice) callconv(.c) void {
+    const self: *Parser = @ptrCast(@alignCast(ctx));
+    self._appendDoctypeToDocument(name.slice(), public_id.slice(), system_id.slice()) catch |err| {
+        self.err = .{ .err = err, .source = .append_doctype_to_document };
+    };
+}
+fn _appendDoctypeToDocument(self: *Parser, name: []const u8, public_id: []const u8, system_id: []const u8) !void {
+    const page = self.page;
+
+    // Create the DocumentType node
+    const DocumentType = @import("../webapi/DocumentType.zig");
+    const doctype = try page._factory.node(DocumentType{
+        ._proto = undefined,
+        ._name = try page.dupeString(name),
+        ._public_id = try page.dupeString(public_id),
+        ._system_id = try page.dupeString(system_id),
+    });
+
+    // Append it to the document
+    try page.appendNew(self.container.node, .{ .node = doctype.asNode() });
+}
+
+fn addAttrsIfMissingCallback(ctx: *anyopaque, target_ref: *anyopaque, attributes: h5e.AttributeIterator) callconv(.c) void {
+    const self: *Parser = @ptrCast(@alignCast(ctx));
+    self._addAttrsIfMissingCallback(getNode(target_ref), attributes) catch |err| {
+        self.err = .{ .err = err, .source = .add_attrs_if_missing };
+    };
+}
+fn _addAttrsIfMissingCallback(self: *Parser, node: *Node, attributes: h5e.AttributeIterator) !void {
+    const element = node.as(Element);
+    const page = self.page;
+
+    const attr_list = try element.getOrCreateAttributeList(page);
+    while (attributes.next()) |attr| {
+        const name = attr.name.local.slice();
+        const value = attr.value.slice();
+        // putNew only adds if the attribute doesn't already exist
+        try attr_list.putNew(name, value, page);
+    }
+}
+
+fn getTemplateContentsCallback(ctx: *anyopaque, target_ref: *anyopaque) callconv(.c) ?*anyopaque {
+    const self: *Parser = @ptrCast(@alignCast(ctx));
+    return self._getTemplateContentsCallback(getNode(target_ref)) catch |err| {
+        self.err = .{ .err = err, .source = .get_template_content };
+        return null;
+    };
+}
+
+fn _getTemplateContentsCallback(self: *Parser, node: *Node) !*anyopaque {
+    const element = node.as(Element);
+    const template = element._type.html.is(Element.Html.Template) orelse unreachable;
+    const content_node = template.getContent().asNode();
+
+    // Create a ParsedNode wrapper for the content DocumentFragment
+    const pn = try self.arena.create(ParsedNode);
+    pn.* = .{
+        .data = null,
+        .node = content_node,
+    };
+    return pn;
+}
+
+fn getDataCallback(ctx: *anyopaque) callconv(.c) *anyopaque {
+    const pn: *ParsedNode = @ptrCast(@alignCast(ctx));
+    // For non-elements, data is null. But, we expect this to only ever
+    // be called for elements.
+    lp.assert(pn.data != null, "Parser.getDataCallback null data", .{});
+    return pn.data.?;
+}
+
+fn appendCallback(ctx: *anyopaque, parent_ref: *anyopaque, node_or_text: h5e.NodeOrText) callconv(.c) void {
+    const self: *Parser = @ptrCast(@alignCast(ctx));
+    self._appendCallback(getNode(parent_ref), node_or_text) catch |err| {
+        self.err = .{ .err = err, .source = .append };
+    };
+}
+fn _appendCallback(self: *Parser, parent: *Node, node_or_text: h5e.NodeOrText) !void {
+    // child node is guaranteed not to belong to another parent
+    switch (node_or_text.toUnion()) {
+        .node => |cpn| {
+            const child = getNode(cpn);
+            if (child._parent) |previous_parent| {
+                // html5ever says this can't happen, but we might be screwing up
+                // the node on our side. We shouldn't be, but we're seeing this
+                // in the wild, and I'm not sure why. In debug, let's crash so
+                // we can try to figure it out. In release, let's disconnect
+                // the child first.
+                if (comptime IS_DEBUG) {
+                    unreachable;
+                }
+                self.page.removeNode(previous_parent, child, .{ .will_be_reconnected = parent.isConnected() });
+            }
+            try self.page.appendNew(parent, .{ .node = child });
+        },
+        .text => |txt| try self.page.appendNew(parent, .{ .text = txt }),
+    }
+}
+
+fn removeFromParentCallback(ctx: *anyopaque, target_ref: *anyopaque) callconv(.c) void {
+    const self: *Parser = @ptrCast(@alignCast(ctx));
+    self._removeFromParentCallback(getNode(target_ref)) catch |err| {
+        self.err = .{ .err = err, .source = .remove_from_parent };
+    };
+}
+fn _removeFromParentCallback(self: *Parser, node: *Node) !void {
+    const parent = node.parentNode() orelse return;
+    _ = try parent.removeChild(node, self.page);
+}
+
+fn reparentChildrenCallback(ctx: *anyopaque, node_ref: *anyopaque, new_parent_ref: *anyopaque) callconv(.c) void {
+    const self: *Parser = @ptrCast(@alignCast(ctx));
+    self._reparentChildrenCallback(getNode(node_ref), getNode(new_parent_ref)) catch |err| {
+        self.err = .{ .err = err, .source = .reparent_children };
+    };
+}
+fn _reparentChildrenCallback(self: *Parser, node: *Node, new_parent: *Node) !void {
+    try self.page.appendAllChildren(node, new_parent);
+}
+
+fn appendBeforeSiblingCallback(ctx: *anyopaque, sibling_ref: *anyopaque, node_or_text: h5e.NodeOrText) callconv(.c) void {
+    const self: *Parser = @ptrCast(@alignCast(ctx));
+    self._appendBeforeSiblingCallback(getNode(sibling_ref), node_or_text) catch |err| {
+        self.err = .{ .err = err, .source = .append_before_sibling };
+    };
+}
+fn _appendBeforeSiblingCallback(self: *Parser, sibling: *Node, node_or_text: h5e.NodeOrText) !void {
+    const parent = sibling.parentNode() orelse return error.NoParent;
+    const node: *Node = switch (node_or_text.toUnion()) {
+        .node => |cpn| getNode(cpn),
+        .text => |txt| try self.page.createTextNode(txt),
+    };
+    try self.page.insertNodeRelative(parent, node, .{ .before = sibling }, .{});
+}
+
+fn appendBasedOnParentNodeCallback(ctx: *anyopaque, element_ref: *anyopaque, prev_element_ref: *anyopaque, node_or_text: h5e.NodeOrText) callconv(.c) void {
+    const self: *Parser = @ptrCast(@alignCast(ctx));
+    self._appendBasedOnParentNodeCallback(getNode(element_ref), getNode(prev_element_ref), node_or_text) catch |err| {
+        self.err = .{ .err = err, .source = .append_based_on_parent_node };
+    };
+}
+fn _appendBasedOnParentNodeCallback(self: *Parser, element: *Node, prev_element: *Node, node_or_text: h5e.NodeOrText) !void {
+    if (element.parentNode()) |_| {
+        try self._appendBeforeSiblingCallback(element, node_or_text);
+    } else {
+        try self._appendCallback(prev_element, node_or_text);
+    }
+}
+
+fn getNode(ref: *anyopaque) *Node {
+    const pn: *ParsedNode = @ptrCast(@alignCast(ref));
+    return pn.node;
+}
+
+fn asUint(comptime string: anytype) std.meta.Int(
+    .unsigned,
+    @bitSizeOf(@TypeOf(string.*)) - 8, // (- 8) to exclude sentinel 0
+) {
+    const byteLength = @sizeOf(@TypeOf(string.*)) - 1;
+    const expectedType = *const [byteLength:0]u8;
+    if (@TypeOf(string) != expectedType) {
+        @compileError("expected : " ++ @typeName(expectedType) ++ ", got: " ++ @typeName(@TypeOf(string)));
+    }
+
+    return @bitCast(@as(*const [byteLength]u8, string).*);
+}

src/browser/parser/html5ever.zig

@@ -0,0 +1,194 @@
+// 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 ParsedNode = @import("Parser.zig").ParsedNode;
+
+pub extern "c" fn html5ever_parse_document(
+    html: [*c]const u8,
+    len: usize,
+    doc: *anyopaque,
+    ctx: *anyopaque,
+    createElementCallback: *const fn (ctx: *anyopaque, data: *anyopaque, QualName, AttributeIterator) callconv(.c) ?*anyopaque,
+    elemNameCallback: *const fn (node_ref: *anyopaque) callconv(.c) *anyopaque,
+    appendCallback: *const fn (ctx: *anyopaque, parent_ref: *anyopaque, NodeOrText) callconv(.c) void,
+    parseErrorCallback: *const fn (ctx: *anyopaque, StringSlice) callconv(.c) void,
+    popCallback: *const fn (ctx: *anyopaque, node_ref: *anyopaque) callconv(.c) void,
+    createCommentCallback: *const fn (ctx: *anyopaque, StringSlice) callconv(.c) ?*anyopaque,
+    createProcessingInstruction: *const fn (ctx: *anyopaque, StringSlice, StringSlice) callconv(.c) ?*anyopaque,
+    appendDoctypeToDocument: *const fn (ctx: *anyopaque, StringSlice, StringSlice, StringSlice) callconv(.c) void,
+    addAttrsIfMissingCallback: *const fn (ctx: *anyopaque, target_ref: *anyopaque, AttributeIterator) callconv(.c) void,
+    getTemplateContentsCallback: *const fn (ctx: *anyopaque, target_ref: *anyopaque) callconv(.c) ?*anyopaque,
+    removeFromParentCallback: *const fn (ctx: *anyopaque, target_ref: *anyopaque) callconv(.c) void,
+    reparentChildrenCallback: *const fn (ctx: *anyopaque, node_ref: *anyopaque, new_parent_ref: *anyopaque) callconv(.c) void,
+    appendBeforeSiblingCallback: *const fn (ctx: *anyopaque, sibling_ref: *anyopaque, NodeOrText) callconv(.c) void,
+    appendBasedOnParentNodeCallback: *const fn (ctx: *anyopaque, element_ref: *anyopaque, prev_element_ref: *anyopaque, NodeOrText) callconv(.c) void,
+) void;
+
+pub extern "c" fn html5ever_parse_fragment(
+    html: [*c]const u8,
+    len: usize,
+    doc: *anyopaque,
+    ctx: *anyopaque,
+    createElementCallback: *const fn (ctx: *anyopaque, data: *anyopaque, QualName, AttributeIterator) callconv(.c) ?*anyopaque,
+    elemNameCallback: *const fn (node_ref: *anyopaque) callconv(.c) *anyopaque,
+    appendCallback: *const fn (ctx: *anyopaque, parent_ref: *anyopaque, NodeOrText) callconv(.c) void,
+    parseErrorCallback: *const fn (ctx: *anyopaque, StringSlice) callconv(.c) void,
+    popCallback: *const fn (ctx: *anyopaque, node_ref: *anyopaque) callconv(.c) void,
+    createCommentCallback: *const fn (ctx: *anyopaque, StringSlice) callconv(.c) ?*anyopaque,
+    createProcessingInstruction: *const fn (ctx: *anyopaque, StringSlice, StringSlice) callconv(.c) ?*anyopaque,
+    appendDoctypeToDocument: *const fn (ctx: *anyopaque, StringSlice, StringSlice, StringSlice) callconv(.c) void,
+    addAttrsIfMissingCallback: *const fn (ctx: *anyopaque, target_ref: *anyopaque, AttributeIterator) callconv(.c) void,
+    getTemplateContentsCallback: *const fn (ctx: *anyopaque, target_ref: *anyopaque) callconv(.c) ?*anyopaque,
+    removeFromParentCallback: *const fn (ctx: *anyopaque, target_ref: *anyopaque) callconv(.c) void,
+    reparentChildrenCallback: *const fn (ctx: *anyopaque, node_ref: *anyopaque, new_parent_ref: *anyopaque) callconv(.c) void,
+    appendBeforeSiblingCallback: *const fn (ctx: *anyopaque, sibling_ref: *anyopaque, NodeOrText) callconv(.c) void,
+    appendBasedOnParentNodeCallback: *const fn (ctx: *anyopaque, element_ref: *anyopaque, prev_element_ref: *anyopaque, NodeOrText) callconv(.c) void,
+) void;
+
+pub extern "c" fn html5ever_attribute_iterator_next(ctx: *anyopaque) Nullable(Attribute);
+pub extern "c" fn html5ever_attribute_iterator_count(ctx: *anyopaque) usize;
+
+pub extern "c" fn html5ever_get_memory_usage() MemoryUsage;
+
+pub const MemoryUsage = extern struct {
+    resident: usize,
+    allocated: usize,
+};
+
+// Streaming parser API
+pub extern "c" fn html5ever_streaming_parser_create(
+    doc: *anyopaque,
+    ctx: *anyopaque,
+    createElementCallback: *const fn (ctx: *anyopaque, data: *anyopaque, QualName, AttributeIterator) callconv(.c) ?*anyopaque,
+    elemNameCallback: *const fn (node_ref: *anyopaque) callconv(.c) *anyopaque,
+    appendCallback: *const fn (ctx: *anyopaque, parent_ref: *anyopaque, NodeOrText) callconv(.c) void,
+    parseErrorCallback: *const fn (ctx: *anyopaque, StringSlice) callconv(.c) void,
+    popCallback: *const fn (ctx: *anyopaque, node_ref: *anyopaque) callconv(.c) void,
+    createCommentCallback: *const fn (ctx: *anyopaque, StringSlice) callconv(.c) ?*anyopaque,
+    createProcessingInstruction: *const fn (ctx: *anyopaque, StringSlice, StringSlice) callconv(.c) ?*anyopaque,
+    appendDoctypeToDocument: *const fn (ctx: *anyopaque, StringSlice, StringSlice, StringSlice) callconv(.c) void,
+    addAttrsIfMissingCallback: *const fn (ctx: *anyopaque, target_ref: *anyopaque, AttributeIterator) callconv(.c) void,
+    getTemplateContentsCallback: *const fn (ctx: *anyopaque, target_ref: *anyopaque) callconv(.c) ?*anyopaque,
+    removeFromParentCallback: *const fn (ctx: *anyopaque, target_ref: *anyopaque) callconv(.c) void,
+    reparentChildrenCallback: *const fn (ctx: *anyopaque, node_ref: *anyopaque, new_parent_ref: *anyopaque) callconv(.c) void,
+    appendBeforeSiblingCallback: *const fn (ctx: *anyopaque, sibling_ref: *anyopaque, NodeOrText) callconv(.c) void,
+    appendBasedOnParentNodeCallback: *const fn (ctx: *anyopaque, element_ref: *anyopaque, prev_element_ref: *anyopaque, NodeOrText) callconv(.c) void,
+) ?*anyopaque;
+
+pub extern "c" fn html5ever_streaming_parser_feed(
+    parser: *anyopaque,
+    html: [*c]const u8,
+    len: usize,
+) c_int;
+
+pub extern "c" fn html5ever_streaming_parser_finish(
+    parser: *anyopaque,
+) void;
+
+pub extern "c" fn html5ever_streaming_parser_destroy(
+    parser: *anyopaque,
+) void;
+
+pub fn Nullable(comptime T: type) type {
+    return extern struct {
+        tag: u8,
+        value: T,
+
+        pub fn unwrap(self: @This()) ?T {
+            return if (self.tag == 0) null else self.value;
+        }
+
+        pub fn none() @This() {
+            return .{ .tag = 0, .value = undefined };
+        }
+    };
+}
+
+pub const StringSlice = Slice(u8);
+pub fn Slice(comptime T: type) type {
+    return extern struct {
+        ptr: [*]const T,
+        len: usize,
+
+        pub fn slice(self: @This()) []const T {
+            return self.ptr[0..self.len];
+        }
+    };
+}
+
+pub const QualName = extern struct {
+    prefix: Nullable(StringSlice),
+    ns: StringSlice,
+    local: StringSlice,
+};
+
+pub const Attribute = extern struct {
+    name: QualName,
+    value: StringSlice,
+};
+
+pub const AttributeIterator = extern struct {
+    iter: *anyopaque,
+
+    pub fn next(self: AttributeIterator) ?Attribute {
+        return html5ever_attribute_iterator_next(self.iter).unwrap();
+    }
+
+    pub fn count(self: AttributeIterator) usize {
+        return html5ever_attribute_iterator_count(self.iter);
+    }
+};
+
+pub const NodeOrText = extern struct {
+    tag: u8,
+    node: *anyopaque,
+    text: StringSlice,
+
+    pub fn toUnion(self: NodeOrText) Union {
+        if (self.tag == 0) {
+            return .{ .node = @ptrCast(@alignCast(self.node)) };
+        }
+        return .{ .text = self.text.slice() };
+    }
+
+    const Union = union(enum) {
+        node: *ParsedNode,
+        text: []const u8,
+    };
+};
+
+pub extern "c" fn xml5ever_parse_document(
+    html: [*c]const u8,
+    len: usize,
+    doc: *anyopaque,
+    ctx: *anyopaque,
+    createElementCallback: *const fn (ctx: *anyopaque, data: *anyopaque, QualName, AttributeIterator) callconv(.c) ?*anyopaque,
+    elemNameCallback: *const fn (node_ref: *anyopaque) callconv(.c) *anyopaque,
+    appendCallback: *const fn (ctx: *anyopaque, parent_ref: *anyopaque, NodeOrText) callconv(.c) void,
+    parseErrorCallback: *const fn (ctx: *anyopaque, StringSlice) callconv(.c) void,
+    popCallback: *const fn (ctx: *anyopaque, node_ref: *anyopaque) callconv(.c) void,
+    createCommentCallback: *const fn (ctx: *anyopaque, StringSlice) callconv(.c) ?*anyopaque,
+    createProcessingInstruction: *const fn (ctx: *anyopaque, StringSlice, StringSlice) callconv(.c) ?*anyopaque,
+    appendDoctypeToDocument: *const fn (ctx: *anyopaque, StringSlice, StringSlice, StringSlice) callconv(.c) void,
+    addAttrsIfMissingCallback: *const fn (ctx: *anyopaque, target_ref: *anyopaque, AttributeIterator) callconv(.c) void,
+    getTemplateContentsCallback: *const fn (ctx: *anyopaque, target_ref: *anyopaque) callconv(.c) ?*anyopaque,
+    removeFromParentCallback: *const fn (ctx: *anyopaque, target_ref: *anyopaque) callconv(.c) void,
+    reparentChildrenCallback: *const fn (ctx: *anyopaque, node_ref: *anyopaque, new_parent_ref: *anyopaque) callconv(.c) void,
+    appendBeforeSiblingCallback: *const fn (ctx: *anyopaque, sibling_ref: *anyopaque, NodeOrText) callconv(.c) void,
+    appendBasedOnParentNodeCallback: *const fn (ctx: *anyopaque, element_ref: *anyopaque, prev_element_ref: *anyopaque, NodeOrText) callconv(.c) void,
+) void;

src/browser/reflect.zig

@@ -0,0 +1,64 @@
+// 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");
+
+// Gets the Parent of child.
+// HtmlElement.of(script) -> *HTMLElement
+pub fn Struct(comptime T: type) type {
+    return switch (@typeInfo(T)) {
+        .pointer => |ptr| ptr.child,
+        .@"struct" => T,
+        .void => T,
+        else => unreachable,
+    };
+}
+
+// Creates an enum of N enums. Doesn't perserve their underlying integer
+pub fn mergeEnums(comptime enums: []const type) type {
+    const field_count = blk: {
+        var count: usize = 0;
+        inline for (enums) |e| {
+            count += @typeInfo(e).@"enum".fields.len;
+        }
+        break :blk count;
+    };
+
+    var i: usize = 0;
+    var fields: [field_count]std.builtin.Type.EnumField = undefined;
+    for (enums) |e| {
+        for (@typeInfo(e).@"enum".fields) |f| {
+            fields[i] = .{
+                .name = f.name,
+                .value = i,
+            };
+            i += 1;
+        }
+    }
+
+    return @Type(.{ .@"enum" = .{
+        .decls = &.{},
+        .tag_type = blk: {
+            if (field_count <= std.math.maxInt(u8)) break :blk u8;
+            if (field_count <= std.math.maxInt(u16)) break :blk u16;
+            unreachable;
+        },
+        .fields = &fields,
+        .is_exhaustive = true,
+    } });
+}

src/browser/tests/animation/animation.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<script src="../testing.js"></script>
+
+<script id=animation>
+  let a1 = document.createElement('div').animate(null, null);
+  testing.expectEqual('finished', a1.playState);
+
+  let cb = [];
+  a1.ready.then(() => { cb.push('ready') });
+  a1.finished.then((x) => {
+    cb.push('finished');
+    cb.push(x == a1);
+  });
+  testing.eventually(() => testing.expectEqual(['finished', true], cb));
+</script>

src/browser/tests/blob.html

@@ -0,0 +1,136 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<script src="./testing.js"></script>
+
+<script id=basic>
+  {
+    const parts = ["\r\nthe quick brown\rfo\rx\r", "\njumps over\r\nthe\nlazy\r", "\ndog"];
+    // "transparent" ending should not modify the final buffer.
+    const blob = new Blob(parts, { type: "text/html" });
+
+    const expected = parts.join("");
+    testing.expectEqual(expected.length, blob.size);
+    testing.expectEqual("text/html", blob.type);
+    testing.async(async () => { testing.expectEqual(expected, await blob.text()) });
+  }
+
+  {
+    const parts = ["\rhello\r", "\nwor\r\nld"];
+    // "native" ending should modify the final buffer.
+    const blob = new Blob(parts, { endings: "native" });
+
+    const expected = "\nhello\n\nwor\nld";
+    testing.expectEqual(expected.length, blob.size);
+    testing.async(async () => { testing.expectEqual(expected, await blob.text()) });
+  }
+</script>
+
+<!-- Firefox and Safari only -->
+<script id=bytes>
+  {
+    const parts = ["light ", "panda ", "rocks ", "!"];
+    const blob = new Blob(parts);
+
+    testing.async(async() => {
+      const expected = new Uint8Array([108, 105, 103, 104, 116, 32, 112, 97,
+                                       110, 100, 97, 32, 114, 111, 99, 107, 115,
+                                       32, 33]);
+      const result = await blob.bytes();
+      testing.expectEqual(true, result instanceof Uint8Array);
+      testing.expectEqual(expected, result);
+    });
+  }
+
+  // Test for SIMD.
+  {
+    const parts = [
+      "\rThe opened package\r\nof potato\nchi\rps",
+      "held the\r\nanswer to the\r mystery. Both det\rectives looke\r\rd\r",
+      "\rat it but failed to realize\nit was\r\nthe\rkey\r\n",
+      "\r\nto solve the \rcrime.\r"
+    ];
+
+    const blob = new Blob(parts, { type: "text/html", endings: "native" });
+    testing.expectEqual(161, blob.size);
+    testing.expectEqual("text/html", blob.type);
+    testing.async(async() => {
+      const expected = new Uint8Array([10, 84, 104, 101, 32, 111, 112, 101, 110,
+                                       101, 100, 32, 112, 97, 99, 107, 97, 103,
+                                       101, 10, 111, 102, 32, 112, 111, 116, 97,
+                                       116, 111, 10, 99, 104, 105, 10, 112, 115,
+                                       104, 101, 108, 100, 32, 116, 104, 101, 10,
+                                       97, 110, 115, 119, 101, 114, 32, 116, 111,
+                                       32, 116, 104, 101, 10, 32, 109, 121, 115,
+                                       116, 101, 114, 121, 46, 32, 66, 111, 116,
+                                       104, 32, 100, 101, 116, 10, 101, 99, 116,
+                                       105, 118, 101, 115, 32, 108, 111, 111, 107,
+                                       101, 10, 10, 100, 10, 10, 97, 116, 32, 105,
+                                       116, 32, 98, 117, 116, 32, 102, 97, 105, 108,
+                                       101, 100, 32, 116, 111, 32, 114, 101, 97,
+                                       108, 105, 122, 101, 10, 105, 116, 32, 119, 97,
+                                       115, 10, 116, 104, 101, 10, 107, 101, 121,
+                                       10, 10, 116, 111, 32, 115, 111, 108, 118, 101,
+                                       32, 116, 104, 101, 32, 10, 99, 114, 105, 109,
+                                       101, 46, 10]);
+      const result = await blob.bytes();
+      testing.expectEqual(true, result instanceof Uint8Array);
+      testing.expectEqual(expected, result);
+    });
+  }
+</script>
+
+<script id=stream>
+  {
+    const parts = ["may", "thy", "knife", "chip", "and", "shatter"];
+    const blob = new Blob(parts);
+    const reader = blob.stream().getReader();
+
+    testing.async(async () => {
+      const {done: done, value: value} = await reader.read()
+      const expected = new Uint8Array([109, 97, 121, 116, 104, 121, 107, 110,
+                                       105, 102, 101, 99, 104, 105, 112, 97,
+                                       110, 100, 115, 104, 97, 116, 116, 101,
+                                       114]);
+      testing.expectEqual(false, done);
+      testing.expectEqual(true, value instanceof Uint8Array);
+      testing.expectEqual(expected, value);
+    });
+  }
+</script>
+
+<script id=slice>
+  {
+    const parts = ["la", "symphonie", "des", "éclairs"];
+    const blob = new Blob(parts);
+    testing.async(async () => {
+      const result = await blob.arrayBuffer();
+      testing.expectEqual(true, result instanceof ArrayBuffer)
+    });
+
+    let temp = blob.slice(0);
+    testing.expectEqual(blob.size, temp.size);
+    testing.async(async () => {
+      testing.expectEqual("lasymphoniedeséclairs", await temp.text());
+    });
+
+    temp = blob.slice(-4, -2, "custom");
+    testing.expectEqual(2, temp.size);
+    testing.expectEqual("custom", temp.type);
+    testing.async(async () => {
+      testing.expectEqual("ai", await temp.text());
+    });
+
+    temp = blob.slice(14);
+    testing.expectEqual(8, temp.size);
+    testing.async(async () => {
+      testing.expectEqual("éclairs", await temp.text());
+    });
+
+    temp = blob.slice(6, -10, "text/eclair");
+    testing.expectEqual(6, temp.size);
+    testing.expectEqual("text/eclair", temp.type);
+    testing.async(async () => {
+      testing.expectEqual("honied", await temp.text());
+    });
+  }
+</script>

src/browser/tests/canvas/canvas_rendering_context_2d.html

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<script src="../testing.js"></script>
+
+<script id=CanvasRenderingContext2D>
+{
+  const element = document.createElement("canvas");
+  const ctx = element.getContext("2d");
+  testing.expectEqual(true, ctx instanceof CanvasRenderingContext2D);
+  // We can't really test this but let's try to call it at least.
+  ctx.fillRect(0, 0, 0, 0);
+}
+</script>
+
+<script id=CanvasRenderingContext2D#fillStyle>
+{
+  const element = document.createElement("canvas");
+  const ctx = element.getContext("2d");
+
+  // Black by default.
+  testing.expectEqual(ctx.fillStyle, "#000000");
+  ctx.fillStyle = "red";
+  testing.expectEqual(ctx.fillStyle, "#ff0000");
+  ctx.fillStyle = "rebeccapurple";
+  testing.expectEqual(ctx.fillStyle, "#663399");
+  // No changes made if color is invalid.
+  ctx.fillStyle = "invalid-color";
+  testing.expectEqual(ctx.fillStyle, "#663399");
+  ctx.fillStyle = "#fc0";
+  testing.expectEqual(ctx.fillStyle, "#ffcc00");
+  ctx.fillStyle = "#ff0000";
+  testing.expectEqual(ctx.fillStyle, "#ff0000");
+  ctx.fillStyle = "#fF00000F";
+  testing.expectEqual(ctx.fillStyle, "rgba(255, 0, 0, 0.06)");
+}
+</script>

src/browser/tests/canvas/webgl_rendering_context.html

@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<script src="../testing.js"></script>
+
+<script id=WebGLRenderingContext#getSupportedExtensions>
+{
+  const element = document.createElement("canvas");
+  const ctx = element.getContext("webgl");
+  testing.expectEqual(true, ctx instanceof WebGLRenderingContext);
+
+  const supportedExtensions = ctx.getSupportedExtensions();
+  // The order Chrome prefer.
+  const expectedExtensions = [
+      "ANGLE_instanced_arrays",
+      "EXT_blend_minmax",
+      "EXT_clip_control",
+      "EXT_color_buffer_half_float",
+      "EXT_depth_clamp",
+      "EXT_disjoint_timer_query",
+      "EXT_float_blend",
+      "EXT_frag_depth",
+      "EXT_polygon_offset_clamp",
+      "EXT_shader_texture_lod",
+      "EXT_texture_compression_bptc",
+      "EXT_texture_compression_rgtc",
+      "EXT_texture_filter_anisotropic",
+      "EXT_texture_mirror_clamp_to_edge",
+      "EXT_sRGB",
+      "KHR_parallel_shader_compile",
+      "OES_element_index_uint",
+      "OES_fbo_render_mipmap",
+      "OES_standard_derivatives",
+      "OES_texture_float",
+      "OES_texture_float_linear",
+      "OES_texture_half_float",
+      "OES_texture_half_float_linear",
+      "OES_vertex_array_object",
+      "WEBGL_blend_func_extended",
+      "WEBGL_color_buffer_float",
+      "WEBGL_compressed_texture_astc",
+      "WEBGL_compressed_texture_etc",
+      "WEBGL_compressed_texture_etc1",
+      "WEBGL_compressed_texture_pvrtc",
+      "WEBGL_compressed_texture_s3tc",
+      "WEBGL_compressed_texture_s3tc_srgb",
+      "WEBGL_debug_renderer_info",
+      "WEBGL_debug_shaders",
+      "WEBGL_depth_texture",
+      "WEBGL_draw_buffers",
+      "WEBGL_lose_context",
+      "WEBGL_multi_draw",
+      "WEBGL_polygon_mode"
+  ];
+
+  testing.expectEqual(expectedExtensions.length, supportedExtensions.length);
+  for (let i = 0; i < expectedExtensions.length; i++) {
+    testing.expectEqual(expectedExtensions[i], supportedExtensions[i]);
+  }
+}
+</script>
+
+<script id=WebGLRenderingCanvas#getExtension>
+// WEBGL_debug_renderer_info
+{
+  const element = document.createElement("canvas");
+  const ctx = element.getContext("webgl");
+  const rendererInfo = ctx.getExtension("WEBGL_debug_renderer_info");
+  testing.expectEqual(true, rendererInfo instanceof WEBGL_debug_renderer_info);
+
+  const { UNMASKED_VENDOR_WEBGL, UNMASKED_RENDERER_WEBGL } = rendererInfo;
+  testing.expectEqual(UNMASKED_VENDOR_WEBGL, 0x9245);
+  testing.expectEqual(UNMASKED_RENDERER_WEBGL, 0x9246);
+
+  testing.expectEqual("", ctx.getParameter(UNMASKED_VENDOR_WEBGL));
+  testing.expectEqual("", ctx.getParameter(UNMASKED_RENDERER_WEBGL));
+}
+
+// WEBGL_lose_context
+{
+  const element = document.createElement("canvas");
+  const ctx = element.getContext("webgl");
+  const loseContext = ctx.getExtension("WEBGL_lose_context");
+  testing.expectEqual(true, loseContext instanceof WEBGL_lose_context);
+
+  loseContext.loseContext();
+  loseContext.restoreContext();
+}
+</script>

src/browser/tests/cdata/cdata_section.html

@@ -0,0 +1,217 @@
+cdataClassName<!DOCTYPE html>
+<script src="../testing.js"></script>
+
+<div id="container"></div>
+
+<script id="createInHTMLDocument">
+{
+  try {
+    document.createCDATASection('test');
+    testing.fail('Should have thrown NotSupportedError');
+  } catch (err) {
+    testing.expectEqual('NotSupportedError', err.name);
+  }
+}
+</script>
+
+<script id="createInXMLDocument">
+{
+  const doc = new Document();
+  const cdata = doc.createCDATASection('Hello World');
+
+  testing.expectEqual(4, cdata.nodeType);
+  testing.expectEqual('#cdata-section', cdata.nodeName);
+  testing.expectEqual('Hello World', cdata.data);
+  testing.expectEqual(11, cdata.length);
+}
+</script>
+
+<script id="cdataWithSpecialChars">
+{
+  const doc = new Document();
+  const cdata = doc.createCDATASection('<tag>&amp;"quotes"</tag>');
+
+  testing.expectEqual('<tag>&amp;"quotes"</tag>', cdata.data);
+}
+</script>
+
+<script id="cdataRejectsEndMarker">
+{
+  const doc = new Document();
+
+  testing.withError((err) => {
+    testing.expectEqual('InvalidCharacterError', err.name);
+  }, () => doc.createCDATASection('foo ]]> bar'));
+}
+</script>
+
+<script id="cdataRejectsEndMarkerEdgeCase">
+{
+  const doc = new Document();
+
+  testing.withError((err) => {
+    testing.expectEqual('InvalidCharacterError', err.name);
+  }, () => doc.createCDATASection(']]>'));
+
+  testing.withError((err) => {
+    testing.expectEqual('InvalidCharacterError', err.name);
+  }, () => doc.createCDATASection('start]]>end'));
+}
+</script>
+
+<script id="cdataAllowsSimilarPatterns">
+{
+  const doc = new Document();
+
+  const cdata1 = doc.createCDATASection(']>');
+  testing.expectEqual(']>', cdata1.data);
+
+  const cdata2 = doc.createCDATASection(']]');
+  testing.expectEqual(']]', cdata2.data);
+
+  const cdata3 = doc.createCDATASection('] ]>');
+  testing.expectEqual('] ]>', cdata3.data);
+}
+</script>
+
+<script id="cdataCharacterDataMethods">
+{
+  const doc = new Document();
+  const cdata = doc.createCDATASection('Hello');
+
+  cdata.appendData(' World');
+  testing.expectEqual('Hello World', cdata.data);
+  testing.expectEqual(11, cdata.length);
+
+  cdata.deleteData(5, 6);
+  testing.expectEqual('Hello', cdata.data);
+
+  cdata.insertData(0, 'Hi ');
+  testing.expectEqual('Hi Hello', cdata.data);
+
+  cdata.replaceData(0, 3, 'Bye');
+  testing.expectEqual('ByeHello', cdata.data);
+
+  const sub = cdata.substringData(0, 3);
+  testing.expectEqual('Bye', sub);
+}
+</script>
+
+<script id="cdataInheritance">
+{
+  const doc = new Document();
+  const cdata = doc.createCDATASection('test');
+
+  testing.expectEqual(true, cdata instanceof CDATASection);
+  testing.expectEqual(true, cdata instanceof Text);
+  testing.expectEqual(true, cdata instanceof CharacterData);
+  testing.expectEqual(true, cdata instanceof Node);
+}
+</script>
+
+<script id="cdataWholeText">
+{
+  const doc = new Document();
+  const cdata = doc.createCDATASection('test data');
+
+  testing.expectEqual('test data', cdata.wholeText);
+}
+</script>
+
+<script id="cdataClone">
+{
+  const doc = new Document();
+  const cdata = doc.createCDATASection('original data');
+
+  const clone = cdata.cloneNode(false);
+
+  testing.expectEqual(4, clone.nodeType);
+  testing.expectEqual('#cdata-section', clone.nodeName);
+  testing.expectEqual('original data', clone.data);
+  testing.expectEqual(true, clone !== cdata);
+}
+</script>
+
+<script id="cdataRemove">
+{
+  const doc = new Document();
+  const cdata = doc.createCDATASection('test');
+
+  const root = doc.createElement('root');
+  doc.appendChild(root);
+  root.appendChild(cdata);
+
+  testing.expectEqual(1, root.childNodes.length);
+  testing.expectEqual(root, cdata.parentNode);
+
+  cdata.remove();
+  testing.expectEqual(0, root.childNodes.length);
+  testing.expectEqual(null, cdata.parentNode);
+}
+</script>
+
+<script id="cdataBeforeAfter">
+{
+  const doc = new Document();
+  const root = doc.createElement('root');
+  doc.appendChild(root);
+
+  const cdata = doc.createCDATASection('middle');
+  root.appendChild(cdata);
+
+  const text1 = doc.createTextNode('before');
+  const text2 = doc.createTextNode('after');
+
+  cdata.before(text1);
+  cdata.after(text2);
+
+  testing.expectEqual(3, root.childNodes.length);
+}
+</script>
+
+<script id="cdataReplaceWith">
+{
+  const doc = new Document();
+  const root = doc.createElement('root');
+  doc.appendChild(root);
+
+  const cdata = doc.createCDATASection('old');
+  root.appendChild(cdata);
+
+  const replacement = doc.createTextNode('new');
+  cdata.replaceWith(replacement);
+
+  testing.expectEqual(1, root.childNodes.length);
+  testing.expectEqual('new', root.childNodes[0].data);
+  testing.expectEqual(null, cdata.parentNode);
+}
+</script>
+
+<script id="cdataSiblingNavigation">
+{
+  const doc = new Document();
+  const root = doc.createElement('root');
+  doc.appendChild(root);
+
+  const elem1 = doc.createElement('first');
+  const cdata = doc.createCDATASection('middle');
+  const elem2 = doc.createElement('last');
+
+  root.appendChild(elem1);
+  root.appendChild(cdata);
+  root.appendChild(elem2);
+
+  testing.expectEqual('last', cdata.nextElementSibling.tagName);
+  testing.expectEqual('first', cdata.previousElementSibling.tagName);
+}
+</script>
+
+<script id="cdataEmptyString">
+{
+  const doc = new Document();
+  const cdata = doc.createCDATASection('');
+
+  testing.expectEqual('', cdata.data);
+  testing.expectEqual(0, cdata.length);
+}
+</script>

src/browser/tests/cdata/character_data.html

@@ -0,0 +1,730 @@
+<!DOCTYPE html>
+<script src="../testing.js"></script>
+
+<div id="container"></div>
+
+<script id="lengthProperty">
+{
+  // length property
+  const text = document.createTextNode('Hello');
+  testing.expectEqual(5, text.length);
+  testing.expectEqual(5, text.data.length);
+
+  const empty = document.createTextNode('');
+  testing.expectEqual(0, empty.length);
+
+  const comment = document.createComment('test comment');
+  testing.expectEqual(12, comment.length);
+}
+</script>
+
+<script id="appendDataBasic">
+{
+  // appendData basic
+  const text = document.createTextNode('Hello');
+  text.appendData(' World');
+  testing.expectEqual('Hello World', text.data);
+  testing.expectEqual(11, text.length);
+}
+</script>
+
+<script id="appendDataEmpty">
+{
+  // appendData to empty
+  const text = document.createTextNode('');
+  text.appendData('First');
+  testing.expectEqual('First', text.data);
+
+  // appendData empty string
+  text.appendData('');
+  testing.expectEqual('First', text.data);
+}
+</script>
+
+<script id="deleteDataBasic">
+{
+  // deleteData from middle
+  const text = document.createTextNode('Hello World');
+  text.deleteData(5, 6); // Remove ' World'
+  testing.expectEqual('Hello', text.data);
+  testing.expectEqual(5, text.length);
+}
+</script>
+
+<script id="deleteDataStart">
+{
+  // deleteData from start
+  const text = document.createTextNode('Hello World');
+  text.deleteData(0, 6); // Remove 'Hello '
+  testing.expectEqual('World', text.data);
+}
+</script>
+
+<script id="deleteDataEnd">
+{
+  // deleteData from end
+  const text = document.createTextNode('Hello World');
+  text.deleteData(5, 100); // Remove ' World' (count exceeds length)
+  testing.expectEqual('Hello', text.data);
+}
+</script>
+
+<script id="deleteDataAll">
+{
+  // deleteData everything
+  const text = document.createTextNode('Hello');
+  text.deleteData(0, 5);
+  testing.expectEqual('', text.data);
+  testing.expectEqual(0, text.length);
+}
+</script>
+
+<script id="deleteDataZeroCount">
+{
+  // deleteData with count=0
+  const text = document.createTextNode('Hello');
+  text.deleteData(2, 0);
+  testing.expectEqual('Hello', text.data);
+}
+</script>
+
+<script id="deleteDataInvalidOffset">
+{
+  // deleteData with invalid offset
+  const text = document.createTextNode('Hello');
+  testing.expectError('IndexSizeError: Index or size is negative or greater than the allowed amount', () => text.deleteData(10, 5));
+  testing.expectEqual('Hello', text.data); // unchanged
+}
+</script>
+
+<script id="insertDataMiddle">
+{
+  // insertData in middle
+  const text = document.createTextNode('Hello');
+  text.insertData(5, ' World');
+  testing.expectEqual('Hello World', text.data);
+}
+</script>
+
+<script id="insertDataStart">
+{
+  // insertData at start
+  const text = document.createTextNode('World');
+  text.insertData(0, 'Hello ');
+  testing.expectEqual('Hello World', text.data);
+}
+</script>
+
+<script id="insertDataEnd">
+{
+  // insertData at end
+  const text = document.createTextNode('Hello');
+  text.insertData(5, ' World');
+  testing.expectEqual('Hello World', text.data);
+}
+</script>
+
+<script id="insertDataEmpty">
+{
+  // insertData into empty
+  const text = document.createTextNode('');
+  text.insertData(0, 'Hello');
+  testing.expectEqual('Hello', text.data);
+}
+</script>
+
+<script id="insertDataInvalidOffset">
+{
+  // insertData with invalid offset
+  const text = document.createTextNode('Hello');
+  testing.expectError('IndexSizeError: Index or size is negative or greater than the allowed amount', () => text.insertData(10, 'X'));
+  testing.expectEqual('Hello', text.data);
+}
+</script>
+
+<script id="replaceDataBasic">
+{
+  // replaceData basic
+  const text = document.createTextNode('Hello World');
+  text.replaceData(6, 5, 'Universe');
+  testing.expectEqual('Hello Universe', text.data);
+}
+</script>
+
+<script id="replaceDataShorter">
+{
+  // replaceData with shorter string
+  const text = document.createTextNode('Hello World');
+  text.replaceData(6, 5, 'Hi');
+  testing.expectEqual('Hello Hi', text.data);
+}
+</script>
+
+<script id="replaceDataLonger">
+{
+  // replaceData with longer string
+  const text = document.createTextNode('Hello Hi');
+  text.replaceData(6, 2, 'World');
+  testing.expectEqual('Hello World', text.data);
+}
+</script>
+
+<script id="replaceDataExceedingCount">
+{
+  // replaceData with count exceeding length
+  const text = document.createTextNode('Hello World');
+  text.replaceData(6, 100, 'Everyone');
+  testing.expectEqual('Hello Everyone', text.data);
+}
+</script>
+
+<script id="replaceDataZeroCount">
+{
+  // replaceData with count=0 (acts like insert)
+  const text = document.createTextNode('Hello World');
+  text.replaceData(5, 0, '!!!');
+  testing.expectEqual('Hello!!! World', text.data);
+}
+</script>
+
+<script id="substringDataBasic">
+{
+  // substringData basic
+  const text = document.createTextNode('Hello World');
+  const sub = text.substringData(0, 5);
+  testing.expectEqual('Hello', sub);
+  testing.expectEqual('Hello World', text.data); // original unchanged
+}
+</script>
+
+<script id="substringDataMiddle">
+{
+  // substringData from middle
+  const text = document.createTextNode('Hello World');
+  const sub = text.substringData(6, 5);
+  testing.expectEqual('World', sub);
+}
+</script>
+
+<script id="substringDataExceedingCount">
+{
+  // substringData with count exceeding length
+  const text = document.createTextNode('Hello World');
+  const sub = text.substringData(6, 100);
+  testing.expectEqual('World', sub);
+}
+</script>
+
+<script id="substringDataZeroCount">
+{
+  // substringData with count=0
+  const text = document.createTextNode('Hello');
+  const sub = text.substringData(0, 0);
+  testing.expectEqual('', sub);
+}
+</script>
+
+<script id="substringDataInvalidOffset">
+{
+  // substringData with invalid offset
+  const text = document.createTextNode('Hello');
+  testing.expectError('IndexSizeError: Index or size is negative or greater than the allowed amount', () => text.substringData(10, 5));
+}
+</script>
+
+<script id="commentCharacterData">
+{
+  // CharacterData methods work on comments too
+  const comment = document.createComment('Hello');
+
+  comment.appendData(' World');
+  testing.expectEqual('Hello World', comment.data);
+
+  comment.deleteData(5, 6);
+  testing.expectEqual('Hello', comment.data);
+
+  comment.insertData(0, 'Start: ');
+  testing.expectEqual('Start: Hello', comment.data);
+
+  comment.replaceData(0, 7, 'End: ');
+  testing.expectEqual('End: Hello', comment.data);
+
+  const sub = comment.substringData(5, 5);
+  testing.expectEqual('Hello', sub);
+}
+</script>
+
+<script id="dataChangeNotifications">
+{
+  // Verify data changes are reflected in DOM
+  const container = $('#container');
+  container.innerHTML = '';
+
+  const text = document.createTextNode('Original');
+  container.appendChild(text);
+
+  text.appendData(' Text');
+  testing.expectEqual('Original Text', container.textContent);
+
+  text.deleteData(0, 9);
+  testing.expectEqual('Text', container.textContent);
+
+  text.data = 'Changed';
+  testing.expectEqual('Changed', container.textContent);
+}
+</script>
+
+<script id="removeWithSiblings">
+{
+  // remove() when node has siblings
+  const container = $('#container');
+  container.innerHTML = '';
+
+  const text1 = document.createTextNode('A');
+  const text2 = document.createTextNode('B');
+  const text3 = document.createTextNode('C');
+  container.appendChild(text1);
+  container.appendChild(text2);
+  container.appendChild(text3);
+
+  testing.expectEqual(3, container.childNodes.length);
+  testing.expectEqual('ABC', container.textContent);
+
+  text2.remove();
+
+  testing.expectEqual(2, container.childNodes.length);
+  testing.expectEqual('AC', container.textContent);
+  testing.expectEqual(null, text2.parentNode);
+  testing.expectEqual(text3, text1.nextSibling);
+}
+</script>
+
+<script id="removeOnlyChild">
+{
+  // remove() when node is only child
+  const container = $('#container');
+  container.innerHTML = '';
+
+  const text = document.createTextNode('Only');
+  container.appendChild(text);
+
+  testing.expectEqual(1, container.childNodes.length);
+
+  text.remove();
+
+  testing.expectEqual(0, container.childNodes.length);
+  testing.expectEqual(null, text.parentNode);
+}
+</script>
+
+<script id="removeNoParent">
+{
+  // remove() when node has no parent (should do nothing)
+  const text = document.createTextNode('Orphan');
+  text.remove(); // Should not throw
+  testing.expectEqual(null, text.parentNode);
+}
+</script>
+
+<script id="removeCommentWithElementSiblings">
+{
+  // remove() comment with element siblings
+  const container = $('#container');
+  container.innerHTML = '';
+
+  const div1 = document.createElement('div');
+  div1.textContent = 'First';
+  const comment = document.createComment('middle');
+  const div2 = document.createElement('div');
+  div2.textContent = 'Last';
+
+  container.appendChild(div1);
+  container.appendChild(comment);
+  container.appendChild(div2);
+
+  testing.expectEqual(3, container.childNodes.length);
+
+  comment.remove();
+
+  testing.expectEqual(2, container.childNodes.length);
+  testing.expectEqual('DIV', container.childNodes[0].tagName);
+  testing.expectEqual('DIV', container.childNodes[1].tagName);
+  testing.expectEqual(div2, div1.nextSibling);
+}
+</script>
+
+<script id="beforeWithSiblings">
+{
+  // before() when node has siblings
+  const container = $('#container');
+  container.innerHTML = '';
+
+  const text1 = document.createTextNode('A');
+  const text2 = document.createTextNode('C');
+  container.appendChild(text1);
+  container.appendChild(text2);
+
+  const textB = document.createTextNode('B');
+  text2.before(textB);
+
+  testing.expectEqual(3, container.childNodes.length);
+  testing.expectEqual('ABC', container.textContent);
+  testing.expectEqual(textB, text1.nextSibling);
+  testing.expectEqual(text2, textB.nextSibling);
+}
+</script>
+
+<script id="beforeMultipleNodes">
+{
+  // before() with multiple nodes
+  const container = $('#container');
+  container.innerHTML = '';
+
+  const text = document.createTextNode('Z');
+  container.appendChild(text);
+
+  const text1 = document.createTextNode('A');
+  const text2 = document.createTextNode('B');
+  const text3 = document.createTextNode('C');
+
+  text.before(text1, text2, text3);
+
+  testing.expectEqual(4, container.childNodes.length);
+  testing.expectEqual('ABCZ', container.textContent);
+}
+</script>
+
+<script id="beforeMixedTypes">
+{
+  // before() with mixed node types
+  const container = $('#container');
+  container.innerHTML = '';
+
+  const target = document.createTextNode('Target');
+  container.appendChild(target);
+
+  const elem = document.createElement('span');
+  elem.textContent = 'E';
+  const text = document.createTextNode('T');
+  const comment = document.createComment('C');
+
+  target.before(elem, text, comment);
+
+  testing.expectEqual(4, container.childNodes.length);
+  testing.expectEqual(1, container.childNodes[0].nodeType); // ELEMENT_NODE
+  testing.expectEqual(3, container.childNodes[1].nodeType); // TEXT_NODE
+  testing.expectEqual(8, container.childNodes[2].nodeType); // COMMENT_NODE
+  testing.expectEqual(3, container.childNodes[3].nodeType); // TEXT_NODE (target)
+}
+</script>
+
+<script id="beforeNoParent">
+{
+  // before() when node has no parent (should do nothing)
+  const orphan = document.createTextNode('Orphan');
+  const text = document.createTextNode('Test');
+  orphan.before(text);
+
+  testing.expectEqual(null, orphan.parentNode);
+  testing.expectEqual(null, text.parentNode);
+}
+</script>
+
+<script id="beforeOnlyChild">
+{
+  // before() when target is only child
+  const container = $('#container');
+  container.innerHTML = '';
+
+  const target = document.createTextNode('B');
+  container.appendChild(target);
+
+  const textA = document.createTextNode('A');
+  target.before(textA);
+
+  testing.expectEqual(2, container.childNodes.length);
+  testing.expectEqual('AB', container.textContent);
+  testing.expectEqual(textA, container.firstChild);
+  testing.expectEqual(target, textA.nextSibling);
+}
+</script>
+
+<script id="afterWithSiblings">
+{
+  // after() when node has siblings
+  const container = $('#container');
+  container.innerHTML = '';
+
+  const text1 = document.createTextNode('A');
+  const text2 = document.createTextNode('C');
+  container.appendChild(text1);
+  container.appendChild(text2);
+
+  const textB = document.createTextNode('B');
+  text1.after(textB);
+
+  testing.expectEqual(3, container.childNodes.length);
+  testing.expectEqual('ABC', container.textContent);
+  testing.expectEqual(textB, text1.nextSibling);
+  testing.expectEqual(text2, textB.nextSibling);
+}
+</script>
+
+<script id="afterMultipleNodes">
+{
+  // after() with multiple nodes
+  const container = $('#container');
+  container.innerHTML = '';
+
+  const text = document.createTextNode('A');
+  container.appendChild(text);
+
+  const text1 = document.createTextNode('B');
+  const text2 = document.createTextNode('C');
+  const text3 = document.createTextNode('D');
+
+  text.after(text1, text2, text3);
+
+  testing.expectEqual(4, container.childNodes.length);
+  testing.expectEqual('ABCD', container.textContent);
+}
+</script>
+
+<script id="afterMixedTypes">
+{
+  // after() with mixed node types
+  const container = $('#container');
+  container.innerHTML = '';
+
+  const target = document.createTextNode('Start');
+  container.appendChild(target);
+
+  const elem = document.createElement('div');
+  elem.textContent = 'E';
+  const comment = document.createComment('comment');
+  const text = document.createTextNode('T');
+
+  target.after(elem, comment, text);
+
+  testing.expectEqual(4, container.childNodes.length);
+  testing.expectEqual(3, container.childNodes[0].nodeType); // TEXT_NODE (target)
+  testing.expectEqual(1, container.childNodes[1].nodeType); // ELEMENT_NODE
+  testing.expectEqual(8, container.childNodes[2].nodeType); // COMMENT_NODE
+  testing.expectEqual(3, container.childNodes[3].nodeType); // TEXT_NODE
+}
+</script>
+
+<script id="afterNoParent">
+{
+  // after() when node has no parent (should do nothing)
+  const orphan = document.createTextNode('Orphan');
+  const text = document.createTextNode('Test');
+  orphan.after(text);
+
+  testing.expectEqual(null, orphan.parentNode);
+  testing.expectEqual(null, text.parentNode);
+}
+</script>
+
+<script id="afterAsLastChild">
+{
+  // after() when target is last child
+  const container = $('#container');
+  container.innerHTML = '';
+
+  const target = document.createTextNode('A');
+  container.appendChild(target);
+
+  const textB = document.createTextNode('B');
+  target.after(textB);
+
+  testing.expectEqual(2, container.childNodes.length);
+  testing.expectEqual('AB', container.textContent);
+  testing.expectEqual(target, container.firstChild);
+  testing.expectEqual(textB, container.lastChild);
+  testing.expectEqual(null, textB.nextSibling);
+}
+</script>
+
+<script id="replaceWithSingleNode">
+{
+  // replaceWith() with single node
+  const container = $('#container');
+  container.innerHTML = '';
+
+  const old = document.createTextNode('Old');
+  container.appendChild(old);
+
+  const replacement = document.createTextNode('New');
+  old.replaceWith(replacement);
+
+  testing.expectEqual(1, container.childNodes.length);
+  testing.expectEqual('New', container.textContent);
+  testing.expectEqual(null, old.parentNode);
+  testing.expectEqual(container, replacement.parentNode);
+}
+</script>
+
+<script id="replaceWithMultipleNodes">
+{
+  // replaceWith() with multiple nodes
+  const container = $('#container');
+  container.innerHTML = '';
+
+  const old = document.createTextNode('X');
+  container.appendChild(old);
+
+  const text1 = document.createTextNode('A');
+  const text2 = document.createTextNode('B');
+  const text3 = document.createTextNode('C');
+
+  old.replaceWith(text1, text2, text3);
+
+  testing.expectEqual(3, container.childNodes.length);
+  testing.expectEqual('ABC', container.textContent);
+  testing.expectEqual(null, old.parentNode);
+}
+</script>
+
+<script id="replaceWithOnlyChild">
+{
+  // replaceWith() when target is only child
+  const container = $('#container');
+  container.innerHTML = '';
+
+  const old = document.createTextNode('Only');
+  container.appendChild(old);
+
+  testing.expectEqual(1, container.childNodes.length);
+
+  const replacement = document.createTextNode('Replaced');
+  old.replaceWith(replacement);
+
+  testing.expectEqual(1, container.childNodes.length);
+  testing.expectEqual('Replaced', container.textContent);
+  testing.expectEqual(replacement, container.firstChild);
+}
+</script>
+
+<script id="replaceWithBetweenSiblings">
+{
+  // replaceWith() when node has siblings on both sides
+  const container = $('#container');
+  container.innerHTML = '';
+
+  const text1 = document.createTextNode('A');
+  const text2 = document.createTextNode('X');
+  const text3 = document.createTextNode('C');
+  container.appendChild(text1);
+  container.appendChild(text2);
+  container.appendChild(text3);
+
+  const replacement = document.createTextNode('B');
+  text2.replaceWith(replacement);
+
+  testing.expectEqual(3, container.childNodes.length);
+  testing.expectEqual('ABC', container.textContent);
+  testing.expectEqual(replacement, text1.nextSibling);
+  testing.expectEqual(text3, replacement.nextSibling);
+}
+</script>
+
+<script id="replaceWithMixedTypes">
+{
+  // replaceWith() with mixed node types
+  const container = $('#container');
+  container.innerHTML = '';
+
+  const old = document.createComment('old');
+  container.appendChild(old);
+
+  const elem = document.createElement('span');
+  elem.textContent = 'E';
+  const text = document.createTextNode('T');
+  const comment = document.createComment('C');
+
+  old.replaceWith(elem, text, comment);
+
+  testing.expectEqual(3, container.childNodes.length);
+  testing.expectEqual(1, container.childNodes[0].nodeType); // ELEMENT_NODE
+  testing.expectEqual(3, container.childNodes[1].nodeType); // TEXT_NODE
+  testing.expectEqual(8, container.childNodes[2].nodeType); // COMMENT_NODE
+  testing.expectEqual(null, old.parentNode);
+}
+</script>
+
+<script id="nextElementSiblingText">
+{
+  // nextElementSibling on text node with element siblings
+  const container = $('#container');
+  container.innerHTML = '';
+
+  const text1 = document.createTextNode('A');
+  const comment = document.createComment('comment');
+  const div = document.createElement('div');
+  div.id = 'found';
+  const text2 = document.createTextNode('B');
+
+  container.appendChild(text1);
+  container.appendChild(comment);
+  container.appendChild(div);
+  container.appendChild(text2);
+
+  testing.expectEqual('found', text1.nextElementSibling.id);
+  testing.expectEqual('found', comment.nextElementSibling.id);
+  testing.expectEqual(null, text2.nextElementSibling);
+}
+</script>
+
+<script id="nextElementSiblingNoElement">
+{
+  // nextElementSibling when there's no element sibling
+  const container = $('#container');
+  container.innerHTML = '';
+
+  const text = document.createTextNode('A');
+  const comment = document.createComment('B');
+  container.appendChild(text);
+  container.appendChild(comment);
+
+  testing.expectEqual(null, text.nextElementSibling);
+  testing.expectEqual(null, comment.nextElementSibling);
+}
+</script>
+
+<script id="previousElementSiblingComment">
+{
+  // previousElementSibling on comment with element siblings
+  const container = $('#container');
+  container.innerHTML = '';
+
+  const div = document.createElement('div');
+  div.id = 'found';
+  const text = document.createTextNode('text');
+  const comment = document.createComment('comment');
+
+  container.appendChild(div);
+  container.appendChild(text);
+  container.appendChild(comment);
+
+  testing.expectEqual('found', text.previousElementSibling.id);
+  testing.expectEqual('found', comment.previousElementSibling.id);
+  testing.expectEqual(null, div.previousElementSibling);
+}
+</script>
+
+<script id="previousElementSiblingNoElement">
+{
+  // previousElementSibling when there's no element sibling
+  const container = $('#container');
+  container.innerHTML = '';
+
+  const text = document.createTextNode('A');
+  const comment = document.createComment('B');
+  container.appendChild(text);
+  container.appendChild(comment);
+
+  testing.expectEqual(null, text.previousElementSibling);
+  testing.expectEqual(null, comment.previousElementSibling);
+}
+</script>

src/browser/tests/cdata/comment.html

@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<script src="../testing.js"></script>
+
+<script id=comment>
+  testing.expectEqual('', new Comment().data);
+  testing.expectEqual('over 9000! ', new Comment('over 9000! ').data);
+</script>

src/browser/tests/cdata/data.html

@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<script src="../testing.js"></script>
+
+<div id=a><!-- spice --></div>
+<div id=b>flow</div>
+
+<script id=data>
+  testing.expectEqual(' spice ', $('#a').firstChild.data);
+  testing.expectEqual('flow', $('#b').firstChild.data);
+</script>

src/browser/tests/cdata/text/text.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<a id="link" href="foo" class="ok">OK</a>
+
+<script src="../../testing.js"></script>
+<script id=text>
+  let t = new Text('foo');
+  testing.expectEqual('foo', t.data);
+
+  let emptyt = new Text();
+  testing.expectEqual('', emptyt.data);
+
+  let text = $('#link').firstChild;
+  testing.expectEqual('OK', text.wholeText);
+
+  text.data = 'OK modified';
+  let split = text.splitText('OK'.length);
+  testing.expectEqual(' modified', split.data);
+  testing.expectEqual('OK', text.data);
+</script>

src/browser/tests/cdp/dom1.html

@@ -0,0 +1 @@
+<p>1</p> <p>2</p>

src/browser/tests/cdp/dom2.html

@@ -0,0 +1 @@
+<div><p>2</p></div>

src/browser/tests/cdp/dom3.html

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Test Page</title>
+</head>
+<body>
+    <h1>Test Page</h1>
+    <nav>
+        <a href="/page1" id="link1">First Link</a>
+        <a href="/page2" id="link2">Second Link</a>
+    </nav>
+    <form id="testForm" action="/submit" method="post">
+        <label for="username">Username:</label>
+        <input type="text" id="username" name="username" placeholder="Enter username">
+
+        <label for="email">Email:</label>
+        <input type="email" id="email" name="email" placeholder="Enter email">
+
+        <label for="password">Password:</label>
+        <input type="password" id="password" name="password">
+
+        <button type="submit">Submit</button>
+    </form>
+</body>
+</html>

src/browser/tests/cdp/registry1.html

@@ -0,0 +1 @@
+<a id=a1>link1</a><div id=d2><p>other</p></div>

src/browser/tests/cdp/registry2.html

@@ -0,0 +1 @@
+<a id=a1></a><a id=a2></a>

src/browser/tests/cdp/registry3.html

@@ -0,0 +1 @@
+<a id=a1></a><div id=d2><a id=a2></a></div>

src/browser/tests/collections/radio_node_list.html

@@ -0,0 +1,213 @@
+<!DOCTYPE html>
+<script src="../testing.js"></script>
+
+<!-- Test fixtures for RadioNodeList -->
+<form id="test_form">
+  <input type="radio" name="color" value="red">
+  <input type="radio" name="color" value="green">
+  <input type="radio" name="color" value="blue">
+  <input type="text" name="single_field" value="test">
+</form>
+
+<script id="multiple_returns_radio_node_list">
+{
+  const form = $('#test_form');
+  const result = form.elements.namedItem('color');
+
+  testing.expectEqual('RadioNodeList', result.constructor.name);
+}
+</script>
+
+<script id="single_returns_element">
+{
+  const form = $('#test_form');
+  const result = form.elements.namedItem('single_field');
+
+  testing.expectEqual('HTMLInputElement', result.constructor.name);
+  testing.expectEqual('single_field', result.name);
+}
+</script>
+
+<script id="none_returns_null">
+{
+  const form = $('#test_form');
+  const result = form.elements.namedItem('nonexistent');
+
+  testing.expectEqual(null, result);
+}
+</script>
+
+<script id="length">
+{
+  const form = $('#test_form');
+  const radios = form.elements.namedItem('color');
+
+  testing.expectEqual(3, radios.length);
+}
+</script>
+
+<script id="indexed_access">
+{
+  const form = $('#test_form');
+  const radios = form.elements.namedItem('color');
+
+  testing.expectEqual('red', radios[0].value);
+  testing.expectEqual('green', radios[1].value);
+  testing.expectEqual('blue', radios[2].value);
+}
+</script>
+
+<script id="value_getter_no_checked">
+{
+  const form = $('#test_form');
+  const radios = form.elements.namedItem('color');
+
+  testing.expectEqual('', radios.value);
+}
+</script>
+
+<script id="value_getter_with_checked">
+{
+  const form = $('#test_form');
+  const inputs = form.querySelectorAll('input[name="color"]');
+  inputs[1].checked = true;
+
+  const radios = form.elements.namedItem('color');
+  testing.expectEqual('green', radios.value);
+}
+</script>
+
+<script id="value_getter_on_default">
+{
+  const form = document.createElement('form');
+  const r1 = document.createElement('input');
+  r1.type = 'radio';
+  r1.name = 'test';
+  r1.checked = true;
+  // no value attribute
+
+  const r2 = document.createElement('input');
+  r2.type = 'radio';
+  r2.name = 'test';
+  // no value attribute
+
+  form.appendChild(r1);
+  form.appendChild(r2);
+  document.body.appendChild(form);
+
+  // Multiple elements with same name returns RadioNodeList
+  const radios = form.elements.namedItem('test');
+  testing.expectEqual('RadioNodeList', radios.constructor.name);
+  testing.expectEqual('on', radios.value); // Checked radio with no value returns "on"
+
+  form.remove();
+}
+</script>
+
+<script id="value_setter">
+{
+  const form = $('#test_form');
+  const radios = form.elements.namedItem('color');
+  const inputs = form.querySelectorAll('input[name="color"]');
+
+  radios.value = 'blue';
+
+  testing.expectEqual(false, inputs[0].checked);
+  testing.expectEqual(false, inputs[1].checked);
+  testing.expectEqual(true, inputs[2].checked);
+  testing.expectEqual('blue', radios.value);
+}
+</script>
+
+<script id="value_setter_on">
+{
+  const form = document.createElement('form');
+  const r1 = document.createElement('input');
+  r1.type = 'radio';
+  r1.name = 'test';
+  // no value attribute
+
+  const r2 = document.createElement('input');
+  r2.type = 'radio';
+  r2.name = 'test';
+  r2.value = 'on';
+
+  const r3 = document.createElement('input');
+  r3.type = 'radio';
+  r3.name = 'test';
+  r3.value = 'other';
+
+  form.appendChild(r1);
+  form.appendChild(r2);
+  form.appendChild(r3);
+  document.body.appendChild(form);
+
+  const radios = form.elements.namedItem('test');
+  radios.value = 'on';
+
+  // Should check first match (r1 with no value attribute)
+  testing.expectEqual(true, r1.checked);
+  testing.expectEqual(false, r2.checked);
+  testing.expectEqual(false, r3.checked);
+
+  form.remove();
+}
+</script>
+
+<script id="live_collection">
+{
+  const form = document.createElement('form');
+  const r1 = document.createElement('input');
+  r1.type = 'radio';
+  r1.name = 'dynamic';
+  r1.value = 'a';
+
+  const r2 = document.createElement('input');
+  r2.type = 'radio';
+  r2.name = 'dynamic';
+  r2.value = 'b';
+
+  form.appendChild(r1);
+  form.appendChild(r2);
+  document.body.appendChild(form);
+
+  const radios = form.elements.namedItem('dynamic');
+  testing.expectEqual('RadioNodeList', radios.constructor.name);
+  testing.expectEqual(2, radios.length);
+
+  const r3 = document.createElement('input');
+  r3.type = 'radio';
+  r3.name = 'dynamic';
+  r3.value = 'c';
+  form.appendChild(r3);
+
+  testing.expectEqual(3, radios.length);
+  testing.expectEqual('c', radios[2].value);
+
+  r1.remove();
+  testing.expectEqual(2, radios.length);
+  testing.expectEqual('b', radios[0].value);
+
+  form.remove();
+}
+</script>
+
+<!-- Test non-radio elements with same name -->
+<form id="mixed_form">
+  <input type="text" name="mixed" value="text1">
+  <input type="text" name="mixed" value="text2">
+</form>
+
+<script id="non_radio_elements">
+{
+  const form = $('#mixed_form');
+  const result = form.elements.namedItem('mixed');
+
+  // Should still return RadioNodeList even for non-radio elements
+  testing.expectEqual('RadioNodeList', result.constructor.name);
+  testing.expectEqual(2, result.length);
+
+  // getValue should return "" for non-radio elements
+  testing.expectEqual('', result.value);
+}
+</script>

src/browser/tests/crypto.html

@@ -0,0 +1,121 @@
+<!DOCTYPE html>
+<script src="testing.js"></script>
+
+<script id=getRandomValues>
+  function isRandom(ta) {
+    let uniq = new Set(Array.from(ta));
+    testing.expectEqual(true, (uniq.size / ta.length) * 100 > 0.7)
+  }
+  {
+    let tu8a = new Uint8Array(100)
+    testing.expectEqual(tu8a, crypto.getRandomValues(tu8a))
+    isRandom(tu8a)
+
+    let ti8a = new Int8Array(100)
+    testing.expectEqual(ti8a, crypto.getRandomValues(ti8a))
+    isRandom(ti8a)
+  }
+
+  // {
+  //   let tu16a = new Uint16Array(100)
+  //   testing.expectEqual(tu16a, crypto.getRandomValues(tu16a))
+  //   isRandom(tu16a)
+
+  //   let ti16a = new Int16Array(100)
+  //   testing.expectEqual(ti16a, crypto.getRandomValues(ti16a))
+  //   isRandom(ti16a)
+  // }
+
+  // {
+  //   let tu32a = new Uint32Array(100)
+  //   testing.expectEqual(tu32a, crypto.getRandomValues(tu32a))
+  //   isRandom(tu32a)
+
+  //   let ti32a = new Int32Array(100)
+  //   testing.expectEqual(ti32a, crypto.getRandomValues(ti32a))
+  //   isRandom(ti32a)
+  // }
+
+  // {
+  //   let tu64a = new BigUint64Array(100)
+  //   testing.expectEqual(tu64a, crypto.getRandomValues(tu64a))
+  //   isRandom(tu64a)
+
+  //   let ti64a = new BigInt64Array(100)
+  //   testing.expectEqual(ti64a, crypto.getRandomValues(ti64a))
+  //   isRandom(ti64a)
+  // }
+</script>
+
+<!-- <script id="randomUUID">
+  const uuid = crypto.randomUUID();
+  testing.expectEqual('string', typeof uuid);
+  testing.expectEqual(36, uuid.length);
+  const regex = /^[0-9a-f]{8}-[0-9a-f]{4}-4[0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i;
+  testing.expectEqual(true, regex.test(uuid));
+</script> -->
+
+<script id=SubtleCrypto>
+  testing.expectEqual(true, crypto.subtle instanceof SubtleCrypto);
+</script>
+
+<script id=sign-and-verify-hmac>
+  testing.async(async () => {
+    let key = await crypto.subtle.generateKey(
+      {
+        name: "HMAC",
+        hash: { name: "SHA-512" },
+      },
+      true,
+      ["sign", "verify"],
+    );
+
+    testing.expectEqual(true, key instanceof CryptoKey);
+
+    const raw = await crypto.subtle.exportKey("raw", key);
+    testing.expectEqual(128, raw.byteLength);
+
+    const encoder = new TextEncoder();
+
+    const signature = await crypto.subtle.sign(
+      "HMAC",
+      key,
+      encoder.encode("Hello, world!")
+    );
+
+    testing.expectEqual(true, signature instanceof ArrayBuffer);
+
+    const result = await window.crypto.subtle.verify(
+      { name: "HMAC" },
+      key,
+      signature,
+      encoder.encode("Hello, world!")
+    );
+
+    testing.expectEqual(true, result);
+  });
+</script>
+
+<script id=derive-shared-key-x25519>
+  testing.async(async () => {
+    const { privateKey, publicKey } = await crypto.subtle.generateKey(
+      { name: "X25519" },
+      true,
+      ["deriveBits"],
+    );
+
+    testing.expectEqual(true, privateKey instanceof CryptoKey);
+    testing.expectEqual(true, publicKey instanceof CryptoKey);
+
+    const sharedKey = await crypto.subtle.deriveBits(
+      {
+        name: "X25519",
+        public: publicKey,
+      },
+      privateKey,
+      128,
+    );
+
+    testing.expectEqual(16, sharedKey.byteLength);
+  });
+</script>

src/browser/tests/css.html

@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<script src="testing.js"></script>
+
+<script id="exists">
+  testing.expectEqual('object', typeof CSS);
+  testing.expectEqual('function', typeof CSS.escape);
+  testing.expectEqual('function', typeof CSS.supports);
+</script>
+
+<script id="escape_basic">
+  {
+    testing.expectEqual('hello', CSS.escape('hello'));
+    testing.expectEqual('world123', CSS.escape('world123'));
+    testing.expectEqual('foo-bar', CSS.escape('foo-bar'));
+    testing.expectEqual('_test', CSS.escape('_test'));
+  }
+</script>
+
+<script id="escape_first_character">
+  {
+    testing.expectEqual('\\30 abc', CSS.escape('0abc'));
+    testing.expectEqual('\\31 23', CSS.escape('123'));
+    testing.expectEqual('\\-test', CSS.escape('-test'));
+    testing.expectEqual('\\--test', CSS.escape('--test'));
+  }
+</script>
+
+<script id="escape_special_characters">
+  {
+    testing.expectEqual('hello\\ world', CSS.escape('hello world'));
+    testing.expectEqual('test\\!', CSS.escape('test!'));
+    testing.expectEqual('foo\\#bar', CSS.escape('foo#bar'));
+    testing.expectEqual('a\\(b\\)', CSS.escape('a(b)'));
+    testing.expectEqual('test\\@example', CSS.escape('test@example'));
+    testing.expectEqual('a\\[b\\]', CSS.escape('a[b]'));
+    testing.expectEqual('a\\{b\\}', CSS.escape('a{b}'));
+    testing.expectEqual('test\\:value', CSS.escape('test:value'));
+    testing.expectEqual('a\\.b', CSS.escape('a.b'));
+    testing.expectEqual('a\\,b', CSS.escape('a,b'));
+  }
+</script>
+
+<script id="escape_quotes">
+  {
+    testing.expectEqual('test\\"value', CSS.escape('test"value'));
+    testing.expectEqual('test\\\'value', CSS.escape("test'value"));
+  }
+</script>
+
+<script id="supports_basic">
+  {
+    testing.expectEqual(true, CSS.supports('display', 'block'));
+    testing.expectEqual(true, CSS.supports('position', 'relative'));
+    testing.expectEqual(true, CSS.supports('width', '100px'));
+    testing.expectEqual(true, CSS.supports('color', 'red'));
+  }
+</script>
+
+<script id="supports_common_properties">
+  {
+    testing.expectEqual(true, CSS.supports('margin', '10px'));
+    testing.expectEqual(true, CSS.supports('padding', '5px'));
+    testing.expectEqual(true, CSS.supports('border', '1px solid black'));
+    testing.expectEqual(true, CSS.supports('background-color', 'blue'));
+    testing.expectEqual(true, CSS.supports('font-size', '16px'));
+    testing.expectEqual(true, CSS.supports('opacity', '0.5'));
+    testing.expectEqual(true, CSS.supports('z-index', '10'));
+  }
+</script>

src/browser/tests/css/media_query_list.html

@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<head>
+  <script src="../testing.js"></script>
+</head>
+
+<body>
+</body>
+
+<script id=matchMedia_basic>
+{
+  const mql = window.matchMedia('(min-width: 600px)');
+  testing.expectEqual('object', typeof mql);
+  testing.expectEqual('(min-width: 600px)', mql.media);
+  testing.expectEqual(false, mql.matches);
+}
+</script>
+
+<script id=matchMedia_different_queries>
+{
+  const mql1 = window.matchMedia('(max-width: 1024px)');
+  testing.expectEqual('(max-width: 1024px)', mql1.media);
+  testing.expectEqual(false, mql1.matches);
+
+  const mql2 = window.matchMedia('(prefers-color-scheme: dark)');
+  testing.expectEqual('(prefers-color-scheme: dark)', mql2.media);
+  testing.expectEqual(false, mql2.matches);
+}
+</script>
+
+<script id=matchMedia_event_target>
+{
+  const mql = window.matchMedia('(orientation: portrait)');
+  testing.expectEqual('function', typeof mql.addEventListener);
+  testing.expectEqual('function', typeof mql.removeEventListener);
+  testing.expectEqual('function', typeof mql.dispatchEvent);
+}
+</script>

src/browser/tests/css/stylesheet.html

@@ -0,0 +1,207 @@
+<!DOCTYPE html>
+<script src="../testing.js"></script>
+
+<script id="document_styleSheets">
+{
+    const sheets = document.styleSheets;
+    testing.expectTrue(sheets !== null);
+    testing.expectEqual(0, sheets.length);
+
+    // Should return same instance
+    const sheets2 = document.styleSheets;
+    testing.expectTrue(sheets === sheets2);
+}
+</script>
+
+<script id="CSSStyleSheet_basic">
+{
+    const sheets = document.styleSheets;
+    testing.expectEqual('StyleSheetList', sheets.constructor.name);
+
+    // Test indexed access on empty list
+    testing.expectEqual(undefined, sheets[0]);
+    testing.expectEqual(undefined, sheets[99]);
+}
+</script>
+
+<script id="CSSStyleDeclaration_setCssText_basic">
+{
+    const div = document.createElement('div');
+    const style = div.style;
+
+    // Set single property
+    style.cssText = 'color: red';
+    testing.expectEqual('red', style.getPropertyValue('color'));
+    testing.expectEqual(1, style.length);
+}
+</script>
+
+<script id="CSSStyleDeclaration_setCssText_multiple">
+{
+    const div = document.createElement('div');
+    const style = div.style;
+
+    // Set multiple properties
+    style.cssText = 'color: red; background: blue; margin: 10px';
+    testing.expectEqual('red', style.getPropertyValue('color'));
+    testing.expectEqual('blue', style.getPropertyValue('background'));
+    testing.expectEqual('10px', style.getPropertyValue('margin'));
+    testing.expectEqual(3, style.length);
+}
+</script>
+
+<script id="CSSStyleDeclaration_setCssText_important">
+{
+    const div = document.createElement('div');
+    const style = div.style;
+
+    // Set property with !important
+    style.cssText = 'color: red !important';
+    testing.expectEqual('red', style.getPropertyValue('color'));
+    testing.expectEqual('important', style.getPropertyPriority('color'));
+}
+</script>
+
+<script id="CSSStyleDeclaration_setCssText_important_multiple">
+{
+    const div = document.createElement('div');
+    const style = div.style;
+
+    // Mix of important and non-important
+    style.cssText = 'color: red !important; background: blue; margin: 10px !important';
+    testing.expectEqual('important', style.getPropertyPriority('color'));
+    testing.expectEqual('', style.getPropertyPriority('background'));
+    testing.expectEqual('important', style.getPropertyPriority('margin'));
+}
+</script>
+
+<script id="CSSStyleDeclaration_setCssText_whitespace">
+{
+    const div = document.createElement('div');
+    const style = div.style;
+
+    // Test whitespace handling
+    style.cssText = '  color  :  red  ;  background  :  blue  ';
+    testing.expectEqual('red', style.getPropertyValue('color'));
+    testing.expectEqual('blue', style.getPropertyValue('background'));
+}
+</script>
+
+<script id="CSSStyleDeclaration_setCssText_trailing_semicolon">
+{
+    const div = document.createElement('div');
+    const style = div.style;
+
+    // Trailing semicolon should be handled
+    style.cssText = 'color: red;';
+    testing.expectEqual('red', style.getPropertyValue('color'));
+    testing.expectEqual(1, style.length);
+}
+</script>
+
+<script id="CSSStyleDeclaration_setCssText_no_semicolon">
+{
+    const div = document.createElement('div');
+    const style = div.style;
+
+    // Single property without semicolon
+    style.cssText = 'color: red';
+    testing.expectEqual('red', style.getPropertyValue('color'));
+    testing.expectEqual(1, style.length);
+}
+</script>
+
+<script id="CSSStyleDeclaration_setCssText_empty_declarations">
+{
+    const div = document.createElement('div');
+    const style = div.style;
+
+    // Multiple semicolons should be ignored
+    style.cssText = 'color: red;;; background: blue';
+    testing.expectEqual('red', style.getPropertyValue('color'));
+    testing.expectEqual('blue', style.getPropertyValue('background'));
+    testing.expectEqual(2, style.length);
+}
+</script>
+
+<script id="CSSStyleDeclaration_setCssText_replace">
+{
+    const div = document.createElement('div');
+    const style = div.style;
+
+    // Set initial properties
+    style.cssText = 'color: red; background: blue';
+    testing.expectEqual(2, style.length);
+
+    // Replace with new properties
+    style.cssText = 'margin: 10px';
+    testing.expectEqual('', style.getPropertyValue('color'));
+    testing.expectEqual('', style.getPropertyValue('background'));
+    testing.expectEqual('10px', style.getPropertyValue('margin'));
+    testing.expectEqual(1, style.length);
+}
+</script>
+
+<script id="CSSStyleDeclaration_setCssText_clear">
+{
+    const div = document.createElement('div');
+    const style = div.style;
+
+    style.cssText = 'color: red; background: blue';
+    testing.expectEqual(2, style.length);
+
+    // Clear all properties
+    style.cssText = '';
+    testing.expectEqual(0, style.length);
+    testing.expectEqual('', style.getPropertyValue('color'));
+}
+</script>
+
+<script id="CSSStyleDeclaration_setCssText_colon_in_value">
+{
+    const div = document.createElement('div');
+    const style = div.style;
+
+    // URL value with colon
+    style.cssText = 'background: url(http://example.com/image.png)';
+    testing.expectEqual('url(http://example.com/image.png)', style.getPropertyValue('background'));
+}
+</script>
+
+<script id="CSSStyleDeclaration_setCssText_important_whitespace">
+{
+    const div = document.createElement('div');
+    const style = div.style;
+
+    // Various whitespace around !important
+    style.cssText = 'color: red!important';
+    testing.expectEqual('important', style.getPropertyPriority('color'));
+
+    style.cssText = 'color: red  !  important';
+    testing.expectEqual('important', style.getPropertyPriority('color'));
+}
+</script>
+
+<script id="CSSStyleDeclaration_setCssText_case_insensitive_property">
+{
+    const div = document.createElement('div');
+    const style = div.style;
+
+    // Property names should be normalized to lowercase
+    style.cssText = 'COLOR: red; BACKGROUND: blue';
+    testing.expectEqual('red', style.getPropertyValue('color'));
+    testing.expectEqual('blue', style.getPropertyValue('background'));
+}
+</script>
+
+<script id="CSSStyleDeclaration_setCssText_exclamation_not_important">
+{
+    const div = document.createElement('div');
+    const style = div.style;
+
+    // Exclamation mark without "important" should be kept in value
+    style.cssText = 'content: "hello!"';
+    testing.expectEqual('"hello!"', style.getPropertyValue('content'));
+    testing.expectEqual('', style.getPropertyPriority('content'));
+}
+</script>

src/browser/tests/custom_elements/attribute_changed.html

@@ -0,0 +1,165 @@
+<!DOCTYPE html>
+<body>
+<script src="../testing.js"></script>
+<script id="attribute_changed">
+{
+    let callbackCalls = [];
+
+    class MyElement extends HTMLElement {
+        static get observedAttributes() {
+            return ['data-foo', 'data-bar'];
+        }
+
+        attributeChangedCallback(name, oldValue, newValue) {
+            callbackCalls.push({ name, oldValue, newValue });
+        }
+    }
+
+    customElements.define('my-element', MyElement);
+
+    const el = document.createElement('my-element');
+    testing.expectEqual(0, callbackCalls.length);
+
+    el.setAttribute('data-foo', 'value1');
+    testing.expectEqual(1, callbackCalls.length);
+    testing.expectEqual('data-foo', callbackCalls[0].name);
+    testing.expectEqual(null, callbackCalls[0].oldValue);
+    testing.expectEqual('value1', callbackCalls[0].newValue);
+
+    el.setAttribute('data-foo', 'value2');
+    testing.expectEqual(2, callbackCalls.length);
+    testing.expectEqual('data-foo', callbackCalls[1].name);
+    testing.expectEqual('value1', callbackCalls[1].oldValue);
+    testing.expectEqual('value2', callbackCalls[1].newValue);
+
+    el.setAttribute('data-bar', 'bar-value');
+    testing.expectEqual(3, callbackCalls.length);
+    testing.expectEqual('data-bar', callbackCalls[2].name);
+    testing.expectEqual(null, callbackCalls[2].oldValue);
+    testing.expectEqual('bar-value', callbackCalls[2].newValue);
+}
+
+{
+    let callbackCalls = [];
+
+    class ObservedElement extends HTMLElement {
+        static get observedAttributes() {
+            return ['watched'];
+        }
+
+        attributeChangedCallback(name, oldValue, newValue) {
+            callbackCalls.push({ name, oldValue, newValue });
+        }
+    }
+
+    customElements.define('observed-element', ObservedElement);
+
+    const el = document.createElement('observed-element');
+    el.setAttribute('unwatched', 'value');
+    testing.expectEqual(0, callbackCalls.length);
+
+    el.setAttribute('watched', 'value');
+    testing.expectEqual(1, callbackCalls.length);
+}
+
+{
+    let callbackCalls = [];
+
+    class RemoveAttrElement extends HTMLElement {
+        static get observedAttributes() {
+            return ['test'];
+        }
+
+        attributeChangedCallback(name, oldValue, newValue) {
+            callbackCalls.push({ name, oldValue, newValue });
+        }
+    }
+
+    customElements.define('remove-attr-element', RemoveAttrElement);
+
+    const el = document.createElement('remove-attr-element');
+    el.setAttribute('test', 'value');
+    testing.expectEqual(1, callbackCalls.length);
+
+    el.removeAttribute('test');
+    testing.expectEqual(2, callbackCalls.length);
+    testing.expectEqual('test', callbackCalls[1].name);
+    testing.expectEqual('value', callbackCalls[1].oldValue);
+    testing.expectEqual(null, callbackCalls[1].newValue);
+}
+
+{
+    let callbackCalls = [];
+
+    class NoObservedElement extends HTMLElement {
+        attributeChangedCallback(name, oldValue, newValue) {
+            callbackCalls.push({ name, oldValue, newValue });
+        }
+    }
+
+    customElements.define('no-observed-element', NoObservedElement);
+
+    const el = document.createElement('no-observed-element');
+    el.setAttribute('test', 'value');
+    testing.expectEqual(0, callbackCalls.length);
+}
+
+{
+    let callbackCalls = [];
+
+    class UpgradeAttrElement extends HTMLElement {
+        static get observedAttributes() {
+            return ['existing'];
+        }
+
+        attributeChangedCallback(name, oldValue, newValue) {
+            callbackCalls.push({ name, oldValue, newValue });
+        }
+    }
+
+    const el = document.createElement('upgrade-attr-element');
+    el.setAttribute('existing', 'before-upgrade');
+    testing.expectEqual(0, callbackCalls.length);
+
+    customElements.define('upgrade-attr-element', UpgradeAttrElement);
+    testing.expectEqual(0, callbackCalls.length);
+
+    document.body.appendChild(el);
+
+    testing.expectEqual(1, callbackCalls.length);
+    testing.expectEqual('existing', callbackCalls[0].name);
+    testing.expectEqual(null, callbackCalls[0].oldValue);
+    testing.expectEqual('before-upgrade', callbackCalls[0].newValue);
+
+    el.setAttribute('existing', 'after-upgrade');
+    testing.expectEqual(2, callbackCalls.length);
+    testing.expectEqual('existing', callbackCalls[1].name);
+    testing.expectEqual('before-upgrade', callbackCalls[1].oldValue);
+    testing.expectEqual('after-upgrade', callbackCalls[1].newValue);
+}
+
+{
+    let callbackCalls = [];
+
+    class SetAttrMethodElement extends HTMLElement {
+        static get observedAttributes() {
+            return ['test'];
+        }
+
+        attributeChangedCallback(name, oldValue, newValue) {
+            callbackCalls.push({ name, oldValue, newValue });
+        }
+    }
+
+    customElements.define('set-attr-method-element', SetAttrMethodElement);
+
+    const el = document.createElement('set-attr-method-element');
+    el.setAttribute('test', 'initial');
+    testing.expectEqual(1, callbackCalls.length);
+
+    el.setAttribute('test', 'initial');
+    testing.expectEqual(2, callbackCalls.length);
+    testing.expectEqual('initial', callbackCalls[1].oldValue);
+    testing.expectEqual('initial', callbackCalls[1].newValue);
+}
+</script>

src/browser/tests/custom_elements/built_in.html

@@ -0,0 +1,137 @@
+<!DOCTYPE html>
+<body>
+<script src="../testing.js"></script>
+<script id="built_in">
+{
+    class FancyButton extends HTMLElement {}
+    customElements.define('fancy-button', FancyButton, { extends: 'button' });
+
+    const definition = customElements.get('fancy-button');
+    testing.expectEqual(FancyButton, definition);
+}
+
+{
+    let threw = false;
+    try {
+        class BadExtends extends HTMLElement {}
+        customElements.define('bad-extends', BadExtends, { extends: 'not-a-real-element' });
+    } catch (e) {
+        threw = true;
+    }
+    testing.expectEqual(true, threw);
+}
+
+{
+    let threw = false;
+    try {
+        class ExtendCustom extends HTMLElement {}
+        customElements.define('extend-custom', ExtendCustom, { extends: 'fancy-button' });
+    } catch (e) {
+        threw = true;
+    }
+    testing.expectEqual(true, threw);
+}
+
+{
+    class FancyParagraph extends HTMLElement {}
+    customElements.define('fancy-paragraph', FancyParagraph, { extends: 'p' });
+
+    const definition = customElements.get('fancy-paragraph');
+    testing.expectEqual(FancyParagraph, definition);
+}
+
+{
+    let constructorCalled = 0;
+
+    class ConstructedButton extends HTMLElement {
+        constructor() {
+            super();
+            constructorCalled++;
+            this.clicked = false;
+        }
+    }
+
+    customElements.define('constructed-button', ConstructedButton, { extends: 'button' });
+
+    const btn = document.createElement('button', { is: 'constructed-button' });
+    testing.expectEqual(1, constructorCalled);
+    testing.expectEqual('BUTTON', btn.tagName);
+    testing.expectEqual(false, btn.clicked);
+}
+
+{
+    class WrongTag extends HTMLElement {}
+    customElements.define('wrong-tag', WrongTag, { extends: 'button' });
+
+    const div = document.createElement('div', { is: 'wrong-tag' });
+    testing.expectEqual('DIV', div.tagName);
+}
+
+{
+    let connectedCount = 0;
+    let disconnectedCount = 0;
+    let attributeChanges = [];
+
+    class LifecycleButton extends HTMLElement {
+        static get observedAttributes() {
+            return ['data-test'];
+        }
+
+        connectedCallback() {
+            connectedCount++;
+        }
+
+        disconnectedCallback() {
+            disconnectedCount++;
+        }
+
+        attributeChangedCallback(name, oldValue, newValue) {
+            attributeChanges.push({ name, oldValue, newValue });
+        }
+    }
+
+    customElements.define('lifecycle-button', LifecycleButton, { extends: 'button' });
+
+    const btn = document.createElement('button', { is: 'lifecycle-button' });
+    testing.expectEqual(0, connectedCount);
+
+    document.body.appendChild(btn);
+    testing.expectEqual(1, connectedCount);
+
+    btn.setAttribute('data-test', 'value1');
+    testing.expectEqual(1, attributeChanges.length);
+    testing.expectEqual('data-test', attributeChanges[0].name);
+    testing.expectEqual(null, attributeChanges[0].oldValue);
+    testing.expectEqual('value1', attributeChanges[0].newValue);
+
+    btn.remove();
+    testing.expectEqual(1, disconnectedCount);
+}
+</script>
+
+<script>
+{
+    let constructorCalled = 0;
+    let connectedCalled = 0;
+
+    class ParsedButton extends HTMLElement {
+        constructor() {
+            super();
+            constructorCalled++;
+        }
+
+        connectedCallback() {
+            connectedCalled++;
+        }
+    }
+
+    customElements.define('parsed-button', ParsedButton, { extends: 'button' });
+}
+</script>
+<button is="parsed-button" id="parsed"></button>
+<script>
+{
+    const btn = document.getElementById('parsed');
+    testing.expectEqual('BUTTON', btn.tagName);
+}
+</script>

src/browser/tests/custom_elements/connected.html

@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<body>
+<script src="../testing.js"></script>
+<script id="connected">
+{
+    let connectedCount = 0;
+
+    class MyElement extends HTMLElement {
+        connectedCallback() {
+            connectedCount++;
+        }
+    }
+
+    customElements.define('my-element', MyElement);
+
+    const el = document.createElement('my-element');
+    testing.expectEqual(0, connectedCount);
+
+    document.body.appendChild(el);
+    testing.expectEqual(1, connectedCount);
+}
+
+{
+    let order = [];
+
+    class ParentElement extends HTMLElement {
+        connectedCallback() {
+            order.push('parent');
+        }
+    }
+
+    class ChildElement extends HTMLElement {
+        connectedCallback() {
+            order.push('child');
+        }
+    }
+
+    customElements.define('parent-element', ParentElement);
+    customElements.define('child-element', ChildElement);
+
+    const parent = document.createElement('parent-element');
+    const child = document.createElement('child-element');
+    parent.appendChild(child);
+
+    testing.expectEqual(0, order.length);
+
+    document.body.appendChild(parent);
+    testing.expectEqual(2, order.length);
+    testing.expectEqual('parent', order[0]);
+    testing.expectEqual('child', order[1]);
+}
+
+{
+    let connectedCount = 0;
+
+    class MoveElement extends HTMLElement {
+        connectedCallback() {
+            connectedCount++;
+        }
+    }
+
+    customElements.define('move-element', MoveElement);
+
+    const el = document.createElement('move-element');
+    document.body.appendChild(el);
+    testing.expectEqual(1, connectedCount);
+
+    const div = document.createElement('div');
+    document.body.appendChild(div);
+    div.appendChild(el);
+    testing.expectEqual(1, connectedCount);
+}
+
+{
+    let connectedCount = 0;
+
+    class DetachedElement extends HTMLElement {
+        connectedCallback() {
+            connectedCount++;
+        }
+    }
+
+    customElements.define('detached-element', DetachedElement);
+
+    const container = document.createElement('div');
+    const el = document.createElement('detached-element');
+    container.appendChild(el);
+    testing.expectEqual(0, connectedCount);
+
+    document.body.appendChild(container);
+    testing.expectEqual(1, connectedCount);
+}
+</script>
+

src/browser/tests/custom_elements/connected_from_parser.html

@@ -0,0 +1,122 @@
+<!DOCTYPE html>
+<head>
+<script src="../testing.js"></script>
+<script>
+{
+    // Define the custom element BEFORE the HTML is parsed
+    window.preParseConnectedCount = 0;
+
+    class PreParseElement extends HTMLElement {
+        connectedCallback() {
+            window.preParseConnectedCount++;
+        }
+    }
+
+    customElements.define('pre-parse-element', PreParseElement);
+}
+</script>
+</head>
+<body>
+<!-- This element is in the HTML and should have connectedCallback invoked -->
+<pre-parse-element id="static-element"></pre-parse-element>
+
+<script id="test-static-element">
+{
+    // connectedCallback should have been called for the element in HTML
+    testing.expectEqual(1, window.preParseConnectedCount);
+
+    const el = document.getElementById('static-element');
+    testing.expectTrue(el !== null);
+    testing.expectEqual('PRE-PARSE-ELEMENT', el.tagName);
+}
+</script>
+
+<script id="test-programmatic-still-works">
+{
+    // Reset counter
+    window.preParseConnectedCount = 0;
+
+    // This should still work (programmatic creation)
+    const el = document.createElement('pre-parse-element');
+    testing.expectEqual(0, window.preParseConnectedCount);
+
+    document.body.appendChild(el);
+    testing.expectEqual(1, window.preParseConnectedCount);
+}
+</script>
+
+<script>
+{
+    window.nestedParentCount = 0;
+    window.nestedChildCount = 0;
+
+    class NestedParent extends HTMLElement {
+        connectedCallback() {
+            window.nestedParentCount++;
+        }
+    }
+
+    class NestedChild extends HTMLElement {
+        connectedCallback() {
+            window.nestedChildCount++;
+        }
+    }
+
+    customElements.define('nested-parent', NestedParent);
+    customElements.define('nested-child', NestedChild);
+}
+</script>
+
+<nested-parent id="parent-element">
+    <nested-child id="child-element"></nested-child>
+</nested-parent>
+
+<script id="verify-nested">
+{
+    // Both parent and child should have connectedCallback invoked
+    testing.expectEqual(1, window.nestedParentCount);
+    testing.expectEqual(1, window.nestedChildCount);
+
+    const parent = document.getElementById('parent-element');
+    const child = document.getElementById('child-element');
+    testing.expectTrue(parent !== null);
+    testing.expectTrue(child !== null);
+}
+</script>
+
+<script>
+{
+    // Test attributeChangedCallback for initial attributes during parsing
+    window.attrChangedCalls = [];
+
+    class AttrElement extends HTMLElement {
+        static get observedAttributes() {
+            return ['foo', 'bar'];
+        }
+
+        attributeChangedCallback(name, oldValue, newValue) {
+            window.attrChangedCalls.push({ name, oldValue, newValue });
+        }
+    }
+
+    customElements.define('attr-element', AttrElement);
+}
+</script>
+
+<attr-element foo="value1" bar="value2" ignored="value3"></attr-element>
+
+<script id="verify-attribute-changed">
+{
+    // attributeChangedCallback should have been called for initial attributes
+    testing.expectEqual(2, window.attrChangedCalls.length);
+
+    testing.expectEqual('foo', window.attrChangedCalls[0].name);
+    testing.expectEqual(null, window.attrChangedCalls[0].oldValue);
+    testing.expectEqual('value1', window.attrChangedCalls[0].newValue);
+
+    testing.expectEqual('bar', window.attrChangedCalls[1].name);
+    testing.expectEqual(null, window.attrChangedCalls[1].oldValue);
+    testing.expectEqual('value2', window.attrChangedCalls[1].newValue);
+}
+</script>
+</body>

src/browser/tests/custom_elements/constructor.html

@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<script src="../testing.js"></script>
+<script id="constructor">
+{
+    let constructorCalled = false;
+    let constructorThis = null;
+
+    class MyElement extends HTMLElement {
+        constructor() {
+            super();
+            constructorCalled = true;
+            constructorThis = this;
+            this.customProperty = 'initialized';
+        }
+    }
+
+    customElements.define('my-element', MyElement);
+
+    const el = document.createElement('my-element');
+    testing.expectEqual(true, constructorCalled);
+    testing.expectEqual(el, constructorThis);
+    testing.expectEqual('initialized', el.customProperty);
+}
+
+{
+    class CounterElement extends HTMLElement {
+        constructor() {
+            super();
+            this.count = 0;
+        }
+
+        increment() {
+            this.count++;
+        }
+    }
+
+    customElements.define('counter-element', CounterElement);
+
+    const counter = document.createElement('counter-element');
+    testing.expectEqual(0, counter.count);
+    counter.increment();
+    testing.expectEqual(1, counter.count);
+    counter.increment();
+    testing.expectEqual(2, counter.count);
+}
+
+{
+    class NoConstructorElement extends HTMLElement {}
+
+    customElements.define('no-constructor-element', NoConstructorElement);
+
+    const el = document.createElement('no-constructor-element');
+    testing.expectEqual('NO-CONSTRUCTOR-ELEMENT', el.tagName);
+}
+</script>