feat: add layoutchange event support for x-view and x-text by PupilTong · Pull Request #408 · lynx-family/lynx-stack

PupilTong · 2025-03-31T07:42:46Z

changeset-bot · 2025-03-31T07:42:49Z

🦋 Changeset detected

Latest commit: d1fe76c

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/web-elements	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

Copilot

Pull Request Overview

This PR adds support for a new "layoutchange" event to both x-view and x-text components. Key changes include:

Added test cases in web-tests to verify the new "layoutchange" event.
Introduced a new helper class (CommonEventsAndMethods) to handle event dispatching.
Updated component decorators in x-view and x-text to include the new event support.

Reviewed Changes

Copilot reviewed 5 out of 8 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
packages/web-platform/web-tests/tests/web-elements.spec.ts	Added tests for the "layoutchange" event
packages/web-platform/web-elements/src/common/CommonEventsAndMethods.ts	New utility class to dispatch "layoutchange" events
packages/web-platform/web-elements/src/XView/XView.ts	Updated component decorator to include event support
packages/web-platform/web-elements/src/XText/XText.ts	Updated component decorator to include event support
.changeset/curvy-wasps-count.md	Changeset for the new feature

Files not reviewed (3)

cspell.jsonc: Language not supported
packages/web-platform/web-tests/tests/web-elements/x-text/event-layoutchange.html: Language not supported
packages/web-platform/web-tests/tests/web-elements/x-view/event-layoutchange.html: Language not supported

Comments suppressed due to low confidence (1)

packages/web-platform/web-elements/src/common/CommonEventsAndMethods.ts:21

