feat(web): nativeModulesUrl of lynx-view is changed to nativeModulesMap by Sherry-hue · Pull Request #220 · lynx-family/lynx-stack

Sherry-hue · 2025-03-16T10:44:42Z

Summary

feat: nativeModulesUrl of lynx-view is changed to nativeModulesMap, and the usage is completely aligned with napiModulesMap.

"warning: This is a breaking change."

nativeModulesMap will be a map: key is module-name, value should be a esm url which export default a
function with two parameters(you never need to use this):

NativeModules: oriented NativeModules, which you can use to call
other Native-Modules.
NativeModulesCall: trigger onNativeModulesCall, same as the deprecated this.nativeModulesCall.

example:

const nativeModulesMap = {
  CustomModule: URL.createObjectURL(
    new Blob(
      [
        `export default function(NativeModules, NativeModulesCall) {
    return {
      async getColor(data, callback) {
        const color = await NativeModulesCall('getColor', data);
        callback(color);
      },
    }
  };`,
      ],
      { type: 'text/javascript' },
    ),
  ),
};
lynxView.nativeModulesMap = nativeModulesMap;

In addition, we will use Promise.all to load nativeModules, which will optimize performance in the case of multiple modules.

Checklist

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

changeset-bot · 2025-03-16T10:44:45Z

🦋 Changeset detected

Latest commit: 9f94002

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-worker-runtime	Minor
@lynx-js/web-constants	Minor
@lynx-js/web-core	Minor
@lynx-js/web-mainthread-apis	Minor
@lynx-js/web-worker-rpc	Minor

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

codecov · 2025-03-16T10:51:34Z

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!

