Skip to content

feat: add stable React node keys - #11

Merged
tiye merged 1 commit into
mainfrom
codex/react-key-conformance
Aug 30, 2026
Merged

tiye merged 1 commit into
mainfrom
codex/react-key-conformance

Conversation

@tiye

@tiye tiye commented Aug 30, 2026

Copy link
Copy Markdown
Member

Summary

  • add VirtualNode::with_key for elements, components, fragments, and text
  • key TodoMVC list entries by stable todo IDs
  • fail browser regressions on React console warnings and errors
  • document the reconciliation-key API and update the generated interface

Verification

  • moon check --target js
  • moon test (38 passed)
  • moon info && moon fmt
  • corepack yarn build
  • real-browser TodoMVC flow covering editing, creation, toggle-all, filtering, and clearing; no browser warnings or errors

Relates to #7.

Copilot AI lite review requested due to automatic review settings August 30, 2026 11:30
@tiye
tiye merged commit 89ba8a2 into main Aug 30, 2026
2 checks passed
@tiye
tiye deleted the codex/react-key-conformance branch August 30, 2026 11:31

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR introduces a stable “key” API for MoonBit VirtualNodes so React can reconcile dynamic collections without warnings, then applies it to the TodoMVC example and tightens browser regression checks to fail on React console warnings/errors.

Changes:

  • Added VirtualNode::with_key plus the needed JS interop to assign reconciliation keys across elements, components, fragments, and text.
  • Keyed TodoMVC list items by stable todo IDs to avoid index-based reconciliation.
  • Made the Playwright TodoMVC regression fail on browser console warnings/errors, and documented the new API (README/changelog) while updating the generated interface.

Reviewed changes

Copilot reviewed 8 out of 8 changed files in this pull request and generated no comments.

Show a summary per file
File Description
tests/todomvc.spec.mjs Captures console warnings/errors during the TodoMVC flow and fails the test if any occur.
src/react.mbt Adds VirtualNode::with_key and JS interop (cloneElement) to support stable keys across node kinds.
src/react_test.mbt Extends the test React stub with cloneElement and adds a regression test for with_key.
src/pkg.generated.mbti Exposes VirtualNode::with_key in the generated public interface.
src/main/todolist.mbt Applies stable keys to rendered todo items using todo.id.
README.md Documents recommended with_key usage for dynamic collections.
index.html Adds a data URL favicon to avoid console noise (e.g., favicon 404) in browser regressions.
CHANGELOG.md Notes the new with_key API and stricter browser regression behavior.

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

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.

2 participants