[nitpick] The method name '__handleScrollUpperThresholdEventEnabled' is misleading as it dispatches a 'layoutchange' event; consider renaming it to '__handleLayoutChangeEventEnabled' to better reflect its purpose.

  __handleScrollUpperThresholdEventEnabled = (enabled: boolean) => {

packages/web-platform/web-elements/src/common/CommonEventsAndMethods.ts

codecov · 2025-03-31T07:50:18Z

Bundle Report

Changes will increase total bundle size by 1.02kB (0.18%) ⬆️. This is within the configured threshold ✅

Detailed changes

Bundle name	Size	Change
@lynx-js/web-explorer-web-array-push	320.44kB	1.01kB (0.32%) ⬆️
@lynx-js/example-react-lynx-cjs	236.88kB	14 bytes (0.01%) ⬆️

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`	14 bytes	87.62kB	0.02%

view changes for bundle: @lynx-js/web-explorer-web-array-push

Assets Changed:

Asset Name	Size Change	Total Size	Change (%)
`static/js/index.js`	1.01kB	145.46kB	0.7%

codspeed-hq · 2025-03-31T07:52:09Z

CodSpeed Performance Report

Merging #408 will not alter performance

_{Comparing PupilTong:p/hw/layout-change-event-stage-0 (d1fe76c) with main (7246303)}

Summary

✅ 1 untouched benchmarks

…ethods.ts Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> Signed-off-by: PupilTong <12288479+PupilTong@users.noreply.github.com>

codecov · 2025-03-31T08:03:32Z

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!

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/rspeedy@0.9.0 ### Minor Changes - Bundle Rspeedy with Rslib for faster start-up times. ([#395](#395)) This would be a **BREAKING CHANGE** for using [global version of Rspeedy](https://lynxjs.org/rspeedy/cli#using-the-global-rspeedy-version). Please ensure that you update your globally installed version of Rspeedy: ```bash npm install --global @lynx-js/rspeedy@latest ``` - Bump Rsbuild v1.3.2 with Rspack v1.3.1 ([#446](#446)) - **BREAKING CHANGE**: Added explicit TypeScript peer dependency requirement of 5.1.6 - 5.8.x. ([#480](#480)) This formalizes the existing TypeScript version requirement in `peerDependencies` (marked as optional since it is only needed for TypeScript configurations). The actual required TypeScript version has not changed. Note: This may cause installation to fail if you have strict peer dependency checks enabled. Node.js v22.7+ users can bypass TypeScript installation using `--experimental-transform-types` or `--experimental-strip-types` flags. Node.js v23.6+ users don't need any flags. See [Node.js - TypeScript](https://nodejs.org/api/typescript.html) for details. ### Patch Changes - Support cli flag `--base` to specify the base path of the server. ([#387](#387)) - Support cli option `--environment` to specify the name of environment to build ([#462](#462)) - Select the most appropriate network interface. ([#457](#457)) This is a port of [webpack/webpack-dev-server#5411](webpack/webpack-dev-server#5411). - Support Node.js v23.6+ native TypeScript. ([#481](#481)) See [Node.js - TypeScript](https://nodejs.org/api/typescript.html) for more details. - Support cli option `--env-mode` to specify the env mode to load the `.env.[mode]` file. ([#453](#453)) - Support `dev.hmr` and `dev.liveReload`. ([#458](#458)) - Updated dependencies \[[`df63722`](df63722), [`df63722`](df63722)]: - @lynx-js/chunk-loading-webpack-plugin@0.2.0 ## @lynx-js/chunk-loading-webpack-plugin@0.2.0 ### Minor Changes - **BREAKING CHANGE**: Requires `@rspack/core` v1.3.0. ([#400](#400)) - **BREAKING CHANGE**: Remove the deprecated `ChunkLoadingRspackPlugin`, use `ChunkLoadingWebpackPlugin` with `output.chunkLoading: 'lynx'` instead. ([#400](#400)) ```js import { ChunkLoadingWebpackPlugin } from "@lynx-js/chunk-loading-webpack-plugin"; export default { output: { chunkLoading: "lynx", }, plugins: [new ChunkLoadingWebpackPlugin()], }; ``` ## @lynx-js/react@0.106.3 ### Patch Changes - Do some global var initialize in hydrate, which fixes error like `cannot read property '-21' of undefined` and some style issue. ([#461](#461)) - fix: ensure ref lifecycle events run after firstScreen in the background thread ([#434](#434)) This patch fixes an issue where ref lifecycle events were running before firstScreen events in the background thread async render mode, which could cause refs to be undefined when components try to access them. ## @lynx-js/qrcode-rsbuild-plugin@0.3.5 ### Patch Changes - Build with Rslib ([#396](#396)) ## @lynx-js/react-rsbuild-plugin@0.9.5 ### Patch Changes - fix: add enableCSSInvalidation for encodeCSS of css HMR, this will fix pseudo-class (such as `:active`) not working in HMR. ([#435](#435)) - Disable `module.generator.json.JSONParse` option as it increases the bundle size of `main-thread.js`. For more detail, please see this [issue](webpack/webpack#19319). ([#402](#402)) - Updated dependencies \[[`3e7988f`](3e7988f), [`7243242`](7243242)]: - @lynx-js/css-extract-webpack-plugin@0.5.3 - @lynx-js/template-webpack-plugin@0.6.8 - @lynx-js/react-alias-rsbuild-plugin@0.9.5 - @lynx-js/react-refresh-webpack-plugin@0.3.2 - @lynx-js/react-webpack-plugin@0.6.10 - @lynx-js/web-webpack-plugin@0.6.3 ## @lynx-js/web-constants@0.10.1 ### Patch Changes - feat: onNapiModulesCall function add new param: `dispatchNapiModules`, napiModulesMap val add new param: `handleDispatch`. ([#414](#414)) Now you can use them to actively communicate to napiModules (background thread) in onNapiModulesCall (ui thread). - Updated dependencies \[]: - @lynx-js/web-worker-rpc@0.10.1 ## @lynx-js/web-core@0.10.1 ### Patch Changes - docs: fix documents about lynx-view's properties ([#412](#412)) Attributes should be hyphen-name: 'init-data', 'global-props'. now all properties has corresponding attributes. - feat: onNapiModulesCall function add new param: `dispatchNapiModules`, napiModulesMap val add new param: `handleDispatch`. ([#414](#414)) Now you can use them to actively communicate to napiModules (background thread) in onNapiModulesCall (ui thread). - Updated dependencies \[[`1af3b60`](1af3b60)]: - @lynx-js/web-constants@0.10.1 - @lynx-js/web-worker-runtime@0.10.1 - @lynx-js/web-worker-rpc@0.10.1 ## @lynx-js/web-elements@0.5.3 ### Patch Changes - feat: add `layoutchange` event support for x-view and x-text ([#408](#408)) ## @lynx-js/web-mainthread-apis@0.10.1 ### Patch Changes - Updated dependencies \[[`1af3b60`](1af3b60)]: - @lynx-js/web-constants@0.10.1 ## @lynx-js/web-worker-runtime@0.10.1 ### Patch Changes - feat: onNapiModulesCall function add new param: `dispatchNapiModules`, napiModulesMap val add new param: `handleDispatch`. ([#414](#414)) Now you can use them to actively communicate to napiModules (background thread) in onNapiModulesCall (ui thread). - Updated dependencies \[[`1af3b60`](1af3b60)]: - @lynx-js/web-constants@0.10.1 - @lynx-js/web-mainthread-apis@0.10.1 - @lynx-js/web-worker-rpc@0.10.1 ## @lynx-js/css-extract-webpack-plugin@0.5.3 ### Patch Changes - Fix CSS HMR not working with nested entry name. ([#456](#456)) - fix: add enableCSSInvalidation for encodeCSS of css HMR, this will fix pseudo-class (such as `:active`) not working in HMR. ([#435](#435)) ## @lynx-js/template-webpack-plugin@0.6.8 ### Patch Changes - fix: add enableCSSInvalidation for encodeCSS of css HMR, this will fix pseudo-class (such as `:active`) not working in HMR. ([#435](#435)) ## create-rspeedy@0.9.0 ## @lynx-js/react-alias-rsbuild-plugin@0.9.5 ## upgrade-rspeedy@0.9.0 ## @lynx-js/web-worker-rpc@0.10.1 Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

feat: add layoutchange event support for x-view and x-text

5b44ba0

#87

PupilTong requested review from Sherry-hue and Copilot March 31, 2025 07:42

PupilTong self-assigned this Mar 31, 2025

PupilTong added the platform:Web label Mar 31, 2025

PupilTong added this to Lynx for Web Mar 31, 2025

PupilTong moved this to In Progress in Lynx for Web Mar 31, 2025

Copilot AI reviewed Mar 31, 2025

View reviewed changes

packages/web-platform/web-elements/src/common/CommonEventsAndMethods.ts Outdated Show resolved Hide resolved

format

819c1c6

Update packages/web-platform/web-elements/src/common/CommonEventsAndM…

e0c7d04

…ethods.ts Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> Signed-off-by: PupilTong <12288479+PupilTong@users.noreply.github.com>

fix

d1fe76c

Sherry-hue approved these changes Mar 31, 2025

View reviewed changes

PupilTong added this pull request to the merge queue Mar 31, 2025

Merged via the queue into lynx-family:main with commit b8bb3d4 Mar 31, 2025
21 checks passed

PupilTong deleted the p/hw/layout-change-event-stage-0 branch March 31, 2025 10:29

github-project-automation bot moved this from In Progress to Done in Lynx for Web Mar 31, 2025

github-actions bot mentioned this pull request Mar 31, 2025

chore: Release 2025-04-05 13:19:16 #413

Merged

PupilTong mentioned this pull request Apr 11, 2025

[Feature]: Support bindlayoutchange event on view component for web #87

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: add layoutchange event support for x-view and x-text#408

feat: add layoutchange event support for x-view and x-text#408
PupilTong merged 4 commits intolynx-family:mainfrom
PupilTong:p/hw/layout-change-event-stage-0

PupilTong commented Mar 31, 2025

Uh oh!

changeset-bot bot commented Mar 31, 2025 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

codecov bot commented Mar 31, 2025 •

edited

Loading

Assets Changed:

Assets Changed:

Uh oh!

codspeed-hq bot commented Mar 31, 2025 •

edited

Loading

Uh oh!

codecov bot commented Mar 31, 2025 •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

PupilTong commented Mar 31, 2025

Uh oh!

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

Uh oh!

🦋 Changeset detected

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Uh oh!

codecov bot commented Mar 31, 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:

Assets Changed:

Uh oh!

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

Uh oh!

CodSpeed Performance Report

Merging #408 will not alter performance

Summary

Uh oh!

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

Uh oh!

Codecov Report

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

changeset-bot bot commented Mar 31, 2025 •

edited

Loading

codecov bot commented Mar 31, 2025 •

edited

Loading

codspeed-hq bot commented Mar 31, 2025 •

edited

Loading

codecov bot commented Mar 31, 2025 •

edited

Loading