feat: support events

Author: Yradex

examples/react/src/MTC.tsx

@@ -5,6 +5,7 @@ import {
   renderFakeMTCSlot,
   renderMTCSlot,
 } from '@lynx-js/react/internal';
+import { MainThread } from '@lynx-js/types';
 
 const componentInstanceId = 1;
 
@@ -14,6 +15,16 @@ if (__MAIN_THREAD__) {
   function $$mtc_RealMTC(props) {
     return (
       <view>
+        <text
+          bindtap={(e: MainThread.TouchEvent) => {
+            console.log('click');
+            e.currentTarget.setStyleProperties({
+              'background-color': 'red',
+            });
+          }}
+        >
+          MTC
+        </text>
         {renderMTCSlot(props.btc1)}
         {renderMTCSlot(props.btc2)}
       </view>

packages/react/runtime/src/lifecycle/patch/updateMainThread.ts

@@ -7,11 +7,12 @@ import { updateWorkletRefInitValueChanges } from '@lynx-js/react/worklet-runtime
 import type { PatchList, PatchOptions } from './commit.js';
 import { setMainThreadHydrating } from './isMainThreadHydrating.js';
 import { snapshotPatchApply } from './snapshotPatchApply.js';
+import { printSnapshotInstance } from '../../debug/printSnapshot.js';
 import { LifecycleConstant } from '../../lifecycleConstant.js';
 import { markTiming, setPipeline } from '../../lynx/performance.js';
 import { __pendingListUpdates } from '../../pendingListUpdates.js';
 import { applyRefQueue } from '../../snapshot/workletRef.js';
-import { __page } from '../../snapshot.js';
+import { __page, snapshotInstanceManager } from '../../snapshot.js';
 import { getReloadVersion } from '../pass.js';
 
 function updateMainThread(
@@ -51,8 +52,8 @@ function updateMainThread(
         snapshotPatchApply(snapshotPatch);
       }
       __pendingListUpdates.flush();
-      // console.debug('********** Lepus updatePatch:');
-      // printSnapshotInstance(snapshotInstanceManager.values.get(-1)!);
+      console.debug('********** Lepus updatePatch:');
+      printSnapshotInstance(snapshotInstanceManager.values.get(-1)!);
     }
   } finally {
     markTiming('patchChangesEnd');

packages/react/runtime/src/snapshot.ts

@@ -713,7 +713,7 @@ function renderMTC(snapshotInstance: SnapshotInstance, props: MTCProps) {
     wrapper.nodeType = 1;
     render(vnode, wrapper as unknown as ContainerNode);
     wrapper.ensureElements();
-    console.log('yra renderMTC render-1', vnode.__e, vnode.__e !== undefined);
+    // console.log('yra renderMTC render-1', vnode.__e, vnode.__e !== undefined);
     if (vnode.__e) {
       snapshotInstance.insertBefore(vnode.__e as SnapshotInstance);
       (vnode.__e as SnapshotInstance).__onDestroy = () => {

packages/react/runtime/src/snapshot/event.ts

@@ -1,8 +1,39 @@
 // 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.
+
+import { BaseEvent } from '@lynx-js/types';
+
+import { Element } from '../../../worklet-runtime/src/api/element.js';
 import { SnapshotInstance } from '../snapshot.js';
 
+const mtcEvents: Map<number, (e: unknown) => void> = /*#__PURE__*/ new Map();
+
+function registerMTCEvent(id: string, callback: undefined | ((e: BaseEvent) => void)): unknown {
+  if (!callback) {
+    mtcEvents.delete(id);
+    return undefined;
+  }
+  mtcEvents.set(id, callback);
+  return {
+    type: 'worklet',
+    value: {
+      _workletType: 'mtc',
+      _wkltId: id,
+    },
+  };
+}
+
+globalThis.runWorklet = (w, e: [BaseEvent]) => {
+  const event = {
+    ...e[0],
+    target: new Element(e[0].target.elementRefptr),
+    currentTarget: new Element(e[0].currentTarget.elementRefptr),
+  };
+  console.log('yra runWorklet', w, event);
+  mtcEvents.get(w._wkltId)(event);
+};
+
 function updateEvent(
   snapshot: SnapshotInstance,
   expIndex: number,
@@ -13,17 +44,19 @@ function updateEvent(
   spreadKey: string,
 ): void {
   const value = snapshot.__values![expIndex];
+  const eventId = `${snapshot.__id}:${expIndex}:${spreadKey}`;
   let event;
   if (!value) {
     event = undefined;
-  } else if (typeof value === 'string') {
+    registerMTCEvent(eventId, undefined);
+  } else if (typeof value === 'string' || (typeof value === 'object' && value.type === 'worklet')) {
     event = value;
+  } else if (typeof value === 'function') {
+    event = registerMTCEvent(eventId, value);
   } else {
-    event = `${snapshot.__id}:${expIndex}:${spreadKey}`;
+    event = eventId;
   }
 
-  // todo: reuseId?
-
   snapshot.__values![expIndex] = event;
   if (snapshot.__elements) {
     __AddEvent(snapshot.__elements[elementIndex]!, eventType, eventName, event);

packages/react/transform/src/swc_plugin_snapshot/mod.rs

@@ -1279,11 +1279,7 @@ where
               snapshot_values.push(Some(ExprOrSpread {
                 spread: None,
                 expr: Box::new(if let AttrName::Event(_, _) = attr_name {
-                  if target == TransformTarget::LEPUS {
-                    quote!("1" as Expr)
-                  } else {
-                    value
-                  }
+                  value
                 } else if let AttrName::Ref = attr_name {
                   if target == TransformTarget::LEPUS {
                     quote!("1" as Expr)