Skip to content

feat: use shadowroot to isolate one lynx-view#198

Merged
PupilTong merged 1 commit intolynx-family:mainfrom
PupilTong:p/hw/add-shadow-root
Mar 14, 2025
Merged

feat: use shadowroot to isolate one lynx-view#198
PupilTong merged 1 commit intolynx-family:mainfrom
PupilTong:p/hw/add-shadow-root

Conversation

@PupilTong
Copy link
Collaborator

@PupilTong PupilTong commented Mar 13, 2025 •
edited
Loading

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.
#51

@changeset-bot
Copy link

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

🦋 Changeset detected

Latest commit: f5a3b3f

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

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

@PupilTong PupilTong force-pushed the p/hw/add-shadow-root branch from 5499d16 to 79b642b Compare March 14, 2025 04:25
@PupilTong PupilTong changed the title refactor: use shadowroot to isolate one lynx-view feat: use shadowroot to isolate one lynx-view Mar 14, 2025
@PupilTong
feat: use shadowroot to isolate one lynx-view
f5a3b3f 
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.
@PupilTong PupilTong force-pushed the p/hw/add-shadow-root branch from 79b642b to f5a3b3f Compare March 14, 2025 04:28
@PupilTong PupilTong marked this pull request as ready for review March 14, 2025 04:31
@PupilTong PupilTong self-assigned this Mar 14, 2025
Sherry-hue
Sherry-hue reviewed Mar 14, 2025
View reviewed changes
@PupilTong PupilTong moved this to In Progress in Lynx for Web Mar 14, 2025
@PupilTong PupilTong requested a review from Sherry-hue March 14, 2025 05:48
@PupilTong PupilTong merged commit 63fab7b into lynx-family:main Mar 14, 2025
12 checks passed
@github-project-automation github-project-automation bot moved this from In Progress to Done in Lynx for Web Mar 14, 2025
@codecov
Copy link

codecov bot commented Mar 14, 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 14, 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>
PupilTong referenced this pull request in PupilTong/lynx-stack Mar 15, 2025
@PupilTong
refractor: remove entryId concept
48ef0a0 
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.
@PupilTong PupilTong mentioned this pull request Mar 15, 2025
Merged
PupilTong referenced this pull request in PupilTong/lynx-stack Mar 17, 2025
@PupilTong
refractor: remove entryId concept
079c8ad 
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.
PupilTong referenced this pull request in PupilTong/lynx-stack Mar 18, 2025
@PupilTong
refractor: remove entryId concept
6498fb3 
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.
github-merge-queue bot pushed a commit that referenced this pull request Mar 18, 2025
@PupilTong
refactor: remove entryId concept (#217)
d2d55ef 
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.
This was referenced Mar 18, 2025
Merged
Open
colinaaa pushed a commit that referenced this pull request Mar 22, 2025
@github-actions
chore: Release 2025-03-21 16:30:09 (#242)
5bfb5c0 
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@Sherry-hue Sherry-hue Sherry-hue approved these changes

@colinaaa colinaaa Awaiting requested review from colinaaa

Assignees

@PupilTong PupilTong

Labels

platform:Web

Projects

Lynx for Web
Status: Done

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@PupilTong @Sherry-hue