fix(web): when a list-item is deleted from list, the deleted list-ite…

[Sherry-hue]

…m is still showed incorrectly

Summary

fix: when a list-item is deleted from list, the deleted list-item is still showed incorrectly.

This is because the enqueueComponent method does not delete the node from the Element Tree. It is only to maintain all nodes on the RL side, and lynx web needs to delete the dom additionally.

Checklist

• Tests updated (or not required).
• Documentation updated (or not required).

Summary by CodeRabbit

• Bug Fixes

  • Deleted list items no longer remain visible — UI now properly removes items from the DOM and display.

• Tests

  • Expanded update-list tests (insert/remove/mixed/randomized) and added a new visual test to verify list removal toggles and states.

• Style

  • Added stylesheet for the new list removal test page to ensure consistent layout.

• Notes

  • No public API signatures were changed.

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

[changeset-bot]

🦋 Changeset detected

Latest commit: 07a424a

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

This PR includes changesets to release 11 packages

Name	Type
@lynx-js/web-mainthread-apis	Patch
@lynx-js/web-worker-rpc	Patch
@lynx-js/web-constants	Patch
@lynx-js/web-core-server	Patch
@lynx-js/web-core	Patch
@lynx-js/web-worker-runtime	Patch
@lynx-js/web-core-wasm	Patch
upgrade-rspeedy	Patch
@lynx-js/web-rsbuild-server-middleware	Patch
@lynx-js/rspeedy	Patch
create-rspeedy	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

[codspeed-hq]

CodSpeed Performance Report

Merging this PR will improve performance by 7.81%

_{Comparing Sherry-hue:fix/list-item-remove (07a424a) with main (5b589ab)}

Summary

⚡ 2 improved benchmarks
✅ 61 untouched benchmarks
⏩ 3 skipped benchmarks¹

Performance Changes

	Benchmark	BASE	HEAD	Efficiency
⚡	transform 1000 view elements	46.8 ms	43.7 ms	+6.97%
⚡	basic-performance-nest-level-100	7.4 ms	6.9 ms	+7.81%

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. ↩

[hzy]

Good job! But the test feels a bit naive... A stress test like rendering a randomly shuffled array can help make sure your implementation correct.

function shuffleArray(array) {
    for (let i = array.length - 1; i >= 1; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [array[i], array[j]] = [array[j], array[i]];
    }
}

[relativeci]

Web Explorer

#7302 Bundle Size — 383.96KiB (+0.05%).

07a424a(current) vs 5b589ab main#7300(baseline)

Bundle metrics   3 changes

	Current #7302	Baseline #7300
Initial JS	154.12KiB	154.12KiB
Initial CSS	35.05KiB	35.05KiB
Cache Invalidation	7.45%	0%
Chunks	8	8
Assets	8	8
Modules	236(-0.84%)	238
Duplicate Modules	16	16
Duplicate Code	2.99%(-0.33%)	3%
Packages	4	4
Duplicate Packages	0	0

Bundle size by type   1 change 1 regression

	Current #7302	Baseline #7300
JS	251.89KiB (+0.07%)	251.71KiB
Other	97.02KiB	97.02KiB
CSS	35.05KiB	35.05KiB

Bundle analysis report Branch Sherry-hue:fix/list-item-remove Project dashboard

---

^{Generated by RelativeCI Documentation Report issue}

[relativeci]

React Example

#1733 Bundle Size — 232.61KiB (0%).

04dc052(current) vs e10c9fc main#1725(baseline)

Bundle metrics  no changes

	Current #1733	Baseline #1725
Initial JS	0B	0B
Initial CSS	0B	0B
Cache Invalidation	0%	0%
Chunks	0	0
Assets	4	4
Modules	143	143
Duplicate Modules	55	55
Duplicate Code	45.68%	45.68%
Packages	2	2
Duplicate Packages	0	0

Bundle size by type  no changes

	Current #1733	Baseline #1725
IMG	145.76KiB	145.76KiB
Other	86.86KiB	86.86KiB

Bundle analysis report Branch Sherry-hue:fix/list-item-remove Project dashboard

---

^{Generated by RelativeCI Documentation Report issue}

[github-actions]

This pull request has been automatically marked as stale because it has not had recent activity. If this pull request is still relevant, please leave any comment (for example, "bump").

[coderabbitai]

📝 Walkthrough

Walkthrough

Fixes list-item deletion visibility by changing the removeAction payload shape and updating main-thread update logic to remove DOM nodes before insertions; adds unit and E2E tests and a changeset patching three packages. (50 words)

Changes

