fix: record lazily created nested lists

[gaoachao]

Summary by CodeRabbit

• Bug Fixes

  • Resolved blank-screen rendering when lazily created nested lists are flushed, ensuring nested list items render reliably.

• Tests

  • Added coverage for lazily created nested lists, verifying insert/reuse semantics, flush/hydration flows, and update-list-info behaviors. Updated expectations to align with new nested-list handling.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

Checklist

• Tests updated (or not required).
• Documentation updated (or not required).
• Changeset added, and when a BREAKING CHANGE occurs, it needs to be clearly marked (or not required).

[changeset-bot]

🦋 Changeset detected

Latest commit: 9b727ad

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@lynx-js/react	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[coderabbitai]

📝 Walkthrough

Walkthrough

Adds a changeset and a snapshot update to pre-register lazily created nested list children into pending list updates before flushing; includes new/updated tests to verify recording and update actions for nested lists.

Changes

Cohort / File(s)	Change Summary
Changeset \.changeset/early-crabs-lie.md	New changeset entry documenting a patch for nested-list rendering bug.
Snapshot runtime change packages/react/runtime/src/snapshot.ts	In SnapshotInstance.ensureElements, pre-registers existing child nodes into __pendingListUpdates via onInsertBefore using a ListUpdateInfoRecording when processing a list holder and pending updates exist, before calling flushWithId.
Tests (nested list behavior) packages/react/runtime/__test__/list.test.jsx	Adds a test "should record lazily created nested lists" and updates an inline snapshot expectation (type id change) to validate insert/reuse semantics and emitted update-list-info payloads for lazily created nested lists.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

• Mixed edits: runtime logic change plus new/updated tests.
• Review should focus on correctness of pre-flush registration and interactions with existing flushWithId behavior.
• Pay extra attention to:
  • Potential duplicate registrations or ordering changes when iterating children and calling onInsertBefore.
  • Test expectations that reference internal snapshot/type ids and their stability across runs.
  • Any side effects on hydration/enqueue flows exercised by the new test.

Possibly related PRs

• feat(react): support nested list #1581 — touches nested-list handling and pending-list-update logic in the same snapshot/list flow.
• fix(react): avoid manipulate __pendingListUpdates unless SnapshotInstance tree is changed #1201 — modifies __pendingListUpdates handling and guards around snapshot updates; closely related to pre-flush behavior.
• fix(react): remove and insert list-items those item-key have been changed #1299 — changes list-update recording behavior (ListUpdateInfoRecording), relevant to insert semantics modified here.

Suggested reviewers

• HuJean
• hzy
• DwwWxx

Poem

🥕
I hopped through snapshots in the night,
Found lazy lists that lost their light.
I nudged each child to join the queue,
Now nested items show anew — hooray, we view! 🐇

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main change: a bug fix for recording lazily created nested lists. It is concise, specific, and clearly communicates the primary purpose of the changeset.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix/lazily-created-nested-list

---

📜 Recent review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 9ea6225 and 9b727ad.

📒 Files selected for processing (1)

• packages/react/runtime/__test__/list.test.jsx (2 hunks)

🧰 Additional context used

🧬 Code graph analysis (1)

packages/react/runtime/__test__/list.test.jsx (2)

packages/react/runtime/src/snapshot.ts (1)

• SnapshotInstance (278-665)

packages/react/runtime/src/pendingListUpdates.ts (1)

• __pendingListUpdates (7-44)

🔇 Additional comments (3)

packages/react/runtime/__test__/list.test.jsx (3)

4133-4140: Potential issue: the uiSign parameter should be captured from triggerComponentAtIndex.

At line 4136, you pass 0 as the uiSign to triggerEnqueueComponent, but based on other tests in this file (e.g., line 3903 where triggerComponentAtIndex(parentListRef, 0) returns 4), the actual uiSign is the return value from triggerComponentAtIndex, not the index.

Consider capturing the return value:

-    elementTree.triggerComponentAtIndex(parentListRef, 0);
-    elementTree.triggerComponentAtIndex(parentListRef, 1);
+    const uiSign0 = elementTree.triggerComponentAtIndex(parentListRef, 0);
+    const uiSign1 = elementTree.triggerComponentAtIndex(parentListRef, 1);
     // enqueue c1
-    elementTree.triggerEnqueueComponent(parentListRef, 0);
+    elementTree.triggerEnqueueComponent(parentListRef, uiSign0);

Please verify if the current test passes correctly and whether using the actual uiSign is intended.

---

4048-4263: Test structure and coverage look good for the fix.

The new test case properly validates the scenario where lazily created nested lists are recorded into pending list updates before flushing. It covers:

• Creating nested list structures with parent and child lists
• The componentAtIndex → enqueue → reuse → recreate flow
• Verification that the final state shows 4 list-items with correct update-list-info including the removeAction for the reused nested list

This aligns well with the changes mentioned in the AI summary for SnapshotInstance.ensureElements.

---

4366-4366: Snapshot type reference update is correct.

This numbering change from __snapshot_a94a8_test_76 to __snapshot_a94a8_test_79 is expected due to the three new snapshot definitions (s1, s2, s3) added in the new test case above.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

packages/react/runtime/src/snapshot.ts (1)

338-344: Pre-registration of lazily created list children before flush looks correct; please confirm ensureElements’ lifecycle

The new pre-flush block for list holders:

• Only creates a ListUpdateInfoRecording when __pendingListUpdates.values exists and there’s no existing entry for this.__id.
• Iterates from __firstChild through __nextSibling, calling onInsertBefore for each child before the existing flushWithId(this.__id) call.

This mirrors the existing insertBefore behavior and should ensure lazily created nested list items are actually recorded before the flush, addressing the blank-screen issue without changing behavior for lists that already have pending entries.

One thing to double-check: this assumes ensureElements is effectively one-shot for a given list instance, or at least that flushWithId doesn’t clear values[this.__id] in a way that would cause this block to run again and re-enqueue inserts for already-flushed children. If there’s any path where ensureElements might be called again after a previous flush for the same instance, it could be worth asserting or documenting that invariant, or guarding against double queuing.

📜 Review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 2765cea and 9ea6225.

📒 Files selected for processing (2)

• .changeset/early-crabs-lie.md (1 hunks)
• packages/react/runtime/src/snapshot.ts (1 hunks)

🧰 Additional context used

📓 Path-based instructions (1)

