Skip to content

feat(web): list add sticky && gap attribute#257

Merged
PupilTong merged 1 commit intolynx-family:mainfrom
Sherry-hue:feat/list-sticky-gap
Mar 20, 2025
Merged

feat(web): list add sticky && gap attribute#257
PupilTong merged 1 commit intolynx-family:mainfrom
Sherry-hue:feat/list-sticky-gap

Conversation

@Sherry-hue
Copy link
Collaborator

Summary

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.

  1. Added support for list-main-axis-gap, list-cross-axis-gap.

Checklist

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

@Sherry-hue Sherry-hue added enhancement New feature or request platform:Web labels Mar 20, 2025
@Sherry-hue Sherry-hue self-assigned this Mar 20, 2025
@Sherry-hue Sherry-hue requested a review from PupilTong as a code owner March 20, 2025 04:10
@changeset-bot
Copy link

changeset-bot bot commented Mar 20, 2025

🦋 Changeset detected

Latest commit: fa88422

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

This PR includes changesets to release 10 packages
Name Type
@lynx-js/web-style-transformer Patch
@lynx-js/web-elements Minor
@lynx-js/web-mainthread-apis Patch
@lynx-js/web-webpack-plugin Patch
@lynx-js/web-core Patch
@lynx-js/web-worker-runtime Patch
@lynx-js/react-rsbuild-plugin Patch
@lynx-js/web-constants Patch
@lynx-js/web-worker-rpc Patch
@lynx-js/react-alias-rsbuild-plugin 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

@Sherry-hue Sherry-hue moved this to In Progress in Lynx for Web Mar 20, 2025
@codecov
Copy link

codecov bot commented Mar 20, 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-sticky-gap branch from fa88422 to 6a7f7b5 Compare March 20, 2025 04:57
Copy link
Collaborator

@PupilTong PupilTong left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great Job!

@PupilTong PupilTong added this pull request to the merge queue Mar 20, 2025
Merged via the queue into lynx-family:main with commit f447811 Mar 20, 2025
15 checks passed
@github-project-automation github-project-automation bot moved this from In Progress to Done in Lynx for Web Mar 20, 2025
PupilTong referenced this pull request in PupilTong/lynx-stack Mar 20, 2025
## Summary

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`.

2. Added support for `list-main-axis-gap`, `list-cross-axis-gap`.

## Checklist

- [x] Tests updated (or not required).
- [x] Documentation updated (or not required).
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.

2 participants