Skip to content

fix: mts in lazy component#2375

Merged
PupilTong merged 2 commits intolynx-family:mainfrom
PupilTong:p/hw/fix-lazy-component-mts
Mar 25, 2026
Merged

fix: mts in lazy component#2375
PupilTong merged 2 commits intolynx-family:mainfrom
PupilTong:p/hw/fix-lazy-component-mts

Conversation

@PupilTong
Copy link
Copy Markdown
Collaborator

@PupilTong PupilTong commented Mar 24, 2026

Summary by CodeRabbit

  • Bug Fixes

    • Lazy-loaded components: element refs and tap/event handlers now work reliably; dynamic chunk resolution for lazy components fixed.
  • Tests

    • Added end-to-end and unit tests covering lazy component loading, event handlers, and dynamic chunk resolution.
  • Chores

    • Recorded a patch changeset noting the lazy-component fix.
  • Public API

    • Loader updated to accept an optional config to support dynamic component entries.

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

@PupilTong PupilTong requested a review from Sherry-hue as a code owner March 24, 2026 12:15
@PupilTong PupilTong self-assigned this Mar 24, 2026
@changeset-bot
Copy link
Copy Markdown

changeset-bot bot commented Mar 24, 2026

🦋 Changeset detected

Latest commit: 57f24de

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

This PR includes changesets to release 9 packages
Name Type
@lynx-js/web-core Patch
upgrade-rspeedy Patch
@lynx-js/web-rsbuild-server-middleware Patch
@lynx-js/template-webpack-plugin Patch
@lynx-js/react-rsbuild-plugin Patch
create-rspeedy Patch
@lynx-js/web-worker-rpc Patch
@lynx-js/react-alias-rsbuild-plugin Patch
@lynx-js/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

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai bot commented Mar 24, 2026

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 01da8bc1-d18b-4099-9696-73a91abf26cc

📥 Commits

Reviewing files that changed from the base of the PR and between e85d0bf and 57f24de.

📒 Files selected for processing (7)
  • .changeset/large-plums-obey.md
  • packages/web-platform/web-core-e2e/tests/reactlynx.spec.ts
  • packages/web-platform/web-core-e2e/tests/reactlynx/basic-lazy-component-mts-bindtap/index.jsx
  • packages/web-platform/web-core-e2e/tests/reactlynx/basic-lazy-component-mts-bindtap/lazy.jsx
  • packages/web-platform/web-core/tests/element-apis.spec.ts
  • packages/web-platform/web-core/ts/client/mainthread/createMainThreadGlobalAPIs.ts
  • packages/web-platform/web-core/ts/types/IElementPAPI.ts
✅ Files skipped from review due to trivial changes (2)
  • .changeset/large-plums-obey.md
  • packages/web-platform/web-core-e2e/tests/reactlynx/basic-lazy-component-mts-bindtap/index.jsx
🚧 Files skipped from review as they are similar to previous changes (5)
  • packages/web-platform/web-core-e2e/tests/reactlynx/basic-lazy-component-mts-bindtap/lazy.jsx
  • packages/web-platform/web-core/ts/types/IElementPAPI.ts
  • packages/web-platform/web-core/ts/client/mainthread/createMainThreadGlobalAPIs.ts
  • packages/web-platform/web-core-e2e/tests/reactlynx.spec.ts
  • packages/web-platform/web-core/tests/element-apis.spec.ts

📝 Walkthrough

Walkthrough

Adds a changeset and new E2E and unit tests for lazy components (main-thread refs + bindtap); updates main-thread API __LoadLepusChunk to accept an optional config to resolve dynamic component entry URLs before loading chunks.

Changes

