Skip to content

refactor(web-core): improve LynxView resize observer cleanup#124

Merged
PupilTong merged 3 commits intolynx-family:mainfrom
BronzonTech-Cloud:main
Mar 10, 2025
Merged

refactor(web-core): improve LynxView resize observer cleanup#124
PupilTong merged 3 commits intolynx-family:mainfrom
BronzonTech-Cloud:main

Conversation

@BronzonTech-Cloud
Copy link
Contributor

@BronzonTech-Cloud BronzonTech-Cloud commented Mar 7, 2025

  • Extract resize observer cleanup into a separate method
  • Ensure proper disconnection and clearing of resize observer
  • Add type safety to nativeModulesCall callback

@changeset-bot
Copy link

changeset-bot bot commented Mar 7, 2025 •
edited
Loading

🦋 Changeset detected

Latest commit: 2a9b594

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

This PR includes changesets to release 5 packages
Name Type
@lynx-js/web-core Patch
@lynx-js/web-constants Patch
@lynx-js/web-mainthread-apis Patch
@lynx-js/web-worker-rpc Patch
@lynx-js/web-worker-runtime 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
Copy link

CLAassistant commented Mar 7, 2025 •
edited
Loading

CLA assistant check
All committers have signed the CLA.

@BronzonTech-Cloud BronzonTech-Cloud marked this pull request as draft March 7, 2025 12:46
@BronzonTech-Cloud BronzonTech-Cloud marked this pull request as ready for review March 7, 2025 19:35
@PupilTong
Copy link
Collaborator

PupilTong commented Mar 10, 2025

Great job! Thanks!

BronzonTech-Cloud and others added 3 commits March 10, 2025 21:37
@BronzonTech-Cloud @PupilTong
refactor(web-core): improve LynxView resize observer cleanup
812e45f 
- Extract resize observer cleanup into a separate method
- Ensure proper disconnection and clearing of resize observer
- Add type safety to nativeModulesCall callback
@BronzonTech-Cloud @PupilTong
refactor(web-core): improve type safety for nativeModulesCall callback
9d6cb8d 
- Add explicit type annotation for nativeModulesCall arguments
- Enhance type definition for native modules callback parameters
@colinaaa @PupilTong
Create fast-forks-build.md
2a9b594 
Signed-off-by: Qingyu Wang <40660121+colinaaa@users.noreply.github.com>
@PupilTong PupilTong merged commit 12f4ca9 into lynx-family:main Mar 10, 2025
11 checks passed
@codecov
Copy link

codecov bot commented Mar 10, 2025

Codecov Report

All modified and coverable lines are covered by tests ✅

📢 Thoughts on this report? Let us know!

