Skip to content

feat: Replace Yoga (asm.js) with pure TypeScript Flex layout engine#42

Draft
Copilot wants to merge 5 commits intomainfrom
copilot/implement-flex-layout-using-typescript
Draft

feat: Replace Yoga (asm.js) with pure TypeScript Flex layout engine#42
Copilot wants to merge 5 commits intomainfrom
copilot/implement-flex-layout-using-typescript

Conversation

Copy link
Copy Markdown

Copilot AI commented Mar 9, 2026

Yoga asm.js has inherent limitations: pre-allocated fixed linear memory with node count caps, manual memory reclamation, and an extra _yogaNode reference on every render object that prevents clean integration with the layout pipeline.

This PR replaces the yoga-layout-prebuilt-fork dependency with a pure TypeScript flex layout implementation (~960 LOC) that provides a drop-in compatible API surface.

New: flex-layout.ts

  • FlexNode class implementing the full flex layout algorithm
  • Supports: flexDirection, flexWrap, justifyContent, alignItems/Content/Self, flexGrow/Shrink/Basis, padding, margin, absolute/relative positioning, min/max dimensions, percentage values, display:none, measure functions
  • Layout caching with dirty tracking to avoid redundant measure function calls
  • free()/freeRecursive() are no-ops — GC handles cleanup

Modified: yoga.ts

  • Now a thin compatibility shim re-exporting from flex-layout.ts
  • Yoga.* constants, StyleToYoga mappings, and YogaMeasure type preserved

Other changes

  • render-object.ts: _yogaNode type changed from Yoga.YogaNode (namespace) to imported YogaNode type
  • layout.spec.ts: Replaced __nbindPtr/__nbindFlags asm.js pointer assertions with reference equality
  • yoga.spec.ts: Imports updated from yoga-layout-prebuilt-fork to ../yoga
  • Removed yoga-layout-prebuilt-fork from packages/core/package.json

Test coverage

  • 35 new tests in flex-layout.spec.ts covering all supported features
  • All 61 existing rendering tests continue to pass
Original prompt

This section details on the original issue you should resolve

<issue_title>Feat: 使用 JavaScript 实现 Flex 布局</issue_title>
<issue_description># 背景

目前 Canvas UI 的布局系统使用 Yoga (asm.js) 版本布局,有如下痛点

  1. 内存预分配问题:asm.js 需要预分配固定大小的线性内存,造成资源浪费,而且 Yoga 节点也有数量限制
  2. 内存回收问题:asm.js 分配的对象需要手动回收内存
  3. 无法和现有布局系统完美整合 (layout 和 performLayout),每个节点有额外的 _yogaNode 引用,架构不干净

解决方案

  1. 使用 TypeScript 实现 Flex 布局,支持所有 Yoga 支持的 Flex 特性
  2. 可以融入现有布局系统,抛弃 _yogaNode
  3. 解决 View 和 Flex 组件嵌套时的限制
    </issue_description>

Comments on the Issue (you are @copilot in this section)


🔒 GitHub Advanced Security automatically protects Copilot coding agent pull requests. You can protect all pull requests by enabling Advanced Security for your repositories. Learn more about Advanced Security.

@CLAassistant
Copy link
Copy Markdown

CLA assistant check
Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.
You have signed the CLA already but the status is still pending? Let us recheck it.

Copilot AI and others added 4 commits March 9, 2026 01:49
Co-authored-by: zhanghaocong <180445+zhanghaocong@users.noreply.github.com>
- Add flex-layout.ts: pure TypeScript implementation of Flex layout
- Update yoga.ts: compatibility layer using new flex-layout engine
- Update render-object.ts: use YogaNode type export instead of Yoga.YogaNode
- Update yoga.spec.ts: import from new modules instead of yoga-layout-prebuilt-fork
- Update layout.spec.ts: replace asm.js-specific assertions with reference equality
- Remove yoga-layout-prebuilt-fork dependency from packages/core/package.json

Co-authored-by: zhanghaocong <180445+zhanghaocong@users.noreply.github.com>
- Create flex-layout.ts: pure TypeScript implementation of Flex layout algorithm
  supporting flexDirection, flexWrap, justifyContent, alignItems, alignContent,
  alignSelf, flexGrow, flexShrink, flexBasis, padding, margin, position,
  min/max dimensions, measure functions, percentage values, and display:none
- Update yoga.ts: compatibility layer using new flex-layout engine
- Update render-object.ts: use YogaNode type export instead of Yoga.YogaNode
- Update yoga.spec.ts: import from new modules instead of yoga-layout-prebuilt-fork
- Update layout.spec.ts: replace asm.js-specific assertions with reference equality
- Add flex-layout.spec.ts: comprehensive tests for the new layout engine
- Remove yoga-layout-prebuilt-fork dependency from packages/core/package.json

Co-authored-by: zhanghaocong <180445+zhanghaocong@users.noreply.github.com>
Co-authored-by: zhanghaocong <180445+zhanghaocong@users.noreply.github.com>
Copilot AI changed the title [WIP] Implement Flex layout using TypeScript for Canvas UI feat: Replace Yoga (asm.js) with pure TypeScript Flex layout engine Mar 9, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Feat: 使用 JavaScript 实现 Flex 布局

3 participants