Repository: lynx-family/lynx-stack
Pull request #175: fix: gesture config not being processed correctly
Author: login: f0rdream
Created: 2025-03-11T13:07:36Z | Merged: 2025-03-12T08:29:42Z

<!--
  Thank you for submitting a pull request!

  We appreciate the time and effort you have invested in making these changes. Please ensure that you provide enough information to allow others to review your pull request.

  Upon submission, your pull request will be automatically assigned with reviewers.

  If you want to learn more about contributing to this project, please visit: https://github.com/lynx-family/lynx-stack/blob/main/CONTRIBUTING.md.
-->

## Summary

Gesture may have configs like `minDistance` fro `PanGesture`, but it is not correctly processed. Now we add it when processing gesture object.

## Checklist

<!--- Check and mark with an "x" -->

- [x] Tests updated (or not required).
- [x] Documentation updated (or not required).



Diff:
diff --git a/.changeset/tangy-pugs-peel.md b/.changeset/tangy-pugs-peel.md
new file mode 100644
index 0000000000..2c8a0e1366
--- /dev/null
+++ b/.changeset/tangy-pugs-peel.md
@@ -0,0 +1,11 @@
+---
+'@lynx-js/react': patch
+---
+
+fix: gesture config not processed correctly
+
+```typescript
+const pan = Gesture.Pan().minDistance(100);
+```
+
+After this commit, gesture config like `minDistance` should work as expected.
diff --git a/packages/react/runtime/__test__/snapshot/gesture.test.jsx b/packages/react/runtime/__test__/snapshot/gesture.test.jsx
index 8243e25b70..baba2b4698 100644
--- a/packages/react/runtime/__test__/snapshot/gesture.test.jsx
+++ b/packages/react/runtime/__test__/snapshot/gesture.test.jsx
@@ -256,7 +256,8 @@ describe('Gesture', () => {
     }
   });
   it('update gesture', async function() {
-    let _gesture, id = 1;
+    let _gesture,
+      id = 1;
     function Comp() {
       _gesture = {
         id: id++,
@@ -517,6 +518,113 @@ describe('Gesture', () => {
       `);
     }
   });
+  it('gesture with config', async function() {
+    function Comp() {
+      const gesture = {
+        id: 1,
+        type: 0,
+        callbacks: {
+          onUpdate: {
+            _wkltId: 'bdd4:dd564:2',
+          },
+        },
+        config: {
+          minDistance: 100,
+        },
+        __isGesture: true,
+        toJSON: () => ({
+          ...gesture,
+          __isSerialized: true,
+        }),
+      };
+
+      return (
+        <view>
+          <text main-thread:gesture={gesture}>1</text>
+        </view>
+      );
+    }
+
+    // main thread render
+    {
+      __root.__jsx = <Comp />;
+      renderPage();
+      expect(__root.__element_root).toMatchInlineSnapshot(`
+        <page
+          cssId="default-entry-from-native:0"
+        >
+          <view>
+            <text>
+              <raw-text
+                text="1"
+              />
+            </text>
+          </view>
+        </page>
+      `);
+    }
+
+    // background render
+    {
+      globalEnvManager.switchToBackground();
+      render(<Comp />, __root);
+    }
+
+    // hydrate
+    {
+      // LifecycleConstant.firstScreen
+      lynxCoreInject.tt.OnLifecycleEvent(...globalThis.__OnLifecycleEvent.mock.calls[0]);
+
+      // rLynxChange
+      globalEnvManager.switchToMainThread();
+      const rLynxChange = lynx.getNativeApp().callLepusMethod.mock.calls[0];
+      globalThis[rLynxChange[0]](rLynxChange[1]);
+    }
+
+    {
+      expect(__root.__element_root).toMatchInlineSnapshot(`
+        <page
+          cssId="default-entry-from-native:0"
+        >
+          <view>
+            <text
+              flatten={false}
+              gesture={
+                {
+                  "config": {
+                    "callbacks": [
+                      {
+                        "callback": {
+                          "_execId": 7,
+                          "_wkltId": "bdd4:dd564:2",
+                        },
+                        "name": "onUpdate",
+                      },
+                    ],
+                    "config": {
+                      "minDistance": 100,
+                    },
+                  },
+                  "id": 1,
+                  "relationMap": {
+                    "continueWith": [],
+                    "simultaneous": [],
+                    "waitFor": [],
+                  },
+                  "type": 0,
+                }
+              }
+              has-react-gesture={true}
+            >
+              <raw-text
+                text="1"
+              />
+            </text>
+          </view>
+        </page>
+      `);
+    }
+  });
 });
 
 describe('Gesture in spread', () => {
@@ -599,7 +707,7 @@ describe('Gesture in spread', () => {
                     "callbacks": [
                       {
                         "callback": {
-                          "_execId": 7,
+                          "_execId": 8,
                           "_wkltId": "bdd4:dd564:2",
                         },
                         "name": "onUpdate",
@@ -719,7 +827,7 @@ describe('Gesture in spread', () => {
                     "callbacks": [
                       {
                         "callback": {
-                          "_execId": 9,
+                          "_execId": 10,
                           "_wkltId": "bdd4:dd564:2",
                         },
                         "name": "onUpdate",
@@ -843,7 +951,7 @@ describe('Gesture in spread', () => {
                     "callbacks": [
                       {
                         "callback": {
-                          "_execId": 10,
+                          "_execId": 11,
                           "_wkltId": "bdd4:dd564:2",
                         },
                         "name": "onUpdate",
diff --git a/packages/react/runtime/src/gesture/processGesture.ts b/packages/react/runtime/src/gesture/processGesture.ts
index 758fbf1d50..d0398d1f7c 100644
--- a/packages/react/runtime/src/gesture/processGesture.ts
+++ b/packages/react/runtime/src/gesture/processGesture.ts
@@ -17,6 +17,10 @@ function getGestureInfo(gesture: BaseGesture, dom: FiberElement) {
   } as GestureConfig;
   const baseGesture = gesture;
 
+  if (baseGesture.config) {
+    config.config = baseGesture.config;
+  }
+
   for (
     const key of Object.keys(baseGesture.callbacks) as Array<
       keyof BaseGesture['callbacks']
diff --git a/packages/react/runtime/src/gesture/types.ts b/packages/react/runtime/src/gesture/types.ts
index a378e69ea0..1c44c8a1c5 100644
--- a/packages/react/runtime/src/gesture/types.ts
+++ b/packages/react/runtime/src/gesture/types.ts
@@ -29,6 +29,7 @@ export interface BaseGesture extends GestureKind {
   waitFor: BaseGesture[];
   simultaneousWith: BaseGesture[];
   continueWith: BaseGesture[];
+  config?: Record<string, unknown>;
 }
 
 export interface GestureConfig {
@@ -36,4 +37,5 @@ export interface GestureConfig {
     name: string;
     callback: Worklet;
   }[];
+  config?: Record<string, unknown>;
 }


Reviews:
user: login: Yradex
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-03-11T13:57:36Z
user: login: f0rdream
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-03-12T08:11:59Z
user: login: Yradex
state: APPROVED
author_association: COLLABORATOR
submitted_at: 2025-03-12T08:13:39Z

Review comments:
diff_hunk: @@ -0,0 +1,5 @@
+---
+'@lynx-js/react': patch
+---
+
+Fix gesture not being processed correctly
path: .changeset/tangy-pugs-peel.md
user: login: Yradex
body: can you provide a better description so our users can understand what it fixes?
created_at: 2025-03-11T13:56:36Z
author_association: COLLABORATOR
diff_hunk: @@ -0,0 +1,5 @@
+---
+'@lynx-js/react': patch
+---
+
+Fix gesture not being processed correctly
path: .changeset/tangy-pugs-peel.md
user: login: f0rdream
body: Sure, changeset updated
created_at: 2025-03-12T08:11:59Z
author_association: COLLABORATOR

PR comments:
user: login: changeset-bot[bot]
created_at: 2025-03-11T13:07:40Z
body: ###  🦋  Changeset detected

Latest commit: ff35f869b165e5eb59da692206194c62cd054e8c

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

<details><summary>This PR includes changesets to release 1 package</summary>

  | Name           | Type  |
| -------------- | ----- |
| @lynx-js/react | Patch |

</details>

Not sure what this means? [Click here  to learn what changesets are](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md).

[Click here if you're a maintainer who wants to add another changeset to this PR](https://github.com/f0rdream/lynx-stack/new/feature/gesture_config?filename=.changeset/six-zoos-wonder.md&value=---%0A%22%40lynx-js%2Freact%22%3A%20patch%0A%22%40lynx-js%2Freact-runtime%22%3A%20patch%0A---%0A%0Afix%3A%20gesture%20config%20not%20being%20processed%20correctly%0A)


author_association: NONE
user: login: codecov[bot]
created_at: 2025-03-11T13:28:30Z
body: ## [Codecov](https://app.codecov.io/gh/lynx-family/lynx-stack/pull/175?dropdown=coverage&src=pr&el=h1&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=lynx-family) Report
All modified and coverable lines are covered by tests :white_check_mark:

:loudspeaker: Thoughts on this report? [Let us know!](https://github.com/codecov/feedback/issues/255)
author_association: NONE