Cohort / File(s) Summary
Changeset Entry
​.changeset/large-plums-obey.md
New changeset declaring a patch for @lynx-js/web-core with note "fix: mts in lazy component".
E2E tests & example app
packages/web-platform/web-core-e2e/tests/reactlynx.spec.ts, packages/web-platform/web-core-e2e/tests/reactlynx/basic-lazy-component-mts-bindtap/index.jsx, packages/web-platform/web-core-e2e/tests/reactlynx/basic-lazy-component-mts-bindtap/lazy.jsx
Adds Playwright test and a lazy component example using useMainThreadRef and main-thread bindtap to change element style on tap; includes Suspense lazy import via mts component entry.
Unit tests
packages/web-platform/web-core/tests/element-apis.spec.ts
Adds test asserting __LoadLepusChunk resolves mapped chunk URLs for template and dynamic entries and falls back to the provided path when unmapped.
Main-thread API implementation
packages/web-platform/web-core/ts/client/mainthread/createMainThreadGlobalAPIs.ts
Updates __LoadLepusChunk(path, config?) to derive entryUrl from config.dynamicComponentEntry (fallback to templateUrl/Card), remap path via lynxViewInstance.lepusCodeUrls, then call mtsRealm.loadScriptSync.
Types
packages/web-platform/web-core/ts/types/IElementPAPI.ts
Updates MainThreadGlobalAPIs.__LoadLepusChunk signature to (path: string, config?: { dynamicComponentEntry?: string; chunkType?: number }) => boolean.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

Suggested reviewers

  • Sherry-hue
  • colinaaa

Poem

🐰✨ I hopped a chunk into the sunlit stream,
A lazy view that waited for the beam.
Tap once and pink turned bright and green,
Scripts found their paths, neat and clean.
The rabbit smiles — the app's redeemed.

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

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.
✅ Passed checks (2 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title 'fix: mts in lazy component' directly aligns with the changeset's primary focus: fixing MTS (main thread script) handling within lazy components, as evidenced by the test files, implementation changes, and the changeset entry itself.

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

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

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

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

@codecov
Copy link
Copy Markdown

codecov bot commented Mar 24, 2026

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!

Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@packages/web-platform/web-core/tests/element-apis.spec.ts`:
- Around line 1448-1493: The test overrides globalThis.cancelAnimationFrame but
never restores it; capture the original in originalCancelAnimationFrame (already
present) and at the end of the test restore globalThis.cancelAnimationFrame =
originalCancelAnimationFrame (or in an afterEach/teardown block) so later tests
are not affected; update the test around createMainThreadGlobalAPIs /
__LoadLepusChunk to restore cancelAnimationFrame after assertions using
originalCancelAnimationFrame.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: af40fc58-d71e-4f2d-b48f-49ae3ea828a0

📥 Commits

Reviewing files that changed from the base of the PR and between 518c310 and aec38a5.

📒 Files selected for processing (7)
  • .changeset/large-plums-obey.md
  • packages/web-platform/web-core-e2e/tests/reactlynx.spec.ts
  • packages/web-platform/web-core-e2e/tests/reactlynx/basic-lazy-component-mts-bindtap/index.jsx
  • packages/web-platform/web-core-e2e/tests/reactlynx/basic-lazy-component-mts-bindtap/lazy.jsx
  • packages/web-platform/web-core/tests/element-apis.spec.ts
  • packages/web-platform/web-core/ts/client/mainthread/createMainThreadGlobalAPIs.ts
  • packages/web-platform/web-core/ts/types/IElementPAPI.ts

@codspeed-hq
Copy link
Copy Markdown

codspeed-hq bot commented Mar 24, 2026

Merging this PR will improve performance by 5.19%

⚠️ Different runtime environments detected

Some benchmarks with significant performance changes were compared across different runtime environments,
which may affect the accuracy of the results.

Open the report in CodSpeed to investigate

⚡ 1 improved benchmark
✅ 62 untouched benchmarks
⏩ 21 skipped benchmarks1

Performance Changes

Benchmark BASE HEAD Efficiency
transform 1000 view elements 47.3 ms 45 ms +5.19%

Comparing PupilTong:p/hw/fix-lazy-component-mts (57f24de) with main (594b897)

Open in CodSpeed

Footnotes

  1. 21 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
Copy link
Copy Markdown

relativeci bot commented Mar 24, 2026

Web Explorer

#8387 Bundle Size — 521.28KiB (+0.01%).

57f24de(current) vs 594b897 main#8378(baseline)

Bundle metrics  Change 2 changes
                 Current
#8387
     Baseline
#8378
No change  Initial JS 41.85KiB 41.85KiB
No change  Initial CSS 1.99KiB 1.99KiB
Change  Cache Invalidation 13.39% 0%
No change  Chunks 7 7
No change  Assets 8 8
Change  Modules 145(-0.68%) 146
No change  Duplicate Modules 10 10
No change  Duplicate Code 30.75% 30.75%
No change  Packages 3 3
No change  Duplicate Packages 0 0
Bundle size by type  Change 1 change Regression 1 regression
                 Current
#8387
     Baseline
#8378
Regression  JS 317.29KiB (+0.02%) 317.23KiB
No change  Other 202KiB 202KiB
No change  CSS 1.99KiB 1.99KiB

Bundle analysis reportBranch PupilTong:p/hw/fix-lazy-componen...Project dashboard


Generated by RelativeCIDocumentationReport issue

@PupilTong PupilTong force-pushed the p/hw/fix-lazy-component-mts branch from e85d0bf to 57f24de Compare March 25, 2026 03:53
@PupilTong PupilTong merged commit 6b46f7e into lynx-family:main Mar 25, 2026
94 of 98 checks passed
colinaaa pushed a commit that referenced this pull request Apr 6, 2026
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.14.0

### Minor Changes

- feat: add `Minify.mainThreadOptions` and `Minify.backgroundOptions`
for thread-specific minifier.
([#2336](#2336))

### Patch Changes

- Bump Rsbuild v1.7.4 with Rspack v1.7.10.
([#2384](#2384))

-   Updated dependencies \[]:
    -   @lynx-js/web-rsbuild-server-middleware@0.20.0

## @lynx-js/lynx-bundle-rslib-config@0.3.0

### Minor Changes

- **BREAKING CHANGE**:
([#2370](#2370))

Simplify the API for external bundle builds by `externalsPresets` and
`externalsPresetDefinitions`.

### Patch Changes

- Preserve the default external-bundle `output.minify.jsOptions` when
users set `output.minify: true` in `defineExternalBundleRslibConfig`, so
required minifier options are not lost.
([#2390](#2390))

## @lynx-js/external-bundle-rsbuild-plugin@0.1.0

### Minor Changes

- **BREAKING CHANGE**:
([#2370](#2370))

Simplify the API for external bundle builds by `externalsPresets` and
`externalsPresetDefinitions`.

### Patch Changes

- Updated dependencies
\[[`7b7a0c6`](7b7a0c6)]:
    -   @lynx-js/externals-loading-webpack-plugin@0.1.0

## @lynx-js/react-rsbuild-plugin@0.14.0

### Minor Changes

- feat: support `optimizeBundleSize` option to remove unused code for
main-thread and background.
([#2336](#2336))

- If `optimizeBundleSize` is `true` or `optimizeBundleSize.background`
is `true`, `lynx.registerDataProcessors` calls will be marked as pure
for the background thread output.
- If `optimizeBundleSize` is `true` or `optimizeBundleSize.mainThread`
is `true`, `NativeModules.call` and `lynx.getJSModule` calls will be
marked as pure for the main-thread output.

### Patch Changes

- refactor: remove `modifyWebpackChain` since Rsbuild 2.0 dropped
webpack support
([#2397](#2397))

- Updated dependencies
\[[`9193711`](9193711)]:
    -   @lynx-js/template-webpack-plugin@0.10.7
    -   @lynx-js/css-extract-webpack-plugin@0.7.0
    -   @lynx-js/react-webpack-plugin@0.8.0
    -   @lynx-js/react-alias-rsbuild-plugin@0.14.0
    -   @lynx-js/use-sync-external-store@1.5.0
    -   @lynx-js/react-refresh-webpack-plugin@0.3.5

## @lynx-js/web-core@0.20.0

### Minor Changes

- **This is a breaking change**
([#2322](#2322))

    ## Architectural Upgrade: `web-core-wasm` replaces `web-core`

This release marks a major architectural upgrade for the web platform.
The experimental, WASM-powered engine formerly known as `web-core-wasm`
has been fully stabilized and merged into the main branch, completely
replacing the previous pure JS/TS based `web-core` implementation. This
consolidation massively improves execution performance and aligns the
API boundaries of the Web platform directly with other native Lynx
implementations.

    ### 🎉 Added Features

- **Core API Enhancements**: Successfully exposed and supported
`__QuerySelector` and `__InvokeUIMethod` methods.
- **Security & CSP Compliance**: Added a `nonce` attribute to the
iframe's `srcdoc` script execution, strengthening Content Security
Policy (CSP) compliance.
    -   **`<lynx-view>` Parameter Enhancements**:
- Added the `browser-config` attribute and property to `<lynx-view>`.
Development environments can now supply a `BrowserConfig` object (e.g.,
configuring `pixelRatio`, `pixelWidth`, `pixelHeight`) allowing the
`systemInfo` payload to be dynamically configured at the instance level.

    ### 🔄 Changed Features

- **Legacy JSON Backwards Compatibility**: Delivered comprehensive fixes
and optimizations to deeply support legacy JSON output templates:
- Added support for lazy loading execution mode (`lazy usage`).
- Implemented the correct decoding and handling of `@keyframe` animation
rules.
- Rectified rule scoping matching including scoped CSS, root selectors,
and type selectors.

- **Ecosystem Migration**: Updated testing and ecosystem applications
(such as `web-explorer` and `shell-project`) to migrate away from
obsolete fragmented dependencies. The new WASM architecture seamlessly
integrates Element APIs and CSS directly inside the core client module,
requiring a much simpler initialization footprint.

        **Before (Legacy `web-core` + `web-elements`):**

        ```typescript
        // Required multiple imports to assemble the environment
        import "@lynx-js/web-core/client";
import type { LynxViewElement as LynxView } from "@lynx-js/web-core";

        // Had to manually import separate elements and their CSS
        import "@lynx-js/web-elements/index.css";
        import "@lynx-js/web-elements/all";

const lynxView = document.createElement("lynx-view") as LynxView;
        // ...
        ```

        **After (New `web-core` unified architecture):**

        ```typescript
// The new engine natively registers Web Components and injects
fundamental CSS
        import "@lynx-js/web-core/client";
import type { LynxViewElement as LynxView } from
"@lynx-js/web-core/client";

const lynxView = document.createElement("lynx-view") as LynxView;
        // ...
        ```

_(Applications can now drop `@lynx-js/web-elements` entirely from their
`package.json` dependencies)._

- **Dependency & Boot Sequence Improvements**: Re-architected module
loading pathways. Promoted `wasm-feature-detect` directly to a core
dependency, and hardened the web worker count initialization assertions.

- **Initialization Optimizations**: Converted `SERVER_IN_SHADOW_CSS`
initialization bounds to use compilation-time constant expressions for
better optimization.

    ### 🗑️ Deleted Features & Structural Deprecations

    -   **`<lynx-view>` Parameter Removals**:
- Removed the `thread-strategy` property and attribute. Historically,
this permitted consumers to toggle between `'multi-thread'` and
`'all-on-ui'` modes depending on how they wanted the background logic to
be executed. The WASM-driven architecture enforces a consolidated
concurrency model, deprecating this `<lynx-view>` attribute entirely.
- Removed the `overrideLynxTagToHTMLTagMap` property/attribute. HTML tag
overriding mechanism has been deprecated in the new engine.
- Removed the `customTemplateLoader` property handler from
`<lynx-view>`.
- Removed the `inject-head-links` property and attribute
(`injectHeadLinks`), which previously was used to automatically inject
`<link rel="stylesheet">` tags from the document head into the
`lynx-view` shadow root.
- **Fragmented Packages Removal**: The new cohesive WASM architecture
native to `@lynx-js/web-core` handles cross-thread communication, worker
boundaries, and rendering loops uniformly. Consequently, multiple
obsolete packages have been completely removed from the workspace:
        -   `@lynx-js/web-mainthread-apis`
        -   `@lynx-js/web-worker-runtime`
        -   `@lynx-js/web-core-server`
- `@lynx-js/web-core-wasm-e2e` (transitioned into standard test suites)

- Added support for `rpx` unit
([#2377](#2377))

    **This is a breaking change**

    The following Styles has been added to `web-core`

    ```css
    lynx-view {
      width: 100%;
      container-name: lynx-view;
      container-type: inline-size;
      --rpx-unit: 1cqw;
    }
    ```

    Check MDN for the details about these styles:

-
<https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/container-name>
-
<https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/container-type>
-
<https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Containment/Container_queries>

    ### how it works?

    For the following code

    ```html
    <view style="height:1rpx"></view>
    ```

    it will be transformed to

    ```html
    <view style="height:calc(1 * var(--rpx-unit))"></view>
    ```

Therefore you could use any `<length>` value to replace the unit, for
example:

    ```html
    <lynx-view style="--rpx-unit:1px"></lynx-view>
    ```

    By default, the --rpx-unit value is `1cqw`

- Added support for transform `vw` and `vh` unit
([#2377](#2377))

Add `transform-vw` and `transform-vh` attributes and properties on
`<lynx-view>`.

    For the following code

    ```html
    <view style="height:1vw"></view>
    ```

If the `transform-vw` is enabled `<lynx-view transform-vw="true">`, it
will be transformed to

    ```html
    <view style="height:calc(1 * var(--vw-unit))"></view>
    ```

Therefore you could use any `<length>` value to replace the unit, for
example:

    ```html
    <lynx-view style="--vw-unit:1px"></lynx-view>
    ```

### Patch Changes

- feat(web-core): add `is_bubble` parameter to `common_event_handler` to
properly handle non-bubbling events like `window.Event('click', {
bubbles: false })`.
([#2399](#2399))

- chore: update readme
([#2380](#2380))

- fix: the output format should be module
([#2388](#2388))

- opt: use opt-level 3 to compile wasm
([#2371](#2371))

- fix(web-core): avoid partial bundle loading and double fetching when
fetchBundle is called concurrently for the same url.
([#2386](#2386))

- fix(web-core): fallback to the original export chunk when
`processEvalResult` is absent during `queryComponent` execution
([#2399](#2399))

- fix: tokenizing inline style values correctly to support rpx and ppx
unit conversion
([#2381](#2381))

This fixes an issue where the `transform_inline_style_key_value_vec` API
bypassed the CSS tokenizer, preventing dimension units like `rpx` or
`ppx` from being successfully transformed into `calc` strings when
specified via inline styles.

- feat: add mts lynx.querySelectorAll API
([#2382](#2382))

- fix: mts in lazy component
([#2375](#2375))

- fix: enableJSDataProcessor not work
([#2372](#2372))

- feat: add `ppx` unit support for CSS, transforming to `calc(... *
var(--ppx-unit))` directly.
([#2381](#2381))

-   Updated dependencies \[]:
    -   @lynx-js/web-worker-rpc@0.20.0

## @lynx-js/externals-loading-webpack-plugin@0.1.0

### Minor Changes

- **BREAKING CHANGE**:
([#2370](#2370))

Simplify the API for external bundle builds by `externalsPresets` and
`externalsPresetDefinitions`.

## @lynx-js/devtool-connector@0.1.1

### Patch Changes

- fix: align GlobalKeys with Android DevToolSettings keys and filter
global switch responses
([#2392](#2392))

## @lynx-js/devtool-mcp-server@0.5.1

### Patch Changes

- Updated dependencies
\[[`95fff27`](95fff27)]:
    -   @lynx-js/devtool-connector@0.1.1

## @lynx-js/react@0.117.1

### Patch Changes

- Update preact version to simplify `setProperty` implementation
([#2367](#2367))

## @lynx-js/react-umd@0.117.1

### Patch Changes

- Add a new `entry` export to `@lynx-js/react-umd` for reuse by wrapper
libraries of `@lynx-js/react`.
([#2370](#2370))

## create-rspeedy@0.14.0

### Patch Changes

- Add optional Lynx DevTool skill.
([#2421](#2421))

- move Vitest integration to create-rstack extraTools and merge the
Vitest templates into a single incremental overlay
([#2408](#2408))

## @lynx-js/kitten-lynx-test-infra@0.1.2

### Patch Changes

- Updated dependencies
\[[`95fff27`](95fff27)]:
    -   @lynx-js/devtool-connector@0.1.1

## @lynx-js/template-webpack-plugin@0.10.7

### Patch Changes

- use path.posix.format instead of path.format to ensure consistent path
separators across platforms
([#2359](#2359))

- Updated dependencies
\[[`75960cd`](75960cd),
[`518c310`](518c310),
[`863469e`](863469e),
[`dc18c5c`](dc18c5c),
[`7d242f3`](7d242f3),
[`62bebcf`](62bebcf),
[`75960cd`](75960cd),
[`182f568`](182f568),
[`1aa051d`](1aa051d),
[`6b46f7e`](6b46f7e),
[`fcda36a`](fcda36a),
[`182f568`](182f568),
[`138f727`](138f727),
[`138f727`](138f727)]:
    -   @lynx-js/web-core@0.20.0

## @lynx-js/react-alias-rsbuild-plugin@0.14.0



## upgrade-rspeedy@0.14.0



## @lynx-js/web-rsbuild-server-middleware@0.20.0



## @lynx-js/web-worker-rpc@0.20.0

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants