From 6bcf3ceddb7e0197e1dc0c09be9ca0db5ecfaced Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Miguel=20=C3=81ngel?= Date: Sun, 3 May 2026 19:19:53 +0200 Subject: [PATCH] fix: use target receiver for scoped proxy accessors (#607) ## Problem `wrapScopedCompositionScript` wraps composition scripts with scoped `document`, `window`, and `gsap` proxies. The current published `latest` and `alpha` packages still pass the proxy as the `Reflect.get` receiver, so browser host accessors like `document.body` can throw `TypeError: Illegal invocation`. When that happens, the wrapper catches the error and aborts the rest of the composition script. For components that start hidden and reveal themselves through GSAP/timeline setup, that means the timeline is never registered and the render can stay visually empty. Closes #606. ## What this fixes - Reads scoped proxy properties with the original target as the `Reflect.get` receiver. - Applies the same target-receiver pattern to scoped proxy setters, including remapped timeline registry writes. - Preserves the existing behavior of binding returned methods back to the real target. - Covers document, window, remapped timeline registry, GSAP, and GSAP utils accessors/setters in regression tests that throw unless the receiver is the original target. ## Root cause The previous proxy traps called `Reflect.get(target, prop, receiver)`. For accessors, that invokes the getter with `this === receiver`, and in this wrapper the receiver is the proxy. Browser host getters such as `Document.prototype.body` validate their receiver and reject the proxy, which makes ordinary composition code like `document.body` fail before timeline registration can run. ## Verification ### Local checks - Confirmed current npm state with `npm view @hyperframes/core version dist-tags versions --json` and `npm view @hyperframes/producer version dist-tags versions --json`: `latest` is `0.4.42`, `alpha` is `0.5.0-alpha.14`. - Packed `@hyperframes/core` and `@hyperframes/producer` at both `latest` and `alpha`; all four packed artifacts still contained the bad `Reflect.get(target, prop, receiver)` / `utilsReceiver` wrapper patterns before this fix. - `bun run --cwd packages/core test -- src/compiler/compositionScoping.test.ts` - `bunx oxlint packages/core/src/compiler/compositionScoping.ts packages/core/src/compiler/compositionScoping.test.ts` - `bunx oxfmt --check packages/core/src/compiler/compositionScoping.ts packages/core/src/compiler/compositionScoping.test.ts` - `bun run --cwd packages/core build` - `bun run --cwd packages/core typecheck` - `bun run --cwd packages/producer typecheck` - `bun run --cwd packages/producer build` - `bun test packages/producer/src/services/htmlCompiler.test.ts` - Confirmed the rebuilt core runtime and producer bundles no longer contain the old `Reflect.get(..., receiver)` / `Reflect.set(..., receiver)` scoped-wrapper patterns. - `git diff --check` - Pre-commit also reran lint, format, and typecheck successfully. ### Browser verification Used `agent-browser` against generated local repro pages: - `core latest 0.4.42`: `bodyRead: false`, `titleOpacity: "0"`, `timelineRegistered: false`, `errorCount: 1` - `core alpha 0.5.0-alpha.14`: `bodyRead: false`, `titleOpacity: "0"`, `timelineRegistered: false`, `errorCount: 1` - Patched local wrapper: `bodyRead: true`, `titleOpacity: "1"`, `timelineRegistered: true`, `errorCount: 0` ## Notes - Browser screenshots and the `agent-browser` recordings are local-only under `tmp/issue-606/browser/`, including `issue-606-browser-proof.webm` and `issue-606-after-comment.webm`. - No generated `dist/` artifacts are committed. --- .../src/compiler/compositionScoping.test.ts | 146 +++++++++++++++++- .../core/src/compiler/compositionScoping.ts | 14 +- 2 files changed, 152 insertions(+), 8 deletions(-) diff --git a/packages/core/src/compiler/compositionScoping.test.ts b/packages/core/src/compiler/compositionScoping.test.ts index 338c1ca99..95110af8c 100644 --- a/packages/core/src/compiler/compositionScoping.test.ts +++ b/packages/core/src/compiler/compositionScoping.test.ts @@ -1,4 +1,4 @@ -import { describe, expect, it } from "vitest"; +import { describe, expect, it, vi } from "vitest"; import { parseHTML } from "linkedom"; import { scopeCssToComposition, wrapScopedCompositionScript } from "./compositionScoping"; @@ -89,4 +89,148 @@ window.__timelines.scene = tl; expect(fakeWindow.__selectedRootTitle).toBe("Scene"); expect(gsapTargets).toEqual([["Scene"], ["Scene"]]); }); + + it("reads scoped proxy accessors with the original target receiver", () => { + const root = { + contains(node: unknown) { + return node === root; + }, + }; + const body = { tagName: "BODY" }; + const fakeDocument = { + querySelector(selector: string) { + return selector === '[data-composition-id="scene"]' ? root : null; + }, + querySelectorAll() { + return []; + }, + getElementById() { + return null; + }, + get body() { + if (this !== fakeDocument) { + throw new TypeError("Illegal invocation"); + } + return body; + }, + }; + const location = { href: "https://example.test/scene" }; + const fakeUtils = { + get marker() { + if (this !== fakeUtils) { + throw new TypeError("Illegal invocation"); + } + return "utils-ok"; + }, + }; + const fakeGsap = { + utils: fakeUtils, + get version() { + if (this !== fakeGsap) { + throw new TypeError("Illegal invocation"); + } + return "gsap-ok"; + }, + }; + const fakeWindow = { + document: fakeDocument, + __bodyTag: "", + __href: "", + __windowSet: "", + __gsapVersion: "", + __utilsMarker: "", + __timelines: {}, + gsap: fakeGsap, + get location() { + if (this !== fakeWindow) { + throw new TypeError("Illegal invocation"); + } + return location; + }, + set customValue(value: string) { + if (this !== fakeWindow) { + throw new TypeError("Illegal invocation"); + } + this.__windowSet = value; + }, + }; + const wrapped = wrapScopedCompositionScript( + ` +window.__bodyTag = document.body.tagName; +window.__href = window.location.href; +window.customValue = "window-set-ok"; +window.__gsapVersion = gsap.version; +window.__utilsMarker = gsap.utils.marker; +`, + "scene", + ); + const errorSpy = vi.spyOn(console, "error").mockImplementation(() => {}); + + try { + new Function("window", "gsap", wrapped)(fakeWindow, fakeWindow.gsap); + } finally { + errorSpy.mockRestore(); + } + + expect(fakeWindow.__bodyTag).toBe("BODY"); + expect(fakeWindow.__href).toBe("https://example.test/scene"); + expect(fakeWindow.__windowSet).toBe("window-set-ok"); + expect(fakeWindow.__gsapVersion).toBe("gsap-ok"); + expect(fakeWindow.__utilsMarker).toBe("utils-ok"); + expect(errorSpy).not.toHaveBeenCalled(); + }); + + it("reads remapped timeline registry accessors with the original target receiver", () => { + let timeline = "initial"; + const timelineRegistry = { + get host() { + if (this !== timelineRegistry) { + throw new TypeError("Illegal invocation"); + } + return timeline; + }, + set host(value: string) { + if (this !== timelineRegistry) { + throw new TypeError("Illegal invocation"); + } + timeline = value; + }, + }; + const fakeWindow = { + document: { + querySelector() { + return null; + }, + querySelectorAll() { + return []; + }, + }, + __timelines: timelineRegistry, + __beforeTimeline: "", + __afterTimeline: "", + gsap: {}, + }; + const wrapped = wrapScopedCompositionScript( + ` +window.__beforeTimeline = window.__timelines.scene; +window.__timelines.scene = "updated"; +window.__afterTimeline = window.__timelines.scene; +`, + "scene", + "[HyperFrames] composition script error:", + undefined, + "host", + ); + const errorSpy = vi.spyOn(console, "error").mockImplementation(() => {}); + + try { + new Function("window", "gsap", wrapped)(fakeWindow, fakeWindow.gsap); + } finally { + errorSpy.mockRestore(); + } + + expect(fakeWindow.__beforeTimeline).toBe("initial"); + expect(fakeWindow.__afterTimeline).toBe("updated"); + expect(errorSpy).not.toHaveBeenCalled(); + }); }); diff --git a/packages/core/src/compiler/compositionScoping.ts b/packages/core/src/compiler/compositionScoping.ts index 6194723f2..34af7ba26 100644 --- a/packages/core/src/compiler/compositionScoping.ts +++ b/packages/core/src/compiler/compositionScoping.ts @@ -152,7 +152,7 @@ export function wrapScopedCompositionScript( return found && __hfContains(found) ? found : null; }; } - var value = Reflect.get(target, prop, receiver); + var value = Reflect.get(target, prop, target); return typeof value === "function" ? value.bind(target) : value; }, }) @@ -166,10 +166,10 @@ export function wrapScopedCompositionScript( if (!__hfTimelineRegistryProxy) { __hfTimelineRegistryProxy = new Proxy(window.__timelines, { get: function(target, prop, receiver) { - return Reflect.get(target, prop === __hfCompId ? __hfTimelineCompId : prop, receiver); + return Reflect.get(target, prop === __hfCompId ? __hfTimelineCompId : prop, target); }, set: function(target, prop, value, receiver) { - return Reflect.set(target, prop === __hfCompId ? __hfTimelineCompId : prop, value, receiver); + return Reflect.set(target, prop === __hfCompId ? __hfTimelineCompId : prop, value, target); }, }); } @@ -179,7 +179,7 @@ export function wrapScopedCompositionScript( ? new Proxy(window, { get: function(target, prop, receiver) { if (prop === "__timelines") return __hfGetTimelineRegistry(); - var value = Reflect.get(target, prop, receiver); + var value = Reflect.get(target, prop, target); return typeof value === "function" ? value.bind(target) : value; }, set: function(target, prop, value, receiver) { @@ -188,7 +188,7 @@ export function wrapScopedCompositionScript( __hfTimelineRegistryProxy = null; return true; } - return Reflect.set(target, prop, value, receiver); + return Reflect.set(target, prop, value, target); }, }) : window; @@ -252,12 +252,12 @@ export function wrapScopedCompositionScript( }; }; } - var value = Reflect.get(utilsTarget, utilsProp, utilsReceiver); + var value = Reflect.get(utilsTarget, utilsProp, utilsTarget); return typeof value === "function" ? value.bind(utilsTarget) : value; }, }); } - var value = Reflect.get(target, prop, receiver); + var value = Reflect.get(target, prop, target); return typeof value === "function" ? value.bind(target) : value; }, });