Skip to content

feat(react/transform): auto import lazy runtime when using import() #667

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
colinaaa merged 4 commits into from
May 2, 2025
Merged

feat(react/transform): auto import lazy runtime when using import() #667

colinaaa merged 4 commits into from
May 2, 2025

Conversation

@colinaaa
Copy link
Collaborator

@colinaaa colinaaa commented Apr 30, 2025

Summary

Similar with #666.

We would like to avoid the manually imported @lynx-js/react/experimental/lazy/import (which is easy to forget).

This patch auto imports the lazy runtimes when import(url) is used.

Note

The lazy runtime is only needed when using an external import() (e.g.: https:// or a variable).

Checklist

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

@changeset-bot
Copy link

changeset-bot bot commented Apr 30, 2025 •
edited
Loading

🦋 Changeset detected

Latest commit: 3ac8e38

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

@codspeed-hq
Copy link

codspeed-hq bot commented Apr 30, 2025 •
edited
Loading

CodSpeed Performance Report

Merging #667 will not alter performance

Comparing colinaaa:colin/0430/dynamic-import (3ac8e38) with main (e7f4175)

Summary

✅ 1 untouched benchmarks

@colinaaa colinaaa marked this pull request as ready for review April 30, 2025 09:48
@colinaaa colinaaa requested a review from Yradex April 30, 2025 09:48
@colinaaa colinaaa added this pull request to the merge queue May 2, 2025
Merged via the queue into lynx-family:main with commit 8a7d831 May 2, 2025
29 checks passed
@colinaaa colinaaa deleted the colin/0430/dynamic-import branch May 2, 2025 08:31
@github-actions github-actions bot mentioned this pull request May 2, 2025
Merged
@colinaaa colinaaa mentioned this pull request May 2, 2025
Merged
2 tasks
github-merge-queue bot pushed a commit that referenced this pull request May 6, 2025
@colinaaa
fix(rspeedy/react): should alias experimental/lazy/import (#682)
66e190a 
<!--
  Thank you for submitting a pull request!

We appreciate the time and effort you have invested in making these
changes. Please ensure that you provide enough information to allow
others to review your pull request.

Upon submission, your pull request will be automatically assigned with
reviewers.

If you want to learn more about contributing to this project, please
visit:
https://github.com/lynx-family/lynx-stack/blob/main/CONTRIBUTING.md.
-->

## Summary

Fix a regression of #666 and #667.

Since now `experimental/lazy/import` may be added by transform. It
should be added to alias.

<!-- Can you explain the reasoning behind implementing this change? What
problem or issue does this pull request resolve? -->

<!-- It would be helpful if you could provide any relevant context, such
as GitHub issues or related discussions. -->

## Checklist

<!--- Check and mark with an "x" -->

- [x] Tests updated (or not required).
- [ ] Documentation updated (or not required).
colinaaa pushed a commit that referenced this pull request May 9, 2025
@github-actions
chore: Release 2025-05-09 12:55:59 (#644)
44cc065 
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@Yradex Yradex Yradex approved these changes

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@colinaaa @Yradex