ext/hyperframes
2
0
Fork 0
mirror of https://github.com/heygen-com/hyperframes.git synced 2026-09-03 04:38:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(core): declarative variable bindings — data-var-src, data-var-text, css custom props

Browse Source
This commit is contained in:
James
2026-07-09 13:31:03 -07:00
parent bc0e0b314b
commit f7ee0768ae
17 changed files with 643 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/sdk/src/session.ts
+12
View File
@@ -264,6 +264,18 @@ class CompositionImpl implements Composition {
}
}
}
// Declarative bindings (data-var-src / data-var-text) are direct reads.
for (const el of Array.from(
this.parsed.document.querySelectorAll("[data-var-src], [data-var-text]"),
)) {
for (const attr of ["data-var-src", "data-var-text"]) {
const id = el.getAttribute(attr)?.trim();
if (id && !seen.has(id)) {
seen.add(id);
usedIds.push(id);
}
}
}
this._variableUsageScanCache = freshCache;
const declaredIds = this.getVariableDeclarations().map((d) => d.id);
// The CSS compat channel counts as usage: a variable consumed only via
packages/sdk/src/session.variableusage.test.ts
+16
View File
@@ -82,6 +82,22 @@ describe("getVariableUsage", () => {
expect(usage.unusedDeclarations).toContain("accent");
});
it("counts declarative data-var-src / data-var-text bindings as usage", async () => {
const comp = await openComposition(`<!DOCTYPE html>
<html data-composition-variables='${DECLS}'>
<body>
<div data-hf-id="hf-stage" data-hf-root data-duration="5">
<img data-hf-id="hf-img" data-var-src="accent" src="x.jpg" />
<h1 data-hf-id="hf-h" data-var-text="title">t</h1>
</div>
</body>
</html>`);
const usage = comp.getVariableUsage();
expect(usage.usedIds).toEqual(expect.arrayContaining(["accent", "title"]));
expect(usage.unusedDeclarations).toEqual(["orphan"]);
expect(usage.scanIncomplete).toBe(false);
});
it("handles compositions with no declarations and no scripts", async () => {
const comp = await openComposition(
`<!DOCTYPE html><html><body><div data-hf-id="hf-stage" data-hf-root data-duration="5"><p data-hf-id="hf-p">x</p></div></body></html>`,