Cohort / File(s)	Summary
Type Definition Update packages/web-platform/web-constants/src/types/MainThreadGlobalThis.ts	UpdateListInfoAttributeValue.removeAction changed from { position: number }[] to number[].
Core Logic Implementation packages/web-platform/web-mainthread-apis/ts/createMainThreadGlobalThis.ts	Removal handled pre-insertion: enqueue removal signs and remove corresponding DOM nodes before inserts; insertion loop adjusted to move existing elements into new positions with safety checks.
Unit Tests packages/web-platform/web-tests/tests/main-thread-apis.test.ts	Expanded update-list-info tests by adding a second set of insert/remove/mixed/stress scenarios (duplicates existing test blocks).
E2E Test & Assets packages/web-platform/web-tests/tests/react.spec.ts, packages/web-platform/web-tests/tests/react/basic-element-list-remove-action/index.jsx, packages/web-platform/web-tests/tests/react/basic-element-list-remove-action/index.css	New E2E test basic-element-list-remove-action plus test page and styles verifying list remove/restore transitions.
Changeset Metadata .changeset/cuddly-roses-start.md	New changeset describing patch releases for @lynx-js/web-mainthread-apis, @lynx-js/web-worker-rpc, and @lynx-js/web-constants.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

• ci(benchmark/react): enable list in benchmark #1635 — Touches list update/create flows and componentAtIndex handling; likely related to list DOM/movement logic.

Suggested reviewers

• hzy

Poem

🐇 I nudged a ghost node off the floor,
Hopped through DOM holes and closed the door,
Queued a sign, then pulled a thread,
Moved the pieces, cleared the spread,
Tests turned green — I thumped in glee.

🚥 Pre-merge checks | ✅ 1 | ❌ 2

❌ Failed checks (1 warning, 1 inconclusive)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.
Title check	❓ Inconclusive	The title is truncated and incomplete, ending with 'the deleted list-ite…' which makes it vague and hard to understand the full scope of the fix.	Complete the title to clearly state the fix, such as: 'fix(web): remove deleted list-items from DOM' or similar concise statement.

✅ Passed checks (1 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

---

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.}

[codecov]

Codecov Report

❌ Patch coverage is 0% with 19 lines in your changes missing coverage. Please review.
✅ All tests successful. No failed tests found.

Files with missing lines	Patch %	Lines
...b-mainthread-apis/ts/createMainThreadGlobalThis.ts	0.00%	19 Missing ⚠️

📢 Thoughts on this report? Let us know!

[coderabbitai]

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In @.changeset/cuddly-roses-start.md:
- Around line 7-9: Update the release-note text to improve grammar and clarity:
rephrase the entry about deleted list-items so it reads something like "Fix:
when a list-item is deleted, it could still be shown because enqueueComponent
does not remove the node from the Element Tree; enqueueComponent only maintains
the display node on RL, so lynx web must explicitly delete the DOM node." Ensure
you reference the terms enqueueComponent, Element Tree, RL, and lynx web exactly
as in the note and replace the current two-sentence fragment with this single
clear sentence.

🧹 Nitpick comments (3)

packages/web-platform/web-tests/tests/react/basic-element-list-remove-action/index.css (1)

18-23: Add border-style so the list-item border actually renders.

Without a border style, browsers treat the border as none, so the green border won’t show. Consider adding border-style: solid for clarity in screenshot-based tests.

[select_commentary]

♻️ Suggested change

list-item {
  border-width: 5px;
+ border-style: solid;
  border-color: green;
  width: 100%;
  height: 100px;
  background-color: yellow;
}

packages/web-platform/web-tests/tests/main-thread-apis.test.ts (1)

1399-1550: Consider a deterministic shuffle stress test for list mutations.

The three tests cover core flows, but a shuffled sequence of insert/remove positions would better exercise edge ordering. To avoid flakiness, keep the shuffle deterministic (seeded or fixed permutations).

🧪 Example deterministic shuffle helper

const makeRng = (seed = 123456789) => () => {
  seed = (1664525 * seed + 1013904223) >>> 0;
  return seed / 2 ** 32;
};

const shuffleArray = <T,>(arr: T[], rng = makeRng()) => {
  for (let i = arr.length - 1; i > 0; i--) {
    const j = Math.floor(rng() * (i + 1));
    [arr[i], arr[j]] = [arr[j], arr[i]];
  }
  return arr;
};

packages/web-platform/web-tests/tests/react.spec.ts (1)

4647-4660: Consider adding a stress test with shuffled array rendering.

The test covers basic sequential removal scenarios, which validates the fix. Per reviewer feedback, consider adding an additional test case that renders a randomly shuffled array to more rigorously validate the removal logic under varied ordering conditions.

The suggested shuffleArray function from the review comments:

function shuffleArray(array) {
    for (let i = array.length - 1; i >= 1; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [array[i], array[j]] = [array[j], array[i]];
    }
}