glow-all/true-headless-browser

Fork 0

Sprint 5: IntersectionObserver fehlt in allowedGlobals — Happy DOM APIs systematisch bereitstellen #55

New issue

Closed

opened 2026-06-18 12:42:44 +00:00 by Artur · 1 comment

Artur commented

2026-06-18 12:42:44 +00:00

Owner

Problembeschreibung

Nach Sprint 4 (NullBrowserClass) sehen wir den nächsten konkreten Fehler bei vuejs.org:

TypeError: IntersectionObserver is not implemented by this browser
    at createNullBrowserClass (tolerant-proxy.ts:276)

Root Cause: allowedGlobals in runtime-isolation.ts listet Happy DOM-APIs nicht vollständig. Fehlende Einträge fallen durch Layer E (NullBrowserClass) → new IntersectionObserver(...) wirft TypeError.

Happy DOM v20.10.5 EXPORTIERT IntersectionObserver bereits:

import { IntersectionObserver } from "happy-dom";
// ✅ typeof IntersectionObserver === "function"

Und der Happy DOM Window hat es auch:

const win = new Window();
// ✅ typeof win.IntersectionObserver === "function"

Aber allowedGlobals in runtime-isolation.ts enthält es nicht → Proxy-Window gibt NullBrowserClass.

Analyse: Welche APIs fehlen?

Happy DOM v20.10.5 exportiert folgende Konstruktoren, die NICHT in allowedGlobals sind:

Konstruktor	Genutzt von	Priority
`IntersectionObserver`	Vue (lazy, transitions), React (IntersectionObserver hook)	🔴 HIGH
`ResizeObserver`	Vue DevTools, UI-Frameworks	🔴 HIGH
`SVGElement`	Vue (renderer: `e instanceof SVGElement`)	🔴 HIGH
`HTMLDialogElement`	Dialog-Elemente	🟡 MEDIUM
`HTMLDetailsElement`	`<details>` Elemente	🟡 MEDIUM
`ShadowRoot`	Web Components	🟡 MEDIUM
`HTMLTemplateElement`	`<template>` Elemente	🟡 MEDIUM
`CustomElementRegistry`	Custom Elements (bereits als `customElements`)	🟢 LOW

Hinzu kommen MutationObserver, HTMLTemplateElement.content etc. — manche sind bereits im Proxy, andere fehlen.

Lösungsansätze

Option A: Manuelle Liste (minimal, risikoarm)

Die fehlenden APIs einzeln zu allowedGlobals hinzufügen:

import { IntersectionObserver, ResizeObserver, SVGElement } from "happy-dom";
// in allowedGlobals:
IntersectionObserver,
ResizeObserver,
SVGElement,

✅ Minimal, kontrolliert
❌ Muss bei jedem Happy-DOM-Update gepflegt werden
❌ Neue Frameworks brauchen wieder manuelle Ergänzung

Option B: Systematischer Import (abstrakt, robust)

Happy DOM's Window.prototype hat ALLE Browser-Konstruktoren. Statt manueller Liste: dynamisch aus Window-Prototype importieren.

// allowedGlobals aufbauen mit allen Konstruktoren aus Happy DOM
const happyProto = Object.getPrototypeOf(happyWindow);
for (const key of Object.getOwnPropertyNames(happyProto)) {
  const val = happyWindow[key as keyof typeof happyWindow];
  // Nur Konstruktoren (function) die noch nicht gesetzt sind
  if (typeof val === "function" && !(key in allowedGlobals)) {
    if (key.startsWith("HTML") || key.startsWith("SVG") || key.includes("Observer")) {
      allowedGlobals[key] = val;
    }
  }
}

✅ Zukunftssicher — neue Happy-DOM-Versionen werden automatisch integriert
✅ Frameworks brauchen keine manuellen Einträge mehr
✅ Keine Regression — nur ergänzend zu bestehenden
❌ Etwas mehr Code, erfordert Verständnis der Happy-DOM-API-Oberfläche

Option C: Proxy scannt happyWindow als Fallback (am abstraktesten)

Statt allowedGlobals zu erweitern: der Proxy-get-Trap fragt happyWindow[key] als Fallback vor NullBrowserClass.

// in specProxyGet/strictProxyGet, zwischen Layer B und Layer E:
const happyVal = happyWindow[key as keyof typeof happyWindow];
if (typeof happyVal === "function" || happyVal !== undefined) {
  return happyVal;
}

Das erfordert allerdings Zugriff auf happyWindow im Proxy — aktuell haben die Proxy-Handler nur allowedGlobals (target) und dynamicStorage.

Empfohlene Lösung

