feat(react/runtime): impl list batch render by DwwWxx · Pull Request #624 · lynx-family/lynx-stack

DwwWxx · 2025-04-24T13:51:48Z

No description provided.

changeset-bot · 2025-04-24T13:51:52Z

🦋 Changeset detected

Latest commit: bfa623a

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

CLAassistant · 2025-04-24T13:51:55Z

All committers have signed the CLA.

Copilot

Pull Request Overview

This PR implements a list batch render feature in the react runtime. Key changes include modifying the componentAtIndexFactory to return a tuple with both single and batch callbacks, updating __UpdateListCallbacks calls across the codebase to accommodate the new API, and adjusting tests and examples to demonstrate the new batch render functionality.

Reviewed Changes

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

Show a summary per file

File	Description
packages/react/runtime/src/opcodes.ts	Updates to use the new tuple return from componentAtIndexFactory.
packages/react/runtime/src/list.ts	Refactored componentAtIndexFactory to return [componentAtIndex, componentAtIndexes] with new parameters.
packages/react/runtime/src/hydrate.ts	Adjusted hydrate logic to pass the proper callbacks to __UpdateListCallbacks.
packages/react/runtime/test/utils/nativeMethod.ts	Added new property support for componentAtIndexes in native method bindings.
examples/list/src/index.tsx	Basic update to align with the new runtime API.
examples/list/src/App.tsx	Updated list example to incorporate the new batch render strategy.
examples/list/lynx.config.js	Configuration updates for plugin integration and tooling support.
.changeset/calm-apples-buy.md	Changeset file describing the new list batch render feature.

Files not reviewed (3)

examples/list/package.json: Language not supported
examples/list/tsconfig.json: Language not supported
pnpm-lock.yaml: Language not supported

codecov · 2025-04-24T14:01:58Z

Bundle Report

Changes will increase total bundle size by 986 bytes (0.15%) ⬆️. This is within the configured threshold ✅

Detailed changes

Bundle name	Size	Change
@lynx-js/example-react-lynx-cjs	317.61kB	986 bytes (0.31%) ⬆️

Affected Assets, Files, and Routes:

view changes for bundle: @lynx-js/example-react-lynx-cjs

Assets Changed:

Asset Name	Size Change	Total Size	Change (%)
`main.lynx.bundle`	612 bytes	88.04kB	0.7%
`.rspeedy/main/main-thread.js`	374 bytes	40.06kB	0.94%

codspeed-hq · 2025-04-24T14:06:17Z

CodSpeed Performance Report

Merging #624 will not alter performance

_{Comparing DwwWxx:p/dingwang.wxx/impl_batch_render (bfa623a) with main (9ad394e)}

Summary

✅ 1 untouched benchmarks

Copilot

Pull Request Overview

This PR implements a new batch rendering feature for list components in the React runtime. The key changes include:

Updating the componentAtIndexFactory API to return a tuple with both componentAtIndex and componentAtIndexes callbacks.
Modifying __UpdateListCallbacks across several files (opcodes.ts, list.ts, hydrate.ts, nativeMethod.ts) to accept the additional callback.
Updating examples and configuration to integrate and illustrate the new experimental batch render strategy.

Reviewed Changes

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

Show a summary per file

File	Description
packages/react/runtime/src/opcodes.ts	Updated destructuring of componentAtIndexFactory result and __UpdateListCallbacks call signature.
packages/react/runtime/src/list.ts	Extended componentAtIndexFactory with new parameters and updated list creation logic.
packages/react/runtime/src/hydrate.ts	Adjusted hydration logic to pass the new componentAtIndexes callback.
packages/react/runtime/test/utils/nativeMethod.ts	Added componentAtIndexes integration in native method utilities.
examples/list	Updated usage examples and configuration to showcase the experimental batch render strategies.

Files not reviewed (3)

examples/list/package.json: Language not supported
examples/list/tsconfig.json: Language not supported
pnpm-lock.yaml: Language not supported

Comments suppressed due to low confidence (2)

packages/react/runtime/src/list.ts:240

The new batch render logic and parameters (enableBatchRender, asyncFlush) in componentAtIndexFactory introduce several conditional branches. Please add unit tests to ensure all branches execute as expected.

