Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

In a worker, native functions read through `window` throw "Illegal invocation" (`window.setTimeout`, `window.requestAnimationFrame`)

Abierto
  • ¿Algo no está bien?
#345 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 17 días

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
3/5
Tiempo estimado
Medio día
Aptitud para principiantes
50/100
Tipo de issue
Error
Claridad
Bien especificado
Estado de actividad
Activo
Stack tecnológico
javascript
Área
web-dev

Línea de trabajo

Start with the get trap of the window Proxy in esm/interface/document.js around lines 133-135, which falls back to globalThis[name], and reproduce with the worker test case from the issue. Native functions read through the proxy need to be bound to globalThis while constructors such as Event and URL stay unchanged, so check that new and instanceof still work. Done means window.setTimeout, window.queueMicrotask and window.requestAnimationFrame run without Illegal invocation in a browser worker, and the existing suite still passes.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

document.defaultView (the window that parseHTML returns) is a Proxy over globalThis. Anything it does not define itself comes from globalThis[name] (esm/interface/document.js#L133-L135). For the realm's native functions, the call then runs with the proxy as this, and browsers reject that. Node does not check, so this shows up only in a browser, e.g. in a worker with linkedom/worker.

This is common in practice. d3-timer captures window.requestAnimationFrame.bind(window) when it loads, so any d3 transition created while window is linkedom's window throws.

Minimal test case: save this as an HTML file, serve it from any local server, and open it in Chrome.

<!doctype html>
<meta charset="utf-8">
<pre id="out">running…</pre>
<script type="module">
const source = `
import { parseHTML } from 'https://cdn.jsdelivr.net/npm/[email protected]/worker.js';
const { window } = parseHTML('<!doctype html><html><body></body></html>');
const result = {};
const cases = {
  'self.setTimeout(f)': () => self.setTimeout(() => {}),
  'window.setTimeout(f)': () => window.setTimeout(() => {}),
  'window.queueMicrotask(f)': () => window.queueMicrotask(() => {}),
  'window.requestAnimationFrame(f)': () => window.requestAnimationFrame(() => {}),
  'window.requestAnimationFrame.bind(window)(f)': () => window.requestAnimationFrame.bind(window)(() => {}),
};
for (const [name, run] of Object.entries(cases)) {
  try { run(); result[name] = 'ok'; } catch (e) { result[name] = e.name + ': ' + e.message; }
}
postMessage(result);
`;
const url = URL.createObjectURL(new Blob([source], { type: 'text/javascript' }));
const worker = new Worker(url, { type: 'module' });
worker.onmessage = (e) => { document.getElementById('out').textContent = JSON.stringify(e.data, null, 2); };
</script>

Chrome 156, linkedom 0.18.12. The worker.js committed on main (3fcf145) gives the same result:

self.setTimeout(f)                              ok
window.setTimeout(f)                            TypeError: Illegal invocation
window.queueMicrotask(f)                        TypeError: Illegal invocation
window.requestAnimationFrame(f)                 TypeError: Illegal invocation
window.requestAnimationFrame.bind(window)(f)    TypeError: Illegal invocation

Expected: the same as self.setTimeout(f), as it would be with a real window.

Possible direction (not tested against the suite): in the proxy's get, when the value comes from globalThis and is a function that is not a constructor, return it bound to globalThis, once per name. Classes (Event, URL, …) would stay as they are, so new and instanceof keep working. Telling the two apart is the delicate part, which is why this is an issue and not a PR.

Workaround on our side: before d3 loads, assign plain functions to window.requestAnimationFrame and window.cancelAnimationFrame (they wrap setTimeout/clearTimeout). The proxy's set writes them onto globalThis, which replaces the native ones, and get then returns those plain functions.

Lenguaje dominante
HTML
Estrellas
2.1k
Forks
112
Merge medio
11 d 1 h
PR fusionados (30 d)
1

Preparar el entorno

Este proyecto no incluye contenedor de desarrollo, Dockerfile ni guía de contribución, así que la configuración corre por tu cuenta: empieza por su README y consulta nuestra guía para la primera contribución para los pasos generales.

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de WebReflection/linkedom

Todos los issues de WebReflection/linkedom

Issues similares

Más issues de Web Dev

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.