Concurrent Mode Polyfills — requestIdleCallback, rAF-Batching, document.currentScript #33

New issue

Closed

opened 2026-06-17 16:35:54 +00:00 by Artur · 0 comments

Artur commented

2026-06-17 16:35:54 +00:00

Owner

Problem

React 18+ Concurrent Mode braucht einige Browser-APIs die Happy DOM nicht oder nur teilweise bereitstellt:

1. requestIdleCallback fehlt

React Scheduler nutzt requestIdleCallback für Low-Priority-Work. Ohne fällt React auf setTimeout(fn,0) zurück → kein Concurrent Mode.

2. rAF-Batching

requestAnimationFrame existiert in Happy DOM, aber React erwartet korrekte Reihenfolge relativ zu Microtasks.

3. document.currentScript

Manche Bundler prüfen document.currentScript → undefined → Crash.

4. structuredClone

React 19 nutzt structuredClone für Deep-Copy. Bun hat das nativ, muss nur injiziert werden.

Lösung: Minimal-Polyfills in src/fakes/concurrent-polyfills.ts

requestIdleCallback

window.requestIdleCallback = (cb, opts) => {
  return setTimeout(() => cb({
    didTimeout: false,
    timeRemaining: () => 50,
  }), opts?.timeout ?? 50);
};
window.cancelIdleCallback = clearTimeout;

document.currentScript (in script-loader.ts)

// Vor Script-Ausführung:
this._currentScript = scriptElement;
Object.defineProperty(document, "currentScript", {
  get: () => this._currentScript,
  configurable: true,
});
// Nach Script-Ausführung:
this._currentScript = null;

structuredClone

window.structuredClone = globalThis.structuredClone;

Akzeptanzkriterien

requestIdleCallback existiert, gibt Handle zurück
cancelIdleCallback bricht pending Callback ab
IdleDeadline hat didTimeout + timeRemaining() > 0
document.currentScript zeigt auf aktuelle Script-Element
document.currentScript ist null nach Script-Ende
structuredClone kopiert Objekte korrekt
Alle bestehenden Tests bleiben grün

Betroffene Dateien

Datei	Änderung
`src/fakes/concurrent-polyfills.ts`	Neu: rIC, rAF, structuredClone
`src/runtime-isolation.ts`	concurrent-polyfills registrieren
`src/js/script-loader.ts`	document.currentScript-Tracking
`tests/unit/concurrent-polyfills.test.ts`	Neu: 10+ Tests

Cross-Referenzen

#30 MO-Batching + #32 Event-Reihenfolge: Zusammen foundation für React 19 Concurrent

## Problem React 18+ Concurrent Mode braucht einige Browser-APIs die Happy DOM nicht oder nur teilweise bereitstellt: ### 1. requestIdleCallback fehlt React Scheduler nutzt `requestIdleCallback` für Low-Priority-Work. Ohne fällt React auf setTimeout(fn,0) zurück → kein Concurrent Mode. ### 2. rAF-Batching `requestAnimationFrame` existiert in Happy DOM, aber React erwartet korrekte Reihenfolge relativ zu Microtasks. ### 3. document.currentScript Manche Bundler prüfen `document.currentScript` → undefined → Crash. ### 4. structuredClone React 19 nutzt `structuredClone` für Deep-Copy. Bun hat das nativ, muss nur injiziert werden. ## Lösung: Minimal-Polyfills in src/fakes/concurrent-polyfills.ts ### requestIdleCallback ```typescript window.requestIdleCallback = (cb, opts) => { return setTimeout(() => cb({ didTimeout: false, timeRemaining: () => 50, }), opts?.timeout ?? 50); }; window.cancelIdleCallback = clearTimeout; ``` ### document.currentScript (in script-loader.ts) ```typescript // Vor Script-Ausführung: this._currentScript = scriptElement; Object.defineProperty(document, "currentScript", { get: () => this._currentScript, configurable: true, }); // Nach Script-Ausführung: this._currentScript = null; ``` ### structuredClone ```typescript window.structuredClone = globalThis.structuredClone; ``` ## Akzeptanzkriterien - [ ] requestIdleCallback existiert, gibt Handle zurück - [ ] cancelIdleCallback bricht pending Callback ab - [ ] IdleDeadline hat didTimeout + timeRemaining() > 0 - [ ] document.currentScript zeigt auf aktuelle Script-Element - [ ] document.currentScript ist null nach Script-Ende - [ ] structuredClone kopiert Objekte korrekt - [ ] Alle bestehenden Tests bleiben grün ## Betroffene Dateien | Datei | Änderung | |-------|----------| | `src/fakes/concurrent-polyfills.ts` | **Neu:** rIC, rAF, structuredClone | | `src/runtime-isolation.ts` | concurrent-polyfills registrieren | | `src/js/script-loader.ts` | document.currentScript-Tracking | | `tests/unit/concurrent-polyfills.test.ts` | **Neu:** 10+ Tests | ## Cross-Referenzen - #30 MO-Batching + #32 Event-Reihenfolge: Zusammen foundation für React 19 Concurrent

Artur added the

react-compat

feature

labels

2026-06-17 16:35:54 +00:00