export function componentAtIndexFactory(

packages/react/runtime/src/opcodes.ts:55

Ensure that the updated API from componentAtIndexFactory, which now returns a tuple, is fully supported by downstream consumers such as __UpdateListCallbacks, to avoid any runtime mismatches.

const [componentAtIndex, componentAtIndexes] = componentAtIndexFactory(top.childNodes);

hzy · 2025-04-25T07:46:49Z

hi, @DwwWxx Thanks for your contribution!

Could u add some unit tests?

codecov · 2025-04-27T08:08:29Z

Codecov Report

Attention: Patch coverage is 69.47368% with 29 lines in your changes missing coverage. Please review.

✅ All tests successful. No failed tests found.

Files with missing lines	Patch %	Lines
...kages/react/runtime/__test__/utils/nativeMethod.ts	0.00%	22 Missing ⚠️
packages/react/runtime/src/list.ts	89.70%	7 Missing ⚠️

📢 Thoughts on this report? Let us know!

## Summary  Update the changeset of #624.  ## Checklist  - [ ] Tests updated (or **not required**). - [ ] Documentation updated (or **not required**).

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.108.0 ### Minor Changes - Reverts #239: "batch multiple patches for main thread communication" ([#649](#649)) This reverts the change that batched updates sent to the main thread in a single render pass. ### Patch Changes - Add support for batch rendering in `<list>` with async resolution of sub-tree properties and element trees. ([#624](#624)) Use the `experimental-batch-render-strategy` attribute of `<list>`: ```tsx <list /** * Batch render strategy: * 0: (Default) Disabled - No batch rendering * 1: Basic - Only batch rendering enabled * 2: Property Resolution - Batch render with async property resolution for list item subtree * 3: Full Resolution - Batch render with async property and element tree resolution for list item subtree */ experimental-batch-render-strategy={3} ></list> ``` - rename @lynx-js/test-environment to @lynx-js/testing-environment ([#704](#704)) - Auto import `@lynx-js/react/experimental/lazy/import` when using `import(url)` ([#667](#667)) - Auto import `@lynx-js/react/experimental/lazy/import` when using `<component is={url} />` ([#666](#666)) - Fixed a race condition when updating states and GlobalProps simultaneously. ([#707](#707)) This fix prevents the "Attempt to render more than one `<page />`" error from occurring during normal application usage. - Fix error like `Unterminated string constant` when using multi-line JSX StringLiteral. ([#654](#654)) ## @lynx-js/testing-environment@0.1.0 ### Minor Changes - Switch to ESM package format by setting `"type": "module"`. ([#703](#703)) ### Patch Changes - rename @lynx-js/test-environment to @lynx-js/testing-environment ([#704](#704)) ## @lynx-js/web-platform-rsbuild-plugin@0.1.0 ### Minor Changes - feat: add new parameter `nativeModulesPath` to `pluginWebPlatform({})`. ([#668](#668)) After this commit, you can use `nativeModulesPath` to package custom nativeModules directly into the worker, and no longer need to pass `nativeModulesMap` to lynx-view. Here is an example: - `native-modules.ts`: ```ts // index.native-modules.ts export default { CustomModule: function (NativeModules, NativeModulesCall) { return { async getColor(data, callback) { const color = await NativeModulesCall("getColor", data); callback(color); }, }; }, }; ``` - plugin config: ```ts // rsbuild.config.ts import { pluginWebPlatform } from "@lynx-js/web-platform-rsbuild-plugin"; import { defineConfig } from "@rsbuild/core"; export default defineConfig({ plugins: [ pluginWebPlatform({ // replace with your actual native-modules file path nativeModulesPath: path.resolve(__dirname, "./index.native-modules.ts"), }), ], }); ``` - feat: Provides Rsbuild plugin for Web projects in Lynx Web Platform, currently supports polyfill about lynx. ([#606](#606)) ## @lynx-js/rspeedy@0.9.4 ### Patch Changes - Bump Rsbuild v1.3.17 with Rspack v1.3.9. ([#708](#708)) - Support `performance.profile`. ([#691](#691)) - Support CLI flag `--mode` to specify the build mode. ([#723](#723)) - Enable native Rsdoctor plugin by default. ([#688](#688)) Set `tools.rsdoctor.experiments.enableNativePlugin` to `false` to use the old JS plugin. ```js import { defineConfig } from "@lynx-js/rspeedy"; export default defineConfig({ tools: { rsdoctor: { experiments: { enableNativePlugin: false, }, }, }, }); ``` See [Rsdoctor - 1.0](https://rsdoctor.dev/blog/release/release-note-1_0#-faster-analysis) for more details. - Bump Rsbuild v1.3.14 with Rspack v1.3.8. ([#630](#630)) ## @lynx-js/react-rsbuild-plugin@0.9.9 ### Patch Changes - Fix runtime error: "SyntaxError: Identifier 'i' has already been declared". ([#651](#651)) - Enable runtime profiling when `performance.profile` is set to true. ([#722](#722)) - fix: resolve page crash on development mode when enabling `experimental_isLazyBundle: true` ([#653](#653)) - Support `@lynx-js/react` v0.108.0. ([#649](#649)) - Updated dependencies \[[`ea4da1a`](ea4da1a), [`ca15dda`](ca15dda), [`f8d369d`](f8d369d), [`ea4da1a`](ea4da1a)]: - @lynx-js/react-webpack-plugin@0.6.13 - @lynx-js/runtime-wrapper-webpack-plugin@0.0.10 - @lynx-js/react-alias-rsbuild-plugin@0.9.9 - @lynx-js/react-refresh-webpack-plugin@0.3.2 ## @lynx-js/tailwind-preset@0.0.3 ### Patch Changes - Support `hidden`, `no-underline` and `line-through` utilities. ([#745](#745)) ## @lynx-js/offscreen-document@0.0.2 ### Patch Changes - feat: support touch events ([#641](#641)) ## @lynx-js/web-constants@0.13.1 ### Patch Changes - feat: support touch events for MTS ([#641](#641)) now we support - main-thread:bindtouchstart - main-thread:bindtouchend - main-thread:bindtouchmove - main-thread:bindtouchcancel - Updated dependencies \[]: - @lynx-js/web-worker-rpc@0.13.1 ## @lynx-js/web-core@0.13.1 ### Patch Changes - fix: some inline style properties cause crash ([#647](#647)) add support for the following css properties - mask - mask-repeat - mask-position - mask-clip - mask-origin - mask-size - gap - column-gap - row-gap - image-rendering - hyphens - offset-path - offset-distance - feat: support touch events for MTS ([#641](#641)) now we support - main-thread:bindtouchstart - main-thread:bindtouchend - main-thread:bindtouchmove - main-thread:bindtouchcancel - feat: add SystemInfo.screenWidth and SystemInfo.screenHeight ([#641](#641)) - Updated dependencies \[[`c9ccad6`](c9ccad6), [`9ad394e`](9ad394e), [`f4cfb70`](f4cfb70), [`c9ccad6`](c9ccad6), [`839d61c`](839d61c)]: - @lynx-js/offscreen-document@0.0.2 - @lynx-js/web-mainthread-apis@0.13.1 - @lynx-js/web-worker-runtime@0.13.1 - @lynx-js/web-constants@0.13.1 - @lynx-js/web-worker-rpc@0.13.1 ## @lynx-js/web-elements@0.7.1 ### Patch Changes - fix(web): x-swiper-item threshold updated to 20 ([#639](#639)) - fix: In React19, setter and getter functions are treated as properties, making it impossible to retrieve the current value via attributes. ([#639](#639)) ## @lynx-js/web-explorer@0.0.7 ### Patch Changes - feat: use nativeModulesPath instead of nativeModulesMap to lynx-view. ([#668](#668)) - fix: fork @vant/touch-emulator and make it work with shadowroot ([#662](#662)) - fix: loading errors caused by script import order ([#665](#665)) - chore: update homepage ([#645](#645)) ## @lynx-js/web-mainthread-apis@0.13.1 ### Patch Changes - fix: some inline style properties cause crash ([#647](#647)) add support for the following css properties - mask - mask-repeat - mask-position - mask-clip - mask-origin - mask-size - gap - column-gap - row-gap - image-rendering - hyphens - offset-path - offset-distance - feat: support touch events for MTS ([#641](#641)) now we support - main-thread:bindtouchstart - main-thread:bindtouchend - main-thread:bindtouchmove - main-thread:bindtouchcancel - Updated dependencies \[[`c9ccad6`](c9ccad6)]: - @lynx-js/web-constants@0.13.1 ## @lynx-js/web-worker-runtime@0.13.1 ### Patch Changes - feat: support for using `lynx.queueMicrotask`. ([#702](#702)) - feat: support touch events for MTS ([#641](#641)) now we support - main-thread:bindtouchstart - main-thread:bindtouchend - main-thread:bindtouchmove - main-thread:bindtouchcancel - feat: provide comments for `@lynx-js/web-platform-rsbuild-plugin`. ([#668](#668)) - Updated dependencies \[[`c9ccad6`](c9ccad6), [`9ad394e`](9ad394e), [`c9ccad6`](c9ccad6)]: - @lynx-js/offscreen-document@0.0.2 - @lynx-js/web-mainthread-apis@0.13.1 - @lynx-js/web-constants@0.13.1 - @lynx-js/web-worker-rpc@0.13.1 ## @lynx-js/react-webpack-plugin@0.6.13 ### Patch Changes - feat: add `experimental_isLazyBundle` option, it will disable snapshot HMR for standalone lazy bundle ([#653](#653)) - Add the `profile` option to control whether `__PROFILE__` is enabled. ([#722](#722)) - Support `@lynx-js/react` v0.108.0. ([#649](#649)) ## @lynx-js/runtime-wrapper-webpack-plugin@0.0.10 ### Patch Changes - feat: add `experimental_isLazyBundle` option, it will disable lynxChunkEntries for standalone lazy bundle ([#653](#653)) ## create-rspeedy@0.9.4 ## @lynx-js/react-alias-rsbuild-plugin@0.9.9 ## upgrade-rspeedy@0.9.4 ## @lynx-js/web-worker-rpc@0.13.1 Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

PupilTong requested a review from Copilot April 24, 2025 13:54

Copilot AI reviewed Apr 24, 2025

View reviewed changes

gaoachao self-requested a review April 24, 2025 14:46

hzy requested review from Yradex, Copilot and hzy April 25, 2025 07:16

Copilot AI reviewed Apr 25, 2025

View reviewed changes

gaoachao requested changes Apr 25, 2025

View reviewed changes

Comment thread examples/list/lynx.config.js Outdated

Comment thread packages/react/runtime/src/list.ts

Comment thread packages/react/runtime/src/list.ts

gaoachao requested changes Apr 25, 2025

View reviewed changes

Comment thread .changeset/calm-apples-buy.md

DwwWxx force-pushed the p/dingwang.wxx/impl_batch_render branch from 12c2ebb to 7052e2e Compare April 25, 2025 13:02

gaoachao self-requested a review April 26, 2025 09:43

DwwWxx force-pushed the p/dingwang.wxx/impl_batch_render branch from 7052e2e to f8c5588 Compare April 27, 2025 06:54

hzy reviewed Apr 27, 2025

View reviewed changes

Comment thread packages/react/runtime/__test__/list.test.jsx Outdated

DwwWxx force-pushed the p/dingwang.wxx/impl_batch_render branch from f8c5588 to 16063e7 Compare April 27, 2025 08:00

hzy reviewed Apr 27, 2025

View reviewed changes

Comment thread packages/react/runtime/__test__/list.test.jsx Outdated

DwwWxx force-pushed the p/dingwang.wxx/impl_batch_render branch from 16063e7 to 991722f Compare April 27, 2025 08:39

upupming reviewed Apr 27, 2025

View reviewed changes

Comment thread packages/react/runtime/__test__/list.test.jsx

hzy previously approved these changes Apr 28, 2025

View reviewed changes

DwwWxx force-pushed the p/dingwang.wxx/impl_batch_render branch from 991722f to f9c28c0 Compare April 28, 2025 05:46

DwwWxx dismissed hzy’s stale review via 5dfd912 April 28, 2025 07:28

DwwWxx force-pushed the p/dingwang.wxx/impl_batch_render branch from 6971254 to 5dfd912 Compare April 28, 2025 07:28

feat: impl list batch render

418f947

DwwWxx force-pushed the p/dingwang.wxx/impl_batch_render branch from 5dfd912 to 418f947 Compare April 28, 2025 08:07

hzy approved these changes Apr 28, 2025

View reviewed changes

gaoachao approved these changes Apr 28, 2025

View reviewed changes

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

github-merge-queue Bot pushed a commit that referenced this pull request Apr 28, 2025

feat(react/runtime): impl list batch render (#624)

c3a1376

github-merge-queue Bot removed this pull request from the merge queue due to failed status checks Apr 28, 2025

DwwWxx added 2 commits April 28, 2025 18:47

Merge branch 'main' into p/dingwang.wxx/impl_batch_render

7c30fe0

Merge branch 'main' into p/dingwang.wxx/impl_batch_render

bfa623a

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

github-merge-queue Bot removed this pull request from the merge queue due to failed status checks Apr 29, 2025

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

github-merge-queue Bot removed this pull request from the merge queue due to failed status checks Apr 29, 2025

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

Merged via the queue into lynx-family:main with commit f4ac0f1 Apr 29, 2025
27 of 29 checks passed

github-actions Bot mentioned this pull request Apr 29, 2025

chore: Release 2025-05-09 12:55:59 #644

Merged

colinaaa mentioned this pull request Apr 29, 2025

chore: update changeset #663

Merged

2 tasks

Conversation

DwwWxx commented Apr 24, 2025

Uh oh!

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

Uh oh!

🦋 Changeset detected

Uh oh!

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

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

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

Uh oh!

Bundle Report

Affected Assets, Files, and Routes:

Assets Changed:

Uh oh!

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

Uh oh!

CodSpeed Performance Report

Merging #624 will not alter performance

Summary

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

hzy commented Apr 25, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

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

Uh oh!

Codecov Report

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

changeset-bot Bot commented Apr 24, 2025 •

edited

Loading

CLAassistant commented Apr 24, 2025 •

edited

Loading

codecov Bot commented Apr 24, 2025 •

edited

Loading

codspeed-hq Bot commented Apr 24, 2025 •

edited

Loading

codecov Bot commented Apr 27, 2025 •

edited

Loading