feat(web): add main-thread API: __QuerySelector

.changeset/calm-needles-rule.md

@@ -0,0 +1,6 @@
+---
+"@lynx-js/web-constants": patch
+"@lynx-js/web-mainthread-apis": patch
+---
+
+feat: add main-thread API: __QuerySelector

packages/web-platform/web-constants/src/types/MainThreadGlobalThis.ts

@@ -319,12 +319,17 @@ export type QueryComponentPAPI = (
   }) => void,
 ) => null;
 export type InvokeUIMethodPAPI = (
-  element: unknown,
+  element: HTMLElement,
   method: string,
   params: object,
   callback: (result: InvokeCallbackRes) => void,
 ) => void;
 
+export type QuerySelectorPAPI = (
+  element: HTMLElement,
+  selector: string,
+) => unknown;
+
 export interface ElementPAPIs {
   __ElementFromBinary: ElementFromBinaryPAPI;
 
@@ -390,6 +395,7 @@ export interface ElementPAPIs {
     options?: FlushElementTreeOptions,
   ) => void;
   __InvokeUIMethod: InvokeUIMethodPAPI;
+  __QuerySelector: QuerySelectorPAPI;
 }
 
 export interface MainThreadGlobalThis extends ElementPAPIs {

packages/web-platform/web-mainthread-apis/ts/createMainThreadGlobalThis.ts

@@ -62,6 +62,8 @@ import {
   type QueryComponentPAPI,
   lynxEntryNameAttribute,
   ErrorCode,
+  type QuerySelectorPAPI,
+  type InvokeUIMethodPAPI,
 } from '@lynx-js/web-constants';
 import { createMainThreadLynx } from './createMainThreadLynx.js';
 import {
@@ -649,6 +651,76 @@ export function createMainThreadGlobalThis(
     );
   };
 
+  const __InvokeUIMethod: InvokeUIMethodPAPI = (
+    element,
+    method,
+    params,
+    callback,
+  ) => {
+    try {
+      if (method === 'boundingClientRect') {
+        const rect = (element as HTMLElement).getBoundingClientRect();
+        callback({
+          code: ErrorCode.SUCCESS,
+          data: {
+            id: (element as HTMLElement).id,
+            width: rect.width,
+            height: rect.height,
+            left: rect.left,
+            right: rect.right,
+            top: rect.top,
+            bottom: rect.bottom,
+          },
+        });
+        return;
+      }
+      if (typeof (element as any)[method] === 'function') {
+        const data = (element as any)[method](params);
+        callback({
+          code: ErrorCode.SUCCESS,
+          data,
+        });
+        return;
+      }
+      callback({
+        code: ErrorCode.METHOD_NOT_FOUND,
+      });
+    } catch (e) {
+      console.error(
+        `[lynx-web] invokeUIMethod: apply method failed with`,
+        e,
+        element,
+      );
+      callback({
+        code: ErrorCode.PARAM_INVALID,
+      });
+    }
+  };
+
+  const __QuerySelector: QuerySelectorPAPI = (
+    element,
+    selector,
+  ) => {
+    if (!element) return null;
+    const el = (element as HTMLElement).querySelector(selector);
+    if (el) {
+      if (!(el as any).invoke) {
+        (el as any).invoke = (method: string, params: object) => {
+          return new Promise((resolve, reject) => {
+            __InvokeUIMethod(el as HTMLElement, method, params, (res) => {
+              if (res.code === ErrorCode.SUCCESS) {
+                resolve(res.data);
+              } else {
+                reject(res);
+              }
+            });
+          });
+        };
+      }
+    }
+    return el;
+  };
+
   const __GetPageElement: GetPageElementPAPI = () => {
     return pageElement;
   };
@@ -817,46 +889,8 @@ export function createMainThreadGlobalThis(
     _I18nResourceTranslation: callbacks._I18nResourceTranslation,
     _AddEventListener: () => {},
     renderPage: undefined,
-    __InvokeUIMethod: (element, method, params, callback) => {
-      try {
-        if (method === 'boundingClientRect') {
-          const rect = (element as HTMLElement).getBoundingClientRect();
-          callback({
-            code: ErrorCode.SUCCESS,
-            data: {
-              id: (element as HTMLElement).id,
-              width: rect.width,
-              height: rect.height,
-              left: rect.left,
-              right: rect.right,
-              top: rect.top,
-              bottom: rect.bottom,
-            },
-          });
-          return;
-        }
-        if (typeof (element as any)[method] === 'function') {
-          const data = (element as any)[method](params);
-          callback({
-            code: ErrorCode.SUCCESS,
-            data,
-          });
-          return;
-        }
-        callback({
-          code: ErrorCode.METHOD_NOT_FOUND,
-        });
-      } catch (e) {
-        console.error(
-          `[lynx-web] invokeUIMethod: apply method failed with`,
-          e,
-          element,
-        );
-        callback({
-          code: ErrorCode.PARAM_INVALID,
-        });
-      }
-    },
+    __InvokeUIMethod,
+    __QuerySelector,
   };
   Object.assign(mtsRealm.globalWindow, mtsGlobalThis);
   Object.defineProperty(mtsRealm.globalWindow, 'renderPage', {

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

@@ -1,3 +1,3 @@
 // Copyright 2024 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.
@@ -56,7 +56,7 @@
   if (testname2) {
     url += `&casename2=${testname2}`;
   }
   await page.goto(url, {
     waitUntil: 'load',
   });
   await page.evaluate(() => document.fonts.ready);
@@ -464,6 +464,22 @@
       expect(scrollTopAfter).toBeGreaterThan(100);
     });
 
+    test('basic-main-query-selector', async ({ page }, { title }) => {
+      await goto(page, title);
+      await wait(100);
+      const scrollView = page.locator('scroll-view');
+      const scrollTopBefore = await scrollView.evaluate((node) =>
+        node.scrollTop
+      );
+      expect(scrollTopBefore).toBe(0);
+      await page.locator('#tap-me').click();
+      await wait(3000);
+      const scrollTopAfter = await scrollView.evaluate((node) =>
+        node.scrollTop
+      );
+      expect(scrollTopAfter).toBeGreaterThan(100);
+    });
+
     // lazy component
     test(
       'basic-lazy-component',
@@ -866,7 +882,7 @@
           'background-color',
           'rgb(0, 128, 0)',
         ); // green
         expect(page.locator('#target2'), 'mouse up event captured').toHaveCSS(
           'background-color',
           'rgb(0, 128, 0)',
         ); // green
@@ -1094,7 +1110,7 @@
         // @ts-expect-error
         return Object.keys(globalThis.timing);
       });
       expect(timingKeys).toContain('create_lynx_start');
       expect(timingKeys).toContain('dispatch_start');
       expect(timingKeys).toContain('layout_start');
       expect(timingKeys).toContain('layout_end');
