fix(react/transform): prevent merging JSX elements with dynamic key by gaoachao · Pull Request #547 · lynx-family/lynx-stack

gaoachao · 2025-04-15T11:38:02Z

Summary

close #290

Prevent merging JSX elements with dynamic key attributes by setting should_merge=false
JSX elements with key={expr} will now be wrapped with internal-slot and wrapper

Checklist

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

changeset-bot · 2025-04-15T11:38:06Z

🦋 Changeset detected

Latest commit: 21cbd1c

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

This PR includes changesets to release 0 packages

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

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

codecov · 2025-04-15T11:46:24Z

Codecov Report

Attention: Patch coverage is 31.70732% with 56 lines in your changes missing coverage. Please review.

✅ All tests successful. No failed tests found.

Files with missing lines	Patch %	Lines
..._plugin_snapshot/mod.rs/should_wrap_dynamic_key.js	0.00%	52 Missing ⚠️
...napshot/slot_marker.rs/should_wrap_dynamic_part.js	0.00%	4 Missing ⚠️

📢 Thoughts on this report? Let us know!

codspeed-hq · 2025-04-15T11:47:32Z

CodSpeed Performance Report

Merging #547 will not alter performance

_{Comparing fix/jsx-has-dynamic-key (8a8f7b7) with main (b460d1d)}

Summary

✅ 1 untouched benchmarks

packages/react/transform/src/swc_plugin_snapshot/mod.rs

.../transform/tests/__swc_snapshots__/src/swc_plugin_snapshot/mod.rs/should_wrap_dynamic_key.js

.changeset/violet-peas-chew.md

Signed-off-by: BitterGourd <91231822+gaoachao@users.noreply.github.com>

…ynx-family#547)  ## Summary   close #290 - Prevent merging JSX elements with dynamic key attributes by setting `should_merge=false` - JSX elements with `key={expr}` will now be wrapped with `internal-slot` and `wrapper` ## Checklist  - [x] Tests updated (or not required). - [x] Documentation updated (or not required). --------- Signed-off-by: BitterGourd <91231822+gaoachao@users.noreply.github.com>

This PR was opened by the [Changesets release](https://github.com/changesets/action) GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated. # Releases ## @lynx-js/react@0.107.0 ### Minor Changes - Some of the timing keys are renamed to match the naming convention of the Lynx Engine. ([#438](#438)) - `update_set_state_trigger` -> `updateSetStateTrigger` - `update_diff_vdom_start` -> `updateDiffVdomStart` - `update_diff_vdom_end` -> `updateDiffVdomEnd` - `diff_vdom_start` -> `diffVdomStart` - `diff_vdom_end` -> `diffVdomEnd` - `pack_changes_start` -> `packChangesStart` - `pack_changes_end` -> `packChangesEnd` - `parse_changes_start` -> `parseChangesStart` - `parse_changes_end` -> `parseChangesEnd` - `patch_changes_start` -> `patchChangesStart` - `patch_changes_end` -> `patchChangesEnd` - `hydrate_parse_snapshot_start` -> `hydrateParseSnapshotStart` - `hydrate_parse_snapshot_end` -> `hydrateParseSnapshotEnd` - `mts_render_start` -> `mtsRenderStart` - `mts_render_end` -> `mtsRenderEnd` ### Patch Changes - Add testing library for ReactLynx ([#74](#74)) - Refactor: Improved naming for list operation related types. Renamed `UpdateAction` interface to `ListOperations`. ([#592](#592)) - Support using `"jsx": "react-jsx"` along with `"jsxImportSource": "@lynx-js/react"` in `tsconfig.json`. ([#545](#545)) ```json { "compilerOptions": { "jsx": "react-jsx", "jsxImportSource": "@lynx-js/react" } } ``` This configuration enhances TypeScript definitions for standard JSX elements, providing type errors for unsupported elements like `<div>` or `<button>`. - fix: JSX elements with dynamic `key={expr}` now wrapped in `wrapper` element to prevent merging. ([#547](#547)) ## @lynx-js/web-elements@0.7.0 ### Minor Changes - fix: ([#629](#629)) - typo of `initial-scroll-offset` in scroll-view. - scroll-view's `initial-scroll-index` is changed to `initial-scroll-to-index`. ### Patch Changes - fix: x-image border-radius setting has no effect. ([#638](#638)) - perf: late evaluate document.font.ready ([#604](#604)) - perf: improve raw-text performance ([#601](#601)) - fix: the scroll-x field of scroll-view needs to be handled correctly. ([#635](#635)) Before this, scroll-x of '' would result in no scrolling along x-axis. - feat: x-list supports `need-visible-item-info`, now you can get visible cells info in `scroll`、`scrolltoupper`、`scrolltolower` event. ([#595](#595)) ## @lynx-js/web-mainthread-apis@0.13.0 ### Minor Changes - fix: mts lynx will no longer provide requireModule, requireModuleAsync methods, which is aligned with Native. ([#537](#537)) ### Patch Changes - refactor: isolate SystemInfo ([#628](#628)) Never assign `SystemInfo` on worker's self object. - feat: support thread strategy `all-on-ui` ([#625](#625)) ```html <lynx-view thread-strategy="all-on-ui"></lynx-view> ``` This will make the lynx's main-thread run on the UA's main thread. Note that the `all-on-ui` does not support the HMR & chunk splitting yet. - fix(web): `:root` not work on web platform ([#607](#607)) Note: To solve this issue, you need to upgrade your `react-rsbuild-plugin` - refactor: move mainthread impl into mainthread-api packages ([#622](#622)) - fix(web): css selector not work for selectors with combinator and pseudo-class on WEB ([#608](#608)) like `.parent > :not([hidden]) ~ :not([hidden])` you will need to upgrade your `react-rsbuild-plugin` to fix this issue - Updated dependencies \[[`4ee0465`](4ee0465), [`5a3d9af`](5a3d9af), [`5269cab`](5269cab)]: - @lynx-js/web-constants@0.13.0 ## @lynx-js/rspeedy@0.9.3 ### Patch Changes - Bump Rsbuild v1.3.11 with Rspack v1.3.6. ([#594](#594)) ## create-rspeedy@0.9.3 ### Patch Changes - Add testing library for ReactLynx ([#74](#74)) - Use `"jsx": "react-jsx"` with `"jsxImportSource": "@lynx-js/react"`. ([#545](#545)) ## @lynx-js/qrcode-rsbuild-plugin@0.3.6 ### Patch Changes - Fix the issue where QR code fails to print after initial compilation errors are fixed. ([#610](#610)) ## @lynx-js/react-rsbuild-plugin@0.9.8 ### Patch Changes - Support @lynx-js/react v0.107.0 ([#438](#438)) - fix(web): `:root` not work on web platform ([#607](#607)) Note: To solve this issue, you need to upgrade your `react-rsbuild-plugin` - Refactor: Replace built-in `background-only` implementation with npm package ([#602](#602)) Previously we maintained custom files: - `empty.ts` for background thread - `error.ts` for main thread validation Now adopting the standard `background-only` npm package - fix(web): css selector not work for selectors with combinator and pseudo-class on WEB ([#608](#608)) like `.parent > :not([hidden]) ~ :not([hidden])` you will need to upgrade your `react-rsbuild-plugin` to fix this issue - Updated dependencies \[[`6a5fc80`](6a5fc80), [`06bb78a`](06bb78a), [`f3afaf6`](f3afaf6), [`bf9c685`](bf9c685), [`5269cab`](5269cab)]: - @lynx-js/react-webpack-plugin@0.6.12 - @lynx-js/web-webpack-plugin@0.6.6 - @lynx-js/template-webpack-plugin@0.6.10 - @lynx-js/react-alias-rsbuild-plugin@0.9.8 - @lynx-js/react-refresh-webpack-plugin@0.3.2 - @lynx-js/css-extract-webpack-plugin@0.5.3 ## @lynx-js/react-alias-rsbuild-plugin@0.9.8 ### Patch Changes - Refactor: Replace built-in `background-only` implementation with npm package ([#602](#602)) Previously we maintained custom files: - `empty.ts` for background thread - `error.ts` for main thread validation Now adopting the standard `background-only` npm package ## @lynx-js/test-environment@0.0.1 ### Patch Changes - Add testing library for ReactLynx ([#74](#74)) ## @lynx-js/offscreen-document@0.0.1 ### Patch Changes - feat: support parentNode ([#625](#625)) ## @lynx-js/web-constants@0.13.0 ### Patch Changes - refactor: isolate SystemInfo ([#628](#628)) Never assign `SystemInfo` on worker's self object. - refactor: move mainthread impl into mainthread-api packages ([#622](#622)) - fix(web): css selector not work for selectors with combinator and pseudo-class on WEB ([#608](#608)) like `.parent > :not([hidden]) ~ :not([hidden])` you will need to upgrade your `react-rsbuild-plugin` to fix this issue - Updated dependencies \[]: - @lynx-js/web-worker-rpc@0.13.0 ## @lynx-js/web-core@0.13.0 ### Patch Changes - refactor: isolate SystemInfo ([#628](#628)) Never assign `SystemInfo` on worker's self object. - feat: support thread strategy `all-on-ui` ([#625](#625)) ```html <lynx-view thread-strategy="all-on-ui"></lynx-view> ``` This will make the lynx's main-thread run on the UA's main thread. Note that the `all-on-ui` does not support the HMR & chunk splitting yet. - fix(web): css selector not work for selectors with combinator and pseudo-class on WEB ([#608](#608)) like `.parent > :not([hidden]) ~ :not([hidden])` you will need to upgrade your `react-rsbuild-plugin` to fix this issue - Updated dependencies \[[`4ee0465`](4ee0465), [`74b5bd1`](74b5bd1), [`06bb78a`](06bb78a), [`5a3d9af`](5a3d9af), [`5269cab`](5269cab), [`74b5bd1`](74b5bd1), [`2b069f8`](2b069f8)]: - @lynx-js/web-mainthread-apis@0.13.0 - @lynx-js/web-worker-runtime@0.13.0 - @lynx-js/web-constants@0.13.0 - @lynx-js/offscreen-document@0.0.1 - @lynx-js/web-worker-rpc@0.13.0 ## @lynx-js/web-explorer@0.0.6 ### Patch Changes - fix: allow lynxjs.org to access native modules ([#599](#599)) ## @lynx-js/web-worker-runtime@0.13.0 ### Patch Changes - refactor: isolate SystemInfo ([#628](#628)) Never assign `SystemInfo` on worker's self object. - feat: support thread strategy `all-on-ui` ([#625](#625)) ```html <lynx-view thread-strategy="all-on-ui"></lynx-view> ``` This will make the lynx's main-thread run on the UA's main thread. Note that the `all-on-ui` does not support the HMR & chunk splitting yet. - refactor: move mainthread impl into mainthread-api packages ([#622](#622)) - Updated dependencies \[[`4ee0465`](4ee0465), [`74b5bd1`](74b5bd1), [`06bb78a`](06bb78a), [`5a3d9af`](5a3d9af), [`5269cab`](5269cab), [`74b5bd1`](74b5bd1), [`2b069f8`](2b069f8)]: - @lynx-js/web-mainthread-apis@0.13.0 - @lynx-js/web-constants@0.13.0 - @lynx-js/offscreen-document@0.0.1 - @lynx-js/web-worker-rpc@0.13.0 ## @lynx-js/react-webpack-plugin@0.6.12 ### Patch Changes - Support @lynx-js/react v0.107.0 ([#438](#438)) ## @lynx-js/template-webpack-plugin@0.6.10 ### Patch Changes - Fix CSS import order when `enableCSSSelector` is false. ([#609](#609)) When the `enableCSSSelector` option is set to false, style rule priority is inversely related to `@import` order(Lynx CSS engine has the incorrect behavior). Reversing the import order to maintain correct priority is required. For example: ```css @import "0.css"; @import "1.css"; ``` will convert to: ```css @import "1.css"; @import "0.css"; ``` ## @lynx-js/web-webpack-plugin@0.6.6 ### Patch Changes - fix(web): `:root` not work on web platform ([#607](#607)) Note: To solve this issue, you need to upgrade your `react-rsbuild-plugin` - fix(web): css selector not work for selectors with combinator and pseudo-class on WEB ([#608](#608)) like `.parent > :not([hidden]) ~ :not([hidden])` you will need to upgrade your `react-rsbuild-plugin` to fix this issue ## upgrade-rspeedy@0.9.3 ## @lynx-js/web-worker-rpc@0.13.0 Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

fix(react/transform): prevent merging JSX elements with dynamic key

a9850ba

gaoachao requested review from Yradex, colinaaa, hzy and upupming April 15, 2025 11:38

fix(react/transform): prevent merging JSX elements with dynamic key

aa720ac

upupming reviewed Apr 18, 2025

View reviewed changes

packages/react/transform/src/swc_plugin_snapshot/mod.rs Show resolved Hide resolved

.../transform/tests/__swc_snapshots__/src/swc_plugin_snapshot/mod.rs/should_wrap_dynamic_key.js Show resolved Hide resolved

fix(react/transform): prevent merging JSX elements with dynamic key

397e701

gaoachao requested a review from upupming April 18, 2025 07:56

Merge branch 'main' into fix/jsx-has-dynamic-key

21cbd1c

upupming previously approved these changes Apr 23, 2025

View reviewed changes

.changeset/violet-peas-chew.md Show resolved Hide resolved

hzy previously approved these changes Apr 24, 2025

View reviewed changes

Update violet-peas-chew.md

8a8f7b7

Signed-off-by: BitterGourd <91231822+gaoachao@users.noreply.github.com>

gaoachao dismissed stale reviews from hzy and upupming via 8a8f7b7 April 24, 2025 06:17

gaoachao requested a review from upupming April 24, 2025 06:18

upupming approved these changes Apr 24, 2025

View reviewed changes

gaoachao added this pull request to the merge queue Apr 24, 2025

Merged via the queue into main with commit 0a781fd Apr 24, 2025
24 of 28 checks passed

gaoachao deleted the fix/jsx-has-dynamic-key branch April 24, 2025 08:19

github-actions bot mentioned this pull request Apr 24, 2025

chore: Release 2025-04-27 12:05:46 #597

Merged

colinaaa mentioned this pull request Jul 29, 2025

[Bug]: Using key with multiple children cause wrong render result #1371

Closed

colinaaa mentioned this pull request Aug 15, 2025

fix(react): wrap <wrapper> for JSX with dynamic key #1541

Merged

3 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(react/transform): prevent merging JSX elements with dynamic key#547

fix(react/transform): prevent merging JSX elements with dynamic key#547
gaoachao merged 5 commits intomainfrom
fix/jsx-has-dynamic-key

gaoachao commented Apr 15, 2025

Uh oh!

changeset-bot bot commented Apr 15, 2025 •

edited

Loading

Uh oh!

codecov bot commented Apr 15, 2025 •

edited

Loading

Uh oh!

codspeed-hq bot commented Apr 15, 2025 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

gaoachao commented Apr 15, 2025

Summary

Checklist

Uh oh!

changeset-bot bot commented Apr 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

codecov bot commented Apr 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

codspeed-hq bot commented Apr 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

CodSpeed Performance Report

Merging #547 will not alter performance

Summary

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

changeset-bot bot commented Apr 15, 2025 •

edited

Loading

codecov bot commented Apr 15, 2025 •

edited

Loading

codspeed-hq bot commented Apr 15, 2025 •

edited

Loading