feat: remove stale gestures when diff

Author: f0rdream

.changeset/all-crabs-smell.md

@@ -0,0 +1,5 @@
+---
+'@lynx-js/testing-environment': patch
+---
+
+Add `__RemoveGestureDetector` PAPI binding

.changeset/fair-horses-worry.md

@@ -0,0 +1,5 @@
+---
+'@lynx-js/react': patch
+---
+
+Remove stale gestures when gestures are removed

packages/react/runtime/__test__/snapshot/gesture.test.jsx

@@ -357,6 +357,8 @@ describe('Gesture', () => {
       globalEnvManager.switchToMainThread();
       const rLynxChange = lynx.getNativeApp().callLepusMethod.mock.calls[0];
       globalThis[rLynxChange[0]](rLynxChange[1]);
+      const textElement = __root.__element_root.children[0].children[0];
+      expect(elementTree.__GetGestureDetectorIds(textElement)).toEqual([3]);
 
       expect(__root.__element_root).toMatchInlineSnapshot(`
         <page
@@ -631,6 +633,7 @@ describe('Gesture', () => {
 
 describe('Gesture in spread', () => {
   it('normal gesture', async function() {
+    const spySetGesture = vi.spyOn(globalThis, '__SetGestureDetector');
     function Comp() {
       const gesture = {
         id: 1,
@@ -696,6 +699,29 @@ describe('Gesture in spread', () => {
 
     // Main Thread Render
     {
+      const textElement = __root.__element_root.children[0].children[0];
+      expect(spySetGesture).toHaveBeenCalledTimes(1);
+      expect(spySetGesture).toHaveBeenCalledWith(
+        textElement,
+        1,
+        0,
+        {
+          callbacks: [
+            {
+              name: 'onUpdate',
+              callback: expect.objectContaining({
+                _wkltId: 'bdd4:dd564:2',
+              }),
+            },
+          ],
+        },
+        {
+          waitFor: [],
+          simultaneous: [],
+          continueWith: [],
+        },
+      );
+
       expect(__root.__element_root).toMatchInlineSnapshot(`
         <page
           cssId="default-entry-from-native:0"
@@ -737,6 +763,8 @@ describe('Gesture in spread', () => {
     }
   });
   it('update gesture', async function() {
+    const spySetGesture = vi.spyOn(globalThis, '__SetGestureDetector');
+    const spyRemoveGesture = vi.spyOn(globalThis, '__RemoveGestureDetector');
     let _gesture = {
       id: 1,
       type: 0,
@@ -804,6 +832,8 @@ describe('Gesture in spread', () => {
     {
       globalEnvManager.switchToBackground();
       lynx.getNativeApp().callLepusMethod.mockClear();
+      spySetGesture.mockClear();
+      spyRemoveGesture.mockClear();
 
       _gesture = {
         ..._gesture,
@@ -815,6 +845,32 @@ describe('Gesture in spread', () => {
       globalEnvManager.switchToMainThread();
       const rLynxChange = lynx.getNativeApp().callLepusMethod.mock.calls[0];
       globalThis[rLynxChange[0]](rLynxChange[1]);
+      const textElement = __root.__element_root.children[0].children[0];
+
+      expect(spySetGesture).toHaveBeenCalledTimes(1);
+      expect(spySetGesture).toHaveBeenCalledWith(
+        textElement,
+        2,
+        0,
+        {
+          callbacks: [
+            {
+              name: 'onUpdate',
+              callback: expect.objectContaining({
+                _wkltId: 'bdd4:dd564:2',
+              }),
+            },
+          ],
+        },
+        {
+          waitFor: [],
+          simultaneous: [],
+          continueWith: [],
+        },
+      );
+      expect(spyRemoveGesture).toHaveBeenCalledTimes(1);
+      expect(spyRemoveGesture).toHaveBeenCalledWith(textElement, 1);
+      expect(elementTree.__GetGestureDetectorIds(textElement)).toEqual([2]);
 
       expect(__root.__element_root).toMatchInlineSnapshot(`
         <page
@@ -981,6 +1037,8 @@ describe('Gesture in spread', () => {
     }
   });
   it('remove gesture', async function() {
+    const spySetGesture = vi.spyOn(globalThis, '__SetGestureDetector');
+    const spyRemoveGesture = vi.spyOn(globalThis, '__RemoveGestureDetector');
     let _gesture = {
       id: 1,
       type: 0,
@@ -1048,6 +1106,8 @@ describe('Gesture in spread', () => {
     {
       globalEnvManager.switchToBackground();
       lynx.getNativeApp().callLepusMethod.mockClear();
+      spySetGesture.mockClear();
+      spyRemoveGesture.mockClear();
 
       _gesture = undefined;
 
@@ -1056,6 +1116,12 @@ describe('Gesture in spread', () => {
       globalEnvManager.switchToMainThread();
       const rLynxChange = lynx.getNativeApp().callLepusMethod.mock.calls[0];
       globalThis[rLynxChange[0]](rLynxChange[1]);
+      const textElement = __root.__element_root.children[0].children[0];
+      expect(spySetGesture).not.toHaveBeenCalled();
+      expect(spyRemoveGesture).toHaveBeenCalledTimes(1);
+      expect(spyRemoveGesture).toHaveBeenCalledWith(textElement, 1);
+      expect(elementTree.__GetGestureDetectorIds(textElement)).toEqual([]);
+      expect(textElement.props['has-react-gesture']).toBeUndefined();
 
       expect(__root.__element_root).toMatchInlineSnapshot(`
         <page

packages/react/runtime/__test__/utils/nativeMethod.ts

@@ -19,6 +19,15 @@ interface ElementOptions {
 
 export let uiSignNext = 0;
 export const parentMap = new WeakMap<Element, Element>();
+let gestureDetectorMap = new WeakMap<
+  Element,
+  Map<number, {
+    id: number;
+    type: number;
+    config: any;
+    relationMap: Record<string, number[]>;
+  }>
+>();
 // export const elementPrototype = Object.create(null);
 export const options: ElementOptions = {};
 
@@ -185,12 +194,40 @@ export const elementTree = new (class {
   }
 
   __SetGestureDetector(e: Element, id: number, type: number, config: any, relationMap: Record<string, number[]>) {
-    e.props.gesture = {
+    const detector = {
       id,
       type,
       config,
       relationMap,
     };
+    let detectors = gestureDetectorMap.get(e);
+    if (!detectors) {
+      detectors = new Map();
+      gestureDetectorMap.set(e, detectors);
+    }
+    detectors.set(id, detector);
+    e.props.gesture = detector;
+  }
+
+  __RemoveGestureDetector(e: Element, id: number) {
+    const detectors = gestureDetectorMap.get(e);
+    detectors?.delete(id);
+    if (e.props.gesture?.id === id) {
+      const latestDetector = detectors ? [...detectors.values()].at(-1) : undefined;
+      if (latestDetector) {
+        e.props.gesture = latestDetector;
+      } else {
+        delete e.props.gesture;
+      }
+    }
+  }
+
+  __GetGestureDetector(e: Element, id: number) {
+    return gestureDetectorMap.get(e)?.get(id);
+  }
+
+  __GetGestureDetectorIds(e: Element) {
+    return [...(gestureDetectorMap.get(e)?.keys() ?? [])];
   }
 
   __GetDataset(e: Element) {
@@ -317,6 +354,7 @@ export const elementTree = new (class {
   clear() {
     this.root = undefined;
     uiSignNext = 0;
+    gestureDetectorMap = new WeakMap();
   }
 
   toTree() {

packages/react/runtime/src/alog/elementPAPICall.ts

@@ -42,6 +42,7 @@ const fiberElementPAPINameList = [
   '__OnLifecycleEvent',
   '__QueryComponent',
   '__SetGestureDetector',
+  '__RemoveGestureDetector',
 ];
 
 export function initElementPAPICallAlog(globalWithIndex: Record<string, unknown> = globalThis): void {

packages/react/runtime/src/gesture/processGesture.ts

@@ -10,6 +10,25 @@ function isSerializedGesture(gesture: GestureKind): boolean {
   return gesture.__isSerialized ?? false;
 }
 
+function collectSerializedBaseGestures(gesture: GestureKind | undefined): BaseGesture[] {
+  if (!gesture || !isSerializedGesture(gesture)) {
+    return [];
+  }
+
+  if (gesture.type === GestureTypeInner.COMPOSED) {
+    return (gesture as ComposedGesture).gestures.flatMap((subGesture) => collectSerializedBaseGestures(subGesture));
+  }
+
+  return [gesture as BaseGesture];
+}
+
+function removeGestureDetector(dom: FiberElement, id: number): void {
+  // Keep compatibility with old runtimes where remove API is not exposed.
+  if (typeof __RemoveGestureDetector === 'function') {
+    __RemoveGestureDetector(dom, id);
+  }
+}
+
 function getGestureInfo(
   gesture: BaseGesture,
   oldGesture: BaseGesture | undefined,
@@ -58,7 +77,39 @@ export function processGesture(
     domSet: boolean;
   },
 ): void {
-  if (!gesture || !isSerializedGesture(gesture)) {
+  const baseGestures = collectSerializedBaseGestures(gesture);
+  const oldBaseGestures = collectSerializedBaseGestures(oldGesture);
+
+  const uniqBaseGestures: BaseGesture[] = [];
+  const uniqBaseGestureIds = new Set<number>();
+  for (const baseGesture of baseGestures) {
+    if (!uniqBaseGestureIds.has(baseGesture.id)) {
+      uniqBaseGestureIds.add(baseGesture.id);
+      uniqBaseGestures.push(baseGesture);
+    }
+  }
+
+  const uniqOldBaseGestures: BaseGesture[] = [];
+  const oldBaseGesturesById = new Map<number, BaseGesture>();
+  for (const oldBaseGesture of oldBaseGestures) {
+    if (!oldBaseGesturesById.has(oldBaseGesture.id)) {
+      oldBaseGesturesById.set(oldBaseGesture.id, oldBaseGesture);
+      uniqOldBaseGestures.push(oldBaseGesture);
+    }
+  }
+
+  if (uniqBaseGestures.length === 0) {
+    if (oldBaseGesturesById.size === 0) {
+      return;
+    }
+
+    for (const oldBaseGesture of oldBaseGesturesById.values()) {
+      removeGestureDetector(dom, oldBaseGesture.id);
+    }
+
+    if (!(gestureOptions && gestureOptions.domSet)) {
+      __SetAttribute(dom, 'has-react-gesture', null);
+    }
     return;
   }
 
@@ -67,16 +118,15 @@ export function processGesture(
     __SetAttribute(dom, 'flatten', false);
   }
 
-  if (gesture.type === GestureTypeInner.COMPOSED) {
-    for (const [index, subGesture] of (gesture as ComposedGesture).gestures.entries()) {
-      processGesture(dom, subGesture, (oldGesture as ComposedGesture)?.gestures[index], isFirstScreen, {
-        domSet: true,
-      });
+  for (const oldBaseGesture of oldBaseGesturesById.values()) {
+    if (!uniqBaseGestureIds.has(oldBaseGesture.id)) {
+      removeGestureDetector(dom, oldBaseGesture.id);
     }
-  } else {
-    const baseGesture = gesture as BaseGesture;
-    const oldBaseGesture = oldGesture as BaseGesture | undefined;
+  }
 
+  for (const [index, baseGesture] of uniqBaseGestures.entries()) {
+    const oldBaseGesture = oldBaseGesturesById.get(baseGesture.id)
+      ?? uniqOldBaseGestures[index];
     const { config, relationMap } = getGestureInfo(baseGesture, oldBaseGesture, isFirstScreen, dom);
     __SetGestureDetector(
       dom,

packages/react/runtime/types/types.d.ts

@@ -116,6 +116,7 @@ declare global {
     config: any,
     relationMap: Record<string, number[]>,
   ): void;
+  declare function __RemoveGestureDetector(node: FiberElement, id: number): void;
 
   declare interface FiberElement {}
 

packages/testing-library/testing-environment/etc/testing-environment.api.md

@@ -48,6 +48,7 @@ export const initElementTree: () => {
     __AddDataset(e: LynxElement, key: string, value: string): void;
     __SetDataset(e: LynxElement, dataset: any): void;
     __SetGestureDetector(e: LynxElement, id: number, type: number, config: any, relationMap: Record<string, number[]>): void;
+    __RemoveGestureDetector(e: LynxElement, id: number): void;
     __GetDataset(e: LynxElement): DOMStringMap;
     __RemoveElement(parent: LynxElement, child: LynxElement): void;
     __InsertElementBefore(parent: LynxElement, child: LynxElement, ref?: LynxElement | undefined): void;

packages/testing-library/testing-environment/src/lynx/ElementPAPI.ts

@@ -315,6 +315,12 @@ export const initElementTree = () => {
       };
     }
 
+    __RemoveGestureDetector(e: LynxElement, id: number) {
+      if (e.gesture?.id === id) {
+        e.gesture = undefined;
+      }
+    }
+
     __GetDataset(e: LynxElement) {
       return e.dataset;
     }