@github-actions github-actions bot mentioned this pull request Mar 10, 2025
Merged
colinaaa pushed a commit that referenced this pull request Mar 14, 2025
@github-actions
chore: Release 2025-03-14 16:26:46 (#144)
3077c79 
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/web-constants@0.8.0

### Minor Changes

- refactor: remove web-elements/lazy and loadNewTag
([#123](#123))

    -   remove @lynx-js/web-elements/lazy
    -   remove loadElement
    -   remove loadNewTag callback

    **This is a breaking change**

    Now we removed the default lazy loading preinstalled in web-core

    Please add the following statement in your web project

        import "@lynx-js/web-elements/all";

### Patch Changes

- feat: `createRpcEndpoint` adds a new parameter: `hasReturnTransfer`.
([#194](#194))

When `isSync`: false, `hasReturn`: true, you can add `transfer` to the
callback postMessage created.

At this time, the return value structure of register-handler is changed:
`{ data: unknown; transfer: Transferable[]; } | Promise<{ data: unknown;
transfer: Transferable[];}>`.

- feat: add two prop of lynx-view about `napiLoader`:
([#173](#173))

- `napiModulesMap`: [optional] the napiModule which is called in
lynx-core. key is module-name, value is esm url.

    -   `onNapiModulesCall`: [optional] the NapiModule value handler.

**Warning:** This is the internal implementation of
`@lynx-js/lynx-core`. In most cases, this API is not required for
projects.

1. The `napiModulesMap` value should be a esm url which export default a
function with two parameters:

- `NapiModules`: oriented `napiModulesMap`, which you can use to call
other Napi-Modules

    -   `NapiModulesCall`: trigger `onNapiModulesCall`

    example:

    ```js
    const color_environment = URL.createObjectURL(
      new Blob(
        [
          `export default function(NapiModules, NapiModulesCall) {
      return {
        getColor() {
NapiModules.color_methods.getColor({ color: 'green' }, color => {
            console.log(color);
          });
        },
        ColorEngine: class ColorEngine {
          getColor(name) {
NapiModules.color_methods.getColor({ color: 'green' }, color => {
              console.log(color);
            });
          }
        },
      };
    };`,
        ],
        { type: "text/javascript" }
      )
    );

    const color_methods = URL.createObjectURL(
      new Blob(
        [
          `export default function(NapiModules, NapiModulesCall) {
      return {
        async getColor(data, callback) {
          const color = await NapiModulesCall('getColor', data);
          callback(color);
        },
      };
    };`,
        ],
        { type: "text/javascript" }
      )
    );

    lynxView.napiModuleMap = {
      color_environment: color_environment,
      color_methods: color_methods,
    };
    ```

    2.  The `onNapiModulesCall` function has three parameters:

- `name`: the first parameter of `NapiModulesCall`, the function name
    -   `data`: the second parameter of `NapiModulesCall`, data
    -   `moduleName`: the module-name of the called napi-module

    ```js
    lynxView.onNapiModulesCall = (name, data, moduleName) => {
      if (name === "getColor" && moduleName === "color_methods") {
        return data.color;
      }
    };
    ```

- Updated dependencies
\[[`ec4e1ce`](ec4e1ce)]:
    -   @lynx-js/web-worker-rpc@0.8.0

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

### Minor Changes

- refactor: remove web-elements/lazy and loadNewTag
([#123](#123))

    -   remove @lynx-js/web-elements/lazy
    -   remove loadElement
    -   remove loadNewTag callback

    **This is a breaking change**

    Now we removed the default lazy loading preinstalled in web-core

    Please add the following statement in your web project

        import "@lynx-js/web-elements/all";

- feat: use shadowroot to isolate one lynx-view
([#198](#198))

Before this commit, we have been detecting if current browser supports
the `@scope` rule.
    This allows us to scope one lynx-view's styles.

    After this commit we always create a shadowroot to scope then.

Also for the new shadowroot pattern, we add a new **attribute**
`inject-head-links`.
By default, we will iterate all `<link rel="stylesheet">` in the
`<head>`, and use `@import url()` to import them inside the shadowroot.
Developers could add a `inject-head-links="false"` to disable this
behavior.

- feat: never add the x-enable-xx-event attributes
([#157](#157))

After this commit, we update the reqirement of the version of
`@lynx-js/web-elements` to `>=0.3.1`

### Patch Changes

- feat: add pixelRatio of SystemInfo, now you can use
`SystemInfo.pixelRatio`.
([#150](#150))

- Improve LynxView resize observer cleanup
([#124](#124))

- feat: add two prop of lynx-view about `napiLoader`:
([#173](#173))

- `napiModulesMap`: [optional] the napiModule which is called in
lynx-core. key is module-name, value is esm url.

    -   `onNapiModulesCall`: [optional] the NapiModule value handler.

**Warning:** This is the internal implementation of
`@lynx-js/lynx-core`. In most cases, this API is not required for
projects.

1. The `napiModulesMap` value should be a esm url which export default a
function with two parameters:

- `NapiModules`: oriented `napiModulesMap`, which you can use to call
other Napi-Modules

    -   `NapiModulesCall`: trigger `onNapiModulesCall`

    example:

    ```js
    const color_environment = URL.createObjectURL(
      new Blob(
        [
          `export default function(NapiModules, NapiModulesCall) {
      return {
        getColor() {
NapiModules.color_methods.getColor({ color: 'green' }, color => {
            console.log(color);
          });
        },
        ColorEngine: class ColorEngine {
          getColor(name) {
NapiModules.color_methods.getColor({ color: 'green' }, color => {
              console.log(color);
            });
          }
        },
      };
    };`,
        ],
        { type: "text/javascript" }
      )
    );

    const color_methods = URL.createObjectURL(
      new Blob(
        [
          `export default function(NapiModules, NapiModulesCall) {
      return {
        async getColor(data, callback) {
          const color = await NapiModulesCall('getColor', data);
          callback(color);
        },
      };
    };`,
        ],
        { type: "text/javascript" }
      )
    );

    lynxView.napiModuleMap = {
      color_environment: color_environment,
      color_methods: color_methods,
    };
    ```

    2.  The `onNapiModulesCall` function has three parameters:

- `name`: the first parameter of `NapiModulesCall`, the function name
    -   `data`: the second parameter of `NapiModulesCall`, data
    -   `moduleName`: the module-name of the called napi-module

    ```js
    lynxView.onNapiModulesCall = (name, data, moduleName) => {
      if (name === "getColor" && moduleName === "color_methods") {
        return data.color;
      }
    };
    ```

- Updated dependencies
\[[`eab1328`](eab1328),
[`e9e8370`](e9e8370),
[`ec4e1ce`](ec4e1ce),
[`f0a717c`](f0a717c)]:
    -   @lynx-js/web-worker-runtime@0.8.0
    -   @lynx-js/web-constants@0.8.0
    -   @lynx-js/web-worker-rpc@0.8.0

## @lynx-js/web-elements@0.4.0

### Minor Changes

- refactor: remove web-elements/lazy and loadNewTag
([#123](#123))

    -   remove @lynx-js/web-elements/lazy
    -   remove loadElement
    -   remove loadNewTag callback

    **This is a breaking change**

    Now we removed the default lazy loading preinstalled in web-core

    Please add the following statement in your web project

        import "@lynx-js/web-elements/all";

### Patch Changes

- feat: never require the x-enable-xx-event attributes
([#157](#157))

After this commit, we do not need user to add `x-enable-xx-event` to
enable corresponding events

- feat: add support for `<lynx-view/>` with shadowroot
([#198](#198))

add a minor logic in `<x-overlay-ng>` to be compatiable with the
<lynx-view> with a shadowroot

- Updated dependencies
\[[`4c2ee65`](4c2ee65)]:
    -   @lynx-js/web-elements-reactive@0.2.0

## @lynx-js/web-elements-reactive@0.2.0

### Minor Changes

- feat: add new decorator `registerEventEnableStatusChangeHandler`
([#157](#157))

    example

    ```typescript
    @registerEventEnableStatusChangeHandler('load')
     #enableLoadEvent(status:boolean) {
       if (status) {
this.#getImg().addEventListener('load', this.#teleportLoadEvent, {
           passive: true,
         });
       } else {
this.#getImg().removeEventListener('load', this.#teleportLoadEvent);
       }
     }
    ```

After this commit, we override the `HTMLElement.addEventListener` and
the `HTMLElement.removeEventListner` to know if there is any listener
attached on current element.

    If event should be enabled/disabled, the callback will be invoked.

## @lynx-js/web-mainthread-apis@0.8.0

### Minor Changes

- refactor: remove web-elements/lazy and loadNewTag
([#123](#123))

    -   remove @lynx-js/web-elements/lazy
    -   remove loadElement
    -   remove loadNewTag callback

    **This is a breaking change**

    Now we removed the default lazy loading preinstalled in web-core

    Please add the following statement in your web project

        import "@lynx-js/web-elements/all";

- feat: use shadowroot to isolate one lynx-view
([#198](#198))

Before this commit, we have been detecting if current browser supports
the `@scope` rule.
    This allows us to scope one lynx-view's styles.

    After this commit we always create a shadowroot to scope then.

Also for the new shadowroot pattern, we add a new **attribute**
`inject-head-links`.
By default, we will iterate all `<link rel="stylesheet">` in the
`<head>`, and use `@import url()` to import them inside the shadowroot.
Developers could add a `inject-head-links="false"` to disable this
behavior.

### Patch Changes

- Updated dependencies
\[[`e9e8370`](e9e8370),
[`ec4e1ce`](ec4e1ce),
[`f0a717c`](f0a717c)]:
    -   @lynx-js/web-constants@0.8.0

## @lynx-js/web-worker-runtime@0.8.0

### Minor Changes

- refactor: remove web-elements/lazy and loadNewTag
([#123](#123))

    -   remove @lynx-js/web-elements/lazy
    -   remove loadElement
    -   remove loadNewTag callback

    **This is a breaking change**

    Now we removed the default lazy loading preinstalled in web-core

    Please add the following statement in your web project

        import "@lynx-js/web-elements/all";

### Patch Changes

- feat: add pixelRatio of SystemInfo, now you can use
`SystemInfo.pixelRatio`.
([#150](#150))

- feat: add two prop of lynx-view about `napiLoader`:
([#173](#173))

- `napiModulesMap`: [optional] the napiModule which is called in
lynx-core. key is module-name, value is esm url.

    -   `onNapiModulesCall`: [optional] the NapiModule value handler.

**Warning:** This is the internal implementation of
`@lynx-js/lynx-core`. In most cases, this API is not required for
projects.

1. The `napiModulesMap` value should be a esm url which export default a
function with two parameters:

- `NapiModules`: oriented `napiModulesMap`, which you can use to call
other Napi-Modules

    -   `NapiModulesCall`: trigger `onNapiModulesCall`

    example:

    ```js
    const color_environment = URL.createObjectURL(
      new Blob(
        [
          `export default function(NapiModules, NapiModulesCall) {
      return {
        getColor() {
NapiModules.color_methods.getColor({ color: 'green' }, color => {
            console.log(color);
          });
        },
        ColorEngine: class ColorEngine {
          getColor(name) {
NapiModules.color_methods.getColor({ color: 'green' }, color => {
              console.log(color);
            });
          }
        },
      };
    };`,
        ],
        { type: "text/javascript" }
      )
    );

    const color_methods = URL.createObjectURL(
      new Blob(
        [
          `export default function(NapiModules, NapiModulesCall) {
      return {
        async getColor(data, callback) {
          const color = await NapiModulesCall('getColor', data);
          callback(color);
        },
      };
    };`,
        ],
        { type: "text/javascript" }
      )
    );

    lynxView.napiModuleMap = {
      color_environment: color_environment,
      color_methods: color_methods,
    };
    ```

    2.  The `onNapiModulesCall` function has three parameters:

- `name`: the first parameter of `NapiModulesCall`, the function name
    -   `data`: the second parameter of `NapiModulesCall`, data
    -   `moduleName`: the module-name of the called napi-module

    ```js
    lynxView.onNapiModulesCall = (name, data, moduleName) => {
      if (name === "getColor" && moduleName === "color_methods") {
        return data.color;
      }
    };
    ```

- Updated dependencies
\[[`e9e8370`](e9e8370),
[`ec4e1ce`](ec4e1ce),
[`f0a717c`](f0a717c),
[`63fab7b`](63fab7b)]:
    -   @lynx-js/web-mainthread-apis@0.8.0
    -   @lynx-js/web-constants@0.8.0
    -   @lynx-js/web-worker-rpc@0.8.0

## @lynx-js/react@0.105.2

### Patch Changes

- Support new css properties: `offset-path` and `offset-distance`
([#152](#152))

- Fix 'SystemInfo is not defined' error when using MTS and not importing
anything manually from the react package.
([#172](#172))

- Fix `not a function` error when using lazy bundle without MTS.
([#170](#170))

- fix: gesture config not processed correctly
([#175](#175))

    ```typescript
    const pan = Gesture.Pan().minDistance(100);
    ```

After this commit, gesture config like `minDistance` should work as
expected.

## @lynx-js/rspeedy@0.8.4

### Patch Changes

- Bump Rsbuild v1.2.19 with Rspack v1.2.8
([#168](#168))

- Add `mergeRspeedyConfig` function for merging multiple Rspeedy
configuration object.
([#169](#169))

- Bump Rsdoctor v1.0.0-rc.0
([#186](#186))

- Support configure the base path of the server.
([#196](#196))

By default, the base path of the server is `/`, and users can access
lynx bundle through `http://<host>:<port>/main.lynx.bundle`
If you want to access lynx bundle through
`http://<host>:<port>/foo/main.lynx.bundle`, you can change
`server.base` to `/foo`

    example:

    ```js
    import { defineConfig } from "@lynx-js/rspeedy";
    export default defineConfig({
      server: {
        base: "/dist",
      },
    });
    ```

- Updated dependencies
\[[`b026c8b`](b026c8b)]:
    -   @lynx-js/webpack-dev-transport@0.1.2

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

### Patch Changes

- Avoid entry IIFE in `main-thread.js`
([#206](#206))

- Enable CSS minification for scoped CSS.
([#205](#205))

- Should generate `.rspeedy/[name]/main-thread.js` instead of
`.rspeedy/[name]__main-thread/main-thread.js`
([#180](#180))

- Updated dependencies
\[[`984a51e`](984a51e),
[`5e01cef`](5e01cef),
[`315ba3b`](315ba3b),
[`315ba3b`](315ba3b)]:
    -   @lynx-js/css-extract-webpack-plugin@0.5.2
    -   @lynx-js/react-webpack-plugin@0.6.8
    -   @lynx-js/template-webpack-plugin@0.6.5
    -   @lynx-js/react-alias-rsbuild-plugin@0.9.2
    -   @lynx-js/react-refresh-webpack-plugin@0.3.2
    -   @lynx-js/web-webpack-plugin@0.6.2

## @lynx-js/web-explorer@0.0.3

### Patch Changes

- chore: update dependencies
([#123](#123))

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

### Patch Changes

- feat: `createRpcEndpoint` adds a new parameter: `hasReturnTransfer`.
([#194](#194))

When `isSync`: false, `hasReturn`: true, you can add `transfer` to the
callback postMessage created.

At this time, the return value structure of register-handler is changed:
`{ data: unknown; transfer: Transferable[]; } | Promise<{ data: unknown;
transfer: Transferable[];}>`.

## @lynx-js/css-extract-webpack-plugin@0.5.2

### Patch Changes

- feat(css-extra-webpack-plugin): Support css hmr for lazy bundle
([#155](#155))

## @lynx-js/react-webpack-plugin@0.6.8

### Patch Changes

- Shake `useImperativeHandle` on the main-thread by default.
([#153](#153))

    ```js
    import { forwardRef, useImperativeHandle } from "@lynx-js/react";

    export default forwardRef(function App(_, ref) {
      useImperativeHandle(ref, () => {
        // This should be considered as background only
        return {
          name() {
            // This should be considered as background only
            console.info("This should not exist in main-thread");
          },
        };
      });
    });
    ```

- Avoid wrapping standalone lazy bundles with `var
globDynamicComponentEntry`.
([#177](#177))

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

### Patch Changes

- The code of lazy bundle should be minimized.
([#177](#177))

## @lynx-js/webpack-dev-transport@0.1.2

### Patch Changes

- Export `reloadApp` module.
([#202](#202))

## create-rspeedy@0.8.4



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



## upgrade-rspeedy@0.8.4

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

Reviewers

@PupilTong PupilTong PupilTong 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.

4 participants

@BronzonTech-Cloud @CLAassistant @PupilTong @colinaaa