fix(web): bindtap detail should contain x, y

.changeset/modern-windows-doubt.md

@@ -0,0 +1,5 @@
+---
+"@lynx-js/web-mainthread-apis": patch
+---
+
+fix: The `e.detail` in the `bindtap` callback needs to correctly include `x` and `y`.

packages/web-platform/offscreen-document/src/main/initOffscreenDocument.ts

@@ -18,6 +18,8 @@ const otherPropertyNames = [
   'touches',
   'targetTouches',
   'changedTouches',
+  'x',
+  'y',
 ];
 const blockList = new Set([
   'isTrusted',

packages/web-platform/web-mainthread-apis/src/utils/createCrossThreadEvent.ts

@@ -37,6 +37,7 @@ export function createCrossThreadEvent(
   const params: Cloneable = {};
   const isTrusted = domEvent.isTrusted;
   const otherProperties: CloneableObject = {};
+  let detail = domEvent.detail ?? {};
   if (type.match(/^transition/)) {
     Object.assign(params, {
       'animation_type': 'keyframe-animation',
@@ -79,6 +80,11 @@ export function createCrossThreadEvent(
       clientX: mouseEvent.clientX,
       clientY: mouseEvent.clientY,
     });
+  } else if (type === 'click') {
+    detail = {
+      x: (domEvent as MouseEvent).x,
+      y: (domEvent as MouseEvent).y,
+    };
   }
   const currentTargetDatasetString = currentTargetElement?.getAttribute(
     lynxDatasetAttribute,
@@ -109,7 +115,7 @@ export function createCrossThreadEvent(
       }
       : null,
     // @ts-expect-error
-    detail: domEvent.detail ?? {},
+    detail,
     params,
     ...otherProperties,
   };

packages/web-platform/web-tests/tests/react.spec.ts

@@ -23,7 +23,7 @@
     ReturnType<typeof expect<Page>>['toHaveScreenshot']
   >[0],
 ) => {
   await expect(page).toHaveScreenshot([
     `${caseName}`,
     `${subcaseName}`,
     `${label}.png`,
@@ -105,7 +105,7 @@
           )
             .filter(i => i.getAttribute('lynx-tag') === 'page').length
         ),
       ).toBe(1);
     });
     test('basic-bindtap', async ({ page }, { title }) => {
       await goto(page, title);
@@ -118,6 +118,17 @@
       await wait(100);
       await expect(await target.getAttribute('style')).toContain('pink');
     });
+    test('basic-bindtap-detail', async ({ page }, { title }) => {
+      await goto(page, title);
+      await wait(100);
+      const target = page.locator('#target');
+      await target.click();
+      await wait(100);
+      await expect(await target.getAttribute('style')).toContain('green');
+      await target.click();
+      await wait(100);
+      await expect(await target.getAttribute('style')).toContain('pink');
+    });
     test('basic-event-target-id', async ({ page }, { title }) => {
       await goto(page, title);
       await wait(100);
@@ -841,7 +852,7 @@
           'background-color',
           'rgb(0, 128, 0)',
         ); // green
         expect(page.locator('#target2'), 'mouse up event captured').toHaveCSS(
           'background-color',
           'rgb(0, 128, 0)',
         ); // green
@@ -2292,7 +2303,7 @@
           // nativeTextinitialtextinitial
           // -- -> nativeText
           count = await page.getByText('nativeText').count();
           expect(count).toBe(1);
           count = await page.getByText('initial').count();
           expect(count).toBeGreaterThanOrEqual(1);
           count = await page.getByText('--').count();
@@ -2588,7 +2599,7 @@
             )!.scrollTop = 200;
           });
           await wait(200);
           const eventDetails = await page.evaluate(() => {
             const event = JSON.parse(
               document.querySelector('lynx-view')!.shadowRoot!.querySelector(
                 '#result>raw-text',
@@ -2989,7 +3000,7 @@
         await page.locator('input').press('Enter');
         await wait(100);
         const result = await page.locator('.result').first().innerText();
         expect(result).toBe('bindconfirm');
       });
       // input/bindconfirm test-case end
 
@@ -3048,7 +3059,7 @@
               )?.click();
           });
           await wait(200);
           expect(val).toBe(true);
           expect(selectionBegin).toBe(true);
           expect(selectionEnd).toBe(true);
         },
@@ -3065,7 +3076,7 @@
             inputDom?.setSelectionRange(2, 5);
           });
           const result = await page.locator('.result').first().innerText();
           expect(result).toBe('2-5');
         },
       );
       test(
@@ -4376,7 +4387,7 @@
           await wait(100);
           expect(bindblur).toBeTruthy();
           expect(bindfocus).toBeTruthy();
           expect(bindinput).toBeTruthy();
         },
       );
       // x-textarea/bindinput test-case end
@@ -4557,7 +4568,7 @@
       'basic-linear-orientation-horizontal-with-direction',
       async ({ page }, {
         title,
       }) => {
         await goto(page, title);
         await diffScreenShot(page, title, 'index');
       },

packages/web-platform/web-tests/tests/react/basic-bindtap-detail/index.jsx

@@ -0,0 +1,25 @@
+// Copyright 2023 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+import { useState, root } from '@lynx-js/react';
+function App() {
+  const [color, setColor] = useState('pink');
+  const handleTap = (e) => {
+    if (typeof e.detail.x === 'number' && typeof e.detail.y === 'number') {
+      setColor(color === 'pink' ? 'green' : 'pink');
+    }
+  };
+
+  return (
+    <view
+      id='target'
+      bindtap={handleTap}
+      style={{
+        height: '100px',
+        width: '100px',
+        background: color,
+      }}
+    />
+  );
+}
+root.render(<App />);