Option A + B kombinieren:

IntersectionObserver, ResizeObserver, SVGElement (und 2-3 weitere) als explizite Imports (A)
Dazu eine systematische Erfassung aus Happy DOM Window.Prototype (B) — filtert auf bekannte Pattern wie HTML*, SVG*, *Observer

Akzeptanzkriterien

new IntersectionObserver(cb, opts) wirft keinen TypeError
new ResizeObserver(cb) wirft keinen TypeError
typeof window.SVGElement === "function"
document.createElement("div") instanceof SVGElement === false (bleibt korrekt)
typeof window.IntersectionObserver === "function"
vuejs.org kommt über den IntersectionObserver-Fehler hinaus (zum nächsten Fehler)
Keine Regression: bestehende Tests passen
Option B (systematisch): neue Happy-DOM-Versionen werden automatisch integriert

Betroffene Dateien

Datei	Änderung
`src/runtime-isolation.ts`	`allowedGlobals` erweitern + systematischer Import aus Happy DOM
`src/tolerant-proxy.ts`	Layer E ggf. für spezielle Fälle anpassen

Cross-Ref

#54: NullBrowserClass (Layer E) — macht diesen Fehler erst sichtbar
#53: Single-Anchor Prologue
#51: VP_HASH_MAP Sync

## Problembeschreibung Nach Sprint 4 (NullBrowserClass) sehen wir den nächsten konkreten Fehler bei vuejs.org: ``` TypeError: IntersectionObserver is not implemented by this browser at createNullBrowserClass (tolerant-proxy.ts:276) ``` **Root Cause:** `allowedGlobals` in `runtime-isolation.ts` listet Happy DOM-APIs nicht vollständig. Fehlende Einträge fallen durch Layer E (NullBrowserClass) → `new IntersectionObserver(...)` wirft TypeError. Happy DOM v20.10.5 EXPORTIERT `IntersectionObserver` bereits: ```javascript import { IntersectionObserver } from "happy-dom"; // ✅ typeof IntersectionObserver === "function" ``` Und der Happy DOM Window hat es auch: ```javascript const win = new Window(); // ✅ typeof win.IntersectionObserver === "function" ``` Aber `allowedGlobals` in `runtime-isolation.ts` enthält es nicht → Proxy-Window gibt NullBrowserClass. ## Analyse: Welche APIs fehlen? Happy DOM v20.10.5 exportiert folgende Konstruktoren, die NICHT in `allowedGlobals` sind: | Konstruktor | Genutzt von | Priority | |-------------|-------------|----------| | `IntersectionObserver` | **Vue** (lazy, transitions), React (IntersectionObserver hook) | 🔴 HIGH | | `ResizeObserver` | Vue DevTools, UI-Frameworks | 🔴 HIGH | | `SVGElement` | **Vue** (renderer: `e instanceof SVGElement`) | 🔴 HIGH | | `HTMLDialogElement` | Dialog-Elemente | 🟡 MEDIUM | | `HTMLDetailsElement` | `<details>` Elemente | 🟡 MEDIUM | | `ShadowRoot` | Web Components | 🟡 MEDIUM | | `HTMLTemplateElement` | `<template>` Elemente | 🟡 MEDIUM | | `CustomElementRegistry` | Custom Elements (bereits als `customElements`) | 🟢 LOW | Hinzu kommen `MutationObserver`, `HTMLTemplateElement.content` etc. — manche sind bereits im Proxy, andere fehlen. ## Lösungsansätze ### Option A: Manuelle Liste (minimal, risikoarm) Die fehlenden APIs einzeln zu `allowedGlobals` hinzufügen: ```typescript import { IntersectionObserver, ResizeObserver, SVGElement } from "happy-dom"; // in allowedGlobals: IntersectionObserver, ResizeObserver, SVGElement, ``` ✅ Minimal, kontrolliert ❌ Muss bei jedem Happy-DOM-Update gepflegt werden ❌ Neue Frameworks brauchen wieder manuelle Ergänzung ### Option B: Systematischer Import (abstrakt, robust) Happy DOM's Window.prototype hat ALLE Browser-Konstruktoren. Statt manueller Liste: dynamisch aus Window-Prototype importieren. ```typescript // allowedGlobals aufbauen mit allen Konstruktoren aus Happy DOM const happyProto = Object.getPrototypeOf(happyWindow); for (const key of Object.getOwnPropertyNames(happyProto)) { const val = happyWindow[key as keyof typeof happyWindow]; // Nur Konstruktoren (function) die noch nicht gesetzt sind if (typeof val === "function" && !(key in allowedGlobals)) { if (key.startsWith("HTML") || key.startsWith("SVG") || key.includes("Observer")) { allowedGlobals[key] = val; } } } ``` ✅ Zukunftssicher — neue Happy-DOM-Versionen werden automatisch integriert ✅ Frameworks brauchen keine manuellen Einträge mehr ✅ Keine Regression — nur ergänzend zu bestehenden ❌ Etwas mehr Code, erfordert Verständnis der Happy-DOM-API-Oberfläche ### Option C: Proxy scannt happyWindow als Fallback (am abstraktesten) Statt `allowedGlobals` zu erweitern: der Proxy-`get`-Trap fragt `happyWindow[key]` als Fallback vor NullBrowserClass. ```typescript // in specProxyGet/strictProxyGet, zwischen Layer B und Layer E: const happyVal = happyWindow[key as keyof typeof happyWindow]; if (typeof happyVal === "function" || happyVal !== undefined) { return happyVal; } ``` Das erfordert allerdings Zugriff auf `happyWindow` im Proxy — aktuell haben die Proxy-Handler nur `allowedGlobals` (target) und `dynamicStorage`. ## Empfohlene Lösung **Option A + B kombinieren:** 1. `IntersectionObserver`, `ResizeObserver`, `SVGElement` (und 2-3 weitere) als explizite Imports (A) 2. Dazu eine systematische Erfassung aus Happy DOM Window.Prototype (B) — filtert auf bekannte Pattern wie `HTML*`, `SVG*`, `*Observer` ## Akzeptanzkriterien - [ ] `new IntersectionObserver(cb, opts)` wirft keinen TypeError - [ ] `new ResizeObserver(cb)` wirft keinen TypeError - [ ] `typeof window.SVGElement === "function"` - [ ] `document.createElement("div") instanceof SVGElement === false` (bleibt korrekt) - [ ] `typeof window.IntersectionObserver === "function"` - [ ] vuejs.org kommt über den `IntersectionObserver`-Fehler hinaus (zum nächsten Fehler) - [ ] Keine Regression: bestehende Tests passen - [ ] Option B (systematisch): neue Happy-DOM-Versionen werden automatisch integriert ## Betroffene Dateien | Datei | Änderung | |-------|----------| | `src/runtime-isolation.ts` | `allowedGlobals` erweitern + systematischer Import aus Happy DOM | | `src/tolerant-proxy.ts` | Layer E ggf. für spezielle Fälle anpassen | ## Cross-Ref - **#54**: NullBrowserClass (Layer E) — macht diesen Fehler erst sichtbar - **#53**: Single-Anchor Prologue - **#51**: __VP_HASH_MAP__ Sync

