HyperFrames v0.7.46 深度解析:SDK attachSync 实时 DOM 同步、变量 CRUD 与 Figma 机械式动效转换保真门 HyperFrames v0.7.46 深度解析SDK attachSync 实时 DOM 同步、变量 CRUD 与 Figma 机械式动效转换保真门【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes本篇基于 HyperFrames v0.7.46 的发布说明2026-07-09 发布展开覆盖该版本三大核心能力——hyperframes/sdk的attachSync实时 DOM 同步、变量声明/管理的完整 CRUD API以及 Figma 机械式动效转换配套的客观保真门fidelity gate并结合 iframe 适配器源码、会话层实现与 保真门脚本 逐条印证底层原理读完后你将理解这些 API 的调用方式、渲染管线修复跨 realm 位置编辑、静态帧去重、GSAP position holds的触发条件以及如何用 PSNR 运动能量差分客观验证动效转换结果。版本概览v0.7.46 是 HyperFrames 面向编辑器集成与动效资产导入两条主线的功能版本。发布说明releases/v0.7.46.md给出的版本定位是Adds live-DOM sync and variable CRUD tohyperframes/sdk, plus mechanical Figma motion translation with an objective fidelity gate. Also ships several render-pipeline and parser fixes (cross-realm position edits, static-frame dedup call-detection, GSAP position holds).即SDK 侧补齐了实时预览同步与变量管理Core/Skill 侧引入了带客观质量门槛的 Figma 动效转换同时修复了渲染管线与解析器的一组边界问题。下面按 Features、Fixes、Internal、Docs 的顺序结合仓库源码逐一展开。特性一attachSync——把 Composition 编辑镜像到实时文档解决什么问题在 HyperFrames SDK 的编辑器集成场景中PreviewAdapter接口把编辑模型与视觉表面解耦canvas 集成指南 中createIframePreviewAdapter把一个同源iframe承载 composition 的 srcdoc 文档桥接到 SDK提供同步命中测试、60fps 拖拽预览和选择管理。但命中测试与拖拽只覆盖了用户直接操作预览这一条路径——通过检查器面板调用comp.setStyle()、undo/redo、或协作者通过applyPatches()重放的编辑iframe 都不会自动反映。v0.7.46 新增的attachSync正是为这个缺口设计的一旦同时持有preview与comp调用一次即可让后续所有编辑含撤销/重做自动镜像到实时 iframe。import { openComposition, createIframePreviewAdapter } from hyperframes/sdk; const iframe document.querySelectorHTMLIFrameElement(#composition-frame)!; const preview createIframePreviewAdapter(iframe, (op) comp.dispatch(op)); const comp await openComposition(compositionHtml, { preview }); const detach preview.attachSync(comp); // 编辑器卸载或切换 composition 时 detach();调用约定来自指南与实现iframe 必须同源srcdoc或blob:URL跨域访问会抛DOMException适配器不做防护同源约束由调用方保证重复对不同comp调用attachSync会先拆掉旧订阅适合不重挂载 iframe、只换绑定对象的编辑器返回值是detach()函数负责移除事件监听并取消订阅。源码级实现剖析实现位于 IframePreviewAdapter.attachSync逻辑分三层立即全量快照先对iframe.contentDocument应用comp.getOverrides()的当前覆盖集保证重新打开带历史覆盖的 composition 时预览不是空白帧。快照失败只console.warn不会阻断后续订阅——源码注释明确这一点是故意的避免一次坏快照锁死整个同步链路。load 事件再同步给 iframe 注册load监听后再次执行快照。原因是srcdoc/src赋值是异步导航同一 tick 内 attach 会快照到即将被丢弃的旧文档而 load 窗口内提交的补丁会镜像进旧文档并随其消亡。在load上重放快照可让新文档与 composition 状态收敛与 attach/导航的先后顺序无关。patch 事件订阅comp.on(patch, ...)后对每个补丁集调用applyPatchesToDocument但会过滤掉所有path以/script/开头的补丁。源码注释解释了用startsWith而非精确字符串匹配的原因永不镜像script标签改写是文档化契约而不是只覆盖今天已知的路径——将来新增的脚本类型如/script/label也自动落入同一契约。这也对应指南中的表述镜像脚本标签不会重新执行因此 GSAP 脚本重写是attachSync唯一不同步的编辑类型。detach()同时移除load监听和 patch 订阅并清理_syncDetach引用。这一重附着前自动拆除的语义正是版本 Internal 部分新增测试所覆盖的行为见下文。配套测试覆盖v0.7.46 的 Internal 条目列出了四个 attachSync 测试补强与 iframe.sync.test.ts 一一对应覆盖setVariableValue与setTiming的镜像覆盖重新附着时的拆除re-attach teardown与手动detach覆盖对已脱离的 iframecontentDocument不可用调用 attachSync 的健壮性覆盖脚本补丁跳过script-patch skip与样式表补丁镜像。这些用例恰好映射上面三层实现中的每个边界快照失败不阻断订阅、load 收敛、/script/前缀过滤。特性二变量 CRUD——declare/remove/get/list 一次补齐v0.7.46 之前SDK 对变量的操作只到声明层面这一版本把hyperframes/core/variables的完整CompositionVariable类型族引入 SDK 并补齐了管理面 API。从 packages/sdk/src/index.ts 可见SDK 直接重新导出了CompositionVariable、StringVariable、NumberVariable、ColorVariable、BooleanVariable、EnumVariable、FontVariable、ImageVariable、VariableValidationIssue、VariableUsageScan等类型——注释说明这是为了让 Studio 等 SDK 消费方无需直接依赖hyperframes/core即可为变量声明做类型标注。会话层 中新增/统一的方法面包括方法作用备注declareVariable(declaration)声明一个CompositionVariable统一为{ declaration }操作载荷PR #2098 评审反馈的产物removeVariable(id)按 id 移除变量经dispatch({ type: removeVariable, id })removeVariableDeclaration(id)移除变量声明区别于值域操作与上面构成声明/移除两路listVariables()列出全部声明即getVariableDeclarations()的别名面getVariableValue/getVariableValues(overrides?)读取变量值可传入覆盖集结果经validateVariables(values, declarations)校验getVariableUsage()生成VariableUsageReport源码中先用text.includes(getVariables)做廉价预过滤再交给 acorn 解析扫描 composition 源码中的变量使用点实现上的两个值得注意的细节从源码结构看getVariableValues的注释指出文档层面的变量读取只覆盖当前文档运行时的getVariables()core 侧还会遍历内联子组合二者语义不同SDK 侧文档只读当前文档声明与覆盖getVariableUsage对不含getVariables字样的脚本文件直接跳过解析是一个刻意的性能短路。配套测试分布在 session.variables.test.ts、session.variabledecls.test.ts 与 session.variableusage.test.ts分别覆盖值语义、声明 CRUD 与使用扫描。此外 SDK Playground 侧补了一个PreviewAdapter.attachSync的 no-op 桩实现保证非 iframe 适配器实现该接口时的完整性。特性三Figma 机械式动效转换 客观保真门设计动机v0.7.46 在 Core 与 figma Skill 两侧合入mechanical motion translation——即不做看着像就行的动效手工重画而是把 Figma 动画的时序、轨迹、缓动逐字verbatim翻译为 HyperFrames 时间轴并提供一个可量化的验证手段客观保真门。保真门verify-motion.mjs 的测量原理保真门脚本 skills/figma/scripts/verify-motion.mjs 比较 HyperFrames 渲染结果与 Figma 自身export_video输出的运动能量差分核心思想写在文件头注释里对每个采样窗口 [t, tinterval]把参考视频的帧差 ref(ti)-ref(t) 与渲染视频的 render(ti)-render(t) 做 PSNR 比较。静态导入分歧字体、栅格化边缘、亚像素几何——混合保真的天花板在两侧差分中相互抵消因此该分数只隔离编排轨迹、时序、缓动。完整命令与参数node verify-motion.mjs --reference figma-export.mp4 --render out.mp4 \ [--crop WxHXY] [--interval 0.2] [--min-motion-psnr 15]参数说明依据脚本实现参数默认值含义--reference必填Figmaexport_video导出的参考视频--render必填HyperFrames 渲染产物--crop WxHXY无选取渲染帧中的卡片区域。脚本注释明确警告crop 要从渲染产物实际测量卡片左/上边缘 缩放后尺寸不要猜——错误的 crop 会直接读成运动分歧--interval0.2采样窗口步长秒--min-motion-psnr15运动 PSNR 阈值dB任一下低于阈值即判 FAIL实现管线ffprobe取两视频时长与参考分辨率 → 按interval步进抽帧ffmpeg -ss单帧→ 用blendall_modedifference生成两侧帧差图 →ffmpeg -lavfi psnr比较两侧帧差注意实现里刻意用spawnSync数组参数、不走 shellPSNR 统计落在 stderr 上正则提取average:值inf记为 99dB。最终输出每个窗口的motion-psnr与abs绝对帧差 PSNR仅作旁证并给出 min/mean 汇总与 PASS/FAIL 判定PASSmotion matches the Figma export within the static-fidelity ceilingFAILchoreography diverges from the Figma export (check timings, invented keyframes, durations)。阈值标定数据脚本头注释给出了 2026-07 在SDS Unlocked卡片上的实测标定这是 15dB 默认阈值的依据忠实翻译min 20.3dB / mean 27.7dB分歧翻译发明了缩回关键帧、时长错误min 5.0dB / mean 23.1dB15dB 阈值在两组之间留出双侧裕量。转换侧的配套修复保真门要与机械式翻译配合才成立v0.7.46 在 Core 侧同步合入了一批 Figma 映射修复数字开头的元素 id 加前缀Figma mapper prefixes digit-leading element idsDOM id 不能以数字开头映射器统一补前缀父相对子元素几何figma子元素的几何量改为相对父节点计算与 CLI 侧配套同时 CLI 的组子命令不再拒绝子命令 flagsvertical text trim 用 text-box-trim 复现对齐 Figma 的竖排文本裁切行为。Skill 文档侧skills/figma/SKILL.md 及 scripts补充了 verbatim motion translation、wrap-marker 解码、export_video验证流程的说明。特性四Producer——并行 drawElement 的默认关闭路由器Producer侧合入了verified parallel drawElement 的 default-off router从源码看并行绘制drawElement与HF_DE_PARALLEL_STREAM环境变量贯穿了捕获阶段实现captureStreamingStage.ts、capturePlan.ts 等。本版本的语义是该路由器默认关闭只有显式启用且验证过的路径才会走并行 drawElement——这是典型的新特性先旁路、后放量的发布策略降低并行绘制对默认渲染管线的影响面。与之配套的一条关键修复是Producer: Restore HF_DE_PARALLEL_STREAM on every render exit path——路由器曾会修改process.env来表达跨渲染状态现在改为在每条渲染退出路径上恢复原值。修改process.env做跨渲染状态传递是易碎的模式异常路径、提前 return 都会泄漏状态这条修复把该模式收束到可预期行为Stop router from mutating process.env for cross-render state 与 Restore on every exit path 两条 Fix 条目共同保证了该变量的生命周期纪律。渲染管线与解析器修复详解静态帧去重的 call() 检测EngineGSAP 时间轴中的tl.call()意味着某一帧会执行任意 JS——静态帧去重对内容未变的帧复用已绘制结果的前提是帧内容可预测。v0.7.46 在 Engine 侧合入两条互补修复Descend into repeating nested timelines for call() detection检测逻辑现在会递归进入重复出现的嵌套时间轴避免外层扫描漏掉嵌套层的call()Disqualify static-frame dedup on any tl.call()只要时间轴树中任意位置存在tl.call()该 composition 整体取消静态帧去重资格。即宁可多画不可错画任何不可预测的 JS 调用都会使去重判定降级为全量绘制保证确定性优先于性能。GSAP position holdsParsersParsers: Emit global gsap.set position holds before the timeline declaration解析器现在把全局gsap.set产生的位置 hold对时间轴位置参数的固定/延迟声明生成在时间轴声明之前。位置参数若在时间轴定义后才被 pin 住会破坏时间轴内部的相对定位计算前置生成保证了 hold 在构建时间轴时即生效。跨 realm 的位置编辑CoreCore: ApplyPositionEdits fails silently across iframe realms——修复前当编辑器宿主与 composition iframe 分属不同 realm如跨 realm 的getComputedStyle/元素引用位置编辑会静默失败无报错但视觉不更新。这类静默失败对编辑器集成是最难排查的一类问题v0.7.46 将该路径修正为可预期行为。Node 24.16 渲染挂起CLICLI: Bump puppeteer/browsers to ^3.0.6 to fix render hang on Node 24.16 (#2103, PR #2104)在 Node 24.16 环境下旧版puppeteer/browsers会导致渲染挂起升级到^3.0.6修复。适用前提使用较新 Node≥24.16运行hyperframes渲染命令的环境升级后无需其他配置变更。Studio Server 相对时序两条 Studio Server 修复围绕相对data-start引用PreviewAdapter 的getElementTimings现在会忽略相对的data-start引用相对引用不能直接当作绝对时间戳读取相对时序 resolverrelative-timing resolver按 PR #2097 评审反馈修正确保相对起始时间基于正确的参照帧解析。这组修复保证时间轴面板读取到的元素时序与运行时实际播放一致。文档更新v0.7.46 的文档工作集中在 SDK 与 Figma Skill 两侧均已在仓库中落盘可作为权威参考直接阅读canvas 集成指南新增/扩写attachSync、CompositionVariable、id/变量工具函数的用法与注意事项含重附着先拆旧订阅脚本补丁永不镜像两条契约SDK 参考文档attachSync、变量 CRUD、getRootElements/getAllAnimationIds的 API 面Figma Skillverbatim motion translation 工作流、wrap-marker 解码与export_video验证流程。小结这一版本的工程取向从 发布说明 与仓库实现对照来看v0.7.46 的三个取向清晰可辨同步语义显式化attachSync把哪些编辑镜像、哪些不镜像/script/前缀、何时镜像load 收敛全部写成契约并配齐测试主观判断客观化Figma 动效转换不再依赖看起来对而是 15dB 运动 PSNR 门 可复现标定数据20.3/5.0 dB 两组实测;确定性优先静态帧去重在任意tl.call()面前自动降级、并行 drawElement 默认关闭、渲染环境变量在每条退出路径恢复——性能特性都带保险丝。对于在该版本上构建编辑器集成SDK iframe 预览或 Figma 资产导入机械式动效转换 保真门验证的开发者上述 iframe 适配器、会话层与 保真门脚本 是最值得通读的三份文件。【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考