…ap (#220) ## Summary feat: `nativeModulesUrl` of lynx-view is changed to `nativeModulesMap`, and the usage is completely aligned with `napiModulesMap`. "warning: This is a breaking change." `nativeModulesMap` will be a map: key is module-name, value should be a esm url which export default a function with two parameters(you never need to use `this`): - `NativeModules`: oriented `NativeModules`, which you can use to call other Native-Modules. - `NativeModulesCall`: trigger `onNativeModulesCall`, same as the deprecated `this.nativeModulesCall`. example: ```js const nativeModulesMap = { CustomModule: URL.createObjectURL( new Blob( [ `export default function(NativeModules, NativeModulesCall) { return { async getColor(data, callback) { const color = await NativeModulesCall('getColor', data); callback(color); }, } };`, ], { type: 'text/javascript' }, ), ), }; lynxView.nativeModulesMap = nativeModulesMap; ``` In addition, we will use Promise.all to load `nativeModules`, which will optimize performance in the case of multiple modules. ## Checklist - [x] Tests updated (or not required). - [x] Documentation updated (or not required).

…ligned with .

…ap (#220) ## Summary feat: `nativeModulesUrl` of lynx-view is changed to `nativeModulesMap`, and the usage is completely aligned with `napiModulesMap`. "warning: This is a breaking change." `nativeModulesMap` will be a map: key is module-name, value should be a esm url which export default a function with two parameters(you never need to use `this`): - `NativeModules`: oriented `NativeModules`, which you can use to call other Native-Modules. - `NativeModulesCall`: trigger `onNativeModulesCall`, same as the deprecated `this.nativeModulesCall`. example: ```js const nativeModulesMap = { CustomModule: URL.createObjectURL( new Blob( [ `export default function(NativeModules, NativeModulesCall) { return { async getColor(data, callback) { const color = await NativeModulesCall('getColor', data); callback(color); }, } };`, ], { type: 'text/javascript' }, ), ), }; lynxView.nativeModulesMap = nativeModulesMap; ``` In addition, we will use Promise.all to load `nativeModules`, which will optimize performance in the case of multiple modules. ## Checklist - [x] Tests updated (or not required). - [x] Documentation updated (or not required).

Signed-off-by: Sherry <37186915+Sherry-hue@users.noreply.github.com>

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.106.0 ### Minor Changes - Improved rendering performance by batching updates sent to the main thread in a single render pass. This optimization reduces redundant layout operations on the main thread, accelerates rendering, and prevents screen flickering. ([#239](#239)) **BREAKING CHANGE**: This commit changes the behavior of Timing API. Previously, timing events were fired for each update individually. With the new batching mechanism, timing events related to the rendering pipeline will now be triggered once per render cycle rather than for each individual update, affecting applications that rely on the previous timing behavior. ### Patch Changes - Add missing typing for `useErrorBoundary`. ([#263](#263)) You can now use `useErrorBoundary` it in TypeScript like this: ```tsx import { useErrorBoundary } from "@lynx-js/react"; ``` - Modified the format of data sent from background threads to the main thread. ([#207](#207)) - Support Lynx SSR. ([#60](#60)) ## @lynx-js/web-constants@0.9.0 ### Minor Changes - refractor: remove entryId concept ([#217](#217)) After the PR #198 All contents are isolated by a shadowroot. Therefore we don't need to add the entryId selector to avoid the lynx-view's style taking effect on the whole page. ### Patch Changes - feat: `nativeModulesUrl` of lynx-view is changed to `nativeModulesMap`, and the usage is completely aligned with `napiModulesMap`. ([#220](#220)) "warning: This is a breaking change." `nativeModulesMap` will be a map: key is module-name, value should be a esm url which export default a function with two parameters(you never need to use `this`): - `NativeModules`: oriented `NativeModules`, which you can use to call other Native-Modules. - `NativeModulesCall`: trigger `onNativeModulesCall`, same as the deprecated `this.nativeModulesCall`. example: ```js const nativeModulesMap = { CustomModule: URL.createObjectURL( new Blob( [ `export default function(NativeModules, NativeModulesCall) { return { async getColor(data, callback) { const color = await NativeModulesCall('getColor', data); callback(color); }, } };`, ], { type: "text/javascript" } ) ), }; lynxView.nativeModulesMap = nativeModulesMap; ``` In addition, we will use Promise.all to load `nativeModules`, which will optimize performance in the case of multiple modules. - refactor: clean the decodeOperations implementation ([#261](#261)) - refactor: remove customelement defined detecting logic ([#247](#247)) Before this commit, for those element with tag without `-`, we always try to detect if the `x-${tagName}` is defined. After this commit, we pre-define a map(could be override by the `overrideLynxTagToHTMLTagMap`) to make that transformation for tag name. This change is a path to SSR and the MTS support. - Updated dependencies \[[`53230f0`](53230f0)]: - @lynx-js/web-worker-rpc@0.9.0 ## @lynx-js/web-core@0.9.0 ### Minor Changes - feat: `nativeModulesUrl` of lynx-view is changed to `nativeModulesMap`, and the usage is completely aligned with `napiModulesMap`. ([#220](#220)) "warning: This is a breaking change." `nativeModulesMap` will be a map: key is module-name, value should be a esm url which export default a function with two parameters(you never need to use `this`): - `NativeModules`: oriented `NativeModules`, which you can use to call other Native-Modules. - `NativeModulesCall`: trigger `onNativeModulesCall`, same as the deprecated `this.nativeModulesCall`. example: ```js const nativeModulesMap = { CustomModule: URL.createObjectURL( new Blob( [ `export default function(NativeModules, NativeModulesCall) { return { async getColor(data, callback) { const color = await NativeModulesCall('getColor', data); callback(color); }, } };`, ], { type: "text/javascript" } ) ), }; lynxView.nativeModulesMap = nativeModulesMap; ``` In addition, we will use Promise.all to load `nativeModules`, which will optimize performance in the case of multiple modules. - refractor: remove entryId concept ([#217](#217)) After the PR #198 All contents are isolated by a shadowroot. Therefore we don't need to add the entryId selector to avoid the lynx-view's style taking effect on the whole page. ### Patch Changes - refactor: code clean ([#266](#266)) - refactor: clean the decodeOperations implementation ([#261](#261)) - fix: When the width and height of lynx-view are not auto, the width and height of the `lynx-tag="page"` need to be correctly set to 100%. ([#228](#228)) - refactor: remove customelement defined detecting logic ([#247](#247)) Before this commit, for those element with tag without `-`, we always try to detect if the `x-${tagName}` is defined. After this commit, we pre-define a map(could be override by the `overrideLynxTagToHTMLTagMap`) to make that transformation for tag name. This change is a path to SSR and the MTS support. - fix: 'error' event for main-thread \_reportError ([#283](#283)) - Updated dependencies \[[`5b5e090`](5b5e090), [`b844e75`](b844e75), [`53230f0`](53230f0), [`6f16827`](6f16827), [`d2d55ef`](d2d55ef)]: - @lynx-js/web-worker-runtime@0.9.0 - @lynx-js/web-constants@0.9.0 - @lynx-js/web-worker-rpc@0.9.0 ## @lynx-js/web-elements@0.5.0 ### Minor Changes - feat: 1. list adds support for the `sticky` attribute. Now sticky-offset, sticky-top, and sticky-bottom will only take effect when `sticky` is `true`. ([#257](#257)) 2. Added support for `list-main-axis-gap`, `list-cross-axis-gap`. - feat(web): The list element supports list-type with **flow**. ([#240](#240)) It supports all attributes and events under single, and also provides `full-span`. For detailed usage, please refer to the official website. ## @lynx-js/web-mainthread-apis@0.9.0 ### Minor Changes - refractor: remove entryId concept ([#217](#217)) After the PR #198 All contents are isolated by a shadowroot. Therefore we don't need to add the entryId selector to avoid the lynx-view's style taking effect on the whole page. ### Patch Changes - refactor: clean the decodeOperations implementation ([#261](#261)) - refactor: remove customelement defined detecting logic ([#247](#247)) Before this commit, for those element with tag without `-`, we always try to detect if the `x-${tagName}` is defined. After this commit, we pre-define a map(could be override by the `overrideLynxTagToHTMLTagMap`) to make that transformation for tag name. This change is a path to SSR and the MTS support. - Updated dependencies \[[`5b5e090`](5b5e090), [`f447811`](f447811), [`b844e75`](b844e75), [`6f16827`](6f16827), [`d2d55ef`](d2d55ef)]: - @lynx-js/web-constants@0.9.0 - @lynx-js/web-style-transformer@0.2.3 ## @lynx-js/web-worker-runtime@0.9.0 ### Minor Changes - feat: `nativeModulesUrl` of lynx-view is changed to `nativeModulesMap`, and the usage is completely aligned with `napiModulesMap`. ([#220](#220)) "warning: This is a breaking change." `nativeModulesMap` will be a map: key is module-name, value should be a esm url which export default a function with two parameters(you never need to use `this`): - `NativeModules`: oriented `NativeModules`, which you can use to call other Native-Modules. - `NativeModulesCall`: trigger `onNativeModulesCall`, same as the deprecated `this.nativeModulesCall`. example: ```js const nativeModulesMap = { CustomModule: URL.createObjectURL( new Blob( [ `export default function(NativeModules, NativeModulesCall) { return { async getColor(data, callback) { const color = await NativeModulesCall('getColor', data); callback(color); }, } };`, ], { type: "text/javascript" } ) ), }; lynxView.nativeModulesMap = nativeModulesMap; ``` In addition, we will use Promise.all to load `nativeModules`, which will optimize performance in the case of multiple modules. - refractor: remove entryId concept ([#217](#217)) After the PR #198 All contents are isolated by a shadowroot. Therefore we don't need to add the entryId selector to avoid the lynx-view's style taking effect on the whole page. ### Patch Changes - refactor: remove customelement defined detecting logic ([#247](#247)) Before this commit, for those element with tag without `-`, we always try to detect if the `x-${tagName}` is defined. After this commit, we pre-define a map(could be override by the `overrideLynxTagToHTMLTagMap`) to make that transformation for tag name. This change is a path to SSR and the MTS support. - Updated dependencies \[[`5b5e090`](5b5e090), [`b844e75`](b844e75), [`53230f0`](53230f0), [`6f16827`](6f16827), [`d2d55ef`](d2d55ef)]: - @lynx-js/web-constants@0.9.0 - @lynx-js/web-mainthread-apis@0.9.0 - @lynx-js/web-worker-rpc@0.9.0 ## @lynx-js/rspeedy@0.8.5 ### Patch Changes - Bump Rsdoctor v1.0.0. ([#250](#250)) ## @lynx-js/react-rsbuild-plugin@0.9.3 ### Patch Changes - Support `@lynx-js/react` v0.106.0. ([#239](#239)) - Fix the issue where the canary version of React was not included in the `rule.include` configuration. ([#275](#275)) - Updated dependencies \[[`ba26a4d`](ba26a4d), [`462e97b`](462e97b), [`aa1fbed`](aa1fbed), [`d2d55ef`](d2d55ef), [`6af0396`](6af0396)]: - @lynx-js/template-webpack-plugin@0.6.6 - @lynx-js/react-webpack-plugin@0.6.9 - @lynx-js/runtime-wrapper-webpack-plugin@0.0.9 - @lynx-js/web-webpack-plugin@0.6.3 - @lynx-js/react-alias-rsbuild-plugin@0.9.3 - @lynx-js/css-extract-webpack-plugin@0.5.2 - @lynx-js/react-refresh-webpack-plugin@0.3.2 ## @lynx-js/react-alias-rsbuild-plugin@0.9.3 ### Patch Changes - Fix the issue where the canary version of React was not included in the `rule.include` configuration. ([#275](#275)) ## @lynx-js/web-style-transformer@0.2.3 ### Patch Changes - feat: 1. list adds support for the `sticky` attribute. Now sticky-offset, sticky-top, and sticky-bottom will only take effect when `sticky` is `true`. ([#257](#257)) 2. Added support for `list-main-axis-gap`, `list-cross-axis-gap`. ## @lynx-js/web-worker-rpc@0.9.0 ### Patch Changes - feat: add a new type function RpcCallType ([#283](#283)) ## @lynx-js/react-webpack-plugin@0.6.9 ### Patch Changes - Support `@lynx-js/react` v0.106.0. ([#239](#239)) ## @lynx-js/runtime-wrapper-webpack-plugin@0.0.9 ### Patch Changes - Add `window` variable to callback argument in `background.js` and the `window` is `undefined` in Lynx. Sometimes it's useful to distinguish between Lynx and the Web. ([#248](#248)) ```js define('background.js', (..., window) => { console.log(window); // `undefined` in Lynx }) ``` ## @lynx-js/template-webpack-plugin@0.6.6 ### Patch Changes - expose main.lynx.bundle to compiler ([#231](#231)) ## @lynx-js/web-webpack-plugin@0.6.3 ### Patch Changes - chore: remove unused file ([#217](#217)) - Updated dependencies \[[`f447811`](f447811)]: - @lynx-js/web-style-transformer@0.2.3 ## create-rspeedy@0.8.5 ## upgrade-rspeedy@0.8.5 Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

Sherry-hue requested a review from PupilTong as a code owner March 16, 2025 10:44

Sherry-hue self-assigned this Mar 16, 2025

Sherry-hue added enhancement New feature or request platform:Web labels Mar 16, 2025

Sherry-hue linked an issue Mar 16, 2025 that may be closed by this pull request

[Feature]: NativeModules need to be aligned with NapiModules #197

Closed

Sherry-hue changed the title ~~feat(web): of lynx-view is changed to , and the usage is completely …~~ feat(web): nativeModulesUrl of lynx-view is changed to nativeModulesMap Mar 16, 2025

PupilTong previously approved these changes Mar 17, 2025

View reviewed changes

Sherry-hue added this pull request to the merge queue Mar 17, 2025