In a worker, native functions read through `window` throw "Illegal invocation" (`window.setTimeout`, `window.requestAnimationFrame`)
维护者通常 17 天内回复
还没有人认领这个 Issue。
评估
- 难度
- 3/5
- 预计耗时
- 半天
- 新手友好度
- 50/100
- Issue 类型
- 缺陷
- 描述清晰度
- 描述清楚
- 活跃度
- 活跃
- 技术栈
- javascript
- 领域
- web-dev
调研方向
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.
由索引模型根据 Issue 内容生成。
描述
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.
- 主要语言
- HTML
- 星标
- 2.1k
- 派生
- 110
- 平均合并
- 11 天 1 小时
- 30 天内合并 PR
- 1
环境准备
这个项目没有提供开发容器、Dockerfile 或贡献指南，环境需要你自己搭建：先看它的 README，通用步骤见我们的新手贡献指南。
从这里开始
- 先读完整个 Issue，再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库，在一个分支上完成修改。
- 提交 Pull Request，并在描述里引用这个 Issue 编号。
WebReflection/linkedom 的其他 Issue
-
难度 2/5 1-3 小时 新手友好度 85/100
WebReflection/linkedom#344 ·
维护者通常 17 天内回复
-
`TextElement.toString()` puts the element text back at the first `><` of the start tag, so an attribute value containing `><` swallows the text of `<style>`, `<script>`, `<title>` and `<textarea>`可能已有人在做 @vsolano9 今天认领。 未关闭
难度 2/5 1-3 小时 新手友好度 78/100
WebReflection/linkedom#341 ·
维护者通常 17 天内回复
-
难度 2/5 1-3 小时 新手友好度 82/100
WebReflection/linkedom#340 ·
维护者通常 17 天内回复
-
Element#matches() compiles the selector on every call可能已有人在做 @jonasporto 今天认领。 未关闭
难度 2/5 1-3 小时 新手友好度 35/100
WebReflection/linkedom#348 ·
维护者通常 17 天内回复
-
难度 3/5 1-2 天 新手友好度 68/100
WebReflection/linkedom#342 ·
维护者通常 17 天内回复
查看 WebReflection/linkedom 的全部 Issue
相似的 Issue
-
难度 2/5 1-3 小时 新手友好度 62/100
gramps-project/gramps-web#1549 ·
维护者通常 1 天内回复
-
bug frontend
难度 2/5 1-3 小时 新手友好度 75/100
维护者通常 3 天内回复
-
难度 1/5 1 小时以内 新手友好度 88/100
-
难度 2/5 1-3 小时 新手友好度 66/100
维护者通常 1 天内回复
-
frontend good first issue Stellar Wave
难度 2/5 1-3 小时 新手友好度 65/100
OlaGreat/starbound-realms#140 · 1 条评论 ·