fix: async event handlers (#1614)

* fix: support async actions * 🌎 * 🐺 * 🍲
BuilderIO · Oct 29, 2024 · c7d2f8c · c7d2f8c
1 parent 7dfd585
commit c7d2f8c
Show file tree

Hide file tree

Showing 46 changed files with 870 additions and 592 deletions.
diff --git a/.changeset/fuzzy-penguins-grab.md b/.changeset/fuzzy-penguins-grab.md
@@ -0,0 +1,5 @@
+---
+'@builder.io/mitosis': patch
+---
+
+[All] fix: support async event handlers
diff --git a/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap b/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap
@@ -393,7 +393,7 @@ exports[`Alpine.js > jsx > Javascript Test > BasicRef 1`] = `
 
 exports[`Alpine.js > jsx > Javascript Test > BasicRefAssignment 1`] = `
 "<div x-data=\\"myBasicRefAssignmentComponent()\\">
-  <button x-on:click=\\"handlerClick(evt)\\">Click</button>
+  <button x-on:click=\\"await handlerClick(evt)\\">Click</button>
 </div>
 <script>
   document.addEventListener(\\"alpine:init\\", () => {
@@ -1312,7 +1312,7 @@ exports[`Alpine.js > jsx > Javascript Test > Stamped.io 1`] = `
     ></textarea>
     <button
       class=\\"button\\"
-      x-on:click=\\"$event.preventDefault();
+      x-on:click=\\"ev.preventDefault();
 showReviewPrompt = false\\"
     >
       Submit
@@ -3309,7 +3309,7 @@ exports[`Alpine.js > jsx > Typescript Test > BasicRef 1`] = `
 
 exports[`Alpine.js > jsx > Typescript Test > BasicRefAssignment 1`] = `
 "<div x-data=\\"myBasicRefAssignmentComponent()\\">
-  <button x-on:click=\\"handlerClick(evt)\\">Click</button>
+  <button x-on:click=\\"await handlerClick(evt)\\">Click</button>
 </div>
 <script>
   document.addEventListener(\\"alpine:init\\", () => {
@@ -4217,7 +4217,7 @@ exports[`Alpine.js > jsx > Typescript Test > Stamped.io 1`] = `
     ></textarea>
     <button
       class=\\"button\\"
-      x-on:click=\\"$event.preventDefault();
+      x-on:click=\\"ev.preventDefault();
 showReviewPrompt = false\\"
     >
       Submit

diff --git a/packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap b/packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap
@@ -690,7 +690,7 @@ import { Component } from \\"@angular/core\\";
 @Component({
   selector: \\"my-basic-ref-assignment-component\\",
   template: \`
-    <div><button (click)=\\"handlerClick($event)\\">Click</button></div>
+    <div><button (click)=\\"await handlerClick($event)\\">Click</button></div>
   \`,
   styles: [
     \`
@@ -7799,7 +7799,7 @@ export interface Props {
 @Component({
   selector: \\"my-basic-ref-assignment-component\\",
   template: \`
-    <div><button (click)=\\"handlerClick($event)\\">Click</button></div>
+    <div><button (click)=\\"await handlerClick($event)\\">Click</button></div>
   \`,
   styles: [
     \`

diff --git a/packages/core/src/__tests__/__snapshots__/angular.mapper.test.ts.snap b/packages/core/src/__tests__/__snapshots__/angular.mapper.test.ts.snap
@@ -703,7 +703,7 @@ import { Component } from \\"@angular/core\\";
 @Component({
   selector: \\"my-basic-ref-assignment-component\\",
   template: \`
-    <div><button (click)=\\"handlerClick($event)\\">Click</button></div>
+    <div><button (click)=\\"await handlerClick($event)\\">Click</button></div>
   \`,
   styles: [
     \`
@@ -7930,7 +7930,7 @@ export interface Props {
 @Component({
   selector: \\"my-basic-ref-assignment-component\\",
   template: \`
-    <div><button (click)=\\"handlerClick($event)\\">Click</button></div>
+    <div><button (click)=\\"await handlerClick($event)\\">Click</button></div>
   \`,
   styles: [
     \`

diff --git a/packages/core/src/__tests__/__snapshots__/angular.state.test.ts.snap b/packages/core/src/__tests__/__snapshots__/angular.state.test.ts.snap
@@ -723,7 +723,7 @@ import { Component } from \\"@angular/core\\";
 @Component({
   selector: \\"my-basic-ref-assignment-component\\",
   template: \`
-    <div><button (click)=\\"handlerClick($event)\\">Click</button></div>
+    <div><button (click)=\\"await handlerClick($event)\\">Click</button></div>
   \`,
   styles: [
     \`
@@ -2724,8 +2724,8 @@ export default class SmileReviews {
   snakeCaseValue() {
     return snakeCase(\\"testThis\\");
   }
-  node_0_button = (event) => {
-    event.preventDefault();
+  node_0_button = (ev) => {
+    ev.preventDefault();
     this.showReviewPrompt = false;
   };
   trackByReview0(index, review) {
@@ -8067,7 +8067,7 @@ export interface Props {
 @Component({
   selector: \\"my-basic-ref-assignment-component\\",
   template: \`
-    <div><button (click)=\\"handlerClick($event)\\">Click</button></div>
+    <div><button (click)=\\"await handlerClick($event)\\">Click</button></div>
   \`,
   styles: [
     \`
@@ -10269,8 +10269,8 @@ export default class SmileReviews {
   snakeCaseValue() {
     return snakeCase(\\"testThis\\");
   }
-  node_0_button = (event) => {
-    event.preventDefault();
+  node_0_button = (ev) => {
+    ev.preventDefault();
     this.showReviewPrompt = false;
   };
   trackByReview0(index, review) {

diff --git a/packages/core/src/__tests__/__snapshots__/angular.styles.test.ts.snap b/packages/core/src/__tests__/__snapshots__/angular.styles.test.ts.snap
@@ -611,7 +611,7 @@ import { Component } from \\"@angular/core\\";
 @Component({
   selector: \\"my-basic-ref-assignment-component\\",
   template: \`
-    <div><button (click)=\\"handlerClick($event)\\">Click</button></div>
+    <div><button (click)=\\"await handlerClick($event)\\">Click</button></div>
   \`,
 })
 export default class MyBasicRefAssignmentComponent {
@@ -6966,7 +6966,7 @@ export interface Props {
 @Component({
   selector: \\"my-basic-ref-assignment-component\\",
   template: \`
-    <div><button (click)=\\"handlerClick($event)\\">Click</button></div>
+    <div><button (click)=\\"await handlerClick($event)\\">Click</button></div>
   \`,
 })
 export default class MyBasicRefAssignmentComponent {

diff --git a/packages/core/src/__tests__/__snapshots__/angular.test.ts.snap b/packages/core/src/__tests__/__snapshots__/angular.test.ts.snap
@@ -1276,7 +1276,7 @@ import { Component } from \\"@angular/core\\";
 @Component({
   selector: \\"my-basic-ref-assignment-component\\",
   template: \`
-    <div><button (click)=\\"handlerClick($event)\\">Click</button></div>
+    <div><button (click)=\\"await handlerClick($event)\\">Click</button></div>
   \`,
   styles: [
     \`
@@ -1312,7 +1312,7 @@ import { CommonModule } from \\"@angular/common\\";
 @Component({
   selector: \\"my-basic-ref-assignment-component\\",
   template: \`
-    <div><button (click)=\\"handlerClick($event)\\">Click</button></div>
+    <div><button (click)=\\"await handlerClick($event)\\">Click</button></div>
   \`,
   styles: [
     \`
@@ -14632,7 +14632,7 @@ export interface Props {
 @Component({
   selector: \\"my-basic-ref-assignment-component\\",
   template: \`
-    <div><button (click)=\\"handlerClick($event)\\">Click</button></div>
+    <div><button (click)=\\"await handlerClick($event)\\">Click</button></div>
   \`,
   styles: [
     \`
@@ -14672,7 +14672,7 @@ export interface Props {
 @Component({
   selector: \\"my-basic-ref-assignment-component\\",
   template: \`
-    <div><button (click)=\\"handlerClick($event)\\">Click</button></div>
+    <div><button (click)=\\"await handlerClick($event)\\">Click</button></div>
   \`,
   styles: [
     \`

diff --git a/packages/core/src/__tests__/__snapshots__/builder.test.ts.snap b/packages/core/src/__tests__/__snapshots__/builder.test.ts.snap
@@ -3011,10 +3011,8 @@ exports[`Builder > Stamped 1`] = `
               {
                 "@type": "@builder.io/sdk:Element",
                 "actions": {
-                  "click": "
-  event.preventDefault();
-  state.showReviewPrompt = false;
-",
+                  "click": "event.preventDefault();
+state.showReviewPrompt = false",
                 },
                 "bindings": {},
                 "children": [
@@ -3034,10 +3032,8 @@ exports[`Builder > Stamped 1`] = `
                 ],
                 "code": {
                   "actions": {
-                    "click": "
-  event.preventDefault();
-  state.showReviewPrompt = false;
-",
+                    "click": "event.preventDefault();
+state.showReviewPrompt = false",
                   },
                   "bindings": {},
                 },
@@ -3469,6 +3465,95 @@ exports[`Builder > Text with bindings 3`] = `
 }
 `;
 
+exports[`Builder > async bindings 1`] = `
+{
+  "data": {
+    "blocks": [
+      {
+        "@type": "@builder.io/sdk:Element",
+        "actions": {},
+        "bindings": {},
+        "children": [
+          {
+            "@type": "@builder.io/sdk:Element",
+            "actions": {
+              "click": "(async () => await state.handlerClick(event))()",
+            },
+            "bindings": {},
+            "children": [
+              {
+                "@type": "@builder.io/sdk:Element",
+                "bindings": {},
+                "component": {
+                  "name": "Text",
+                  "options": {
+                    "text": "Click",
+                  },
+                },
+                "tagName": "span",
+              },
+            ],
+            "code": {
+              "actions": {
+                "click": "(async () => await state.handlerClick(event))()",
+              },
+              "bindings": {},
+            },
+            "properties": {},
+            "tagName": "button",
+          },
+        ],
+        "code": {
+          "actions": {},
+          "bindings": {},
+        },
+        "properties": {},
+        "tagName": "div",
+      },
+    ],
+    "jsCode": "Object.assign(state, {
+  handlerClick: function handlerClick(event) {
+    event.preventDefault();
+    console.log(\\"current value\\", holdValueRef);
+    holdValueRef = holdValueRef + \\"JS\\";
+  },
+});
+",
+    "tsCode": "useStore({
+  handlerClick: function handlerClick(event) {
+    event.preventDefault();
+    console.log(\\"current value\\", holdValueRef);
+    holdValueRef = holdValueRef + \\"JS\\";
+  },
+});
+",
+  },
+}
+`;
+
+exports[`Builder > async bindings 2`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+
+export default function MyComponent(props) {
+  const state = useStore({
+    handlerClick: function handlerClick(event) {
+      event.preventDefault();
+      console.log(\\"current value\\", holdValueRef);
+      holdValueRef = holdValueRef + \\"JS\\";
+    },
+  });
+
+  return (
+    <div>
+      <button onClick={async (event) => await state.handlerClick(event)}>
+        Click
+      </button>
+    </div>
+  );
+}
+"
+`;
+
 exports[`Builder > bindings 1`] = `
 {
   "@type": "@builder.io/mitosis/component",

diff --git a/packages/core/src/__tests__/__snapshots__/html.test.ts.snap b/packages/core/src/__tests__/__snapshots__/html.test.ts.snap
@@ -1382,8 +1382,8 @@ exports[`Html > jsx > Javascript Test > BasicRefAssignment 1`] = `
     }
 
     // Event handler for 'click' event on button-1
-    function onButton1Click(evt) {
-      state.handlerClick(evt);
+    async function onButton1Click(evt) {
+      await state.handlerClick(evt);
     }
 
     // Update with initial state on first load
@@ -3155,8 +3155,8 @@ exports[`Html > jsx > Javascript Test > Stamped.io 1`] = `
     }
 
     // Event handler for 'click' event on button-2
-    function onButton2Click(event) {
-      event.preventDefault();
+    function onButton2Click(ev) {
+      ev.preventDefault();
       state.showReviewPrompt = false;
       update();
     }
@@ -8631,8 +8631,8 @@ exports[`Html > jsx > Typescript Test > BasicRefAssignment 1`] = `
     }
 
     // Event handler for 'click' event on button-1
-    function onButton1Click(evt) {
-      state.handlerClick(evt);
+    async function onButton1Click(evt) {
+      await state.handlerClick(evt);
     }
 
     // Update with initial state on first load
@@ -10404,8 +10404,8 @@ exports[`Html > jsx > Typescript Test > Stamped.io 1`] = `
     }
 
     // Event handler for 'click' event on button-2
-    function onButton2Click(event) {
-      event.preventDefault();
+    function onButton2Click(ev) {
+      ev.preventDefault();
       state.showReviewPrompt = false;
       update();
     }