.changeset/*.md

📄 CodeRabbit inference engine (AGENTS.md)

For contributions, generate and commit a Changeset describing your changes

Files:

• .changeset/early-crabs-lie.md

🧠 Learnings (11)

📓 Common learnings

Learnt from: gaoachao
Repo: lynx-family/lynx-stack PR: 1736
File: .changeset/spotty-experts-smoke.md:1-3
Timestamp: 2025-09-12T09:43:04.847Z
Learning: In the lynx-family/lynx-stack repository, empty changeset files (containing only `---\n\n---`) are used for internal changes that modify src/** files but don't require meaningful release notes, such as private package changes or testing-only modifications. This satisfies CI requirements without generating user-facing release notes.

Learnt from: colinaaa
Repo: lynx-family/lynx-stack PR: 1330
File: .changeset/olive-animals-attend.md:1-3
Timestamp: 2025-07-22T09:23:07.797Z
Learning: In the lynx-family/lynx-stack repository, changesets are only required for meaningful changes to end-users such as bugfixes and features. Internal/development changes like chores, refactoring, or removing debug info do not need changeset entries.

📚 Learning: 2025-11-04T10:15:14.965Z

Learnt from: upupming
Repo: lynx-family/lynx-stack PR: 1899
File: packages/react/runtime/__test__/snapshotPatch.test.jsx:725-749
Timestamp: 2025-11-04T10:15:14.965Z
Learning: In packages/react/runtime/src/snapshot.ts, the snapshotCreatorMap type signature uses `Record<string, (uniqId: string) => string>` (returning string) rather than void for backward compatibility. Old lazy bundles still use the pattern `const snapshot_xxx = createSnapshot(...)` directly, which requires createSnapshot to return a value. The snapshotCreatorMap creators that wrap createSnapshot calls must maintain the same return type to support these legacy bundles.

Applied to files:

• packages/react/runtime/src/snapshot.ts

📚 Learning: 2025-09-12T09:43:04.847Z

Learnt from: gaoachao
Repo: lynx-family/lynx-stack PR: 1736
File: .changeset/spotty-experts-smoke.md:1-3
Timestamp: 2025-09-12T09:43:04.847Z
Learning: In the lynx-family/lynx-stack repository, empty changeset files (containing only `---\n\n---`) are used for internal changes that modify src/** files but don't require meaningful release notes, such as private package changes or testing-only modifications. This satisfies CI requirements without generating user-facing release notes.

Applied to files:

• .changeset/early-crabs-lie.md

📚 Learning: 2025-09-12T09:43:04.847Z

Learnt from: gaoachao
Repo: lynx-family/lynx-stack PR: 1736
File: .changeset/spotty-experts-smoke.md:1-3
Timestamp: 2025-09-12T09:43:04.847Z
Learning: In the lynx-family/lynx-stack repository, private packages (marked with "private": true in package.json) like lynx-js/react-transform don't require meaningful changeset entries even when their public APIs change, since they are not published externally and only affect internal development.

Applied to files:

• .changeset/early-crabs-lie.md

📚 Learning: 2025-07-22T09:23:07.797Z

Learnt from: colinaaa
Repo: lynx-family/lynx-stack PR: 1330
File: .changeset/olive-animals-attend.md:1-3
Timestamp: 2025-07-22T09:23:07.797Z
Learning: In the lynx-family/lynx-stack repository, changesets are only required for meaningful changes to end-users such as bugfixes and features. Internal/development changes like chores, refactoring, or removing debug info do not need changeset entries.

Applied to files:

• .changeset/early-crabs-lie.md

📚 Learning: 2025-07-22T09:26:16.722Z

Learnt from: colinaaa
Repo: lynx-family/lynx-stack PR: 1330
File: .changeset/olive-animals-attend.md:1-3
Timestamp: 2025-07-22T09:26:16.722Z
Learning: In the lynx-family/lynx-stack repository, CI checks require changesets when files matching the pattern "src/**" are modified (as configured in .changeset/config.json). For internal changes that don't need meaningful changesets, an empty changeset file is used to satisfy the CI requirement while not generating any release notes.

Applied to files:

• .changeset/early-crabs-lie.md

📚 Learning: 2025-08-19T11:25:36.127Z

Learnt from: colinaaa
Repo: lynx-family/lynx-stack PR: 1558
File: .changeset/solid-squids-fall.md:2-2
Timestamp: 2025-08-19T11:25:36.127Z
Learning: In the lynx-family/lynx-stack repository, changesets should use the exact package name from package.json#name, not generic or unscoped names. Each package has its own specific scoped name (e.g., "lynx-js/react-transform" for packages/react/transform).

Applied to files:

• .changeset/early-crabs-lie.md

📚 Learning: 2025-08-07T04:00:59.645Z

Learnt from: colinaaa
Repo: lynx-family/lynx-stack PR: 1454
File: pnpm-workspace.yaml:46-46
Timestamp: 2025-08-07T04:00:59.645Z
Learning: In the lynx-family/lynx-stack repository, the webpack patch (patches/webpack5.101.0.patch) was created to fix issues with webpack5.99.9 but only takes effect on webpack5.100.0 and later versions. The patchedDependencies entry should use "webpack@^5.100.0" to ensure the patch applies to the correct version range.

Applied to files:

• .changeset/early-crabs-lie.md

📚 Learning: 2025-09-18T04:43:54.426Z

Learnt from: gaoachao
Repo: lynx-family/lynx-stack PR: 1771
File: packages/react/transform/tests/__swc_snapshots__/src/swc_plugin_snapshot/mod.rs/basic_component_with_static_sibling.js:2-2
Timestamp: 2025-09-18T04:43:54.426Z
Learning: In the lynx-family/lynx-stack repository, the `add_pure_comment` function in packages/react/transform/src/swc_plugin_compat/mod.rs (around lines 478-482) is specifically for `wrapWithLynxComponent` calls, not `createSnapshot` calls. The PURE comment injection for `createSnapshot` is handled separately in swc_plugin_snapshot/mod.rs.

Applied to files:

• .changeset/early-crabs-lie.md

📚 Learning: 2025-08-12T16:09:32.413Z

Learnt from: colinaaa
Repo: lynx-family/lynx-stack PR: 1497
File: packages/react/transform/tests/__swc_snapshots__/src/swc_plugin_snapshot/mod.rs/basic_full_static.js:9-10
Timestamp: 2025-08-12T16:09:32.413Z
Learning: In the Lynx stack, functions prefixed with `__` that are called in transformed code may be injected globally by the Lynx Engine at runtime rather than exported from the React runtime package. For example, `__CreateFrame` is injected globally by the Lynx Engine, not exported from lynx-js/react.

Applied to files:

• .changeset/early-crabs-lie.md

📚 Learning: 2025-08-13T09:20:00.936Z

Learnt from: upupming
Repo: lynx-family/lynx-stack PR: 1502
File: packages/react/testing-library/types/entry.d.ts:71-71
Timestamp: 2025-08-13T09:20:00.936Z
Learning: In lynx-js/react testing library, wrapper components must have children as a required prop because they are always called with `h(WrapperComponent, null, innerElement)` where innerElement is passed as children. The type `React.JSXElementConstructor<{ children: React.ReactNode }>` correctly requires children to be mandatory.

Applied to files:

• .changeset/early-crabs-lie.md

🔇 Additional comments (1)

.changeset/early-crabs-lie.md (1)

1-5: Changeset content and targeting look correct

The changeset correctly targets @lynx-js/react with a patch bump and gives a concise, user-facing description of the nested-list blank screen bugfix. This aligns with the repo’s guidance on when to add changesets and how to name packages.

Based on learnings, this matches the expected pattern for user-visible bugfixes in this repo.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ All tests successful. No failed tests found.

📢 Thoughts on this report? Let us know!

[codspeed-hq]

CodSpeed Performance Report

Merging #1963 will not alter performance

_{Comparing fix/lazily-created-nested-list (9b727ad) with main (2765cea)}

Summary

✅ 63 untouched
⏩ 3 skipped¹

Footnotes

1. 3 benchmarks were skipped, so the baseline results were used instead. If they were deleted from the codebase, click here and archive them to remove them from the performance reports. ↩

[relativeci]

React Example

#6227 Bundle Size — 234.54KiB (+0.08%).

9b727ad(current) vs 55cb796 main#6218(baseline)

Bundle metrics   2 changes

	Current #6227	Baseline #6218
Initial JS	0B	0B
Initial CSS	0B	0B
Cache Invalidation	37.8%	0%
Chunks	0	0
Assets	4	4
Modules	164	164
Duplicate Modules	66	66
Duplicate Code	46.72%(+0.02%)	46.71%
Packages	2	2
Duplicate Packages	0	0

Bundle size by type   1 change 1 regression

	Current #6227	Baseline #6218
IMG	145.76KiB	145.76KiB
Other	88.79KiB (+0.22%)	88.59KiB

Bundle analysis report Branch fix/lazily-created-nested-list Project dashboard

---

^{Generated by RelativeCI Documentation Report issue}

[relativeci]

Web Explorer

#6361 Bundle Size — 377.5KiB (0%).

9b727ad(current) vs 2765cea main#6346(baseline)

Bundle metrics   2 changes

	Current #6361	Baseline #6346
Initial JS	146.32KiB	146.32KiB
Initial CSS	32.38KiB	32.38KiB
Cache Invalidation	0%	0%
Chunks	8	8
Assets	8	8
Modules	229(-0.87%)	231
Duplicate Modules	16	16
Duplicate Code	2.96%(+0.34%)	2.95%
Packages	4	4
Duplicate Packages	0	0

Bundle size by type  no changes

	Current #6361	Baseline #6346
JS	243.18KiB	243.18KiB
Other	101.94KiB	101.94KiB
CSS	32.38KiB	32.38KiB

Bundle analysis report Branch fix/lazily-created-nested-list Project dashboard

---

^{Generated by RelativeCI Documentation Report issue}