Skip to content

feat(web): list supports list-type: flow#240

Merged
Sherry-hue merged 1 commit intolynx-family:mainfrom
Sherry-hue:feat/list-listType-flow
Mar 19, 2025
Merged

feat(web): list supports list-type: flow#240
Sherry-hue merged 1 commit intolynx-family:mainfrom
Sherry-hue:feat/list-listType-flow

Conversation

@Sherry-hue
Copy link
Copy Markdown
Collaborator

Summary

feat: The list element supports list-type with flow.

It supports all attributes and events under single, and also provides full-span.

For detailed usage, please refer to the official website.

Checklist

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

@Sherry-hue Sherry-hue requested a review from PupilTong as a code owner March 18, 2025 10:45
@changeset-bot
Copy link
Copy Markdown

changeset-bot bot commented Mar 18, 2025

🦋 Changeset detected

Latest commit: f9062c5

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/web-elements 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

@Sherry-hue Sherry-hue self-assigned this Mar 18, 2025
@Sherry-hue Sherry-hue added enhancement New feature or request platform:Web labels Mar 18, 2025
@Sherry-hue Sherry-hue moved this to In Progress in Lynx for Web Mar 18, 2025
@Sherry-hue Sherry-hue linked an issue Mar 18, 2025 that may be closed by this pull request
@Sherry-hue Sherry-hue changed the title feat(web): add list list-type: flow feat(web): list supports list-type: flow Mar 18, 2025
@codecov
Copy link
Copy Markdown

codecov bot commented Mar 18, 2025

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!

@Sherry-hue Sherry-hue force-pushed the feat/list-listType-flow branch 3 times, most recently from ba93ece to bafee82 Compare March 19, 2025 10:57
feat: add tests for list flow

feat: add list screenShot
@Sherry-hue Sherry-hue force-pushed the feat/list-listType-flow branch from bafee82 to f9062c5 Compare March 19, 2025 11:25
@Sherry-hue Sherry-hue added this pull request to the merge queue Mar 19, 2025
github-merge-queue bot pushed a commit that referenced this pull request Mar 19, 2025
## Summary

feat: The list element supports list-type with **flow**.

It supports all attributes and events under single, and also provides
`full-span`.

For detailed usage, please refer to the official website.

## Checklist

- [x] Tests updated (or not required).
- [x] Documentation updated (or not required).
@github-merge-queue github-merge-queue bot removed this pull request from the merge queue due to failed status checks Mar 19, 2025
@Sherry-hue Sherry-hue added this pull request to the merge queue Mar 19, 2025
Merged via the queue into lynx-family:main with commit 6f39df5 Mar 19, 2025
15 checks passed
@Sherry-hue Sherry-hue deleted the feat/list-listType-flow branch March 19, 2025 12:17
@github-project-automation github-project-automation bot moved this from In Progress to Done in Lynx for Web Mar 19, 2025
colinaaa pushed a commit that referenced this pull request Mar 22, 2025
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

Labels

enhancement New feature or request platform:Web

Projects

Status: Done

Development

Successfully merging this pull request may close these issues.

Implement flow layout for <list>

2 participants