diff --git a/packages/cli/CHANGELOG.md b/packages/cli/CHANGELOG.md
index b2ce96357b..550a06da5c 100644
--- a/packages/cli/CHANGELOG.md
+++ b/packages/cli/CHANGELOG.md
@@ -1,5 +1,26 @@
 # @builder.io/mitosis-cli
 
+## 0.5.15
+
+### Patch Changes
+
+- Updated dependencies [a0ad5ab]
+  - @builder.io/mitosis@0.5.15
+
+## 0.5.14
+
+### Patch Changes
+
+- Updated dependencies [39af4d6]
+  - @builder.io/mitosis@0.5.14
+
+## 0.5.13
+
+### Patch Changes
+
+- Updated dependencies [c7d2f8c]
+  - @builder.io/mitosis@0.5.13
+
 ## 0.5.12
 
 ### Patch Changes
diff --git a/packages/cli/package.json b/packages/cli/package.json
index c5e340b6f5..3ecd415e34 100644
--- a/packages/cli/package.json
+++ b/packages/cli/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@builder.io/mitosis-cli",
-  "version": "0.5.12",
+  "version": "0.5.15",
   "description": "mitosis CLI",
   "types": "build/types/types.d.ts",
   "bin": {
diff --git a/packages/core/CHANGELOG.md b/packages/core/CHANGELOG.md
index aaa667b607..1007dbd192 100644
--- a/packages/core/CHANGELOG.md
+++ b/packages/core/CHANGELOG.md
@@ -1,5 +1,23 @@
 # Change Log
 
+## 0.5.15
+
+### Patch Changes
+
+- a0ad5ab: [Builder]: Fix: use scope.rename to rename identifiers in For loop
+
+## 0.5.14
+
+### Patch Changes
+
+- 39af4d6: [Builder] Fix: do not rename vars within For that are shadowing the loop's index
+
+## 0.5.13
+
+### Patch Changes
+
+- c7d2f8c: [All] fix: support async event handlers
+
 ## 0.5.12
 
 ### Patch Changes
diff --git a/packages/core/package.json b/packages/core/package.json
index 565236a320..d8c6a23af2 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -22,7 +22,7 @@
     "name": "Builder.io",
     "url": "https://www.builder.io"
   },
-  "version": "0.5.12",
+  "version": "0.5.15",
   "homepage": "https://github.com/BuilderIO/mitosis",
   "main": "./dist/src/index.js",
   "exports": {
diff --git a/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap b/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap
index 2f6f8d96c9..7b06517000 100644
--- 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
index 624b7b1eb2..c87c7c5cb1 100644
--- 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
index cedeccfb8b..ba9c2e7eca 100644
--- 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
index 212d33d7f7..b41529d6ad 100644
--- 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
index 188ef731ef..c966f93ba3 100644
--- 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
index 2642166359..97c050e088 100644
--- 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
index 3b65fffc1e..943719036b 100644
--- a/packages/core/src/__tests__/__snapshots__/builder.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/builder.test.ts.snap
@@ -1336,6 +1336,65 @@ export default function MyComponent(props) {
 "
 `;
 
+exports[`Builder > Index inside For 1`] = `
+"import { useStore, For } from \\"@builder.io/mitosis\\";
+
+export default function MyComponent(props) {
+  const state = useStore({
+    todos: [
+      {
+        id: 1,
+        completed: false,
+      },
+      {
+        id: 2,
+        completed: false,
+      },
+    ],
+  });
+
+  return (
+    <div>
+      <For each={state.todos}>
+        {(todo, index) => (
+          <div>
+            <For each={state.todos}>
+              {(todo, index) => (
+                <input
+                  type=\\"checkbox\\"
+                  checked={todo.completed}
+                  key={todo.id + \\"-\\" + index}
+                  value={index}
+                  foo={{
+                    bar: 1 + state.$index,
+                  }}
+                  onX={(event) => {
+                    console.log(\\"onX\\");
+                  }}
+                  onClick={(event) => {
+                    console.log(\\"clicked\\", event);
+                    state.todos[state.$index].completed =
+                      !state.todos[0].completed;
+                  }}
+                  onChange={(event) => {
+                    console.log(\\"this is todo item: \\", index);
+                    const index = state.todos.findIndex(
+                      (t) => t.id === todo.id
+                    );
+                    state.todos[index].completed = event.target.checked;
+                  }}
+                />
+              )}
+            </For>
+          </div>
+        )}
+      </For>
+    </div>
+  );
+}
+"
+`;
+
 exports[`Builder > No srcset for SVG 1`] = `
 "<img
   loading=\\"lazy\\"
@@ -1394,6 +1453,7 @@ exports[`Builder > Regenerate custom Hero 1`] = `
       "@type": "@builder.io/mitosis/node",
       "bindings": {
         "css": {
+          "bindingType": "expression",
           "code": "{
   display: \\"flex\\",
   flexDirection: \\"column\\",
@@ -1406,10 +1466,12 @@ exports[`Builder > Regenerate custom Hero 1`] = `
           "type": "single",
         },
         "height": {
+          "bindingType": "expression",
           "code": "400",
           "type": "single",
         },
         "multiBinding": {
+          "bindingType": "expression",
           "code": "{
   hello: state.message
 }",
@@ -1515,14 +1577,17 @@ exports[`Builder > Regenerate custom Hero 3`] = `
       "@type": "@builder.io/mitosis/node",
       "bindings": {
         "css": {
+          "bindingType": "expression",
           "code": "{\\"display\\":\\"flex\\",\\"flexDirection\\":\\"column\\",\\"alignItems\\":\\"stretch\\",\\"position\\":\\"relative\\",\\"flexShrink\\":\\"0\\",\\"boxSizing\\":\\"border-box\\",\\"marginTop\\":\\"200px\\"}",
           "type": "single",
         },
         "height": {
+          "bindingType": "expression",
           "code": "400",
           "type": "single",
         },
         "multiBinding": {
+          "bindingType": "expression",
           "code": "{
   hello: state.message
 }",
@@ -3011,10 +3076,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 +3097,8 @@ exports[`Builder > Stamped 1`] = `
                 ],
                 "code": {
                   "actions": {
-                    "click": "
-  event.preventDefault();
-  state.showReviewPrompt = false;
-",
+                    "click": "event.preventDefault();
+state.showReviewPrompt = false",
                   },
                   "bindings": {},
                 },
@@ -3469,6 +3530,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",
@@ -3477,6 +3627,7 @@ exports[`Builder > bindings 1`] = `
       "@type": "@builder.io/mitosis/node",
       "bindings": {
         "label": {
+          "bindingType": "expression",
           "code": "state.text",
           "type": "single",
         },
@@ -3495,6 +3646,7 @@ exports[`Builder > bindings 1`] = `
       "@type": "@builder.io/mitosis/node",
       "bindings": {
         "css": {
+          "bindingType": "expression",
           "code": "{backgroundColor:'rgba(0, 0, 0, 1)',display:'flex',paddingLeft:'72px',paddingRight:'72px',paddingTop:'25px',paddingBottom:'25px',alignItems:'start',gap:'10px',fontFamily:'Poppins, -apple-system, Roboto, Helvetica, sans-serif',fontSize:'16px',color:'rgba(255, 255, 255, 1)',fontWeight:'700',textTransform:'uppercase',justifyContent:'start'}",
           "type": "single",
         },
@@ -3504,6 +3656,7 @@ exports[`Builder > bindings 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "_text": {
+              "bindingType": "expression",
               "code": "state.text",
               "type": "single",
             },
@@ -3598,6 +3751,7 @@ exports[`Builder > booleans 1`] = `
       "@type": "@builder.io/mitosis/node",
       "bindings": {
         "focused": {
+          "bindingType": "expression",
           "code": "true",
           "type": "single",
         },
@@ -3666,6 +3820,7 @@ exports[`Builder > customComponentSlotProperty 1`] = `
       "@type": "@builder.io/mitosis/node",
       "bindings": {
         "css": {
+          "bindingType": "expression",
           "code": "{\\"position\\":\\"relative\\",\\"width\\":\\"100%\\",\\"@media (max-width: 991px)\\":{\\"maxWidth\\":\\"100%\\"}}",
           "type": "single",
         },
@@ -3683,6 +3838,7 @@ exports[`Builder > customComponentSlotProperty 1`] = `
             "@type": "@builder.io/mitosis/node",
             "bindings": {
               "css": {
+                "bindingType": "expression",
                 "code": "{\\"alignItems\\":\\"flex-start\\",\\"alignSelf\\":\\"stretch\\",\\"display\\":\\"flex\\",\\"flexBasis\\":\\"0%\\",\\"flexDirection\\":\\"column\\",\\"justifyContent\\":\\"center\\"}",
                 "type": "single",
               },
@@ -3700,6 +3856,7 @@ exports[`Builder > customComponentSlotProperty 1`] = `
             "@type": "@builder.io/mitosis/node",
             "bindings": {
               "css": {
+                "bindingType": "expression",
                 "code": "{\\"alignItems\\":\\"flex-start\\",\\"alignSelf\\":\\"stretch\\",\\"display\\":\\"flex\\",\\"flexBasis\\":\\"0%\\",\\"flexDirection\\":\\"column\\",\\"justifyContent\\":\\"center\\"}",
                 "type": "single",
               },
@@ -3715,6 +3872,7 @@ exports[`Builder > customComponentSlotProperty 1`] = `
             "@type": "@builder.io/mitosis/node",
             "bindings": {
               "css": {
+                "bindingType": "expression",
                 "code": "{\\"alignItems\\":\\"flex-start\\",\\"alignSelf\\":\\"stretch\\",\\"display\\":\\"flex\\",\\"flexBasis\\":\\"0%\\",\\"flexDirection\\":\\"column\\",\\"justifyContent\\":\\"center\\"}",
                 "type": "single",
               },
@@ -3732,6 +3890,7 @@ exports[`Builder > customComponentSlotProperty 1`] = `
             "@type": "@builder.io/mitosis/node",
             "bindings": {
               "css": {
+                "bindingType": "expression",
                 "code": "{\\"alignItems\\":\\"flex-start\\",\\"alignSelf\\":\\"stretch\\",\\"display\\":\\"flex\\",\\"flexBasis\\":\\"0%\\",\\"flexDirection\\":\\"column\\",\\"justifyContent\\":\\"center\\"}",
                 "type": "single",
               },
@@ -3904,6 +4063,7 @@ exports[`Builder > nodes as props 3`] = `
       "@type": "@builder.io/mitosis/node",
       "bindings": {
         "prop": {
+          "bindingType": "expression",
           "code": "<Bar hello=\\"world\\" />",
           "type": "single",
         },
@@ -4055,6 +4215,7 @@ exports[`Builder > slots 1`] = `
       "@type": "@builder.io/mitosis/node",
       "bindings": {
         "css": {
+          "bindingType": "expression",
           "code": "{\\"width\\":\\"100%\\",\\"@media (max-width: 991px)\\":{\\"maxWidth\\":\\"100%\\"}}",
           "type": "single",
         },
@@ -4144,10 +4305,12 @@ exports[`Builder > slots2 1`] = `
       "@type": "@builder.io/mitosis/node",
       "bindings": {
         "css": {
+          "bindingType": "expression",
           "code": "{\\"fontStyle\\":\\"italic\\"}",
           "type": "single",
         },
         "disabled": {
+          "bindingType": "expression",
           "code": "false",
           "type": "single",
         },
diff --git a/packages/core/src/__tests__/__snapshots__/context.test.ts.snap b/packages/core/src/__tests__/__snapshots__/context.test.ts.snap
index 49e0cda311..6bd6404a0b 100644
--- a/packages/core/src/__tests__/__snapshots__/context.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/context.test.ts.snap
@@ -76,6 +76,7 @@ exports[`Context > Use and set context in complex components 1`] = `
               "type": "spread",
             },
             "style": {
+              "bindingType": "expression",
               "code": "state.css",
               "type": "single",
             },
@@ -85,6 +86,7 @@ exports[`Context > Use and set context in complex components 1`] = `
               "@type": "@builder.io/mitosis/node",
               "bindings": {
                 "block": {
+                  "bindingType": "expression",
                   "code": "state.useBlock",
                   "type": "single",
                 },
@@ -99,6 +101,7 @@ exports[`Context > Use and set context in complex components 1`] = `
               "@type": "@builder.io/mitosis/node",
               "bindings": {
                 "when": {
+                  "bindingType": "expression",
                   "code": "state.componentRef",
                   "type": "single",
                 },
@@ -108,6 +111,7 @@ exports[`Context > Use and set context in complex components 1`] = `
                   "@type": "@builder.io/mitosis/node",
                   "bindings": {
                     "children": {
+                      "bindingType": "expression",
                       "code": "state.useBlock.children",
                       "type": "single",
                     },
@@ -133,6 +137,7 @@ exports[`Context > Use and set context in complex components 1`] = `
               "@type": "@builder.io/mitosis/node",
               "bindings": {
                 "when": {
+                  "bindingType": "expression",
                   "code": "!state.componentRef && state.useBlock.children && state.useBlock.children.length",
                   "type": "single",
                 },
@@ -142,6 +147,7 @@ exports[`Context > Use and set context in complex components 1`] = `
                   "@type": "@builder.io/mitosis/node",
                   "bindings": {
                     "each": {
+                      "bindingType": "expression",
                       "code": "state.useBlock.children",
                       "type": "single",
                     },
@@ -151,10 +157,12 @@ exports[`Context > Use and set context in complex components 1`] = `
                       "@type": "@builder.io/mitosis/node",
                       "bindings": {
                         "block": {
+                          "bindingType": "expression",
                           "code": "child",
                           "type": "single",
                         },
                         "index": {
+                          "bindingType": "expression",
                           "code": "index",
                           "type": "single",
                         },
@@ -478,6 +486,7 @@ exports[`Context > Use and set context in components 1`] = `
               "@type": "@builder.io/mitosis/node",
               "bindings": {
                 "_text": {
+                  "bindingType": "expression",
                   "code": "foo.value",
                   "type": "single",
                 },
diff --git a/packages/core/src/__tests__/__snapshots__/html.test.ts.snap b/packages/core/src/__tests__/__snapshots__/html.test.ts.snap
index 2ed1fd48ab..00f2e266fd 100644
--- 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();
     }
diff --git a/packages/core/src/__tests__/__snapshots__/lit.test.ts.snap b/packages/core/src/__tests__/__snapshots__/lit.test.ts.snap
index 3c3c53694d..38780a5c1f 100644
--- a/packages/core/src/__tests__/__snapshots__/lit.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/lit.test.ts.snap
@@ -538,8 +538,8 @@ export default class MyBasicRefAssignmentComponent extends LitElement {
   render() {
     return html\`
 
-          <div ><button  @click=\${(evt) =>
-            this.handlerClick(evt)} >Click</button></div>
+          <div ><button  @click=\${async (evt) =>
+            await this.handlerClick(evt)} >Click</button></div>
         \`;
   }
 }
@@ -1824,8 +1824,8 @@ export default class SmileReviews extends LitElement {
             ? html\`<input  placeholder=\\"Email\\"  />
        <input  placeholder=\\"Title\\"  />
        <textarea  placeholder=\\"How was your experience?\\" ></textarea>
-       <button  @click=\${(event) => {
-         event.preventDefault();
+       <button  @click=\${(ev) => {
+         ev.preventDefault();
          this.showReviewPrompt = false;
        }} >
                  Submit
@@ -4912,8 +4912,8 @@ export default class MyBasicRefAssignmentComponent extends LitElement {
   render() {
     return html\`
 
-          <div ><button  @click=\${(evt) =>
-            this.handlerClick(evt)} >Click</button></div>
+          <div ><button  @click=\${async (evt) =>
+            await this.handlerClick(evt)} >Click</button></div>
         \`;
   }
 }
@@ -6377,8 +6377,8 @@ export default class SmileReviews extends LitElement {
             ? html\`<input  placeholder=\\"Email\\"  />
        <input  placeholder=\\"Title\\"  />
        <textarea  placeholder=\\"How was your experience?\\" ></textarea>
-       <button  @click=\${(event) => {
-         event.preventDefault();
+       <button  @click=\${(ev) => {
+         ev.preventDefault();
          this.showReviewPrompt = false;
        }} >
                  Submit
@@ -9173,21 +9173,21 @@ export default class MyComponent extends LitElement {
 
           <div>
           <input type=\\"radio\\" value=\\"Plain\\" .checked=\${this.tortilla === 'Plain'}
-          @input=\${event => this.tortilla = event.target.value} /> <input type=\\"radio\\"
-          value=\\"Whole wheat\\" .checked=\${this.tortilla === 'Whole wheat'} @input=\${event
-          => this.tortilla = event.target.value} /> <input type=\\"radio\\" value=\\"Spinach\\"
-          .checked=\${this.tortilla === 'Spinach'} @input=\${event => this.tortilla =
-          event.target.value} />
+          @input=\${(event) => this.tortilla = event.target.value} /> <input type=\\"radio\\"
+          value=\\"Whole wheat\\" .checked=\${this.tortilla === 'Whole wheat'}
+          @input=\${(event) => this.tortilla = event.target.value} /> <input type=\\"radio\\"
+          value=\\"Spinach\\" .checked=\${this.tortilla === 'Spinach'} @input=\${(event) =>
+          this.tortilla = event.target.value} />
           <br />
           <br />
           <input type=\\"checkbox\\" value=\\"Rice\\" .checked=\${this.fillings === 'Rice'}
-          @input=\${event => this.fillings = event.target.value} /> <input
+          @input=\${(event) => this.fillings = event.target.value} /> <input
           type=\\"checkbox\\" value=\\"Beans\\" .checked=\${this.fillings === 'Beans'}
-          @input=\${event => this.fillings = event.target.value} /> <input
+          @input=\${(event) => this.fillings = event.target.value} /> <input
           type=\\"checkbox\\" value=\\"Cheese\\" .checked=\${this.fillings === 'Cheese'}
-          @input=\${event => this.fillings = event.target.value} /> <input
+          @input=\${(event) => this.fillings = event.target.value} /> <input
           type=\\"checkbox\\" value=\\"Guac (extra)\\" .checked=\${this.fillings === 'Guac
-          (extra)'} @input=\${event => this.fillings = event.target.value} />
+          (extra)'} @input=\${(event) => this.fillings = event.target.value} />
           <p>Tortilla: \${this.tortilla}</p>
           <p>Fillings: \${this.fillings}</p>
         </div>
@@ -9668,21 +9668,21 @@ export default class MyComponent extends LitElement {
 
           <div>
           <input type=\\"radio\\" value=\\"Plain\\" .checked=\${this.tortilla === 'Plain'}
-          @input=\${event => this.tortilla = event.target.value} /> <input type=\\"radio\\"
-          value=\\"Whole wheat\\" .checked=\${this.tortilla === 'Whole wheat'} @input=\${event
-          => this.tortilla = event.target.value} /> <input type=\\"radio\\" value=\\"Spinach\\"
-          .checked=\${this.tortilla === 'Spinach'} @input=\${event => this.tortilla =
-          event.target.value} />
+          @input=\${(event) => this.tortilla = event.target.value} /> <input type=\\"radio\\"
+          value=\\"Whole wheat\\" .checked=\${this.tortilla === 'Whole wheat'}
+          @input=\${(event) => this.tortilla = event.target.value} /> <input type=\\"radio\\"
+          value=\\"Spinach\\" .checked=\${this.tortilla === 'Spinach'} @input=\${(event) =>
+          this.tortilla = event.target.value} />
           <br />
           <br />
           <input type=\\"checkbox\\" value=\\"Rice\\" .checked=\${this.fillings === 'Rice'}
-          @input=\${event => this.fillings = event.target.value} /> <input
+          @input=\${(event) => this.fillings = event.target.value} /> <input
           type=\\"checkbox\\" value=\\"Beans\\" .checked=\${this.fillings === 'Beans'}
-          @input=\${event => this.fillings = event.target.value} /> <input
+          @input=\${(event) => this.fillings = event.target.value} /> <input
           type=\\"checkbox\\" value=\\"Cheese\\" .checked=\${this.fillings === 'Cheese'}
-          @input=\${event => this.fillings = event.target.value} /> <input
+          @input=\${(event) => this.fillings = event.target.value} /> <input
           type=\\"checkbox\\" value=\\"Guac (extra)\\" .checked=\${this.fillings === 'Guac
-          (extra)'} @input=\${event => this.fillings = event.target.value} />
+          (extra)'} @input=\${(event) => this.fillings = event.target.value} />
           <p>Tortilla: \${this.tortilla}</p>
           <p>Fillings: \${this.fillings}</p>
         </div>
diff --git a/packages/core/src/__tests__/__snapshots__/marko.test.ts.snap b/packages/core/src/__tests__/__snapshots__/marko.test.ts.snap
index c9b67b4b5f..0698a5b0a7 100644
--- a/packages/core/src/__tests__/__snapshots__/marko.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/marko.test.ts.snap
@@ -130,19 +130,19 @@ exports[`Marko > jsx > Javascript Test > AdvancedRef 1`] = `
   }
 }
 
-style { 
-  .input-8aea05e4 {
+style {
+  .input-218fa7c6 {
     color: red;
   }
 }
 <div>
   <if(input.showInput)>
     <input
-      class=\\"input-8aea05e4\\"
+      class=\\"input-218fa7c6\\"
       key=\\"inputRef\\"
       value=(state.name)
-      on-blur(event => component.onBlur())
-      on-input(event => state.name = event.target.value)
+      on-blur((event) => component.onBlur())
+      on-input((event) => state.name = event.target.value)
     />
     <label for=\\"cars\\" key=\\"inputNoArgRef\\"> Choose a car: </label>
     <select name=\\"cars\\" id=\\"cars\\">
@@ -170,15 +170,15 @@ class {
   }
 }
 
-style { 
-  .div-360ae4be {
+style {
+  .div-36710884 {
     padding: 10px;
   }
 }
-<div class=\\"test div-360ae4be\\">
+<div class=\\"test div-36710884\\">
   <input
     value=(DEFAULT_VALUES.name || state.name)
-    on-input(myEvent => state.name = myEvent.target.value)
+    on-input((myEvent) => state.name = myEvent.target.value)
   />
 
   Hello! I can run in React, Vue, Solid, or Liquid! &gt;
@@ -197,7 +197,7 @@ exports[`Marko > jsx > Javascript Test > Basic 2`] = `
     <if(person === state.name)>
       <input
         value=(state.name)
-        on-input(event => {
+        on-input((event) => {
   state.name = event.target.value + ' and ' + person;
 })
       />
@@ -232,7 +232,7 @@ class {
   \${myService.method('hello') + state.name} Hello! I can run in React, Vue,
   Solid, or Liquid!
 
-  <input on-input(event => component.onChange) />
+  <input on-input((event) => component.onChange) />
 </div>"
 `;
 
@@ -336,7 +336,7 @@ exports[`Marko > jsx > Javascript Test > BasicFor 1`] = `
   <for|person| of=(state.names)>
     <input
       value=(state.name)
-      on-input(event => {
+      on-input((event) => {
   state.name = event.target.value + ' and ' + person;
 })
     />
@@ -369,19 +369,19 @@ exports[`Marko > jsx > Javascript Test > BasicRef 1`] = `
   }
 }
 
-style { 
-  .input-38729636 {
+style {
+  .input-68b0692e {
     color: red;
   }
 }
 <div>
   <if(input.showInput)>
     <input
-      class=\\"input-38729636\\"
+      class=\\"input-68b0692e\\"
       key=\\"inputRef\\"
       value=(state.name)
-      on-blur(event => component.onBlur())
-      on-input(event => state.name = event.target.value)
+      on-blur((event) => component.onBlur())
+      on-input((event) => state.name = event.target.value)
     />
     <label for=\\"cars\\" key=\\"inputNoArgRef\\"> Choose a car: </label>
     <select name=\\"cars\\" id=\\"cars\\">
@@ -404,7 +404,9 @@ exports[`Marko > jsx > Javascript Test > BasicRefAssignment 1`] = `
 }
 
 <div>
-  <button on-click(evt => component.handlerClick(evt))>Click</button>
+  <button on-click(async (evt) => await component.handlerClick(evt))>
+    Click
+  </button>
 </div>"
 `;
 
@@ -434,7 +436,7 @@ class {
 
 <div>
   <h1>Now: \${state.count} , before: \${this.prevCount}</h1>
-  <button on-click(event => state.count += 1)>Increment</button>
+  <button on-click((event) => state.count += 1)>Increment</button>
 </div>"
 `;
 
@@ -474,30 +476,30 @@ exports[`Marko > jsx > Javascript Test > Columns 1`] = `
   }
 }
 
-style { 
-  .div-8ebf4416 {
+style {
+  .div-2411fb2a {
     display: flex;
     flex-direction: column;
     align-items: stretch;
     line-height: normal;
   }
   @media (max-width: 999px) {
-    .div-8ebf4416 {
+    .div-2411fb2a {
       flex-direction: row;
     }
   }
   @media (max-width: 639px) {
-    .div-8ebf4416 {
+    .div-2411fb2a {
       flex-direction: row-reverse;
     }
   }
-  .div-8ebf4416-2 {
+  .div-2411fb2a-2 {
     flex-grow: 1;
   }
 }
-<div class=\\"builder-columns div-8ebf4416\\">
+<div class=\\"builder-columns div-2411fb2a\\">
   <for|column,index| of=(input.columns)>
-    <div class=\\"builder-column div-8ebf4416-2\\">\${column.content} \${index}</div>
+    <div class=\\"builder-column div-2411fb2a-2\\">\${column.content} \${index}</div>
   </for>
 </div>"
 `;
@@ -532,7 +534,7 @@ exports[`Marko > jsx > Javascript Test > ContentSlotJSX 1`] = `
   <div
     name=(input.slotContent ? 'name1' : 'name2')
     title=(input.slotContent ? 'title1' : 'title2')  ...(props.attributes)
-    on-click(event => component.show())
+    on-click((event) => component.show())
     class=(component.cls)
   >
     <if(state.showContent && input.slotContent)>
@@ -916,8 +918,8 @@ class {
   }
 }
 
-style { 
-  .pre-13d8e5f6 {
+style {
+  .pre-b80a56e2 {
     padding: 10px;
     color: red;
     text-align: center;
@@ -929,7 +931,7 @@ style {
   action=(!input.sendWithJs && input.action)
   method=(input.method)
   name=(input.name)
-  on-submit(event => component.onSubmit(event))  ...(props.attributes)
+  on-submit((event) => component.onSubmit(event))  ...(props.attributes)
 >
   <if(input.builderBlock && input.builderBlock.children)>
     <for|block,index| of=(input.builderBlock?.children)>
@@ -952,7 +954,7 @@ style {
     ></BuilderBlocks></if>
 
   <if(component.submissionState === 'error' && state.responseData)>
-    <pre class=\\"builder-form-error-text pre-13d8e5f6\\">
+    <pre class=\\"builder-form-error-text pre-b80a56e2\\">
 \${JSON.stringify(state.responseData, null, 2)}</pre>
   </if>
 
@@ -1018,8 +1020,8 @@ exports[`Marko > jsx > Javascript Test > Image 1`] = `
   }
 }
 
-style { 
-  .img-e6dfb5ae {
+style {
+  .img-3747ab04 {
     opacity: 1;
     transition: opacity 0.2s ease-in-out;
     object-fit: cover;
@@ -1032,9 +1034,9 @@ style {
       <img
         alt=(input.altText)
         aria-role=(input.altText ? 'presentation' : undefined)
-        class=('builder-image' + (input._class ? ' ' + input._class : '') + ' img-e6dfb5ae')
+        class=('builder-image' + (input._class ? ' ' + input._class : '') + ' img-3747ab04')
         src=(input.image)
-        on-load(event => component.setLoaded())
+        on-load((event) => component.setLoaded())
         srcset=(input.srcset)
         sizes=(input.sizes)
     /></if>
@@ -1089,7 +1091,7 @@ class {}
   value=(input.value)
   defaultValue=(input.defaultValue)
   required=(input.required)
-  on-input(event => input.onChange?.(event.target.value))
+  on-input((event) => input.onChange?.(event.target.value))
 />"
 `;
 
@@ -1105,7 +1107,7 @@ class {
 <FormInputComponent
   name=\\"kingzez\\"
   type=\\"text\\"
-  on-change(value => component.handleChange(value))
+  on-change((value) => component.handleChange(value))
 ></FormInputComponent>"
 `;
 
@@ -1234,17 +1236,17 @@ class {
   }
 }
 
-style { 
-  .input-c36324fe {
+style {
+  .input-4b8e7e0e {
     display: block;
   }
-  .textarea-c36324fe {
+  .textarea-4b8e7e0e {
     display: block;
   }
-  .button-c36324fe {
+  .button-4b8e7e0e {
     display: block;
   }
-  .review-c36324fe {
+  .review-4b8e7e0e {
     margin: 10px;
     padding: 10px;
     background: white;
@@ -1253,27 +1255,27 @@ style {
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
     -webkit-font-smoothing: antialiased;
   }
-  .img-c36324fe {
+  .img-4b8e7e0e {
     height: 30px;
     width: 30px;
     margin-right: 10px;
   }
 }
 <div data-user=(state.name)>
-  <button on-click(event => state.showReviewPrompt = true)>
+  <button on-click((event) => state.showReviewPrompt = true)>
     Write a review
   </button>
   <if(state.showReviewPrompt || 'asdf')>
     <input placeholder=\\"Email\\" />
-    <input placeholder=\\"Title\\" class=\\"input-c36324fe\\" />
+    <input placeholder=\\"Title\\" class=\\"input-4b8e7e0e\\" />
     <textarea
       placeholder=\\"How was your experience?\\"
-      class=\\"textarea-c36324fe\\"
+      class=\\"textarea-4b8e7e0e\\"
     ></textarea>
     <button
-      class=\\"button-c36324fe\\"
-      on-click(event => {
-  event.preventDefault();
+      class=\\"button-4b8e7e0e\\"
+      on-click((ev) => {
+  ev.preventDefault();
   state.showReviewPrompt = false;
 })
     >
@@ -1281,8 +1283,8 @@ style {
     </button></if>
 
   <for|review,index| of=(state.reviews)>
-    <div class=\\"review-c36324fe\\" key=(review.id)>
-      <img class=\\"img-c36324fe\\" src=(review.avatar) />
+    <div class=\\"review-4b8e7e0e\\" key=(review.id)>
+      <img class=\\"img-4b8e7e0e\\" src=(review.avatar) />
       <div class=(state.showReviewPrompt ? 'bg-primary' : 'bg-secondary')>
         <div>N: \${index}</div>
         <div>\${review.author}</div>
@@ -1407,17 +1409,17 @@ exports[`Marko > jsx > Javascript Test > basicForwardRef 1`] = `
   }
 }
 
-style { 
-  .input-02928ba3 {
+style {
+  .input-24f3ca54 {
     color: red;
   }
 }
 <div>
   <input
-    class=\\"input-02928ba3\\"
+    class=\\"input-24f3ca54\\"
     key=\\"propsInputRef\\"
     value=(state.name)
-    on-input(event => state.name = event.target.value)
+    on-input((event) => state.name = event.target.value)
   />
 </div>"
 `;
@@ -1433,17 +1435,17 @@ exports[`Marko > jsx > Javascript Test > basicForwardRefMetadata 1`] = `
   }
 }
 
-style { 
-  .input-0a0d0fee {
+style {
+  .input-bda1f37c {
     color: red;
   }
 }
 <div>
   <input
-    class=\\"input-0a0d0fee\\"
+    class=\\"input-bda1f37c\\"
     key=\\"propsInputRef\\"
     value=(state.name)
-    on-input(event => state.name = event.target.value)
+    on-input((event) => state.name = event.target.value)
   />
 </div>"
 `;
@@ -1480,8 +1482,8 @@ exports[`Marko > jsx > Javascript Test > class + ClassName + css 1`] = `
 
 class {}
 
-style { 
-  .div-590a063c {
+style {
+  .div-6ef0b03e {
     padding: 10px;
   }
 }
@@ -1489,7 +1491,7 @@ style {
   <MyComp class=\\"test\\" className=\\"test2\\">
     Hello! I can run in React, Vue, Solid, or Liquid!
   </MyComp>
-  <div class=\\"test2 test div-590a063c\\">
+  <div class=\\"test2 test div-6ef0b03e\\">
     Hello! I can run in React, Vue, Solid, or Liquid!
   </div>
 </div>"
@@ -1498,12 +1500,12 @@ style {
 exports[`Marko > jsx > Javascript Test > class + css 1`] = `
 "class {}
 
-style { 
-  .div-fb8d32e6 {
+style {
+  .div-defca3e2 {
     padding: 10px;
   }
 }
-<div class=\\"test div-fb8d32e6\\">
+<div class=\\"test div-defca3e2\\">
   Hello! I can run in React, Vue, Solid, or Liquid!
 </div>"
 `;
@@ -1511,12 +1513,12 @@ style {
 exports[`Marko > jsx > Javascript Test > className + css 1`] = `
 "class {}
 
-style { 
-  .div-fb8d32e6 {
+style {
+  .div-defca3e2 {
     padding: 10px;
   }
 }
-<div class=\\"test div-fb8d32e6\\">
+<div class=\\"test div-defca3e2\\">
   Hello! I can run in React, Vue, Solid, or Liquid!
 </div>"
 `;
@@ -1546,12 +1548,12 @@ exports[`Marko > jsx > Javascript Test > classState 1`] = `
   }
 }
 
-style { 
-  .div-1abc267a {
+style {
+  .div-0a9f895c {
     padding: 10px;
   }
 }
-<div class=(state.classState + ' div-1abc267a') style=(state.styleState)>
+<div class=(state.classState + ' div-0a9f895c') style=(state.styleState)>
   Hello! I can run in React, Vue, Solid, or Liquid!
 </div>"
 `;
@@ -1598,7 +1600,7 @@ exports[`Marko > jsx > Javascript Test > defaultProps 1`] = `
     <button
       type=\\"button\\"
       ...(props.attributes)
-      on-click(event => input.onClick())
+      on-click((event) => input.onClick())
     >
       \${input.buttonText}
     </button></if>
@@ -1620,7 +1622,7 @@ exports[`Marko > jsx > Javascript Test > defaultPropsOutsideComponent 1`] = `
     <button
       type=\\"button\\"
       ...(props.attributes)
-      on-click(event => input.onClick(event))
+      on-click((event) => input.onClick(event))
     >
       \${input.text}
     </button></if>
@@ -1751,34 +1753,34 @@ exports[`Marko > jsx > Javascript Test > nestedShow 1`] = `
 exports[`Marko > jsx > Javascript Test > nestedStyles 1`] = `
 "class {}
 
-style { 
-  .div-7ff9918d {
+style {
+  .div-7671878a {
     display: flex;
     --bar: red;
     color: var(--bar);
   }
   @media (max-width: env(--mobile)) {
-    .div-7ff9918d {
+    .div-7671878a {
       display: block;
     }
   }
-  .div-7ff9918d:hover {
+  .div-7671878a:hover {
     display: flex;
   }
-  .div-7ff9918d:active {
+  .div-7671878a:active {
     display: inline;
   }
-  .div-7ff9918d .nested-selector {
+  .div-7671878a .nested-selector {
     display: grid;
   }
-  .div-7ff9918d .nested-selector:hover {
+  .div-7671878a .nested-selector:hover {
     display: block;
   }
-  .div-7ff9918d.nested-selector:active {
+  .div-7671878a.nested-selector:active {
     display: inline-block;
   }
 }
-<div class=\\"div-7ff9918d\\">Hello world</div>"
+<div class=\\"div-7671878a\\">Hello world</div>"
 `;
 
 exports[`Marko > jsx > Javascript Test > onEvent 1`] = `
@@ -2210,13 +2212,13 @@ class {
   }
 }
 
-style { 
-  .div-2f1bf84a {
+style {
+  .div-cf88ea4c {
     display: flex;
     flex-direction: columns;
   }
 }
-<div class=\\"div-2f1bf84a\\" on-click(event => trackClick(input.content.id))>
+<div class=\\"div-cf88ea4c\\" on-click((event) => trackClick(input.content.id))>
   <RenderBlocks blocks=(input.content.blocks)></RenderBlocks>
 </div>"
 `;
@@ -2354,12 +2356,12 @@ exports[`Marko > jsx > Javascript Test > signalsOnUpdate 1`] = `
   }
 }
 
-style { 
-  .div-120e4d4e {
+style {
+  .div-ba05009e {
     padding: 10px;
   }
 }
-<div class=\\"test div-120e4d4e\\">\${input.id} \${input.foo.value.bar.baz}</div>"
+<div class=\\"test div-ba05009e\\">\${input.id} \${input.foo.value.bar.baz}</div>"
 `;
 
 exports[`Marko > jsx > Javascript Test > spreadAttrs 1`] = `
@@ -2421,15 +2423,15 @@ exports[`Marko > jsx > Javascript Test > string-literal-store-kebab 1`] = `
 exports[`Marko > jsx > Javascript Test > styleClassAndCss 1`] = `
 "class {}
 
-style { 
-  .div-53ff897e {
+style {
+  .div-35e34a45 {
     display: flex;
     flex-direction: column;
     align-items: stretch;
   }
 }
 <div
-  class=\\"builder-column div-53ff897e\\"
+  class=\\"builder-column div-35e34a45\\"
   style=({
   width: '100%'
 })
@@ -2439,8 +2441,8 @@ style {
 exports[`Marko > jsx > Javascript Test > stylePropClassAndCss 1`] = `
 "class {}
 
-style { 
-  .div-40d76e28 {
+style {
+  .div-bee7e1a8 {
     display: flex;
     flex-direction: column;
     align-items: stretch;
@@ -2448,7 +2450,7 @@ style {
 }
 <div
   style=(input.attributes.style)
-  class=(input.attributes.class + ' div-40d76e28')
+  class=(input.attributes.class + ' div-bee7e1a8')
 ></div>"
 `;
 
@@ -2527,7 +2529,7 @@ exports[`Marko > jsx > Javascript Test > typeGetterStore 1`] = `
 exports[`Marko > jsx > Javascript Test > use-style 1`] = `
 "class {}
 
-style { 
+style {
   button {
     background: blue;
     color: white;
@@ -2541,24 +2543,24 @@ style {
 exports[`Marko > jsx > Javascript Test > use-style-and-css 1`] = `
 "class {}
 
-style { 
+style {
   button {
     font-size: 12px;
     outline: 1px solid black;
   }
 
-  .button-11144e0c {
+  .button-49a5373c {
     background: blue;
     color: white;
   }
 }
-<button type=\\"button\\" class=\\"button-11144e0c\\">Button</button>"
+<button type=\\"button\\" class=\\"button-49a5373c\\">Button</button>"
 `;
 
 exports[`Marko > jsx > Javascript Test > use-style-outside-component 1`] = `
 "class {}
 
-style { 
+style {
   button {
     background: blue;
     color: white;
@@ -2685,19 +2687,19 @@ exports[`Marko > jsx > Typescript Test > AdvancedRef 1`] = `
   }
 }
 
-style { 
-  .input-3b7b900d {
+style {
+  .input-c72441a0 {
     color: red;
   }
 }
 <div>
   <if(input.showInput)>
     <input
-      class=\\"input-3b7b900d\\"
+      class=\\"input-c72441a0\\"
       key=\\"inputRef\\"
       value=(state.name)
-      on-blur(event => component.onBlur())
-      on-input(event => state.name = event.target.value)
+      on-blur((event) => component.onBlur())
+      on-input((event) => state.name = event.target.value)
     />
     <label for=\\"cars\\" key=\\"inputNoArgRef\\"> Choose a car: </label>
     <select name=\\"cars\\" id=\\"cars\\">
@@ -2725,15 +2727,15 @@ class {
   }
 }
 
-style { 
-  .div-11706802 {
+style {
+  .div-22f58e48 {
     padding: 10px;
   }
 }
-<div class=\\"test div-11706802\\">
+<div class=\\"test div-22f58e48\\">
   <input
     value=(DEFAULT_VALUES.name || state.name)
-    on-input(myEvent => state.name = myEvent.target.value)
+    on-input((myEvent) => state.name = myEvent.target.value)
   />
 
   Hello! I can run in React, Vue, Solid, or Liquid! &gt;
@@ -2752,7 +2754,7 @@ exports[`Marko > jsx > Typescript Test > Basic 2`] = `
     <if(person === state.name)>
       <input
         value=(state.name)
-        on-input(event => {
+        on-input((event) => {
   state.name = event.target.value + ' and ' + person;
 })
       />
@@ -2787,7 +2789,7 @@ class {
   \${myService.method('hello') + state.name} Hello! I can run in React, Vue,
   Solid, or Liquid!
 
-  <input on-input(event => component.onChange) />
+  <input on-input((event) => component.onChange) />
 </div>"
 `;
 
@@ -2891,7 +2893,7 @@ exports[`Marko > jsx > Typescript Test > BasicFor 1`] = `
   <for|person| of=(state.names)>
     <input
       value=(state.name)
-      on-input(event => {
+      on-input((event) => {
   state.name = event.target.value + ' and ' + person;
 })
     />
@@ -2924,19 +2926,19 @@ exports[`Marko > jsx > Typescript Test > BasicRef 1`] = `
   }
 }
 
-style { 
-  .input-77dfc7d6 {
+style {
+  .input-2d5acf4c {
     color: red;
   }
 }
 <div>
   <if(input.showInput)>
     <input
-      class=\\"input-77dfc7d6\\"
+      class=\\"input-2d5acf4c\\"
       key=\\"inputRef\\"
       value=(state.name)
-      on-blur(event => component.onBlur())
-      on-input(event => state.name = event.target.value)
+      on-blur((event) => component.onBlur())
+      on-input((event) => state.name = event.target.value)
     />
     <label for=\\"cars\\" key=\\"inputNoArgRef\\"> Choose a car: </label>
     <select name=\\"cars\\" id=\\"cars\\">
@@ -2959,7 +2961,9 @@ exports[`Marko > jsx > Typescript Test > BasicRefAssignment 1`] = `
 }
 
 <div>
-  <button on-click(evt => component.handlerClick(evt))>Click</button>
+  <button on-click(async (evt) => await component.handlerClick(evt))>
+    Click
+  </button>
 </div>"
 `;
 
@@ -2989,7 +2993,7 @@ class {
 
 <div>
   <h1>Now: \${state.count} , before: \${this.prevCount}</h1>
-  <button on-click(event => state.count += 1)>Increment</button>
+  <button on-click((event) => state.count += 1)>Increment</button>
 </div>"
 `;
 
@@ -3029,30 +3033,30 @@ exports[`Marko > jsx > Typescript Test > Columns 1`] = `
   }
 }
 
-style { 
-  .div-589a139a {
+style {
+  .div-7a1249a4 {
     display: flex;
     flex-direction: column;
     align-items: stretch;
     line-height: normal;
   }
   @media (max-width: 999px) {
-    .div-589a139a {
+    .div-7a1249a4 {
       flex-direction: row;
     }
   }
   @media (max-width: 639px) {
-    .div-589a139a {
+    .div-7a1249a4 {
       flex-direction: row-reverse;
     }
   }
-  .div-589a139a-2 {
+  .div-7a1249a4-2 {
     flex-grow: 1;
   }
 }
-<div class=\\"builder-columns div-589a139a\\">
+<div class=\\"builder-columns div-7a1249a4\\">
   <for|column,index| of=(input.columns)>
-    <div class=\\"builder-column div-589a139a-2\\">\${column.content} \${index}</div>
+    <div class=\\"builder-column div-7a1249a4-2\\">\${column.content} \${index}</div>
   </for>
 </div>"
 `;
@@ -3091,7 +3095,7 @@ class {
   <div
     name=(input.slotContent ? 'name1' : 'name2')
     title=(input.slotContent ? 'title1' : 'title2')  ...(props.attributes)
-    on-click(event => component.show())
+    on-click((event) => component.show())
     class=(component.cls)
   >
     <if(state.showContent && input.slotContent)>
@@ -3482,8 +3486,8 @@ class {
   }
 }
 
-style { 
-  .pre-6976c39e {
+style {
+  .pre-82a300b6 {
     padding: 10px;
     color: red;
     text-align: center;
@@ -3495,7 +3499,7 @@ style {
   action=(!input.sendWithJs && input.action)
   method=(input.method)
   name=(input.name)
-  on-submit(event => component.onSubmit(event))  ...(props.attributes)
+  on-submit((event) => component.onSubmit(event))  ...(props.attributes)
 >
   <if(input.builderBlock && input.builderBlock.children)>
     <for|block,index| of=(input.builderBlock?.children)>
@@ -3518,7 +3522,7 @@ style {
     ></BuilderBlocks></if>
 
   <if(component.submissionState === 'error' && state.responseData)>
-    <pre class=\\"builder-form-error-text pre-6976c39e\\">
+    <pre class=\\"builder-form-error-text pre-82a300b6\\">
 \${JSON.stringify(state.responseData, null, 2)}</pre>
   </if>
 
@@ -3584,8 +3588,8 @@ exports[`Marko > jsx > Typescript Test > Image 1`] = `
   }
 }
 
-style { 
-  .img-22f3c8d4 {
+style {
+  .img-b8232e4e {
     opacity: 1;
     transition: opacity 0.2s ease-in-out;
     object-fit: cover;
@@ -3598,9 +3602,9 @@ style {
       <img
         alt=(input.altText)
         aria-role=(input.altText ? 'presentation' : undefined)
-        class=('builder-image' + (input._class ? ' ' + input._class : '') + ' img-22f3c8d4')
+        class=('builder-image' + (input._class ? ' ' + input._class : '') + ' img-b8232e4e')
         src=(input.image)
-        on-load(event => component.setLoaded())
+        on-load((event) => component.setLoaded())
         srcset=(input.srcset)
         sizes=(input.sizes)
     /></if>
@@ -3655,7 +3659,7 @@ class {}
   value=(input.value)
   defaultValue=(input.defaultValue)
   required=(input.required)
-  on-input(event => input.onChange?.(event.target.value))
+  on-input((event) => input.onChange?.(event.target.value))
 />"
 `;
 
@@ -3671,7 +3675,7 @@ class {
 <FormInputComponent
   name=\\"kingzez\\"
   type=\\"text\\"
-  on-change(value => component.handleChange(value))
+  on-change((value) => component.handleChange(value))
 ></FormInputComponent>"
 `;
 
@@ -3800,17 +3804,17 @@ class {
   }
 }
 
-style { 
-  .input-6d576eee {
+style {
+  .input-554308c6 {
     display: block;
   }
-  .textarea-6d576eee {
+  .textarea-554308c6 {
     display: block;
   }
-  .button-6d576eee {
+  .button-554308c6 {
     display: block;
   }
-  .review-6d576eee {
+  .review-554308c6 {
     margin: 10px;
     padding: 10px;
     background: white;
@@ -3819,27 +3823,27 @@ style {
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
     -webkit-font-smoothing: antialiased;
   }
-  .img-6d576eee {
+  .img-554308c6 {
     height: 30px;
     width: 30px;
     margin-right: 10px;
   }
 }
 <div data-user=(state.name)>
-  <button on-click(event => state.showReviewPrompt = true)>
+  <button on-click((event) => state.showReviewPrompt = true)>
     Write a review
   </button>
   <if(state.showReviewPrompt || 'asdf')>
     <input placeholder=\\"Email\\" />
-    <input placeholder=\\"Title\\" class=\\"input-6d576eee\\" />
+    <input placeholder=\\"Title\\" class=\\"input-554308c6\\" />
     <textarea
       placeholder=\\"How was your experience?\\"
-      class=\\"textarea-6d576eee\\"
+      class=\\"textarea-554308c6\\"
     ></textarea>
     <button
-      class=\\"button-6d576eee\\"
-      on-click(event => {
-  event.preventDefault();
+      class=\\"button-554308c6\\"
+      on-click((ev) => {
+  ev.preventDefault();
   state.showReviewPrompt = false;
 })
     >
@@ -3847,8 +3851,8 @@ style {
     </button></if>
 
   <for|review,index| of=(state.reviews)>
-    <div class=\\"review-6d576eee\\" key=(review.id)>
-      <img class=\\"img-6d576eee\\" src=(review.avatar) />
+    <div class=\\"review-554308c6\\" key=(review.id)>
+      <img class=\\"img-554308c6\\" src=(review.avatar) />
       <div class=(state.showReviewPrompt ? 'bg-primary' : 'bg-secondary')>
         <div>N: \${index}</div>
         <div>\${review.author}</div>
@@ -3973,17 +3977,17 @@ exports[`Marko > jsx > Typescript Test > basicForwardRef 1`] = `
   }
 }
 
-style { 
-  .input-41e589d4 {
+style {
+  .input-18b632d8 {
     color: red;
   }
 }
 <div>
   <input
-    class=\\"input-41e589d4\\"
+    class=\\"input-18b632d8\\"
     key=\\"propsInputRef\\"
     value=(state.name)
-    on-input(event => state.name = event.target.value)
+    on-input((event) => state.name = event.target.value)
   />
 </div>"
 `;
@@ -3999,17 +4003,17 @@ exports[`Marko > jsx > Typescript Test > basicForwardRefMetadata 1`] = `
   }
 }
 
-style { 
-  .input-2da13ec2 {
+style {
+  .input-bed36ef0 {
     color: red;
   }
 }
 <div>
   <input
-    class=\\"input-2da13ec2\\"
+    class=\\"input-bed36ef0\\"
     key=\\"propsInputRef\\"
     value=(state.name)
-    on-input(event => state.name = event.target.value)
+    on-input((event) => state.name = event.target.value)
   />
 </div>"
 `;
@@ -4046,8 +4050,8 @@ exports[`Marko > jsx > Typescript Test > class + ClassName + css 1`] = `
 
 class {}
 
-style { 
-  .div-590a063c {
+style {
+  .div-6ef0b03e {
     padding: 10px;
   }
 }
@@ -4055,7 +4059,7 @@ style {
   <MyComp class=\\"test\\" className=\\"test2\\">
     Hello! I can run in React, Vue, Solid, or Liquid!
   </MyComp>
-  <div class=\\"test2 test div-590a063c\\">
+  <div class=\\"test2 test div-6ef0b03e\\">
     Hello! I can run in React, Vue, Solid, or Liquid!
   </div>
 </div>"
@@ -4064,12 +4068,12 @@ style {
 exports[`Marko > jsx > Typescript Test > class + css 1`] = `
 "class {}
 
-style { 
-  .div-fb8d32e6 {
+style {
+  .div-defca3e2 {
     padding: 10px;
   }
 }
-<div class=\\"test div-fb8d32e6\\">
+<div class=\\"test div-defca3e2\\">
   Hello! I can run in React, Vue, Solid, or Liquid!
 </div>"
 `;
@@ -4077,12 +4081,12 @@ style {
 exports[`Marko > jsx > Typescript Test > className + css 1`] = `
 "class {}
 
-style { 
-  .div-fb8d32e6 {
+style {
+  .div-defca3e2 {
     padding: 10px;
   }
 }
-<div class=\\"test div-fb8d32e6\\">
+<div class=\\"test div-defca3e2\\">
   Hello! I can run in React, Vue, Solid, or Liquid!
 </div>"
 `;
@@ -4114,12 +4118,12 @@ exports[`Marko > jsx > Typescript Test > classState 1`] = `
   }
 }
 
-style { 
-  .div-1abc267a {
+style {
+  .div-0a9f895c {
     padding: 10px;
   }
 }
-<div class=(state.classState + ' div-1abc267a') style=(state.styleState)>
+<div class=(state.classState + ' div-0a9f895c') style=(state.styleState)>
   Hello! I can run in React, Vue, Solid, or Liquid!
 </div>"
 `;
@@ -4166,7 +4170,7 @@ exports[`Marko > jsx > Typescript Test > defaultProps 1`] = `
     <button
       type=\\"button\\"
       ...(props.attributes)
-      on-click(event => input.onClick())
+      on-click((event) => input.onClick())
     >
       \${input.buttonText}
     </button></if>
@@ -4188,7 +4192,7 @@ exports[`Marko > jsx > Typescript Test > defaultPropsOutsideComponent 1`] = `
     <button
       type=\\"button\\"
       ...(props.attributes)
-      on-click(event => input.onClick(event))
+      on-click((event) => input.onClick(event))
     >
       \${input.text}
     </button></if>
@@ -4320,34 +4324,34 @@ exports[`Marko > jsx > Typescript Test > nestedShow 1`] = `
 exports[`Marko > jsx > Typescript Test > nestedStyles 1`] = `
 "class {}
 
-style { 
-  .div-7ff9918d {
+style {
+  .div-7671878a {
     display: flex;
     --bar: red;
     color: var(--bar);
   }
   @media (max-width: env(--mobile)) {
-    .div-7ff9918d {
+    .div-7671878a {
       display: block;
     }
   }
-  .div-7ff9918d:hover {
+  .div-7671878a:hover {
     display: flex;
   }
-  .div-7ff9918d:active {
+  .div-7671878a:active {
     display: inline;
   }
-  .div-7ff9918d .nested-selector {
+  .div-7671878a .nested-selector {
     display: grid;
   }
-  .div-7ff9918d .nested-selector:hover {
+  .div-7671878a .nested-selector:hover {
     display: block;
   }
-  .div-7ff9918d.nested-selector:active {
+  .div-7671878a.nested-selector:active {
     display: inline-block;
   }
 }
-<div class=\\"div-7ff9918d\\">Hello world</div>"
+<div class=\\"div-7671878a\\">Hello world</div>"
 `;
 
 exports[`Marko > jsx > Typescript Test > onEvent 1`] = `
@@ -4787,13 +4791,13 @@ class {
   }
 }
 
-style { 
-  .div-6b87b95c {
+style {
+  .div-9a79dfbc {
     display: flex;
     flex-direction: columns;
   }
 }
-<div class=\\"div-6b87b95c\\" on-click(event => trackClick(input.content.id))>
+<div class=\\"div-9a79dfbc\\" on-click((event) => trackClick(input.content.id))>
   <RenderBlocks blocks=(input.content.blocks)></RenderBlocks>
 </div>"
 `;
@@ -4928,12 +4932,12 @@ exports[`Marko > jsx > Typescript Test > signalsOnUpdate 1`] = `
   }
 }
 
-style { 
-  .div-52492278 {
+style {
+  .div-8c5e5900 {
     padding: 10px;
   }
 }
-<div class=\\"test div-52492278\\">\${input.id} \${input.foo.bar.baz}</div>"
+<div class=\\"test div-8c5e5900\\">\${input.id} \${input.foo.bar.baz}</div>"
 `;
 
 exports[`Marko > jsx > Typescript Test > spreadAttrs 1`] = `
@@ -4995,15 +4999,15 @@ exports[`Marko > jsx > Typescript Test > string-literal-store-kebab 1`] = `
 exports[`Marko > jsx > Typescript Test > styleClassAndCss 1`] = `
 "class {}
 
-style { 
-  .div-53ff897e {
+style {
+  .div-35e34a45 {
     display: flex;
     flex-direction: column;
     align-items: stretch;
   }
 }
 <div
-  class=\\"builder-column div-53ff897e\\"
+  class=\\"builder-column div-35e34a45\\"
   style=({
   width: '100%'
 })
@@ -5013,8 +5017,8 @@ style {
 exports[`Marko > jsx > Typescript Test > stylePropClassAndCss 1`] = `
 "class {}
 
-style { 
-  .div-40d76e28 {
+style {
+  .div-bee7e1a8 {
     display: flex;
     flex-direction: column;
     align-items: stretch;
@@ -5022,7 +5026,7 @@ style {
 }
 <div
   style=(input.attributes.style)
-  class=(input.attributes.class + ' div-40d76e28')
+  class=(input.attributes.class + ' div-bee7e1a8')
 ></div>"
 `;
 
@@ -5106,7 +5110,7 @@ exports[`Marko > jsx > Typescript Test > typeGetterStore 1`] = `
 exports[`Marko > jsx > Typescript Test > use-style 1`] = `
 "class {}
 
-style { 
+style {
   button {
     background: blue;
     color: white;
@@ -5120,24 +5124,24 @@ style {
 exports[`Marko > jsx > Typescript Test > use-style-and-css 1`] = `
 "class {}
 
-style { 
+style {
   button {
     font-size: 12px;
     outline: 1px solid black;
   }
 
-  .button-11144e0c {
+  .button-49a5373c {
     background: blue;
     color: white;
   }
 }
-<button type=\\"button\\" class=\\"button-11144e0c\\">Button</button>"
+<button type=\\"button\\" class=\\"button-49a5373c\\">Button</button>"
 `;
 
 exports[`Marko > jsx > Typescript Test > use-style-outside-component 1`] = `
 "class {}
 
-style { 
+style {
   button {
     background: blue;
     color: white;
@@ -5189,7 +5193,7 @@ exports[`Marko > svelte > Javascript Test > basic 1`] = `
 
 <div>
   <input
-    on-input(event => state.name = event.target.value)
+    on-input((event) => state.name = event.target.value)
     value=(state.name)
   />
 
@@ -5209,19 +5213,19 @@ exports[`Marko > svelte > Javascript Test > bindGroup 1`] = `
     type=\\"radio\\"
     value=\\"Plain\\"
     checked=(state.tortilla === 'Plain')
-    on-input(event => state.tortilla = event.target.value)
+    on-input((event) => state.tortilla = event.target.value)
   />
   <input
     type=\\"radio\\"
     value=\\"Whole wheat\\"
     checked=(state.tortilla === 'Whole wheat')
-    on-input(event => state.tortilla = event.target.value)
+    on-input((event) => state.tortilla = event.target.value)
   />
   <input
     type=\\"radio\\"
     value=\\"Spinach\\"
     checked=(state.tortilla === 'Spinach')
-    on-input(event => state.tortilla = event.target.value)
+    on-input((event) => state.tortilla = event.target.value)
   />
   <br />
   <br />
@@ -5229,25 +5233,25 @@ exports[`Marko > svelte > Javascript Test > bindGroup 1`] = `
     type=\\"checkbox\\"
     value=\\"Rice\\"
     checked=(state.fillings === 'Rice')
-    on-input(event => state.fillings = event.target.value)
+    on-input((event) => state.fillings = event.target.value)
   />
   <input
     type=\\"checkbox\\"
     value=\\"Beans\\"
     checked=(state.fillings === 'Beans')
-    on-input(event => state.fillings = event.target.value)
+    on-input((event) => state.fillings = event.target.value)
   />
   <input
     type=\\"checkbox\\"
     value=\\"Cheese\\"
     checked=(state.fillings === 'Cheese')
-    on-input(event => state.fillings = event.target.value)
+    on-input((event) => state.fillings = event.target.value)
   />
   <input
     type=\\"checkbox\\"
     value=\\"Guac (extra)\\"
     checked=(state.fillings === 'Guac (extra)')
-    on-input(event => state.fillings = event.target.value)
+    on-input((event) => state.fillings = event.target.value)
   />
   <p>Tortilla: \${state.tortilla}</p>
   <p>Fillings: \${state.fillings}</p>
@@ -5308,9 +5312,9 @@ exports[`Marko > svelte > Javascript Test > eventHandlers 1`] = `
 }
 
 <div>
-  <button on-click(a => component.log('hi'))>Log</button>
-  <button on-click(event => component.log(event))>Log</button>
-  <button on-click(event => component.log(event))>Log</button>
+  <button on-click((a) => component.log('hi'))>Log</button>
+  <button on-click((event) => component.log(event))>Log</button>
+  <button on-click((event) => component.log(event))>Log</button>
 </div>"
 `;
 
@@ -5336,8 +5340,9 @@ exports[`Marko > svelte > Javascript Test > ifElse 1`] = `
 }
 
 <if(state.show)>
-  <button on-click(event => component.toggle(event))>Hide</button></if>
-<else><button on-click(event => component.toggle(event))>Show</button></else>"
+  <button on-click((event) => component.toggle(event))>Hide</button></if>
+<else
+  ><button on-click((event) => component.toggle(event))>Show</button></else>"
 `;
 
 exports[`Marko > svelte > Javascript Test > imports 1`] = `
@@ -5406,12 +5411,12 @@ exports[`Marko > svelte > Javascript Test > reactiveWithFn 1`] = `
 <div>
   <input
     type=\\"number\\"
-    on-input(event => state.a = event.target.value)
+    on-input((event) => state.a = event.target.value)
     value=(state.a)
   />
   <input
     type=\\"number\\"
-    on-input(event => state.b = event.target.value)
+    on-input((event) => state.b = event.target.value)
     value=(state.b)
   />
 
@@ -5430,7 +5435,7 @@ exports[`Marko > svelte > Javascript Test > slots 1`] = `
 exports[`Marko > svelte > Javascript Test > style 1`] = `
 "class {}
 
-style { 
+style {
   input {
     color: red;
     font-size: 12px;
@@ -5467,7 +5472,7 @@ exports[`Marko > svelte > Typescript Test > basic 1`] = `
 
 <div>
   <input
-    on-input(event => state.name = event.target.value)
+    on-input((event) => state.name = event.target.value)
     value=(state.name)
   />
 
@@ -5487,19 +5492,19 @@ exports[`Marko > svelte > Typescript Test > bindGroup 1`] = `
     type=\\"radio\\"
     value=\\"Plain\\"
     checked=(state.tortilla === 'Plain')
-    on-input(event => state.tortilla = event.target.value)
+    on-input((event) => state.tortilla = event.target.value)
   />
   <input
     type=\\"radio\\"
     value=\\"Whole wheat\\"
     checked=(state.tortilla === 'Whole wheat')
-    on-input(event => state.tortilla = event.target.value)
+    on-input((event) => state.tortilla = event.target.value)
   />
   <input
     type=\\"radio\\"
     value=\\"Spinach\\"
     checked=(state.tortilla === 'Spinach')
-    on-input(event => state.tortilla = event.target.value)
+    on-input((event) => state.tortilla = event.target.value)
   />
   <br />
   <br />
@@ -5507,25 +5512,25 @@ exports[`Marko > svelte > Typescript Test > bindGroup 1`] = `
     type=\\"checkbox\\"
     value=\\"Rice\\"
     checked=(state.fillings === 'Rice')
-    on-input(event => state.fillings = event.target.value)
+    on-input((event) => state.fillings = event.target.value)
   />
   <input
     type=\\"checkbox\\"
     value=\\"Beans\\"
     checked=(state.fillings === 'Beans')
-    on-input(event => state.fillings = event.target.value)
+    on-input((event) => state.fillings = event.target.value)
   />
   <input
     type=\\"checkbox\\"
     value=\\"Cheese\\"
     checked=(state.fillings === 'Cheese')
-    on-input(event => state.fillings = event.target.value)
+    on-input((event) => state.fillings = event.target.value)
   />
   <input
     type=\\"checkbox\\"
     value=\\"Guac (extra)\\"
     checked=(state.fillings === 'Guac (extra)')
-    on-input(event => state.fillings = event.target.value)
+    on-input((event) => state.fillings = event.target.value)
   />
   <p>Tortilla: \${state.tortilla}</p>
   <p>Fillings: \${state.fillings}</p>
@@ -5586,9 +5591,9 @@ exports[`Marko > svelte > Typescript Test > eventHandlers 1`] = `
 }
 
 <div>
-  <button on-click(a => component.log('hi'))>Log</button>
-  <button on-click(event => component.log(event))>Log</button>
-  <button on-click(event => component.log(event))>Log</button>
+  <button on-click((a) => component.log('hi'))>Log</button>
+  <button on-click((event) => component.log(event))>Log</button>
+  <button on-click((event) => component.log(event))>Log</button>
 </div>"
 `;
 
@@ -5614,8 +5619,9 @@ exports[`Marko > svelte > Typescript Test > ifElse 1`] = `
 }
 
 <if(state.show)>
-  <button on-click(event => component.toggle(event))>Hide</button></if>
-<else><button on-click(event => component.toggle(event))>Show</button></else>"
+  <button on-click((event) => component.toggle(event))>Hide</button></if>
+<else
+  ><button on-click((event) => component.toggle(event))>Show</button></else>"
 `;
 
 exports[`Marko > svelte > Typescript Test > imports 1`] = `
@@ -5684,12 +5690,12 @@ exports[`Marko > svelte > Typescript Test > reactiveWithFn 1`] = `
 <div>
   <input
     type=\\"number\\"
-    on-input(event => state.a = event.target.value)
+    on-input((event) => state.a = event.target.value)
     value=(state.a)
   />
   <input
     type=\\"number\\"
-    on-input(event => state.b = event.target.value)
+    on-input((event) => state.b = event.target.value)
     value=(state.b)
   />
 
@@ -5708,7 +5714,7 @@ exports[`Marko > svelte > Typescript Test > slots 1`] = `
 exports[`Marko > svelte > Typescript Test > style 1`] = `
 "class {}
 
-style { 
+style {
   input {
     color: red;
     font-size: 12px;
diff --git a/packages/core/src/__tests__/__snapshots__/mitosis.test.ts.snap b/packages/core/src/__tests__/__snapshots__/mitosis.test.ts.snap
index 53c74fcc32..a1dcd5be9f 100644
--- a/packages/core/src/__tests__/__snapshots__/mitosis.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/mitosis.test.ts.snap
@@ -142,7 +142,7 @@ export default function MyBasicComponent(props) {
     >
       <input
         value={DEFAULT_VALUES.name || state.name}
-        onChange={(event) => (state.name = myEvent.target.value)}
+        onChange={(myEvent) => (state.name = myEvent.target.value)}
       />
       Hello! I can run in React, Vue, Solid, or Liquid! &gt;
     </div>,
@@ -1149,7 +1149,7 @@ export default function Stepper(props) {
     <FormInputComponent
       name=\\"kingzez\\"
       type=\\"text\\"
-      onChange={(event) => state.handleChange(value)}
+      onChange={(value) => state.handleChange(value)}
     />,
   ];
 }
@@ -1360,8 +1360,8 @@ export default function SmileReviews(props) {
             css={{
               display: \\"block\\",
             }}
-            onClick={(event) => {
-              event.preventDefault();
+            onClick={(ev) => {
+              ev.preventDefault();
               state.showReviewPrompt = false;
             }}
           >
@@ -3038,7 +3038,7 @@ export default function MyBasicComponent(props) {
     >
       <input
         value={DEFAULT_VALUES.name || state.name}
-        onChange={(event) => (state.name = myEvent.target.value)}
+        onChange={(myEvent) => (state.name = myEvent.target.value)}
       />
       Hello! I can run in React, Vue, Solid, or Liquid! &gt;
     </div>,
@@ -4174,7 +4174,7 @@ export default function Stepper(props) {
     <FormInputComponent
       name=\\"kingzez\\"
       type=\\"text\\"
-      onChange={(event) => state.handleChange(value)}
+      onChange={(value) => state.handleChange(value)}
     />,
   ];
 }
@@ -4427,8 +4427,8 @@ export default function SmileReviews(props) {
             css={{
               display: \\"block\\",
             }}
-            onClick={(event) => {
-              event.preventDefault();
+            onClick={(ev) => {
+              ev.preventDefault();
               state.showReviewPrompt = false;
             }}
           >
@@ -6301,7 +6301,7 @@ export default function MyComponent(props) {
 
   return [
     <div>
-      <button onClick={(event) => state.log(\\"hi\\")}>Log</button>
+      <button onClick={(a) => state.log(\\"hi\\")}>Log</button>
       <button onClick={(event) => state.log(event)}>Log</button>
       <button onClick={(event) => state.log(event)}>Log</button>
     </div>,
@@ -6641,7 +6641,7 @@ export default function MyComponent(props) {
 
   return [
     <div>
-      <button onClick={(event) => state.log(\\"hi\\")}>Log</button>
+      <button onClick={(a) => state.log(\\"hi\\")}>Log</button>
       <button onClick={(event) => state.log(event)}>Log</button>
       <button onClick={(event) => state.log(event)}>Log</button>
     </div>,
@@ -6982,7 +6982,7 @@ export default function MyBasicComponent(props) {
     >
       <input
         value={DEFAULT_VALUES.name || state.name}
-        onChange={(event) => (state.name = myEvent.target.value)}
+        onChange={(myEvent) => (state.name = myEvent.target.value)}
       />
       Hello! I can run in React, Vue, Solid, or Liquid! &gt;
     </div>
@@ -7993,7 +7993,7 @@ export default function Stepper(props) {
     <FormInputComponent
       name=\\"kingzez\\"
       type=\\"text\\"
-      onChange={(event) => state.handleChange(value)}
+      onChange={(value) => state.handleChange(value)}
     />
   );
 }
@@ -8205,8 +8205,8 @@ export default function SmileReviews(props) {
           css={{
             display: \\"block\\",
           }}
-          onClick={(event) => {
-            event.preventDefault();
+          onClick={(ev) => {
+            ev.preventDefault();
             state.showReviewPrompt = false;
           }}
         >
@@ -9927,7 +9927,7 @@ export default function MyBasicComponent(props) {
     >
       <input
         value={DEFAULT_VALUES.name || state.name}
-        onChange={(event) => (state.name = myEvent.target.value)}
+        onChange={(myEvent) => (state.name = myEvent.target.value)}
       />
       Hello! I can run in React, Vue, Solid, or Liquid! &gt;
     </div>
@@ -11070,7 +11070,7 @@ export default function Stepper(props) {
     <FormInputComponent
       name=\\"kingzez\\"
       type=\\"text\\"
-      onChange={(event) => state.handleChange(value)}
+      onChange={(value) => state.handleChange(value)}
     />
   );
 }
@@ -11327,8 +11327,8 @@ export default function SmileReviews(props) {
           css={{
             display: \\"block\\",
           }}
-          onClick={(event) => {
-            event.preventDefault();
+          onClick={(ev) => {
+            ev.preventDefault();
             state.showReviewPrompt = false;
           }}
         >
@@ -13237,7 +13237,7 @@ export default function MyComponent(props) {
 
   return (
     <div>
-      <button onClick={(event) => state.log(\\"hi\\")}>Log</button>
+      <button onClick={(a) => state.log(\\"hi\\")}>Log</button>
       <button onClick={(event) => state.log(event)}>Log</button>
       <button onClick={(event) => state.log(event)}>Log</button>
     </div>
@@ -13574,7 +13574,7 @@ export default function MyComponent(props) {
 
   return (
     <div>
-      <button onClick={(event) => state.log(\\"hi\\")}>Log</button>
+      <button onClick={(a) => state.log(\\"hi\\")}>Log</button>
       <button onClick={(event) => state.log(event)}>Log</button>
       <button onClick={(event) => state.log(event)}>Log</button>
     </div>
@@ -14233,7 +14233,7 @@ function MyBasicRefAssignmentComponent(props) {
 
   return (
     <div>
-      <button onClick={(evt) => handlerClick(evt)}>Click</button>
+      <button onClick={async (evt) => await handlerClick(evt)}>Click</button>
     </div>
   );
 }
@@ -15261,8 +15261,8 @@ function SmileReviews(props) {
             css={{
               display: \\"block\\",
             }}
-            onClick={(event) => {
-              event.preventDefault();
+            onClick={(ev) => {
+              ev.preventDefault();
               setShowReviewPrompt(false);
             }}
           >
@@ -17715,7 +17715,7 @@ function MyBasicRefAssignmentComponent(props) {
 
   return (
     <div>
-      <button onClick={(evt) => handlerClick(evt)}>Click</button>
+      <button onClick={async (evt) => await handlerClick(evt)}>Click</button>
     </div>
   );
 }
@@ -18752,8 +18752,8 @@ function SmileReviews(props) {
             css={{
               display: \\"block\\",
             }}
-            onClick={(event) => {
-              event.preventDefault();
+            onClick={(ev) => {
+              ev.preventDefault();
               setShowReviewPrompt(false);
             }}
           >
diff --git a/packages/core/src/__tests__/__snapshots__/parse-jsx.test.ts.snap b/packages/core/src/__tests__/__snapshots__/parse-jsx.test.ts.snap
index 80d80392ac..774063bf42 100644
--- a/packages/core/src/__tests__/__snapshots__/parse-jsx.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/parse-jsx.test.ts.snap
@@ -12,6 +12,7 @@ exports[`Parse JSX > Javascript > Advanced 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "each": {
+              "bindingType": "expression",
               "code": "state.names",
               "type": "single",
             },
@@ -25,6 +26,7 @@ exports[`Parse JSX > Javascript > Advanced 1`] = `
                   "@type": "@builder.io/mitosis/node",
                   "bindings": {
                     "_text": {
+                      "bindingType": "expression",
                       "code": "i",
                       "type": "single",
                     },
@@ -50,6 +52,7 @@ exports[`Parse JSX > Javascript > Advanced 1`] = `
                   "@type": "@builder.io/mitosis/node",
                   "bindings": {
                     "_text": {
+                      "bindingType": "expression",
                       "code": "person",
                       "type": "single",
                     },
@@ -79,6 +82,7 @@ exports[`Parse JSX > Javascript > Advanced 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "each": {
+              "bindingType": "expression",
               "code": "state.names",
               "type": "single",
             },
@@ -92,6 +96,7 @@ exports[`Parse JSX > Javascript > Advanced 1`] = `
                   "@type": "@builder.io/mitosis/node",
                   "bindings": {
                     "_text": {
+                      "bindingType": "expression",
                       "code": "person",
                       "type": "single",
                     },
@@ -120,6 +125,7 @@ exports[`Parse JSX > Javascript > Advanced 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "each": {
+              "bindingType": "expression",
               "code": "state.names",
               "type": "single",
             },
@@ -144,6 +150,7 @@ exports[`Parse JSX > Javascript > Advanced 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "each": {
+              "bindingType": "expression",
               "code": "Array.from({
   length: 10
 })",
@@ -159,6 +166,7 @@ exports[`Parse JSX > Javascript > Advanced 1`] = `
                   "@type": "@builder.io/mitosis/node",
                   "bindings": {
                     "_text": {
+                      "bindingType": "expression",
                       "code": "ee",
                       "type": "single",
                     },
@@ -188,6 +196,7 @@ exports[`Parse JSX > Javascript > Advanced 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "each": {
+              "bindingType": "expression",
               "code": "Array.from({
   length: 10
 })",
@@ -203,6 +212,7 @@ exports[`Parse JSX > Javascript > Advanced 1`] = `
                   "@type": "@builder.io/mitosis/node",
                   "bindings": {
                     "_text": {
+                      "bindingType": "expression",
                       "code": "index",
                       "type": "single",
                     },
@@ -229,6 +239,7 @@ exports[`Parse JSX > Javascript > Advanced 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "each": {
+              "bindingType": "expression",
               "code": "state.names",
               "type": "single",
             },
@@ -242,6 +253,7 @@ exports[`Parse JSX > Javascript > Advanced 1`] = `
                   "@type": "@builder.io/mitosis/node",
                   "bindings": {
                     "_text": {
+                      "bindingType": "expression",
                       "code": "person",
                       "type": "single",
                     },
@@ -256,6 +268,7 @@ exports[`Parse JSX > Javascript > Advanced 1`] = `
                   "@type": "@builder.io/mitosis/node",
                   "bindings": {
                     "_text": {
+                      "bindingType": "expression",
                       "code": "index",
                       "type": "single",
                     },
@@ -285,6 +298,7 @@ exports[`Parse JSX > Javascript > Advanced 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "each": {
+              "bindingType": "expression",
               "code": "Array.from({
   length: 10
 })",
@@ -300,6 +314,7 @@ exports[`Parse JSX > Javascript > Advanced 1`] = `
                   "@type": "@builder.io/mitosis/node",
                   "bindings": {
                     "_text": {
+                      "bindingType": "expression",
                       "code": "person",
                       "type": "single",
                     },
@@ -314,6 +329,7 @@ exports[`Parse JSX > Javascript > Advanced 1`] = `
                   "@type": "@builder.io/mitosis/node",
                   "bindings": {
                     "_text": {
+                      "bindingType": "expression",
                       "code": "count",
                       "type": "single",
                     },
@@ -343,6 +359,7 @@ exports[`Parse JSX > Javascript > Advanced 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "each": {
+              "bindingType": "expression",
               "code": "state.names",
               "type": "single",
             },
@@ -356,6 +373,7 @@ exports[`Parse JSX > Javascript > Advanced 1`] = `
                   "@type": "@builder.io/mitosis/node",
                   "bindings": {
                     "_text": {
+                      "bindingType": "expression",
                       "code": "person",
                       "type": "single",
                     },
@@ -370,6 +388,7 @@ exports[`Parse JSX > Javascript > Advanced 1`] = `
                   "@type": "@builder.io/mitosis/node",
                   "bindings": {
                     "_text": {
+                      "bindingType": "expression",
                       "code": "i",
                       "type": "single",
                     },
@@ -399,6 +418,7 @@ exports[`Parse JSX > Javascript > Advanced 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "each": {
+              "bindingType": "expression",
               "code": "Array.from({
   length: 10
 })",
@@ -414,6 +434,7 @@ exports[`Parse JSX > Javascript > Advanced 1`] = `
                   "@type": "@builder.io/mitosis/node",
                   "bindings": {
                     "_text": {
+                      "bindingType": "expression",
                       "code": "person",
                       "type": "single",
                     },
@@ -428,6 +449,7 @@ exports[`Parse JSX > Javascript > Advanced 1`] = `
                   "@type": "@builder.io/mitosis/node",
                   "bindings": {
                     "_text": {
+                      "bindingType": "expression",
                       "code": "index",
                       "type": "single",
                     },
@@ -502,6 +524,7 @@ exports[`Parse JSX > Javascript > AdvancedRef 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "when": {
+              "bindingType": "expression",
               "code": "props.showInput",
               "type": "single",
             },
@@ -515,6 +538,7 @@ exports[`Parse JSX > Javascript > AdvancedRef 1`] = `
                   "@type": "@builder.io/mitosis/node",
                   "bindings": {
                     "css": {
+                      "bindingType": "expression",
                       "code": "{
   color: 'red'
 }",
@@ -524,6 +548,7 @@ exports[`Parse JSX > Javascript > AdvancedRef 1`] = `
                       "arguments": [
                         "event",
                       ],
+                      "bindingType": "function",
                       "code": "state.onBlur()",
                       "type": "single",
                     },
@@ -531,14 +556,17 @@ exports[`Parse JSX > Javascript > AdvancedRef 1`] = `
                       "arguments": [
                         "event",
                       ],
+                      "bindingType": "function",
                       "code": "state.name = event.target.value",
                       "type": "single",
                     },
                     "ref": {
+                      "bindingType": "expression",
                       "code": "inputRef",
                       "type": "single",
                     },
                     "value": {
+                      "bindingType": "expression",
                       "code": "state.name",
                       "type": "single",
                     },
@@ -553,6 +581,7 @@ exports[`Parse JSX > Javascript > AdvancedRef 1`] = `
                   "@type": "@builder.io/mitosis/node",
                   "bindings": {
                     "ref": {
+                      "bindingType": "expression",
                       "code": "inputNoArgRef",
                       "type": "single",
                     },
@@ -667,6 +696,7 @@ exports[`Parse JSX > Javascript > AdvancedRef 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "_text": {
+              "bindingType": "expression",
               "code": "state.lowerCaseName()",
               "type": "single",
             },
@@ -755,6 +785,7 @@ exports[`Parse JSX > Javascript > Basic 1`] = `
       "@type": "@builder.io/mitosis/node",
       "bindings": {
         "css": {
+          "bindingType": "expression",
           "code": "{
   padding: '10px'
 }",
@@ -769,10 +800,12 @@ exports[`Parse JSX > Javascript > Basic 1`] = `
               "arguments": [
                 "myEvent",
               ],
+              "bindingType": "function",
               "code": "state.name = myEvent.target.value",
               "type": "single",
             },
             "value": {
+              "bindingType": "expression",
               "code": "DEFAULT_VALUES.name || state.name",
               "type": "single",
             },
@@ -866,6 +899,7 @@ exports[`Parse JSX > Javascript > Basic 2`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "each": {
+              "bindingType": "expression",
               "code": "state.names",
               "type": "single",
             },
@@ -875,6 +909,7 @@ exports[`Parse JSX > Javascript > Basic 2`] = `
               "@type": "@builder.io/mitosis/node",
               "bindings": {
                 "when": {
+                  "bindingType": "expression",
                   "code": "person === state.name",
                   "type": "single",
                 },
@@ -887,12 +922,14 @@ exports[`Parse JSX > Javascript > Basic 2`] = `
                       "arguments": [
                         "event",
                       ],
+                      "bindingType": "function",
                       "code": "{
   state.name = event.target.value + ' and ' + person;
 }",
                       "type": "single",
                     },
                     "value": {
+                      "bindingType": "expression",
                       "code": "state.name",
                       "type": "single",
                     },
@@ -919,6 +956,7 @@ exports[`Parse JSX > Javascript > Basic 2`] = `
                   "@type": "@builder.io/mitosis/node",
                   "bindings": {
                     "_text": {
+                      "bindingType": "expression",
                       "code": "person",
                       "type": "single",
                     },
@@ -1004,6 +1042,7 @@ exports[`Parse JSX > Javascript > Basic Context 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "_text": {
+              "bindingType": "expression",
               "code": "myService.method('hello') + state.name",
               "type": "single",
             },
@@ -1031,6 +1070,7 @@ exports[`Parse JSX > Javascript > Basic Context 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "onChange": {
+              "bindingType": "expression",
               "code": "state.onChange",
               "type": "single",
             },
@@ -1133,6 +1173,7 @@ exports[`Parse JSX > Javascript > Basic OnMount Update 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "_text": {
+              "bindingType": "expression",
               "code": "state.name",
               "type": "single",
             },
@@ -1294,6 +1335,7 @@ exports[`Parse JSX > Javascript > BasicAttribute 1`] = `
       "@type": "@builder.io/mitosis/node",
       "bindings": {
         "spellcheck": {
+          "bindingType": "expression",
           "code": "true",
           "type": "single",
         },
@@ -1339,6 +1381,7 @@ exports[`Parse JSX > Javascript > BasicBooleanAttribute 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "when": {
+              "bindingType": "expression",
               "code": "props.children",
               "type": "single",
             },
@@ -1348,6 +1391,7 @@ exports[`Parse JSX > Javascript > BasicBooleanAttribute 1`] = `
               "@type": "@builder.io/mitosis/node",
               "bindings": {
                 "_text": {
+                  "bindingType": "expression",
                   "code": "props.children",
                   "type": "single",
                 },
@@ -1362,6 +1406,7 @@ exports[`Parse JSX > Javascript > BasicBooleanAttribute 1`] = `
               "@type": "@builder.io/mitosis/node",
               "bindings": {
                 "_text": {
+                  "bindingType": "expression",
                   "code": "props.type",
                   "type": "single",
                 },
@@ -1382,6 +1427,7 @@ exports[`Parse JSX > Javascript > BasicBooleanAttribute 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "toggle": {
+              "bindingType": "expression",
               "code": "true",
               "type": "single",
             },
@@ -1396,6 +1442,7 @@ exports[`Parse JSX > Javascript > BasicBooleanAttribute 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "toggle": {
+              "bindingType": "expression",
               "code": "true",
               "type": "single",
             },
@@ -1410,6 +1457,7 @@ exports[`Parse JSX > Javascript > BasicBooleanAttribute 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "list": {
+              "bindingType": "expression",
               "code": "null",
               "type": "single",
             },
@@ -1466,6 +1514,7 @@ exports[`Parse JSX > Javascript > BasicChildComponent 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "id": {
+              "bindingType": "expression",
               "code": "state.dev",
               "type": "single",
             },
@@ -1484,10 +1533,12 @@ exports[`Parse JSX > Javascript > BasicChildComponent 1`] = `
               "@type": "@builder.io/mitosis/node",
               "bindings": {
                 "bye": {
+                  "bindingType": "expression",
                   "code": "state.dev",
                   "type": "single",
                 },
                 "hi": {
+                  "bindingType": "expression",
                   "code": "state.name",
                   "type": "single",
                 },
@@ -1568,6 +1619,7 @@ exports[`Parse JSX > Javascript > BasicFor 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "each": {
+              "bindingType": "expression",
               "code": "state.names",
               "type": "single",
             },
@@ -1584,12 +1636,14 @@ exports[`Parse JSX > Javascript > BasicFor 1`] = `
                       "arguments": [
                         "event",
                       ],
+                      "bindingType": "function",
                       "code": "{
   state.name = event.target.value + ' and ' + person;
 }",
                       "type": "single",
                     },
                     "value": {
+                      "bindingType": "expression",
                       "code": "state.name",
                       "type": "single",
                     },
@@ -1616,6 +1670,7 @@ exports[`Parse JSX > Javascript > BasicFor 1`] = `
                   "@type": "@builder.io/mitosis/node",
                   "bindings": {
                     "_text": {
+                      "bindingType": "expression",
                       "code": "person",
                       "type": "single",
                     },
@@ -1706,6 +1761,7 @@ exports[`Parse JSX > Javascript > BasicRef 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "when": {
+              "bindingType": "expression",
               "code": "props.showInput",
               "type": "single",
             },
@@ -1719,6 +1775,7 @@ exports[`Parse JSX > Javascript > BasicRef 1`] = `
                   "@type": "@builder.io/mitosis/node",
                   "bindings": {
                     "css": {
+                      "bindingType": "expression",
                       "code": "{
   color: 'red'
 }",
@@ -1728,6 +1785,7 @@ exports[`Parse JSX > Javascript > BasicRef 1`] = `
                       "arguments": [
                         "event",
                       ],
+                      "bindingType": "function",
                       "code": "state.onBlur()",
                       "type": "single",
                     },
@@ -1735,14 +1793,17 @@ exports[`Parse JSX > Javascript > BasicRef 1`] = `
                       "arguments": [
                         "event",
                       ],
+                      "bindingType": "function",
                       "code": "state.name = event.target.value",
                       "type": "single",
                     },
                     "ref": {
+                      "bindingType": "expression",
                       "code": "inputRef",
                       "type": "single",
                     },
                     "value": {
+                      "bindingType": "expression",
                       "code": "state.name",
                       "type": "single",
                     },
@@ -1757,6 +1818,7 @@ exports[`Parse JSX > Javascript > BasicRef 1`] = `
                   "@type": "@builder.io/mitosis/node",
                   "bindings": {
                     "ref": {
+                      "bindingType": "expression",
                       "code": "inputNoArgRef",
                       "type": "single",
                     },
@@ -1871,6 +1933,7 @@ exports[`Parse JSX > Javascript > BasicRef 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "_text": {
+              "bindingType": "expression",
               "code": "state.lowerCaseName()",
               "type": "single",
             },
@@ -1960,7 +2023,9 @@ exports[`Parse JSX > Javascript > BasicRefAssignment 1`] = `
               "arguments": [
                 "evt",
               ],
-              "code": "state.handlerClick(evt)",
+              "async": true,
+              "bindingType": "function",
+              "code": "await state.handlerClick(evt)",
               "type": "single",
             },
           },
@@ -2049,6 +2114,7 @@ exports[`Parse JSX > Javascript > BasicRefPrevious 1`] = `
               "@type": "@builder.io/mitosis/node",
               "bindings": {
                 "_text": {
+                  "bindingType": "expression",
                   "code": "state.count",
                   "type": "single",
                 },
@@ -2074,6 +2140,7 @@ exports[`Parse JSX > Javascript > BasicRefPrevious 1`] = `
               "@type": "@builder.io/mitosis/node",
               "bindings": {
                 "_text": {
+                  "bindingType": "expression",
                   "code": "prevCount",
                   "type": "single",
                 },
@@ -2094,6 +2161,7 @@ exports[`Parse JSX > Javascript > BasicRefPrevious 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "onClick": {
+              "bindingType": "function",
               "code": "state.count += 1",
               "type": "single",
             },
@@ -2187,6 +2255,7 @@ exports[`Parse JSX > Javascript > Button 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "when": {
+              "bindingType": "expression",
               "code": "props.link",
               "type": "single",
             },
@@ -2196,6 +2265,7 @@ exports[`Parse JSX > Javascript > Button 1`] = `
               "@type": "@builder.io/mitosis/node",
               "bindings": {
                 "href": {
+                  "bindingType": "expression",
                   "code": "props.link",
                   "type": "single",
                 },
@@ -2205,6 +2275,7 @@ exports[`Parse JSX > Javascript > Button 1`] = `
                   "type": "spread",
                 },
                 "target": {
+                  "bindingType": "expression",
                   "code": "props.openLinkInNewTab ? '_blank' : undefined",
                   "type": "single",
                 },
@@ -2214,6 +2285,7 @@ exports[`Parse JSX > Javascript > Button 1`] = `
                   "@type": "@builder.io/mitosis/node",
                   "bindings": {
                     "_text": {
+                      "bindingType": "expression",
                       "code": "props.text",
                       "type": "single",
                     },
@@ -2240,6 +2312,7 @@ exports[`Parse JSX > Javascript > Button 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "when": {
+              "bindingType": "expression",
               "code": "!props.link",
               "type": "single",
             },
@@ -2259,6 +2332,7 @@ exports[`Parse JSX > Javascript > Button 1`] = `
                   "@type": "@builder.io/mitosis/node",
                   "bindings": {
                     "_text": {
+                      "bindingType": "expression",
                       "code": "props.text",
                       "type": "single",
                     },
@@ -2317,6 +2391,7 @@ exports[`Parse JSX > Javascript > Columns 1`] = `
       "@type": "@builder.io/mitosis/node",
       "bindings": {
         "css": {
+          "bindingType": "expression",
           "code": "{
   display: 'flex',
   flexDirection: 'column',
@@ -2337,6 +2412,7 @@ exports[`Parse JSX > Javascript > Columns 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "each": {
+              "bindingType": "expression",
               "code": "props.columns",
               "type": "single",
             },
@@ -2346,6 +2422,7 @@ exports[`Parse JSX > Javascript > Columns 1`] = `
               "@type": "@builder.io/mitosis/node",
               "bindings": {
                 "css": {
+                  "bindingType": "expression",
                   "code": "{
   flexGrow: '1'
 }",
@@ -2357,6 +2434,7 @@ exports[`Parse JSX > Javascript > Columns 1`] = `
                   "@type": "@builder.io/mitosis/node",
                   "bindings": {
                     "_text": {
+                      "bindingType": "expression",
                       "code": "column.content",
                       "type": "single",
                     },
@@ -2371,6 +2449,7 @@ exports[`Parse JSX > Javascript > Columns 1`] = `
                   "@type": "@builder.io/mitosis/node",
                   "bindings": {
                     "_text": {
+                      "bindingType": "expression",
                       "code": "index",
                       "type": "single",
                     },
@@ -2467,6 +2546,7 @@ exports[`Parse JSX > Javascript > ContentSlotHtml 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "name": {
+              "bindingType": "expression",
               "code": "props.slotTesting",
               "type": "single",
             },
@@ -2549,6 +2629,7 @@ exports[`Parse JSX > Javascript > ContentSlotJSX 1`] = `
       "@type": "@builder.io/mitosis/node",
       "bindings": {
         "when": {
+          "bindingType": "expression",
           "code": "props.slotReference",
           "type": "single",
         },
@@ -2558,14 +2639,17 @@ exports[`Parse JSX > Javascript > ContentSlotJSX 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "class": {
+              "bindingType": "expression",
               "code": "state.cls",
               "type": "single",
             },
             "name": {
+              "bindingType": "expression",
               "code": "props.slotContent ? 'name1' : 'name2'",
               "type": "single",
             },
             "onClick": {
+              "bindingType": "function",
               "code": "state.show()",
               "type": "single",
             },
@@ -2575,6 +2659,7 @@ exports[`Parse JSX > Javascript > ContentSlotJSX 1`] = `
               "type": "spread",
             },
             "title": {
+              "bindingType": "expression",
               "code": "props.slotContent ? 'title1' : 'title2'",
               "type": "single",
             },
@@ -2584,6 +2669,7 @@ exports[`Parse JSX > Javascript > ContentSlotJSX 1`] = `
               "@type": "@builder.io/mitosis/node",
               "bindings": {
                 "when": {
+                  "bindingType": "expression",
                   "code": "state.showContent && props.slotContent",
                   "type": "single",
                 },
@@ -2597,6 +2683,7 @@ exports[`Parse JSX > Javascript > ContentSlotJSX 1`] = `
                       "@type": "@builder.io/mitosis/node",
                       "bindings": {
                         "_text": {
+                          "bindingType": "expression",
                           "code": "props.content",
                           "type": "single",
                         },
@@ -2648,6 +2735,7 @@ exports[`Parse JSX > Javascript > ContentSlotJSX 1`] = `
                   "@type": "@builder.io/mitosis/node",
                   "bindings": {
                     "_text": {
+                      "bindingType": "expression",
                       "code": "props.children",
                       "type": "single",
                     },
@@ -2744,14 +2832,17 @@ exports[`Parse JSX > Javascript > CustomCode 1`] = `
       "@type": "@builder.io/mitosis/node",
       "bindings": {
         "class": {
+          "bindingType": "expression",
           "code": "'builder-custom-code' + (props.replaceNodes ? ' replace-nodes' : '')",
           "type": "single",
         },
         "innerHTML": {
+          "bindingType": "expression",
           "code": "props.code",
           "type": "single",
         },
         "ref": {
+          "bindingType": "expression",
           "code": "elem",
           "type": "single",
         },
@@ -2847,14 +2938,17 @@ exports[`Parse JSX > Javascript > Embed 1`] = `
       "@type": "@builder.io/mitosis/node",
       "bindings": {
         "class": {
+          "bindingType": "expression",
           "code": "'builder-custom-code' + (props.replaceNodes ? ' replace-nodes' : '')",
           "type": "single",
         },
         "innerHTML": {
+          "bindingType": "expression",
           "code": "props.code",
           "type": "single",
         },
         "ref": {
+          "bindingType": "expression",
           "code": "elem",
           "type": "single",
         },
@@ -2950,14 +3044,17 @@ exports[`Parse JSX > Javascript > Form 1`] = `
       "@type": "@builder.io/mitosis/node",
       "bindings": {
         "action": {
+          "bindingType": "expression",
           "code": "!props.sendWithJs && props.action",
           "type": "single",
         },
         "method": {
+          "bindingType": "expression",
           "code": "props.method",
           "type": "single",
         },
         "name": {
+          "bindingType": "expression",
           "code": "props.name",
           "type": "single",
         },
@@ -2965,6 +3062,7 @@ exports[`Parse JSX > Javascript > Form 1`] = `
           "arguments": [
             "event",
           ],
+          "bindingType": "function",
           "code": "state.onSubmit(event)",
           "type": "single",
         },
@@ -2974,10 +3072,12 @@ exports[`Parse JSX > Javascript > Form 1`] = `
           "type": "spread",
         },
         "ref": {
+          "bindingType": "expression",
           "code": "formRef",
           "type": "single",
         },
         "validate": {
+          "bindingType": "expression",
           "code": "props.validate",
           "type": "single",
         },
@@ -2987,6 +3087,7 @@ exports[`Parse JSX > Javascript > Form 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "when": {
+              "bindingType": "expression",
               "code": "props.builderBlock && props.builderBlock.children",
               "type": "single",
             },
@@ -2996,6 +3097,7 @@ exports[`Parse JSX > Javascript > Form 1`] = `
               "@type": "@builder.io/mitosis/node",
               "bindings": {
                 "each": {
+                  "bindingType": "expression",
                   "code": "props.builderBlock?.children",
                   "type": "single",
                 },
@@ -3005,14 +3107,17 @@ exports[`Parse JSX > Javascript > Form 1`] = `
                   "@type": "@builder.io/mitosis/node",
                   "bindings": {
                     "block": {
+                      "bindingType": "expression",
                       "code": "block",
                       "type": "single",
                     },
                     "index": {
+                      "bindingType": "expression",
                       "code": "index",
                       "type": "single",
                     },
                     "key": {
+                      "bindingType": "expression",
                       "code": "block.id",
                       "type": "single",
                     },
@@ -3042,6 +3147,7 @@ exports[`Parse JSX > Javascript > Form 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "when": {
+              "bindingType": "expression",
               "code": "state.submissionState === 'error'",
               "type": "single",
             },
@@ -3051,6 +3157,7 @@ exports[`Parse JSX > Javascript > Form 1`] = `
               "@type": "@builder.io/mitosis/node",
               "bindings": {
                 "blocks": {
+                  "bindingType": "expression",
                   "code": "props.errorMessage",
                   "type": "single",
                 },
@@ -3073,6 +3180,7 @@ exports[`Parse JSX > Javascript > Form 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "when": {
+              "bindingType": "expression",
               "code": "state.submissionState === 'sending'",
               "type": "single",
             },
@@ -3082,6 +3190,7 @@ exports[`Parse JSX > Javascript > Form 1`] = `
               "@type": "@builder.io/mitosis/node",
               "bindings": {
                 "blocks": {
+                  "bindingType": "expression",
                   "code": "props.sendingMessage",
                   "type": "single",
                 },
@@ -3104,6 +3213,7 @@ exports[`Parse JSX > Javascript > Form 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "when": {
+              "bindingType": "expression",
               "code": "state.submissionState === 'error' && state.responseData",
               "type": "single",
             },
@@ -3113,6 +3223,7 @@ exports[`Parse JSX > Javascript > Form 1`] = `
               "@type": "@builder.io/mitosis/node",
               "bindings": {
                 "css": {
+                  "bindingType": "expression",
                   "code": "{
   padding: '10px',
   color: 'red',
@@ -3126,6 +3237,7 @@ exports[`Parse JSX > Javascript > Form 1`] = `
                   "@type": "@builder.io/mitosis/node",
                   "bindings": {
                     "_text": {
+                      "bindingType": "expression",
                       "code": "JSON.stringify(state.responseData, null, 2)",
                       "type": "single",
                     },
@@ -3154,6 +3266,7 @@ exports[`Parse JSX > Javascript > Form 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "when": {
+              "bindingType": "expression",
               "code": "state.submissionState === 'success'",
               "type": "single",
             },
@@ -3163,6 +3276,7 @@ exports[`Parse JSX > Javascript > Form 1`] = `
               "@type": "@builder.io/mitosis/node",
               "bindings": {
                 "blocks": {
+                  "bindingType": "expression",
                   "code": "props.successMessage",
                   "type": "single",
                 },
@@ -3469,6 +3583,7 @@ exports[`Parse JSX > Javascript > Image 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "ref": {
+              "bindingType": "expression",
               "code": "pictureRef",
               "type": "single",
             },
@@ -3478,6 +3593,7 @@ exports[`Parse JSX > Javascript > Image 1`] = `
               "@type": "@builder.io/mitosis/node",
               "bindings": {
                 "when": {
+                  "bindingType": "expression",
                   "code": "!state.useLazyLoading() || state.load",
                   "type": "single",
                 },
@@ -3487,18 +3603,22 @@ exports[`Parse JSX > Javascript > Image 1`] = `
                   "@type": "@builder.io/mitosis/node",
                   "bindings": {
                     "alt": {
+                      "bindingType": "expression",
                       "code": "props.altText",
                       "type": "single",
                     },
                     "aria-role": {
+                      "bindingType": "expression",
                       "code": "props.altText ? 'presentation' : undefined",
                       "type": "single",
                     },
                     "class": {
+                      "bindingType": "expression",
                       "code": "'builder-image' + (props._class ? ' ' + props._class : '')",
                       "type": "single",
                     },
                     "css": {
+                      "bindingType": "expression",
                       "code": "{
   opacity: '1',
   transition: 'opacity 0.2s ease-in-out',
@@ -3508,18 +3628,22 @@ exports[`Parse JSX > Javascript > Image 1`] = `
                       "type": "single",
                     },
                     "onLoad": {
+                      "bindingType": "function",
                       "code": "state.setLoaded()",
                       "type": "single",
                     },
                     "sizes": {
+                      "bindingType": "expression",
                       "code": "props.sizes",
                       "type": "single",
                     },
                     "src": {
+                      "bindingType": "expression",
                       "code": "props.image",
                       "type": "single",
                     },
                     "srcset": {
+                      "bindingType": "expression",
                       "code": "props.srcset",
                       "type": "single",
                     },
@@ -3540,6 +3664,7 @@ exports[`Parse JSX > Javascript > Image 1`] = `
               "@type": "@builder.io/mitosis/node",
               "bindings": {
                 "srcset": {
+                  "bindingType": "expression",
                   "code": "props.srcset",
                   "type": "single",
                 },
@@ -3560,6 +3685,7 @@ exports[`Parse JSX > Javascript > Image 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "_text": {
+              "bindingType": "expression",
               "code": "props.children",
               "type": "single",
             },
@@ -3678,6 +3804,7 @@ exports[`Parse JSX > Javascript > Image State 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "each": {
+              "bindingType": "expression",
               "code": "state.images",
               "type": "single",
             },
@@ -3691,10 +3818,12 @@ exports[`Parse JSX > Javascript > Image State 1`] = `
                   "@type": "@builder.io/mitosis/node",
                   "bindings": {
                     "key": {
+                      "bindingType": "expression",
                       "code": "itemIndex",
                       "type": "single",
                     },
                     "src": {
+                      "bindingType": "expression",
                       "code": "item",
                       "type": "single",
                     },
@@ -3767,10 +3896,12 @@ exports[`Parse JSX > Javascript > Img 1`] = `
       "@type": "@builder.io/mitosis/node",
       "bindings": {
         "alt": {
+          "bindingType": "expression",
           "code": "props.altText",
           "type": "single",
         },
         "key": {
+          "bindingType": "expression",
           "code": "Builder.isEditing && props.imgSrc || 'default-key'",
           "type": "single",
         },
@@ -3780,10 +3911,12 @@ exports[`Parse JSX > Javascript > Img 1`] = `
           "type": "spread",
         },
         "src": {
+          "bindingType": "expression",
           "code": "props.imgSrc",
           "type": "single",
         },
         "style": {
+          "bindingType": "expression",
           "code": "{
   objectFit: props.backgroundSize || 'cover',
   objectPosition: props.backgroundPosition || 'center'
@@ -3833,14 +3966,17 @@ exports[`Parse JSX > Javascript > Input 1`] = `
       "@type": "@builder.io/mitosis/node",
       "bindings": {
         "defaultValue": {
+          "bindingType": "expression",
           "code": "props.defaultValue",
           "type": "single",
         },
         "key": {
+          "bindingType": "expression",
           "code": "Builder.isEditing && props.defaultValue ? props.defaultValue : 'default-key'",
           "type": "single",
         },
         "name": {
+          "bindingType": "expression",
           "code": "props.name",
           "type": "single",
         },
@@ -3848,10 +3984,12 @@ exports[`Parse JSX > Javascript > Input 1`] = `
           "arguments": [
             "event",
           ],
+          "bindingType": "function",
           "code": "props.onChange?.(event.target.value)",
           "type": "single",
         },
         "placeholder": {
+          "bindingType": "expression",
           "code": "props.placeholder",
           "type": "single",
         },
@@ -3861,14 +3999,17 @@ exports[`Parse JSX > Javascript > Input 1`] = `
           "type": "spread",
         },
         "required": {
+          "bindingType": "expression",
           "code": "props.required",
           "type": "single",
         },
         "type": {
+          "bindingType": "expression",
           "code": "props.type",
           "type": "single",
         },
         "value": {
+          "bindingType": "expression",
           "code": "props.value",
           "type": "single",
         },
@@ -3918,6 +4059,7 @@ exports[`Parse JSX > Javascript > InputParent 1`] = `
           "arguments": [
             "value",
           ],
+          "bindingType": "function",
           "code": "state.handleChange(value)",
           "type": "single",
         },
@@ -3974,10 +4116,12 @@ exports[`Parse JSX > Javascript > RawText 1`] = `
       "@type": "@builder.io/mitosis/node",
       "bindings": {
         "class": {
+          "bindingType": "expression",
           "code": "props.attributes?.class || props.attributes?.className",
           "type": "single",
         },
         "innerHTML": {
+          "bindingType": "expression",
           "code": "props.text || ''",
           "type": "single",
         },
@@ -4021,6 +4165,7 @@ exports[`Parse JSX > Javascript > Section 1`] = `
           "type": "spread",
         },
         "style": {
+          "bindingType": "expression",
           "code": "props.maxWidth && typeof props.maxWidth === 'number' ? {
   maxWidth: props.maxWidth
 } : undefined",
@@ -4032,6 +4177,7 @@ exports[`Parse JSX > Javascript > Section 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "_text": {
+              "bindingType": "expression",
               "code": "props.children",
               "type": "single",
             },
@@ -4076,6 +4222,7 @@ exports[`Parse JSX > Javascript > Section 2`] = `
       "@type": "@builder.io/mitosis/node",
       "bindings": {
         "when": {
+          "bindingType": "expression",
           "code": "state.max",
           "type": "single",
         },
@@ -4085,6 +4232,7 @@ exports[`Parse JSX > Javascript > Section 2`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "each": {
+              "bindingType": "expression",
               "code": "state.items",
               "type": "single",
             },
@@ -4099,6 +4247,7 @@ exports[`Parse JSX > Javascript > Section 2`] = `
                   "type": "spread",
                 },
                 "style": {
+                  "bindingType": "expression",
                   "code": "{
   maxWidth: item + state.max
 }",
@@ -4110,6 +4259,7 @@ exports[`Parse JSX > Javascript > Section 2`] = `
                   "@type": "@builder.io/mitosis/node",
                   "bindings": {
                     "_text": {
+                      "bindingType": "expression",
                       "code": "props.children",
                       "type": "single",
                     },
@@ -4179,14 +4329,17 @@ exports[`Parse JSX > Javascript > Select 1`] = `
       "@type": "@builder.io/mitosis/node",
       "bindings": {
         "defaultValue": {
+          "bindingType": "expression",
           "code": "props.defaultValue",
           "type": "single",
         },
         "key": {
+          "bindingType": "expression",
           "code": "Builder.isEditing && props.defaultValue ? props.defaultValue : 'default-key'",
           "type": "single",
         },
         "name": {
+          "bindingType": "expression",
           "code": "props.name",
           "type": "single",
         },
@@ -4196,6 +4349,7 @@ exports[`Parse JSX > Javascript > Select 1`] = `
           "type": "spread",
         },
         "value": {
+          "bindingType": "expression",
           "code": "props.value",
           "type": "single",
         },
@@ -4205,6 +4359,7 @@ exports[`Parse JSX > Javascript > Select 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "each": {
+              "bindingType": "expression",
               "code": "props.options",
               "type": "single",
             },
@@ -4214,10 +4369,12 @@ exports[`Parse JSX > Javascript > Select 1`] = `
               "@type": "@builder.io/mitosis/node",
               "bindings": {
                 "data-index": {
+                  "bindingType": "expression",
                   "code": "index",
                   "type": "single",
                 },
                 "value": {
+                  "bindingType": "expression",
                   "code": "option.value",
                   "type": "single",
                 },
@@ -4227,6 +4384,7 @@ exports[`Parse JSX > Javascript > Select 1`] = `
                   "@type": "@builder.io/mitosis/node",
                   "bindings": {
                     "_text": {
+                      "bindingType": "expression",
                       "code": "option.name || option.value",
                       "type": "single",
                     },
@@ -4369,6 +4527,7 @@ exports[`Parse JSX > Javascript > SlotHtml 1`] = `
               "@type": "@builder.io/mitosis/node",
               "bindings": {
                 "testing": {
+                  "bindingType": "expression",
                   "code": "<div>Hello</div>",
                   "type": "single",
                 },
@@ -4456,6 +4615,7 @@ exports[`Parse JSX > Javascript > SlotJsx 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "slotTesting": {
+              "bindingType": "expression",
               "code": "<div>Hello</div>",
               "type": "single",
             },
@@ -4633,6 +4793,7 @@ exports[`Parse JSX > Javascript > Stamped.io 1`] = `
       "@type": "@builder.io/mitosis/node",
       "bindings": {
         "data-user": {
+          "bindingType": "expression",
           "code": "state.name",
           "type": "single",
         },
@@ -4642,6 +4803,7 @@ exports[`Parse JSX > Javascript > Stamped.io 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "onClick": {
+              "bindingType": "function",
               "code": "state.showReviewPrompt = true",
               "type": "single",
             },
@@ -4668,6 +4830,7 @@ exports[`Parse JSX > Javascript > Stamped.io 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "when": {
+              "bindingType": "expression",
               "code": "state.showReviewPrompt || 'asdf'",
               "type": "single",
             },
@@ -4688,6 +4851,7 @@ exports[`Parse JSX > Javascript > Stamped.io 1`] = `
               "@type": "@builder.io/mitosis/node",
               "bindings": {
                 "css": {
+                  "bindingType": "expression",
                   "code": "{
   display: 'block'
 }",
@@ -4706,6 +4870,7 @@ exports[`Parse JSX > Javascript > Stamped.io 1`] = `
               "@type": "@builder.io/mitosis/node",
               "bindings": {
                 "css": {
+                  "bindingType": "expression",
                   "code": "{
   display: 'block'
 }",
@@ -4724,6 +4889,7 @@ exports[`Parse JSX > Javascript > Stamped.io 1`] = `
               "@type": "@builder.io/mitosis/node",
               "bindings": {
                 "css": {
+                  "bindingType": "expression",
                   "code": "{
   display: 'block'
 }",
@@ -4731,10 +4897,11 @@ exports[`Parse JSX > Javascript > Stamped.io 1`] = `
                 },
                 "onClick": {
                   "arguments": [
-                    "event",
+                    "ev",
                   ],
+                  "bindingType": "function",
                   "code": "{
-  event.preventDefault();
+  ev.preventDefault();
   state.showReviewPrompt = false;
 }",
                   "type": "single",
@@ -4770,6 +4937,7 @@ exports[`Parse JSX > Javascript > Stamped.io 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "each": {
+              "bindingType": "expression",
               "code": "state.reviews",
               "type": "single",
             },
@@ -4779,6 +4947,7 @@ exports[`Parse JSX > Javascript > Stamped.io 1`] = `
               "@type": "@builder.io/mitosis/node",
               "bindings": {
                 "css": {
+                  "bindingType": "expression",
                   "code": "{
   margin: '10px',
   padding: '10px',
@@ -4791,6 +4960,7 @@ exports[`Parse JSX > Javascript > Stamped.io 1`] = `
                   "type": "single",
                 },
                 "key": {
+                  "bindingType": "expression",
                   "code": "review.id",
                   "type": "single",
                 },
@@ -4800,6 +4970,7 @@ exports[`Parse JSX > Javascript > Stamped.io 1`] = `
                   "@type": "@builder.io/mitosis/node",
                   "bindings": {
                     "css": {
+                      "bindingType": "expression",
                       "code": "{
   height: '30px',
   width: '30px',
@@ -4808,6 +4979,7 @@ exports[`Parse JSX > Javascript > Stamped.io 1`] = `
                       "type": "single",
                     },
                     "src": {
+                      "bindingType": "expression",
                       "code": "review.avatar",
                       "type": "single",
                     },
@@ -4822,6 +4994,7 @@ exports[`Parse JSX > Javascript > Stamped.io 1`] = `
                   "@type": "@builder.io/mitosis/node",
                   "bindings": {
                     "class": {
+                      "bindingType": "expression",
                       "code": "state.showReviewPrompt ? 'bg-primary' : 'bg-secondary'",
                       "type": "single",
                     },
@@ -4846,6 +5019,7 @@ exports[`Parse JSX > Javascript > Stamped.io 1`] = `
                           "@type": "@builder.io/mitosis/node",
                           "bindings": {
                             "_text": {
+                              "bindingType": "expression",
                               "code": "index",
                               "type": "single",
                             },
@@ -4870,6 +5044,7 @@ exports[`Parse JSX > Javascript > Stamped.io 1`] = `
                           "@type": "@builder.io/mitosis/node",
                           "bindings": {
                             "_text": {
+                              "bindingType": "expression",
                               "code": "review.author",
                               "type": "single",
                             },
@@ -4894,6 +5069,7 @@ exports[`Parse JSX > Javascript > Stamped.io 1`] = `
                           "@type": "@builder.io/mitosis/node",
                           "bindings": {
                             "_text": {
+                              "bindingType": "expression",
                               "code": "review.reviewMessage",
                               "type": "single",
                             },
@@ -5021,6 +5197,7 @@ exports[`Parse JSX > Javascript > Submit 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "_text": {
+              "bindingType": "expression",
               "code": "props.text",
               "type": "single",
             },
@@ -5067,16 +5244,19 @@ exports[`Parse JSX > Javascript > Text 1`] = `
       "@type": "@builder.io/mitosis/node",
       "bindings": {
         "contentEditable": {
+          "bindingType": "expression",
           "code": "allowEditingText || undefined",
           "type": "single",
         },
         "data-name": {
+          "bindingType": "expression",
           "code": "{
   test: state.name || 'any name'
 }",
           "type": "single",
         },
         "innerHTML": {
+          "bindingType": "expression",
           "code": "props.text || props.content || state.name || '<p class=\\"text-lg\\">my name</p>'",
           "type": "single",
         },
@@ -5129,14 +5309,17 @@ exports[`Parse JSX > Javascript > Textarea 1`] = `
       "@type": "@builder.io/mitosis/node",
       "bindings": {
         "defaultValue": {
+          "bindingType": "expression",
           "code": "props.defaultValue",
           "type": "single",
         },
         "name": {
+          "bindingType": "expression",
           "code": "props.name",
           "type": "single",
         },
         "placeholder": {
+          "bindingType": "expression",
           "code": "props.placeholder",
           "type": "single",
         },
@@ -5146,6 +5329,7 @@ exports[`Parse JSX > Javascript > Textarea 1`] = `
           "type": "spread",
         },
         "value": {
+          "bindingType": "expression",
           "code": "props.value",
           "type": "single",
         },
@@ -5184,26 +5368,32 @@ exports[`Parse JSX > Javascript > Video 1`] = `
       "@type": "@builder.io/mitosis/node",
       "bindings": {
         "autoplay": {
+          "bindingType": "expression",
           "code": "props.autoPlay",
           "type": "single",
         },
         "controls": {
+          "bindingType": "expression",
           "code": "props.controls",
           "type": "single",
         },
         "key": {
+          "bindingType": "expression",
           "code": "props.video || 'no-src'",
           "type": "single",
         },
         "loop": {
+          "bindingType": "expression",
           "code": "props.loop",
           "type": "single",
         },
         "muted": {
+          "bindingType": "expression",
           "code": "props.muted",
           "type": "single",
         },
         "poster": {
+          "bindingType": "expression",
           "code": "props.posterImage",
           "type": "single",
         },
@@ -5213,6 +5403,7 @@ exports[`Parse JSX > Javascript > Video 1`] = `
           "type": "spread",
         },
         "style": {
+          "bindingType": "expression",
           "code": "{
   width: '100%',
   height: '100%',
@@ -5277,6 +5468,7 @@ exports[`Parse JSX > Javascript > arrowFunctionInUseStore 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "_text": {
+              "bindingType": "expression",
               "code": "state.name",
               "type": "single",
             },
@@ -5359,6 +5551,7 @@ exports[`Parse JSX > Javascript > basicForNoTagReference 1`] = `
               "@type": "@builder.io/mitosis/node",
               "bindings": {
                 "_text": {
+                  "bindingType": "expression",
                   "code": "state.name",
                   "type": "single",
                 },
@@ -5379,6 +5572,7 @@ exports[`Parse JSX > Javascript > basicForNoTagReference 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "each": {
+              "bindingType": "expression",
               "code": "props.actions",
               "type": "single",
             },
@@ -5405,6 +5599,7 @@ exports[`Parse JSX > Javascript > basicForNoTagReference 1`] = `
                       "@type": "@builder.io/mitosis/node",
                       "bindings": {
                         "_text": {
+                          "bindingType": "expression",
                           "code": "action.text",
                           "type": "single",
                         },
@@ -5495,6 +5690,7 @@ exports[`Parse JSX > Javascript > basicForwardRef 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "css": {
+              "bindingType": "expression",
               "code": "{
   color: 'red'
 }",
@@ -5504,14 +5700,17 @@ exports[`Parse JSX > Javascript > basicForwardRef 1`] = `
               "arguments": [
                 "event",
               ],
+              "bindingType": "function",
               "code": "state.name = event.target.value",
               "type": "single",
             },
             "ref": {
+              "bindingType": "expression",
               "code": "props.inputRef",
               "type": "single",
             },
             "value": {
+              "bindingType": "expression",
               "code": "state.name",
               "type": "single",
             },
@@ -5566,6 +5765,7 @@ exports[`Parse JSX > Javascript > basicForwardRefMetadata 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "css": {
+              "bindingType": "expression",
               "code": "{
   color: 'red'
 }",
@@ -5575,14 +5775,17 @@ exports[`Parse JSX > Javascript > basicForwardRefMetadata 1`] = `
               "arguments": [
                 "event",
               ],
+              "bindingType": "function",
               "code": "state.name = event.target.value",
               "type": "single",
             },
             "ref": {
+              "bindingType": "expression",
               "code": "props.inputRef",
               "type": "single",
             },
             "value": {
+              "bindingType": "expression",
               "code": "state.name",
               "type": "single",
             },
@@ -5652,6 +5855,7 @@ exports[`Parse JSX > Javascript > basicOnUpdateReturn 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "_text": {
+              "bindingType": "expression",
               "code": "state.name",
               "type": "single",
             },
@@ -5749,6 +5953,7 @@ exports[`Parse JSX > Javascript > class + ClassName + css 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "css": {
+              "bindingType": "expression",
               "code": "{
   padding: '10px'
 }",
@@ -5819,6 +6024,7 @@ exports[`Parse JSX > Javascript > class + css 1`] = `
       "@type": "@builder.io/mitosis/node",
       "bindings": {
         "css": {
+          "bindingType": "expression",
           "code": "{
   padding: '10px'
 }",
@@ -5875,6 +6081,7 @@ exports[`Parse JSX > Javascript > className + css 1`] = `
       "@type": "@builder.io/mitosis/node",
       "bindings": {
         "css": {
+          "bindingType": "expression",
           "code": "{
   padding: '10px'
 }",
@@ -5958,6 +6165,7 @@ exports[`Parse JSX > Javascript > className 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "class": {
+              "bindingType": "expression",
               "code": "state.bindings",
               "type": "single",
             },
@@ -6020,16 +6228,19 @@ exports[`Parse JSX > Javascript > classState 1`] = `
       "@type": "@builder.io/mitosis/node",
       "bindings": {
         "class": {
+          "bindingType": "expression",
           "code": "state.classState",
           "type": "single",
         },
         "css": {
+          "bindingType": "expression",
           "code": "{
   padding: '10px'
 }",
           "type": "single",
         },
         "style": {
+          "bindingType": "expression",
           "code": "state.styleState",
           "type": "single",
         },
@@ -6103,6 +6314,7 @@ exports[`Parse JSX > Javascript > componentWithContext 1`] = `
               "@type": "@builder.io/mitosis/node",
               "bindings": {
                 "_text": {
+                  "bindingType": "expression",
                   "code": "foo.value",
                   "type": "single",
                 },
@@ -6208,6 +6420,7 @@ exports[`Parse JSX > Javascript > componentWithContextMultiRoot 1`] = `
               "@type": "@builder.io/mitosis/node",
               "bindings": {
                 "_text": {
+                  "bindingType": "expression",
                   "code": "foo.value",
                   "type": "single",
                 },
@@ -6399,6 +6612,7 @@ exports[`Parse JSX > Javascript > defaultProps 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "when": {
+              "bindingType": "expression",
               "code": "props.link",
               "type": "single",
             },
@@ -6408,6 +6622,7 @@ exports[`Parse JSX > Javascript > defaultProps 1`] = `
               "@type": "@builder.io/mitosis/node",
               "bindings": {
                 "href": {
+                  "bindingType": "expression",
                   "code": "props.link",
                   "type": "single",
                 },
@@ -6417,6 +6632,7 @@ exports[`Parse JSX > Javascript > defaultProps 1`] = `
                   "type": "spread",
                 },
                 "target": {
+                  "bindingType": "expression",
                   "code": "props.openLinkInNewTab ? '_blank' : undefined",
                   "type": "single",
                 },
@@ -6426,6 +6642,7 @@ exports[`Parse JSX > Javascript > defaultProps 1`] = `
                   "@type": "@builder.io/mitosis/node",
                   "bindings": {
                     "_text": {
+                      "bindingType": "expression",
                       "code": "props.text",
                       "type": "single",
                     },
@@ -6452,6 +6669,7 @@ exports[`Parse JSX > Javascript > defaultProps 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "when": {
+              "bindingType": "expression",
               "code": "!props.link",
               "type": "single",
             },
@@ -6461,6 +6679,7 @@ exports[`Parse JSX > Javascript > defaultProps 1`] = `
               "@type": "@builder.io/mitosis/node",
               "bindings": {
                 "onClick": {
+                  "bindingType": "function",
                   "code": "props.onClick()",
                   "type": "single",
                 },
@@ -6475,6 +6694,7 @@ exports[`Parse JSX > Javascript > defaultProps 1`] = `
                   "@type": "@builder.io/mitosis/node",
                   "bindings": {
                     "_text": {
+                      "bindingType": "expression",
                       "code": "props.buttonText",
                       "type": "single",
                     },
@@ -6560,6 +6780,7 @@ exports[`Parse JSX > Javascript > defaultPropsOutsideComponent 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "when": {
+              "bindingType": "expression",
               "code": "props.link",
               "type": "single",
             },
@@ -6569,6 +6790,7 @@ exports[`Parse JSX > Javascript > defaultPropsOutsideComponent 1`] = `
               "@type": "@builder.io/mitosis/node",
               "bindings": {
                 "href": {
+                  "bindingType": "expression",
                   "code": "props.link",
                   "type": "single",
                 },
@@ -6578,6 +6800,7 @@ exports[`Parse JSX > Javascript > defaultPropsOutsideComponent 1`] = `
                   "type": "spread",
                 },
                 "target": {
+                  "bindingType": "expression",
                   "code": "props.openLinkInNewTab ? '_blank' : undefined",
                   "type": "single",
                 },
@@ -6587,6 +6810,7 @@ exports[`Parse JSX > Javascript > defaultPropsOutsideComponent 1`] = `
                   "@type": "@builder.io/mitosis/node",
                   "bindings": {
                     "_text": {
+                      "bindingType": "expression",
                       "code": "props.text",
                       "type": "single",
                     },
@@ -6613,6 +6837,7 @@ exports[`Parse JSX > Javascript > defaultPropsOutsideComponent 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "when": {
+              "bindingType": "expression",
               "code": "!props.link",
               "type": "single",
             },
@@ -6625,6 +6850,7 @@ exports[`Parse JSX > Javascript > defaultPropsOutsideComponent 1`] = `
                   "arguments": [
                     "event",
                   ],
+                  "bindingType": "function",
                   "code": "props.onClick(event)",
                   "type": "single",
                 },
@@ -6639,6 +6865,7 @@ exports[`Parse JSX > Javascript > defaultPropsOutsideComponent 1`] = `
                   "@type": "@builder.io/mitosis/node",
                   "bindings": {
                     "_text": {
+                      "bindingType": "expression",
                       "code": "props.text",
                       "type": "single",
                     },
@@ -6733,6 +6960,7 @@ exports[`Parse JSX > Javascript > defaultValsWithTypes 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "_text": {
+              "bindingType": "expression",
               "code": "props.name || DEFAULT_VALUES.name",
               "type": "single",
             },
@@ -6789,6 +7017,7 @@ exports[`Parse JSX > Javascript > expressionState 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "_text": {
+              "bindingType": "expression",
               "code": "state.refToUse",
               "type": "single",
             },
@@ -6847,6 +7076,7 @@ exports[`Parse JSX > Javascript > getterState 1`] = `
               "@type": "@builder.io/mitosis/node",
               "bindings": {
                 "_text": {
+                  "bindingType": "expression",
                   "code": "state.foo2",
                   "type": "single",
                 },
@@ -6871,6 +7101,7 @@ exports[`Parse JSX > Javascript > getterState 1`] = `
               "@type": "@builder.io/mitosis/node",
               "bindings": {
                 "_text": {
+                  "bindingType": "expression",
                   "code": "state.bar",
                   "type": "single",
                 },
@@ -6895,6 +7126,7 @@ exports[`Parse JSX > Javascript > getterState 1`] = `
               "@type": "@builder.io/mitosis/node",
               "bindings": {
                 "_text": {
+                  "bindingType": "expression",
                   "code": "state.baz(1)",
                   "type": "single",
                 },
@@ -7188,6 +7420,7 @@ exports[`Parse JSX > Javascript > nestedShow 1`] = `
       "@type": "@builder.io/mitosis/node",
       "bindings": {
         "when": {
+          "bindingType": "expression",
           "code": "props.conditionA",
           "type": "single",
         },
@@ -7197,6 +7430,7 @@ exports[`Parse JSX > Javascript > nestedShow 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "when": {
+              "bindingType": "expression",
               "code": "!props.conditionB",
               "type": "single",
             },
@@ -7307,6 +7541,7 @@ exports[`Parse JSX > Javascript > nestedStyles 1`] = `
       "@type": "@builder.io/mitosis/node",
       "bindings": {
         "css": {
+          "bindingType": "expression",
           "code": "{
   display: 'flex',
   '--bar': 'red',
@@ -7381,6 +7616,7 @@ exports[`Parse JSX > Javascript > onEvent 1`] = `
       "@type": "@builder.io/mitosis/node",
       "bindings": {
         "ref": {
+          "bindingType": "expression",
           "code": "elem",
           "type": "single",
         },
@@ -7525,6 +7761,7 @@ exports[`Parse JSX > Javascript > onInit 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "_text": {
+              "bindingType": "expression",
               "code": "state.name",
               "type": "single",
             },
@@ -7873,6 +8110,7 @@ exports[`Parse JSX > Javascript > preserveTyping 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "_text": {
+              "bindingType": "expression",
               "code": "props.name",
               "type": "single",
             },
@@ -7921,6 +8159,7 @@ exports[`Parse JSX > Javascript > propsDestructure 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "_text": {
+              "bindingType": "expression",
               "code": "props.children",
               "type": "single",
             },
@@ -7935,6 +8174,7 @@ exports[`Parse JSX > Javascript > propsDestructure 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "_text": {
+              "bindingType": "expression",
               "code": "props.type",
               "type": "single",
             },
@@ -8013,6 +8253,7 @@ exports[`Parse JSX > Javascript > propsInterface 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "_text": {
+              "bindingType": "expression",
               "code": "props.name",
               "type": "single",
             },
@@ -8072,6 +8313,7 @@ exports[`Parse JSX > Javascript > propsType 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "_text": {
+              "bindingType": "expression",
               "code": "props.name",
               "type": "single",
             },
@@ -8174,6 +8416,7 @@ exports[`Parse JSX > Javascript > renderBlock 1`] = `
       "@type": "@builder.io/mitosis/node",
       "bindings": {
         "when": {
+          "bindingType": "expression",
           "code": "state.shouldWrap",
           "type": "single",
         },
@@ -8183,6 +8426,7 @@ exports[`Parse JSX > Javascript > renderBlock 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "when": {
+              "bindingType": "expression",
               "code": "isEmptyHtmlElement(state.tag)",
               "type": "single",
             },
@@ -8218,6 +8462,7 @@ exports[`Parse JSX > Javascript > renderBlock 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "when": {
+              "bindingType": "expression",
               "code": "!isEmptyHtmlElement(state.tag) && state.repeatItemData",
               "type": "single",
             },
@@ -8227,6 +8472,7 @@ exports[`Parse JSX > Javascript > renderBlock 1`] = `
               "@type": "@builder.io/mitosis/node",
               "bindings": {
                 "each": {
+                  "bindingType": "expression",
                   "code": "state.repeatItemData",
                   "type": "single",
                 },
@@ -8236,14 +8482,17 @@ exports[`Parse JSX > Javascript > renderBlock 1`] = `
                   "@type": "@builder.io/mitosis/node",
                   "bindings": {
                     "block": {
+                      "bindingType": "expression",
                       "code": "data.block",
                       "type": "single",
                     },
                     "key": {
+                      "bindingType": "expression",
                       "code": "index",
                       "type": "single",
                     },
                     "repeatContext": {
+                      "bindingType": "expression",
                       "code": "data.context",
                       "type": "single",
                     },
@@ -8273,6 +8522,7 @@ exports[`Parse JSX > Javascript > renderBlock 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "when": {
+              "bindingType": "expression",
               "code": "!isEmptyHtmlElement(state.tag) && !state.repeatItemData",
               "type": "single",
             },
@@ -8312,6 +8562,7 @@ exports[`Parse JSX > Javascript > renderBlock 1`] = `
                   "@type": "@builder.io/mitosis/node",
                   "bindings": {
                     "each": {
+                      "bindingType": "expression",
                       "code": "state.childrenWithoutParentComponent",
                       "type": "single",
                     },
@@ -8321,14 +8572,17 @@ exports[`Parse JSX > Javascript > renderBlock 1`] = `
                       "@type": "@builder.io/mitosis/node",
                       "bindings": {
                         "block": {
+                          "bindingType": "expression",
                           "code": "child",
                           "type": "single",
                         },
                         "context": {
+                          "bindingType": "expression",
                           "code": "state.childrenContext",
                           "type": "single",
                         },
                         "key": {
+                          "bindingType": "expression",
                           "code": "'render-block-' + child.id",
                           "type": "single",
                         },
@@ -8351,6 +8605,7 @@ exports[`Parse JSX > Javascript > renderBlock 1`] = `
                   "@type": "@builder.io/mitosis/node",
                   "bindings": {
                     "each": {
+                      "bindingType": "expression",
                       "code": "state.childrenWithoutParentComponent",
                       "type": "single",
                     },
@@ -8360,14 +8615,17 @@ exports[`Parse JSX > Javascript > renderBlock 1`] = `
                       "@type": "@builder.io/mitosis/node",
                       "bindings": {
                         "block": {
+                          "bindingType": "expression",
                           "code": "child",
                           "type": "single",
                         },
                         "context": {
+                          "bindingType": "expression",
                           "code": "state.childrenContext",
                           "type": "single",
                         },
                         "key": {
+                          "bindingType": "expression",
                           "code": "'block-style-' + child.id",
                           "type": "single",
                         },
@@ -8752,6 +9010,7 @@ exports[`Parse JSX > Javascript > renderContentExample 1`] = `
       "@type": "@builder.io/mitosis/node",
       "bindings": {
         "css": {
+          "bindingType": "expression",
           "code": "{
   display: 'flex',
   flexDirection: 'columns'
@@ -8759,6 +9018,7 @@ exports[`Parse JSX > Javascript > renderContentExample 1`] = `
           "type": "single",
         },
         "onClick": {
+          "bindingType": "function",
           "code": "trackClick(props.content.id)",
           "type": "single",
         },
@@ -8768,6 +9028,7 @@ exports[`Parse JSX > Javascript > renderContentExample 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "blocks": {
+              "bindingType": "expression",
               "code": "props.content.blocks",
               "type": "single",
             },
@@ -8869,6 +9130,7 @@ exports[`Parse JSX > Javascript > rootFragmentMultiNode 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "when": {
+              "bindingType": "expression",
               "code": "props.link",
               "type": "single",
             },
@@ -8878,6 +9140,7 @@ exports[`Parse JSX > Javascript > rootFragmentMultiNode 1`] = `
               "@type": "@builder.io/mitosis/node",
               "bindings": {
                 "href": {
+                  "bindingType": "expression",
                   "code": "props.link",
                   "type": "single",
                 },
@@ -8887,6 +9150,7 @@ exports[`Parse JSX > Javascript > rootFragmentMultiNode 1`] = `
                   "type": "spread",
                 },
                 "target": {
+                  "bindingType": "expression",
                   "code": "props.openLinkInNewTab ? '_blank' : undefined",
                   "type": "single",
                 },
@@ -8896,6 +9160,7 @@ exports[`Parse JSX > Javascript > rootFragmentMultiNode 1`] = `
                   "@type": "@builder.io/mitosis/node",
                   "bindings": {
                     "_text": {
+                      "bindingType": "expression",
                       "code": "props.text",
                       "type": "single",
                     },
@@ -8922,6 +9187,7 @@ exports[`Parse JSX > Javascript > rootFragmentMultiNode 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "when": {
+              "bindingType": "expression",
               "code": "!props.link",
               "type": "single",
             },
@@ -8941,6 +9207,7 @@ exports[`Parse JSX > Javascript > rootFragmentMultiNode 1`] = `
                   "@type": "@builder.io/mitosis/node",
                   "bindings": {
                     "_text": {
+                      "bindingType": "expression",
                       "code": "props.text",
                       "type": "single",
                     },
@@ -8999,6 +9266,7 @@ exports[`Parse JSX > Javascript > rootShow 1`] = `
       "@type": "@builder.io/mitosis/node",
       "bindings": {
         "when": {
+          "bindingType": "expression",
           "code": "props.foo === 'bar'",
           "type": "single",
         },
@@ -9085,6 +9353,7 @@ exports[`Parse JSX > Javascript > self-referencing component 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "_text": {
+              "bindingType": "expression",
               "code": "props.name",
               "type": "single",
             },
@@ -9099,6 +9368,7 @@ exports[`Parse JSX > Javascript > self-referencing component 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "when": {
+              "bindingType": "expression",
               "code": "props.name === 'Batman'",
               "type": "single",
             },
@@ -9159,6 +9429,7 @@ exports[`Parse JSX > Javascript > self-referencing component with children 1`] =
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "_text": {
+              "bindingType": "expression",
               "code": "props.name",
               "type": "single",
             },
@@ -9173,6 +9444,7 @@ exports[`Parse JSX > Javascript > self-referencing component with children 1`] =
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "_text": {
+              "bindingType": "expression",
               "code": "props.children",
               "type": "single",
             },
@@ -9187,6 +9459,7 @@ exports[`Parse JSX > Javascript > self-referencing component with children 1`] =
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "when": {
+              "bindingType": "expression",
               "code": "props.name === 'Batman'",
               "type": "single",
             },
@@ -9269,6 +9542,7 @@ exports[`Parse JSX > Javascript > showExpressions 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "when": {
+              "bindingType": "expression",
               "code": "props.conditionA",
               "type": "single",
             },
@@ -9307,6 +9581,7 @@ exports[`Parse JSX > Javascript > showExpressions 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "when": {
+              "bindingType": "expression",
               "code": "props.conditionA",
               "type": "single",
             },
@@ -9335,6 +9610,7 @@ exports[`Parse JSX > Javascript > showExpressions 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "when": {
+              "bindingType": "expression",
               "code": "props.conditionA",
               "type": "single",
             },
@@ -9361,6 +9637,7 @@ exports[`Parse JSX > Javascript > showExpressions 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "when": {
+              "bindingType": "expression",
               "code": "props.conditionA",
               "type": "single",
             },
@@ -9383,6 +9660,7 @@ exports[`Parse JSX > Javascript > showExpressions 1`] = `
               "@type": "@builder.io/mitosis/node",
               "bindings": {
                 "_text": {
+                  "bindingType": "expression",
                   "code": "undefined",
                   "type": "single",
                 },
@@ -9402,6 +9680,7 @@ exports[`Parse JSX > Javascript > showExpressions 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "when": {
+              "bindingType": "expression",
               "code": "props.conditionA",
               "type": "single",
             },
@@ -9411,6 +9690,7 @@ exports[`Parse JSX > Javascript > showExpressions 1`] = `
               "@type": "@builder.io/mitosis/node",
               "bindings": {
                 "_text": {
+                  "bindingType": "expression",
                   "code": "undefined",
                   "type": "single",
                 },
@@ -9443,6 +9723,7 @@ exports[`Parse JSX > Javascript > showExpressions 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "when": {
+              "bindingType": "expression",
               "code": "props.conditionA",
               "type": "single",
             },
@@ -9471,6 +9752,7 @@ exports[`Parse JSX > Javascript > showExpressions 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "when": {
+              "bindingType": "expression",
               "code": "props.conditionA",
               "type": "single",
             },
@@ -9497,6 +9779,7 @@ exports[`Parse JSX > Javascript > showExpressions 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "when": {
+              "bindingType": "expression",
               "code": "props.conditionA",
               "type": "single",
             },
@@ -9525,6 +9808,7 @@ exports[`Parse JSX > Javascript > showExpressions 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "when": {
+              "bindingType": "expression",
               "code": "props.conditionA",
               "type": "single",
             },
@@ -9551,6 +9835,7 @@ exports[`Parse JSX > Javascript > showExpressions 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "when": {
+              "bindingType": "expression",
               "code": "props.conditionA",
               "type": "single",
             },
@@ -9589,6 +9874,7 @@ exports[`Parse JSX > Javascript > showExpressions 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "when": {
+              "bindingType": "expression",
               "code": "props.conditionA",
               "type": "single",
             },
@@ -9627,6 +9913,7 @@ exports[`Parse JSX > Javascript > showExpressions 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "when": {
+              "bindingType": "expression",
               "code": "props.conditionA",
               "type": "single",
             },
@@ -9665,6 +9952,7 @@ exports[`Parse JSX > Javascript > showExpressions 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "when": {
+              "bindingType": "expression",
               "code": "props.conditionA",
               "type": "single",
             },
@@ -9703,6 +9991,7 @@ exports[`Parse JSX > Javascript > showExpressions 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "when": {
+              "bindingType": "expression",
               "code": "props.conditionA === 'Default'",
               "type": "single",
             },
@@ -9725,6 +10014,7 @@ exports[`Parse JSX > Javascript > showExpressions 1`] = `
               "@type": "@builder.io/mitosis/node",
               "bindings": {
                 "when": {
+                  "bindingType": "expression",
                   "code": "props.conditionB === 'Complete'",
                   "type": "single",
                 },
@@ -9768,6 +10058,7 @@ exports[`Parse JSX > Javascript > showExpressions 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "when": {
+              "bindingType": "expression",
               "code": "props.conditionA === 'Default'",
               "type": "single",
             },
@@ -9777,6 +10068,7 @@ exports[`Parse JSX > Javascript > showExpressions 1`] = `
               "@type": "@builder.io/mitosis/node",
               "bindings": {
                 "when": {
+                  "bindingType": "expression",
                   "code": "props.conditionB === 'Complete'",
                   "type": "single",
                 },
@@ -9833,6 +10125,7 @@ exports[`Parse JSX > Javascript > showExpressions 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "when": {
+              "bindingType": "expression",
               "code": "props.conditionA === 'Default'",
               "type": "single",
             },
@@ -9842,6 +10135,7 @@ exports[`Parse JSX > Javascript > showExpressions 1`] = `
               "@type": "@builder.io/mitosis/node",
               "bindings": {
                 "when": {
+                  "bindingType": "expression",
                   "code": "props.conditionB === 'Complete'",
                   "type": "single",
                 },
@@ -9892,6 +10186,7 @@ exports[`Parse JSX > Javascript > showExpressions 1`] = `
               "@type": "@builder.io/mitosis/node",
               "bindings": {
                 "when": {
+                  "bindingType": "expression",
                   "code": "props.conditionC === 'Complete'",
                   "type": "single",
                 },
@@ -9975,6 +10270,7 @@ exports[`Parse JSX > Javascript > showWithFor 1`] = `
       "@type": "@builder.io/mitosis/node",
       "bindings": {
         "when": {
+          "bindingType": "expression",
           "code": "props.conditionA",
           "type": "single",
         },
@@ -9984,6 +10280,7 @@ exports[`Parse JSX > Javascript > showWithFor 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "each": {
+              "bindingType": "expression",
               "code": "props.items",
               "type": "single",
             },
@@ -9993,6 +10290,7 @@ exports[`Parse JSX > Javascript > showWithFor 1`] = `
               "@type": "@builder.io/mitosis/node",
               "bindings": {
                 "key": {
+                  "bindingType": "expression",
                   "code": "idx",
                   "type": "single",
                 },
@@ -10002,6 +10300,7 @@ exports[`Parse JSX > Javascript > showWithFor 1`] = `
                   "@type": "@builder.io/mitosis/node",
                   "bindings": {
                     "_text": {
+                      "bindingType": "expression",
                       "code": "item",
                       "type": "single",
                     },
@@ -10087,6 +10386,7 @@ exports[`Parse JSX > Javascript > showWithOtherValues 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "when": {
+              "bindingType": "expression",
               "code": "props.conditionA",
               "type": "single",
             },
@@ -10115,6 +10415,7 @@ exports[`Parse JSX > Javascript > showWithOtherValues 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "when": {
+              "bindingType": "expression",
               "code": "props.conditionA",
               "type": "single",
             },
@@ -10139,6 +10440,7 @@ exports[`Parse JSX > Javascript > showWithOtherValues 1`] = `
               "@type": "@builder.io/mitosis/node",
               "bindings": {
                 "_text": {
+                  "bindingType": "expression",
                   "code": "undefined",
                   "type": "single",
                 },
@@ -10158,6 +10460,7 @@ exports[`Parse JSX > Javascript > showWithOtherValues 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "when": {
+              "bindingType": "expression",
               "code": "props.conditionA",
               "type": "single",
             },
@@ -10186,6 +10489,7 @@ exports[`Parse JSX > Javascript > showWithOtherValues 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "when": {
+              "bindingType": "expression",
               "code": "props.conditionA",
               "type": "single",
             },
@@ -10214,6 +10518,7 @@ exports[`Parse JSX > Javascript > showWithOtherValues 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "when": {
+              "bindingType": "expression",
               "code": "props.conditionA",
               "type": "single",
             },
@@ -10254,6 +10559,7 @@ exports[`Parse JSX > Javascript > showWithOtherValues 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "when": {
+              "bindingType": "expression",
               "code": "props.conditionA",
               "type": "single",
             },
@@ -10324,6 +10630,7 @@ exports[`Parse JSX > Javascript > showWithRootText 1`] = `
       "@type": "@builder.io/mitosis/node",
       "bindings": {
         "when": {
+          "bindingType": "expression",
           "code": "props.conditionA",
           "type": "single",
         },
@@ -10398,6 +10705,7 @@ exports[`Parse JSX > Javascript > signalsOnUpdate 1`] = `
       "@type": "@builder.io/mitosis/node",
       "bindings": {
         "css": {
+          "bindingType": "expression",
           "code": "{
   padding: '10px'
 }",
@@ -10409,6 +10717,7 @@ exports[`Parse JSX > Javascript > signalsOnUpdate 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "_text": {
+              "bindingType": "expression",
               "code": "props.id",
               "type": "single",
             },
@@ -10423,6 +10732,7 @@ exports[`Parse JSX > Javascript > signalsOnUpdate 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "_text": {
+              "bindingType": "expression",
               "code": "props.foo.value.bar.baz",
               "type": "single",
             },
@@ -10649,6 +10959,7 @@ exports[`Parse JSX > Javascript > string-literal-store 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "_text": {
+              "bindingType": "expression",
               "code": "state.foo",
               "type": "single",
             },
@@ -10703,6 +11014,7 @@ exports[`Parse JSX > Javascript > string-literal-store-kebab 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "_text": {
+              "bindingType": "expression",
               "code": "state['foo-bar']",
               "type": "single",
             },
@@ -10753,6 +11065,7 @@ exports[`Parse JSX > Javascript > styleClassAndCss 1`] = `
       "@type": "@builder.io/mitosis/node",
       "bindings": {
         "css": {
+          "bindingType": "expression",
           "code": "{
   display: 'flex',
   flexDirection: 'column',
@@ -10761,6 +11074,7 @@ exports[`Parse JSX > Javascript > styleClassAndCss 1`] = `
           "type": "single",
         },
         "style": {
+          "bindingType": "expression",
           "code": "{
   width: '100%'
 }",
@@ -10803,6 +11117,7 @@ exports[`Parse JSX > Javascript > stylePropClassAndCss 1`] = `
       "@type": "@builder.io/mitosis/node",
       "bindings": {
         "css": {
+          "bindingType": "expression",
           "code": "{
   display: 'flex',
   flexDirection: 'column',
@@ -10811,6 +11126,7 @@ exports[`Parse JSX > Javascript > stylePropClassAndCss 1`] = `
           "type": "single",
         },
         "style": {
+          "bindingType": "expression",
           "code": "props.attributes.style",
           "type": "single",
         },
@@ -10908,14 +11224,17 @@ exports[`Parse JSX > Javascript > svgComponent 1`] = `
       "@type": "@builder.io/mitosis/node",
       "bindings": {
         "height": {
+          "bindingType": "expression",
           "code": "42",
           "type": "single",
         },
         "viewBox": {
+          "bindingType": "expression",
           "code": "'0 0 ' + 42 + ' ' + 42",
           "type": "single",
         },
         "width": {
+          "bindingType": "expression",
           "code": "42",
           "type": "single",
         },
@@ -10957,6 +11276,7 @@ exports[`Parse JSX > Javascript > svgComponent 1`] = `
                   "@type": "@builder.io/mitosis/node",
                   "bindings": {
                     "stdDeviation": {
+                      "bindingType": "expression",
                       "code": "7",
                       "type": "single",
                     },
@@ -11025,6 +11345,7 @@ exports[`Parse JSX > Javascript > typeDependency 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "_text": {
+              "bindingType": "expression",
               "code": "props.foo",
               "type": "single",
             },
@@ -11084,6 +11405,7 @@ exports[`Parse JSX > Javascript > typeExternalStore 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "_text": {
+              "bindingType": "expression",
               "code": "state._name",
               "type": "single",
             },
@@ -11160,6 +11482,7 @@ exports[`Parse JSX > Javascript > typeGetterStore 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "_text": {
+              "bindingType": "expression",
               "code": "state.name",
               "type": "single",
             },
@@ -11292,6 +11615,7 @@ exports[`Parse JSX > Javascript > use-style-and-css 1`] = `
       "@type": "@builder.io/mitosis/node",
       "bindings": {
         "css": {
+          "bindingType": "expression",
           "code": "{
   background: 'blue',
   color: 'white'
@@ -11414,6 +11738,7 @@ exports[`Parse JSX > Javascript > useTarget 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "_text": {
+              "bindingType": "expression",
               "code": "state.name",
               "type": "single",
             },
@@ -11700,6 +12025,7 @@ exports[`Parse JSX > Remove Internal mitosis package 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "_text": {
+              "bindingType": "expression",
               "code": "state.name",
               "type": "single",
             },
@@ -11765,6 +12091,7 @@ exports[`Parse JSX > Typescript > Advanced 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "each": {
+              "bindingType": "expression",
               "code": "state.names",
               "type": "single",
             },
@@ -11778,6 +12105,7 @@ exports[`Parse JSX > Typescript > Advanced 1`] = `
                   "@type": "@builder.io/mitosis/node",
                   "bindings": {
                     "_text": {
+                      "bindingType": "expression",
                       "code": "i",
                       "type": "single",
                     },
@@ -11803,6 +12131,7 @@ exports[`Parse JSX > Typescript > Advanced 1`] = `
                   "@type": "@builder.io/mitosis/node",
                   "bindings": {
                     "_text": {
+                      "bindingType": "expression",
                       "code": "person",
                       "type": "single",
                     },
@@ -11832,6 +12161,7 @@ exports[`Parse JSX > Typescript > Advanced 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "each": {
+              "bindingType": "expression",
               "code": "state.names",
               "type": "single",
             },
@@ -11845,6 +12175,7 @@ exports[`Parse JSX > Typescript > Advanced 1`] = `
                   "@type": "@builder.io/mitosis/node",
                   "bindings": {
                     "_text": {
+                      "bindingType": "expression",
                       "code": "person",
                       "type": "single",
                     },
@@ -11873,6 +12204,7 @@ exports[`Parse JSX > Typescript > Advanced 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "each": {
+              "bindingType": "expression",
               "code": "state.names",
               "type": "single",
             },
@@ -11897,6 +12229,7 @@ exports[`Parse JSX > Typescript > Advanced 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "each": {
+              "bindingType": "expression",
               "code": "Array.from({
   length: 10
 })",
@@ -11912,6 +12245,7 @@ exports[`Parse JSX > Typescript > Advanced 1`] = `
                   "@type": "@builder.io/mitosis/node",
                   "bindings": {
                     "_text": {
+                      "bindingType": "expression",
                       "code": "ee",
                       "type": "single",
                     },
@@ -11941,6 +12275,7 @@ exports[`Parse JSX > Typescript > Advanced 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "each": {
+              "bindingType": "expression",
               "code": "Array.from({
   length: 10
 })",
@@ -11956,6 +12291,7 @@ exports[`Parse JSX > Typescript > Advanced 1`] = `
                   "@type": "@builder.io/mitosis/node",
                   "bindings": {
                     "_text": {
+                      "bindingType": "expression",
                       "code": "index",
                       "type": "single",
                     },
@@ -11982,6 +12318,7 @@ exports[`Parse JSX > Typescript > Advanced 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "each": {
+              "bindingType": "expression",
               "code": "state.names",
               "type": "single",
             },
@@ -11995,6 +12332,7 @@ exports[`Parse JSX > Typescript > Advanced 1`] = `
                   "@type": "@builder.io/mitosis/node",
                   "bindings": {
                     "_text": {
+                      "bindingType": "expression",
                       "code": "person",
                       "type": "single",
                     },
@@ -12009,6 +12347,7 @@ exports[`Parse JSX > Typescript > Advanced 1`] = `
                   "@type": "@builder.io/mitosis/node",
                   "bindings": {
                     "_text": {
+                      "bindingType": "expression",
                       "code": "index",
                       "type": "single",
                     },
@@ -12038,6 +12377,7 @@ exports[`Parse JSX > Typescript > Advanced 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "each": {
+              "bindingType": "expression",
               "code": "Array.from({
   length: 10
 })",
@@ -12053,6 +12393,7 @@ exports[`Parse JSX > Typescript > Advanced 1`] = `
                   "@type": "@builder.io/mitosis/node",
                   "bindings": {
                     "_text": {
+                      "bindingType": "expression",
                       "code": "person",
                       "type": "single",
                     },
@@ -12067,6 +12408,7 @@ exports[`Parse JSX > Typescript > Advanced 1`] = `
                   "@type": "@builder.io/mitosis/node",
                   "bindings": {
                     "_text": {
+                      "bindingType": "expression",
                       "code": "count",
                       "type": "single",
                     },
@@ -12096,6 +12438,7 @@ exports[`Parse JSX > Typescript > Advanced 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "each": {
+              "bindingType": "expression",
               "code": "state.names",
               "type": "single",
             },
@@ -12109,6 +12452,7 @@ exports[`Parse JSX > Typescript > Advanced 1`] = `
                   "@type": "@builder.io/mitosis/node",
                   "bindings": {
                     "_text": {
+                      "bindingType": "expression",
                       "code": "person",
                       "type": "single",
                     },
@@ -12123,6 +12467,7 @@ exports[`Parse JSX > Typescript > Advanced 1`] = `
                   "@type": "@builder.io/mitosis/node",
                   "bindings": {
                     "_text": {
+                      "bindingType": "expression",
                       "code": "i",
                       "type": "single",
                     },
@@ -12152,6 +12497,7 @@ exports[`Parse JSX > Typescript > Advanced 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "each": {
+              "bindingType": "expression",
               "code": "Array.from({
   length: 10
 })",
@@ -12167,6 +12513,7 @@ exports[`Parse JSX > Typescript > Advanced 1`] = `
                   "@type": "@builder.io/mitosis/node",
                   "bindings": {
                     "_text": {
+                      "bindingType": "expression",
                       "code": "person",
                       "type": "single",
                     },
@@ -12181,6 +12528,7 @@ exports[`Parse JSX > Typescript > Advanced 1`] = `
                   "@type": "@builder.io/mitosis/node",
                   "bindings": {
                     "_text": {
+                      "bindingType": "expression",
                       "code": "index",
                       "type": "single",
                     },
@@ -12255,6 +12603,7 @@ exports[`Parse JSX > Typescript > AdvancedRef 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "when": {
+              "bindingType": "expression",
               "code": "props.showInput",
               "type": "single",
             },
@@ -12268,6 +12617,7 @@ exports[`Parse JSX > Typescript > AdvancedRef 1`] = `
                   "@type": "@builder.io/mitosis/node",
                   "bindings": {
                     "css": {
+                      "bindingType": "expression",
                       "code": "{
   color: 'red'
 }",
@@ -12277,6 +12627,7 @@ exports[`Parse JSX > Typescript > AdvancedRef 1`] = `
                       "arguments": [
                         "event",
                       ],
+                      "bindingType": "function",
                       "code": "state.onBlur()",
                       "type": "single",
                     },
@@ -12284,14 +12635,17 @@ exports[`Parse JSX > Typescript > AdvancedRef 1`] = `
                       "arguments": [
                         "event",
                       ],
+                      "bindingType": "function",
                       "code": "state.name = event.target.value",
                       "type": "single",
                     },
                     "ref": {
+                      "bindingType": "expression",
                       "code": "inputRef",
                       "type": "single",
                     },
                     "value": {
+                      "bindingType": "expression",
                       "code": "state.name",
                       "type": "single",
                     },
@@ -12306,6 +12660,7 @@ exports[`Parse JSX > Typescript > AdvancedRef 1`] = `
                   "@type": "@builder.io/mitosis/node",
                   "bindings": {
                     "ref": {
+                      "bindingType": "expression",
                       "code": "inputNoArgRef",
                       "type": "single",
                     },
@@ -12420,6 +12775,7 @@ exports[`Parse JSX > Typescript > AdvancedRef 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "_text": {
+              "bindingType": "expression",
               "code": "state.lowerCaseName()",
               "type": "single",
             },
@@ -12516,6 +12872,7 @@ exports[`Parse JSX > Typescript > Basic 1`] = `
       "@type": "@builder.io/mitosis/node",
       "bindings": {
         "css": {
+          "bindingType": "expression",
           "code": "{
   padding: '10px'
 }",
@@ -12530,10 +12887,12 @@ exports[`Parse JSX > Typescript > Basic 1`] = `
               "arguments": [
                 "myEvent",
               ],
+              "bindingType": "function",
               "code": "state.name = myEvent.target.value",
               "type": "single",
             },
             "value": {
+              "bindingType": "expression",
               "code": "DEFAULT_VALUES.name || state.name",
               "type": "single",
             },
@@ -12635,6 +12994,7 @@ exports[`Parse JSX > Typescript > Basic 2`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "each": {
+              "bindingType": "expression",
               "code": "state.names",
               "type": "single",
             },
@@ -12644,6 +13004,7 @@ exports[`Parse JSX > Typescript > Basic 2`] = `
               "@type": "@builder.io/mitosis/node",
               "bindings": {
                 "when": {
+                  "bindingType": "expression",
                   "code": "person === state.name",
                   "type": "single",
                 },
@@ -12656,12 +13017,14 @@ exports[`Parse JSX > Typescript > Basic 2`] = `
                       "arguments": [
                         "event",
                       ],
+                      "bindingType": "function",
                       "code": "{
   state.name = event.target.value + ' and ' + person;
 }",
                       "type": "single",
                     },
                     "value": {
+                      "bindingType": "expression",
                       "code": "state.name",
                       "type": "single",
                     },
@@ -12688,6 +13051,7 @@ exports[`Parse JSX > Typescript > Basic 2`] = `
                   "@type": "@builder.io/mitosis/node",
                   "bindings": {
                     "_text": {
+                      "bindingType": "expression",
                       "code": "person",
                       "type": "single",
                     },
@@ -12773,6 +13137,7 @@ exports[`Parse JSX > Typescript > Basic Context 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "_text": {
+              "bindingType": "expression",
               "code": "myService.method('hello') + state.name",
               "type": "single",
             },
@@ -12800,6 +13165,7 @@ exports[`Parse JSX > Typescript > Basic Context 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "onChange": {
+              "bindingType": "expression",
               "code": "state.onChange",
               "type": "single",
             },
@@ -12902,6 +13268,7 @@ exports[`Parse JSX > Typescript > Basic OnMount Update 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "_text": {
+              "bindingType": "expression",
               "code": "state.name",
               "type": "single",
             },
@@ -13072,6 +13439,7 @@ exports[`Parse JSX > Typescript > BasicAttribute 1`] = `
       "@type": "@builder.io/mitosis/node",
       "bindings": {
         "spellcheck": {
+          "bindingType": "expression",
           "code": "true",
           "type": "single",
         },
@@ -13117,6 +13485,7 @@ exports[`Parse JSX > Typescript > BasicBooleanAttribute 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "when": {
+              "bindingType": "expression",
               "code": "props.children",
               "type": "single",
             },
@@ -13126,6 +13495,7 @@ exports[`Parse JSX > Typescript > BasicBooleanAttribute 1`] = `
               "@type": "@builder.io/mitosis/node",
               "bindings": {
                 "_text": {
+                  "bindingType": "expression",
                   "code": "props.children",
                   "type": "single",
                 },
@@ -13140,6 +13510,7 @@ exports[`Parse JSX > Typescript > BasicBooleanAttribute 1`] = `
               "@type": "@builder.io/mitosis/node",
               "bindings": {
                 "_text": {
+                  "bindingType": "expression",
                   "code": "props.type",
                   "type": "single",
                 },
@@ -13160,6 +13531,7 @@ exports[`Parse JSX > Typescript > BasicBooleanAttribute 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "toggle": {
+              "bindingType": "expression",
               "code": "true",
               "type": "single",
             },
@@ -13174,6 +13546,7 @@ exports[`Parse JSX > Typescript > BasicBooleanAttribute 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "toggle": {
+              "bindingType": "expression",
               "code": "true",
               "type": "single",
             },
@@ -13188,6 +13561,7 @@ exports[`Parse JSX > Typescript > BasicBooleanAttribute 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "list": {
+              "bindingType": "expression",
               "code": "null",
               "type": "single",
             },
@@ -13251,6 +13625,7 @@ exports[`Parse JSX > Typescript > BasicChildComponent 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "id": {
+              "bindingType": "expression",
               "code": "state.dev",
               "type": "single",
             },
@@ -13269,10 +13644,12 @@ exports[`Parse JSX > Typescript > BasicChildComponent 1`] = `
               "@type": "@builder.io/mitosis/node",
               "bindings": {
                 "bye": {
+                  "bindingType": "expression",
                   "code": "state.dev",
                   "type": "single",
                 },
                 "hi": {
+                  "bindingType": "expression",
                   "code": "state.name",
                   "type": "single",
                 },
@@ -13353,6 +13730,7 @@ exports[`Parse JSX > Typescript > BasicFor 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "each": {
+              "bindingType": "expression",
               "code": "state.names",
               "type": "single",
             },
@@ -13369,12 +13747,14 @@ exports[`Parse JSX > Typescript > BasicFor 1`] = `
                       "arguments": [
                         "event",
                       ],
+                      "bindingType": "function",
                       "code": "{
   state.name = event.target.value + ' and ' + person;
 }",
                       "type": "single",
                     },
                     "value": {
+                      "bindingType": "expression",
                       "code": "state.name",
                       "type": "single",
                     },
@@ -13401,6 +13781,7 @@ exports[`Parse JSX > Typescript > BasicFor 1`] = `
                   "@type": "@builder.io/mitosis/node",
                   "bindings": {
                     "_text": {
+                      "bindingType": "expression",
                       "code": "person",
                       "type": "single",
                     },
@@ -13491,6 +13872,7 @@ exports[`Parse JSX > Typescript > BasicRef 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "when": {
+              "bindingType": "expression",
               "code": "props.showInput",
               "type": "single",
             },
@@ -13504,6 +13886,7 @@ exports[`Parse JSX > Typescript > BasicRef 1`] = `
                   "@type": "@builder.io/mitosis/node",
                   "bindings": {
                     "css": {
+                      "bindingType": "expression",
                       "code": "{
   color: 'red'
 }",
@@ -13513,6 +13896,7 @@ exports[`Parse JSX > Typescript > BasicRef 1`] = `
                       "arguments": [
                         "event",
                       ],
+                      "bindingType": "function",
                       "code": "state.onBlur()",
                       "type": "single",
                     },
@@ -13520,14 +13904,17 @@ exports[`Parse JSX > Typescript > BasicRef 1`] = `
                       "arguments": [
                         "event",
                       ],
+                      "bindingType": "function",
                       "code": "state.name = event.target.value",
                       "type": "single",
                     },
                     "ref": {
+                      "bindingType": "expression",
                       "code": "inputRef",
                       "type": "single",
                     },
                     "value": {
+                      "bindingType": "expression",
                       "code": "state.name",
                       "type": "single",
                     },
@@ -13542,6 +13929,7 @@ exports[`Parse JSX > Typescript > BasicRef 1`] = `
                   "@type": "@builder.io/mitosis/node",
                   "bindings": {
                     "ref": {
+                      "bindingType": "expression",
                       "code": "inputNoArgRef",
                       "type": "single",
                     },
@@ -13656,6 +14044,7 @@ exports[`Parse JSX > Typescript > BasicRef 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "_text": {
+              "bindingType": "expression",
               "code": "state.lowerCaseName()",
               "type": "single",
             },
@@ -13753,7 +14142,9 @@ exports[`Parse JSX > Typescript > BasicRefAssignment 1`] = `
               "arguments": [
                 "evt",
               ],
-              "code": "state.handlerClick(evt)",
+              "async": true,
+              "bindingType": "function",
+              "code": "await state.handlerClick(evt)",
               "type": "single",
             },
           },
@@ -13848,6 +14239,7 @@ exports[`Parse JSX > Typescript > BasicRefPrevious 1`] = `
               "@type": "@builder.io/mitosis/node",
               "bindings": {
                 "_text": {
+                  "bindingType": "expression",
                   "code": "state.count",
                   "type": "single",
                 },
@@ -13873,6 +14265,7 @@ exports[`Parse JSX > Typescript > BasicRefPrevious 1`] = `
               "@type": "@builder.io/mitosis/node",
               "bindings": {
                 "_text": {
+                  "bindingType": "expression",
                   "code": "prevCount",
                   "type": "single",
                 },
@@ -13893,6 +14286,7 @@ exports[`Parse JSX > Typescript > BasicRefPrevious 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "onClick": {
+              "bindingType": "function",
               "code": "state.count += 1",
               "type": "single",
             },
@@ -13992,6 +14386,7 @@ exports[`Parse JSX > Typescript > Button 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "when": {
+              "bindingType": "expression",
               "code": "props.link",
               "type": "single",
             },
@@ -14001,6 +14396,7 @@ exports[`Parse JSX > Typescript > Button 1`] = `
               "@type": "@builder.io/mitosis/node",
               "bindings": {
                 "href": {
+                  "bindingType": "expression",
                   "code": "props.link",
                   "type": "single",
                 },
@@ -14010,6 +14406,7 @@ exports[`Parse JSX > Typescript > Button 1`] = `
                   "type": "spread",
                 },
                 "target": {
+                  "bindingType": "expression",
                   "code": "props.openLinkInNewTab ? '_blank' : undefined",
                   "type": "single",
                 },
@@ -14019,6 +14416,7 @@ exports[`Parse JSX > Typescript > Button 1`] = `
                   "@type": "@builder.io/mitosis/node",
                   "bindings": {
                     "_text": {
+                      "bindingType": "expression",
                       "code": "props.text",
                       "type": "single",
                     },
@@ -14045,6 +14443,7 @@ exports[`Parse JSX > Typescript > Button 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "when": {
+              "bindingType": "expression",
               "code": "!props.link",
               "type": "single",
             },
@@ -14064,6 +14463,7 @@ exports[`Parse JSX > Typescript > Button 1`] = `
                   "@type": "@builder.io/mitosis/node",
                   "bindings": {
                     "_text": {
+                      "bindingType": "expression",
                       "code": "props.text",
                       "type": "single",
                     },
@@ -14131,6 +14531,7 @@ exports[`Parse JSX > Typescript > Columns 1`] = `
       "@type": "@builder.io/mitosis/node",
       "bindings": {
         "css": {
+          "bindingType": "expression",
           "code": "{
   display: 'flex',
   flexDirection: 'column',
@@ -14151,6 +14552,7 @@ exports[`Parse JSX > Typescript > Columns 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "each": {
+              "bindingType": "expression",
               "code": "props.columns",
               "type": "single",
             },
@@ -14160,6 +14562,7 @@ exports[`Parse JSX > Typescript > Columns 1`] = `
               "@type": "@builder.io/mitosis/node",
               "bindings": {
                 "css": {
+                  "bindingType": "expression",
                   "code": "{
   flexGrow: '1'
 }",
@@ -14171,6 +14574,7 @@ exports[`Parse JSX > Typescript > Columns 1`] = `
                   "@type": "@builder.io/mitosis/node",
                   "bindings": {
                     "_text": {
+                      "bindingType": "expression",
                       "code": "column.content",
                       "type": "single",
                     },
@@ -14185,6 +14589,7 @@ exports[`Parse JSX > Typescript > Columns 1`] = `
                   "@type": "@builder.io/mitosis/node",
                   "bindings": {
                     "_text": {
+                      "bindingType": "expression",
                       "code": "index",
                       "type": "single",
                     },
@@ -14298,6 +14703,7 @@ exports[`Parse JSX > Typescript > ContentSlotHtml 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "name": {
+              "bindingType": "expression",
               "code": "props.slotTesting",
               "type": "single",
             },
@@ -14395,6 +14801,7 @@ exports[`Parse JSX > Typescript > ContentSlotJSX 1`] = `
       "@type": "@builder.io/mitosis/node",
       "bindings": {
         "when": {
+          "bindingType": "expression",
           "code": "props.slotReference",
           "type": "single",
         },
@@ -14404,14 +14811,17 @@ exports[`Parse JSX > Typescript > ContentSlotJSX 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "class": {
+              "bindingType": "expression",
               "code": "state.cls",
               "type": "single",
             },
             "name": {
+              "bindingType": "expression",
               "code": "props.slotContent ? 'name1' : 'name2'",
               "type": "single",
             },
             "onClick": {
+              "bindingType": "function",
               "code": "state.show()",
               "type": "single",
             },
@@ -14421,6 +14831,7 @@ exports[`Parse JSX > Typescript > ContentSlotJSX 1`] = `
               "type": "spread",
             },
             "title": {
+              "bindingType": "expression",
               "code": "props.slotContent ? 'title1' : 'title2'",
               "type": "single",
             },
@@ -14430,6 +14841,7 @@ exports[`Parse JSX > Typescript > ContentSlotJSX 1`] = `
               "@type": "@builder.io/mitosis/node",
               "bindings": {
                 "when": {
+                  "bindingType": "expression",
                   "code": "state.showContent && props.slotContent",
                   "type": "single",
                 },
@@ -14443,6 +14855,7 @@ exports[`Parse JSX > Typescript > ContentSlotJSX 1`] = `
                       "@type": "@builder.io/mitosis/node",
                       "bindings": {
                         "_text": {
+                          "bindingType": "expression",
                           "code": "props.content",
                           "type": "single",
                         },
@@ -14494,6 +14907,7 @@ exports[`Parse JSX > Typescript > ContentSlotJSX 1`] = `
                   "@type": "@builder.io/mitosis/node",
                   "bindings": {
                     "_text": {
+                      "bindingType": "expression",
                       "code": "props.children",
                       "type": "single",
                     },
@@ -14604,14 +15018,17 @@ exports[`Parse JSX > Typescript > CustomCode 1`] = `
       "@type": "@builder.io/mitosis/node",
       "bindings": {
         "class": {
+          "bindingType": "expression",
           "code": "'builder-custom-code' + (props.replaceNodes ? ' replace-nodes' : '')",
           "type": "single",
         },
         "innerHTML": {
+          "bindingType": "expression",
           "code": "props.code",
           "type": "single",
         },
         "ref": {
+          "bindingType": "expression",
           "code": "elem",
           "type": "single",
         },
@@ -14715,14 +15132,17 @@ exports[`Parse JSX > Typescript > Embed 1`] = `
       "@type": "@builder.io/mitosis/node",
       "bindings": {
         "class": {
+          "bindingType": "expression",
           "code": "'builder-custom-code' + (props.replaceNodes ? ' replace-nodes' : '')",
           "type": "single",
         },
         "innerHTML": {
+          "bindingType": "expression",
           "code": "props.code",
           "type": "single",
         },
         "ref": {
+          "bindingType": "expression",
           "code": "elem",
           "type": "single",
         },
@@ -14826,14 +15246,17 @@ exports[`Parse JSX > Typescript > Form 1`] = `
       "@type": "@builder.io/mitosis/node",
       "bindings": {
         "action": {
+          "bindingType": "expression",
           "code": "!props.sendWithJs && props.action",
           "type": "single",
         },
         "method": {
+          "bindingType": "expression",
           "code": "props.method",
           "type": "single",
         },
         "name": {
+          "bindingType": "expression",
           "code": "props.name",
           "type": "single",
         },
@@ -14841,6 +15264,7 @@ exports[`Parse JSX > Typescript > Form 1`] = `
           "arguments": [
             "event",
           ],
+          "bindingType": "function",
           "code": "state.onSubmit(event)",
           "type": "single",
         },
@@ -14850,10 +15274,12 @@ exports[`Parse JSX > Typescript > Form 1`] = `
           "type": "spread",
         },
         "ref": {
+          "bindingType": "expression",
           "code": "formRef",
           "type": "single",
         },
         "validate": {
+          "bindingType": "expression",
           "code": "props.validate",
           "type": "single",
         },
@@ -14863,6 +15289,7 @@ exports[`Parse JSX > Typescript > Form 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "when": {
+              "bindingType": "expression",
               "code": "props.builderBlock && props.builderBlock.children",
               "type": "single",
             },
@@ -14872,6 +15299,7 @@ exports[`Parse JSX > Typescript > Form 1`] = `
               "@type": "@builder.io/mitosis/node",
               "bindings": {
                 "each": {
+                  "bindingType": "expression",
                   "code": "props.builderBlock?.children",
                   "type": "single",
                 },
@@ -14881,14 +15309,17 @@ exports[`Parse JSX > Typescript > Form 1`] = `
                   "@type": "@builder.io/mitosis/node",
                   "bindings": {
                     "block": {
+                      "bindingType": "expression",
                       "code": "block",
                       "type": "single",
                     },
                     "index": {
+                      "bindingType": "expression",
                       "code": "index",
                       "type": "single",
                     },
                     "key": {
+                      "bindingType": "expression",
                       "code": "block.id",
                       "type": "single",
                     },
@@ -14918,6 +15349,7 @@ exports[`Parse JSX > Typescript > Form 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "when": {
+              "bindingType": "expression",
               "code": "state.submissionState === 'error'",
               "type": "single",
             },
@@ -14927,6 +15359,7 @@ exports[`Parse JSX > Typescript > Form 1`] = `
               "@type": "@builder.io/mitosis/node",
               "bindings": {
                 "blocks": {
+                  "bindingType": "expression",
                   "code": "props.errorMessage!",
                   "type": "single",
                 },
@@ -14949,6 +15382,7 @@ exports[`Parse JSX > Typescript > Form 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "when": {
+              "bindingType": "expression",
               "code": "state.submissionState === 'sending'",
               "type": "single",
             },
@@ -14958,6 +15392,7 @@ exports[`Parse JSX > Typescript > Form 1`] = `
               "@type": "@builder.io/mitosis/node",
               "bindings": {
                 "blocks": {
+                  "bindingType": "expression",
                   "code": "props.sendingMessage!",
                   "type": "single",
                 },
@@ -14980,6 +15415,7 @@ exports[`Parse JSX > Typescript > Form 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "when": {
+              "bindingType": "expression",
               "code": "state.submissionState === 'error' && state.responseData",
               "type": "single",
             },
@@ -14989,6 +15425,7 @@ exports[`Parse JSX > Typescript > Form 1`] = `
               "@type": "@builder.io/mitosis/node",
               "bindings": {
                 "css": {
+                  "bindingType": "expression",
                   "code": "{
   padding: '10px',
   color: 'red',
@@ -15002,6 +15439,7 @@ exports[`Parse JSX > Typescript > Form 1`] = `
                   "@type": "@builder.io/mitosis/node",
                   "bindings": {
                     "_text": {
+                      "bindingType": "expression",
                       "code": "JSON.stringify(state.responseData, null, 2)",
                       "type": "single",
                     },
@@ -15030,6 +15468,7 @@ exports[`Parse JSX > Typescript > Form 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "when": {
+              "bindingType": "expression",
               "code": "state.submissionState === 'success'",
               "type": "single",
             },
@@ -15039,6 +15478,7 @@ exports[`Parse JSX > Typescript > Form 1`] = `
               "@type": "@builder.io/mitosis/node",
               "bindings": {
                 "blocks": {
+                  "bindingType": "expression",
                   "code": "props.successMessage!",
                   "type": "single",
                 },
@@ -15378,6 +15818,7 @@ exports[`Parse JSX > Typescript > Image 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "ref": {
+              "bindingType": "expression",
               "code": "pictureRef",
               "type": "single",
             },
@@ -15387,6 +15828,7 @@ exports[`Parse JSX > Typescript > Image 1`] = `
               "@type": "@builder.io/mitosis/node",
               "bindings": {
                 "when": {
+                  "bindingType": "expression",
                   "code": "!state.useLazyLoading() || state.load",
                   "type": "single",
                 },
@@ -15396,18 +15838,22 @@ exports[`Parse JSX > Typescript > Image 1`] = `
                   "@type": "@builder.io/mitosis/node",
                   "bindings": {
                     "alt": {
+                      "bindingType": "expression",
                       "code": "props.altText",
                       "type": "single",
                     },
                     "aria-role": {
+                      "bindingType": "expression",
                       "code": "props.altText ? 'presentation' : undefined",
                       "type": "single",
                     },
                     "class": {
+                      "bindingType": "expression",
                       "code": "'builder-image' + (props._class ? ' ' + props._class : '')",
                       "type": "single",
                     },
                     "css": {
+                      "bindingType": "expression",
                       "code": "{
   opacity: '1',
   transition: 'opacity 0.2s ease-in-out',
@@ -15417,18 +15863,22 @@ exports[`Parse JSX > Typescript > Image 1`] = `
                       "type": "single",
                     },
                     "onLoad": {
+                      "bindingType": "function",
                       "code": "state.setLoaded()",
                       "type": "single",
                     },
                     "sizes": {
+                      "bindingType": "expression",
                       "code": "props.sizes",
                       "type": "single",
                     },
                     "src": {
+                      "bindingType": "expression",
                       "code": "props.image",
                       "type": "single",
                     },
                     "srcset": {
+                      "bindingType": "expression",
                       "code": "props.srcset",
                       "type": "single",
                     },
@@ -15449,6 +15899,7 @@ exports[`Parse JSX > Typescript > Image 1`] = `
               "@type": "@builder.io/mitosis/node",
               "bindings": {
                 "srcset": {
+                  "bindingType": "expression",
                   "code": "props.srcset",
                   "type": "single",
                 },
@@ -15469,6 +15920,7 @@ exports[`Parse JSX > Typescript > Image 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "_text": {
+              "bindingType": "expression",
               "code": "props.children",
               "type": "single",
             },
@@ -15609,6 +16061,7 @@ exports[`Parse JSX > Typescript > Image State 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "each": {
+              "bindingType": "expression",
               "code": "state.images",
               "type": "single",
             },
@@ -15622,10 +16075,12 @@ exports[`Parse JSX > Typescript > Image State 1`] = `
                   "@type": "@builder.io/mitosis/node",
                   "bindings": {
                     "key": {
+                      "bindingType": "expression",
                       "code": "itemIndex",
                       "type": "single",
                     },
                     "src": {
+                      "bindingType": "expression",
                       "code": "item",
                       "type": "single",
                     },
@@ -15698,10 +16153,12 @@ exports[`Parse JSX > Typescript > Img 1`] = `
       "@type": "@builder.io/mitosis/node",
       "bindings": {
         "alt": {
+          "bindingType": "expression",
           "code": "props.altText",
           "type": "single",
         },
         "key": {
+          "bindingType": "expression",
           "code": "Builder.isEditing && props.imgSrc || 'default-key'",
           "type": "single",
         },
@@ -15711,10 +16168,12 @@ exports[`Parse JSX > Typescript > Img 1`] = `
           "type": "spread",
         },
         "src": {
+          "bindingType": "expression",
           "code": "props.imgSrc",
           "type": "single",
         },
         "style": {
+          "bindingType": "expression",
           "code": "{
   objectFit: props.backgroundSize || 'cover',
   objectPosition: props.backgroundPosition || 'center'
@@ -15774,14 +16233,17 @@ exports[`Parse JSX > Typescript > Input 1`] = `
       "@type": "@builder.io/mitosis/node",
       "bindings": {
         "defaultValue": {
+          "bindingType": "expression",
           "code": "props.defaultValue",
           "type": "single",
         },
         "key": {
+          "bindingType": "expression",
           "code": "Builder.isEditing && props.defaultValue ? props.defaultValue : 'default-key'",
           "type": "single",
         },
         "name": {
+          "bindingType": "expression",
           "code": "props.name",
           "type": "single",
         },
@@ -15789,10 +16251,12 @@ exports[`Parse JSX > Typescript > Input 1`] = `
           "arguments": [
             "event",
           ],
+          "bindingType": "function",
           "code": "props.onChange?.(event.target.value)",
           "type": "single",
         },
         "placeholder": {
+          "bindingType": "expression",
           "code": "props.placeholder",
           "type": "single",
         },
@@ -15802,14 +16266,17 @@ exports[`Parse JSX > Typescript > Input 1`] = `
           "type": "spread",
         },
         "required": {
+          "bindingType": "expression",
           "code": "props.required",
           "type": "single",
         },
         "type": {
+          "bindingType": "expression",
           "code": "props.type",
           "type": "single",
         },
         "value": {
+          "bindingType": "expression",
           "code": "props.value",
           "type": "single",
         },
@@ -15872,6 +16339,7 @@ exports[`Parse JSX > Typescript > InputParent 1`] = `
           "arguments": [
             "value",
           ],
+          "bindingType": "function",
           "code": "state.handleChange(value)",
           "type": "single",
         },
@@ -15928,10 +16396,12 @@ exports[`Parse JSX > Typescript > RawText 1`] = `
       "@type": "@builder.io/mitosis/node",
       "bindings": {
         "class": {
+          "bindingType": "expression",
           "code": "props.attributes?.class || props.attributes?.className",
           "type": "single",
         },
         "innerHTML": {
+          "bindingType": "expression",
           "code": "props.text || ''",
           "type": "single",
         },
@@ -15983,6 +16453,7 @@ exports[`Parse JSX > Typescript > Section 1`] = `
           "type": "spread",
         },
         "style": {
+          "bindingType": "expression",
           "code": "props.maxWidth && typeof props.maxWidth === 'number' ? {
   maxWidth: props.maxWidth
 } : undefined",
@@ -15994,6 +16465,7 @@ exports[`Parse JSX > Typescript > Section 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "_text": {
+              "bindingType": "expression",
               "code": "props.children",
               "type": "single",
             },
@@ -16046,6 +16518,7 @@ exports[`Parse JSX > Typescript > Section 2`] = `
       "@type": "@builder.io/mitosis/node",
       "bindings": {
         "when": {
+          "bindingType": "expression",
           "code": "state.max",
           "type": "single",
         },
@@ -16055,6 +16528,7 @@ exports[`Parse JSX > Typescript > Section 2`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "each": {
+              "bindingType": "expression",
               "code": "state.items",
               "type": "single",
             },
@@ -16069,6 +16543,7 @@ exports[`Parse JSX > Typescript > Section 2`] = `
                   "type": "spread",
                 },
                 "style": {
+                  "bindingType": "expression",
                   "code": "{
   maxWidth: item + state.max
 }",
@@ -16080,6 +16555,7 @@ exports[`Parse JSX > Typescript > Section 2`] = `
                   "@type": "@builder.io/mitosis/node",
                   "bindings": {
                     "_text": {
+                      "bindingType": "expression",
                       "code": "props.children",
                       "type": "single",
                     },
@@ -16157,14 +16633,17 @@ exports[`Parse JSX > Typescript > Select 1`] = `
       "@type": "@builder.io/mitosis/node",
       "bindings": {
         "defaultValue": {
+          "bindingType": "expression",
           "code": "props.defaultValue",
           "type": "single",
         },
         "key": {
+          "bindingType": "expression",
           "code": "Builder.isEditing && props.defaultValue ? props.defaultValue : 'default-key'",
           "type": "single",
         },
         "name": {
+          "bindingType": "expression",
           "code": "props.name",
           "type": "single",
         },
@@ -16174,6 +16653,7 @@ exports[`Parse JSX > Typescript > Select 1`] = `
           "type": "spread",
         },
         "value": {
+          "bindingType": "expression",
           "code": "props.value",
           "type": "single",
         },
@@ -16183,6 +16663,7 @@ exports[`Parse JSX > Typescript > Select 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "each": {
+              "bindingType": "expression",
               "code": "props.options",
               "type": "single",
             },
@@ -16192,10 +16673,12 @@ exports[`Parse JSX > Typescript > Select 1`] = `
               "@type": "@builder.io/mitosis/node",
               "bindings": {
                 "data-index": {
+                  "bindingType": "expression",
                   "code": "index",
                   "type": "single",
                 },
                 "value": {
+                  "bindingType": "expression",
                   "code": "option.value",
                   "type": "single",
                 },
@@ -16205,6 +16688,7 @@ exports[`Parse JSX > Typescript > Select 1`] = `
                   "@type": "@builder.io/mitosis/node",
                   "bindings": {
                     "_text": {
+                      "bindingType": "expression",
                       "code": "option.name || option.value",
                       "type": "single",
                     },
@@ -16366,6 +16850,7 @@ exports[`Parse JSX > Typescript > SlotHtml 1`] = `
               "@type": "@builder.io/mitosis/node",
               "bindings": {
                 "testing": {
+                  "bindingType": "expression",
                   "code": "<div>Hello</div>",
                   "type": "single",
                 },
@@ -16459,6 +16944,7 @@ exports[`Parse JSX > Typescript > SlotJsx 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "slotTesting": {
+              "bindingType": "expression",
               "code": "<div>Hello</div>",
               "type": "single",
             },
@@ -16648,6 +17134,7 @@ exports[`Parse JSX > Typescript > Stamped.io 1`] = `
       "@type": "@builder.io/mitosis/node",
       "bindings": {
         "data-user": {
+          "bindingType": "expression",
           "code": "state.name",
           "type": "single",
         },
@@ -16657,6 +17144,7 @@ exports[`Parse JSX > Typescript > Stamped.io 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "onClick": {
+              "bindingType": "function",
               "code": "state.showReviewPrompt = true",
               "type": "single",
             },
@@ -16683,6 +17171,7 @@ exports[`Parse JSX > Typescript > Stamped.io 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "when": {
+              "bindingType": "expression",
               "code": "state.showReviewPrompt || 'asdf'",
               "type": "single",
             },
@@ -16703,6 +17192,7 @@ exports[`Parse JSX > Typescript > Stamped.io 1`] = `
               "@type": "@builder.io/mitosis/node",
               "bindings": {
                 "css": {
+                  "bindingType": "expression",
                   "code": "{
   display: 'block'
 }",
@@ -16721,6 +17211,7 @@ exports[`Parse JSX > Typescript > Stamped.io 1`] = `
               "@type": "@builder.io/mitosis/node",
               "bindings": {
                 "css": {
+                  "bindingType": "expression",
                   "code": "{
   display: 'block'
 }",
@@ -16739,6 +17230,7 @@ exports[`Parse JSX > Typescript > Stamped.io 1`] = `
               "@type": "@builder.io/mitosis/node",
               "bindings": {
                 "css": {
+                  "bindingType": "expression",
                   "code": "{
   display: 'block'
 }",
@@ -16746,10 +17238,11 @@ exports[`Parse JSX > Typescript > Stamped.io 1`] = `
                 },
                 "onClick": {
                   "arguments": [
-                    "event",
+                    "ev",
                   ],
+                  "bindingType": "function",
                   "code": "{
-  event.preventDefault();
+  ev.preventDefault();
   state.showReviewPrompt = false;
 }",
                   "type": "single",
@@ -16785,6 +17278,7 @@ exports[`Parse JSX > Typescript > Stamped.io 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "each": {
+              "bindingType": "expression",
               "code": "state.reviews",
               "type": "single",
             },
@@ -16794,6 +17288,7 @@ exports[`Parse JSX > Typescript > Stamped.io 1`] = `
               "@type": "@builder.io/mitosis/node",
               "bindings": {
                 "css": {
+                  "bindingType": "expression",
                   "code": "{
   margin: '10px',
   padding: '10px',
@@ -16806,6 +17301,7 @@ exports[`Parse JSX > Typescript > Stamped.io 1`] = `
                   "type": "single",
                 },
                 "key": {
+                  "bindingType": "expression",
                   "code": "review.id",
                   "type": "single",
                 },
@@ -16815,6 +17311,7 @@ exports[`Parse JSX > Typescript > Stamped.io 1`] = `
                   "@type": "@builder.io/mitosis/node",
                   "bindings": {
                     "css": {
+                      "bindingType": "expression",
                       "code": "{
   height: '30px',
   width: '30px',
@@ -16823,6 +17320,7 @@ exports[`Parse JSX > Typescript > Stamped.io 1`] = `
                       "type": "single",
                     },
                     "src": {
+                      "bindingType": "expression",
                       "code": "review.avatar",
                       "type": "single",
                     },
@@ -16837,6 +17335,7 @@ exports[`Parse JSX > Typescript > Stamped.io 1`] = `
                   "@type": "@builder.io/mitosis/node",
                   "bindings": {
                     "class": {
+                      "bindingType": "expression",
                       "code": "state.showReviewPrompt ? 'bg-primary' : 'bg-secondary'",
                       "type": "single",
                     },
@@ -16861,6 +17360,7 @@ exports[`Parse JSX > Typescript > Stamped.io 1`] = `
                           "@type": "@builder.io/mitosis/node",
                           "bindings": {
                             "_text": {
+                              "bindingType": "expression",
                               "code": "index",
                               "type": "single",
                             },
@@ -16885,6 +17385,7 @@ exports[`Parse JSX > Typescript > Stamped.io 1`] = `
                           "@type": "@builder.io/mitosis/node",
                           "bindings": {
                             "_text": {
+                              "bindingType": "expression",
                               "code": "review.author",
                               "type": "single",
                             },
@@ -16909,6 +17410,7 @@ exports[`Parse JSX > Typescript > Stamped.io 1`] = `
                           "@type": "@builder.io/mitosis/node",
                           "bindings": {
                             "_text": {
+                              "bindingType": "expression",
                               "code": "review.reviewMessage",
                               "type": "single",
                             },
@@ -17043,6 +17545,7 @@ exports[`Parse JSX > Typescript > Submit 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "_text": {
+              "bindingType": "expression",
               "code": "props.text",
               "type": "single",
             },
@@ -17096,16 +17599,19 @@ exports[`Parse JSX > Typescript > Text 1`] = `
       "@type": "@builder.io/mitosis/node",
       "bindings": {
         "contentEditable": {
+          "bindingType": "expression",
           "code": "allowEditingText || undefined",
           "type": "single",
         },
         "data-name": {
+          "bindingType": "expression",
           "code": "{
   test: state.name || 'any name'
 }",
           "type": "single",
         },
         "innerHTML": {
+          "bindingType": "expression",
           "code": "props.text || props.content || state.name || '<p class=\\"text-lg\\">my name</p>'",
           "type": "single",
         },
@@ -17168,14 +17674,17 @@ exports[`Parse JSX > Typescript > Textarea 1`] = `
       "@type": "@builder.io/mitosis/node",
       "bindings": {
         "defaultValue": {
+          "bindingType": "expression",
           "code": "props.defaultValue",
           "type": "single",
         },
         "name": {
+          "bindingType": "expression",
           "code": "props.name",
           "type": "single",
         },
         "placeholder": {
+          "bindingType": "expression",
           "code": "props.placeholder",
           "type": "single",
         },
@@ -17185,6 +17694,7 @@ exports[`Parse JSX > Typescript > Textarea 1`] = `
           "type": "spread",
         },
         "value": {
+          "bindingType": "expression",
           "code": "props.value",
           "type": "single",
         },
@@ -17233,26 +17743,32 @@ exports[`Parse JSX > Typescript > Video 1`] = `
       "@type": "@builder.io/mitosis/node",
       "bindings": {
         "autoplay": {
+          "bindingType": "expression",
           "code": "props.autoPlay",
           "type": "single",
         },
         "controls": {
+          "bindingType": "expression",
           "code": "props.controls",
           "type": "single",
         },
         "key": {
+          "bindingType": "expression",
           "code": "props.video || 'no-src'",
           "type": "single",
         },
         "loop": {
+          "bindingType": "expression",
           "code": "props.loop",
           "type": "single",
         },
         "muted": {
+          "bindingType": "expression",
           "code": "props.muted",
           "type": "single",
         },
         "poster": {
+          "bindingType": "expression",
           "code": "props.posterImage",
           "type": "single",
         },
@@ -17262,6 +17778,7 @@ exports[`Parse JSX > Typescript > Video 1`] = `
           "type": "spread",
         },
         "style": {
+          "bindingType": "expression",
           "code": "{
   width: '100%',
   height: '100%',
@@ -17345,6 +17862,7 @@ exports[`Parse JSX > Typescript > arrowFunctionInUseStore 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "_text": {
+              "bindingType": "expression",
               "code": "state.name",
               "type": "single",
             },
@@ -17427,6 +17945,7 @@ exports[`Parse JSX > Typescript > basicForNoTagReference 1`] = `
               "@type": "@builder.io/mitosis/node",
               "bindings": {
                 "_text": {
+                  "bindingType": "expression",
                   "code": "state.name",
                   "type": "single",
                 },
@@ -17447,6 +17966,7 @@ exports[`Parse JSX > Typescript > basicForNoTagReference 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "each": {
+              "bindingType": "expression",
               "code": "props.actions",
               "type": "single",
             },
@@ -17473,6 +17993,7 @@ exports[`Parse JSX > Typescript > basicForNoTagReference 1`] = `
                       "@type": "@builder.io/mitosis/node",
                       "bindings": {
                         "_text": {
+                          "bindingType": "expression",
                           "code": "action.text",
                           "type": "single",
                         },
@@ -17563,6 +18084,7 @@ exports[`Parse JSX > Typescript > basicForwardRef 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "css": {
+              "bindingType": "expression",
               "code": "{
   color: 'red'
 }",
@@ -17572,14 +18094,17 @@ exports[`Parse JSX > Typescript > basicForwardRef 1`] = `
               "arguments": [
                 "event",
               ],
+              "bindingType": "function",
               "code": "state.name = event.target.value",
               "type": "single",
             },
             "ref": {
+              "bindingType": "expression",
               "code": "props.inputRef",
               "type": "single",
             },
             "value": {
+              "bindingType": "expression",
               "code": "state.name",
               "type": "single",
             },
@@ -17641,6 +18166,7 @@ exports[`Parse JSX > Typescript > basicForwardRefMetadata 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "css": {
+              "bindingType": "expression",
               "code": "{
   color: 'red'
 }",
@@ -17650,14 +18176,17 @@ exports[`Parse JSX > Typescript > basicForwardRefMetadata 1`] = `
               "arguments": [
                 "event",
               ],
+              "bindingType": "function",
               "code": "state.name = event.target.value",
               "type": "single",
             },
             "ref": {
+              "bindingType": "expression",
               "code": "props.inputRef",
               "type": "single",
             },
             "value": {
+              "bindingType": "expression",
               "code": "state.name",
               "type": "single",
             },
@@ -17734,6 +18263,7 @@ exports[`Parse JSX > Typescript > basicOnUpdateReturn 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "_text": {
+              "bindingType": "expression",
               "code": "state.name",
               "type": "single",
             },
@@ -17831,6 +18361,7 @@ exports[`Parse JSX > Typescript > class + ClassName + css 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "css": {
+              "bindingType": "expression",
               "code": "{
   padding: '10px'
 }",
@@ -17901,6 +18432,7 @@ exports[`Parse JSX > Typescript > class + css 1`] = `
       "@type": "@builder.io/mitosis/node",
       "bindings": {
         "css": {
+          "bindingType": "expression",
           "code": "{
   padding: '10px'
 }",
@@ -17957,6 +18489,7 @@ exports[`Parse JSX > Typescript > className + css 1`] = `
       "@type": "@builder.io/mitosis/node",
       "bindings": {
         "css": {
+          "bindingType": "expression",
           "code": "{
   padding: '10px'
 }",
@@ -18040,6 +18573,7 @@ exports[`Parse JSX > Typescript > className 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "class": {
+              "bindingType": "expression",
               "code": "state.bindings",
               "type": "single",
             },
@@ -18117,16 +18651,19 @@ exports[`Parse JSX > Typescript > classState 1`] = `
       "@type": "@builder.io/mitosis/node",
       "bindings": {
         "class": {
+          "bindingType": "expression",
           "code": "state.classState",
           "type": "single",
         },
         "css": {
+          "bindingType": "expression",
           "code": "{
   padding: '10px'
 }",
           "type": "single",
         },
         "style": {
+          "bindingType": "expression",
           "code": "state.styleState",
           "type": "single",
         },
@@ -18200,6 +18737,7 @@ exports[`Parse JSX > Typescript > componentWithContext 1`] = `
               "@type": "@builder.io/mitosis/node",
               "bindings": {
                 "_text": {
+                  "bindingType": "expression",
                   "code": "foo.value",
                   "type": "single",
                 },
@@ -18311,6 +18849,7 @@ exports[`Parse JSX > Typescript > componentWithContextMultiRoot 1`] = `
               "@type": "@builder.io/mitosis/node",
               "bindings": {
                 "_text": {
+                  "bindingType": "expression",
                   "code": "foo.value",
                   "type": "single",
                 },
@@ -18508,6 +19047,7 @@ exports[`Parse JSX > Typescript > defaultProps 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "when": {
+              "bindingType": "expression",
               "code": "props.link",
               "type": "single",
             },
@@ -18517,6 +19057,7 @@ exports[`Parse JSX > Typescript > defaultProps 1`] = `
               "@type": "@builder.io/mitosis/node",
               "bindings": {
                 "href": {
+                  "bindingType": "expression",
                   "code": "props.link",
                   "type": "single",
                 },
@@ -18526,6 +19067,7 @@ exports[`Parse JSX > Typescript > defaultProps 1`] = `
                   "type": "spread",
                 },
                 "target": {
+                  "bindingType": "expression",
                   "code": "props.openLinkInNewTab ? '_blank' : undefined",
                   "type": "single",
                 },
@@ -18535,6 +19077,7 @@ exports[`Parse JSX > Typescript > defaultProps 1`] = `
                   "@type": "@builder.io/mitosis/node",
                   "bindings": {
                     "_text": {
+                      "bindingType": "expression",
                       "code": "props.text",
                       "type": "single",
                     },
@@ -18561,6 +19104,7 @@ exports[`Parse JSX > Typescript > defaultProps 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "when": {
+              "bindingType": "expression",
               "code": "!props.link",
               "type": "single",
             },
@@ -18570,6 +19114,7 @@ exports[`Parse JSX > Typescript > defaultProps 1`] = `
               "@type": "@builder.io/mitosis/node",
               "bindings": {
                 "onClick": {
+                  "bindingType": "function",
                   "code": "props.onClick()",
                   "type": "single",
                 },
@@ -18584,6 +19129,7 @@ exports[`Parse JSX > Typescript > defaultProps 1`] = `
                   "@type": "@builder.io/mitosis/node",
                   "bindings": {
                     "_text": {
+                      "bindingType": "expression",
                       "code": "props.buttonText",
                       "type": "single",
                     },
@@ -18681,6 +19227,7 @@ exports[`Parse JSX > Typescript > defaultPropsOutsideComponent 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "when": {
+              "bindingType": "expression",
               "code": "props.link",
               "type": "single",
             },
@@ -18690,6 +19237,7 @@ exports[`Parse JSX > Typescript > defaultPropsOutsideComponent 1`] = `
               "@type": "@builder.io/mitosis/node",
               "bindings": {
                 "href": {
+                  "bindingType": "expression",
                   "code": "props.link",
                   "type": "single",
                 },
@@ -18699,6 +19247,7 @@ exports[`Parse JSX > Typescript > defaultPropsOutsideComponent 1`] = `
                   "type": "spread",
                 },
                 "target": {
+                  "bindingType": "expression",
                   "code": "props.openLinkInNewTab ? '_blank' : undefined",
                   "type": "single",
                 },
@@ -18708,6 +19257,7 @@ exports[`Parse JSX > Typescript > defaultPropsOutsideComponent 1`] = `
                   "@type": "@builder.io/mitosis/node",
                   "bindings": {
                     "_text": {
+                      "bindingType": "expression",
                       "code": "props.text",
                       "type": "single",
                     },
@@ -18734,6 +19284,7 @@ exports[`Parse JSX > Typescript > defaultPropsOutsideComponent 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "when": {
+              "bindingType": "expression",
               "code": "!props.link",
               "type": "single",
             },
@@ -18746,6 +19297,7 @@ exports[`Parse JSX > Typescript > defaultPropsOutsideComponent 1`] = `
                   "arguments": [
                     "event",
                   ],
+                  "bindingType": "function",
                   "code": "props.onClick(event)",
                   "type": "single",
                 },
@@ -18760,6 +19312,7 @@ exports[`Parse JSX > Typescript > defaultPropsOutsideComponent 1`] = `
                   "@type": "@builder.io/mitosis/node",
                   "bindings": {
                     "_text": {
+                      "bindingType": "expression",
                       "code": "props.text",
                       "type": "single",
                     },
@@ -18864,6 +19417,7 @@ exports[`Parse JSX > Typescript > defaultValsWithTypes 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "_text": {
+              "bindingType": "expression",
               "code": "props.name || DEFAULT_VALUES.name",
               "type": "single",
             },
@@ -18926,6 +19480,7 @@ exports[`Parse JSX > Typescript > expressionState 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "_text": {
+              "bindingType": "expression",
               "code": "state.refToUse",
               "type": "single",
             },
@@ -18984,6 +19539,7 @@ exports[`Parse JSX > Typescript > getterState 1`] = `
               "@type": "@builder.io/mitosis/node",
               "bindings": {
                 "_text": {
+                  "bindingType": "expression",
                   "code": "state.foo2",
                   "type": "single",
                 },
@@ -19008,6 +19564,7 @@ exports[`Parse JSX > Typescript > getterState 1`] = `
               "@type": "@builder.io/mitosis/node",
               "bindings": {
                 "_text": {
+                  "bindingType": "expression",
                   "code": "state.bar",
                   "type": "single",
                 },
@@ -19032,6 +19589,7 @@ exports[`Parse JSX > Typescript > getterState 1`] = `
               "@type": "@builder.io/mitosis/node",
               "bindings": {
                 "_text": {
+                  "bindingType": "expression",
                   "code": "state.baz(1)",
                   "type": "single",
                 },
@@ -19349,6 +19907,7 @@ exports[`Parse JSX > Typescript > nestedShow 1`] = `
       "@type": "@builder.io/mitosis/node",
       "bindings": {
         "when": {
+          "bindingType": "expression",
           "code": "props.conditionA",
           "type": "single",
         },
@@ -19358,6 +19917,7 @@ exports[`Parse JSX > Typescript > nestedShow 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "when": {
+              "bindingType": "expression",
               "code": "!props.conditionB",
               "type": "single",
             },
@@ -19475,6 +20035,7 @@ exports[`Parse JSX > Typescript > nestedStyles 1`] = `
       "@type": "@builder.io/mitosis/node",
       "bindings": {
         "css": {
+          "bindingType": "expression",
           "code": "{
   display: 'flex',
   '--bar': 'red',
@@ -19549,6 +20110,7 @@ exports[`Parse JSX > Typescript > onEvent 1`] = `
       "@type": "@builder.io/mitosis/node",
       "bindings": {
         "ref": {
+          "bindingType": "expression",
           "code": "elem",
           "type": "single",
         },
@@ -19694,6 +20256,7 @@ exports[`Parse JSX > Typescript > onInit 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "_text": {
+              "bindingType": "expression",
               "code": "state.name",
               "type": "single",
             },
@@ -20066,6 +20629,7 @@ exports[`Parse JSX > Typescript > preserveTyping 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "_text": {
+              "bindingType": "expression",
               "code": "props.name",
               "type": "single",
             },
@@ -20129,6 +20693,7 @@ exports[`Parse JSX > Typescript > propsDestructure 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "_text": {
+              "bindingType": "expression",
               "code": "props.children",
               "type": "single",
             },
@@ -20143,6 +20708,7 @@ exports[`Parse JSX > Typescript > propsDestructure 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "_text": {
+              "bindingType": "expression",
               "code": "props.type",
               "type": "single",
             },
@@ -20228,6 +20794,7 @@ exports[`Parse JSX > Typescript > propsInterface 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "_text": {
+              "bindingType": "expression",
               "code": "props.name",
               "type": "single",
             },
@@ -20294,6 +20861,7 @@ exports[`Parse JSX > Typescript > propsType 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "_text": {
+              "bindingType": "expression",
               "code": "props.name",
               "type": "single",
             },
@@ -20403,6 +20971,7 @@ exports[`Parse JSX > Typescript > renderBlock 1`] = `
       "@type": "@builder.io/mitosis/node",
       "bindings": {
         "when": {
+          "bindingType": "expression",
           "code": "state.shouldWrap",
           "type": "single",
         },
@@ -20412,6 +20981,7 @@ exports[`Parse JSX > Typescript > renderBlock 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "when": {
+              "bindingType": "expression",
               "code": "isEmptyHtmlElement(state.tag)",
               "type": "single",
             },
@@ -20447,6 +21017,7 @@ exports[`Parse JSX > Typescript > renderBlock 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "when": {
+              "bindingType": "expression",
               "code": "!isEmptyHtmlElement(state.tag) && state.repeatItemData",
               "type": "single",
             },
@@ -20456,6 +21027,7 @@ exports[`Parse JSX > Typescript > renderBlock 1`] = `
               "@type": "@builder.io/mitosis/node",
               "bindings": {
                 "each": {
+                  "bindingType": "expression",
                   "code": "state.repeatItemData",
                   "type": "single",
                 },
@@ -20465,14 +21037,17 @@ exports[`Parse JSX > Typescript > renderBlock 1`] = `
                   "@type": "@builder.io/mitosis/node",
                   "bindings": {
                     "block": {
+                      "bindingType": "expression",
                       "code": "data.block",
                       "type": "single",
                     },
                     "key": {
+                      "bindingType": "expression",
                       "code": "index",
                       "type": "single",
                     },
                     "repeatContext": {
+                      "bindingType": "expression",
                       "code": "data.context",
                       "type": "single",
                     },
@@ -20502,6 +21077,7 @@ exports[`Parse JSX > Typescript > renderBlock 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "when": {
+              "bindingType": "expression",
               "code": "!isEmptyHtmlElement(state.tag) && !state.repeatItemData",
               "type": "single",
             },
@@ -20541,6 +21117,7 @@ exports[`Parse JSX > Typescript > renderBlock 1`] = `
                   "@type": "@builder.io/mitosis/node",
                   "bindings": {
                     "each": {
+                      "bindingType": "expression",
                       "code": "state.childrenWithoutParentComponent",
                       "type": "single",
                     },
@@ -20550,14 +21127,17 @@ exports[`Parse JSX > Typescript > renderBlock 1`] = `
                       "@type": "@builder.io/mitosis/node",
                       "bindings": {
                         "block": {
+                          "bindingType": "expression",
                           "code": "child",
                           "type": "single",
                         },
                         "context": {
+                          "bindingType": "expression",
                           "code": "state.childrenContext",
                           "type": "single",
                         },
                         "key": {
+                          "bindingType": "expression",
                           "code": "'render-block-' + child.id",
                           "type": "single",
                         },
@@ -20580,6 +21160,7 @@ exports[`Parse JSX > Typescript > renderBlock 1`] = `
                   "@type": "@builder.io/mitosis/node",
                   "bindings": {
                     "each": {
+                      "bindingType": "expression",
                       "code": "state.childrenWithoutParentComponent",
                       "type": "single",
                     },
@@ -20589,14 +21170,17 @@ exports[`Parse JSX > Typescript > renderBlock 1`] = `
                       "@type": "@builder.io/mitosis/node",
                       "bindings": {
                         "block": {
+                          "bindingType": "expression",
                           "code": "child",
                           "type": "single",
                         },
                         "context": {
+                          "bindingType": "expression",
                           "code": "state.childrenContext",
                           "type": "single",
                         },
                         "key": {
+                          "bindingType": "expression",
                           "code": "'block-style-' + child.id",
                           "type": "single",
                         },
@@ -21024,6 +21608,7 @@ exports[`Parse JSX > Typescript > renderContentExample 1`] = `
       "@type": "@builder.io/mitosis/node",
       "bindings": {
         "css": {
+          "bindingType": "expression",
           "code": "{
   display: 'flex',
   flexDirection: 'columns'
@@ -21031,6 +21616,7 @@ exports[`Parse JSX > Typescript > renderContentExample 1`] = `
           "type": "single",
         },
         "onClick": {
+          "bindingType": "function",
           "code": "trackClick(props.content.id)",
           "type": "single",
         },
@@ -21040,6 +21626,7 @@ exports[`Parse JSX > Typescript > renderContentExample 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "blocks": {
+              "bindingType": "expression",
               "code": "props.content.blocks",
               "type": "single",
             },
@@ -21151,6 +21738,7 @@ exports[`Parse JSX > Typescript > rootFragmentMultiNode 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "when": {
+              "bindingType": "expression",
               "code": "props.link",
               "type": "single",
             },
@@ -21160,6 +21748,7 @@ exports[`Parse JSX > Typescript > rootFragmentMultiNode 1`] = `
               "@type": "@builder.io/mitosis/node",
               "bindings": {
                 "href": {
+                  "bindingType": "expression",
                   "code": "props.link",
                   "type": "single",
                 },
@@ -21169,6 +21758,7 @@ exports[`Parse JSX > Typescript > rootFragmentMultiNode 1`] = `
                   "type": "spread",
                 },
                 "target": {
+                  "bindingType": "expression",
                   "code": "props.openLinkInNewTab ? '_blank' : undefined",
                   "type": "single",
                 },
@@ -21178,6 +21768,7 @@ exports[`Parse JSX > Typescript > rootFragmentMultiNode 1`] = `
                   "@type": "@builder.io/mitosis/node",
                   "bindings": {
                     "_text": {
+                      "bindingType": "expression",
                       "code": "props.text",
                       "type": "single",
                     },
@@ -21204,6 +21795,7 @@ exports[`Parse JSX > Typescript > rootFragmentMultiNode 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "when": {
+              "bindingType": "expression",
               "code": "!props.link",
               "type": "single",
             },
@@ -21223,6 +21815,7 @@ exports[`Parse JSX > Typescript > rootFragmentMultiNode 1`] = `
                   "@type": "@builder.io/mitosis/node",
                   "bindings": {
                     "_text": {
+                      "bindingType": "expression",
                       "code": "props.text",
                       "type": "single",
                     },
@@ -21290,6 +21883,7 @@ exports[`Parse JSX > Typescript > rootShow 1`] = `
       "@type": "@builder.io/mitosis/node",
       "bindings": {
         "when": {
+          "bindingType": "expression",
           "code": "props.foo === 'bar'",
           "type": "single",
         },
@@ -21382,6 +21976,7 @@ exports[`Parse JSX > Typescript > self-referencing component 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "_text": {
+              "bindingType": "expression",
               "code": "props.name",
               "type": "single",
             },
@@ -21396,6 +21991,7 @@ exports[`Parse JSX > Typescript > self-referencing component 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "when": {
+              "bindingType": "expression",
               "code": "props.name === 'Batman'",
               "type": "single",
             },
@@ -21457,6 +22053,7 @@ exports[`Parse JSX > Typescript > self-referencing component with children 1`] =
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "_text": {
+              "bindingType": "expression",
               "code": "props.name",
               "type": "single",
             },
@@ -21471,6 +22068,7 @@ exports[`Parse JSX > Typescript > self-referencing component with children 1`] =
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "_text": {
+              "bindingType": "expression",
               "code": "props.children",
               "type": "single",
             },
@@ -21485,6 +22083,7 @@ exports[`Parse JSX > Typescript > self-referencing component with children 1`] =
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "when": {
+              "bindingType": "expression",
               "code": "props.name === 'Batman'",
               "type": "single",
             },
@@ -21568,6 +22167,7 @@ exports[`Parse JSX > Typescript > showExpressions 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "when": {
+              "bindingType": "expression",
               "code": "props.conditionA",
               "type": "single",
             },
@@ -21606,6 +22206,7 @@ exports[`Parse JSX > Typescript > showExpressions 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "when": {
+              "bindingType": "expression",
               "code": "props.conditionA",
               "type": "single",
             },
@@ -21634,6 +22235,7 @@ exports[`Parse JSX > Typescript > showExpressions 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "when": {
+              "bindingType": "expression",
               "code": "props.conditionA",
               "type": "single",
             },
@@ -21660,6 +22262,7 @@ exports[`Parse JSX > Typescript > showExpressions 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "when": {
+              "bindingType": "expression",
               "code": "props.conditionA",
               "type": "single",
             },
@@ -21682,6 +22285,7 @@ exports[`Parse JSX > Typescript > showExpressions 1`] = `
               "@type": "@builder.io/mitosis/node",
               "bindings": {
                 "_text": {
+                  "bindingType": "expression",
                   "code": "undefined",
                   "type": "single",
                 },
@@ -21701,6 +22305,7 @@ exports[`Parse JSX > Typescript > showExpressions 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "when": {
+              "bindingType": "expression",
               "code": "props.conditionA",
               "type": "single",
             },
@@ -21710,6 +22315,7 @@ exports[`Parse JSX > Typescript > showExpressions 1`] = `
               "@type": "@builder.io/mitosis/node",
               "bindings": {
                 "_text": {
+                  "bindingType": "expression",
                   "code": "undefined",
                   "type": "single",
                 },
@@ -21742,6 +22348,7 @@ exports[`Parse JSX > Typescript > showExpressions 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "when": {
+              "bindingType": "expression",
               "code": "props.conditionA",
               "type": "single",
             },
@@ -21770,6 +22377,7 @@ exports[`Parse JSX > Typescript > showExpressions 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "when": {
+              "bindingType": "expression",
               "code": "props.conditionA",
               "type": "single",
             },
@@ -21796,6 +22404,7 @@ exports[`Parse JSX > Typescript > showExpressions 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "when": {
+              "bindingType": "expression",
               "code": "props.conditionA",
               "type": "single",
             },
@@ -21824,6 +22433,7 @@ exports[`Parse JSX > Typescript > showExpressions 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "when": {
+              "bindingType": "expression",
               "code": "props.conditionA",
               "type": "single",
             },
@@ -21850,6 +22460,7 @@ exports[`Parse JSX > Typescript > showExpressions 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "when": {
+              "bindingType": "expression",
               "code": "props.conditionA",
               "type": "single",
             },
@@ -21888,6 +22499,7 @@ exports[`Parse JSX > Typescript > showExpressions 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "when": {
+              "bindingType": "expression",
               "code": "props.conditionA",
               "type": "single",
             },
@@ -21926,6 +22538,7 @@ exports[`Parse JSX > Typescript > showExpressions 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "when": {
+              "bindingType": "expression",
               "code": "props.conditionA",
               "type": "single",
             },
@@ -21964,6 +22577,7 @@ exports[`Parse JSX > Typescript > showExpressions 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "when": {
+              "bindingType": "expression",
               "code": "props.conditionA",
               "type": "single",
             },
@@ -22002,6 +22616,7 @@ exports[`Parse JSX > Typescript > showExpressions 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "when": {
+              "bindingType": "expression",
               "code": "props.conditionA === 'Default'",
               "type": "single",
             },
@@ -22024,6 +22639,7 @@ exports[`Parse JSX > Typescript > showExpressions 1`] = `
               "@type": "@builder.io/mitosis/node",
               "bindings": {
                 "when": {
+                  "bindingType": "expression",
                   "code": "props.conditionB === 'Complete'",
                   "type": "single",
                 },
@@ -22067,6 +22683,7 @@ exports[`Parse JSX > Typescript > showExpressions 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "when": {
+              "bindingType": "expression",
               "code": "props.conditionA === 'Default'",
               "type": "single",
             },
@@ -22076,6 +22693,7 @@ exports[`Parse JSX > Typescript > showExpressions 1`] = `
               "@type": "@builder.io/mitosis/node",
               "bindings": {
                 "when": {
+                  "bindingType": "expression",
                   "code": "props.conditionB === 'Complete'",
                   "type": "single",
                 },
@@ -22132,6 +22750,7 @@ exports[`Parse JSX > Typescript > showExpressions 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "when": {
+              "bindingType": "expression",
               "code": "props.conditionA === 'Default'",
               "type": "single",
             },
@@ -22141,6 +22760,7 @@ exports[`Parse JSX > Typescript > showExpressions 1`] = `
               "@type": "@builder.io/mitosis/node",
               "bindings": {
                 "when": {
+                  "bindingType": "expression",
                   "code": "props.conditionB === 'Complete'",
                   "type": "single",
                 },
@@ -22191,6 +22811,7 @@ exports[`Parse JSX > Typescript > showExpressions 1`] = `
               "@type": "@builder.io/mitosis/node",
               "bindings": {
                 "when": {
+                  "bindingType": "expression",
                   "code": "props.conditionC === 'Complete'",
                   "type": "single",
                 },
@@ -22281,6 +22902,7 @@ exports[`Parse JSX > Typescript > showWithFor 1`] = `
       "@type": "@builder.io/mitosis/node",
       "bindings": {
         "when": {
+          "bindingType": "expression",
           "code": "props.conditionA",
           "type": "single",
         },
@@ -22290,6 +22912,7 @@ exports[`Parse JSX > Typescript > showWithFor 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "each": {
+              "bindingType": "expression",
               "code": "props.items",
               "type": "single",
             },
@@ -22299,6 +22922,7 @@ exports[`Parse JSX > Typescript > showWithFor 1`] = `
               "@type": "@builder.io/mitosis/node",
               "bindings": {
                 "key": {
+                  "bindingType": "expression",
                   "code": "idx",
                   "type": "single",
                 },
@@ -22308,6 +22932,7 @@ exports[`Parse JSX > Typescript > showWithFor 1`] = `
                   "@type": "@builder.io/mitosis/node",
                   "bindings": {
                     "_text": {
+                      "bindingType": "expression",
                       "code": "item",
                       "type": "single",
                     },
@@ -22400,6 +23025,7 @@ exports[`Parse JSX > Typescript > showWithOtherValues 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "when": {
+              "bindingType": "expression",
               "code": "props.conditionA",
               "type": "single",
             },
@@ -22428,6 +23054,7 @@ exports[`Parse JSX > Typescript > showWithOtherValues 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "when": {
+              "bindingType": "expression",
               "code": "props.conditionA",
               "type": "single",
             },
@@ -22452,6 +23079,7 @@ exports[`Parse JSX > Typescript > showWithOtherValues 1`] = `
               "@type": "@builder.io/mitosis/node",
               "bindings": {
                 "_text": {
+                  "bindingType": "expression",
                   "code": "undefined",
                   "type": "single",
                 },
@@ -22471,6 +23099,7 @@ exports[`Parse JSX > Typescript > showWithOtherValues 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "when": {
+              "bindingType": "expression",
               "code": "props.conditionA",
               "type": "single",
             },
@@ -22499,6 +23128,7 @@ exports[`Parse JSX > Typescript > showWithOtherValues 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "when": {
+              "bindingType": "expression",
               "code": "props.conditionA",
               "type": "single",
             },
@@ -22527,6 +23157,7 @@ exports[`Parse JSX > Typescript > showWithOtherValues 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "when": {
+              "bindingType": "expression",
               "code": "props.conditionA",
               "type": "single",
             },
@@ -22567,6 +23198,7 @@ exports[`Parse JSX > Typescript > showWithOtherValues 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "when": {
+              "bindingType": "expression",
               "code": "props.conditionA",
               "type": "single",
             },
@@ -22643,6 +23275,7 @@ exports[`Parse JSX > Typescript > showWithRootText 1`] = `
       "@type": "@builder.io/mitosis/node",
       "bindings": {
         "when": {
+          "bindingType": "expression",
           "code": "props.conditionA",
           "type": "single",
         },
@@ -22723,6 +23356,7 @@ exports[`Parse JSX > Typescript > signalsOnUpdate 1`] = `
       "@type": "@builder.io/mitosis/node",
       "bindings": {
         "css": {
+          "bindingType": "expression",
           "code": "{
   padding: '10px'
 }",
@@ -22734,6 +23368,7 @@ exports[`Parse JSX > Typescript > signalsOnUpdate 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "_text": {
+              "bindingType": "expression",
               "code": "props.id",
               "type": "single",
             },
@@ -22748,6 +23383,7 @@ exports[`Parse JSX > Typescript > signalsOnUpdate 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "_text": {
+              "bindingType": "expression",
               "code": "props.foo.value.bar.baz",
               "type": "single",
             },
@@ -22988,6 +23624,7 @@ exports[`Parse JSX > Typescript > string-literal-store 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "_text": {
+              "bindingType": "expression",
               "code": "state.foo",
               "type": "single",
             },
@@ -23042,6 +23679,7 @@ exports[`Parse JSX > Typescript > string-literal-store-kebab 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "_text": {
+              "bindingType": "expression",
               "code": "state['foo-bar']",
               "type": "single",
             },
@@ -23092,6 +23730,7 @@ exports[`Parse JSX > Typescript > styleClassAndCss 1`] = `
       "@type": "@builder.io/mitosis/node",
       "bindings": {
         "css": {
+          "bindingType": "expression",
           "code": "{
   display: 'flex',
   flexDirection: 'column',
@@ -23100,6 +23739,7 @@ exports[`Parse JSX > Typescript > styleClassAndCss 1`] = `
           "type": "single",
         },
         "style": {
+          "bindingType": "expression",
           "code": "{
   width: '100%'
 }",
@@ -23142,6 +23782,7 @@ exports[`Parse JSX > Typescript > stylePropClassAndCss 1`] = `
       "@type": "@builder.io/mitosis/node",
       "bindings": {
         "css": {
+          "bindingType": "expression",
           "code": "{
   display: 'flex',
   flexDirection: 'column',
@@ -23150,6 +23791,7 @@ exports[`Parse JSX > Typescript > stylePropClassAndCss 1`] = `
           "type": "single",
         },
         "style": {
+          "bindingType": "expression",
           "code": "props.attributes.style",
           "type": "single",
         },
@@ -23247,14 +23889,17 @@ exports[`Parse JSX > Typescript > svgComponent 1`] = `
       "@type": "@builder.io/mitosis/node",
       "bindings": {
         "height": {
+          "bindingType": "expression",
           "code": "42",
           "type": "single",
         },
         "viewBox": {
+          "bindingType": "expression",
           "code": "'0 0 ' + 42 + ' ' + 42",
           "type": "single",
         },
         "width": {
+          "bindingType": "expression",
           "code": "42",
           "type": "single",
         },
@@ -23296,6 +23941,7 @@ exports[`Parse JSX > Typescript > svgComponent 1`] = `
                   "@type": "@builder.io/mitosis/node",
                   "bindings": {
                     "stdDeviation": {
+                      "bindingType": "expression",
                       "code": "7",
                       "type": "single",
                     },
@@ -23364,6 +24010,7 @@ exports[`Parse JSX > Typescript > typeDependency 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "_text": {
+              "bindingType": "expression",
               "code": "props.foo",
               "type": "single",
             },
@@ -23445,6 +24092,7 @@ exports[`Parse JSX > Typescript > typeExternalStore 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "_text": {
+              "bindingType": "expression",
               "code": "state._name",
               "type": "single",
             },
@@ -23530,6 +24178,7 @@ exports[`Parse JSX > Typescript > typeGetterStore 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "_text": {
+              "bindingType": "expression",
               "code": "state.name",
               "type": "single",
             },
@@ -23672,6 +24321,7 @@ exports[`Parse JSX > Typescript > use-style-and-css 1`] = `
       "@type": "@builder.io/mitosis/node",
       "bindings": {
         "css": {
+          "bindingType": "expression",
           "code": "{
   background: 'blue',
   color: 'white'
@@ -23794,6 +24444,7 @@ exports[`Parse JSX > Typescript > useTarget 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "_text": {
+              "bindingType": "expression",
               "code": "state.name",
               "type": "single",
             },
@@ -24069,6 +24720,7 @@ exports[`Parse JSX > boolean attribute 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "when": {
+              "bindingType": "expression",
               "code": "props.children",
               "type": "single",
             },
@@ -24078,6 +24730,7 @@ exports[`Parse JSX > boolean attribute 1`] = `
               "@type": "@builder.io/mitosis/node",
               "bindings": {
                 "_text": {
+                  "bindingType": "expression",
                   "code": "props.children",
                   "type": "single",
                 },
@@ -24092,6 +24745,7 @@ exports[`Parse JSX > boolean attribute 1`] = `
               "@type": "@builder.io/mitosis/node",
               "bindings": {
                 "_text": {
+                  "bindingType": "expression",
                   "code": "props.type",
                   "type": "single",
                 },
@@ -24112,6 +24766,7 @@ exports[`Parse JSX > boolean attribute 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "toggle": {
+              "bindingType": "expression",
               "code": "true",
               "type": "single",
             },
@@ -24126,6 +24781,7 @@ exports[`Parse JSX > boolean attribute 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "toggle": {
+              "bindingType": "expression",
               "code": "true",
               "type": "single",
             },
@@ -24140,6 +24796,7 @@ exports[`Parse JSX > boolean attribute 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "list": {
+              "bindingType": "expression",
               "code": "null",
               "type": "single",
             },
@@ -24196,6 +24853,7 @@ exports[`Parse JSX > metadata 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "when": {
+              "bindingType": "expression",
               "code": "props.link",
               "type": "single",
             },
@@ -24205,6 +24863,7 @@ exports[`Parse JSX > metadata 1`] = `
               "@type": "@builder.io/mitosis/node",
               "bindings": {
                 "href": {
+                  "bindingType": "expression",
                   "code": "props.link",
                   "type": "single",
                 },
@@ -24214,6 +24873,7 @@ exports[`Parse JSX > metadata 1`] = `
                   "type": "spread",
                 },
                 "target": {
+                  "bindingType": "expression",
                   "code": "props.openLinkInNewTab ? '_blank' : undefined",
                   "type": "single",
                 },
@@ -24223,6 +24883,7 @@ exports[`Parse JSX > metadata 1`] = `
                   "@type": "@builder.io/mitosis/node",
                   "bindings": {
                     "_text": {
+                      "bindingType": "expression",
                       "code": "props.text",
                       "type": "single",
                     },
@@ -24249,6 +24910,7 @@ exports[`Parse JSX > metadata 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "when": {
+              "bindingType": "expression",
               "code": "!props.link",
               "type": "single",
             },
@@ -24268,6 +24930,7 @@ exports[`Parse JSX > metadata 1`] = `
                   "@type": "@builder.io/mitosis/node",
                   "bindings": {
                     "_text": {
+                      "bindingType": "expression",
                       "code": "props.text",
                       "type": "single",
                     },
diff --git a/packages/core/src/__tests__/__snapshots__/parse-svelte.test.ts.snap b/packages/core/src/__tests__/__snapshots__/parse-svelte.test.ts.snap
index 88e70ec248..0dbcc595d5 100644
--- a/packages/core/src/__tests__/__snapshots__/parse-svelte.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/parse-svelte.test.ts.snap
@@ -15,10 +15,12 @@ exports[`Parse JSX > basic 1`] = `
               "arguments": [
                 "event",
               ],
+              "bindingType": "expression",
               "code": "state.name = event.target.value",
               "type": "single",
             },
             "value": {
+              "bindingType": "expression",
               "code": "state.name",
               "type": "single",
             },
@@ -88,6 +90,7 @@ exports[`Parse JSX > bindGroup 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "checked": {
+              "bindingType": "expression",
               "code": "state.tortilla === 'Plain'",
               "type": "single",
             },
@@ -95,6 +98,7 @@ exports[`Parse JSX > bindGroup 1`] = `
               "arguments": [
                 "event",
               ],
+              "bindingType": "expression",
               "code": "state.tortilla = event.target.value",
               "type": "single",
             },
@@ -113,6 +117,7 @@ exports[`Parse JSX > bindGroup 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "checked": {
+              "bindingType": "expression",
               "code": "state.tortilla === 'Whole wheat'",
               "type": "single",
             },
@@ -120,6 +125,7 @@ exports[`Parse JSX > bindGroup 1`] = `
               "arguments": [
                 "event",
               ],
+              "bindingType": "expression",
               "code": "state.tortilla = event.target.value",
               "type": "single",
             },
@@ -138,6 +144,7 @@ exports[`Parse JSX > bindGroup 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "checked": {
+              "bindingType": "expression",
               "code": "state.tortilla === 'Spinach'",
               "type": "single",
             },
@@ -145,6 +152,7 @@ exports[`Parse JSX > bindGroup 1`] = `
               "arguments": [
                 "event",
               ],
+              "bindingType": "expression",
               "code": "state.tortilla = event.target.value",
               "type": "single",
             },
@@ -183,6 +191,7 @@ exports[`Parse JSX > bindGroup 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "checked": {
+              "bindingType": "expression",
               "code": "state.fillings === 'Rice'",
               "type": "single",
             },
@@ -190,6 +199,7 @@ exports[`Parse JSX > bindGroup 1`] = `
               "arguments": [
                 "event",
               ],
+              "bindingType": "expression",
               "code": "state.fillings = event.target.value",
               "type": "single",
             },
@@ -208,6 +218,7 @@ exports[`Parse JSX > bindGroup 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "checked": {
+              "bindingType": "expression",
               "code": "state.fillings === 'Beans'",
               "type": "single",
             },
@@ -215,6 +226,7 @@ exports[`Parse JSX > bindGroup 1`] = `
               "arguments": [
                 "event",
               ],
+              "bindingType": "expression",
               "code": "state.fillings = event.target.value",
               "type": "single",
             },
@@ -233,6 +245,7 @@ exports[`Parse JSX > bindGroup 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "checked": {
+              "bindingType": "expression",
               "code": "state.fillings === 'Cheese'",
               "type": "single",
             },
@@ -240,6 +253,7 @@ exports[`Parse JSX > bindGroup 1`] = `
               "arguments": [
                 "event",
               ],
+              "bindingType": "expression",
               "code": "state.fillings = event.target.value",
               "type": "single",
             },
@@ -258,6 +272,7 @@ exports[`Parse JSX > bindGroup 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "checked": {
+              "bindingType": "expression",
               "code": "state.fillings === 'Guac (extra)'",
               "type": "single",
             },
@@ -265,6 +280,7 @@ exports[`Parse JSX > bindGroup 1`] = `
               "arguments": [
                 "event",
               ],
+              "bindingType": "expression",
               "code": "state.fillings = event.target.value",
               "type": "single",
             },
@@ -299,6 +315,7 @@ exports[`Parse JSX > bindGroup 1`] = `
               "@type": "@builder.io/mitosis/node",
               "bindings": {
                 "_text": {
+                  "bindingType": "expression",
                   "code": "state.tortilla",
                   "type": "single",
                 },
@@ -337,6 +354,7 @@ exports[`Parse JSX > bindGroup 1`] = `
               "@type": "@builder.io/mitosis/node",
               "bindings": {
                 "_text": {
+                  "bindingType": "expression",
                   "code": "state.fillings",
                   "type": "single",
                 },
@@ -399,6 +417,7 @@ exports[`Parse JSX > bindProperty 1`] = `
       "@type": "@builder.io/mitosis/node",
       "bindings": {
         "value": {
+          "bindingType": "expression",
           "code": "state.value",
           "type": "single",
         },
@@ -443,6 +462,7 @@ exports[`Parse JSX > classDirective 1`] = `
       "@type": "@builder.io/mitosis/node",
       "bindings": {
         "class": {
+          "bindingType": "expression",
           "code": "\`form-input \${props.disabled ? 'disabled' : ''} \${state.focus ? 'focus' : ''}\`",
           "type": "single",
         },
@@ -492,6 +512,7 @@ exports[`Parse JSX > context 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "_text": {
+              "bindingType": "expression",
               "code": "state.activeTab",
               "type": "single",
             },
@@ -557,6 +578,7 @@ exports[`Parse JSX > each 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "each": {
+              "bindingType": "expression",
               "code": "state.numbers",
               "type": "single",
             },
@@ -570,6 +592,7 @@ exports[`Parse JSX > each 1`] = `
                   "@type": "@builder.io/mitosis/node",
                   "bindings": {
                     "_text": {
+                      "bindingType": "expression",
                       "code": "num",
                       "type": "single",
                     },
@@ -644,6 +667,7 @@ exports[`Parse JSX > eventHandlers 1`] = `
               "arguments": [
                 "a",
               ],
+              "bindingType": "expression",
               "code": "state.log('hi')",
               "type": "single",
             },
@@ -673,6 +697,7 @@ exports[`Parse JSX > eventHandlers 1`] = `
           "bindings": {
             "onClick": {
               "arguments": undefined,
+              "bindingType": "expression",
               "code": "state.log(event)",
               "type": "single",
             },
@@ -702,6 +727,7 @@ exports[`Parse JSX > eventHandlers 1`] = `
           "bindings": {
             "onClick": {
               "arguments": undefined,
+              "bindingType": "expression",
               "code": "state.log(event)",
               "type": "single",
             },
@@ -771,6 +797,7 @@ exports[`Parse JSX > html 1`] = `
       "@type": "@builder.io/mitosis/node",
       "bindings": {
         "innerHTML": {
+          "bindingType": "expression",
           "code": "state.html",
           "type": "single",
         },
@@ -815,6 +842,7 @@ exports[`Parse JSX > ifElse 1`] = `
       "@type": "@builder.io/mitosis/node",
       "bindings": {
         "when": {
+          "bindingType": "expression",
           "code": "state.show",
           "type": "single",
         },
@@ -825,6 +853,7 @@ exports[`Parse JSX > ifElse 1`] = `
           "bindings": {
             "onClick": {
               "arguments": undefined,
+              "bindingType": "expression",
               "code": "state.toggle(event)",
               "type": "single",
             },
@@ -856,6 +885,7 @@ exports[`Parse JSX > ifElse 1`] = `
           "bindings": {
             "onClick": {
               "arguments": undefined,
+              "bindingType": "expression",
               "code": "state.toggle(event)",
               "type": "single",
             },
@@ -929,6 +959,7 @@ exports[`Parse JSX > imports 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "disabled": {
+              "bindingType": "expression",
               "code": "state.disabled",
               "type": "single",
             },
@@ -1054,6 +1085,7 @@ exports[`Parse JSX > reactive 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "value": {
+              "bindingType": "expression",
               "code": "state.name",
               "type": "single",
             },
@@ -1082,6 +1114,7 @@ exports[`Parse JSX > reactive 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "_text": {
+              "bindingType": "expression",
               "code": "state.lowercaseName",
               "type": "single",
             },
@@ -1146,10 +1179,12 @@ exports[`Parse JSX > reactiveWithFn 1`] = `
               "arguments": [
                 "event",
               ],
+              "bindingType": "expression",
               "code": "state.a = event.target.value",
               "type": "single",
             },
             "value": {
+              "bindingType": "expression",
               "code": "state.a",
               "type": "single",
             },
@@ -1170,10 +1205,12 @@ exports[`Parse JSX > reactiveWithFn 1`] = `
               "arguments": [
                 "event",
               ],
+              "bindingType": "expression",
               "code": "state.b = event.target.value",
               "type": "single",
             },
             "value": {
+              "bindingType": "expression",
               "code": "state.b",
               "type": "single",
             },
@@ -1204,6 +1241,7 @@ exports[`Parse JSX > reactiveWithFn 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "_text": {
+              "bindingType": "expression",
               "code": "state.result",
               "type": "single",
             },
@@ -1436,6 +1474,7 @@ exports[`Parse JSX > textExpressions 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "_text": {
+              "bindingType": "expression",
               "code": "state.a + state.b",
               "type": "single",
             },
@@ -1475,6 +1514,7 @@ exports[`Parse JSX > textExpressions 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "_text": {
+              "bindingType": "expression",
               "code": "state.a > 2 ? 'hello' : 'bye'",
               "type": "single",
             },
diff --git a/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap b/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap
index d4a78d2763..4632744223 100644
--- a/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap
@@ -385,7 +385,7 @@ function MyBasicRefAssignmentComponent(props) {
 
   return (
     <div>
-      <button onClick={(evt) => handlerClick(evt)}>Click</button>
+      <button onClick={async (evt) => await handlerClick(evt)}>Click</button>
     </div>
   );
 }
@@ -1404,8 +1404,8 @@ function SmileReviews(props) {
             />
             <button
               className=\\"button\\"
-              onClick={(event) => {
-                event.preventDefault();
+              onClick={(ev) => {
+                ev.preventDefault();
                 setShowReviewPrompt(false);
               }}
             >
@@ -3921,7 +3921,7 @@ function MyBasicRefAssignmentComponent(props: Props) {
 
   return (
     <div>
-      <button onClick={(evt) => handlerClick(evt)}>Click</button>
+      <button onClick={async (evt) => await handlerClick(evt)}>Click</button>
     </div>
   );
 }
@@ -5111,8 +5111,8 @@ function SmileReviews(props: SmileReviewsProps) {
             />
             <button
               className=\\"button\\"
-              onClick={(event) => {
-                event.preventDefault();
+              onClick={(ev) => {
+                ev.preventDefault();
                 setShowReviewPrompt(false);
               }}
             >
diff --git a/packages/core/src/__tests__/__snapshots__/qwik.test.ts.snap b/packages/core/src/__tests__/__snapshots__/qwik.test.ts.snap
index 01479fa220..28020a525a 100644
--- a/packages/core/src/__tests__/__snapshots__/qwik.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/qwik.test.ts.snap
@@ -2195,7 +2195,9 @@ export const MyBasicRefAssignmentComponent = component$((props) => {
 
   return (
     <div>
-      <button onClick$={$((event) => state.handlerClick(evt))}>Click</button>
+      <button onClick$={$((event) => await state.handlerClick(evt))}>
+        Click
+      </button>
     </div>
   );
 });
@@ -5700,7 +5702,9 @@ export const MyBasicRefAssignmentComponent = component$((props: Props) => {
 
   return (
     <div>
-      <button onClick$={$((event) => state.handlerClick(evt))}>Click</button>
+      <button onClick$={$((event) => await state.handlerClick(evt))}>
+        Click
+      </button>
     </div>
   );
 });
diff --git a/packages/core/src/__tests__/__snapshots__/react-native.test.ts.snap b/packages/core/src/__tests__/__snapshots__/react-native.test.ts.snap
index 54f5d413bb..c365ab664d 100644
--- a/packages/core/src/__tests__/__snapshots__/react-native.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/react-native.test.ts.snap
@@ -600,7 +600,7 @@ function MyBasicRefAssignmentComponent(props) {
 
   return (
     <View>
-      <Button onPress={(evt) => handlerClick(evt)}>
+      <Button onPress={async (evt) => await handlerClick(evt)}>
         <Text>Click</Text>
       </Button>
     </View>
@@ -1826,8 +1826,8 @@ function SmileReviews(props) {
           <TextInput placeholder=\\"Title\\" />
           <View placeholder=\\"How was your experience?\\" />
           <Button
-            onPress={(event) => {
-              event.preventDefault();
+            onPress={(ev) => {
+              ev.preventDefault();
               setShowReviewPrompt(false);
             }}
           >
@@ -5530,7 +5530,7 @@ function MyBasicRefAssignmentComponent(props: Props) {
 
   return (
     <View>
-      <Button onPress={(evt) => handlerClick(evt)}>
+      <Button onPress={async (evt) => await handlerClick(evt)}>
         <Text>Click</Text>
       </Button>
     </View>
@@ -6927,8 +6927,8 @@ function SmileReviews(props: SmileReviewsProps) {
           <TextInput placeholder=\\"Title\\" />
           <View placeholder=\\"How was your experience?\\" />
           <Button
-            onPress={(event) => {
-              event.preventDefault();
+            onPress={(ev) => {
+              ev.preventDefault();
               setShowReviewPrompt(false);
             }}
           >
diff --git a/packages/core/src/__tests__/__snapshots__/react-state-builder.test.ts.snap b/packages/core/src/__tests__/__snapshots__/react-state-builder.test.ts.snap
index 77f9a77e55..ed448fd3b8 100644
--- a/packages/core/src/__tests__/__snapshots__/react-state-builder.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/react-state-builder.test.ts.snap
@@ -387,7 +387,9 @@ function MyBasicRefAssignmentComponent(props) {
 
   return (
     <div>
-      <button onClick={(evt) => state.handlerClick(evt)}>Click</button>
+      <button onClick={async (evt) => await state.handlerClick(evt)}>
+        Click
+      </button>
     </div>
   );
 }
@@ -1413,8 +1415,8 @@ function SmileReviews(props) {
             />
             <button
               className=\\"button\\"
-              onClick={(event) => {
-                event.preventDefault();
+              onClick={(ev) => {
+                ev.preventDefault();
                 state.showReviewPrompt = false;
               }}
             >
@@ -3909,7 +3911,9 @@ function MyBasicRefAssignmentComponent(props: Props) {
 
   return (
     <div>
-      <button onClick={(evt) => state.handlerClick(evt)}>Click</button>
+      <button onClick={async (evt) => await state.handlerClick(evt)}>
+        Click
+      </button>
     </div>
   );
 }
@@ -5106,8 +5110,8 @@ function SmileReviews(props: SmileReviewsProps) {
             />
             <button
               className=\\"button\\"
-              onClick={(event) => {
-                event.preventDefault();
+              onClick={(ev) => {
+                ev.preventDefault();
                 state.showReviewPrompt = false;
               }}
             >
diff --git a/packages/core/src/__tests__/__snapshots__/react-state-mobx.test.ts.snap b/packages/core/src/__tests__/__snapshots__/react-state-mobx.test.ts.snap
index 5819a9f46d..ef149b2d7b 100644
--- a/packages/core/src/__tests__/__snapshots__/react-state-mobx.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/react-state-mobx.test.ts.snap
@@ -406,7 +406,9 @@ function MyBasicRefAssignmentComponent(props) {
 
   return (
     <div>
-      <button onClick={(evt) => state.handlerClick(evt)}>Click</button>
+      <button onClick={async (evt) => await state.handlerClick(evt)}>
+        Click
+      </button>
     </div>
   );
 }
@@ -1443,8 +1445,8 @@ function SmileReviews(props) {
             />
             <button
               className=\\"button\\"
-              onClick={(event) => {
-                event.preventDefault();
+              onClick={(ev) => {
+                ev.preventDefault();
                 state.showReviewPrompt = false;
               }}
             >
@@ -3962,7 +3964,9 @@ function MyBasicRefAssignmentComponent(props: Props) {
 
   return (
     <div>
-      <button onClick={(evt) => state.handlerClick(evt)}>Click</button>
+      <button onClick={async (evt) => await state.handlerClick(evt)}>
+        Click
+      </button>
     </div>
   );
 }
@@ -5162,8 +5166,8 @@ function SmileReviews(props: SmileReviewsProps) {
             />
             <button
               className=\\"button\\"
-              onClick={(event) => {
-                event.preventDefault();
+              onClick={(ev) => {
+                ev.preventDefault();
                 state.showReviewPrompt = false;
               }}
             >
diff --git a/packages/core/src/__tests__/__snapshots__/react-state-solid.test.ts.snap b/packages/core/src/__tests__/__snapshots__/react-state-solid.test.ts.snap
index d475df619d..9952f6a6a8 100644
--- a/packages/core/src/__tests__/__snapshots__/react-state-solid.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/react-state-solid.test.ts.snap
@@ -393,7 +393,9 @@ function MyBasicRefAssignmentComponent(props) {
 
   return (
     <div>
-      <button onClick={(evt) => state.handlerClick(evt)}>Click</button>
+      <button onClick={async (evt) => await state.handlerClick(evt)}>
+        Click
+      </button>
     </div>
   );
 }
@@ -1407,8 +1409,8 @@ function SmileReviews(props) {
             />
             <button
               className=\\"button\\"
-              onClick={(event) => {
-                event.preventDefault();
+              onClick={(ev) => {
+                ev.preventDefault();
                 state.showReviewPrompt = false;
               }}
             >
@@ -3837,7 +3839,9 @@ function MyBasicRefAssignmentComponent(props: Props) {
 
   return (
     <div>
-      <button onClick={(evt) => state.handlerClick(evt)}>Click</button>
+      <button onClick={async (evt) => await state.handlerClick(evt)}>
+        Click
+      </button>
     </div>
   );
 }
@@ -5014,8 +5018,8 @@ function SmileReviews(props: SmileReviewsProps) {
             />
             <button
               className=\\"button\\"
-              onClick={(event) => {
-                event.preventDefault();
+              onClick={(ev) => {
+                ev.preventDefault();
                 state.showReviewPrompt = false;
               }}
             >
diff --git a/packages/core/src/__tests__/__snapshots__/react-state-valtio.test.ts.snap b/packages/core/src/__tests__/__snapshots__/react-state-valtio.test.ts.snap
index cec173a657..7b4c37ff81 100644
--- a/packages/core/src/__tests__/__snapshots__/react-state-valtio.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/react-state-valtio.test.ts.snap
@@ -393,7 +393,9 @@ function MyBasicRefAssignmentComponent(props) {
 
   return (
     <div>
-      <button onClick={(evt) => state.handlerClick(evt)}>Click</button>
+      <button onClick={async (evt) => await state.handlerClick(evt)}>
+        Click
+      </button>
     </div>
   );
 }
@@ -1407,8 +1409,8 @@ function SmileReviews(props) {
             />
             <button
               className=\\"button\\"
-              onClick={(event) => {
-                event.preventDefault();
+              onClick={(ev) => {
+                ev.preventDefault();
                 state.showReviewPrompt = false;
               }}
             >
@@ -3837,7 +3839,9 @@ function MyBasicRefAssignmentComponent(props: Props) {
 
   return (
     <div>
-      <button onClick={(evt) => state.handlerClick(evt)}>Click</button>
+      <button onClick={async (evt) => await state.handlerClick(evt)}>
+        Click
+      </button>
     </div>
   );
 }
@@ -5014,8 +5018,8 @@ function SmileReviews(props: SmileReviewsProps) {
             />
             <button
               className=\\"button\\"
-              onClick={(event) => {
-                event.preventDefault();
+              onClick={(ev) => {
+                ev.preventDefault();
                 state.showReviewPrompt = false;
               }}
             >
diff --git a/packages/core/src/__tests__/__snapshots__/react-state-variables.test.ts.snap b/packages/core/src/__tests__/__snapshots__/react-state-variables.test.ts.snap
index c7103c2541..4dc534cd34 100644
--- a/packages/core/src/__tests__/__snapshots__/react-state-variables.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/react-state-variables.test.ts.snap
@@ -881,8 +881,8 @@ function SmileReviews(props) {
             />
             <button
               className=\\"button\\"
-              onClick={(event) => {
-                event.preventDefault();
+              onClick={(ev) => {
+                ev.preventDefault();
                 showReviewPrompt = false;
               }}
             >
@@ -3595,8 +3595,8 @@ function SmileReviews(props: SmileReviewsProps) {
             />
             <button
               className=\\"button\\"
-              onClick={(event) => {
-                event.preventDefault();
+              onClick={(ev) => {
+                ev.preventDefault();
                 showReviewPrompt = false;
               }}
             >
diff --git a/packages/core/src/__tests__/__snapshots__/react.test.ts.snap b/packages/core/src/__tests__/__snapshots__/react.test.ts.snap
index af39bb5292..bbfd84400a 100644
--- a/packages/core/src/__tests__/__snapshots__/react.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/react.test.ts.snap
@@ -383,7 +383,7 @@ function MyBasicRefAssignmentComponent(props) {
 
   return (
     <div>
-      <button onClick={(evt) => handlerClick(evt)}>Click</button>
+      <button onClick={async (evt) => await handlerClick(evt)}>Click</button>
     </div>
   );
 }
@@ -1390,8 +1390,8 @@ function SmileReviews(props) {
             />
             <button
               className=\\"button\\"
-              onClick={(event) => {
-                event.preventDefault();
+              onClick={(ev) => {
+                ev.preventDefault();
                 setShowReviewPrompt(false);
               }}
             >
@@ -3816,7 +3816,7 @@ function MyBasicRefAssignmentComponent(props: Props) {
 
   return (
     <div>
-      <button onClick={(evt) => handlerClick(evt)}>Click</button>
+      <button onClick={async (evt) => await handlerClick(evt)}>Click</button>
     </div>
   );
 }
@@ -4994,8 +4994,8 @@ function SmileReviews(props: SmileReviewsProps) {
             />
             <button
               className=\\"button\\"
-              onClick={(event) => {
-                event.preventDefault();
+              onClick={(ev) => {
+                ev.preventDefault();
                 setShowReviewPrompt(false);
               }}
             >
@@ -7266,15 +7266,15 @@ function SmileReviews(props) {
         {state.showReviewPrompt || \\"asdf\\" ? (
           <>
             <input placeholder=\\"Email\\" />
-            <input placeholder=\\"Title\\" className=\\"input-c36324fe\\" />
+            <input placeholder=\\"Title\\" className=\\"input-4b8e7e0e\\" />
             <textarea
               placeholder=\\"How was your experience?\\"
-              className=\\"textarea-c36324fe\\"
+              className=\\"textarea-4b8e7e0e\\"
             />
             <button
-              className=\\"button-c36324fe\\"
-              onClick={(event) => {
-                event.preventDefault();
+              className=\\"button-4b8e7e0e\\"
+              onClick={(ev) => {
+                ev.preventDefault();
                 state.showReviewPrompt = false;
               }}
             >
@@ -7283,8 +7283,8 @@ function SmileReviews(props) {
           </>
         ) : null}
         {state.reviews?.map((review, index) => (
-          <div className=\\"review-c36324fe\\" key={review.id}>
-            <img className=\\"img-c36324fe\\" src={review.avatar} />
+          <div className=\\"review-4b8e7e0e\\" key={review.id}>
+            <img className=\\"img-4b8e7e0e\\" src={review.avatar} />
             <div
               className={state.showReviewPrompt ? \\"bg-primary\\" : \\"bg-secondary\\"}
             >
@@ -7296,13 +7296,13 @@ function SmileReviews(props) {
         ))}
       </div>
 
-      <style>{\`.input-c36324fe {
+      <style>{\`.input-4b8e7e0e {
   display: block;
-}.textarea-c36324fe {
+}.textarea-4b8e7e0e {
   display: block;
-}.button-c36324fe {
+}.button-4b8e7e0e {
   display: block;
-}.review-c36324fe {
+}.review-4b8e7e0e {
   margin: 10px;
   padding: 10px;
   background: white;
@@ -7310,7 +7310,7 @@ function SmileReviews(props) {
   border-radius: 5px;
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
   -webkit-font-smoothing: antialiased;
-}.img-c36324fe {
+}.img-4b8e7e0e {
   height: 30px;
   width: 30px;
   margin-right: 10px;
@@ -7366,15 +7366,15 @@ function SmileReviews(props) {
         {showReviewPrompt || \\"asdf\\" ? (
           <>
             <input placeholder=\\"Email\\" />
-            <input placeholder=\\"Title\\" className=\\"input-d91d02b4\\" />
+            <input placeholder=\\"Title\\" className=\\"input-fb2f23de\\" />
             <textarea
               placeholder=\\"How was your experience?\\"
-              className=\\"textarea-d91d02b4\\"
+              className=\\"textarea-fb2f23de\\"
             />
             <button
-              className=\\"button-d91d02b4\\"
-              onClick={(event) => {
-                event.preventDefault();
+              className=\\"button-fb2f23de\\"
+              onClick={(ev) => {
+                ev.preventDefault();
                 setShowReviewPrompt(false);
               }}
             >
@@ -7383,8 +7383,8 @@ function SmileReviews(props) {
           </>
         ) : null}
         {reviews?.map((review, index) => (
-          <div className=\\"review-d91d02b4\\" key={review.id}>
-            <img className=\\"img-d91d02b4\\" src={review.avatar} />
+          <div className=\\"review-fb2f23de\\" key={review.id}>
+            <img className=\\"img-fb2f23de\\" src={review.avatar} />
             <div className={showReviewPrompt ? \\"bg-primary\\" : \\"bg-secondary\\"}>
               <div>N: {index}</div>
               <div>{review.author}</div>
@@ -7394,13 +7394,13 @@ function SmileReviews(props) {
         ))}
       </div>
 
-      <style>{\`.input-d91d02b4 {
+      <style>{\`.input-fb2f23de {
   display: block;
-}.textarea-d91d02b4 {
+}.textarea-fb2f23de {
   display: block;
-}.button-d91d02b4 {
+}.button-fb2f23de {
   display: block;
-}.review-d91d02b4 {
+}.review-fb2f23de {
   margin: 10px;
   padding: 10px;
   background: white;
@@ -7408,7 +7408,7 @@ function SmileReviews(props) {
   border-radius: 5px;
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
   -webkit-font-smoothing: antialiased;
-}.img-d91d02b4 {
+}.img-fb2f23de {
   height: 30px;
   width: 30px;
   margin-right: 10px;
diff --git a/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap b/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap
index 1d6a1596e7..0443b9df39 100644
--- a/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap
@@ -383,7 +383,7 @@ function MyBasicRefAssignmentComponent(props) {
 
   return (
     <div>
-      <button onClick={(evt) => handlerClick(evt)}>Click</button>
+      <button onClick={async (evt) => await handlerClick(evt)}>Click</button>
     </div>
   );
 }
@@ -1387,8 +1387,8 @@ function SmileReviews(props) {
             />
             <button
               className=\\"button\\"
-              onClick={(event) => {
-                event.preventDefault();
+              onClick={(ev) => {
+                ev.preventDefault();
                 setShowReviewPrompt(false);
               }}
             >
@@ -3545,7 +3545,7 @@ function MyBasicRefAssignmentComponent(props: Props) {
 
   return (
     <div>
-      <button onClick={(evt) => handlerClick(evt)}>Click</button>
+      <button onClick={async (evt) => await handlerClick(evt)}>Click</button>
     </div>
   );
 }
@@ -4720,8 +4720,8 @@ function SmileReviews(props: SmileReviewsProps) {
             />
             <button
               className=\\"button\\"
-              onClick={(event) => {
-                event.preventDefault();
+              onClick={(ev) => {
+                ev.preventDefault();
                 setShowReviewPrompt(false);
               }}
             >
diff --git a/packages/core/src/__tests__/__snapshots__/solid.test.ts.snap b/packages/core/src/__tests__/__snapshots__/solid.test.ts.snap
index e92da20c73..9ba336e84b 100644
--- a/packages/core/src/__tests__/__snapshots__/solid.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/solid.test.ts.snap
@@ -264,7 +264,7 @@ function MyBasicRefComponent(props) {
         <Show when={props.showInput}>
           <>
             <input
-              class=\\"input-8359a966\\"
+              class=\\"input-5f05cdb2\\"
               ref={inputRef}
               value={name()}
               onBlur={(event) => onBlur()}
@@ -283,7 +283,7 @@ function MyBasicRefComponent(props) {
         {lowerCaseName()}! I can run in React, Qwik, Vue, Solid, or Web
         Component!
       </div>
-      <style>{\`.input-8359a966 {
+      <style>{\`.input-5f05cdb2 {
   color: red;
 }\`}</style>
     </>
@@ -330,7 +330,7 @@ function MyBasicRefComponent(props) {
         <Show when={props.showInput}>
           <>
             <input
-              class=\\"input-8359a966\\"
+              class=\\"input-5f05cdb2\\"
               ref={inputRef}
               value={name()}
               onBlur={(event) => onBlur()}
@@ -349,7 +349,7 @@ function MyBasicRefComponent(props) {
         {lowerCaseName()}! I can run in React, Qwik, Vue, Solid, or Web
         Component!
       </div>
-      <style>{\`.input-8359a966 {
+      <style>{\`.input-5f05cdb2 {
   color: red;
 }\`}</style>
     </>
@@ -380,14 +380,14 @@ function MyBasicComponent(props) {
 
   return (
     <>
-      <div class=\\"test div-046ccea4\\">
+      <div class=\\"test div-25b4b1ee\\">
         <input
           value={DEFAULT_VALUES.name || name()}
           onInput={(myEvent) => setName(myEvent.target.value)}
         />
         Hello! I can run in React, Vue, Solid, or Liquid! &gt;
       </div>
-      <style>{\`.div-046ccea4 {
+      <style>{\`.div-25b4b1ee {
   padding: 10px;
 }\`}</style>
     </>
@@ -456,14 +456,14 @@ function MyBasicComponent(props) {
 
   return (
     <>
-      <div class=\\"test div-046ccea4\\">
+      <div class=\\"test div-25b4b1ee\\">
         <input
           value={DEFAULT_VALUES.name || name()}
           onInput={(myEvent) => setName(myEvent.target.value)}
         />
         Hello! I can run in React, Vue, Solid, or Liquid! &gt;
       </div>
-      <style>{\`.div-046ccea4 {
+      <style>{\`.div-25b4b1ee {
   padding: 10px;
 }\`}</style>
     </>
@@ -988,7 +988,7 @@ function MyBasicRefComponent(props) {
         <Show when={props.showInput}>
           <>
             <input
-              class=\\"input-1360a7e4\\"
+              class=\\"input-2f9398de\\"
               ref={inputRef}
               value={name()}
               onBlur={(event) => onBlur()}
@@ -1007,7 +1007,7 @@ function MyBasicRefComponent(props) {
         {lowerCaseName()}! I can run in React, Qwik, Vue, Solid, or Web
         Component!
       </div>
-      <style>{\`.input-1360a7e4 {
+      <style>{\`.input-2f9398de {
   color: red;
 }\`}</style>
     </>
@@ -1042,7 +1042,7 @@ function MyBasicRefComponent(props) {
         <Show when={props.showInput}>
           <>
             <input
-              class=\\"input-1360a7e4\\"
+              class=\\"input-2f9398de\\"
               ref={inputRef}
               value={name()}
               onBlur={(event) => onBlur()}
@@ -1061,7 +1061,7 @@ function MyBasicRefComponent(props) {
         {lowerCaseName()}! I can run in React, Qwik, Vue, Solid, or Web
         Component!
       </div>
-      <style>{\`.input-1360a7e4 {
+      <style>{\`.input-2f9398de {
   color: red;
 }\`}</style>
     </>
@@ -1085,7 +1085,7 @@ function MyBasicRefAssignmentComponent(props) {
   return (
     <>
       <div>
-        <button onClick={(evt) => handlerClick(evt)}>Click</button>
+        <button onClick={async (evt) => await handlerClick(evt)}>Click</button>
       </div>
     </>
   );
@@ -1108,7 +1108,7 @@ function MyBasicRefAssignmentComponent(props) {
   return (
     <>
       <div>
-        <button onClick={(evt) => handlerClick(evt)}>Click</button>
+        <button onClick={async (evt) => await handlerClick(evt)}>Click</button>
       </div>
     </>
   );
@@ -1290,12 +1290,12 @@ function Column(props) {
 
   return (
     <>
-      <div class=\\"builder-columns div-8ebf4416\\">
+      <div class=\\"builder-columns div-2411fb2a\\">
         <For each={props.columns}>
           {(column, _index) => {
             const index = _index();
             return (
-              <div class=\\"builder-column div-8ebf4416-2\\">
+              <div class=\\"builder-column div-2411fb2a-2\\">
                 {column.content}
                 {index}
               </div>
@@ -1303,12 +1303,12 @@ function Column(props) {
           }}
         </For>
       </div>
-      <style>{\`.div-8ebf4416 {
+      <style>{\`.div-2411fb2a {
   display: flex;
   flex-direction: column;
   align-items: stretch;
   line-height: normal;
-}@media (max-width: 999px) { .div-8ebf4416 {   flex-direction: row; } }@media (max-width: 639px) { .div-8ebf4416 {   flex-direction: row-reverse; } }.div-8ebf4416-2 {
+}@media (max-width: 999px) { .div-2411fb2a {   flex-direction: row; } }@media (max-width: 639px) { .div-2411fb2a {   flex-direction: row-reverse; } }.div-2411fb2a-2 {
   flex-grow: 1;
 }\`}</style>
     </>
@@ -1345,12 +1345,12 @@ function Column(props) {
 
   return (
     <>
-      <div class=\\"builder-columns div-8ebf4416\\">
+      <div class=\\"builder-columns div-2411fb2a\\">
         <For each={props.columns}>
           {(column, _index) => {
             const index = _index();
             return (
-              <div class=\\"builder-column div-8ebf4416-2\\">
+              <div class=\\"builder-column div-2411fb2a-2\\">
                 {column.content}
                 {index}
               </div>
@@ -1358,12 +1358,12 @@ function Column(props) {
           }}
         </For>
       </div>
-      <style>{\`.div-8ebf4416 {
+      <style>{\`.div-2411fb2a {
   display: flex;
   flex-direction: column;
   align-items: stretch;
   line-height: normal;
-}@media (max-width: 999px) { .div-8ebf4416 {   flex-direction: row; } }@media (max-width: 639px) { .div-8ebf4416 {   flex-direction: row-reverse; } }.div-8ebf4416-2 {
+}@media (max-width: 999px) { .div-2411fb2a {   flex-direction: row; } }@media (max-width: 639px) { .div-2411fb2a {   flex-direction: row-reverse; } }.div-2411fb2a-2 {
   flex-grow: 1;
 }\`}</style>
     </>
@@ -2070,7 +2070,7 @@ function FormComponent(props) {
           ></BuilderBlocks>
         </Show>
         <Show when={submissionState() === \\"error\\" && responseData()}>
-          <pre class=\\"builder-form-error-text pre-3a429f9e\\">
+          <pre class=\\"builder-form-error-text pre-fa9e99a4\\">
             {JSON.stringify(responseData(), null, 2)}
           </pre>
         </Show>
@@ -2081,7 +2081,7 @@ function FormComponent(props) {
           ></BuilderBlocks>
         </Show>
       </form>
-      <style>{\`.pre-3a429f9e {
+      <style>{\`.pre-fa9e99a4 {
   padding: 10px;
   color: red;
   text-align: center;
@@ -2370,7 +2370,7 @@ function FormComponent(props) {
           ></BuilderBlocks>
         </Show>
         <Show when={submissionState() === \\"error\\" && responseData()}>
-          <pre class=\\"builder-form-error-text pre-3a429f9e\\">
+          <pre class=\\"builder-form-error-text pre-fa9e99a4\\">
             {JSON.stringify(responseData(), null, 2)}
           </pre>
         </Show>
@@ -2381,7 +2381,7 @@ function FormComponent(props) {
           ></BuilderBlocks>
         </Show>
       </form>
-      <style>{\`.pre-3a429f9e {
+      <style>{\`.pre-fa9e99a4 {
   padding: 10px;
   color: red;
   text-align: center;
@@ -2455,7 +2455,7 @@ function Image(props) {
               class={
                 \\"builder-image\\" +
                 (props._class ? \\" \\" + props._class : \\"\\") +
-                \\" img-668cedfa\\"
+                \\" img-4221eb95\\"
               }
               alt={props.altText}
               aria-role={props.altText ? \\"presentation\\" : undefined}
@@ -2469,7 +2469,7 @@ function Image(props) {
         </picture>
         {props.children}
       </div>
-      <style>{\`.img-668cedfa {
+      <style>{\`.img-4221eb95 {
   opacity: 1;
   transition: opacity 0.2s ease-in-out;
   object-fit: cover;
@@ -2544,7 +2544,7 @@ function Image(props) {
               class={
                 \\"builder-image\\" +
                 (props._class ? \\" \\" + props._class : \\"\\") +
-                \\" img-668cedfa\\"
+                \\" img-4221eb95\\"
               }
               alt={props.altText}
               aria-role={props.altText ? \\"presentation\\" : undefined}
@@ -2558,7 +2558,7 @@ function Image(props) {
         </picture>
         {props.children}
       </div>
-      <style>{\`.img-668cedfa {
+      <style>{\`.img-4221eb95 {
   opacity: 1;
   transition: opacity 0.2s ease-in-out;
   object-fit: cover;
@@ -3196,15 +3196,15 @@ function SmileReviews(props) {
         </button>
         <Show when={showReviewPrompt() || \\"asdf\\"}>
           <input placeholder=\\"Email\\" />
-          <input class=\\"input-2163cbd4\\" placeholder=\\"Title\\" />
+          <input class=\\"input-e8a1be16\\" placeholder=\\"Title\\" />
           <textarea
-            class=\\"textarea-2163cbd4\\"
+            class=\\"textarea-e8a1be16\\"
             placeholder=\\"How was your experience?\\"
           ></textarea>
           <button
-            class=\\"button-2163cbd4\\"
-            onClick={(event) => {
-              event.preventDefault();
+            class=\\"button-e8a1be16\\"
+            onClick={(ev) => {
+              ev.preventDefault();
               setShowReviewPrompt(false);
             }}
           >
@@ -3215,8 +3215,8 @@ function SmileReviews(props) {
           {(review, _index) => {
             const index = _index();
             return (
-              <div class=\\"div-2163cbd4\\" key={review.id}>
-                <img class=\\"img-2163cbd4\\" src={review.avatar} />
+              <div class=\\"div-e8a1be16\\" key={review.id}>
+                <img class=\\"img-e8a1be16\\" src={review.avatar} />
                 <div class={showReviewPrompt() ? \\"bg-primary\\" : \\"bg-secondary\\"}>
                   <div>
                     N:
@@ -3230,13 +3230,13 @@ function SmileReviews(props) {
           }}
         </For>
       </div>
-      <style>{\`.input-2163cbd4 {
+      <style>{\`.input-e8a1be16 {
   display: block;
-}.textarea-2163cbd4 {
+}.textarea-e8a1be16 {
   display: block;
-}.button-2163cbd4 {
+}.button-e8a1be16 {
   display: block;
-}.div-2163cbd4 {
+}.div-e8a1be16 {
   margin: 10px;
   padding: 10px;
   background: white;
@@ -3244,7 +3244,7 @@ function SmileReviews(props) {
   border-radius: 5px;
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
   -webkit-font-smoothing: antialiased;
-}.img-2163cbd4 {
+}.img-e8a1be16 {
   height: 30px;
   width: 30px;
   margin-right: 10px;
@@ -3297,15 +3297,15 @@ function SmileReviews(props) {
         </button>
         <Show when={showReviewPrompt() || \\"asdf\\"}>
           <input placeholder=\\"Email\\" />
-          <input class=\\"input-2163cbd4\\" placeholder=\\"Title\\" />
+          <input class=\\"input-e8a1be16\\" placeholder=\\"Title\\" />
           <textarea
-            class=\\"textarea-2163cbd4\\"
+            class=\\"textarea-e8a1be16\\"
             placeholder=\\"How was your experience?\\"
           ></textarea>
           <button
-            class=\\"button-2163cbd4\\"
-            onClick={(event) => {
-              event.preventDefault();
+            class=\\"button-e8a1be16\\"
+            onClick={(ev) => {
+              ev.preventDefault();
               setShowReviewPrompt(false);
             }}
           >
@@ -3316,8 +3316,8 @@ function SmileReviews(props) {
           {(review, _index) => {
             const index = _index();
             return (
-              <div class=\\"div-2163cbd4\\" key={review.id}>
-                <img class=\\"img-2163cbd4\\" src={review.avatar} />
+              <div class=\\"div-e8a1be16\\" key={review.id}>
+                <img class=\\"img-e8a1be16\\" src={review.avatar} />
                 <div class={showReviewPrompt() ? \\"bg-primary\\" : \\"bg-secondary\\"}>
                   <div>
                     N:
@@ -3331,13 +3331,13 @@ function SmileReviews(props) {
           }}
         </For>
       </div>
-      <style>{\`.input-2163cbd4 {
+      <style>{\`.input-e8a1be16 {
   display: block;
-}.textarea-2163cbd4 {
+}.textarea-e8a1be16 {
   display: block;
-}.button-2163cbd4 {
+}.button-e8a1be16 {
   display: block;
-}.div-2163cbd4 {
+}.div-e8a1be16 {
   margin: 10px;
   padding: 10px;
   background: white;
@@ -3345,7 +3345,7 @@ function SmileReviews(props) {
   border-radius: 5px;
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
   -webkit-font-smoothing: antialiased;
-}.img-2163cbd4 {
+}.img-e8a1be16 {
   height: 30px;
   width: 30px;
   margin-right: 10px;
@@ -3696,13 +3696,13 @@ function MyBasicForwardRefComponent(props) {
     <>
       <div>
         <input
-          class=\\"input-8f561752\\"
+          class=\\"input-4dcaad7b\\"
           ref={props.inputRef}
           value={name()}
           onInput={(event) => setName(event.target.value)}
         />
       </div>
-      <style>{\`.input-8f561752 {
+      <style>{\`.input-4dcaad7b {
   color: red;
 }\`}</style>
     </>
@@ -3723,13 +3723,13 @@ function MyBasicForwardRefComponent(props) {
     <>
       <div>
         <input
-          class=\\"input-8f561752\\"
+          class=\\"input-4dcaad7b\\"
           ref={props.inputRef}
           value={name()}
           onInput={(event) => setName(event.target.value)}
         />
       </div>
-      <style>{\`.input-8f561752 {
+      <style>{\`.input-4dcaad7b {
   color: red;
 }\`}</style>
     </>
@@ -3750,13 +3750,13 @@ function MyBasicForwardRefComponent(props) {
     <>
       <div>
         <input
-          class=\\"input-2597b0e5\\"
+          class=\\"input-a906ceca\\"
           ref={props.inputRef}
           value={name()}
           onInput={(event) => setName(event.target.value)}
         />
       </div>
-      <style>{\`.input-2597b0e5 {
+      <style>{\`.input-a906ceca {
   color: red;
 }\`}</style>
     </>
@@ -3777,13 +3777,13 @@ function MyBasicForwardRefComponent(props) {
     <>
       <div>
         <input
-          class=\\"input-2597b0e5\\"
+          class=\\"input-a906ceca\\"
           ref={props.inputRef}
           value={name()}
           onInput={(event) => setName(event.target.value)}
         />
       </div>
-      <style>{\`.input-2597b0e5 {
+      <style>{\`.input-a906ceca {
   color: red;
 }\`}</style>
     </>
@@ -3882,11 +3882,11 @@ function MyBasicComponent(props) {
         <MyComp class=\\"test test2\\">
           Hello! I can run in React, Vue, Solid, or Liquid!
         </MyComp>
-        <div class=\\"test2 test div-590a063c\\">
+        <div class=\\"test2 test div-6ef0b03e\\">
           Hello! I can run in React, Vue, Solid, or Liquid!
         </div>
       </div>
-      <style>{\`.div-590a063c {
+      <style>{\`.div-6ef0b03e {
   padding: 10px;
 }\`}</style>
     </>
@@ -3907,11 +3907,11 @@ function MyBasicComponent(props) {
         <MyComp class=\\"test test2\\">
           Hello! I can run in React, Vue, Solid, or Liquid!
         </MyComp>
-        <div class=\\"test2 test div-590a063c\\">
+        <div class=\\"test2 test div-6ef0b03e\\">
           Hello! I can run in React, Vue, Solid, or Liquid!
         </div>
       </div>
-      <style>{\`.div-590a063c {
+      <style>{\`.div-6ef0b03e {
   padding: 10px;
 }\`}</style>
     </>
@@ -3926,10 +3926,10 @@ exports[`Solid > jsx > Javascript Test > class + css 1`] = `
 "function MyBasicComponent(props) {
   return (
     <>
-      <div class=\\"test div-fb8d32e6\\">
+      <div class=\\"test div-defca3e2\\">
         Hello! I can run in React, Vue, Solid, or Liquid!
       </div>
-      <style>{\`.div-fb8d32e6 {
+      <style>{\`.div-defca3e2 {
   padding: 10px;
 }\`}</style>
     </>
@@ -3944,10 +3944,10 @@ exports[`Solid > jsx > Javascript Test > class + css 2`] = `
 "function MyBasicComponent(props) {
   return (
     <>
-      <div class=\\"test div-fb8d32e6\\">
+      <div class=\\"test div-defca3e2\\">
         Hello! I can run in React, Vue, Solid, or Liquid!
       </div>
-      <style>{\`.div-fb8d32e6 {
+      <style>{\`.div-defca3e2 {
   padding: 10px;
 }\`}</style>
     </>
@@ -3962,10 +3962,10 @@ exports[`Solid > jsx > Javascript Test > className + css 1`] = `
 "function MyBasicComponent(props) {
   return (
     <>
-      <div class=\\"test div-fb8d32e6\\">
+      <div class=\\"test div-defca3e2\\">
         Hello! I can run in React, Vue, Solid, or Liquid!
       </div>
-      <style>{\`.div-fb8d32e6 {
+      <style>{\`.div-defca3e2 {
   padding: 10px;
 }\`}</style>
     </>
@@ -3980,10 +3980,10 @@ exports[`Solid > jsx > Javascript Test > className + css 2`] = `
 "function MyBasicComponent(props) {
   return (
     <>
-      <div class=\\"test div-fb8d32e6\\">
+      <div class=\\"test div-defca3e2\\">
         Hello! I can run in React, Vue, Solid, or Liquid!
       </div>
-      <style>{\`.div-fb8d32e6 {
+      <style>{\`.div-defca3e2 {
   padding: 10px;
 }\`}</style>
     </>
@@ -4046,10 +4046,10 @@ function MyBasicComponent(props) {
 
   return (
     <>
-      <div class={classState() + \\" div-70b306de\\"} style={styleState()}>
+      <div class={classState() + \\" div-023ce23d\\"} style={styleState()}>
         Hello! I can run in React, Vue, Solid, or Liquid!
       </div>
-      <style>{\`.div-70b306de {
+      <style>{\`.div-023ce23d {
   padding: 10px;
 }\`}</style>
     </>
@@ -4072,10 +4072,10 @@ function MyBasicComponent(props) {
 
   return (
     <>
-      <div class={classState() + \\" div-70b306de\\"} style={styleState()}>
+      <div class={classState() + \\" div-023ce23d\\"} style={styleState()}>
         Hello! I can run in React, Vue, Solid, or Liquid!
       </div>
-      <style>{\`.div-70b306de {
+      <style>{\`.div-023ce23d {
   padding: 10px;
 }\`}</style>
     </>
@@ -4822,20 +4822,20 @@ exports[`Solid > jsx > Javascript Test > nestedStyles 1`] = `
 "function NestedStyles(props) {
   return (
     <>
-      <div class=\\"div-7ff9918d\\">Hello world</div>
-      <style>{\`.div-7ff9918d {
+      <div class=\\"div-7671878a\\">Hello world</div>
+      <style>{\`.div-7671878a {
   display: flex;
   --bar: red;
   color: var(--bar);
-}@media (max-width: env(--mobile)) { .div-7ff9918d {   display: block; } }.div-7ff9918d:hover {
+}@media (max-width: env(--mobile)) { .div-7671878a {   display: block; } }.div-7671878a:hover {
   display: flex;
-}.div-7ff9918d:active {
+}.div-7671878a:active {
   display: inline;
-}.div-7ff9918d .nested-selector {
+}.div-7671878a .nested-selector {
   display: grid;
-}.div-7ff9918d .nested-selector:hover {
+}.div-7671878a .nested-selector:hover {
   display: block;
-}.div-7ff9918d.nested-selector:active {
+}.div-7671878a.nested-selector:active {
   display: inline-block;
 }\`}</style>
     </>
@@ -4850,20 +4850,20 @@ exports[`Solid > jsx > Javascript Test > nestedStyles 2`] = `
 "function NestedStyles(props) {
   return (
     <>
-      <div class=\\"div-7ff9918d\\">Hello world</div>
-      <style>{\`.div-7ff9918d {
+      <div class=\\"div-7671878a\\">Hello world</div>
+      <style>{\`.div-7671878a {
   display: flex;
   --bar: red;
   color: var(--bar);
-}@media (max-width: env(--mobile)) { .div-7ff9918d {   display: block; } }.div-7ff9918d:hover {
+}@media (max-width: env(--mobile)) { .div-7671878a {   display: block; } }.div-7671878a:hover {
   display: flex;
-}.div-7ff9918d:active {
+}.div-7671878a:active {
   display: inline;
-}.div-7ff9918d .nested-selector {
+}.div-7671878a .nested-selector {
   display: grid;
-}.div-7ff9918d .nested-selector:hover {
+}.div-7671878a .nested-selector:hover {
   display: block;
-}.div-7ff9918d.nested-selector:active {
+}.div-7671878a.nested-selector:active {
   display: inline-block;
 }\`}</style>
     </>
@@ -6064,13 +6064,13 @@ function RenderContent(props) {
         }}
       >
         <div
-          class=\\"div-89da777c\\"
+          class=\\"div-37f74696\\"
           onClick={(event) => trackClick(props.content.id)}
         >
           <RenderBlocks blocks={props.content.blocks}></RenderBlocks>
         </div>
       </BuilderContext.Provider>
-      <style>{\`.div-89da777c {
+      <style>{\`.div-37f74696 {
   display: flex;
   flex-direction: columns;
 }\`}</style>
@@ -6118,13 +6118,13 @@ function RenderContent(props) {
         }}
       >
         <div
-          class=\\"div-89da777c\\"
+          class=\\"div-37f74696\\"
           onClick={(event) => trackClick(props.content.id)}
         >
           <RenderBlocks blocks={props.content.blocks}></RenderBlocks>
         </div>
       </BuilderContext.Provider>
-      <style>{\`.div-89da777c {
+      <style>{\`.div-37f74696 {
   display: flex;
   flex-direction: columns;
 }\`}</style>
@@ -6617,11 +6617,11 @@ function MyBasicComponent(props) {
 
   return (
     <>
-      <div class=\\"test div-120e4d4e\\">
+      <div class=\\"test div-ba05009e\\">
         {props.id}
         {props.foo.value.bar.baz}
       </div>
-      <style>{\`.div-120e4d4e {
+      <style>{\`.div-ba05009e {
   padding: 10px;
 }\`}</style>
     </>
@@ -6653,11 +6653,11 @@ function MyBasicComponent(props) {
 
   return (
     <>
-      <div class=\\"test div-120e4d4e\\">
+      <div class=\\"test div-ba05009e\\">
         {props.id}
         {props.foo.value.bar.baz}
       </div>
-      <style>{\`.div-120e4d4e {
+      <style>{\`.div-ba05009e {
   padding: 10px;
 }\`}</style>
     </>
@@ -6839,12 +6839,12 @@ exports[`Solid > jsx > Javascript Test > styleClassAndCss 1`] = `
   return (
     <>
       <div
-        class=\\"builder-column div-53ff897e\\"
+        class=\\"builder-column div-35e34a45\\"
         style={{
           width: \\"100%\\",
         }}
       ></div>
-      <style>{\`.div-53ff897e {
+      <style>{\`.div-35e34a45 {
   display: flex;
   flex-direction: column;
   align-items: stretch;
@@ -6862,12 +6862,12 @@ exports[`Solid > jsx > Javascript Test > styleClassAndCss 2`] = `
   return (
     <>
       <div
-        class=\\"builder-column div-53ff897e\\"
+        class=\\"builder-column div-35e34a45\\"
         style={{
           width: \\"100%\\",
         }}
       ></div>
-      <style>{\`.div-53ff897e {
+      <style>{\`.div-35e34a45 {
   display: flex;
   flex-direction: column;
   align-items: stretch;
@@ -6885,10 +6885,10 @@ exports[`Solid > jsx > Javascript Test > stylePropClassAndCss 1`] = `
   return (
     <>
       <div
-        class={props.attributes.class + \\" div-40d76e28\\"}
+        class={props.attributes.class + \\" div-bee7e1a8\\"}
         style={props.attributes.style}
       ></div>
-      <style>{\`.div-40d76e28 {
+      <style>{\`.div-bee7e1a8 {
   display: flex;
   flex-direction: column;
   align-items: stretch;
@@ -6906,10 +6906,10 @@ exports[`Solid > jsx > Javascript Test > stylePropClassAndCss 2`] = `
   return (
     <>
       <div
-        class={props.attributes.class + \\" div-40d76e28\\"}
+        class={props.attributes.class + \\" div-bee7e1a8\\"}
         style={props.attributes.style}
       ></div>
-      <style>{\`.div-40d76e28 {
+      <style>{\`.div-bee7e1a8 {
   display: flex;
   flex-direction: column;
   align-items: stretch;
@@ -7198,7 +7198,7 @@ exports[`Solid > jsx > Javascript Test > use-style-and-css 1`] = `
 "function MyComponent(props) {
   return (
     <>
-      <button class=\\"button-11144e0c\\" type=\\"button\\">
+      <button class=\\"button-49a5373c\\" type=\\"button\\">
         Button
       </button>
       <style>{\`
@@ -7207,7 +7207,7 @@ exports[`Solid > jsx > Javascript Test > use-style-and-css 1`] = `
             outline: 1px solid black;
         }
 
-.button-11144e0c {
+.button-49a5373c {
   background: blue;
   color: white;
 }\`}</style>
@@ -7223,7 +7223,7 @@ exports[`Solid > jsx > Javascript Test > use-style-and-css 2`] = `
 "function MyComponent(props) {
   return (
     <>
-      <button class=\\"button-11144e0c\\" type=\\"button\\">
+      <button class=\\"button-49a5373c\\" type=\\"button\\">
         Button
       </button>
       <style>{\`
@@ -7232,7 +7232,7 @@ exports[`Solid > jsx > Javascript Test > use-style-and-css 2`] = `
             outline: 1px solid black;
         }
 
-.button-11144e0c {
+.button-49a5373c {
   background: blue;
   color: white;
 }\`}</style>
@@ -7696,7 +7696,7 @@ function MyBasicRefComponent(props: Props) {
         <Show when={props.showInput}>
           <>
             <input
-              class=\\"input-60618642\\"
+              class=\\"input-441d0a7a\\"
               ref={inputRef!}
               value={name()}
               onBlur={(event) => onBlur()}
@@ -7715,7 +7715,7 @@ function MyBasicRefComponent(props: Props) {
         {lowerCaseName()}! I can run in React, Qwik, Vue, Solid, or Web
         Component!
       </div>
-      <style>{\`.input-60618642 {
+      <style>{\`.input-441d0a7a {
   color: red;
 }\`}</style>
     </>
@@ -7766,7 +7766,7 @@ function MyBasicRefComponent(props: Props) {
         <Show when={props.showInput}>
           <>
             <input
-              class=\\"input-60618642\\"
+              class=\\"input-441d0a7a\\"
               ref={inputRef!}
               value={name()}
               onBlur={(event) => onBlur()}
@@ -7785,7 +7785,7 @@ function MyBasicRefComponent(props: Props) {
         {lowerCaseName()}! I can run in React, Qwik, Vue, Solid, or Web
         Component!
       </div>
-      <style>{\`.input-60618642 {
+      <style>{\`.input-441d0a7a {
   color: red;
 }\`}</style>
     </>
@@ -7820,14 +7820,14 @@ function MyBasicComponent(props: MyBasicComponentProps) {
 
   return (
     <>
-      <div class=\\"test div-3c5f02b2\\">
+      <div class=\\"test div-6ed3c989\\">
         <input
           value={DEFAULT_VALUES.name || name()}
           onInput={(myEvent) => setName(myEvent.target.value)}
         />
         Hello! I can run in React, Vue, Solid, or Liquid! &gt;
       </div>
-      <style>{\`.div-3c5f02b2 {
+      <style>{\`.div-6ed3c989 {
   padding: 10px;
 }\`}</style>
     </>
@@ -7900,14 +7900,14 @@ function MyBasicComponent(props: MyBasicComponentProps) {
 
   return (
     <>
-      <div class=\\"test div-3c5f02b2\\">
+      <div class=\\"test div-6ed3c989\\">
         <input
           value={DEFAULT_VALUES.name || name()}
           onInput={(myEvent) => setName(myEvent.target.value)}
         />
         Hello! I can run in React, Vue, Solid, or Liquid! &gt;
       </div>
-      <style>{\`.div-3c5f02b2 {
+      <style>{\`.div-6ed3c989 {
   padding: 10px;
 }\`}</style>
     </>
@@ -8456,7 +8456,7 @@ function MyBasicRefComponent(props: Props) {
         <Show when={props.showInput}>
           <>
             <input
-              class=\\"input-1dafdd72\\"
+              class=\\"input-4279b6ec\\"
               ref={inputRef!}
               value={name()}
               onBlur={(event) => onBlur()}
@@ -8475,7 +8475,7 @@ function MyBasicRefComponent(props: Props) {
         {lowerCaseName()}! I can run in React, Qwik, Vue, Solid, or Web
         Component!
       </div>
-      <style>{\`.input-1dafdd72 {
+      <style>{\`.input-4279b6ec {
   color: red;
 }\`}</style>
     </>
@@ -8514,7 +8514,7 @@ function MyBasicRefComponent(props: Props) {
         <Show when={props.showInput}>
           <>
             <input
-              class=\\"input-1dafdd72\\"
+              class=\\"input-4279b6ec\\"
               ref={inputRef!}
               value={name()}
               onBlur={(event) => onBlur()}
@@ -8533,7 +8533,7 @@ function MyBasicRefComponent(props: Props) {
         {lowerCaseName()}! I can run in React, Qwik, Vue, Solid, or Web
         Component!
       </div>
-      <style>{\`.input-1dafdd72 {
+      <style>{\`.input-4279b6ec {
   color: red;
 }\`}</style>
     </>
@@ -8561,7 +8561,7 @@ function MyBasicRefAssignmentComponent(props: Props) {
   return (
     <>
       <div>
-        <button onClick={(evt) => handlerClick(evt)}>Click</button>
+        <button onClick={async (evt) => await handlerClick(evt)}>Click</button>
       </div>
     </>
   );
@@ -8588,7 +8588,7 @@ function MyBasicRefAssignmentComponent(props: Props) {
   return (
     <>
       <div>
-        <button onClick={(evt) => handlerClick(evt)}>Click</button>
+        <button onClick={async (evt) => await handlerClick(evt)}>Click</button>
       </div>
     </>
   );
@@ -8807,12 +8807,12 @@ function Column(props: ColumnProps) {
 
   return (
     <>
-      <div class=\\"builder-columns div-589a139a\\">
+      <div class=\\"builder-columns div-7a1249a4\\">
         <For each={props.columns}>
           {(column, _index) => {
             const index = _index();
             return (
-              <div class=\\"builder-column div-589a139a-2\\">
+              <div class=\\"builder-column div-7a1249a4-2\\">
                 {column.content}
                 {index}
               </div>
@@ -8820,12 +8820,12 @@ function Column(props: ColumnProps) {
           }}
         </For>
       </div>
-      <style>{\`.div-589a139a {
+      <style>{\`.div-7a1249a4 {
   display: flex;
   flex-direction: column;
   align-items: stretch;
   line-height: normal;
-}@media (max-width: 999px) { .div-589a139a {   flex-direction: row; } }@media (max-width: 639px) { .div-589a139a {   flex-direction: row-reverse; } }.div-589a139a-2 {
+}@media (max-width: 999px) { .div-7a1249a4 {   flex-direction: row; } }@media (max-width: 639px) { .div-7a1249a4 {   flex-direction: row-reverse; } }.div-7a1249a4-2 {
   flex-grow: 1;
 }\`}</style>
     </>
@@ -8877,12 +8877,12 @@ function Column(props: ColumnProps) {
 
   return (
     <>
-      <div class=\\"builder-columns div-589a139a\\">
+      <div class=\\"builder-columns div-7a1249a4\\">
         <For each={props.columns}>
           {(column, _index) => {
             const index = _index();
             return (
-              <div class=\\"builder-column div-589a139a-2\\">
+              <div class=\\"builder-column div-7a1249a4-2\\">
                 {column.content}
                 {index}
               </div>
@@ -8890,12 +8890,12 @@ function Column(props: ColumnProps) {
           }}
         </For>
       </div>
-      <style>{\`.div-589a139a {
+      <style>{\`.div-7a1249a4 {
   display: flex;
   flex-direction: column;
   align-items: stretch;
   line-height: normal;
-}@media (max-width: 999px) { .div-589a139a {   flex-direction: row; } }@media (max-width: 639px) { .div-589a139a {   flex-direction: row-reverse; } }.div-589a139a-2 {
+}@media (max-width: 999px) { .div-7a1249a4 {   flex-direction: row; } }@media (max-width: 639px) { .div-7a1249a4 {   flex-direction: row-reverse; } }.div-7a1249a4-2 {
   flex-grow: 1;
 }\`}</style>
     </>
@@ -9679,7 +9679,7 @@ function FormComponent(props: FormProps) {
           ></BuilderBlocks>
         </Show>
         <Show when={submissionState() === \\"error\\" && responseData()}>
-          <pre class=\\"builder-form-error-text pre-4bf0b036\\">
+          <pre class=\\"builder-form-error-text pre-1e982027\\">
             {JSON.stringify(responseData(), null, 2)}
           </pre>
         </Show>
@@ -9690,7 +9690,7 @@ function FormComponent(props: FormProps) {
           ></BuilderBlocks>
         </Show>
       </form>
-      <style>{\`.pre-4bf0b036 {
+      <style>{\`.pre-1e982027 {
   padding: 10px;
   color: red;
   text-align: center;
@@ -10010,7 +10010,7 @@ function FormComponent(props: FormProps) {
           ></BuilderBlocks>
         </Show>
         <Show when={submissionState() === \\"error\\" && responseData()}>
-          <pre class=\\"builder-form-error-text pre-4bf0b036\\">
+          <pre class=\\"builder-form-error-text pre-1e982027\\">
             {JSON.stringify(responseData(), null, 2)}
           </pre>
         </Show>
@@ -10021,7 +10021,7 @@ function FormComponent(props: FormProps) {
           ></BuilderBlocks>
         </Show>
       </form>
-      <style>{\`.pre-4bf0b036 {
+      <style>{\`.pre-1e982027 {
   padding: 10px;
   color: red;
   text-align: center;
@@ -10114,7 +10114,7 @@ function Image(props: ImageProps) {
               class={
                 \\"builder-image\\" +
                 (props._class ? \\" \\" + props._class : \\"\\") +
-                \\" img-88889f3c\\"
+                \\" img-0d7c0a02\\"
               }
               alt={props.altText}
               aria-role={props.altText ? \\"presentation\\" : undefined}
@@ -10128,7 +10128,7 @@ function Image(props: ImageProps) {
         </picture>
         {props.children}
       </div>
-      <style>{\`.img-88889f3c {
+      <style>{\`.img-0d7c0a02 {
   opacity: 1;
   transition: opacity 0.2s ease-in-out;
   object-fit: cover;
@@ -10222,7 +10222,7 @@ function Image(props: ImageProps) {
               class={
                 \\"builder-image\\" +
                 (props._class ? \\" \\" + props._class : \\"\\") +
-                \\" img-88889f3c\\"
+                \\" img-0d7c0a02\\"
               }
               alt={props.altText}
               aria-role={props.altText ? \\"presentation\\" : undefined}
@@ -10236,7 +10236,7 @@ function Image(props: ImageProps) {
         </picture>
         {props.children}
       </div>
-      <style>{\`.img-88889f3c {
+      <style>{\`.img-0d7c0a02 {
   opacity: 1;
   transition: opacity 0.2s ease-in-out;
   object-fit: cover;
@@ -11023,15 +11023,15 @@ function SmileReviews(props: SmileReviewsProps) {
         </button>
         <Show when={showReviewPrompt() || \\"asdf\\"}>
           <input placeholder=\\"Email\\" />
-          <input class=\\"input-4a97341e\\" placeholder=\\"Title\\" />
+          <input class=\\"input-276a9616\\" placeholder=\\"Title\\" />
           <textarea
-            class=\\"textarea-4a97341e\\"
+            class=\\"textarea-276a9616\\"
             placeholder=\\"How was your experience?\\"
           ></textarea>
           <button
-            class=\\"button-4a97341e\\"
-            onClick={(event) => {
-              event.preventDefault();
+            class=\\"button-276a9616\\"
+            onClick={(ev) => {
+              ev.preventDefault();
               setShowReviewPrompt(false);
             }}
           >
@@ -11042,8 +11042,8 @@ function SmileReviews(props: SmileReviewsProps) {
           {(review, _index) => {
             const index = _index();
             return (
-              <div class=\\"div-4a97341e\\" key={review.id}>
-                <img class=\\"img-4a97341e\\" src={review.avatar} />
+              <div class=\\"div-276a9616\\" key={review.id}>
+                <img class=\\"img-276a9616\\" src={review.avatar} />
                 <div class={showReviewPrompt() ? \\"bg-primary\\" : \\"bg-secondary\\"}>
                   <div>
                     N:
@@ -11057,13 +11057,13 @@ function SmileReviews(props: SmileReviewsProps) {
           }}
         </For>
       </div>
-      <style>{\`.input-4a97341e {
+      <style>{\`.input-276a9616 {
   display: block;
-}.textarea-4a97341e {
+}.textarea-276a9616 {
   display: block;
-}.button-4a97341e {
+}.button-276a9616 {
   display: block;
-}.div-4a97341e {
+}.div-276a9616 {
   margin: 10px;
   padding: 10px;
   background: white;
@@ -11071,7 +11071,7 @@ function SmileReviews(props: SmileReviewsProps) {
   border-radius: 5px;
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
   -webkit-font-smoothing: antialiased;
-}.img-4a97341e {
+}.img-276a9616 {
   height: 30px;
   width: 30px;
   margin-right: 10px;
@@ -11129,15 +11129,15 @@ function SmileReviews(props: SmileReviewsProps) {
         </button>
         <Show when={showReviewPrompt() || \\"asdf\\"}>
           <input placeholder=\\"Email\\" />
-          <input class=\\"input-4a97341e\\" placeholder=\\"Title\\" />
+          <input class=\\"input-276a9616\\" placeholder=\\"Title\\" />
           <textarea
-            class=\\"textarea-4a97341e\\"
+            class=\\"textarea-276a9616\\"
             placeholder=\\"How was your experience?\\"
           ></textarea>
           <button
-            class=\\"button-4a97341e\\"
-            onClick={(event) => {
-              event.preventDefault();
+            class=\\"button-276a9616\\"
+            onClick={(ev) => {
+              ev.preventDefault();
               setShowReviewPrompt(false);
             }}
           >
@@ -11148,8 +11148,8 @@ function SmileReviews(props: SmileReviewsProps) {
           {(review, _index) => {
             const index = _index();
             return (
-              <div class=\\"div-4a97341e\\" key={review.id}>
-                <img class=\\"img-4a97341e\\" src={review.avatar} />
+              <div class=\\"div-276a9616\\" key={review.id}>
+                <img class=\\"img-276a9616\\" src={review.avatar} />
                 <div class={showReviewPrompt() ? \\"bg-primary\\" : \\"bg-secondary\\"}>
                   <div>
                     N:
@@ -11163,13 +11163,13 @@ function SmileReviews(props: SmileReviewsProps) {
           }}
         </For>
       </div>
-      <style>{\`.input-4a97341e {
+      <style>{\`.input-276a9616 {
   display: block;
-}.textarea-4a97341e {
+}.textarea-276a9616 {
   display: block;
-}.button-4a97341e {
+}.button-276a9616 {
   display: block;
-}.div-4a97341e {
+}.div-276a9616 {
   margin: 10px;
   padding: 10px;
   background: white;
@@ -11177,7 +11177,7 @@ function SmileReviews(props: SmileReviewsProps) {
   border-radius: 5px;
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
   -webkit-font-smoothing: antialiased;
-}.img-4a97341e {
+}.img-276a9616 {
   height: 30px;
   width: 30px;
   margin-right: 10px;
@@ -11627,13 +11627,13 @@ function MyBasicForwardRefComponent(props: Props) {
     <>
       <div>
         <input
-          class=\\"input-b78c7450\\"
+          class=\\"input-0b6a3ec8\\"
           ref={props.inputRef!}
           value={name()}
           onInput={(event) => setName(event.target.value)}
         />
       </div>
-      <style>{\`.input-b78c7450 {
+      <style>{\`.input-0b6a3ec8 {
   color: red;
 }\`}</style>
     </>
@@ -11659,13 +11659,13 @@ function MyBasicForwardRefComponent(props: Props) {
     <>
       <div>
         <input
-          class=\\"input-b78c7450\\"
+          class=\\"input-0b6a3ec8\\"
           ref={props.inputRef!}
           value={name()}
           onInput={(event) => setName(event.target.value)}
         />
       </div>
-      <style>{\`.input-b78c7450 {
+      <style>{\`.input-0b6a3ec8 {
   color: red;
 }\`}</style>
     </>
@@ -11691,13 +11691,13 @@ function MyBasicForwardRefComponent(props: Props) {
     <>
       <div>
         <input
-          class=\\"input-551faa42\\"
+          class=\\"input-478df522\\"
           ref={props.inputRef!}
           value={name()}
           onInput={(event) => setName(event.target.value)}
         />
       </div>
-      <style>{\`.input-551faa42 {
+      <style>{\`.input-478df522 {
   color: red;
 }\`}</style>
     </>
@@ -11723,13 +11723,13 @@ function MyBasicForwardRefComponent(props: Props) {
     <>
       <div>
         <input
-          class=\\"input-551faa42\\"
+          class=\\"input-478df522\\"
           ref={props.inputRef!}
           value={name()}
           onInput={(event) => setName(event.target.value)}
         />
       </div>
-      <style>{\`.input-551faa42 {
+      <style>{\`.input-478df522 {
   color: red;
 }\`}</style>
     </>
@@ -11828,11 +11828,11 @@ function MyBasicComponent(props: any) {
         <MyComp class=\\"test test2\\">
           Hello! I can run in React, Vue, Solid, or Liquid!
         </MyComp>
-        <div class=\\"test2 test div-590a063c\\">
+        <div class=\\"test2 test div-6ef0b03e\\">
           Hello! I can run in React, Vue, Solid, or Liquid!
         </div>
       </div>
-      <style>{\`.div-590a063c {
+      <style>{\`.div-6ef0b03e {
   padding: 10px;
 }\`}</style>
     </>
@@ -11853,11 +11853,11 @@ function MyBasicComponent(props: any) {
         <MyComp class=\\"test test2\\">
           Hello! I can run in React, Vue, Solid, or Liquid!
         </MyComp>
-        <div class=\\"test2 test div-590a063c\\">
+        <div class=\\"test2 test div-6ef0b03e\\">
           Hello! I can run in React, Vue, Solid, or Liquid!
         </div>
       </div>
-      <style>{\`.div-590a063c {
+      <style>{\`.div-6ef0b03e {
   padding: 10px;
 }\`}</style>
     </>
@@ -11872,10 +11872,10 @@ exports[`Solid > jsx > Typescript Test > class + css 1`] = `
 "function MyBasicComponent(props: any) {
   return (
     <>
-      <div class=\\"test div-fb8d32e6\\">
+      <div class=\\"test div-defca3e2\\">
         Hello! I can run in React, Vue, Solid, or Liquid!
       </div>
-      <style>{\`.div-fb8d32e6 {
+      <style>{\`.div-defca3e2 {
   padding: 10px;
 }\`}</style>
     </>
@@ -11890,10 +11890,10 @@ exports[`Solid > jsx > Typescript Test > class + css 2`] = `
 "function MyBasicComponent(props: any) {
   return (
     <>
-      <div class=\\"test div-fb8d32e6\\">
+      <div class=\\"test div-defca3e2\\">
         Hello! I can run in React, Vue, Solid, or Liquid!
       </div>
-      <style>{\`.div-fb8d32e6 {
+      <style>{\`.div-defca3e2 {
   padding: 10px;
 }\`}</style>
     </>
@@ -11908,10 +11908,10 @@ exports[`Solid > jsx > Typescript Test > className + css 1`] = `
 "function MyBasicComponent(props: any) {
   return (
     <>
-      <div class=\\"test div-fb8d32e6\\">
+      <div class=\\"test div-defca3e2\\">
         Hello! I can run in React, Vue, Solid, or Liquid!
       </div>
-      <style>{\`.div-fb8d32e6 {
+      <style>{\`.div-defca3e2 {
   padding: 10px;
 }\`}</style>
     </>
@@ -11926,10 +11926,10 @@ exports[`Solid > jsx > Typescript Test > className + css 2`] = `
 "function MyBasicComponent(props: any) {
   return (
     <>
-      <div class=\\"test div-fb8d32e6\\">
+      <div class=\\"test div-defca3e2\\">
         Hello! I can run in React, Vue, Solid, or Liquid!
       </div>
-      <style>{\`.div-fb8d32e6 {
+      <style>{\`.div-defca3e2 {
   padding: 10px;
 }\`}</style>
     </>
@@ -12006,10 +12006,10 @@ function MyBasicComponent(props: any) {
 
   return (
     <>
-      <div class={classState() + \\" div-70b306de\\"} style={styleState()}>
+      <div class={classState() + \\" div-023ce23d\\"} style={styleState()}>
         Hello! I can run in React, Vue, Solid, or Liquid!
       </div>
-      <style>{\`.div-70b306de {
+      <style>{\`.div-023ce23d {
   padding: 10px;
 }\`}</style>
     </>
@@ -12032,10 +12032,10 @@ function MyBasicComponent(props: any) {
 
   return (
     <>
-      <div class={classState() + \\" div-70b306de\\"} style={styleState()}>
+      <div class={classState() + \\" div-023ce23d\\"} style={styleState()}>
         Hello! I can run in React, Vue, Solid, or Liquid!
       </div>
-      <style>{\`.div-70b306de {
+      <style>{\`.div-023ce23d {
   padding: 10px;
 }\`}</style>
     </>
@@ -12874,20 +12874,20 @@ exports[`Solid > jsx > Typescript Test > nestedStyles 1`] = `
 "function NestedStyles(props: any) {
   return (
     <>
-      <div class=\\"div-7ff9918d\\">Hello world</div>
-      <style>{\`.div-7ff9918d {
+      <div class=\\"div-7671878a\\">Hello world</div>
+      <style>{\`.div-7671878a {
   display: flex;
   --bar: red;
   color: var(--bar);
-}@media (max-width: env(--mobile)) { .div-7ff9918d {   display: block; } }.div-7ff9918d:hover {
+}@media (max-width: env(--mobile)) { .div-7671878a {   display: block; } }.div-7671878a:hover {
   display: flex;
-}.div-7ff9918d:active {
+}.div-7671878a:active {
   display: inline;
-}.div-7ff9918d .nested-selector {
+}.div-7671878a .nested-selector {
   display: grid;
-}.div-7ff9918d .nested-selector:hover {
+}.div-7671878a .nested-selector:hover {
   display: block;
-}.div-7ff9918d.nested-selector:active {
+}.div-7671878a.nested-selector:active {
   display: inline-block;
 }\`}</style>
     </>
@@ -12902,20 +12902,20 @@ exports[`Solid > jsx > Typescript Test > nestedStyles 2`] = `
 "function NestedStyles(props: any) {
   return (
     <>
-      <div class=\\"div-7ff9918d\\">Hello world</div>
-      <style>{\`.div-7ff9918d {
+      <div class=\\"div-7671878a\\">Hello world</div>
+      <style>{\`.div-7671878a {
   display: flex;
   --bar: red;
   color: var(--bar);
-}@media (max-width: env(--mobile)) { .div-7ff9918d {   display: block; } }.div-7ff9918d:hover {
+}@media (max-width: env(--mobile)) { .div-7671878a {   display: block; } }.div-7671878a:hover {
   display: flex;
-}.div-7ff9918d:active {
+}.div-7671878a:active {
   display: inline;
-}.div-7ff9918d .nested-selector {
+}.div-7671878a .nested-selector {
   display: grid;
-}.div-7ff9918d .nested-selector:hover {
+}.div-7671878a .nested-selector:hover {
   display: block;
-}.div-7ff9918d.nested-selector:active {
+}.div-7671878a.nested-selector:active {
   display: inline-block;
 }\`}</style>
     </>
@@ -14242,13 +14242,13 @@ function RenderContent(props: Props) {
         }}
       >
         <div
-          class=\\"div-67b8c6a0\\"
+          class=\\"div-53cc6e64\\"
           onClick={(event) => trackClick(props.content.id)}
         >
           <RenderBlocks blocks={props.content.blocks}></RenderBlocks>
         </div>
       </BuilderContext.Provider>
-      <style>{\`.div-67b8c6a0 {
+      <style>{\`.div-53cc6e64 {
   display: flex;
   flex-direction: columns;
 }\`}</style>
@@ -14304,13 +14304,13 @@ function RenderContent(props: Props) {
         }}
       >
         <div
-          class=\\"div-67b8c6a0\\"
+          class=\\"div-53cc6e64\\"
           onClick={(event) => trackClick(props.content.id)}
         >
           <RenderBlocks blocks={props.content.blocks}></RenderBlocks>
         </div>
       </BuilderContext.Provider>
-      <style>{\`.div-67b8c6a0 {
+      <style>{\`.div-53cc6e64 {
   display: flex;
   flex-direction: columns;
 }\`}</style>
@@ -14868,11 +14868,11 @@ function MyBasicComponent(props: Props) {
 
   return (
     <>
-      <div class=\\"test div-52492278\\">
+      <div class=\\"test div-8c5e5900\\">
         {props.id}
         {props.foo.bar.baz}
       </div>
-      <style>{\`.div-52492278 {
+      <style>{\`.div-8c5e5900 {
   padding: 10px;
 }\`}</style>
     </>
@@ -14911,11 +14911,11 @@ function MyBasicComponent(props: Props) {
 
   return (
     <>
-      <div class=\\"test div-52492278\\">
+      <div class=\\"test div-8c5e5900\\">
         {props.id}
         {props.foo.bar.baz}
       </div>
-      <style>{\`.div-52492278 {
+      <style>{\`.div-8c5e5900 {
   padding: 10px;
 }\`}</style>
     </>
@@ -15097,12 +15097,12 @@ exports[`Solid > jsx > Typescript Test > styleClassAndCss 1`] = `
   return (
     <>
       <div
-        class=\\"builder-column div-53ff897e\\"
+        class=\\"builder-column div-35e34a45\\"
         style={{
           width: \\"100%\\",
         }}
       ></div>
-      <style>{\`.div-53ff897e {
+      <style>{\`.div-35e34a45 {
   display: flex;
   flex-direction: column;
   align-items: stretch;
@@ -15120,12 +15120,12 @@ exports[`Solid > jsx > Typescript Test > styleClassAndCss 2`] = `
   return (
     <>
       <div
-        class=\\"builder-column div-53ff897e\\"
+        class=\\"builder-column div-35e34a45\\"
         style={{
           width: \\"100%\\",
         }}
       ></div>
-      <style>{\`.div-53ff897e {
+      <style>{\`.div-35e34a45 {
   display: flex;
   flex-direction: column;
   align-items: stretch;
@@ -15143,10 +15143,10 @@ exports[`Solid > jsx > Typescript Test > stylePropClassAndCss 1`] = `
   return (
     <>
       <div
-        class={props.attributes.class + \\" div-40d76e28\\"}
+        class={props.attributes.class + \\" div-bee7e1a8\\"}
         style={props.attributes.style}
       ></div>
-      <style>{\`.div-40d76e28 {
+      <style>{\`.div-bee7e1a8 {
   display: flex;
   flex-direction: column;
   align-items: stretch;
@@ -15164,10 +15164,10 @@ exports[`Solid > jsx > Typescript Test > stylePropClassAndCss 2`] = `
   return (
     <>
       <div
-        class={props.attributes.class + \\" div-40d76e28\\"}
+        class={props.attributes.class + \\" div-bee7e1a8\\"}
         style={props.attributes.style}
       ></div>
-      <style>{\`.div-40d76e28 {
+      <style>{\`.div-bee7e1a8 {
   display: flex;
   flex-direction: column;
   align-items: stretch;
@@ -15488,7 +15488,7 @@ exports[`Solid > jsx > Typescript Test > use-style-and-css 1`] = `
 "function MyComponent(props: any) {
   return (
     <>
-      <button class=\\"button-11144e0c\\" type=\\"button\\">
+      <button class=\\"button-49a5373c\\" type=\\"button\\">
         Button
       </button>
       <style>{\`
@@ -15497,7 +15497,7 @@ exports[`Solid > jsx > Typescript Test > use-style-and-css 1`] = `
             outline: 1px solid black;
         }
 
-.button-11144e0c {
+.button-49a5373c {
   background: blue;
   color: white;
 }\`}</style>
@@ -15513,7 +15513,7 @@ exports[`Solid > jsx > Typescript Test > use-style-and-css 2`] = `
 "function MyComponent(props: any) {
   return (
     <>
-      <button class=\\"button-11144e0c\\" type=\\"button\\">
+      <button class=\\"button-49a5373c\\" type=\\"button\\">
         Button
       </button>
       <style>{\`
@@ -15522,7 +15522,7 @@ exports[`Solid > jsx > Typescript Test > use-style-and-css 2`] = `
             outline: 1px solid black;
         }
 
-.button-11144e0c {
+.button-49a5373c {
   background: blue;
   color: white;
 }\`}</style>
diff --git a/packages/core/src/__tests__/__snapshots__/stencil.test.ts.snap b/packages/core/src/__tests__/__snapshots__/stencil.test.ts.snap
index fd39b5c1f0..58d182913b 100644
--- a/packages/core/src/__tests__/__snapshots__/stencil.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/stencil.test.ts.snap
@@ -508,7 +508,9 @@ export class MyBasicRefAssignmentComponent {
   render() {
     return (
       <div>
-        <button onClick={(evt) => this.handlerClick(evt)}>Click</button>
+        <button onClick={async (evt) => await this.handlerClick(evt)}>
+          Click
+        </button>
       </div>
     );
   }
@@ -1710,8 +1712,8 @@ export class SmileReviews {
             ></textarea>
             <button
               class=\\"button\\"
-              onClick={(event) => {
-                event.preventDefault();
+              onClick={(ev) => {
+                ev.preventDefault();
                 this.showReviewPrompt = false;
               }}
             >
@@ -4194,7 +4196,9 @@ export class MyBasicRefAssignmentComponent {
   render() {
     return (
       <div>
-        <button onClick={(evt) => this.handlerClick(evt)}>Click</button>
+        <button onClick={async (evt) => await this.handlerClick(evt)}>
+          Click
+        </button>
       </div>
     );
   }
@@ -5572,8 +5576,8 @@ export class SmileReviews {
             ></textarea>
             <button
               class=\\"button\\"
-              onClick={(event) => {
-                event.preventDefault();
+              onClick={(ev) => {
+                ev.preventDefault();
                 this.showReviewPrompt = false;
               }}
             >
diff --git a/packages/core/src/__tests__/__snapshots__/styles.test.ts.snap b/packages/core/src/__tests__/__snapshots__/styles.test.ts.snap
index 1e60523103..a8544b9ab1 100644
--- a/packages/core/src/__tests__/__snapshots__/styles.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/styles.test.ts.snap
@@ -8,6 +8,7 @@ exports[`Styles > class and CSS are merged 1`] = `
       "@type": "@builder.io/mitosis/node",
       "bindings": {
         "css": {
+          "bindingType": "expression",
           "code": "{
   padding: '10px'
 }",
@@ -94,6 +95,7 @@ exports[`Styles > class and className are merged 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "css": {
+              "bindingType": "expression",
               "code": "{
   padding: '10px'
 }",
@@ -164,6 +166,7 @@ exports[`Styles > className and CSS are merged 1`] = `
       "@type": "@builder.io/mitosis/node",
       "bindings": {
         "css": {
+          "bindingType": "expression",
           "code": "{
   padding: '10px'
 }",
diff --git a/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap b/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap
index ced6426aba..90d8f7a5f1 100644
--- a/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap
@@ -361,8 +361,8 @@ exports[`Svelte > jsx > Javascript Test > BasicRefAssignment 1`] = `
 
 <div>
   <button
-    on:click={(evt) => {
-      handlerClick(evt);
+    on:click={async (evt) => {
+      await handlerClick(evt);
     }}>Click</button
   >
 </div>"
@@ -1344,8 +1344,8 @@ exports[`Svelte > jsx > Javascript Test > Stamped.io 1`] = `
     <textarea placeholder=\\"How was your experience?\\" class=\\"textarea\\" />
     <button
       class=\\"button\\"
-      on:click={(event) => {
-        event.preventDefault();
+      on:click={(ev) => {
+        ev.preventDefault();
         showReviewPrompt = false;
       }}
     >
@@ -3342,8 +3342,8 @@ exports[`Svelte > jsx > Typescript Test > BasicRefAssignment 1`] = `
 
 <div>
   <button
-    on:click={(evt) => {
-      handlerClick(evt);
+    on:click={async (evt) => {
+      await handlerClick(evt);
     }}>Click</button
   >
 </div>"
@@ -4557,8 +4557,8 @@ exports[`Svelte > jsx > Typescript Test > Stamped.io 1`] = `
     <textarea placeholder=\\"How was your experience?\\" class=\\"textarea\\" />
     <button
       class=\\"button\\"
-      on:click={(event) => {
-        event.preventDefault();
+      on:click={(ev) => {
+        ev.preventDefault();
         showReviewPrompt = false;
       }}
     >
diff --git a/packages/core/src/__tests__/__snapshots__/taro.test.ts.snap b/packages/core/src/__tests__/__snapshots__/taro.test.ts.snap
index c5a468d78a..6b4ff1871f 100644
--- a/packages/core/src/__tests__/__snapshots__/taro.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/taro.test.ts.snap
@@ -394,7 +394,7 @@ function MyBasicRefAssignmentComponent(props) {
 
   return (
     <View>
-      <Button onClick={(evt) => handlerClick(evt)}>Click</Button>
+      <Button onClick={async (evt) => await handlerClick(evt)}>Click</Button>
     </View>
   );
 }
@@ -1390,8 +1390,8 @@ function SmileReviews(props) {
             />
             <Button
               className=\\"button\\"
-              onClick={(event) => {
-                event.preventDefault();
+              onClick={(ev) => {
+                ev.preventDefault();
                 setShowReviewPrompt(false);
               }}
             >
@@ -3895,7 +3895,7 @@ function MyBasicRefAssignmentComponent(props: Props) {
 
   return (
     <View>
-      <Button onClick={(evt) => handlerClick(evt)}>Click</Button>
+      <Button onClick={async (evt) => await handlerClick(evt)}>Click</Button>
     </View>
   );
 }
@@ -5070,8 +5070,8 @@ function SmileReviews(props: SmileReviewsProps) {
             />
             <Button
               className=\\"button\\"
-              onClick={(event) => {
-                event.preventDefault();
+              onClick={(ev) => {
+                ev.preventDefault();
                 setShowReviewPrompt(false);
               }}
             >
diff --git a/packages/core/src/__tests__/__snapshots__/vue-composition.test.ts.snap b/packages/core/src/__tests__/__snapshots__/vue-composition.test.ts.snap
index 1f6ba168a4..2e66cf8cf4 100644
--- a/packages/core/src/__tests__/__snapshots__/vue-composition.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/vue-composition.test.ts.snap
@@ -61,8 +61,8 @@ exports[`Vue > jsx > Javascript Test > AdvancedRef 1`] = `
         class=\\"input\\"
         ref=\\"inputRef\\"
         :value=\\"name\\"
-        @blur=\\"onBlur()\\"
-        @change=\\"name = $event.target.value\\"
+        @blur=\\"async (event) => onBlur()\\"
+        @change=\\"async (event) => (name = event.target.value)\\"
       />
       <label for=\\"cars\\" ref=\\"inputNoArgRef\\"> Choose a car: </label>
       <select name=\\"cars\\" id=\\"cars\\">
@@ -114,7 +114,7 @@ exports[`Vue > jsx > Javascript Test > Basic 1`] = `
   <div class=\\"test div\\">
     <input
       :value=\\"DEFAULT_VALUES.name || name\\"
-      @change=\\"name = $event.target.value\\"
+      @change=\\"async (myEvent) => (name = myEvent.target.value)\\"
     />
     Hello! I can run in React, Vue, Solid, or Liquid! &gt;
   </div>
@@ -150,7 +150,11 @@ exports[`Vue > jsx > Javascript Test > Basic 2`] = `
       <template v-if=\\"person === name\\">
         <input
           :value=\\"name\\"
-          @change=\\"name = $event.target.value + ' and ' + person\\"
+          @change=\\"
+            async (event) => {
+              name = event.target.value + ' and ' + person;
+            }
+          \\"
         />
 
         Hello
@@ -174,7 +178,7 @@ exports[`Vue > jsx > Javascript Test > Basic Context 1`] = `
   <div>
     {{ myService.method(\\"hello\\") + name }}
     Hello! I can run in React, Vue, Solid, or Liquid!
-    <input @change=\\"onChange\\" />
+    <input @change=\\"async (event) => onChange\\" />
   </div>
 </template>
 
@@ -315,7 +319,11 @@ exports[`Vue > jsx > Javascript Test > BasicFor 1`] = `
     <template :key=\\"index\\" v-for=\\"(person, index) in names\\">
       <input
         :value=\\"name\\"
-        @change=\\"name = $event.target.value + ' and ' + person\\"
+        @change=\\"
+          async (event) => {
+            name = event.target.value + ' and ' + person;
+          }
+        \\"
       />
 
       Hello
@@ -345,8 +353,8 @@ exports[`Vue > jsx > Javascript Test > BasicRef 1`] = `
         class=\\"input\\"
         ref=\\"inputRef\\"
         :value=\\"name\\"
-        @blur=\\"onBlur()\\"
-        @change=\\"name = $event.target.value\\"
+        @blur=\\"async (event) => onBlur()\\"
+        @change=\\"async (event) => (name = event.target.value)\\"
       />
       <label for=\\"cars\\" ref=\\"inputNoArgRef\\"> Choose a car: </label>
       <select name=\\"cars\\" id=\\"cars\\">
@@ -388,7 +396,7 @@ function lowerCaseName() {
 
 exports[`Vue > jsx > Javascript Test > BasicRefAssignment 1`] = `
 "<template>
-  <div><button @click=\\"handlerClick($event)\\">Click</button></div>
+  <div><button @click=\\"await handlerClick($event)\\">Click</button></div>
 </template>
 
 <script setup>
@@ -406,7 +414,7 @@ exports[`Vue > jsx > Javascript Test > BasicRefPrevious 1`] = `
 "<template>
   <div>
     <h1>Now: {{ count }}, before: {{ prevCount }}</h1>
-    <button @click=\\"count += 1\\">Increment</button>
+    <button @click=\\"async (event) => (count += 1)\\">Increment</button>
   </div>
 </template>
 
@@ -536,7 +544,7 @@ exports[`Vue > jsx > Javascript Test > ContentSlotJSX 1`] = `
     <div
       :name=\\"$slots.content ? 'name1' : 'name2'\\"
       :title=\\"$slots.content ? 'title1' : 'title2'\\"
-      @click=\\"show()\\"
+      @click=\\"async (event) => show()\\"
       :class=\\"cls\\"
       v-bind=\\"attributes\\"
     >
@@ -713,7 +721,7 @@ exports[`Vue > jsx > Javascript Test > Form 1`] = `
     :action=\\"!sendWithJs && action\\"
     :method=\\"method\\"
     :name=\\"name\\"
-    @submit=\\"onSubmit($event)\\"
+    @submit=\\"async (event) => onSubmit(event)\\"
     v-bind=\\"attributes\\"
   >
     <template v-if=\\"builderBlock && builderBlock.children\\">
@@ -1032,7 +1040,7 @@ exports[`Vue > jsx > Javascript Test > Image 1`] = `
           :aria-role=\\"altText ? 'presentation' : undefined\\"
           :class=\\"'builder-image' + (_class ? ' ' + _class : '') + ' img'\\"
           :src=\\"image\\"
-          @load=\\"setLoaded()\\"
+          @load=\\"async (event) => setLoaded()\\"
           :srcset=\\"srcset\\"
           :sizes=\\"sizes\\"
         />
@@ -1169,7 +1177,7 @@ exports[`Vue > jsx > Javascript Test > Input 1`] = `
     :value=\\"value\\"
     :defaultValue=\\"defaultValue\\"
     :required=\\"required\\"
-    @change=\\"onChange?.($event.target.value)\\"
+    @change=\\"async (event) => onChange?.(event.target.value)\\"
     v-bind=\\"attributes\\"
   />
 </template>
@@ -1343,7 +1351,9 @@ exports[`Vue > jsx > Javascript Test > SlotNamed 1`] = `
 exports[`Vue > jsx > Javascript Test > Stamped.io 1`] = `
 "<template>
   <div :data-user=\\"name\\">
-    <button @click=\\"showReviewPrompt = true\\">Write a review</button>
+    <button @click=\\"async (event) => (showReviewPrompt = true)\\">
+      Write a review
+    </button>
     <template v-if=\\"showReviewPrompt || 'asdf'\\">
       <input placeholder=\\"Email\\" />
       <input placeholder=\\"Title\\" class=\\"input\\" />
@@ -1354,8 +1364,10 @@ exports[`Vue > jsx > Javascript Test > Stamped.io 1`] = `
       <button
         class=\\"button\\"
         @click=\\"
-          $event.preventDefault();
-          showReviewPrompt = false;
+          async (ev) => {
+            ev.preventDefault();
+            showReviewPrompt = false;
+          }
         \\"
       >
         Submit
@@ -1577,7 +1589,7 @@ exports[`Vue > jsx > Javascript Test > basicForwardRef 1`] = `
       class=\\"input\\"
       ref=\\"inputRef\\"
       :value=\\"name\\"
-      @change=\\"name = $event.target.value\\"
+      @change=\\"async (event) => (name = event.target.value)\\"
     />
   </div>
 </template>
@@ -1603,7 +1615,7 @@ exports[`Vue > jsx > Javascript Test > basicForwardRefMetadata 1`] = `
       class=\\"input\\"
       ref=\\"inputRef\\"
       :value=\\"name\\"
-      @change=\\"name = $event.target.value\\"
+      @change=\\"async (event) => (name = event.target.value)\\"
     />
   </div>
 </template>
@@ -1827,7 +1839,11 @@ exports[`Vue > jsx > Javascript Test > defaultProps 1`] = `
     </template>
 
     <template v-if=\\"!link\\">
-      <button type=\\"button\\" @click=\\"onClick()\\" v-bind=\\"attributes\\">
+      <button
+        type=\\"button\\"
+        @click=\\"async (event) => onClick()\\"
+        v-bind=\\"attributes\\"
+      >
         {{ buttonText }}
       </button>
     </template>
@@ -1861,7 +1877,11 @@ exports[`Vue > jsx > Javascript Test > defaultPropsOutsideComponent 1`] = `
     </template>
 
     <template v-if=\\"!link\\">
-      <button type=\\"button\\" @click=\\"onClick($event)\\" v-bind=\\"attributes\\">
+      <button
+        type=\\"button\\"
+        @click=\\"async (event) => onClick(event)\\"
+        v-bind=\\"attributes\\"
+      >
         {{ text }}
       </button>
     </template>
@@ -2088,7 +2108,7 @@ exports[`Vue > jsx > Javascript Test > onEvent 1`] = `
   <div
     class=\\"builder-embed\\"
     ref=\\"elem\\"
-    @initeditingbldr=\\"elem_onInitEditingBldr($event)\\"
+    @initeditingbldr=\\"async (event) => elem_onInitEditingBldr(event)\\"
   >
     <div>Test</div>
   </div>
@@ -2562,7 +2582,7 @@ const renderComponentTag = computed(() => {
 
 exports[`Vue > jsx > Javascript Test > renderContentExample 1`] = `
 "<template>
-  <div class=\\"div\\" @click=\\"trackClick(content.id)\\">
+  <div class=\\"div\\" @click=\\"async (event) => trackClick(content.id)\\">
     <RenderBlocks :blocks=\\"content.blocks\\"></RenderBlocks>
   </div>
 </template>
@@ -3217,8 +3237,8 @@ exports[`Vue > jsx > Typescript Test > AdvancedRef 1`] = `
         class=\\"input\\"
         ref=\\"inputRef\\"
         :value=\\"name\\"
-        @blur=\\"onBlur()\\"
-        @change=\\"name = $event.target.value\\"
+        @blur=\\"async (event) => onBlur()\\"
+        @change=\\"async (event) => (name = event.target.value)\\"
       />
       <label for=\\"cars\\" ref=\\"inputNoArgRef\\"> Choose a car: </label>
       <select name=\\"cars\\" id=\\"cars\\">
@@ -3274,7 +3294,7 @@ exports[`Vue > jsx > Typescript Test > Basic 1`] = `
   <div class=\\"test div\\">
     <input
       :value=\\"DEFAULT_VALUES.name || name\\"
-      @change=\\"name = $event.target.value\\"
+      @change=\\"async (myEvent) => (name = myEvent.target.value)\\"
     />
     Hello! I can run in React, Vue, Solid, or Liquid! &gt;
   </div>
@@ -3314,7 +3334,11 @@ exports[`Vue > jsx > Typescript Test > Basic 2`] = `
       <template v-if=\\"person === name\\">
         <input
           :value=\\"name\\"
-          @change=\\"name = $event.target.value + ' and ' + person\\"
+          @change=\\"
+            async (event) => {
+              name = event.target.value + ' and ' + person;
+            }
+          \\"
         />
 
         Hello
@@ -3338,7 +3362,7 @@ exports[`Vue > jsx > Typescript Test > Basic Context 1`] = `
   <div>
     {{ myService.method(\\"hello\\") + name }}
     Hello! I can run in React, Vue, Solid, or Liquid!
-    <input @change=\\"onChange\\" />
+    <input @change=\\"async (event) => onChange\\" />
   </div>
 </template>
 
@@ -3489,7 +3513,11 @@ exports[`Vue > jsx > Typescript Test > BasicFor 1`] = `
     <template :key=\\"index\\" v-for=\\"(person, index) in names\\">
       <input
         :value=\\"name\\"
-        @change=\\"name = $event.target.value + ' and ' + person\\"
+        @change=\\"
+          async (event) => {
+            name = event.target.value + ' and ' + person;
+          }
+        \\"
       />
 
       Hello
@@ -3519,8 +3547,8 @@ exports[`Vue > jsx > Typescript Test > BasicRef 1`] = `
         class=\\"input\\"
         ref=\\"inputRef\\"
         :value=\\"name\\"
-        @blur=\\"onBlur()\\"
-        @change=\\"name = $event.target.value\\"
+        @blur=\\"async (event) => onBlur()\\"
+        @change=\\"async (event) => (name = event.target.value)\\"
       />
       <label for=\\"cars\\" ref=\\"inputNoArgRef\\"> Choose a car: </label>
       <select name=\\"cars\\" id=\\"cars\\">
@@ -3566,7 +3594,7 @@ function lowerCaseName() {
 
 exports[`Vue > jsx > Typescript Test > BasicRefAssignment 1`] = `
 "<template>
-  <div><button @click=\\"handlerClick($event)\\">Click</button></div>
+  <div><button @click=\\"await handlerClick($event)\\">Click</button></div>
 </template>
 
 <script setup lang=\\"ts\\">
@@ -3588,7 +3616,7 @@ exports[`Vue > jsx > Typescript Test > BasicRefPrevious 1`] = `
 "<template>
   <div>
     <h1>Now: {{ count }}, before: {{ prevCount }}</h1>
-    <button @click=\\"count += 1\\">Increment</button>
+    <button @click=\\"async (event) => (count += 1)\\">Increment</button>
   </div>
 </template>
 
@@ -3751,7 +3779,7 @@ exports[`Vue > jsx > Typescript Test > ContentSlotJSX 1`] = `
     <div
       :name=\\"$slots.content ? 'name1' : 'name2'\\"
       :title=\\"$slots.content ? 'title1' : 'title2'\\"
-      @click=\\"show()\\"
+      @click=\\"async (event) => show()\\"
       :class=\\"cls\\"
       v-bind=\\"attributes\\"
     >
@@ -3944,7 +3972,7 @@ exports[`Vue > jsx > Typescript Test > Form 1`] = `
     :action=\\"!sendWithJs && action\\"
     :method=\\"method\\"
     :name=\\"name\\"
-    @submit=\\"onSubmit($event)\\"
+    @submit=\\"async (event) => onSubmit(event)\\"
     v-bind=\\"attributes\\"
   >
     <template v-if=\\"builderBlock && builderBlock.children\\">
@@ -4275,7 +4303,7 @@ exports[`Vue > jsx > Typescript Test > Image 1`] = `
           :aria-role=\\"altText ? 'presentation' : undefined\\"
           :class=\\"'builder-image' + (_class ? ' ' + _class : '') + ' img'\\"
           :src=\\"image\\"
-          @load=\\"setLoaded()\\"
+          @load=\\"async (event) => setLoaded()\\"
           :srcset=\\"srcset\\"
           :sizes=\\"sizes\\"
         />
@@ -4434,7 +4462,7 @@ exports[`Vue > jsx > Typescript Test > Input 1`] = `
     :value=\\"value\\"
     :defaultValue=\\"defaultValue\\"
     :required=\\"required\\"
-    @change=\\"onChange?.($event.target.value)\\"
+    @change=\\"async (event) => onChange?.(event.target.value)\\"
     v-bind=\\"attributes\\"
   />
 </template>
@@ -4652,7 +4680,9 @@ type Props = {
 exports[`Vue > jsx > Typescript Test > Stamped.io 1`] = `
 "<template>
   <div :data-user=\\"name\\">
-    <button @click=\\"showReviewPrompt = true\\">Write a review</button>
+    <button @click=\\"async (event) => (showReviewPrompt = true)\\">
+      Write a review
+    </button>
     <template v-if=\\"showReviewPrompt || 'asdf'\\">
       <input placeholder=\\"Email\\" />
       <input placeholder=\\"Title\\" class=\\"input\\" />
@@ -4663,8 +4693,10 @@ exports[`Vue > jsx > Typescript Test > Stamped.io 1`] = `
       <button
         class=\\"button\\"
         @click=\\"
-          $event.preventDefault();
-          showReviewPrompt = false;
+          async (ev) => {
+            ev.preventDefault();
+            showReviewPrompt = false;
+          }
         \\"
       >
         Submit
@@ -4922,7 +4954,7 @@ exports[`Vue > jsx > Typescript Test > basicForwardRef 1`] = `
       class=\\"input\\"
       ref=\\"inputRef\\"
       :value=\\"name\\"
-      @change=\\"name = $event.target.value\\"
+      @change=\\"async (event) => (name = event.target.value)\\"
     />
   </div>
 </template>
@@ -4953,7 +4985,7 @@ exports[`Vue > jsx > Typescript Test > basicForwardRefMetadata 1`] = `
       class=\\"input\\"
       ref=\\"inputRef\\"
       :value=\\"name\\"
-      @change=\\"name = $event.target.value\\"
+      @change=\\"async (event) => (name = event.target.value)\\"
     />
   </div>
 </template>
@@ -5197,7 +5229,11 @@ exports[`Vue > jsx > Typescript Test > defaultProps 1`] = `
     </template>
 
     <template v-if=\\"!link\\">
-      <button type=\\"button\\" @click=\\"onClick()\\" v-bind=\\"attributes\\">
+      <button
+        type=\\"button\\"
+        @click=\\"async (event) => onClick()\\"
+        v-bind=\\"attributes\\"
+      >
         {{ buttonText }}
       </button>
     </template>
@@ -5241,7 +5277,11 @@ exports[`Vue > jsx > Typescript Test > defaultPropsOutsideComponent 1`] = `
     </template>
 
     <template v-if=\\"!link\\">
-      <button type=\\"button\\" @click=\\"onClick($event)\\" v-bind=\\"attributes\\">
+      <button
+        type=\\"button\\"
+        @click=\\"async (event) => onClick(event)\\"
+        v-bind=\\"attributes\\"
+      >
         {{ text }}
       </button>
     </template>
@@ -5496,7 +5536,7 @@ exports[`Vue > jsx > Typescript Test > onEvent 1`] = `
   <div
     class=\\"builder-embed\\"
     ref=\\"elem\\"
-    @initeditingbldr=\\"elem_onInitEditingBldr($event)\\"
+    @initeditingbldr=\\"async (event) => elem_onInitEditingBldr(event)\\"
   >
     <div>Test</div>
   </div>
@@ -6029,7 +6069,7 @@ const renderComponentTag = computed(() => {
 
 exports[`Vue > jsx > Typescript Test > renderContentExample 1`] = `
 "<template>
-  <div class=\\"div\\" @click=\\"trackClick(content.id)\\">
+  <div class=\\"div\\" @click=\\"async (event) => trackClick(content.id)\\">
     <RenderBlocks :blocks=\\"content.blocks\\"></RenderBlocks>
   </div>
 </template>
@@ -6676,7 +6716,10 @@ register();
 exports[`Vue > svelte > Javascript Test > basic 1`] = `
 "<template>
   <div>
-    <input @change=\\"name = $event.target.value\\" :value=\\"name\\" />
+    <input
+      @change=\\"async (event) => (name = event.target.value)\\"
+      :value=\\"name\\"
+    />
     Hello! I can run in React, Vue, Solid, or Liquid!
   </div>
 </template>
@@ -6695,37 +6738,37 @@ exports[`Vue > svelte > Javascript Test > bindGroup 1`] = `
       type=\\"radio\\"
       value=\\"Plain\\"
       :checked=\\"tortilla === 'Plain'\\"
-      @change=\\"tortilla = $event.target.value\\"
+      @change=\\"async (event) => (tortilla = event.target.value)\\"
     /><input
       type=\\"radio\\"
       value=\\"Whole wheat\\"
       :checked=\\"tortilla === 'Whole wheat'\\"
-      @change=\\"tortilla = $event.target.value\\"
+      @change=\\"async (event) => (tortilla = event.target.value)\\"
     /><input
       type=\\"radio\\"
       value=\\"Spinach\\"
       :checked=\\"tortilla === 'Spinach'\\"
-      @change=\\"tortilla = $event.target.value\\"
+      @change=\\"async (event) => (tortilla = event.target.value)\\"
     /><br /><br /><input
       type=\\"checkbox\\"
       value=\\"Rice\\"
       :checked=\\"fillings === 'Rice'\\"
-      @change=\\"fillings = $event.target.value\\"
+      @change=\\"async (event) => (fillings = event.target.value)\\"
     /><input
       type=\\"checkbox\\"
       value=\\"Beans\\"
       :checked=\\"fillings === 'Beans'\\"
-      @change=\\"fillings = $event.target.value\\"
+      @change=\\"async (event) => (fillings = event.target.value)\\"
     /><input
       type=\\"checkbox\\"
       value=\\"Cheese\\"
       :checked=\\"fillings === 'Cheese'\\"
-      @change=\\"fillings = $event.target.value\\"
+      @change=\\"async (event) => (fillings = event.target.value)\\"
     /><input
       type=\\"checkbox\\"
       value=\\"Guac (extra)\\"
       :checked=\\"fillings === 'Guac (extra)'\\"
-      @change=\\"fillings = $event.target.value\\"
+      @change=\\"async (event) => (fillings = event.target.value)\\"
     />
     <p>Tortilla: {{ tortilla }}</p>
     <p>Fillings: {{ fillings }}</p>
@@ -6802,9 +6845,9 @@ const numbers = ref([\\"one\\", \\"two\\", \\"three\\"]);
 exports[`Vue > svelte > Javascript Test > eventHandlers 1`] = `
 "<template>
   <div>
-    <button @click=\\"log('hi')\\">Log</button
-    ><button @click=\\"log($event)\\">Log</button
-    ><button @click=\\"log($event)\\">Log</button>
+    <button @click=\\"async (a) => log('hi')\\">Log</button
+    ><button @click=\\"async (event) => log(event)\\">Log</button
+    ><button @click=\\"async (event) => log(event)\\">Log</button>
   </div>
 </template>
 
@@ -6830,11 +6873,11 @@ const html = ref(\\"<b>bold</b>\\");
 exports[`Vue > svelte > Javascript Test > ifElse 1`] = `
 "<template>
   <template v-if=\\"show\\">
-    <button @click=\\"toggle($event)\\">Hide</button>
+    <button @click=\\"async (event) => toggle(event)\\">Hide</button>
   </template>
 
   <template v-else>
-    <button @click=\\"toggle($event)\\">Show</button>
+    <button @click=\\"async (event) => toggle(event)\\">Show</button>
   </template>
 </template>
 
@@ -6905,9 +6948,13 @@ const lowercaseName = computed(() => {
 exports[`Vue > svelte > Javascript Test > reactiveWithFn 1`] = `
 "<template>
   <div>
-    <input type=\\"number\\" @change=\\"a = $event.target.value\\" :value=\\"a\\" /><input
+    <input
       type=\\"number\\"
-      @change=\\"b = $event.target.value\\"
+      @change=\\"async (event) => (a = event.target.value)\\"
+      :value=\\"a\\"
+    /><input
+      type=\\"number\\"
+      @change=\\"async (event) => (b = event.target.value)\\"
       :value=\\"b\\"
     />
     Result: {{ result }}
@@ -6982,7 +7029,10 @@ const b = ref(12);
 exports[`Vue > svelte > Typescript Test > basic 1`] = `
 "<template>
   <div>
-    <input @change=\\"name = $event.target.value\\" :value=\\"name\\" />
+    <input
+      @change=\\"async (event) => (name = event.target.value)\\"
+      :value=\\"name\\"
+    />
     Hello! I can run in React, Vue, Solid, or Liquid!
   </div>
 </template>
@@ -7001,37 +7051,37 @@ exports[`Vue > svelte > Typescript Test > bindGroup 1`] = `
       type=\\"radio\\"
       value=\\"Plain\\"
       :checked=\\"tortilla === 'Plain'\\"
-      @change=\\"tortilla = $event.target.value\\"
+      @change=\\"async (event) => (tortilla = event.target.value)\\"
     /><input
       type=\\"radio\\"
       value=\\"Whole wheat\\"
       :checked=\\"tortilla === 'Whole wheat'\\"
-      @change=\\"tortilla = $event.target.value\\"
+      @change=\\"async (event) => (tortilla = event.target.value)\\"
     /><input
       type=\\"radio\\"
       value=\\"Spinach\\"
       :checked=\\"tortilla === 'Spinach'\\"
-      @change=\\"tortilla = $event.target.value\\"
+      @change=\\"async (event) => (tortilla = event.target.value)\\"
     /><br /><br /><input
       type=\\"checkbox\\"
       value=\\"Rice\\"
       :checked=\\"fillings === 'Rice'\\"
-      @change=\\"fillings = $event.target.value\\"
+      @change=\\"async (event) => (fillings = event.target.value)\\"
     /><input
       type=\\"checkbox\\"
       value=\\"Beans\\"
       :checked=\\"fillings === 'Beans'\\"
-      @change=\\"fillings = $event.target.value\\"
+      @change=\\"async (event) => (fillings = event.target.value)\\"
     /><input
       type=\\"checkbox\\"
       value=\\"Cheese\\"
       :checked=\\"fillings === 'Cheese'\\"
-      @change=\\"fillings = $event.target.value\\"
+      @change=\\"async (event) => (fillings = event.target.value)\\"
     /><input
       type=\\"checkbox\\"
       value=\\"Guac (extra)\\"
       :checked=\\"fillings === 'Guac (extra)'\\"
-      @change=\\"fillings = $event.target.value\\"
+      @change=\\"async (event) => (fillings = event.target.value)\\"
     />
     <p>Tortilla: {{ tortilla }}</p>
     <p>Fillings: {{ fillings }}</p>
@@ -7108,9 +7158,9 @@ const numbers = ref([\\"one\\", \\"two\\", \\"three\\"]);
 exports[`Vue > svelte > Typescript Test > eventHandlers 1`] = `
 "<template>
   <div>
-    <button @click=\\"log('hi')\\">Log</button
-    ><button @click=\\"log($event)\\">Log</button
-    ><button @click=\\"log($event)\\">Log</button>
+    <button @click=\\"async (a) => log('hi')\\">Log</button
+    ><button @click=\\"async (event) => log(event)\\">Log</button
+    ><button @click=\\"async (event) => log(event)\\">Log</button>
   </div>
 </template>
 
@@ -7136,11 +7186,11 @@ const html = ref(\\"<b>bold</b>\\");
 exports[`Vue > svelte > Typescript Test > ifElse 1`] = `
 "<template>
   <template v-if=\\"show\\">
-    <button @click=\\"toggle($event)\\">Hide</button>
+    <button @click=\\"async (event) => toggle(event)\\">Hide</button>
   </template>
 
   <template v-else>
-    <button @click=\\"toggle($event)\\">Show</button>
+    <button @click=\\"async (event) => toggle(event)\\">Show</button>
   </template>
 </template>
 
@@ -7211,9 +7261,13 @@ const lowercaseName = computed(() => {
 exports[`Vue > svelte > Typescript Test > reactiveWithFn 1`] = `
 "<template>
   <div>
-    <input type=\\"number\\" @change=\\"a = $event.target.value\\" :value=\\"a\\" /><input
+    <input
+      type=\\"number\\"
+      @change=\\"async (event) => (a = event.target.value)\\"
+      :value=\\"a\\"
+    /><input
       type=\\"number\\"
-      @change=\\"b = $event.target.value\\"
+      @change=\\"async (event) => (b = event.target.value)\\"
       :value=\\"b\\"
     />
     Result: {{ result }}
diff --git a/packages/core/src/__tests__/__snapshots__/vue.test.ts.snap b/packages/core/src/__tests__/__snapshots__/vue.test.ts.snap
index 22a0078619..9352d70666 100644
--- a/packages/core/src/__tests__/__snapshots__/vue.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/vue.test.ts.snap
@@ -66,8 +66,8 @@ exports[`Vue > jsx > Javascript Test > AdvancedRef 1`] = `
         class=\\"input\\"
         ref=\\"inputRef\\"
         :value=\\"name\\"
-        @blur=\\"onBlur()\\"
-        @change=\\"name = $event.target.value\\"
+        @blur=\\"async (event) => onBlur()\\"
+        @change=\\"async (event) => (name = event.target.value)\\"
       />
       <label for=\\"cars\\" ref=\\"inputNoArgRef\\"> Choose a car: </label>
       <select name=\\"cars\\" id=\\"cars\\">
@@ -136,7 +136,7 @@ exports[`Vue > jsx > Javascript Test > Basic 1`] = `
   <div class=\\"test div\\">
     <input
       :value=\\"DEFAULT_VALUES.name || name\\"
-      @change=\\"name = $event.target.value\\"
+      @change=\\"async (myEvent) => (name = myEvent.target.value)\\"
     />
     Hello! I can run in React, Vue, Solid, or Liquid! &gt;
   </div>
@@ -178,7 +178,11 @@ exports[`Vue > jsx > Javascript Test > Basic 2`] = `
       <template v-if=\\"person === name\\">
         <input
           :value=\\"name\\"
-          @change=\\"name = $event.target.value + ' and ' + person\\"
+          @change=\\"
+            async (event) => {
+              name = event.target.value + ' and ' + person;
+            }
+          \\"
         />
 
         Hello
@@ -207,7 +211,7 @@ exports[`Vue > jsx > Javascript Test > Basic Context 1`] = `
   <div>
     {{ myService.method(\\"hello\\") + name }}
     Hello! I can run in React, Vue, Solid, or Liquid!
-    <input @change=\\"onChange\\" />
+    <input @change=\\"async (event) => onChange\\" />
   </div>
 </template>
 
@@ -408,7 +412,11 @@ exports[`Vue > jsx > Javascript Test > BasicFor 1`] = `
     <template :key=\\"index\\" v-for=\\"(person, index) in names\\">
       <input
         :value=\\"name\\"
-        @change=\\"name = $event.target.value + ' and ' + person\\"
+        @change=\\"
+          async (event) => {
+            name = event.target.value + ' and ' + person;
+          }
+        \\"
       />
 
       Hello
@@ -443,8 +451,8 @@ exports[`Vue > jsx > Javascript Test > BasicRef 1`] = `
         class=\\"input\\"
         ref=\\"inputRef\\"
         :value=\\"name\\"
-        @blur=\\"onBlur()\\"
-        @change=\\"name = $event.target.value\\"
+        @blur=\\"async (event) => onBlur()\\"
+        @change=\\"async (event) => (name = event.target.value)\\"
       />
       <label for=\\"cars\\" ref=\\"inputNoArgRef\\"> Choose a car: </label>
       <select name=\\"cars\\" id=\\"cars\\">
@@ -492,7 +500,7 @@ export default defineComponent({
 
 exports[`Vue > jsx > Javascript Test > BasicRefAssignment 1`] = `
 "<template>
-  <div><button @click=\\"handlerClick($event)\\">Click</button></div>
+  <div><button @click=\\"await handlerClick($event)\\">Click</button></div>
 </template>
 
 <script>
@@ -516,7 +524,7 @@ exports[`Vue > jsx > Javascript Test > BasicRefPrevious 1`] = `
 "<template>
   <div>
     <h1>Now: {{ count }}, before: {{ this.$refs.prevCount }}</h1>
-    <button @click=\\"count += 1\\">Increment</button>
+    <button @click=\\"async (event) => (count += 1)\\">Increment</button>
   </div>
 </template>
 
@@ -678,7 +686,7 @@ exports[`Vue > jsx > Javascript Test > ContentSlotJSX 1`] = `
     <div
       :name=\\"$slots.content ? 'name1' : 'name2'\\"
       :title=\\"$slots.content ? 'title1' : 'title2'\\"
-      @click=\\"show()\\"
+      @click=\\"async (event) => show()\\"
       :class=\\"cls\\"
       v-bind=\\"attributes\\"
     >
@@ -873,7 +881,7 @@ exports[`Vue > jsx > Javascript Test > Form 1`] = `
     :action=\\"!sendWithJs && action\\"
     :method=\\"method\\"
     :name=\\"name\\"
-    @submit=\\"onSubmit($event)\\"
+    @submit=\\"async (event) => onSubmit(event)\\"
     v-bind=\\"attributes\\"
   >
     <template v-if=\\"builderBlock && builderBlock.children\\">
@@ -1207,7 +1215,7 @@ exports[`Vue > jsx > Javascript Test > Image 1`] = `
           :aria-role=\\"altText ? 'presentation' : undefined\\"
           :class=\\"'builder-image' + (_class ? ' ' + _class : '') + ' img'\\"
           :src=\\"image\\"
-          @load=\\"setLoaded()\\"
+          @load=\\"async (event) => setLoaded()\\"
           :srcset=\\"srcset\\"
           :sizes=\\"sizes\\"
         />
@@ -1354,7 +1362,7 @@ exports[`Vue > jsx > Javascript Test > Input 1`] = `
     :value=\\"value\\"
     :defaultValue=\\"defaultValue\\"
     :required=\\"required\\"
-    @change=\\"onChange?.($event.target.value)\\"
+    @change=\\"async (event) => onChange?.(event.target.value)\\"
     v-bind=\\"attributes\\"
   />
 </template>
@@ -1591,7 +1599,9 @@ export default defineComponent({
 exports[`Vue > jsx > Javascript Test > Stamped.io 1`] = `
 "<template>
   <div :data-user=\\"name\\">
-    <button @click=\\"showReviewPrompt = true\\">Write a review</button>
+    <button @click=\\"async (event) => (showReviewPrompt = true)\\">
+      Write a review
+    </button>
     <template v-if=\\"showReviewPrompt || 'asdf'\\">
       <input placeholder=\\"Email\\" />
       <input placeholder=\\"Title\\" class=\\"input\\" />
@@ -1602,8 +1612,10 @@ exports[`Vue > jsx > Javascript Test > Stamped.io 1`] = `
       <button
         class=\\"button\\"
         @click=\\"
-          $event.preventDefault();
-          showReviewPrompt = false;
+          async (ev) => {
+            ev.preventDefault();
+            showReviewPrompt = false;
+          }
         \\"
       >
         Submit
@@ -1866,7 +1878,7 @@ exports[`Vue > jsx > Javascript Test > basicForwardRef 1`] = `
       class=\\"input\\"
       ref=\\"inputRef\\"
       :value=\\"name\\"
-      @change=\\"name = $event.target.value\\"
+      @change=\\"async (event) => (name = event.target.value)\\"
     />
   </div>
 </template>
@@ -1899,7 +1911,7 @@ exports[`Vue > jsx > Javascript Test > basicForwardRefMetadata 1`] = `
       class=\\"input\\"
       ref=\\"inputRef\\"
       :value=\\"name\\"
-      @change=\\"name = $event.target.value\\"
+      @change=\\"async (event) => (name = event.target.value)\\"
     />
   </div>
 </template>
@@ -2207,7 +2219,11 @@ exports[`Vue > jsx > Javascript Test > defaultProps 1`] = `
     </template>
 
     <template v-if=\\"!link\\">
-      <button type=\\"button\\" @click=\\"onClick()\\" v-bind=\\"attributes\\">
+      <button
+        type=\\"button\\"
+        @click=\\"async (event) => onClick()\\"
+        v-bind=\\"attributes\\"
+      >
         {{ buttonText }}
       </button>
     </template>
@@ -2249,7 +2265,11 @@ exports[`Vue > jsx > Javascript Test > defaultPropsOutsideComponent 1`] = `
     </template>
 
     <template v-if=\\"!link\\">
-      <button type=\\"button\\" @click=\\"onClick($event)\\" v-bind=\\"attributes\\">
+      <button
+        type=\\"button\\"
+        @click=\\"async (event) => onClick(event)\\"
+        v-bind=\\"attributes\\"
+      >
         {{ text }}
       </button>
     </template>
@@ -2557,7 +2577,7 @@ exports[`Vue > jsx > Javascript Test > onEvent 1`] = `
   <div
     class=\\"builder-embed\\"
     ref=\\"elem\\"
-    @initeditingbldr=\\"elem_onInitEditingBldr($event)\\"
+    @initeditingbldr=\\"async (event) => elem_onInitEditingBldr(event)\\"
   >
     <div>Test</div>
   </div>
@@ -3149,7 +3169,7 @@ export default defineComponent({
 
 exports[`Vue > jsx > Javascript Test > renderContentExample 1`] = `
 "<template>
-  <div class=\\"div\\" @click=\\"trackClick(content.id)\\">
+  <div class=\\"div\\" @click=\\"async (event) => trackClick(content.id)\\">
     <RenderBlocks :blocks=\\"content.blocks\\"></RenderBlocks>
   </div>
 </template>
@@ -4040,8 +4060,8 @@ exports[`Vue > jsx > Typescript Test > AdvancedRef 1`] = `
         class=\\"input\\"
         ref=\\"inputRef\\"
         :value=\\"name\\"
-        @blur=\\"onBlur()\\"
-        @change=\\"name = $event.target.value\\"
+        @blur=\\"async (event) => onBlur()\\"
+        @change=\\"async (event) => (name = event.target.value)\\"
       />
       <label for=\\"cars\\" ref=\\"inputNoArgRef\\"> Choose a car: </label>
       <select name=\\"cars\\" id=\\"cars\\">
@@ -4114,7 +4134,7 @@ exports[`Vue > jsx > Typescript Test > Basic 1`] = `
   <div class=\\"test div\\">
     <input
       :value=\\"DEFAULT_VALUES.name || name\\"
-      @change=\\"name = $event.target.value\\"
+      @change=\\"async (myEvent) => (name = myEvent.target.value)\\"
     />
     Hello! I can run in React, Vue, Solid, or Liquid! &gt;
   </div>
@@ -4160,7 +4180,11 @@ exports[`Vue > jsx > Typescript Test > Basic 2`] = `
       <template v-if=\\"person === name\\">
         <input
           :value=\\"name\\"
-          @change=\\"name = $event.target.value + ' and ' + person\\"
+          @change=\\"
+            async (event) => {
+              name = event.target.value + ' and ' + person;
+            }
+          \\"
         />
 
         Hello
@@ -4189,7 +4213,7 @@ exports[`Vue > jsx > Typescript Test > Basic Context 1`] = `
   <div>
     {{ myService.method(\\"hello\\") + name }}
     Hello! I can run in React, Vue, Solid, or Liquid!
-    <input @change=\\"onChange\\" />
+    <input @change=\\"async (event) => onChange\\" />
   </div>
 </template>
 
@@ -4400,7 +4424,11 @@ exports[`Vue > jsx > Typescript Test > BasicFor 1`] = `
     <template :key=\\"index\\" v-for=\\"(person, index) in names\\">
       <input
         :value=\\"name\\"
-        @change=\\"name = $event.target.value + ' and ' + person\\"
+        @change=\\"
+          async (event) => {
+            name = event.target.value + ' and ' + person;
+          }
+        \\"
       />
 
       Hello
@@ -4435,8 +4463,8 @@ exports[`Vue > jsx > Typescript Test > BasicRef 1`] = `
         class=\\"input\\"
         ref=\\"inputRef\\"
         :value=\\"name\\"
-        @blur=\\"onBlur()\\"
-        @change=\\"name = $event.target.value\\"
+        @blur=\\"async (event) => onBlur()\\"
+        @change=\\"async (event) => (name = event.target.value)\\"
       />
       <label for=\\"cars\\" ref=\\"inputNoArgRef\\"> Choose a car: </label>
       <select name=\\"cars\\" id=\\"cars\\">
@@ -4488,7 +4516,7 @@ export default defineComponent({
 
 exports[`Vue > jsx > Typescript Test > BasicRefAssignment 1`] = `
 "<template>
-  <div><button @click=\\"handlerClick($event)\\">Click</button></div>
+  <div><button @click=\\"await handlerClick($event)\\">Click</button></div>
 </template>
 
 <script lang=\\"ts\\">
@@ -4516,7 +4544,7 @@ exports[`Vue > jsx > Typescript Test > BasicRefPrevious 1`] = `
 "<template>
   <div>
     <h1>Now: {{ count }}, before: {{ this.$refs.prevCount }}</h1>
-    <button @click=\\"count += 1\\">Increment</button>
+    <button @click=\\"async (event) => (count += 1)\\">Increment</button>
   </div>
 </template>
 
@@ -4711,7 +4739,7 @@ exports[`Vue > jsx > Typescript Test > ContentSlotJSX 1`] = `
     <div
       :name=\\"$slots.content ? 'name1' : 'name2'\\"
       :title=\\"$slots.content ? 'title1' : 'title2'\\"
-      @click=\\"show()\\"
+      @click=\\"async (event) => show()\\"
       :class=\\"cls\\"
       v-bind=\\"attributes\\"
     >
@@ -4922,7 +4950,7 @@ exports[`Vue > jsx > Typescript Test > Form 1`] = `
     :action=\\"!sendWithJs && action\\"
     :method=\\"method\\"
     :name=\\"name\\"
-    @submit=\\"onSubmit($event)\\"
+    @submit=\\"async (event) => onSubmit(event)\\"
     v-bind=\\"attributes\\"
   >
     <template v-if=\\"builderBlock && builderBlock.children\\">
@@ -5287,7 +5315,7 @@ exports[`Vue > jsx > Typescript Test > Image 1`] = `
           :aria-role=\\"altText ? 'presentation' : undefined\\"
           :class=\\"'builder-image' + (_class ? ' ' + _class : '') + ' img'\\"
           :src=\\"image\\"
-          @load=\\"setLoaded()\\"
+          @load=\\"async (event) => setLoaded()\\"
           :srcset=\\"srcset\\"
           :sizes=\\"sizes\\"
         />
@@ -5470,7 +5498,7 @@ exports[`Vue > jsx > Typescript Test > Input 1`] = `
     :value=\\"value\\"
     :defaultValue=\\"defaultValue\\"
     :required=\\"required\\"
-    @change=\\"onChange?.($event.target.value)\\"
+    @change=\\"async (event) => onChange?.(event.target.value)\\"
     v-bind=\\"attributes\\"
   />
 </template>
@@ -5762,7 +5790,9 @@ export default defineComponent({
 exports[`Vue > jsx > Typescript Test > Stamped.io 1`] = `
 "<template>
   <div :data-user=\\"name\\">
-    <button @click=\\"showReviewPrompt = true\\">Write a review</button>
+    <button @click=\\"async (event) => (showReviewPrompt = true)\\">
+      Write a review
+    </button>
     <template v-if=\\"showReviewPrompt || 'asdf'\\">
       <input placeholder=\\"Email\\" />
       <input placeholder=\\"Title\\" class=\\"input\\" />
@@ -5773,8 +5803,10 @@ exports[`Vue > jsx > Typescript Test > Stamped.io 1`] = `
       <button
         class=\\"button\\"
         @click=\\"
-          $event.preventDefault();
-          showReviewPrompt = false;
+          async (ev) => {
+            ev.preventDefault();
+            showReviewPrompt = false;
+          }
         \\"
       >
         Submit
@@ -6089,7 +6121,7 @@ exports[`Vue > jsx > Typescript Test > basicForwardRef 1`] = `
       class=\\"input\\"
       ref=\\"inputRef\\"
       :value=\\"name\\"
-      @change=\\"name = $event.target.value\\"
+      @change=\\"async (event) => (name = event.target.value)\\"
     />
   </div>
 </template>
@@ -6127,7 +6159,7 @@ exports[`Vue > jsx > Typescript Test > basicForwardRefMetadata 1`] = `
       class=\\"input\\"
       ref=\\"inputRef\\"
       :value=\\"name\\"
-      @change=\\"name = $event.target.value\\"
+      @change=\\"async (event) => (name = event.target.value)\\"
     />
   </div>
 </template>
@@ -6455,7 +6487,11 @@ exports[`Vue > jsx > Typescript Test > defaultProps 1`] = `
     </template>
 
     <template v-if=\\"!link\\">
-      <button type=\\"button\\" @click=\\"onClick()\\" v-bind=\\"attributes\\">
+      <button
+        type=\\"button\\"
+        @click=\\"async (event) => onClick()\\"
+        v-bind=\\"attributes\\"
+      >
         {{ buttonText }}
       </button>
     </template>
@@ -6507,7 +6543,11 @@ exports[`Vue > jsx > Typescript Test > defaultPropsOutsideComponent 1`] = `
     </template>
 
     <template v-if=\\"!link\\">
-      <button type=\\"button\\" @click=\\"onClick($event)\\" v-bind=\\"attributes\\">
+      <button
+        type=\\"button\\"
+        @click=\\"async (event) => onClick(event)\\"
+        v-bind=\\"attributes\\"
+      >
         {{ text }}
       </button>
     </template>
@@ -6843,7 +6883,7 @@ exports[`Vue > jsx > Typescript Test > onEvent 1`] = `
   <div
     class=\\"builder-embed\\"
     ref=\\"elem\\"
-    @initeditingbldr=\\"elem_onInitEditingBldr($event)\\"
+    @initeditingbldr=\\"async (event) => elem_onInitEditingBldr(event)\\"
   >
     <div>Test</div>
   </div>
@@ -7494,7 +7534,7 @@ export default defineComponent({
 
 exports[`Vue > jsx > Typescript Test > renderContentExample 1`] = `
 "<template>
-  <div class=\\"div\\" @click=\\"trackClick(content.id)\\">
+  <div class=\\"div\\" @click=\\"async (event) => trackClick(content.id)\\">
     <RenderBlocks :blocks=\\"content.blocks\\"></RenderBlocks>
   </div>
 </template>
@@ -8366,7 +8406,10 @@ export default defineComponent({
 exports[`Vue > svelte > Javascript Test > basic 1`] = `
 "<template>
   <div>
-    <input @change=\\"name = $event.target.value\\" :value=\\"name\\" />
+    <input
+      @change=\\"async (event) => (name = event.target.value)\\"
+      :value=\\"name\\"
+    />
     Hello! I can run in React, Vue, Solid, or Liquid!
   </div>
 </template>
@@ -8391,37 +8434,37 @@ exports[`Vue > svelte > Javascript Test > bindGroup 1`] = `
       type=\\"radio\\"
       value=\\"Plain\\"
       :checked=\\"tortilla === 'Plain'\\"
-      @change=\\"tortilla = $event.target.value\\"
+      @change=\\"async (event) => (tortilla = event.target.value)\\"
     /><input
       type=\\"radio\\"
       value=\\"Whole wheat\\"
       :checked=\\"tortilla === 'Whole wheat'\\"
-      @change=\\"tortilla = $event.target.value\\"
+      @change=\\"async (event) => (tortilla = event.target.value)\\"
     /><input
       type=\\"radio\\"
       value=\\"Spinach\\"
       :checked=\\"tortilla === 'Spinach'\\"
-      @change=\\"tortilla = $event.target.value\\"
+      @change=\\"async (event) => (tortilla = event.target.value)\\"
     /><br /><br /><input
       type=\\"checkbox\\"
       value=\\"Rice\\"
       :checked=\\"fillings === 'Rice'\\"
-      @change=\\"fillings = $event.target.value\\"
+      @change=\\"async (event) => (fillings = event.target.value)\\"
     /><input
       type=\\"checkbox\\"
       value=\\"Beans\\"
       :checked=\\"fillings === 'Beans'\\"
-      @change=\\"fillings = $event.target.value\\"
+      @change=\\"async (event) => (fillings = event.target.value)\\"
     /><input
       type=\\"checkbox\\"
       value=\\"Cheese\\"
       :checked=\\"fillings === 'Cheese'\\"
-      @change=\\"fillings = $event.target.value\\"
+      @change=\\"async (event) => (fillings = event.target.value)\\"
     /><input
       type=\\"checkbox\\"
       value=\\"Guac (extra)\\"
       :checked=\\"fillings === 'Guac (extra)'\\"
-      @change=\\"fillings = $event.target.value\\"
+      @change=\\"async (event) => (fillings = event.target.value)\\"
     />
     <p>Tortilla: {{ tortilla }}</p>
     <p>Fillings: {{ fillings }}</p>
@@ -8534,9 +8577,9 @@ export default defineComponent({
 exports[`Vue > svelte > Javascript Test > eventHandlers 1`] = `
 "<template>
   <div>
-    <button @click=\\"log('hi')\\">Log</button
-    ><button @click=\\"log($event)\\">Log</button
-    ><button @click=\\"log($event)\\">Log</button>
+    <button @click=\\"async (a) => log('hi')\\">Log</button
+    ><button @click=\\"async (event) => log(event)\\">Log</button
+    ><button @click=\\"async (event) => log(event)\\">Log</button>
   </div>
 </template>
 
@@ -8576,11 +8619,11 @@ export default defineComponent({
 exports[`Vue > svelte > Javascript Test > ifElse 1`] = `
 "<template>
   <template v-if=\\"show\\">
-    <button @click=\\"toggle($event)\\">Hide</button>
+    <button @click=\\"async (event) => toggle(event)\\">Hide</button>
   </template>
 
   <template v-else>
-    <button @click=\\"toggle($event)\\">Show</button>
+    <button @click=\\"async (event) => toggle(event)\\">Show</button>
   </template>
 </template>
 
@@ -8678,9 +8721,13 @@ export default defineComponent({
 exports[`Vue > svelte > Javascript Test > reactiveWithFn 1`] = `
 "<template>
   <div>
-    <input type=\\"number\\" @change=\\"a = $event.target.value\\" :value=\\"a\\" /><input
+    <input
       type=\\"number\\"
-      @change=\\"b = $event.target.value\\"
+      @change=\\"async (event) => (a = event.target.value)\\"
+      :value=\\"a\\"
+    /><input
+      type=\\"number\\"
+      @change=\\"async (event) => (b = event.target.value)\\"
       :value=\\"b\\"
     />
     Result: {{ result }}
@@ -8791,7 +8838,10 @@ export default defineComponent({
 exports[`Vue > svelte > Typescript Test > basic 1`] = `
 "<template>
   <div>
-    <input @change=\\"name = $event.target.value\\" :value=\\"name\\" />
+    <input
+      @change=\\"async (event) => (name = event.target.value)\\"
+      :value=\\"name\\"
+    />
     Hello! I can run in React, Vue, Solid, or Liquid!
   </div>
 </template>
@@ -8816,37 +8866,37 @@ exports[`Vue > svelte > Typescript Test > bindGroup 1`] = `
       type=\\"radio\\"
       value=\\"Plain\\"
       :checked=\\"tortilla === 'Plain'\\"
-      @change=\\"tortilla = $event.target.value\\"
+      @change=\\"async (event) => (tortilla = event.target.value)\\"
     /><input
       type=\\"radio\\"
       value=\\"Whole wheat\\"
       :checked=\\"tortilla === 'Whole wheat'\\"
-      @change=\\"tortilla = $event.target.value\\"
+      @change=\\"async (event) => (tortilla = event.target.value)\\"
     /><input
       type=\\"radio\\"
       value=\\"Spinach\\"
       :checked=\\"tortilla === 'Spinach'\\"
-      @change=\\"tortilla = $event.target.value\\"
+      @change=\\"async (event) => (tortilla = event.target.value)\\"
     /><br /><br /><input
       type=\\"checkbox\\"
       value=\\"Rice\\"
       :checked=\\"fillings === 'Rice'\\"
-      @change=\\"fillings = $event.target.value\\"
+      @change=\\"async (event) => (fillings = event.target.value)\\"
     /><input
       type=\\"checkbox\\"
       value=\\"Beans\\"
       :checked=\\"fillings === 'Beans'\\"
-      @change=\\"fillings = $event.target.value\\"
+      @change=\\"async (event) => (fillings = event.target.value)\\"
     /><input
       type=\\"checkbox\\"
       value=\\"Cheese\\"
       :checked=\\"fillings === 'Cheese'\\"
-      @change=\\"fillings = $event.target.value\\"
+      @change=\\"async (event) => (fillings = event.target.value)\\"
     /><input
       type=\\"checkbox\\"
       value=\\"Guac (extra)\\"
       :checked=\\"fillings === 'Guac (extra)'\\"
-      @change=\\"fillings = $event.target.value\\"
+      @change=\\"async (event) => (fillings = event.target.value)\\"
     />
     <p>Tortilla: {{ tortilla }}</p>
     <p>Fillings: {{ fillings }}</p>
@@ -8959,9 +9009,9 @@ export default defineComponent({
 exports[`Vue > svelte > Typescript Test > eventHandlers 1`] = `
 "<template>
   <div>
-    <button @click=\\"log('hi')\\">Log</button
-    ><button @click=\\"log($event)\\">Log</button
-    ><button @click=\\"log($event)\\">Log</button>
+    <button @click=\\"async (a) => log('hi')\\">Log</button
+    ><button @click=\\"async (event) => log(event)\\">Log</button
+    ><button @click=\\"async (event) => log(event)\\">Log</button>
   </div>
 </template>
 
@@ -9001,11 +9051,11 @@ export default defineComponent({
 exports[`Vue > svelte > Typescript Test > ifElse 1`] = `
 "<template>
   <template v-if=\\"show\\">
-    <button @click=\\"toggle($event)\\">Hide</button>
+    <button @click=\\"async (event) => toggle(event)\\">Hide</button>
   </template>
 
   <template v-else>
-    <button @click=\\"toggle($event)\\">Show</button>
+    <button @click=\\"async (event) => toggle(event)\\">Show</button>
   </template>
 </template>
 
@@ -9103,9 +9153,13 @@ export default defineComponent({
 exports[`Vue > svelte > Typescript Test > reactiveWithFn 1`] = `
 "<template>
   <div>
-    <input type=\\"number\\" @change=\\"a = $event.target.value\\" :value=\\"a\\" /><input
+    <input
+      type=\\"number\\"
+      @change=\\"async (event) => (a = event.target.value)\\"
+      :value=\\"a\\"
+    /><input
       type=\\"number\\"
-      @change=\\"b = $event.target.value\\"
+      @change=\\"async (event) => (b = event.target.value)\\"
       :value=\\"b\\"
     />
     Result: {{ result }}
diff --git a/packages/core/src/__tests__/__snapshots__/webcomponent.test.ts.snap b/packages/core/src/__tests__/__snapshots__/webcomponent.test.ts.snap
index 96b21c8b83..923fef3e74 100644
--- a/packages/core/src/__tests__/__snapshots__/webcomponent.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/webcomponent.test.ts.snap
@@ -2995,8 +2995,8 @@ class MyBasicRefAssignmentComponent extends HTMLElement {
     this.pendingUpdate = false;
 
     // Event handler for 'click' event on button-my-basic-ref-assignment-component-1
-    this.onButtonMyBasicRefAssignmentComponent1Click = (evt) => {
-      this.state.handlerClick(evt);
+    this.onButtonMyBasicRefAssignmentComponent1Click = async (evt) => {
+      await this.state.handlerClick(evt);
     };
 
     this._holdValueRef = \\"Patrick\\";
@@ -6176,8 +6176,8 @@ class SmileReviews extends HTMLElement {
     };
 
     // Event handler for 'click' event on button-smile-reviews-2
-    this.onButtonSmileReviews2Click = (event) => {
-      event.preventDefault();
+    this.onButtonSmileReviews2Click = (ev) => {
+      ev.preventDefault();
       this.state.showReviewPrompt = false;
       this.update();
     };
@@ -18502,8 +18502,8 @@ class MyBasicRefAssignmentComponent extends HTMLElement {
     this.pendingUpdate = false;
 
     // Event handler for 'click' event on button-my-basic-ref-assignment-component-1
-    this.onButtonMyBasicRefAssignmentComponent1Click = (evt) => {
-      this.state.handlerClick(evt);
+    this.onButtonMyBasicRefAssignmentComponent1Click = async (evt) => {
+      await this.state.handlerClick(evt);
     };
 
     this._holdValueRef = \\"Patrick\\";
@@ -21828,8 +21828,8 @@ class SmileReviews extends HTMLElement {
     };
 
     // Event handler for 'click' event on button-smile-reviews-2
-    this.onButtonSmileReviews2Click = (event) => {
-      event.preventDefault();
+    this.onButtonSmileReviews2Click = (ev) => {
+      ev.preventDefault();
       this.state.showReviewPrompt = false;
       this.update();
     };
diff --git a/packages/core/src/__tests__/builder.test.ts b/packages/core/src/__tests__/builder.test.ts
index 0294cb6c4d..a31b940f1c 100644
--- a/packages/core/src/__tests__/builder.test.ts
+++ b/packages/core/src/__tests__/builder.test.ts
@@ -1,18 +1,21 @@
-import { componentToReact, ToMitosisOptions } from '..';
-import { componentToBuilder } from '../generators/builder';
-import { componentToHtml } from '../generators/html';
-import { componentToMitosis } from '../generators/mitosis';
-import { dedent } from '../helpers/dedent';
-import { builderContentToMitosisComponent, extractStateHook } from '../parsers/builder';
-import { parseJsx } from '../parsers/jsx';
-import { compileAwayBuilderComponents } from '../plugins/compile-away-builder-components';
-
+import { componentToBuilder } from '@/generators/builder';
+import { componentToHtml } from '@/generators/html';
+import { componentToMitosis } from '@/generators/mitosis';
+import { ToMitosisOptions } from '@/generators/mitosis/types';
+import { componentToReact } from '@/generators/react';
+import { dedent } from '@/helpers/dedent';
+import { builderContentToMitosisComponent, extractStateHook } from '@/parsers/builder';
+import { parseJsx } from '@/parsers/jsx';
+import { compileAwayBuilderComponents } from '@/plugins/compile-away-builder-components';
 import { BuilderContent } from '@builder.io/sdk';
+
 import advancedFor from './data/advanced-for.raw.tsx?raw';
+import asyncBindings from './data/basic-ref-assignment.raw.tsx?raw';
 import columns from './data/blocks/columns.raw.tsx?raw';
 import customCode from './data/blocks/custom-code.raw.tsx?raw';
 import embed from './data/blocks/embed.raw.tsx?raw';
 import image from './data/blocks/image.raw.tsx?raw';
+import indexInFor from './data/blocks/index-in-for.raw.tsx?raw';
 import stamped from './data/blocks/stamped-io.raw.tsx?raw';
 import booleanContent from './data/builder/boolean.json?raw';
 import customComponentSlotPropertyContent from './data/builder/custom-component-slot-property.json?raw';
@@ -72,6 +75,16 @@ describe('Builder', () => {
     expect(mitosis).toMatchSnapshot();
   });
 
+  test('async bindings', () => {
+    const component = parseJsx(asyncBindings);
+    const builderJson = componentToBuilder()({ component });
+    expect(builderJson).toMatchSnapshot();
+
+    const backToMitosis = builderContentToMitosisComponent(builderJson);
+    const mitosis = componentToMitosis()({ component: backToMitosis });
+    expect(mitosis).toMatchSnapshot();
+  });
+
   test('Embed', () => {
     const component = parseJsx(embed);
     const builderJson = componentToBuilder()({ component });
@@ -82,6 +95,14 @@ describe('Builder', () => {
     expect(mitosis).toMatchSnapshot();
   });
 
+  test('Index inside For', () => {
+    const component = parseJsx(indexInFor);
+    const builderJson = componentToBuilder()({ component });
+    const backToMitosis = builderContentToMitosisComponent(builderJson);
+    const mitosis = componentToMitosis()({ component: backToMitosis });
+    expect(mitosis).toMatchSnapshot();
+  });
+
   test('Image', () => {
     const component = parseJsx(image);
     const builderJson = componentToBuilder()({ component });
diff --git a/packages/core/src/__tests__/data/basic-ref-assignment.raw.tsx b/packages/core/src/__tests__/data/basic-ref-assignment.raw.tsx
index 3237e23f42..11e3c1939b 100644
--- a/packages/core/src/__tests__/data/basic-ref-assignment.raw.tsx
+++ b/packages/core/src/__tests__/data/basic-ref-assignment.raw.tsx
@@ -15,7 +15,7 @@ export default function MyBasicRefAssignmentComponent(props: Props) {
 
   return (
     <div>
-      <button onClick={(evt) => handlerClick(evt)}>Click</button>
+      <button onClick={async (evt) => await handlerClick(evt)}>Click</button>
     </div>
   );
 }
diff --git a/packages/core/src/__tests__/data/blocks/index-in-for.raw.tsx b/packages/core/src/__tests__/data/blocks/index-in-for.raw.tsx
new file mode 100644
index 0000000000..f1dc1482bc
--- /dev/null
+++ b/packages/core/src/__tests__/data/blocks/index-in-for.raw.tsx
@@ -0,0 +1,40 @@
+import { useState } from '@builder.io/mitosis';
+
+export default function MyComponent(props) {
+  const [todos, setTodos] = useState([
+    { id: 1, completed: false },
+    { id: 2, completed: false },
+  ]);
+
+  return (
+    <div>
+      {todos.map((todo) => (
+        <div>
+          {state.todos.map((todo, index) => (
+            <input
+              type="checkbox"
+              checked={todo.completed}
+              key={todo.id + '-' + index}
+              value={index}
+              foo={{
+                bar: 1 + index,
+              }}
+              onX={() => {
+                console.log('onX');
+              }}
+              onClick={(event) => {
+                console.log('clicked', event);
+                state.todos[index].completed = !state.todos[0].completed;
+              }}
+              onChange={(event) => {
+                console.log('this is todo item: ', index);
+                const index = state.todos.findIndex((t) => t.id === todo.id);
+                state.todos[index].completed = event.target.checked;
+              }}
+            />
+          ))}
+        </div>
+      ))}
+    </div>
+  );
+}
diff --git a/packages/core/src/__tests__/data/blocks/stamped-io.raw.tsx b/packages/core/src/__tests__/data/blocks/stamped-io.raw.tsx
index 5781c5512a..512288f09f 100644
--- a/packages/core/src/__tests__/data/blocks/stamped-io.raw.tsx
+++ b/packages/core/src/__tests__/data/blocks/stamped-io.raw.tsx
@@ -43,8 +43,8 @@ export default function SmileReviews(props: SmileReviewsProps) {
         <textarea css={{ display: 'block' }} placeholder="How was your experience?" />
         <button
           css={{ display: 'block' }}
-          onClick={(event) => {
-            event.preventDefault();
+          onClick={(ev) => {
+            ev.preventDefault();
             state.showReviewPrompt = false;
           }}
         >
diff --git a/packages/core/src/generators/angular/index.ts b/packages/core/src/generators/angular/index.ts
index f845cca369..5c91ba95fb 100644
--- a/packages/core/src/generators/angular/index.ts
+++ b/packages/core/src/generators/angular/index.ts
@@ -1,4 +1,5 @@
 import { SELF_CLOSING_HTML_TAGS, VALID_HTML_TAGS } from '@/constants/html_tags';
+import { createSingleBinding } from '@/helpers/bindings';
 import { dedent } from '@/helpers/dedent';
 import { fastClone } from '@/helpers/fast-clone';
 import { getChildComponents } from '@/helpers/get-child-components';
@@ -453,10 +454,10 @@ export const blockToAngular = ({
           const spreadRefIndex = root.meta._spreadRefIndex || 0;
           refName = `elRef${spreadRefIndex}`;
           root.meta._spreadRefIndex = (spreadRefIndex as number) + 1;
-          json.bindings['spreadRef'] = { code: refName, type: 'single' };
+          json.bindings['spreadRef'] = createSingleBinding({ code: refName });
           root.refs[refName] = { argument: '' };
         }
-        json.bindings['spreadRef'] = { code: refName, type: 'single' };
+        json.bindings['spreadRef'] = createSingleBinding({ code: refName });
         root.refs[refName] = { argument: '' };
         root.meta.onViewInit = (root.meta.onViewInit || { code: '' }) as BaseHook;
         let spreadCode = '';
@@ -678,7 +679,7 @@ const handleProperties = (json: MitosisComponent, item: MitosisNode, index: numb
     }
     const newBindingName = generateNewBindingName(index, item.name);
     json.state[newBindingName] = { code: '`' + `${item.properties[key]}` + '`', type: 'property' };
-    item.bindings[key] = { code: `state.${newBindingName}`, type: 'single' };
+    item.bindings[key] = createSingleBinding({ code: `state.${newBindingName}` });
     delete item.properties[key];
     index++;
   }
diff --git a/packages/core/src/generators/builder/generator.ts b/packages/core/src/generators/builder/generator.ts
index 379cebf556..bf97c4674a 100644
--- a/packages/core/src/generators/builder/generator.ts
+++ b/packages/core/src/generators/builder/generator.ts
@@ -8,6 +8,7 @@ import { hasProps } from '@/helpers/has-props';
 import { isComponent } from '@/helpers/is-component';
 import { isMitosisNode } from '@/helpers/is-mitosis-node';
 import { isUpperCase } from '@/helpers/is-upper-case';
+import { parseCodeToAst } from '@/helpers/parsers';
 import { removeSurroundingBlock } from '@/helpers/remove-surrounding-block';
 import { replaceNodes } from '@/helpers/replace-identifiers';
 import { checkHasState } from '@/helpers/state';
@@ -16,7 +17,8 @@ import { hashCodeAsString } from '@/symbols/symbol-processor';
 import { ForNode, MitosisNode } from '@/types/mitosis-node';
 import { MitosisStyles } from '@/types/mitosis-styles';
 import { TranspilerArgs } from '@/types/transpiler';
-import { types } from '@babel/core';
+import { traverse as babelTraverse, types } from '@babel/core';
+import generate from '@babel/generator';
 import { BuilderContent, BuilderElement } from '@builder.io/sdk';
 import json5 from 'json5';
 import { attempt, mapValues, omit, omitBy, set } from 'lodash';
@@ -93,7 +95,6 @@ const componentMappers: {
   },
   PersonalizationContainer(node, options) {
     const block = blockToBuilder(node, options, { skipMapper: true });
-    // console.log('block', node);
     const variants: any[] = [];
     let defaultVariant: BuilderElement[] = [];
     const validFakeNodeNames = [
@@ -144,26 +145,64 @@ const componentMappers: {
   For(_node, options) {
     const node = _node as any as ForNode;
 
+    const replaceIndexNode = (str: string) =>
+      replaceNodes({
+        code: str,
+        nodeMaps: [
+          {
+            from: types.identifier(target),
+            to: types.memberExpression(types.identifier('state'), types.identifier('$index')),
+          },
+        ],
+      });
+
     // rename `index` var to `state.$index`
     const target = node.scope.indexName || 'index';
     const replaceIndex = (node: MitosisNode) => {
       traverse(node).forEach(function (thing) {
-        if (isMitosisNode(thing)) {
-          for (const [key, value] of Object.entries(thing.bindings)) {
-            if (value?.code.includes(target)) {
-              thing.bindings[key]!.code = replaceNodes({
-                code: value.code,
-                nodeMaps: [
-                  {
-                    from: types.identifier(target),
-                    to: types.memberExpression(
-                      types.identifier('state'),
-                      types.identifier('$index'),
-                    ),
-                  },
-                ],
+        if (!isMitosisNode(thing)) return;
+        for (const [key, value] of Object.entries(thing.bindings)) {
+          if (!value) continue;
+          if (!value.code.includes(target)) continue;
+
+          if (value.type === 'single' && value.bindingType === 'function') {
+            try {
+              const code = value.code;
+
+              const programNode = parseCodeToAst(code);
+
+              if (!programNode) continue;
+
+              babelTraverse(programNode, {
+                Program(path) {
+                  if (path.scope.hasBinding(target)) return;
+
+                  const x = {
+                    id: types.identifier(target),
+                    init: types.identifier('PLACEHOLDER'),
+                  };
+                  path.scope.push(x);
+                  path.scope.rename(target, 'state.$index');
+                  path.traverse({
+                    VariableDeclaration(p) {
+                      if (p.node.declarations.length === 1 && p.node.declarations[0].id === x.id) {
+                        p.remove();
+                      }
+                    },
+                  });
+                },
               });
+
+              thing.bindings[key]!.code = generate(programNode).code;
+            } catch (error) {
+              console.error(
+                'Error processing function binding. Falling back to simple replacement.',
+                error,
+              );
+              thing.bindings[key]!.code = replaceIndexNode(value.code);
             }
+          } else {
+            thing.bindings[key]!.code = replaceIndexNode(value.code);
           }
         }
       });
@@ -327,8 +366,19 @@ export const blockToBuilder = (
     const eventBindingKeyRegex = /^on([A-Z])/;
     const firstCharMatchForEventBindingKey = key.match(eventBindingKeyRegex)?.[1];
     if (firstCharMatchForEventBindingKey) {
+      let actionBody = bindings[key]?.async
+        ? `(async () => ${bindings[key]?.code as string})()`
+        : removeSurroundingBlock(bindings[key]?.code as string);
+
+      const eventIdentifier = bindings[key]?.arguments?.[0];
+      if (typeof eventIdentifier === 'string' && eventIdentifier !== 'event') {
+        actionBody = replaceNodes({
+          code: actionBody,
+          nodeMaps: [{ from: types.identifier(eventIdentifier), to: types.identifier('event') }],
+        });
+      }
       actions[key.replace(eventBindingKeyRegex, firstCharMatchForEventBindingKey.toLowerCase())] =
-        removeSurroundingBlock(bindings[key]?.code as string);
+        actionBody;
       delete bindings[key];
     }
   }
diff --git a/packages/core/src/generators/html/generator.ts b/packages/core/src/generators/html/generator.ts
index 1ccc2cf751..731be900a0 100644
--- a/packages/core/src/generators/html/generator.ts
+++ b/packages/core/src/generators/html/generator.ts
@@ -434,12 +434,13 @@ const blockToHtml = (
         const codeContent: string = removeSurroundingBlock(
           updateReferencesInCode(useValue, options, blockOptions),
         );
+        const asyncKeyword = json.bindings[key]?.async ? 'async ' : '';
         options.js += `
           // Event handler for '${event}' event on ${elId}
           ${
             options.format === 'class'
-              ? `this.${fnName} = (${cusArg.join(',')}) => {`
-              : `function ${fnName} (${cusArg.join(',')}) {`
+              ? `this.${fnName} = ${asyncKeyword}(${cusArg.join(',')}) => {`
+              : `${asyncKeyword}function ${fnName} (${cusArg.join(',')}) {`
           }
               ${addScopeVars(
                 scopeVars,
@@ -658,7 +659,7 @@ export const componentToHtml: TranspilerGenerator<ToHtmlOptions> =
           !hasChangeListeners
             ? ''
             : `
-        
+
         // Function to update data bindings and loops
         // call update() when you mutate state and need the updates to reflect
         // in the dom
@@ -693,7 +694,7 @@ export const componentToHtml: TranspilerGenerator<ToHtmlOptions> =
                     options,
                   );
                   return code + '\n';
-                }, '')} 
+                }, '')}
                 `
           }
 
@@ -730,7 +731,7 @@ export const componentToHtml: TranspilerGenerator<ToHtmlOptions> =
               ${updateReferencesInCode(
                 addUpdateAfterSetInCode(stringifySingleScopeOnMount(json), options),
                 options,
-              )} 
+              )}
               `
         }
 
@@ -743,8 +744,8 @@ export const componentToHtml: TranspilerGenerator<ToHtmlOptions> =
             // grabs the content of a node that is between <template> tags
             // iterates through child nodes to register all content including text elements
             // attaches the content after the template
-  
-  
+
+
             const elementFragment = el.content.cloneNode(true);
             const children = Array.from(elementFragment.childNodes)
             children.forEach(child => {
@@ -758,7 +759,7 @@ export const componentToHtml: TranspilerGenerator<ToHtmlOptions> =
             });
             el.after(elementFragment);
           }
-  
+
         `
         }
         ${
@@ -992,9 +993,9 @@ export const componentToCustomElement: TranspilerGenerator<ToHtmlOptions> =
       })}
       /**
        * Usage:
-       * 
+       *
        *  <${kebabName}></${kebabName}>
-       * 
+       *
        */
       class ${ComponentName} extends ${
       options?.experimental?.classExtends
@@ -1200,8 +1201,8 @@ export const componentToCustomElement: TranspilerGenerator<ToHtmlOptions> =
             // grabs the content of a node that is between <template> tags
             // iterates through child nodes to register all content including text elements
             // attaches the content after the template
-  
-  
+
+
             const elementFragment = el.content.cloneNode(true);
             const children = Array.from(elementFragment.childNodes)
             children.forEach(child => {
@@ -1281,7 +1282,7 @@ export const componentToCustomElement: TranspilerGenerator<ToHtmlOptions> =
                 `;
               }
               return code + '\n';
-            }, '')} 
+            }, '')}
             `
           }
         }
@@ -1378,7 +1379,7 @@ export const componentToCustomElement: TranspilerGenerator<ToHtmlOptions> =
                   ? `
               ${options?.experimental?.generateQuerySelectorAll(key, code)}
               `
-                  : `              
+                  : `
               this._root.querySelectorAll("[data-el='${key}']").forEach((el) => {
                 ${code}
               })
diff --git a/packages/core/src/generators/lit/generate.ts b/packages/core/src/generators/lit/generate.ts
index 37d6a20a74..872dce02f0 100644
--- a/packages/core/src/generators/lit/generate.ts
+++ b/packages/core/src/generators/lit/generate.ts
@@ -94,8 +94,12 @@ const blockToLit = (json: MitosisNode, options: ToLitOptions = {}): string => {
       str += ` ref="${code}" `;
     } else if (key.startsWith('on')) {
       let useKey = key === 'onChange' && json.name === 'input' ? 'onInput' : key;
+      const asyncKeyword = json.bindings[key]?.async ? 'async ' : '';
       useKey = '@' + useKey.substring(2).toLowerCase();
-      str += ` ${useKey}=\${${cusArgs.join(',')} => ${processBinding(code as string)}} `;
+
+      str += ` ${useKey}=\${${asyncKeyword}(${cusArgs.join(',')}) => ${processBinding(
+        code as string,
+      )}} `;
     } else {
       const value = processBinding(code as string);
       // If they key includes a '-' it's an attribute, not a property
@@ -193,7 +197,7 @@ export const componentToLit: TranspilerGenerator<ToLitOptions> =
         });
       } catch (err) {
         // If can't format HTML (this can happen with lit given it is tagged template strings),
-        // at least remove excess space
+        // at least remove excess fspace
         html = html.replace(/\n{3,}/g, '\n\n');
       }
     }
diff --git a/packages/core/src/generators/marko/generate.ts b/packages/core/src/generators/marko/generate.ts
index 8632d7b56f..257ac43b73 100644
--- a/packages/core/src/generators/marko/generate.ts
+++ b/packages/core/src/generators/marko/generate.ts
@@ -84,15 +84,16 @@ const blockToMarko = (json: MitosisNode, options: InternalToMarkoOptions): strin
     str += ` ${key}="${value}" `;
   }
   for (const key in json.bindings) {
-    const { code, arguments: cusArgs = ['event'], type } = json.bindings[key]!;
+    const { code, arguments: cusArgs = ['event'], type, async } = json.bindings[key]!;
 
     if (type === 'spread') {
       str += ` ...(${code}) `;
     } else if (key === 'ref') {
       str += ` key="${camelCase(code)}" `;
     } else if (key.startsWith('on')) {
+      const asyncKeyword = async ? 'async ' : '';
       const useKey = key === 'onChange' && json.name === 'input' ? 'onInput' : key;
-      str += ` ${dashCase(useKey)}=(${cusArgs.join(',')} => ${processBinding(
+      str += ` ${dashCase(useKey)}=(${asyncKeyword}(${cusArgs.join(',')}) => ${processBinding(
         options.component,
         code as string,
       )}) `;
@@ -227,12 +228,12 @@ export const componentToMarko: TranspilerGenerator<ToMarkoOptions> =
 
         ${Array.from(domRefs)
           .map(
-            (refName) => `get ${camelCase(refName)}() { 
+            (refName) => `get ${camelCase(refName)}() {
             return this.getEl('${camelCase(refName)}')
           }`,
           )
           .join('\n')}
-      
+
         ${
           !json.hooks.onMount.length
             ? ''
@@ -255,7 +256,7 @@ export const componentToMarko: TranspilerGenerator<ToMarkoOptions> =
 
     let htmlString = json.children.map((item) => blockToMarko(item, options)).join('\n');
     const cssString = css.length
-      ? `style { 
+      ? `style {
   ${indent(css, 2).trim()}
 }`
       : '';
diff --git a/packages/core/src/generators/mitosis/generator.ts b/packages/core/src/generators/mitosis/generator.ts
index 68a6e32748..83bcfff63a 100644
--- a/packages/core/src/generators/mitosis/generator.ts
+++ b/packages/core/src/generators/mitosis/generator.ts
@@ -145,7 +145,9 @@ export const blockToMitosis = (
     if (json.bindings[key]?.type === 'spread') {
       str += ` {...(${json.bindings[key]?.code})} `;
     } else if (key.startsWith('on')) {
-      str += ` ${key}={event => ${value.replace(/\s*;$/, '')}} `;
+      const { arguments: cusArgs = ['event'], async } = json.bindings[key]!;
+      const asyncKeyword = async ? 'async ' : '';
+      str += ` ${key}={${asyncKeyword}(${cusArgs.join(',')}) => ${value.replace(/\s*;$/, '')}} `;
     } else {
       if (!isValidAttributeName(key)) {
         console.warn('Skipping invalid attribute name:', key);
diff --git a/packages/core/src/generators/react/blocks.ts b/packages/core/src/generators/react/blocks.ts
index e31205a0ac..d9fda8e8ca 100644
--- a/packages/core/src/generators/react/blocks.ts
+++ b/packages/core/src/generators/react/blocks.ts
@@ -290,9 +290,10 @@ export const blockToReact = (
     if (json.bindings[key]?.type === 'spread') {
       str += ` {...(${value})} `;
     } else if (key.startsWith('on')) {
+      const asyncKeyword = json.bindings[key]?.async ? 'async ' : '';
       const { arguments: cusArgs = ['event'] } = json.bindings[key]!;
       const eventName = options.type === 'native' ? NATIVE_EVENT_MAPPER[key] || key : key;
-      str += ` ${eventName}={(${cusArgs.join(',')}) => ${updateStateSettersInCode(
+      str += ` ${eventName}={${asyncKeyword}(${cusArgs.join(',')}) => ${updateStateSettersInCode(
         useBindingValue,
         options,
       )} } `;
diff --git a/packages/core/src/generators/solid/blocks.ts b/packages/core/src/generators/solid/blocks.ts
index a5a83b8756..50f02e94ff 100644
--- a/packages/core/src/generators/solid/blocks.ts
+++ b/packages/core/src/generators/solid/blocks.ts
@@ -85,7 +85,8 @@ export const blockToSolid = (
       str += ` {...(${code})} `;
     } else if (key.startsWith('on')) {
       const useKey = key === 'onChange' && json.name === 'input' ? 'onInput' : key;
-      str += ` ${useKey}={(${cusArg.join(',')}) => ${code}} `;
+      const asyncKeyword = json.bindings[key]?.async ? 'async ' : '';
+      str += ` ${useKey}={${asyncKeyword}(${cusArg.join(',')}) => ${code}} `;
     } else if (key === 'ref' && options.typescript) {
       str += ` ${key}={${code}!} `;
     } else {
diff --git a/packages/core/src/generators/stencil/blocks.ts b/packages/core/src/generators/stencil/blocks.ts
index 11bbd58f23..50c1d9980e 100644
--- a/packages/core/src/generators/stencil/blocks.ts
+++ b/packages/core/src/generators/stencil/blocks.ts
@@ -96,7 +96,8 @@ export const blockToStencil = (
       str += ` ref={(el) => ${code.startsWith('this.') ? code : `this.${code}`} = el} `;
     } else if (isEvent(key)) {
       const useKey = key === 'onChange' && blockName === 'input' ? 'onInput' : key;
-      str += ` ${useKey}={(${cusArgs.join(',')}) => ${code}} `;
+      const asyncKeyword = json.bindings[key]?.async ? 'async ' : '';
+      str += ` ${useKey}={${asyncKeyword}(${cusArgs.join(',')}) => ${code}} `;
     } else {
       str += ` ${key}={${code}} `;
     }
diff --git a/packages/core/src/generators/svelte/blocks.ts b/packages/core/src/generators/svelte/blocks.ts
index c37820c31a..ae492cfbe1 100644
--- a/packages/core/src/generators/svelte/blocks.ts
+++ b/packages/core/src/generators/svelte/blocks.ts
@@ -223,16 +223,18 @@ const stringifyBinding =
       const spreadValue = key === 'props' ? '$$props' : code;
       return ` {...${spreadValue}} `;
     } else if (key.startsWith('on') && isValidHtmlTag) {
+      const { async } = binding;
       // handle html native on[event] props
       const event = key.replace('on', '').toLowerCase();
       // TODO: handle quotes in event handler values
 
       const valueWithoutBlock = removeSurroundingBlock(code);
 
-      if (valueWithoutBlock === key) {
+      if (valueWithoutBlock === key && !async) {
         return ` on:${event}={${valueWithoutBlock}} `;
       } else {
-        return ` on:${event}="{${cusArgs.join(',')} => {${valueWithoutBlock}}}" `;
+        const asyncKeyword = async ? 'async ' : '';
+        return ` on:${event}="{${asyncKeyword}(${cusArgs.join(',')}) => {${valueWithoutBlock}}}" `;
       }
     } else if (key.startsWith('on')) {
       // handle on[custom event] props
diff --git a/packages/core/src/generators/vue/blocks.ts b/packages/core/src/generators/vue/blocks.ts
index 3ad477ee6b..639e7854f1 100644
--- a/packages/core/src/generators/vue/blocks.ts
+++ b/packages/core/src/generators/vue/blocks.ts
@@ -1,3 +1,4 @@
+import { createSingleBinding } from '@/helpers/bindings';
 import { filterEmptyTextNodes } from '@/helpers/filter-empty-text-nodes';
 import isChildren from '@/helpers/is-children';
 import { isMitosisNode } from '@/helpers/is-mitosis-node';
@@ -131,21 +132,25 @@ const stringifyBinding =
 
       if (key.startsWith('on') && isValidHtmlTag) {
         // handle html native on[event] props
-        const { arguments: cusArgs = ['event'] } = value!;
+        const { arguments: cusArgs = ['event'], async } = value;
         let event = key.replace('on', '').toLowerCase();
         const isAssignmentExpression = useValue.includes('=');
 
-        const eventHandlerValue = pipe(
-          replaceIdentifiers({
-            code: useValue,
-            from: cusArgs[0],
-            to: '$event',
-          }),
-          isAssignmentExpression ? identity : removeSurroundingBlock,
-          removeSurroundingBlock,
-          encodeQuotes,
-        );
-
+        let eventHandlerValue: string;
+        if (async) {
+          eventHandlerValue = pipe(
+            replaceIdentifiers({
+              code: useValue,
+              from: cusArgs[0],
+              to: '$event',
+            }),
+            isAssignmentExpression ? identity : removeSurroundingBlock,
+            removeSurroundingBlock,
+            encodeQuotes,
+          );
+        } else {
+          eventHandlerValue = `async (${cusArgs.join(', ')}) => ${useValue}`;
+        }
         const eventHandlerKey = `${SPECIAL_PROPERTIES.V_ON_AT}${event}`;
 
         return `${eventHandlerKey}="${eventHandlerValue}"`;
@@ -218,7 +223,7 @@ export const blockToVue: BlockRenderer = (node, options, scope) => {
 
   if (SPECIAL_HTML_TAGS.includes(node.name)) {
     // Vue doesn't allow style/script tags in templates, but does support them through dynamic components.
-    node.bindings.is = { code: `'${node.name}'`, type: 'single' };
+    node.bindings.is = createSingleBinding({ code: `'${node.name}'` });
     node.name = 'component';
   }
 
diff --git a/packages/core/src/helpers/bindings.ts b/packages/core/src/helpers/bindings.ts
index 3164328cac..75249ef082 100644
--- a/packages/core/src/helpers/bindings.ts
+++ b/packages/core/src/helpers/bindings.ts
@@ -1,6 +1,11 @@
 import { Binding } from '../types/mitosis-node';
 
-export const createSingleBinding = (args: Omit<Binding, 'type'>): Binding => ({
+type SingleBinding = Omit<Binding & { type: 'single' }, 'type'>;
+
+export const createSingleBinding = (
+  args: Omit<SingleBinding, 'bindingType'> & Partial<Pick<SingleBinding, 'bindingType'>>,
+): Binding => ({
   ...args,
+  bindingType: args.bindingType || 'expression',
   type: 'single',
 });
diff --git a/packages/core/src/helpers/on-event.ts b/packages/core/src/helpers/on-event.ts
index c14eb66236..189b03593f 100644
--- a/packages/core/src/helpers/on-event.ts
+++ b/packages/core/src/helpers/on-event.ts
@@ -1,4 +1,5 @@
 import { MitosisComponent, MitosisNode, OnEventHook, Plugin } from '..';
+import { createSingleBinding } from './bindings';
 import { capitalize } from './capitalize';
 import { traverseNodes } from './traverse-nodes';
 
@@ -46,11 +47,11 @@ export const processOnEventHooksPlugin =
             };
 
             if (setBindings) {
-              node.bindings[handlerName] = {
+              node.bindings[handlerName] = createSingleBinding({
                 code: `state.${fnName}(${hook.eventArgName})`,
                 arguments: [hook.eventArgName],
-                type: 'single',
-              };
+                bindingType: 'function',
+              });
             }
           });
         });
diff --git a/packages/core/src/helpers/parsers.ts b/packages/core/src/helpers/parsers.ts
index c6e20cd181..fec63244be 100644
--- a/packages/core/src/helpers/parsers.ts
+++ b/packages/core/src/helpers/parsers.ts
@@ -4,20 +4,19 @@ import decorators from '@babel/plugin-syntax-decorators';
 import tsPlugin from '@babel/plugin-syntax-typescript';
 import tsPreset from '@babel/preset-typescript';
 
-export function parseCode(code: string) {
-  const ast = babel.parse(code, {
+export function parseCodeToAst(code: string) {
+  return babel.parse(code, {
     presets: [[tsPreset, { isTSX: true, allExtensions: true }]],
     plugins: [
       [tsPlugin, { isTSX: true }],
       [decorators, { legacy: true }],
     ],
   });
-  const body = babel.types.isFile(ast)
-    ? ast.program.body
-    : babel.types.isProgram(ast)
-    ? ast.body
-    : [];
-  return body;
+}
+
+export function parseCode(code: string) {
+  const ast = parseCodeToAst(code);
+  return babel.types.isFile(ast) ? ast.program.body : babel.types.isProgram(ast) ? ast.body : [];
 }
 
 export const isCodeBodyExpression = (body: babel.types.Statement[]) =>
diff --git a/packages/core/src/helpers/plugins/process-target-blocks.ts b/packages/core/src/helpers/plugins/process-target-blocks.ts
index 54bc398947..b6cf84dc2e 100644
--- a/packages/core/src/helpers/plugins/process-target-blocks.ts
+++ b/packages/core/src/helpers/plugins/process-target-blocks.ts
@@ -6,6 +6,7 @@ import {
 import { Targets } from '../../targets';
 import { TargetBlockDefinition } from '../../types/mitosis-component';
 import { Plugin } from '../../types/plugins';
+import { createSingleBinding } from '../bindings';
 import { createCodeProcessorPlugin } from './process-code';
 
 const getBlockForTarget = ({
@@ -32,10 +33,7 @@ export const processTargetBlocks = (target: Targets): Plugin => {
         const property = node?.properties[key];
         if (!matches || !property) return code;
 
-        node.bindings[key] = {
-          code: '"' + property + '"',
-          type: 'single',
-        };
+        node.bindings[key] = createSingleBinding({ code: `"${property}"` });
 
         return () => {
           delete node.properties[key];
diff --git a/packages/core/src/helpers/styles/__snapshots__/collect-css.test.ts.snap b/packages/core/src/helpers/styles/__snapshots__/collect-css.test.ts.snap
index ba6821658e..8f2796efb2 100644
--- a/packages/core/src/helpers/styles/__snapshots__/collect-css.test.ts.snap
+++ b/packages/core/src/helpers/styles/__snapshots__/collect-css.test.ts.snap
@@ -9,10 +9,12 @@ exports[`Styles > class binding and CSS are merged 1`] = `
         "@type": "@builder.io/mitosis/node",
         "bindings": {
           "class": {
+            "bindingType": "expression",
             "code": "state.classState + ' div'",
             "type": "single",
           },
           "style": {
+            "bindingType": "expression",
             "code": "state.styleState",
             "type": "single",
           },
diff --git a/packages/core/src/parsers/builder/builder.ts b/packages/core/src/parsers/builder/builder.ts
index 8f54fd83e4..ca466f7ab5 100644
--- a/packages/core/src/parsers/builder/builder.ts
+++ b/packages/core/src/parsers/builder/builder.ts
@@ -79,7 +79,7 @@ const getActionBindingsFromBlock = (
   const actionKeys = Object.keys(actions);
   if (actionKeys.length) {
     for (const key of actionKeys) {
-      const value = actions[key];
+      let value = actions[key];
       // Skip empty values
       if (!value.trim()) {
         continue;
@@ -90,7 +90,16 @@ const getActionBindingsFromBlock = (
         continue;
       }
       const useKey = `on${upperFirst(key)}`;
-      bindings[useKey] = createSingleBinding({ code: `${wrapBindingIfNeeded(value, options)}` });
+      const asyncPrefix = `(async () =>`;
+      const asyncSuffix = ')()';
+      const isAsync = value.startsWith(asyncPrefix) && value.endsWith(asyncSuffix);
+      if (isAsync) {
+        value = value.slice(asyncPrefix.length, -asyncSuffix.length);
+      }
+      bindings[useKey] = createSingleBinding({
+        code: `${wrapBindingIfNeeded(value, options)}`,
+        async: isAsync ? true : undefined,
+      });
     }
   }
 
@@ -375,15 +384,13 @@ const componentMappers: {
         });
         const queryOptions = variant.query as any[];
         if (Array.isArray(queryOptions)) {
-          variantNode.bindings.query = {
-            type: 'single',
+          variantNode.bindings.query = createSingleBinding({
             code: JSON.stringify(queryOptions.map((q) => omit(q, '@type'))),
-          };
+          });
         } else if (queryOptions) {
-          variantNode.bindings.query = {
-            type: 'single',
+          variantNode.bindings.query = createSingleBinding({
             code: JSON.stringify(omit(queryOptions, '@type')),
-          };
+          });
         }
         return variantNode;
       }) || [];
diff --git a/packages/core/src/parsers/jsx/element-parser.ts b/packages/core/src/parsers/jsx/element-parser.ts
index ab7485c996..17d97be255 100644
--- a/packages/core/src/parsers/jsx/element-parser.ts
+++ b/packages/core/src/parsers/jsx/element-parser.ts
@@ -290,7 +290,9 @@ export const jsxElementToJson = (
 
           memo.bindings[key] = createSingleBinding({
             code: generate(expression.body, { compact: true }).code,
+            async: expression.async === true ? true : undefined,
             arguments: args.length ? args : undefined,
+            bindingType: 'function',
           });
         } else if (types.isJSXElement(expression)) {
           // <Foo myProp={<MoreMitosisNode><div /></MoreMitosisNode>} />
diff --git a/packages/core/src/types/mitosis-node.ts b/packages/core/src/types/mitosis-node.ts
index 2c9dd2468b..f03a4343b1 100644
--- a/packages/core/src/types/mitosis-node.ts
+++ b/packages/core/src/types/mitosis-node.ts
@@ -1,19 +1,38 @@
 import { JSONObject } from './json';
 
 export type SpreadType = 'normal' | 'event-handlers';
+export type BindingType = 'function' | 'expression';
 
 type BindingProperties =
   | {
       type: 'spread';
       spreadType: SpreadType;
+      /**
+       * TODO: remove these once we've cleaned up the code that uses them.
+       * they don't need to be here since they only exist for functions
+       */
+      async?: boolean;
+      arguments?: string[];
     }
   | {
       type: 'single';
+      bindingType: Extract<BindingType, 'function'>;
+      async?: boolean;
+      arguments?: string[];
+    }
+  | {
+      type: 'single';
+      bindingType: Extract<BindingType, 'expression'>;
+      /**
+       * TODO: remove these once we've cleaned up the code that uses them.
+       * they don't need to be here since they only exist for functions
+       */
+      async?: boolean;
+      arguments?: string[];
     };
 
 export type Binding = {
   code: string;
-  arguments?: string[];
 } & BindingProperties;
 
 export type BaseNode = {