feat: implement mts event handler support and update related constants

.changeset/all-melons-fall.md

@@ -0,0 +1,11 @@
+---
+"@lynx-js/web-mainthread-apis": patch
+"@lynx-js/web-worker-runtime": patch
+"@lynx-js/web-constants": patch
+"@lynx-js/web-webpack-plugin": patch
+"@lynx-js/web-core": patch
+---
+
+feat: support mts event handler (1/n)
+
+now the main-thread:bind handler could be invoked. The params of the handler will be implemented later.

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

@@ -20,4 +20,6 @@ export const __lynx_timing_flag = '__lynx_timing_flag' as const;
 
 export const globalMuteableVars = [
   'registerDataProcessor',
+  'registerWorkletInternal',
+  'lynxWorkletImpl',
 ] as const;

packages/web-platform/web-core/src/utils/loadTemplate.ts

@@ -98,6 +98,7 @@ const mainThreadInjectVars = [
   '__SetCSSId',
   '__OnLifecycleEvent',
   '__FlushElementTree',
+  '__LoadLepusChunk',
 ];
 
 const backgroundInjectVars = [

packages/web-platform/web-mainthread-apis/src/MainThreadLynx.ts

@@ -12,6 +12,10 @@ export function createMainThreadLynx(
   lepusRuntime: MainThreadRuntime,
 ) {
   return {
+    getJSContext() {
+      // TODO: implement this
+      return new EventTarget();
+    },
     requestAnimationFrame(cb: FrameRequestCallback) {
       return requestAnimationFrame(cb);
     },
@@ -23,8 +27,8 @@ export function createMainThreadLynx(
     requireModule(path: string) {
       // @ts-expect-error
       if (self.WorkerGlobalScope) {
-        const mainfestUrl = config.lepusCode[`/${path}`];
-        if (mainfestUrl) path = mainfestUrl;
+        const lepusChunkUrl = config.lepusCode[`${path}`];
+        if (lepusChunkUrl) path = lepusChunkUrl;
         // @ts-expect-error
         importScripts(path);
         const entry = (globalThis.module as LynxJSModule).exports;
@@ -39,8 +43,8 @@ export function createMainThreadLynx(
       path: string,
       callback: (error: Error | null, exports?: unknown) => void,
     ) {
-      const mainfestUrl = config.lepusCode[`/${path}`];
-      if (mainfestUrl) path = mainfestUrl;
+      const lepusChunkUrl = config.lepusCode[`${path}`];
+      if (lepusChunkUrl) path = lepusChunkUrl;
       import(
         /* webpackIgnore: true */
         path

packages/web-platform/web-mainthread-apis/src/MainThreadRuntime.ts

@@ -167,7 +167,9 @@ export class MainThreadRuntime {
         },
         set: (v: any) => {
           this.__lynxGlobalBindingValues[nm] = v;
-          this._updateVars?.();
+          for (const handler of this.__varsUpdateHandlers) {
+            handler();
+          }
         },
       });
     }
@@ -237,6 +239,10 @@ export class MainThreadRuntime {
   };
 
   updatePage?: (data: Cloneable, options?: Record<string, string>) => void;
+  runWorklet?: (obj: unknown, event: unknown) => void;
 
-  _updateVars?: () => void;
+  private __varsUpdateHandlers: (() => void)[] = [];
+  set _updateVars(handler: () => void) {
+    this.__varsUpdateHandlers.push(handler);
+  }
 }

packages/web-platform/web-mainthread-apis/src/elementAPI/ElementThreadElement.ts

@@ -11,11 +11,11 @@ export interface LynxRuntimeInfo {
   eventHandlerMap: Record<string, {
     capture: {
       type: LynxEventType;
-      handler: string;
+      handler: string | { type: 'worklet'; value: unknown };
     } | undefined;
     bind: {
       type: LynxEventType;
-      handler: string;
+      handler: string | { type: 'worklet'; value: unknown };
     } | undefined;
   }>;
   componentAtIndex?: ComponentAtIndexCallback;

packages/web-platform/web-mainthread-apis/src/elementAPI/event/eventFunctions.ts

@@ -7,7 +7,6 @@ import {
   LynxEventNameToW3cCommon,
   lynxTagAttribute,
   W3cEventNameToLynx,
-  type LynxCrossThreadEvent,
   type LynxEventType,
 } from '@lynx-js/web-constants';
 import {
@@ -31,7 +30,7 @@ export function createEventFunctions(runtime: MainThreadRuntime) {
         ?.handler
       : runtimeInfo.eventHandlerMap[lynxEventName]?.bind
         ?.handler;
-    if (hname) {
+    if (typeof hname === 'string') {
       const crossThreadEvent = createCrossThreadEvent(
         runtime,
         event,
@@ -58,6 +57,8 @@ export function createEventFunctions(runtime: MainThreadRuntime) {
         );
       }
       return true;
+    } else if (hname) {
+      runtime.runWorklet?.(hname.value, []);
     }
     return false;
   };
@@ -69,8 +70,7 @@ export function createEventFunctions(runtime: MainThreadRuntime) {
     element: HTMLElement,
     eventType: LynxEventType,
     eventName: string,
-    newEventHandler: string | undefined // | ((ev: LynxCrossThreadEvent) => void) | undefined,
-    ,
+    newEventHandler: string | { type: 'worklet'; value: unknown } | undefined,
   ) {
     eventName = eventName.toLowerCase();
     const isCatch = eventType === 'catchEvent' || eventType === 'capture-catch';
@@ -125,7 +125,7 @@ export function createEventFunctions(runtime: MainThreadRuntime) {
     element: HTMLElement,
     eventName: string,
     eventType: LynxEventType,
-  ): string | ((ev: LynxCrossThreadEvent) => void) | undefined {
+  ): string | { type: 'worklet'; value: unknown } | undefined {
     const runtimeInfo = runtime[elementToRuntimeInfoMap].get(element)!;
     eventName = eventName.toLowerCase();
     const isCapture = eventType.startsWith('capture');
@@ -138,26 +138,25 @@ export function createEventFunctions(runtime: MainThreadRuntime) {
   function __GetEvents(element: HTMLElement): {
     type: LynxEventType;
     name: string;
-    function: string | ((ev: Event) => void) | undefined;
+    function: string | { type: 'worklet'; value: unknown } | undefined;
   }[] {
     const eventHandlerMap =
       runtime[elementToRuntimeInfoMap].get(element)!.eventHandlerMap;
     const eventInfos: {
       type: LynxEventType;
       name: string;
-      function: string | ((ev: Event) => void) | undefined;
+      function: string | { type: 'worklet'; value: unknown } | undefined;
     }[] = [];
     for (const [lynxEventName, info] of Object.entries(eventHandlerMap)) {
       for (const atomInfo of [info.bind, info.capture]) {
         if (atomInfo) {
-          for (const [type, handler] of Object.values(atomInfo)) {
-            if (handler) {
-              eventInfos.push({
-                type: type as LynxEventType,
-                name: lynxEventName,
-                function: handler,
-              });
-            }
+          const { type, handler } = atomInfo;
+          if (handler) {
+            eventInfos.push({
+              type: type as LynxEventType,
+              name: lynxEventName,
+              function: handler,
+            });
           }
         }
       }

packages/web-platform/web-tests/resources/web-core.main-thread.json

@@ -2,8 +2,8 @@
   "styleInfo": {},
   "lepusCode": {
     "root": "self.runtime = lynx_runtime;self.__lynx_worker_type = 'main'; globalThis.registerDataProcessor='pass'; self.registerDataProcessor = registerDataProcessor;",
-    "/manifest-chunk.js": "module.exports = 'hello';",
-    "/manifest-chunk2.js": "module.exports = 'world';"
+    "manifest-chunk.js": "module.exports = 'hello';",
+    "manifest-chunk2.js": "module.exports = 'world';"
   },
   "manifest": {
     "/app-service.js": "self.runtime = lynx_runtime; self.__lynx_worker_type = 'background'",

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

@@ -34,7 +34,7 @@
 
 const expectHasText = async (page: Page, text: string) => {
   const hasText = (await page.getByText(text).count()) === 1;
   await expect(hasText).toBe(true);
 };
 
 const expectNoText = async (page: Page, text: string) => {
@@ -79,7 +79,7 @@
       await wait(100);
       const target = page.locator('#target');
       await target.click();
       await expect(await target.getAttribute('style')).toContain('green');
       await target.click();
       await expect(await target.getAttribute('style')).toContain('pink');
     });
@@ -255,6 +255,20 @@
       await expect(target).toHaveCSS('width', '100px');
       await expect(target).toHaveCSS('background-color', 'rgb(255, 192, 203)');
     });
+    test('basic-mts-bindtap', async ({ page }, { title }) => {
+      let eventHandlerTriggered = false;
+      page.on('console', (message) => {
+        if (message.text() === 'hello world') {
+          eventHandlerTriggered = true;
+        }
+      });
+      await goto(page, title);
+      await wait(100);
+      const target = page.locator('#target');
+      await target.click();
+      await wait(100);
+      expect(eventHandlerTriggered).toBe(true);
+    });
   });
   test.describe('basic-css', () => {
     test('basic-css-asset-in-css', async ({ page }, { title }) => {
@@ -994,7 +1008,7 @@
       await target.click();
       await expect(await target.getAttribute('style')).toContain('green');
       await target.click();
       await expect(await target.getAttribute('style')).toContain('pink');
     });
 
     test(
@@ -1538,7 +1552,7 @@
         }) => {
           await goto(page, title);
           await wait(300);
           await page.evaluate(() => {
             document.querySelector('lynx-view')!.shadowRoot!.querySelector(
               'scroll-view',
             )!.scrollTop = 200;

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

@@ -0,0 +1,22 @@
+// 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] = useState('pink');
+  return (
+    <view
+      id='target'
+      main-thread:bindTap={() => {
+        'main thread';
+        console.log('hello world');
+      }}
+      style={{
+        height: '100px',
+        width: '100px',
+        background: color,
+      }}
+    />
+  );
+}
+root.render(<App />);

packages/web-platform/web-worker-runtime/src/index.ts

@@ -23,6 +23,6 @@ self.onmessage = (ev) => {
   }
 };
 Object.assign(globalThis, {
-  SystemInfo: { platform: 'web' },
+  SystemInfo: { platform: 'web', lynxSdkVersion: '3.0' },
   module: { exports: null },
 });

packages/webpack/web-webpack-plugin/src/index.ts

@@ -68,7 +68,11 @@ export class WebWebpackPlugin {
               manifest: encodeOptions.manifest,
               cardType: encodeOptions['cardType'],
               pageConfig: encodeOptions.compilerOptions,
-              lepusCode: encodeOptions.lepusCode,
+              lepusCode: {
+                // flatten the lepusCode to a single object
+                ...encodeOptions.lepusCode.lepusChunk,
+                root: encodeOptions.lepusCode.root,
+              },
               customSections: encodeOptions.customSections,
             })),
             debugInfo: '',