@@ -1247,7 +1263,7 @@
         document.querySelector('lynx-view')!.remove();
       });
       await wait(50);
       expect(message).toContain('fin');
       expect(page.workers().length).toStrictEqual(0);
     });
 
@@ -1827,7 +1843,7 @@
         });
         await goto(page, title);
         await wait(200);
         !isSSR && expect(mts).toBe(true);
         expect(bts).toBe(true);
       },
     );
@@ -2090,7 +2106,7 @@
       const elementName = 'lynx-view';
       test('basic-element-lynx-view-not-auto', async ({ page }, { title }) => {
         await goto(page, title);
         await page.evaluate(() => {
           document.querySelector('lynx-view')!.setAttribute('width', '100vw');
           document.querySelector('lynx-view')!.setAttribute('height', '100vh');
           document.querySelector('lynx-view')!.setAttribute(
@@ -3037,7 +3053,7 @@
           await page.locator('.focus').click({ force: true });
           await wait(100);
           const result = await page.locator('.result').first().innerText();
           expect(result).toBe('bindfocus');
         },
       );
       // input/focus test-case end

packages/web-platform/web-tests/tests/react/basic-main-query-selector/index.jsx

@@ -0,0 +1,57 @@
+import { root } from '@lynx-js/react';
+
+export const App = () => {
+  const handleTap = () => {
+    'main thread';
+    const scrollView = lynx.querySelector('#scroll-view');
+    scrollView?.invoke('autoScroll', {
+      rate: 120,
+      start: true,
+    });
+  };
+
+  return (
+    <view
+      style={{
+        width: '100%',
+        height: '100%',
+        padding: '10px',
+        display: 'linear',
+        marginTop: '20px',
+      }}
+    >
+      <view main-thread:bindtap={handleTap} id='tap-me'>
+        <text
+          style={{
+            fontSize: '20px',
+            height: '40px',
+            paddingLeft: '10px',
+            marginTop: '10px',
+          }}
+        >
+          Tap me to enable auto-scroll
+        </text>
+      </view>
+      <scroll-view
+        id='scroll-view'
+        scroll-orientation='vertical'
+        style={{ width: '100%', height: '300px', paddingLeft: '5px' }}
+      >
+        {Array.from({ length: 20 }).map((item, index) => (
+          <view
+            style={{
+              width: 'calc(100% - 10px)',
+              height: '100px',
+              backgroundColor: index % 2 === 0 ? 'red' : 'blue',
+              margin: '5px',
+            }}
+          >
+            <text>Item {index}</text>
+          </view>
+        ))}
+      </scroll-view>
+    </view>
+  );
+};
+
+root.render(<App />);