mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-01 19:42:03 +00:00
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.
This commit is contained in:
@@ -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();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -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;
|
||||
},
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user