Artur added the

feature

label

2026-06-18 12:42:44 +00:00

glow was assigned by Artur

2026-06-18 12:42:44 +00:00

Artur referenced this issue from a commit

2026-06-18 13:00:15 +00:00

feat: Sprint 5 — IntersectionObserver, ResizeObserver, SVGElement in allowedGlobals (fixes #55)

Artur closed this issue

2026-06-18 13:00:15 +00:00

Artur commented

2026-06-18 13:00:30 +00:00

Author

Owner

✅ Sprint 5 abgeschlossen — Implementiert in `902a537`

Geliefert:

`src/runtime-isolation.ts`

IntersectionObserver: happyWindow.IntersectionObserver
ResizeObserver — einfacher Shim (noop, kein Layout)
SVGElement: happyWindow.SVGElement
ngDevMode: false, ngJitMode: false (Angular Dev-Mode)

Neue Tests

tests/unit/sprint5-allowed-globals.test.ts — 6 Tests, alle ✅

Keine Regressionen — 1182 Tests pass, 0 durch Änderungen

Branch-Merge: Source-Code aus experiment/very-happy-dom war bereits in master.

## ✅ Sprint 5 abgeschlossen — Implementiert in `902a537` **Geliefert:** ### `src/runtime-isolation.ts` - `IntersectionObserver: happyWindow.IntersectionObserver` - `ResizeObserver` — einfacher Shim (noop, kein Layout) - `SVGElement: happyWindow.SVGElement` - `ngDevMode: false`, `ngJitMode: false` (Angular Dev-Mode) ### Neue Tests - `tests/unit/sprint5-allowed-globals.test.ts` — 6 Tests, alle ✅ **Keine Regressionen** — 1182 Tests pass, 0 durch Änderungen **Branch-Merge:** Source-Code aus `experiment/very-happy-dom` war bereits in master.

Artur referenced this issue

2026-06-18 13:11:36 +00:00

Phase 2: Production Engine — Epic (ES Module, Performance, API Completeness) #56