Merge pull request #3 from easyops-cn/steve/event-callback

feat(): support event callback declaration

Author: weareoutman

apps/test/src/Pages/Layout.tsx

@@ -28,16 +28,14 @@ export default function Layout() {
     age: 30,
   };
 
+  const handleClick = () => {
+    setA("New Value by callback");
+    setC((prev) => prev + 42);
+  };
+
   return (
     <>
-      <button
-        onClick={() => {
-          setA("New Value");
-          setC((prev) => prev + 42);
-        }}
-      >
-        My App
-      </button>
+      <button onClick={handleClick}>My App</button>
       <pre>{JSON.stringify(sessionStore.getItem("myKey"), null, 2)}</pre>
       <eo-descriptions
         dataSource={dataSource}

packages/parser/src/__snapshots__/parseTemplate.spec.ts.snap

@@ -141,7 +141,7 @@ exports[`parseTemplate should work 1`] = `
               "start": 81,
               "type": "Identifier",
             },
-            "kind": "eventHandler",
+            "kind": "eventHandlerParam",
           },
           Node {
             "end": 105,
@@ -185,7 +185,7 @@ exports[`parseTemplate should work 1`] = `
               "start": 93,
               "type": "Identifier",
             },
-            "kind": "eventHandler",
+            "kind": "eventHandlerParam",
           },
         },
         "children": [

packages/parser/src/__snapshots__/parseView.spec.ts.snap

@@ -1116,7 +1116,7 @@ exports[`parseView should work 1`] = `
                 "start": 218,
                 "type": "Identifier",
               },
-              "kind": "eventHandler",
+              "kind": "eventHandlerParam",
             },
             Node {
               "end": 242,
@@ -1160,7 +1160,7 @@ exports[`parseView should work 1`] = `
                 "start": 230,
                 "type": "Identifier",
               },
-              "kind": "eventHandler",
+              "kind": "eventHandlerParam",
             },
           },
           "children": [

packages/parser/src/modules/interfaces.ts

@@ -10,6 +10,7 @@ import type {
   LifeCycle,
   ParseError,
 } from "../interfaces.js";
+import type { NodePath } from "@babel/traverse";
 
 export interface ParsedApp {
   appType: "app" | "view" | "template";
@@ -100,7 +101,8 @@ export interface BindingInfo {
     | "flags"
     | "media"
     | "param"
-    | "eventHandler"
+    | "eventHandlerParam"
+    | "eventCallback"
     | "component"
     | "context"
     | "function";
@@ -117,6 +119,9 @@ export interface BindingInfo {
   /** For kind "context" */
   contextProvider?: ContextReference;
   contextKey?: string;
+
+  /** For kind "eventCallback" */
+  callback?: NodePath<t.FunctionExpression | t.ArrowFunctionExpression>;
 }
 
 export interface EventBindingInfo {

packages/parser/src/modules/parseComponent.ts

@@ -11,6 +11,7 @@ import type {
   EffectsMap,
 } from "./interfaces.js";
 import {
+  isGeneralFunctionExpression,
   validateEmbeddedExpression,
   validateFunction,
   validateGlobalApi,
@@ -118,7 +119,10 @@ export function parseComponent(
             });
             return null;
           }
-          bindingMap.set(value.node, { id: value.node, kind: "eventHandler" });
+          bindingMap.set(value.node, {
+            id: value.node,
+            kind: "eventHandlerParam",
+          });
         } else {
           let bindingId: t.Identifier | undefined;
           let initialValue: unknown;
@@ -312,6 +316,20 @@ export function parseComponent(
           continue;
         }
 
+        if (isGeneralFunctionExpression(init)) {
+          const callbackBody = init.get("body");
+          if (callbackBody.isBlockStatement()) {
+            // It's a event callback function
+            const funcBinding: BindingInfo = {
+              id: declId.node,
+              kind: "eventCallback",
+              callback: init,
+            };
+            bindingMap.set(declId.node, funcBinding);
+            continue;
+          }
+        }
+
         const binding: BindingInfo = { id: declId.node, kind: "constant" };
         bindingMap.set(declId.node, binding);
         if (init.node) {

packages/parser/src/modules/parseEvent.ts

@@ -234,7 +234,7 @@ export function parseEventHandler(
               ],
             },
           };
-        case "eventHandler": {
+        case "eventHandlerParam": {
           if (args.length > 1) {
             state.errors.push({
               message: `Event dispatcher "${callee.node.name}" expects at most 1 argument, but got ${args.length}`,

packages/parser/src/modules/parseJSXElement.ts

@@ -209,28 +209,36 @@ export function parseJSXElement(
         continue;
       }
       let handler: EventHandler[] | null = null;
+      let eventPath = exprPath;
       // Assert: exprPath.isReferencedIdentifier()
       if (exprPath.isIdentifier()) {
         const bindingId = exprPath.scope.getBindingIdentifier(
           exprPath.node.name
         );
         if (bindingId) {
           const binding = options.component?.bindingMap.get(bindingId);
-          if (binding && binding.kind === "eventHandler") {
-            handler = [
-              {
-                action: "dispatch_event",
-                payload: {
-                  type: convertJsxEventAttr(binding.id.name),
-                  detail: "<% EVENT.detail %>",
-                },
-              },
-            ];
+          if (binding) {
+            switch (binding.kind) {
+              case "eventHandlerParam":
+                handler = [
+                  {
+                    action: "dispatch_event",
+                    payload: {
+                      type: convertJsxEventAttr(binding.id.name),
+                      detail: "<% EVENT.detail %>",
+                    },
+                  },
+                ];
+                break;
+              case "eventCallback":
+                eventPath = binding.callback!;
+                break;
+            }
           }
         }
       }
       if (!handler) {
-        handler = parseEvent(exprPath, state, app, options);
+        handler = parseEvent(eventPath, state, app, options);
       }
       if (handler) {
         if (attrName === "onMount" || attrName === "onUnmount") {

packages/parser/src/modules/parseJsValue.ts

@@ -62,7 +62,19 @@ export function parseJsValue(
       return null;
     }
     const paramNames: string[] = [];
-    for (const param of path.get("params")) {
+
+    const params = path.get("params");
+    if (params.length > 1 && options.component?.id?.name.includes("-")) {
+      state.errors.push({
+        message:
+          "Multiple parameters in render callback are not supported in custom elements",
+        node: params[1].node,
+        severity: "error",
+      });
+      return null;
+    }
+
+    for (const param of params) {
       if (param.isIdentifier()) {
         paramNames.push(param.node.name);
       } else {