ext/hyperframes
2
0
Fork 0
mirror of https://github.com/heygen-com/hyperframes.git synced 2026-09-12 15:20:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(studio,runtime): CSS.escape ids so digit-leading selectors don't crash

Browse Source 
The runtime picker built raw `#${id}` selectors while its sibling
attribute-selector branches (data-composition-id, data-composition-src,
data-track-index) already CSS.escape'd their values. When a user
composition has an element with a digit-leading id (e.g. `id="0"`),
the picker emits the selector `#0` which is invalid per the CSS spec —
downstream `document.querySelector` throws SyntaxError.

Same failure mode reached the Studio thumbnail: getElementScreenshotClip
called `document.querySelectorAll(selector)` unguarded, so an invalid
selector bubbling out of page.evaluate failed the whole thumbnail and
returned 500 to the browser (broken thumbnail image).

Fixes:
- packages/core/src/runtime/picker.ts — CSS.escape the id, matching the
  sibling branches on lines 100/102/104.
- packages/studio-server/src/helpers/screenshotClip.ts — catch
  SyntaxError from an invalid selector and return undefined so the
  caller falls back to a full-page screenshot, so the user still sees
  a thumbnail instead of a broken image.

Regression tests for both.

Reported via #hf-cli-feedback (Slack ts=1784218060, darwin/arm64,
CLI 0.7.60): "digit-leading worker IDs broke Studio thumbnail
querySelectorAll".

— Via
This commit is contained in:
Via
2026-07-16 18:07:58 +00:00
parent 3bb26b0f08
commit 9bbdcc4ec9
4 changed files with 151 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/core/src/runtime/picker.ts
+4 -1
View File
@@ -95,7 +95,10 @@ export function createPickerModule(deps: PickerModuleDeps): PickerModule {
function buildElementSelector(el: Element): string {
const htmlEl = el as HTMLElement;
if (htmlEl.id) return `#${htmlEl.id}`;
// Escape the ID so digit-leading or otherwise CSS-illegal ids (e.g. `#0`,
// `#1`) produce valid selectors — `document.querySelector("#0")` throws
// SyntaxError per the CSS spec. Sibling branches below already escape.
if (htmlEl.id) return `#${CSS.escape(htmlEl.id)}`;
const compositionId = el.getAttribute("data-composition-id");
if (compositionId) return `[data-composition-id="${CSS.escape(compositionId)}"]`;
const compositionSrc = el.getAttribute("data-composition-src");