Skip to content

chore: add new css properties: offset-path, offset-distance#152

Merged
colinaaa merged 2 commits intolynx-family:mainfrom
YellowFishWyfCPP:p/YellowFishCpp/add-css-properties
Mar 10, 2025
Merged

chore: add new css properties: offset-path, offset-distance#152
colinaaa merged 2 commits intolynx-family:mainfrom
YellowFishWyfCPP:p/YellowFishCpp/add-css-properties

Conversation

@YellowFishWyfCPP
Copy link
Collaborator

Summary

Add two new css properties: offset-path and offset-distance for compile.

Checklist

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

@changeset-bot
Copy link

changeset-bot bot commented Mar 10, 2025

🦋 Changeset detected

Latest commit: 1ad00de

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/react 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 10, 2025

CLA assistant check
All committers have signed the CLA.

@YellowFishWyfCPP YellowFishWyfCPP force-pushed the p/YellowFishCpp/add-css-properties branch from 16fbec3 to 84badff Compare March 10, 2025 09:29
Huxpro
Huxpro previously approved these changes Mar 10, 2025
Copy link
Collaborator

@Huxpro Huxpro left a comment

Choose a reason for hiding this comment

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

LGTM

Signed-off-by: Qingyu Wang <40660121+colinaaa@users.noreply.github.com>
@colinaaa colinaaa merged commit ea27f28 into lynx-family:main Mar 10, 2025
colinaaa pushed a commit that referenced this pull request Mar 14, 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/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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants