From 17d77d60593c50029f6caa1d441565642e55ce2f Mon Sep 17 00:00:00 2001
From: Nicolas Merget <nicolas.merget@deutschebahn.com>
Date: Tue, 14 Jan 2025 14:56:11 +0100
Subject: [PATCH 1/4] fix: angular native events vs. custom events

---
 .changeset/polite-pugs-pull.md                |  31 +++++
 .../__snapshots__/alpine.test.ts.snap         |   2 +-
 .../__snapshots__/angular.import.test.ts.snap |  12 +-
 .../__snapshots__/angular.mapper.test.ts.snap |  12 +-
 .../__snapshots__/angular.state.test.ts.snap  |  12 +-
 .../__snapshots__/angular.styles.test.ts.snap |  12 +-
 .../__snapshots__/angular.test.ts.snap        |  24 ++--
 .../__tests__/__snapshots__/html.test.ts.snap |   6 +-
 .../__tests__/__snapshots__/lit.test.ts.snap  |   4 +-
 .../__snapshots__/marko.test.ts.snap          |   9 +-
 .../__snapshots__/mitosis.test.ts.snap        |   6 +-
 .../__snapshots__/preact.test.ts.snap         |   6 +-
 .../__tests__/__snapshots__/qwik.test.ts.snap |   6 +-
 .../__snapshots__/react-native.test.ts.snap   |   6 +-
 .../react-state-builder.test.ts.snap          |   6 +-
 .../react-state-mobx.test.ts.snap             |   6 +-
 .../react-state-solid.test.ts.snap            |   6 +-
 .../react-state-valtio.test.ts.snap           |   6 +-
 .../react-state-variables.test.ts.snap        |   6 +-
 .../__snapshots__/react.test.ts.snap          |   6 +-
 .../__tests__/__snapshots__/rsc.test.ts.snap  |   6 +-
 .../__snapshots__/solid.test.ts.snap          |  28 +++--
 .../__snapshots__/stencil.test.ts.snap        |   4 +-
 .../__snapshots__/svelte.test.ts.snap         |   8 +-
 .../__tests__/__snapshots__/taro.test.ts.snap |   6 +-
 .../vue-composition.test.ts.snap              |   6 +-
 .../__tests__/__snapshots__/vue.test.ts.snap  |   6 +-
 .../__snapshots__/webcomponent.test.ts.snap   |  13 +-
 .../angular/output-event-bindings.raw.tsx     |  10 +-
 .../core/src/generators/alpine/generate.ts    |  17 +--
 packages/core/src/generators/angular/index.ts |  28 +++--
 packages/core/src/generators/angular/types.ts |  15 ++-
 packages/core/src/generators/helpers/rsc.ts   |   3 +-
 .../core/src/generators/html/generator.ts     |  70 +++++------
 .../core/src/generators/liquid/generator.ts   |   3 +-
 packages/core/src/generators/lit/generate.ts  |   3 +-
 .../core/src/generators/marko/generate.ts     |   3 +-
 .../core/src/generators/mitosis/generator.ts  |  32 ++---
 .../qwik/helpers/add-prevent-default.ts       |   7 +-
 .../src/generators/qwik/helpers/handlers.ts   |   3 +-
 .../core/src/generators/qwik/src-generator.ts |   3 +-
 packages/core/src/generators/react/blocks.ts  |   3 +-
 packages/core/src/generators/solid/blocks.ts  |   3 +-
 .../src/generators/stencil/helpers/index.ts   |   3 +-
 packages/core/src/generators/svelte/blocks.ts |   5 +-
 .../core/src/generators/swift/generator.ts    |   3 +-
 .../core/src/generators/template/generator.ts |   3 +-
 packages/core/src/generators/vue/blocks.ts    |   5 +-
 packages/core/src/helpers/event-handlers.ts   | 111 +++++++++++++++++-
 packages/core/src/helpers/is-children.ts      |   2 +-
 .../jsx/__snapshots__/signals.test.ts.snap    |  12 +-
 51 files changed, 413 insertions(+), 195 deletions(-)
 create mode 100644 .changeset/polite-pugs-pull.md

diff --git a/.changeset/polite-pugs-pull.md b/.changeset/polite-pugs-pull.md
new file mode 100644
index 0000000000..fa41d48add
--- /dev/null
+++ b/.changeset/polite-pugs-pull.md
@@ -0,0 +1,31 @@
+---
+'@builder.io/mitosis': patch
+---
+
+[angular]: Fix issue with events forced to become `toLowerCase()`.
+
+Based on [choosing-event-names](https://angular.dev/guide/components/outputs#choosing-event-names) custom events are camelCase. 
+[DOM events](https://www.w3schools.com/jsref/dom_obj_event.asp) are always lower-cased for Angular components.
+
+Checkout [event-handlers.ts](https://github.com/BuilderIO/mitosis/blob/main/packages/core/src/helpers/event-handlers.ts) to see all events which are automatically lower-cased everything else will be camelCase.
+
+If you need some other event to be lower-cased you can use `useMetadata.angular.nativeEvents`:
+
+```tsx
+import { useMetadata } from '@builder.io/mitosis';
+
+useMetadata({
+  angular: {
+    nativeEvents: ['onNativeEvent'],
+  },
+});
+
+export default function MyComponent(props) {
+  return (
+    <div>
+      <input onNativeEvent={(event) => console.log(event)} />
+      Hello!
+    </div>
+  );
+}
+```
diff --git a/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap b/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap
index 435fd037c3..b9ce030602 100644
--- a/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap
@@ -5821,7 +5821,7 @@ exports[`Alpine.js > jsx > Typescript Test > signalsOnUpdate 1`] = `
 </style>
 <div class=\\"test div\\" x-data=\\"myBasicComponent()\\">
   <span x-html=\\"id\\"></span>
-  <span x-html=\\"foo.bar.baz\\"></span>
+  <span x-html=\\"foo.value.bar.baz\\"></span>
 </div>
 <script>
   document.addEventListener(\\"alpine:init\\", () => {
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 6eeb8de867..ed5f86f9a4 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap
@@ -5242,7 +5242,9 @@ import { Component } from \\"@angular/core\\";
       <input
         [attr.value]=\\"name\\"
         (change)=\\"name = $event.target.value\\"
-        (changeorsomething)=\\"name = $event.target.value\\"
+        (changeOrSomething)=\\"name = $event.target.value\\"
+        (fakenative)=\\"name = $event.target.value\\"
+        (animationend)=\\"name = $event.target.value\\"
       />
 
       Hello! I can run in React, Vue, Solid, or Liquid!
@@ -13012,7 +13014,9 @@ import { Component } from \\"@angular/core\\";
       <input
         [attr.value]=\\"name\\"
         (change)=\\"name = $event.target.value\\"
-        (changeorsomething)=\\"name = $event.target.value\\"
+        (changeOrSomething)=\\"name = $event.target.value\\"
+        (fakenative)=\\"name = $event.target.value\\"
+        (animationend)=\\"name = $event.target.value\\"
       />
 
       Hello! I can run in React, Vue, Solid, or Liquid!
@@ -14180,7 +14184,7 @@ type Props = {
 @Component({
   selector: \\"my-basic-component\\",
   template: \`
-    <div class=\\"test div\\">{{id}} {{foo.bar.baz}}</div>
+    <div class=\\"test div\\">{{id}} {{foo.value.bar.baz}}</div>
   \`,
   styles: [
     \`
@@ -14200,7 +14204,7 @@ export default class MyBasicComponent {
   ngOnChanges(changes: SimpleChanges) {
     if (typeof window !== \\"undefined\\") {
       console.log(\\"props.id changed\\", this.id);
-      console.log(\\"props.foo.value.bar.baz changed\\", this.foo.bar.baz);
+      console.log(\\"props.foo.value.bar.baz changed\\", this.foo.value.bar.baz);
     }
   }
 }
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 fa0867c783..1282214636 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.mapper.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.mapper.test.ts.snap
@@ -5327,7 +5327,9 @@ import { Component } from \\"@angular/core\\";
       <input
         [attr.value]=\\"name\\"
         (change)=\\"name = $event.target.value\\"
-        (changeorsomething)=\\"name = $event.target.value\\"
+        (changeOrSomething)=\\"name = $event.target.value\\"
+        (fakenative)=\\"name = $event.target.value\\"
+        (animationend)=\\"name = $event.target.value\\"
       />
 
       Hello! I can run in React, Vue, Solid, or Liquid!
@@ -13225,7 +13227,9 @@ import { Component } from \\"@angular/core\\";
       <input
         [attr.value]=\\"name\\"
         (change)=\\"name = $event.target.value\\"
-        (changeorsomething)=\\"name = $event.target.value\\"
+        (changeOrSomething)=\\"name = $event.target.value\\"
+        (fakenative)=\\"name = $event.target.value\\"
+        (animationend)=\\"name = $event.target.value\\"
       />
 
       Hello! I can run in React, Vue, Solid, or Liquid!
@@ -14411,7 +14415,7 @@ type Props = {
 @Component({
   selector: \\"my-basic-component\\",
   template: \`
-    <div class=\\"test div\\">{{id}} {{foo.bar.baz}}</div>
+    <div class=\\"test div\\">{{id}} {{foo.value.bar.baz}}</div>
   \`,
   styles: [
     \`
@@ -14431,7 +14435,7 @@ export default class MyBasicComponent {
   ngOnChanges(changes: SimpleChanges) {
     if (typeof window !== \\"undefined\\") {
       console.log(\\"props.id changed\\", this.id);
-      console.log(\\"props.foo.value.bar.baz changed\\", this.foo.bar.baz);
+      console.log(\\"props.foo.value.bar.baz changed\\", this.foo.value.bar.baz);
     }
   }
 }
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 70b083603c..62c672b993 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.state.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.state.test.ts.snap
@@ -5442,7 +5442,9 @@ import { Component } from \\"@angular/core\\";
       <input
         [attr.value]=\\"name\\"
         (change)=\\"name = $event.target.value\\"
-        (changeorsomething)=\\"name = $event.target.value\\"
+        (changeOrSomething)=\\"name = $event.target.value\\"
+        (fakenative)=\\"name = $event.target.value\\"
+        (animationend)=\\"name = $event.target.value\\"
       />
 
       Hello! I can run in React, Vue, Solid, or Liquid!
@@ -13489,7 +13491,9 @@ import { Component } from \\"@angular/core\\";
       <input
         [attr.value]=\\"name\\"
         (change)=\\"name = $event.target.value\\"
-        (changeorsomething)=\\"name = $event.target.value\\"
+        (changeOrSomething)=\\"name = $event.target.value\\"
+        (fakenative)=\\"name = $event.target.value\\"
+        (animationend)=\\"name = $event.target.value\\"
       />
 
       Hello! I can run in React, Vue, Solid, or Liquid!
@@ -14670,7 +14674,7 @@ type Props = {
 @Component({
   selector: \\"my-basic-component\\",
   template: \`
-    <div class=\\"test div\\">{{id}} {{foo.bar.baz}}</div>
+    <div class=\\"test div\\">{{id}} {{foo.value.bar.baz}}</div>
   \`,
   styles: [
     \`
@@ -14690,7 +14694,7 @@ export default class MyBasicComponent {
   ngOnChanges(changes: SimpleChanges) {
     if (typeof window !== \\"undefined\\") {
       console.log(\\"props.id changed\\", this.id);
-      console.log(\\"props.foo.value.bar.baz changed\\", this.foo.bar.baz);
+      console.log(\\"props.foo.value.bar.baz changed\\", this.foo.value.bar.baz);
     }
   }
 }
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 b00b71c8cf..06367be7d9 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.styles.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.styles.test.ts.snap
@@ -4703,7 +4703,9 @@ import { Component } from \\"@angular/core\\";
       <input
         [attr.value]=\\"name\\"
         (change)=\\"name = $event.target.value\\"
-        (changeorsomething)=\\"name = $event.target.value\\"
+        (changeOrSomething)=\\"name = $event.target.value\\"
+        (fakenative)=\\"name = $event.target.value\\"
+        (animationend)=\\"name = $event.target.value\\"
       />
 
       Hello! I can run in React, Vue, Solid, or Liquid!
@@ -11667,7 +11669,9 @@ import { Component } from \\"@angular/core\\";
       <input
         [attr.value]=\\"name\\"
         (change)=\\"name = $event.target.value\\"
-        (changeorsomething)=\\"name = $event.target.value\\"
+        (changeOrSomething)=\\"name = $event.target.value\\"
+        (fakenative)=\\"name = $event.target.value\\"
+        (animationend)=\\"name = $event.target.value\\"
       />
 
       Hello! I can run in React, Vue, Solid, or Liquid!
@@ -12706,7 +12710,7 @@ type Props = {
 @Component({
   selector: \\"my-basic-component\\",
   template: \`
-    <div class=\\"test div\\">{{id}} {{foo.bar.baz}}</div>
+    <div class=\\"test div\\">{{id}} {{foo.value.bar.baz}}</div>
   \`,
   styles: [
     \`
@@ -12723,7 +12727,7 @@ export default class MyBasicComponent {
   ngOnChanges(changes: SimpleChanges) {
     if (typeof window !== \\"undefined\\") {
       console.log(\\"props.id changed\\", this.id);
-      console.log(\\"props.foo.value.bar.baz changed\\", this.foo.bar.baz);
+      console.log(\\"props.foo.value.bar.baz changed\\", this.foo.value.bar.baz);
     }
   }
 }
diff --git a/packages/core/src/__tests__/__snapshots__/angular.test.ts.snap b/packages/core/src/__tests__/__snapshots__/angular.test.ts.snap
index daccb367f9..028a32b281 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.test.ts.snap
@@ -9868,7 +9868,9 @@ import { Component } from \\"@angular/core\\";
       <input
         [attr.value]=\\"name\\"
         (change)=\\"name = $event.target.value\\"
-        (changeorsomething)=\\"name = $event.target.value\\"
+        (changeOrSomething)=\\"name = $event.target.value\\"
+        (fakenative)=\\"name = $event.target.value\\"
+        (animationend)=\\"name = $event.target.value\\"
       />
 
       Hello! I can run in React, Vue, Solid, or Liquid!
@@ -9906,7 +9908,9 @@ import { CommonModule } from \\"@angular/common\\";
       <input
         [attr.value]=\\"name\\"
         (change)=\\"name = $event.target.value\\"
-        (changeorsomething)=\\"name = $event.target.value\\"
+        (changeOrSomething)=\\"name = $event.target.value\\"
+        (fakenative)=\\"name = $event.target.value\\"
+        (animationend)=\\"name = $event.target.value\\"
       />
 
       Hello! I can run in React, Vue, Solid, or Liquid!
@@ -24494,7 +24498,9 @@ import { Component } from \\"@angular/core\\";
       <input
         [attr.value]=\\"name\\"
         (change)=\\"name = $event.target.value\\"
-        (changeorsomething)=\\"name = $event.target.value\\"
+        (changeOrSomething)=\\"name = $event.target.value\\"
+        (fakenative)=\\"name = $event.target.value\\"
+        (animationend)=\\"name = $event.target.value\\"
       />
 
       Hello! I can run in React, Vue, Solid, or Liquid!
@@ -24532,7 +24538,9 @@ import { CommonModule } from \\"@angular/common\\";
       <input
         [attr.value]=\\"name\\"
         (change)=\\"name = $event.target.value\\"
-        (changeorsomething)=\\"name = $event.target.value\\"
+        (changeOrSomething)=\\"name = $event.target.value\\"
+        (fakenative)=\\"name = $event.target.value\\"
+        (animationend)=\\"name = $event.target.value\\"
       />
 
       Hello! I can run in React, Vue, Solid, or Liquid!
@@ -26687,7 +26695,7 @@ type Props = {
 @Component({
   selector: \\"my-basic-component\\",
   template: \`
-    <div class=\\"test div\\">{{id}} {{foo.bar.baz}}</div>
+    <div class=\\"test div\\">{{id}} {{foo.value.bar.baz}}</div>
   \`,
   styles: [
     \`
@@ -26707,7 +26715,7 @@ export default class MyBasicComponent {
   ngOnChanges(changes: SimpleChanges) {
     if (typeof window !== \\"undefined\\") {
       console.log(\\"props.id changed\\", this.id);
-      console.log(\\"props.foo.value.bar.baz changed\\", this.foo.bar.baz);
+      console.log(\\"props.foo.value.bar.baz changed\\", this.foo.value.bar.baz);
     }
   }
 }
@@ -26737,7 +26745,7 @@ type Props = {
 @Component({
   selector: \\"my-basic-component\\",
   template: \`
-    <div class=\\"test div\\">{{id}} {{foo.bar.baz}}</div>
+    <div class=\\"test div\\">{{id}} {{foo.value.bar.baz}}</div>
   \`,
   styles: [
     \`
@@ -26759,7 +26767,7 @@ export default class MyBasicComponent {
   ngOnChanges(changes: SimpleChanges) {
     if (typeof window !== \\"undefined\\") {
       console.log(\\"props.id changed\\", this.id);
-      console.log(\\"props.foo.value.bar.baz changed\\", this.foo.bar.baz);
+      console.log(\\"props.foo.value.bar.baz changed\\", this.foo.value.bar.baz);
     }
   }
 }
diff --git a/packages/core/src/__tests__/__snapshots__/html.test.ts.snap b/packages/core/src/__tests__/__snapshots__/html.test.ts.snap
index 754830f4af..14a4f0de43 100644
--- a/packages/core/src/__tests__/__snapshots__/html.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/html.test.ts.snap
@@ -14763,7 +14763,7 @@ exports[`Html > jsx > Typescript Test > showWithRootText 1`] = `
 exports[`Html > jsx > Typescript Test > signalsOnUpdate 1`] = `
 "<div class=\\"test div\\">
   <template data-el=\\"div-1\\"><!-- props.id --></template>
-  <template data-el=\\"div-2\\"><!-- props.foo.bar.baz --></template>
+  <template data-el=\\"div-2\\"><!-- props.foo.value.bar.baz --></template>
 </div>
 <style>
   .div {
@@ -14798,13 +14798,13 @@ exports[`Html > jsx > Typescript Test > signalsOnUpdate 1`] = `
       });
 
       document.querySelectorAll(\\"[data-el='div-2']\\").forEach((el) => {
-        renderTextNode(el, props.foo.bar.baz);
+        renderTextNode(el, props.foo.value.bar.baz);
       });
 
       destroyAnyNodes();
 
       console.log(\\"props.id changed\\", props.id);
-      console.log(\\"props.foo.value.bar.baz changed\\", props.foo.bar.baz);
+      console.log(\\"props.foo.value.bar.baz changed\\", props.foo.value.bar.baz);
 
       pendingUpdate = false;
     }
diff --git a/packages/core/src/__tests__/__snapshots__/lit.test.ts.snap b/packages/core/src/__tests__/__snapshots__/lit.test.ts.snap
index f64458f4a0..af87fc777f 100644
--- a/packages/core/src/__tests__/__snapshots__/lit.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/lit.test.ts.snap
@@ -9121,7 +9121,7 @@ export default class MyBasicComponent extends LitElement {
 
   updated() {
     console.log(\\"props.id changed\\", this.id);
-    console.log(\\"props.foo.value.bar.baz changed\\", this.foo.bar.baz);
+    console.log(\\"props.foo.value.bar.baz changed\\", this.foo.value.bar.baz);
   }
 
   render() {
@@ -9130,7 +9130,7 @@ export default class MyBasicComponent extends LitElement {
   padding: 10px;
 }
 </style>
-          <div>\${this.id} \${this.foo.bar.baz}</div>
+          <div>\${this.id} \${this.foo.value.bar.baz}</div>
 
         \`;
   }
diff --git a/packages/core/src/__tests__/__snapshots__/marko.test.ts.snap b/packages/core/src/__tests__/__snapshots__/marko.test.ts.snap
index 41633ba0e5..ce8bc470f2 100644
--- a/packages/core/src/__tests__/__snapshots__/marko.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/marko.test.ts.snap
@@ -5208,16 +5208,19 @@ exports[`Marko > jsx > Typescript Test > signalsOnUpdate 1`] = `
 "class {
   onRender() {
     console.log(\\"props.id changed\\", this.input.id);
-    console.log(\\"props.foo.value.bar.baz changed\\", this.input.foo.bar.baz);
+    console.log(
+      \\"props.foo.value.bar.baz changed\\",
+      this.input.foo.value.bar.baz
+    );
   }
 }
 
 style {
-  .div-8c5e5900 {
+  .div-4105a7fa {
     padding: 10px;
   }
 }
-<div class=\\"test div-8c5e5900\\">\${input.id} \${input.foo.bar.baz}</div>"
+<div class=\\"test div-4105a7fa\\">\${input.id} \${input.foo.value.bar.baz}</div>"
 `;
 
 exports[`Marko > jsx > Typescript Test > spreadAttrs 1`] = `
diff --git a/packages/core/src/__tests__/__snapshots__/mitosis.test.ts.snap b/packages/core/src/__tests__/__snapshots__/mitosis.test.ts.snap
index 5cbc1dd33e..7d799719ed 100644
--- a/packages/core/src/__tests__/__snapshots__/mitosis.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/mitosis.test.ts.snap
@@ -21423,8 +21423,8 @@ import { useEffect } from \\"react\\";
 function MyBasicComponent(props) {
   useEffect(() => {
     console.log(\\"props.id changed\\", props.id);
-    console.log(\\"props.foo.value.bar.baz changed\\", props.foo.bar.baz);
-  }, [props.id, props.foo.bar.baz]);
+    console.log(\\"props.foo.value.bar.baz changed\\", props.foo.value.bar.baz);
+  }, [props.id, props.foo.value.bar.baz]);
 
   return (
     <div
@@ -21434,7 +21434,7 @@ function MyBasicComponent(props) {
       }}
     >
       {props.id}
-      {props.foo.bar.baz}
+      {props.foo.value.bar.baz}
     </div>
   );
 }
diff --git a/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap b/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap
index 09eab87c3f..bb45a69fb2 100644
--- a/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap
@@ -7453,14 +7453,14 @@ type Props = {
 function MyBasicComponent(props: Props) {
   useEffect(() => {
     console.log(\\"props.id changed\\", props.id);
-    console.log(\\"props.foo.value.bar.baz changed\\", props.foo.bar.baz);
-  }, [props.id, props.foo.bar.baz]);
+    console.log(\\"props.foo.value.bar.baz changed\\", props.foo.value.bar.baz);
+  }, [props.id, props.foo.value.bar.baz]);
 
   return (
     <Fragment>
       <div className=\\"test div\\">
         {props.id}
-        {props.foo.bar.baz}
+        {props.foo.value.bar.baz}
       </div>
       <style jsx>{\`
         .div {
diff --git a/packages/core/src/__tests__/__snapshots__/qwik.test.ts.snap b/packages/core/src/__tests__/__snapshots__/qwik.test.ts.snap
index b4e285c5ca..0b26200417 100644
--- a/packages/core/src/__tests__/__snapshots__/qwik.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/qwik.test.ts.snap
@@ -9062,15 +9062,15 @@ export const MyBasicComponent = component$((props: Props) => {
 
   useTask$(({ track }) => {
     track(() => props.id);
-    track(() => props.foo.bar.baz);
+    track(() => props.foo.value.bar.baz);
     console.log(\\"props.id changed\\", props.id);
-    console.log(\\"props.foo.value.bar.baz changed\\", props.foo.bar.baz);
+    console.log(\\"props.foo.value.bar.baz changed\\", props.foo.value.bar.baz);
   });
 
   return (
     <div class=\\"test div-MyBasicComponent\\">
       {props.id}
-      {props.foo.bar.baz}
+      {props.foo.value.bar.baz}
     </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 6a11d32212..a7e5ddff51 100644
--- a/packages/core/src/__tests__/__snapshots__/react-native.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/react-native.test.ts.snap
@@ -10333,13 +10333,13 @@ type Props = {
 function MyBasicComponent(props: Props) {
   useEffect(() => {
     console.log(\\"props.id changed\\", props.id);
-    console.log(\\"props.foo.value.bar.baz changed\\", props.foo.bar.baz);
-  }, [props.id, props.foo.bar.baz]);
+    console.log(\\"props.foo.value.bar.baz changed\\", props.foo.value.bar.baz);
+  }, [props.id, props.foo.value.bar.baz]);
 
   return (
     <View style={styles.view1}>
       <Text>{props.id}</Text>
-      <Text>{props.foo.bar.baz}</Text>
+      <Text>{props.foo.value.bar.baz}</Text>
     </View>
   );
 }
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 e10e5b46f2..73c396566b 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
@@ -7404,14 +7404,14 @@ function MyBasicComponent(props: Props) {
 
   useEffect(() => {
     console.log(\\"props.id changed\\", props.id);
-    console.log(\\"props.foo.value.bar.baz changed\\", props.foo.bar.baz);
-  }, [props.id, props.foo.bar.baz]);
+    console.log(\\"props.foo.value.bar.baz changed\\", props.foo.value.bar.baz);
+  }, [props.id, props.foo.value.bar.baz]);
 
   return (
     <>
       <div className=\\"test div\\">
         {props.id}
-        {props.foo.bar.baz}
+        {props.foo.value.bar.baz}
       </div>
       <style jsx>{\`
         .div {
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 5c9aaa1ce4..67a4f7a764 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
@@ -7488,14 +7488,14 @@ type Props = {
 function MyBasicComponent(props: Props) {
   useEffect(() => {
     console.log(\\"props.id changed\\", props.id);
-    console.log(\\"props.foo.value.bar.baz changed\\", props.foo.bar.baz);
-  }, [props.id, props.foo.bar.baz]);
+    console.log(\\"props.foo.value.bar.baz changed\\", props.foo.value.bar.baz);
+  }, [props.id, props.foo.value.bar.baz]);
 
   return (
     <>
       <div className=\\"test div\\">
         {props.id}
-        {props.foo.bar.baz}
+        {props.foo.value.bar.baz}
       </div>
       <style jsx>{\`
         .div {
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 61e149d3fd..aff2d9d54a 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
@@ -7261,14 +7261,14 @@ type Props = {
 function MyBasicComponent(props: Props) {
   useEffect(() => {
     console.log(\\"props.id changed\\", props.id);
-    console.log(\\"props.foo.value.bar.baz changed\\", props.foo.bar.baz);
-  }, [props.id, props.foo.bar.baz]);
+    console.log(\\"props.foo.value.bar.baz changed\\", props.foo.value.bar.baz);
+  }, [props.id, props.foo.value.bar.baz]);
 
   return (
     <>
       <div className=\\"test div\\">
         {props.id}
-        {props.foo.bar.baz}
+        {props.foo.value.bar.baz}
       </div>
       <style jsx>{\`
         .div {
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 d550f3a398..3ac6feaf38 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
@@ -7267,14 +7267,14 @@ type Props = {
 function MyBasicComponent(props: Props) {
   useEffect(() => {
     console.log(\\"props.id changed\\", props.id);
-    console.log(\\"props.foo.value.bar.baz changed\\", props.foo.bar.baz);
-  }, [props.id, props.foo.bar.baz]);
+    console.log(\\"props.foo.value.bar.baz changed\\", props.foo.value.bar.baz);
+  }, [props.id, props.foo.value.bar.baz]);
 
   return (
     <>
       <div className=\\"test div\\">
         {props.id}
-        {props.foo.bar.baz}
+        {props.foo.value.bar.baz}
       </div>
       <style jsx>{\`
         .div {
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 7e44207a3f..dbfe7b52cc 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
@@ -5505,14 +5505,14 @@ type Props = {
 function MyBasicComponent(props: Props) {
   useEffect(() => {
     console.log(\\"props.id changed\\", props.id);
-    console.log(\\"props.foo.value.bar.baz changed\\", props.foo.bar.baz);
-  }, [props.id, props.foo.bar.baz]);
+    console.log(\\"props.foo.value.bar.baz changed\\", props.foo.value.bar.baz);
+  }, [props.id, props.foo.value.bar.baz]);
 
   return (
     <>
       <div className=\\"test div\\">
         {props.id}
-        {props.foo.bar.baz}
+        {props.foo.value.bar.baz}
       </div>
       <style jsx>{\`
         .div {
diff --git a/packages/core/src/__tests__/__snapshots__/react.test.ts.snap b/packages/core/src/__tests__/__snapshots__/react.test.ts.snap
index ba3fffdf46..f58a8fab44 100644
--- a/packages/core/src/__tests__/__snapshots__/react.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/react.test.ts.snap
@@ -7256,14 +7256,14 @@ type Props = {
 function MyBasicComponent(props: Props) {
   useEffect(() => {
     console.log(\\"props.id changed\\", props.id);
-    console.log(\\"props.foo.value.bar.baz changed\\", props.foo.bar.baz);
-  }, [props.id, props.foo.bar.baz]);
+    console.log(\\"props.foo.value.bar.baz changed\\", props.foo.value.bar.baz);
+  }, [props.id, props.foo.value.bar.baz]);
 
   return (
     <>
       <div className=\\"test div\\">
         {props.id}
-        {props.foo.bar.baz}
+        {props.foo.value.bar.baz}
       </div>
       <style jsx>{\`
         .div {
diff --git a/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap b/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap
index 47d8be4914..035d72909b 100644
--- a/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap
@@ -6712,14 +6712,14 @@ type Props = {
 function MyBasicComponent(props: Props) {
   useEffect(() => {
     console.log(\\"props.id changed\\", props.id);
-    console.log(\\"props.foo.value.bar.baz changed\\", props.foo.bar.baz);
-  }, [props.id, props.foo.bar.baz]);
+    console.log(\\"props.foo.value.bar.baz changed\\", props.foo.value.bar.baz);
+  }, [props.id, props.foo.value.bar.baz]);
 
   return (
     <>
       <div className=\\"test div\\">
         {props.id}
-        {props.foo.bar.baz}
+        {props.foo.value.bar.baz}
       </div>
       <style jsx>{\`
         .div {
diff --git a/packages/core/src/__tests__/__snapshots__/solid.test.ts.snap b/packages/core/src/__tests__/__snapshots__/solid.test.ts.snap
index 4f1e461a87..87517c667a 100644
--- a/packages/core/src/__tests__/__snapshots__/solid.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/solid.test.ts.snap
@@ -15726,25 +15726,27 @@ type Props = {
 
 function MyBasicComponent(props: Props) {
   const onUpdateFn_0_props_id = createMemo(() => props.id);
-  const onUpdateFn_0_props_foo_bar_baz = createMemo(() => props.foo.bar.baz);
+  const onUpdateFn_0_props_foo_value_bar_baz = createMemo(
+    () => props.foo.value.bar.baz
+  );
   function onUpdateFn_0() {
     console.log(\\"props.id changed\\", props.id);
-    console.log(\\"props.foo.value.bar.baz changed\\", props.foo.bar.baz);
+    console.log(\\"props.foo.value.bar.baz changed\\", props.foo.value.bar.baz);
   }
   createEffect(
     on(
-      () => [onUpdateFn_0_props_id(), onUpdateFn_0_props_foo_bar_baz()],
+      () => [onUpdateFn_0_props_id(), onUpdateFn_0_props_foo_value_bar_baz()],
       onUpdateFn_0
     )
   );
 
   return (
     <>
-      <div class=\\"test div-8c5e5900\\">
+      <div class=\\"test div-4105a7fa\\">
         {props.id}
-        {props.foo.bar.baz}
+        {props.foo.value.bar.baz}
       </div>
-      <style>{\`.div-8c5e5900 {
+      <style>{\`.div-4105a7fa {
   padding: 10px;
 }\`}</style>
     </>
@@ -15769,25 +15771,27 @@ type Props = {
 
 function MyBasicComponent(props: Props) {
   const onUpdateFn_0_props_id = createMemo(() => props.id);
-  const onUpdateFn_0_props_foo_bar_baz = createMemo(() => props.foo.bar.baz);
+  const onUpdateFn_0_props_foo_value_bar_baz = createMemo(
+    () => props.foo.value.bar.baz
+  );
   function onUpdateFn_0() {
     console.log(\\"props.id changed\\", props.id);
-    console.log(\\"props.foo.value.bar.baz changed\\", props.foo.bar.baz);
+    console.log(\\"props.foo.value.bar.baz changed\\", props.foo.value.bar.baz);
   }
   createEffect(
     on(
-      () => [onUpdateFn_0_props_id(), onUpdateFn_0_props_foo_bar_baz()],
+      () => [onUpdateFn_0_props_id(), onUpdateFn_0_props_foo_value_bar_baz()],
       onUpdateFn_0
     )
   );
 
   return (
     <>
-      <div class=\\"test div-8c5e5900\\">
+      <div class=\\"test div-4105a7fa\\">
         {props.id}
-        {props.foo.bar.baz}
+        {props.foo.value.bar.baz}
       </div>
-      <style>{\`.div-8c5e5900 {
+      <style>{\`.div-4105a7fa {
   padding: 10px;
 }\`}</style>
     </>
diff --git a/packages/core/src/__tests__/__snapshots__/stencil.test.ts.snap b/packages/core/src/__tests__/__snapshots__/stencil.test.ts.snap
index 47b9a97c71..3e4c7ad3e0 100644
--- a/packages/core/src/__tests__/__snapshots__/stencil.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/stencil.test.ts.snap
@@ -7711,14 +7711,14 @@ export class MyBasicComponent {
 
   componentDidUpdate() {
     console.log(\\"props.id changed\\", this.id);
-    console.log(\\"props.foo.value.bar.baz changed\\", this.foo.bar.baz);
+    console.log(\\"props.foo.value.bar.baz changed\\", this.foo.value.bar.baz);
   }
 
   render() {
     return (
       <div class=\\"test div\\">
         {this.id}
-        {this.foo.bar.baz}
+        {this.foo.value.bar.baz}
       </div>
     );
   }
diff --git a/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap b/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap
index 2d4bf25a51..cdc21a96be 100644
--- a/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap
@@ -6475,13 +6475,13 @@ exports[`Svelte > jsx > Typescript Test > signalsOnUpdate 1`] = `
 
   function onUpdateFn_0(..._args: any[]) {
     console.log(\\"props.id changed\\", id);
-    console.log(\\"props.foo.value.bar.baz changed\\", $foo.bar.baz);
+    console.log(\\"props.foo.value.bar.baz changed\\", foo.value.bar.baz);
   }
-  $: onUpdateFn_0_foo_bar_baz = $foo.bar.baz;
-  $: onUpdateFn_0(...[id, onUpdateFn_0_foo_bar_baz]);
+
+  $: onUpdateFn_0(...[id, foo.value.bar.baz]);
 </script>
 
-<div class=\\"test div\\">{id}{$foo.bar.baz}</div>
+<div class=\\"test div\\">{id}{foo.value.bar.baz}</div>
 
 <style>
   .div {
diff --git a/packages/core/src/__tests__/__snapshots__/taro.test.ts.snap b/packages/core/src/__tests__/__snapshots__/taro.test.ts.snap
index 532b08e5ce..1e0aea9c43 100644
--- a/packages/core/src/__tests__/__snapshots__/taro.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/taro.test.ts.snap
@@ -7418,14 +7418,14 @@ import { View, Text } from \\"@tarojs/components\\";
 function MyBasicComponent(props: Props) {
   useEffect(() => {
     console.log(\\"props.id changed\\", props.id);
-    console.log(\\"props.foo.value.bar.baz changed\\", props.foo.bar.baz);
-  }, [props.id, props.foo.bar.baz]);
+    console.log(\\"props.foo.value.bar.baz changed\\", props.foo.value.bar.baz);
+  }, [props.id, props.foo.value.bar.baz]);
 
   return (
     <>
       <View className=\\"view\\">
         {props.id}
-        {props.foo.bar.baz}
+        {props.foo.value.bar.baz}
       </View>
       <style jsx>{\`
         .view {
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 e25007a4b0..d17528c5f5 100644
--- a/packages/core/src/__tests__/__snapshots__/vue-composition.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/vue-composition.test.ts.snap
@@ -6759,7 +6759,7 @@ const props = defineProps<Props>();
 
 exports[`Vue > jsx > Typescript Test > signalsOnUpdate 1`] = `
 "<template>
-  <div class=\\"test div\\">{{ id }}{{ foo.bar.baz }}</div>
+  <div class=\\"test div\\">{{ id }}{{ foo.value.bar.baz }}</div>
 </template>
 
 <script setup lang=\\"ts\\">
@@ -6777,10 +6777,10 @@ type Props = {
 const props = defineProps<Props>();
 
 watch(
-  () => [props.id, props.foo.bar.baz],
+  () => [props.id, props.foo.value.bar.baz],
   () => {
     console.log(\\"props.id changed\\", props.id);
-    console.log(\\"props.foo.value.bar.baz changed\\", props.foo.bar.baz);
+    console.log(\\"props.foo.value.bar.baz changed\\", props.foo.value.bar.baz);
   },
   { immediate: true }
 );
diff --git a/packages/core/src/__tests__/__snapshots__/vue.test.ts.snap b/packages/core/src/__tests__/__snapshots__/vue.test.ts.snap
index 14dd49c49a..afea3ecd0e 100644
--- a/packages/core/src/__tests__/__snapshots__/vue.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/vue.test.ts.snap
@@ -8356,7 +8356,7 @@ export default defineComponent({
 
 exports[`Vue > jsx > Typescript Test > signalsOnUpdate 1`] = `
 "<template>
-  <div class=\\"test div\\">{{ id }}{{ foo.bar.baz }}</div>
+  <div class=\\"test div\\">{{ id }}{{ foo.value.bar.baz }}</div>
 </template>
 
 <script lang=\\"ts\\">
@@ -8380,7 +8380,7 @@ export default defineComponent({
     onUpdateHook0: {
       handler() {
         console.log(\\"props.id changed\\", this.id);
-        console.log(\\"props.foo.value.bar.baz changed\\", this.foo.bar.baz);
+        console.log(\\"props.foo.value.bar.baz changed\\", this.foo.value.bar.baz);
       },
       immediate: true,
     },
@@ -8390,7 +8390,7 @@ export default defineComponent({
     onUpdateHook0() {
       return {
         0: this.id,
-        1: this.foo.bar.baz,
+        1: this.foo.value.bar.baz,
       };
     },
   },
diff --git a/packages/core/src/__tests__/__snapshots__/webcomponent.test.ts.snap b/packages/core/src/__tests__/__snapshots__/webcomponent.test.ts.snap
index 19d0e8a5d7..b1995f22c2 100644
--- a/packages/core/src/__tests__/__snapshots__/webcomponent.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/webcomponent.test.ts.snap
@@ -31782,7 +31782,7 @@ class MyBasicComponent extends HTMLElement {
 
     this.componentProps = [\\"id\\", \\"foo\\"];
 
-    this.updateDeps = [[this.props.id, this.props.foo.bar.baz]];
+    this.updateDeps = [[this.props.id, this.props.foo.value.bar.baz]];
 
     // used to keep track of all nodes created by show/for
     this.nodesToDestroy = [];
@@ -31818,7 +31818,7 @@ class MyBasicComponent extends HTMLElement {
       <div class=\\"test div-my-basic-component\\">
         <template data-el=\\"div-my-basic-component-1\\"><!-- props.id --></template>
         <template data-el=\\"div-my-basic-component-2\\">
-          <!-- props.foo.bar.baz -->
+          <!-- props.foo.value.bar.baz -->
         </template>
       </div>
       <style>
@@ -31843,10 +31843,13 @@ class MyBasicComponent extends HTMLElement {
       const __hasChange = __prev.find((val, index) => val !== __next[index]);
       if (__hasChange !== undefined) {
         console.log(\\"props.id changed\\", self.props.id);
-        console.log(\\"props.foo.value.bar.baz changed\\", self.props.foo.bar.baz);
+        console.log(
+          \\"props.foo.value.bar.baz changed\\",
+          self.props.foo.value.bar.baz
+        );
         self.updateDeps[0] = __next;
       }
-    })(self.updateDeps[0], [self.props.id, self.props.foo.bar.baz]);
+    })(self.updateDeps[0], [self.props.id, self.props.foo.value.bar.baz]);
   }
 
   update() {
@@ -31875,7 +31878,7 @@ class MyBasicComponent extends HTMLElement {
     this._root
       .querySelectorAll(\\"[data-el='div-my-basic-component-2']\\")
       .forEach((el) => {
-        this.renderTextNode(el, this.props.foo.bar.baz);
+        this.renderTextNode(el, this.props.foo.value.bar.baz);
       });
   }
 
diff --git a/packages/core/src/__tests__/data/angular/output-event-bindings.raw.tsx b/packages/core/src/__tests__/data/angular/output-event-bindings.raw.tsx
index d2fc81aa76..34095f04cc 100644
--- a/packages/core/src/__tests__/data/angular/output-event-bindings.raw.tsx
+++ b/packages/core/src/__tests__/data/angular/output-event-bindings.raw.tsx
@@ -1,4 +1,10 @@
-import { useState } from '@builder.io/mitosis';
+import { useMetadata, useState } from '@builder.io/mitosis';
+
+useMetadata({
+  angular: {
+    nativeEvents: ['onFakeNative'],
+  },
+});
 
 export default function MyComponent(props) {
   const [name, setName] = useState('Steve');
@@ -9,6 +15,8 @@ export default function MyComponent(props) {
         value={name}
         onChange={(event) => setName(event.target.value)}
         onChangeOrSomething={(event) => setName(event.target.value)}
+        onFakeNative={(event) => setName(event.target.value)}
+        onAnimationEnd={(event) => setName(event.target.value)}
       />
       Hello! I can run in React, Vue, Solid, or Liquid!
     </div>
diff --git a/packages/core/src/generators/alpine/generate.ts b/packages/core/src/generators/alpine/generate.ts
index f0a55519cb..07f66c631c 100644
--- a/packages/core/src/generators/alpine/generate.ts
+++ b/packages/core/src/generators/alpine/generate.ts
@@ -1,6 +1,8 @@
+import { SELF_CLOSING_HTML_TAGS } from '@/constants/html_tags';
 import { ToAlpineOptions } from '@/generators/alpine/types';
 import { babelTransformCode } from '@/helpers/babel-transform';
 import { dashCase } from '@/helpers/dash-case';
+import { checkIsEvent } from '@/helpers/event-handlers';
 import { fastClone } from '@/helpers/fast-clone';
 import { getRefs } from '@/helpers/get-refs';
 import { getStateObjectStringFromComponent } from '@/helpers/get-state-object-string';
@@ -10,18 +12,17 @@ import { replaceIdentifiers } from '@/helpers/replace-identifiers';
 import { stripMetaProperties } from '@/helpers/strip-meta-properties';
 import { stripStateAndPropsRefs } from '@/helpers/strip-state-and-props-refs';
 import { collectCss } from '@/helpers/styles/collect-css';
-import { MitosisComponent } from '@/types/mitosis-component';
-import { checkIsForNode, ForNode, MitosisNode } from '@/types/mitosis-node';
-import { TranspilerGenerator } from '@/types/transpiler';
-import { camelCase, flowRight as compose, curry, flow } from 'lodash';
-import { format } from 'prettier/standalone';
-import { SELF_CLOSING_HTML_TAGS } from '../../constants/html_tags';
 import {
   runPostCodePlugins,
   runPostJsonPlugins,
   runPreCodePlugins,
   runPreJsonPlugins,
-} from '../../modules/plugins';
+} from '@/modules/plugins';
+import { MitosisComponent } from '@/types/mitosis-component';
+import { checkIsForNode, ForNode, MitosisNode } from '@/types/mitosis-node';
+import { TranspilerGenerator } from '@/types/transpiler';
+import { camelCase, flowRight as compose, curry, flow } from 'lodash';
+import { format } from 'prettier/standalone';
 import { renderMountHook } from './render-mount-hook';
 import { hasRootUpdateHook, renderUpdateHooks } from './render-update-hooks';
 
@@ -167,7 +168,7 @@ const blockToAlpine = (json: MitosisNode | ForNode, options: ToAlpineOptions = {
     // TODO: proper babel transform to replace. Util for this
     const useValue = stripStateAndPropsRefs(value);
 
-    if (key.startsWith('on')) {
+    if (checkIsEvent(key)) {
       str += bindEventHandler(options)(key, value);
     } else if (key === 'ref') {
       str += ` x-ref="${useValue}"`;
diff --git a/packages/core/src/generators/angular/index.ts b/packages/core/src/generators/angular/index.ts
index b31710901d..20bd23ecf9 100644
--- a/packages/core/src/generators/angular/index.ts
+++ b/packages/core/src/generators/angular/index.ts
@@ -63,6 +63,7 @@ import {
   ToAngularOptions,
 } from './types';
 
+import { checkIsBindingNativeEvent, checkIsEvent } from '@/helpers/event-handlers';
 import { parse } from './parse-selector';
 
 const { types } = babel;
@@ -226,10 +227,20 @@ const stringifyBinding =
     const { code, arguments: cusArgs = ['event'] } = binding!;
     // TODO: proper babel transform to replace. Util for this
 
-    if (keyToUse.startsWith('on')) {
+    if (checkIsEvent(keyToUse)) {
       const { event, value } = processEventBinding(keyToUse, code, node.name, cusArgs[0]);
-      // Angular events are all lowerCased
-      return ` (${event.toLowerCase()})="${value}"`;
+
+      // native events are all lowerCased
+      const lowerCaseEvent = event.toLowerCase();
+      const eventKey =
+        checkIsBindingNativeEvent(event) ||
+        blockOptions.nativeEvents?.find(
+          (nativeEvent) =>
+            nativeEvent === keyToUse || nativeEvent === event || nativeEvent === lowerCaseEvent,
+        )
+          ? lowerCaseEvent
+          : event;
+      return ` (${eventKey})="${value}"`;
     } else if (keyToUse === 'class') {
       return ` [class]="${code}" `;
     } else if (keyToUse === 'ref' || keyToUse === 'spreadRef') {
@@ -281,7 +292,7 @@ const handleNgOutletBindings = (node: MitosisNode, options: ToAngularOptions) =>
     let keyToUse = key.includes('-') ? `'${key}'` : key;
     keyToUse = keyToUse.replace('state.', '').replace('props.', '');
 
-    if (key.startsWith('on')) {
+    if (checkIsEvent(key)) {
       const { event, value } = processEventBinding(key, code, node.name, cusArgs[0]);
       allProps += `on${event.charAt(0).toUpperCase() + event.slice(1)}: ${value.replace(
         /\(.*?\)/g,
@@ -311,6 +322,7 @@ export const blockToAngular = ({
   options = {},
   blockOptions = {
     nativeAttributes: [],
+    nativeEvents: [],
   },
 }: {
   root: MitosisComponent;
@@ -659,7 +671,7 @@ const handleBindings = (
       if (item.name === 'For') continue;
       if (key === 'key') continue;
 
-      if (key.startsWith('on')) {
+      if (checkIsEvent(key)) {
         const { arguments: cusArgs = ['event'] } = item.bindings[key]!;
         const eventBindingName = `${generateNewBindingName(index, item.name)}_event`;
         if (
@@ -691,7 +703,7 @@ const handleBindings = (
         })`;
       }
     } else if (item.bindings[key]?.code) {
-      if (item.bindings[key]?.type !== 'spread' && !key.startsWith('on')) {
+      if (item.bindings[key]?.type !== 'spread' && !checkIsEvent(key)) {
         json.state[newBindingName] = { code: 'null', type: 'property' };
         makeReactiveState(
           json,
@@ -699,7 +711,7 @@ const handleBindings = (
           `this.${newBindingName} = ${item.bindings[key]!.code}`,
         );
         item.bindings[key]!.code = `state.${newBindingName}`;
-      } else if (key.startsWith('on')) {
+      } else if (checkIsEvent(key)) {
         const { arguments: cusArgs = ['event'] } = item.bindings[key]!;
         if (
           item.bindings[key]?.code.trim().startsWith('{') &&
@@ -941,6 +953,7 @@ export const componentToAngular: TranspilerGenerator<ToAngularOptions> =
           blockOptions: {
             childComponents,
             nativeAttributes: useMetadata?.angular?.nativeAttributes ?? [],
+            nativeEvents: useMetadata?.angular?.nativeEvents ?? [],
           },
         });
         if (options.state === 'inline-with-wrappers') {
@@ -964,6 +977,7 @@ export const componentToAngular: TranspilerGenerator<ToAngularOptions> =
       {
         childComponents,
         nativeAttributes: useMetadata?.angular?.nativeAttributes ?? [],
+        nativeEvents: useMetadata?.angular?.nativeEvents ?? [],
       },
     );
 
diff --git a/packages/core/src/generators/angular/types.ts b/packages/core/src/generators/angular/types.ts
index ac4ef1cec2..9baa5e67e2 100644
--- a/packages/core/src/generators/angular/types.ts
+++ b/packages/core/src/generators/angular/types.ts
@@ -26,10 +26,19 @@ export const DEFAULT_ANGULAR_OPTIONS: ToAngularOptions = {
 };
 
 export type AngularMetadata = {
-  /* Mitosis uses `attr.XXX` as default see https://angular.io/guide/attribute-binding. 
-  If you want to skip some you can use the 'nativeAttributes'. */
+  /**
+   * Mitosis uses `attr.XXX` as default see https://angular.io/guide/attribute-binding.
+   * If you want to skip some you can use the 'nativeAttributes'.
+   */
   nativeAttributes?: string[];
-  /* Overwrite default selector for component. Default will be kebab case (MyComponent -> my-component) */
+  /**
+   * If you encounter some native events which aren't generated in lower-case.
+   * Create a new PR inside [event-handlers.ts](https://github.com/BuilderIO/mitosis/blob/main/packages/core/src/helpers/event-handlers.ts) to fix it for all.
+   */
+  nativeEvents?: string[];
+  /**
+   * Overwrite default selector for component. Default will be kebab case (MyComponent -> my-component)
+   */
   selector?: string;
 };
 
diff --git a/packages/core/src/generators/helpers/rsc.ts b/packages/core/src/generators/helpers/rsc.ts
index 0b25b4f07c..a88dd8a7bb 100644
--- a/packages/core/src/generators/helpers/rsc.ts
+++ b/packages/core/src/generators/helpers/rsc.ts
@@ -1,3 +1,4 @@
+import { checkIsEvent } from '@/helpers/event-handlers';
 import { isMitosisNode } from '@/helpers/is-mitosis-node';
 import type { MitosisComponent } from '@/types/mitosis-component';
 import type { MitosisNode } from '@/types/mitosis-node';
@@ -18,7 +19,7 @@ export const checkIfIsClientComponent = (json: MitosisComponent) => {
   let foundEventListener = false;
   traverse(json).forEach(function (node) {
     if (isMitosisNode(node) && !checkIsNodeAMitosisComponent(node)) {
-      if (Object.keys(node.bindings).filter((item) => item.startsWith('on')).length) {
+      if (Object.keys(node.bindings).filter((item) => checkIsEvent(item)).length) {
         foundEventListener = true;
         this.stop();
       }
diff --git a/packages/core/src/generators/html/generator.ts b/packages/core/src/generators/html/generator.ts
index a23ca9ed25..911d4f42cf 100644
--- a/packages/core/src/generators/html/generator.ts
+++ b/packages/core/src/generators/html/generator.ts
@@ -1,48 +1,50 @@
+import { SELF_CLOSING_HTML_TAGS } from '@/constants/html_tags';
 import { ToHtmlOptions } from '@/generators/html/types';
-import { NodePath, types } from '@babel/core';
-import { pipe } from 'fp-ts/lib/function';
-import { camelCase, kebabCase } from 'lodash';
-import traverse from 'neotraverse/legacy';
-import { format } from 'prettier/standalone';
-import { SELF_CLOSING_HTML_TAGS } from '../../constants/html_tags';
-import { babelTransformExpression } from '../../helpers/babel-transform';
-import { dashCase } from '../../helpers/dash-case';
-import { fastClone } from '../../helpers/fast-clone';
-import { getPropFunctions } from '../../helpers/get-prop-functions';
-import { getProps } from '../../helpers/get-props';
-import { getPropsRef } from '../../helpers/get-props-ref';
-import { getRefs } from '../../helpers/get-refs';
-import { getStateObjectStringFromComponent } from '../../helpers/get-state-object-string';
-import { hasBindingsText } from '../../helpers/has-bindings-text';
-import { hasComponent } from '../../helpers/has-component';
-import { hasProps } from '../../helpers/has-props';
-import { hasStatefulDom } from '../../helpers/has-stateful-dom';
-import isChildren from '../../helpers/is-children';
-import { isHtmlAttribute } from '../../helpers/is-html-attribute';
-import { isMitosisNode } from '../../helpers/is-mitosis-node';
-import { mapRefs } from '../../helpers/map-refs';
-import { initializeOptions } from '../../helpers/merge-options';
-import { getForArguments } from '../../helpers/nodes/for';
-import { removeSurroundingBlock } from '../../helpers/remove-surrounding-block';
-import { renderPreComponent } from '../../helpers/render-imports';
-import { stripMetaProperties } from '../../helpers/strip-meta-properties';
+import { babelTransformExpression } from '@/helpers/babel-transform';
+import { dashCase } from '@/helpers/dash-case';
+import { checkIsEvent } from '@/helpers/event-handlers';
+import { fastClone } from '@/helpers/fast-clone';
+import { getPropFunctions } from '@/helpers/get-prop-functions';
+import { getProps } from '@/helpers/get-props';
+import { getPropsRef } from '@/helpers/get-props-ref';
+import { getRefs } from '@/helpers/get-refs';
+import { getStateObjectStringFromComponent } from '@/helpers/get-state-object-string';
+import { hasBindingsText } from '@/helpers/has-bindings-text';
+import { hasComponent } from '@/helpers/has-component';
+import { hasProps } from '@/helpers/has-props';
+import { hasStatefulDom } from '@/helpers/has-stateful-dom';
+import { isHtmlAttribute } from '@/helpers/is-html-attribute';
+import { isMitosisNode } from '@/helpers/is-mitosis-node';
+import { mapRefs } from '@/helpers/map-refs';
+import { initializeOptions } from '@/helpers/merge-options';
+import { getForArguments } from '@/helpers/nodes/for';
+import { removeSurroundingBlock } from '@/helpers/remove-surrounding-block';
+import { renderPreComponent } from '@/helpers/render-imports';
+import { stripMetaProperties } from '@/helpers/strip-meta-properties';
 import {
   DO_NOT_USE_ARGS,
   DO_NOT_USE_CONTEXT_VARS_TRANSFORMS,
   DO_NOT_USE_VARS_TRANSFORMS,
   StripStateAndPropsRefsOptions,
   stripStateAndPropsRefs,
-} from '../../helpers/strip-state-and-props-refs';
-import { collectCss } from '../../helpers/styles/collect-css';
+} from '@/helpers/strip-state-and-props-refs';
+import { collectCss } from '@/helpers/styles/collect-css';
 import {
   runPostCodePlugins,
   runPostJsonPlugins,
   runPreCodePlugins,
   runPreJsonPlugins,
-} from '../../modules/plugins';
-import { MitosisComponent } from '../../types/mitosis-component';
-import { MitosisNode, checkIsForNode } from '../../types/mitosis-node';
-import { TranspilerGenerator } from '../../types/transpiler';
+} from '@/modules/plugins';
+import { MitosisComponent } from '@/types/mitosis-component';
+import { MitosisNode, checkIsForNode } from '@/types/mitosis-node';
+import { TranspilerGenerator } from '@/types/transpiler';
+import { NodePath, types } from '@babel/core';
+import { pipe } from 'fp-ts/lib/function';
+import { camelCase, kebabCase } from 'lodash';
+import traverse from 'neotraverse/legacy';
+
+import isChildren from '@/helpers/is-children';
+import { format } from 'prettier/standalone';
 import { stringifySingleScopeOnMount } from '../helpers/on-mount';
 
 type ScopeVars = Array<string>;
@@ -424,7 +426,7 @@ const blockToHtml = (
       // TODO: proper babel transform to replace. Util for this
       const useValue = value;
 
-      if (key.startsWith('on')) {
+      if (checkIsEvent(key)) {
         let event = key.replace('on', '').toLowerCase();
         const fnName = camelCase(`on-${elId}-${event}`);
         const codeContent: string = removeSurroundingBlock(
diff --git a/packages/core/src/generators/liquid/generator.ts b/packages/core/src/generators/liquid/generator.ts
index a2392e7ebf..bf9a43a0b2 100644
--- a/packages/core/src/generators/liquid/generator.ts
+++ b/packages/core/src/generators/liquid/generator.ts
@@ -1,4 +1,5 @@
 import { ToLiquidOptions } from '@/generators/liquid/types';
+import { checkIsEvent } from '@/helpers/event-handlers';
 import { format } from 'prettier/standalone';
 import { SELF_CLOSING_HTML_TAGS } from '../../constants/html_tags';
 import { fastClone } from '../../helpers/fast-clone';
@@ -113,7 +114,7 @@ const blockToLiquid = (json: MitosisNode, options: ToLiquidOptions = {}): string
       // TODO: proper babel transform to replace. Util for this
       const useValue = stripStateAndPropsRefs(value);
 
-      if (key.startsWith('on')) {
+      if (checkIsEvent(key)) {
         // Do nothing
       } else if (isValidLiquidBinding(useValue)) {
         str += ` ${key}="{{${useValue}}}" `;
diff --git a/packages/core/src/generators/lit/generate.ts b/packages/core/src/generators/lit/generate.ts
index a61b5be276..ace3cab4eb 100644
--- a/packages/core/src/generators/lit/generate.ts
+++ b/packages/core/src/generators/lit/generate.ts
@@ -1,6 +1,7 @@
 import { ToLitOptions } from '@/generators/lit/types';
 import { dashCase } from '@/helpers/dash-case';
 import { dedent } from '@/helpers/dedent';
+import { checkIsEvent } from '@/helpers/event-handlers';
 import { fastClone } from '@/helpers/fast-clone';
 import { filterEmptyTextNodes } from '@/helpers/filter-empty-text-nodes';
 import { getProps } from '@/helpers/get-props';
@@ -92,7 +93,7 @@ const blockToLit = (json: MitosisNode, options: ToLitOptions = {}): string => {
       // TODO: maybe use ref directive instead
       // https://lit.dev/docs/templates/directives/#ref
       str += ` ref="${code}" `;
-    } else if (key.startsWith('on')) {
+    } else if (checkIsEvent(key)) {
       const asyncKeyword = json.bindings[key]?.async ? 'async ' : '';
       const useKey = '@' + key.substring(2).toLowerCase();
 
diff --git a/packages/core/src/generators/marko/generate.ts b/packages/core/src/generators/marko/generate.ts
index 257ac43b73..edd79ab8d8 100644
--- a/packages/core/src/generators/marko/generate.ts
+++ b/packages/core/src/generators/marko/generate.ts
@@ -2,6 +2,7 @@ import { SELF_CLOSING_HTML_TAGS } from '@/constants/html_tags';
 import { ToMarkoOptions } from '@/generators/marko/types';
 import { dashCase } from '@/helpers/dash-case';
 import { dedent } from '@/helpers/dedent';
+import { checkIsEvent } from '@/helpers/event-handlers';
 import { fastClone } from '@/helpers/fast-clone';
 import { filterEmptyTextNodes } from '@/helpers/filter-empty-text-nodes';
 import { getRefs } from '@/helpers/get-refs';
@@ -90,7 +91,7 @@ const blockToMarko = (json: MitosisNode, options: InternalToMarkoOptions): strin
       str += ` ...(${code}) `;
     } else if (key === 'ref') {
       str += ` key="${camelCase(code)}" `;
-    } else if (key.startsWith('on')) {
+    } else if (checkIsEvent(key)) {
       const asyncKeyword = async ? 'async ' : '';
       const useKey = key === 'onChange' && json.name === 'input' ? 'onInput' : key;
       str += ` ${dashCase(useKey)}=(${asyncKeyword}(${cusArgs.join(',')}) => ${processBinding(
diff --git a/packages/core/src/generators/mitosis/generator.ts b/packages/core/src/generators/mitosis/generator.ts
index 6dc1770eb5..98998f4f06 100644
--- a/packages/core/src/generators/mitosis/generator.ts
+++ b/packages/core/src/generators/mitosis/generator.ts
@@ -1,27 +1,29 @@
+import { HOOKS } from '@/constants/hooks';
+import { SELF_CLOSING_HTML_TAGS } from '@/constants/html_tags';
 import { ToMitosisOptions } from '@/generators/mitosis/types';
+import { dedent } from '@/helpers/dedent';
+import { checkIsEvent } from '@/helpers/event-handlers';
+import { fastClone } from '@/helpers/fast-clone';
+import { getComponents } from '@/helpers/get-components';
+import { getRefs } from '@/helpers/get-refs';
+import { getStateObjectStringFromComponent } from '@/helpers/get-state-object-string';
 import { isMitosisNode } from '@/helpers/is-mitosis-node';
+import { isRootTextNode } from '@/helpers/is-root-text-node';
+import { mapRefs } from '@/helpers/map-refs';
+import { renderPreComponent } from '@/helpers/render-imports';
+import { checkHasState } from '@/helpers/state';
 import {
   runPostCodePlugins,
   runPostJsonPlugins,
   runPreCodePlugins,
   runPreJsonPlugins,
 } from '@/modules/plugins';
+import { MitosisComponent } from '@/types/mitosis-component';
+import { MitosisNode, checkIsForNode, checkIsShowNode } from '@/types/mitosis-node';
+import { TranspilerGenerator } from '@/types/transpiler';
 import json5 from 'json5';
 import { format } from 'prettier/standalone';
-import { HOOKS } from '../../constants/hooks';
-import { SELF_CLOSING_HTML_TAGS } from '../../constants/html_tags';
-import { dedent } from '../../helpers/dedent';
-import { fastClone } from '../../helpers/fast-clone';
-import { getComponents } from '../../helpers/get-components';
-import { getRefs } from '../../helpers/get-refs';
-import { getStateObjectStringFromComponent } from '../../helpers/get-state-object-string';
-import { isRootTextNode } from '../../helpers/is-root-text-node';
-import { mapRefs } from '../../helpers/map-refs';
-import { renderPreComponent } from '../../helpers/render-imports';
-import { checkHasState } from '../../helpers/state';
-import { MitosisComponent } from '../../types/mitosis-component';
-import { MitosisNode, checkIsForNode, checkIsShowNode } from '../../types/mitosis-node';
-import { TranspilerGenerator } from '../../types/transpiler';
+
 import { blockToReact, componentToReact } from '../react';
 
 export const DEFAULT_FORMAT: ToMitosisOptions['format'] = 'legacy';
@@ -144,7 +146,7 @@ export const blockToMitosis = (
 
     if (json.bindings[key]?.type === 'spread') {
       str += ` {...(${json.bindings[key]?.code})} `;
-    } else if (key.startsWith('on')) {
+    } else if (checkIsEvent(key)) {
       const { arguments: cusArgs = ['event'], async } = json.bindings[key]!;
       const asyncKeyword = async ? 'async ' : '';
       str += ` ${key}={${asyncKeyword}(${cusArgs.join(',')}) => ${value.replace(/\s*;$/, '')}} `;
diff --git a/packages/core/src/generators/qwik/helpers/add-prevent-default.ts b/packages/core/src/generators/qwik/helpers/add-prevent-default.ts
index 72776ca000..1592b9c757 100644
--- a/packages/core/src/generators/qwik/helpers/add-prevent-default.ts
+++ b/packages/core/src/generators/qwik/helpers/add-prevent-default.ts
@@ -1,6 +1,7 @@
+import { checkIsEvent } from '@/helpers/event-handlers';
+import { isMitosisNode } from '@/helpers/is-mitosis-node';
+import { MitosisComponent } from '@/types/mitosis-component';
 import traverse from 'neotraverse/legacy';
-import { isMitosisNode } from '../../../helpers/is-mitosis-node';
-import { MitosisComponent } from '../../../types/mitosis-component';
 
 /**
  * Find event handlers that explicitly call .preventDefault() and
@@ -12,7 +13,7 @@ export function addPreventDefault(json: MitosisComponent) {
     if (isMitosisNode(node)) {
       if (node.bindings) {
         for (const key of Object.keys(node.bindings)) {
-          if (key.startsWith('on')) {
+          if (checkIsEvent(key)) {
             if (node.bindings[key]?.code.includes('.preventDefault()')) {
               const event = key.slice(2).toLowerCase();
               node.properties['preventdefault:' + event] = '';
diff --git a/packages/core/src/generators/qwik/helpers/handlers.ts b/packages/core/src/generators/qwik/helpers/handlers.ts
index 24abda603d..a4fdcfddd2 100644
--- a/packages/core/src/generators/qwik/helpers/handlers.ts
+++ b/packages/core/src/generators/qwik/helpers/handlers.ts
@@ -1,3 +1,4 @@
+import { checkIsEvent } from '@/helpers/event-handlers';
 import { MitosisNode } from '../../../types/mitosis-node';
 import { renderUseLexicalScope } from '../component';
 import { arrowFnBlock, EmitFn, File, SrcBuilder } from '../src-generator';
@@ -61,5 +62,5 @@ function renderHandler(file: File, symbol: string, code: string) {
 }
 
 function isEventName(name: string) {
-  return name.startsWith('on') && name.charAt(2).toUpperCase() == name.charAt(2);
+  return checkIsEvent(name) && name.charAt(2).toUpperCase() == name.charAt(2);
 }
diff --git a/packages/core/src/generators/qwik/src-generator.ts b/packages/core/src/generators/qwik/src-generator.ts
index 5db00c84c0..abbf04ddd5 100644
--- a/packages/core/src/generators/qwik/src-generator.ts
+++ b/packages/core/src/generators/qwik/src-generator.ts
@@ -1,6 +1,7 @@
 import parserTypeScript from 'prettier/parser-typescript';
 import { format } from 'prettier/standalone';
 
+import { checkIsEvent } from '@/helpers/event-handlers';
 import { SELF_CLOSING_HTML_TAGS } from '../../constants/html_tags';
 import { convertExportDefaultToReturn } from '../../parsers/builder';
 import { stableJSONserialize } from './helpers/stable-serialize';
@@ -424,7 +425,7 @@ export class SrcBuilder {
 }
 
 function isEvent(name: string): boolean {
-  return name.startsWith('on') && isUppercase(name.charAt(2)) && !name.endsWith('$');
+  return checkIsEvent(name) && isUppercase(name.charAt(2)) && !name.endsWith('$');
 }
 
 function isUppercase(ch: string): boolean {
diff --git a/packages/core/src/generators/react/blocks.ts b/packages/core/src/generators/react/blocks.ts
index 3d7fc3736e..40dc24b97d 100644
--- a/packages/core/src/generators/react/blocks.ts
+++ b/packages/core/src/generators/react/blocks.ts
@@ -1,3 +1,4 @@
+import { checkIsEvent } from '@/helpers/event-handlers';
 import { filterEmptyTextNodes } from '@/helpers/filter-empty-text-nodes';
 import isChildren from '@/helpers/is-children';
 import { isRootTextNode } from '@/helpers/is-root-text-node';
@@ -296,7 +297,7 @@ export const blockToReact = (
     }
     if (json.bindings[key]?.type === 'spread') {
       str += ` {...(${value})} `;
-    } else if (key.startsWith('on')) {
+    } else if (checkIsEvent(key)) {
       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;
diff --git a/packages/core/src/generators/solid/blocks.ts b/packages/core/src/generators/solid/blocks.ts
index 3f6e2f0039..8f3b57741d 100644
--- a/packages/core/src/generators/solid/blocks.ts
+++ b/packages/core/src/generators/solid/blocks.ts
@@ -1,4 +1,5 @@
 import { babelTransformExpression } from '@/helpers/babel-transform';
+import { checkIsEvent } from '@/helpers/event-handlers';
 import { filterEmptyTextNodes } from '@/helpers/filter-empty-text-nodes';
 import { isMitosisNode } from '@/helpers/is-mitosis-node';
 import { objectHasKey } from '@/helpers/typescript';
@@ -89,7 +90,7 @@ export const blockToSolid = (
 
     if (type === 'spread') {
       str += ` {...(${code})} `;
-    } else if (key.startsWith('on')) {
+    } else if (checkIsEvent(key)) {
       const useKey = key === 'onChange' && json.name === 'input' ? 'onInput' : key;
       const asyncKeyword = json.bindings[key]?.async ? 'async ' : '';
       str += ` ${useKey}={${asyncKeyword}(${cusArg.join(',')}) => ${code}} `;
diff --git a/packages/core/src/generators/stencil/helpers/index.ts b/packages/core/src/generators/stencil/helpers/index.ts
index 61c5bb06bd..f4dd441239 100644
--- a/packages/core/src/generators/stencil/helpers/index.ts
+++ b/packages/core/src/generators/stencil/helpers/index.ts
@@ -1,11 +1,12 @@
 import { ToStencilOptions } from '@/generators/stencil/types';
 import { dashCase } from '@/helpers/dash-case';
+import { checkIsEvent } from '@/helpers/event-handlers';
 import { renderPreComponent } from '@/helpers/render-imports';
 import { stripStateAndPropsRefs } from '@/helpers/strip-state-and-props-refs';
 import { MitosisComponent, MitosisState } from '@/types/mitosis-component';
 import { MitosisNode } from '@/types/mitosis-node';
 
-export const isEvent = (key: string): boolean => key.startsWith('on');
+export const isEvent = (key: string): boolean => checkIsEvent(key);
 
 /**
  * We need to "emit" events those can be on multiple places, so we do it as post step
diff --git a/packages/core/src/generators/svelte/blocks.ts b/packages/core/src/generators/svelte/blocks.ts
index ae492cfbe1..7fe2388256 100644
--- a/packages/core/src/generators/svelte/blocks.ts
+++ b/packages/core/src/generators/svelte/blocks.ts
@@ -1,4 +1,5 @@
 import { createSingleBinding } from '@/helpers/bindings';
+import { checkIsEvent } from '@/helpers/event-handlers';
 import isChildren from '@/helpers/is-children';
 import { isUpperCase } from '@/helpers/is-upper-case';
 import { getForArguments } from '@/helpers/nodes/for';
@@ -222,7 +223,7 @@ const stringifyBinding =
     if (type === 'spread') {
       const spreadValue = key === 'props' ? '$$props' : code;
       return ` {...${spreadValue}} `;
-    } else if (key.startsWith('on') && isValidHtmlTag) {
+    } else if (checkIsEvent(key) && isValidHtmlTag) {
       const { async } = binding;
       // handle html native on[event] props
       const event = key.replace('on', '').toLowerCase();
@@ -236,7 +237,7 @@ const stringifyBinding =
         const asyncKeyword = async ? 'async ' : '';
         return ` on:${event}="{${asyncKeyword}(${cusArgs.join(',')}) => {${valueWithoutBlock}}}" `;
       }
-    } else if (key.startsWith('on')) {
+    } else if (checkIsEvent(key)) {
       // handle on[custom event] props
       const valueWithoutBlock = removeSurroundingBlock(code);
 
diff --git a/packages/core/src/generators/swift/generator.ts b/packages/core/src/generators/swift/generator.ts
index 5e9370c853..af7a87ee47 100644
--- a/packages/core/src/generators/swift/generator.ts
+++ b/packages/core/src/generators/swift/generator.ts
@@ -1,4 +1,5 @@
 import { ToSwiftOptions } from '@/generators/swift/types';
+import { checkIsEvent } from '@/helpers/event-handlers';
 import traverse from 'neotraverse/legacy';
 import { dedent } from '../../helpers/dedent';
 import { fastClone } from '../../helpers/fast-clone';
@@ -149,7 +150,7 @@ const blockToSwift = (json: MitosisNode, options: ToSwiftOptions): string => {
         continue;
       }
 
-      if (key.startsWith('on')) {
+      if (checkIsEvent(key)) {
         if (key === 'onClick') {
           continue;
         } else {
diff --git a/packages/core/src/generators/template/generator.ts b/packages/core/src/generators/template/generator.ts
index 9c8325d4e1..4877477662 100644
--- a/packages/core/src/generators/template/generator.ts
+++ b/packages/core/src/generators/template/generator.ts
@@ -1,4 +1,5 @@
 import { ToTemplateOptions } from '@/generators/template/types';
+import { checkIsEvent } from '@/helpers/event-handlers';
 import { format } from 'prettier/standalone';
 import { SELF_CLOSING_HTML_TAGS } from '../../constants/html_tags';
 import { dedent } from '../../helpers/dedent';
@@ -76,7 +77,7 @@ const blockToTemplate = (json: MitosisNode, options: ToTemplateOptions = {}) =>
       // TODO: proper babel transform to replace. Util for this
       const useValue = value;
 
-      if (key.startsWith('on')) {
+      if (checkIsEvent(key)) {
         // Do nothing
       } else {
         str += ` ${key}="\${${useValue}}" `;
diff --git a/packages/core/src/generators/vue/blocks.ts b/packages/core/src/generators/vue/blocks.ts
index 639e7854f1..0f6f7e89fa 100644
--- a/packages/core/src/generators/vue/blocks.ts
+++ b/packages/core/src/generators/vue/blocks.ts
@@ -1,4 +1,5 @@
 import { createSingleBinding } from '@/helpers/bindings';
+import { checkIsEvent } from '@/helpers/event-handlers';
 import { filterEmptyTextNodes } from '@/helpers/filter-empty-text-nodes';
 import isChildren from '@/helpers/is-children';
 import { isMitosisNode } from '@/helpers/is-mitosis-node';
@@ -130,7 +131,7 @@ const stringifyBinding =
       // TODO: proper babel transform to replace. Util for this
       const useValue = value?.code || '';
 
-      if (key.startsWith('on') && isValidHtmlTag) {
+      if (checkIsEvent(key) && isValidHtmlTag) {
         // handle html native on[event] props
         const { arguments: cusArgs = ['event'], async } = value;
         let event = key.replace('on', '').toLowerCase();
@@ -154,7 +155,7 @@ const stringifyBinding =
         const eventHandlerKey = `${SPECIAL_PROPERTIES.V_ON_AT}${event}`;
 
         return `${eventHandlerKey}="${eventHandlerValue}"`;
-      } else if (key.startsWith('on')) {
+      } else if (checkIsEvent(key)) {
         // handle on[custom event] props
         const { arguments: cusArgs = ['event'] } = node.bindings[key]!;
         return `:${key}="(${cusArgs.join(',')}) => ${encodeQuotes(useValue)}"`;
diff --git a/packages/core/src/helpers/event-handlers.ts b/packages/core/src/helpers/event-handlers.ts
index d263630434..0f938db322 100644
--- a/packages/core/src/helpers/event-handlers.ts
+++ b/packages/core/src/helpers/event-handlers.ts
@@ -1 +1,110 @@
-export const checkIsBindingEventHandler = (code: string) => code.startsWith('on');
+export const checkIsEvent = (code: string) => code.startsWith('on');
+
+const nativeEvents = [
+  'abort',
+  'animationcancel',
+  'animationend',
+  'animationiteration',
+  'animationstart',
+  'auxclick',
+  'beforeinput',
+  'beforetoggle',
+  'blur',
+  'cancel',
+  'canplay',
+  'canplaythrough',
+  'change',
+  'click',
+  'close',
+  'compositionend',
+  'compositionstart',
+  'compositionupdate',
+  'contextlost',
+  'contextmenu',
+  'contextrestored',
+  'copy',
+  'cuechange',
+  'cut',
+  'dblclick',
+  'drag',
+  'dragend',
+  'dragenter',
+  'dragleave',
+  'dragover',
+  'dragstart',
+  'drop',
+  'durationchange',
+  'emptied',
+  'ended',
+  'error',
+  'focus',
+  'focusin',
+  'focusout',
+  'formdata',
+  'gotpointercapture',
+  'input',
+  'invalid',
+  'keydown',
+  'keypress',
+  'keyup',
+  'load',
+  'loadeddata',
+  'loadedmetadata',
+  'loadstart',
+  'lostpointercapture',
+  'mousedown',
+  'mouseenter',
+  'mouseleave',
+  'mousemove',
+  'mouseout',
+  'mouseover',
+  'mouseup',
+  'paste',
+  'pause',
+  'play',
+  'playing',
+  'pointercancel',
+  'pointerdown',
+  'pointerenter',
+  'pointerleave',
+  'pointermove',
+  'pointerout',
+  'pointerover',
+  'pointerup',
+  'progress',
+  'ratechange',
+  'reset',
+  'resize',
+  'scroll',
+  'scrollend',
+  'securitypolicyviolation',
+  'seeked',
+  'seeking',
+  'select',
+  'selectionchange',
+  'selectstart',
+  'slotchange',
+  'stalled',
+  'submit',
+  'suspend',
+  'timeupdate',
+  'toggle',
+  'touchcancel',
+  'touchend',
+  'touchmove',
+  'touchstart',
+  'transitioncancel',
+  'transitionend',
+  'transitionrun',
+  'transitionstart',
+  'volumechange',
+  'waiting',
+  'webkitanimationend',
+  'webkitanimationiteration',
+  'webkitanimationstart',
+  'webkittransitionend',
+  'wheel',
+];
+
+export const checkIsBindingNativeEvent = (code: string) =>
+  !!nativeEvents.find((nativeEvent) => nativeEvent === code.toLowerCase());
diff --git a/packages/core/src/helpers/is-children.ts b/packages/core/src/helpers/is-children.ts
index acbceac1cd..7c7ef76a8b 100644
--- a/packages/core/src/helpers/is-children.ts
+++ b/packages/core/src/helpers/is-children.ts
@@ -1,4 +1,4 @@
-import { MitosisNode } from '../types/mitosis-node';
+import { MitosisNode } from '@/types/mitosis-node';
 
 export const getTextValue = (node: MitosisNode) => {
   const textValue = node.bindings._text?.code || node.properties.__text || '';
diff --git a/packages/core/src/parsers/jsx/__snapshots__/signals.test.ts.snap b/packages/core/src/parsers/jsx/__snapshots__/signals.test.ts.snap
index 7ed8b127be..4c0a21e92a 100644
--- a/packages/core/src/parsers/jsx/__snapshots__/signals.test.ts.snap
+++ b/packages/core/src/parsers/jsx/__snapshots__/signals.test.ts.snap
@@ -2,15 +2,9 @@
 
 exports[`Signals type parsing > findSignals 1`] = `
 {
-  "context": Set {
-    "context",
-  },
-  "props": Set {
-    "k",
-  },
-  "state": Set {
-    "n",
-  },
+  "context": Set {},
+  "props": Set {},
+  "state": Set {},
 }
 `;
 

From a2f81ad0b5a45f1743a68c0c0d6bbe20cc2babe2 Mon Sep 17 00:00:00 2001
From: Nicolas Merget <nicolas.merget@deutschebahn.com>
Date: Tue, 14 Jan 2025 15:01:06 +0100
Subject: [PATCH 2/4] fix: issue with linting

---
 packages/core/src/generators/alpine/generate.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/core/src/generators/alpine/generate.ts b/packages/core/src/generators/alpine/generate.ts
index 07f66c631c..93d11d9c11 100644
--- a/packages/core/src/generators/alpine/generate.ts
+++ b/packages/core/src/generators/alpine/generate.ts
@@ -19,7 +19,7 @@ import {
   runPreJsonPlugins,
 } from '@/modules/plugins';
 import { MitosisComponent } from '@/types/mitosis-component';
-import { checkIsForNode, ForNode, MitosisNode } from '@/types/mitosis-node';
+import { ForNode, MitosisNode, checkIsForNode } from '@/types/mitosis-node';
 import { TranspilerGenerator } from '@/types/transpiler';
 import { camelCase, flowRight as compose, curry, flow } from 'lodash';
 import { format } from 'prettier/standalone';

From bc76de57a14c1ab5e567c4c4d918db6c8858e768 Mon Sep 17 00:00:00 2001
From: Nicolas Merget <nicolas.merget@deutschebahn.com>
Date: Tue, 14 Jan 2025 15:24:30 +0100
Subject: [PATCH 3/4] chore: update snapshots

---
 .../__snapshots__/alpine.test.ts.snap         |  2 +-
 .../__snapshots__/angular.import.test.ts.snap |  4 +--
 .../__snapshots__/angular.mapper.test.ts.snap |  4 +--
 .../__snapshots__/angular.state.test.ts.snap  |  4 +--
 .../__snapshots__/angular.styles.test.ts.snap |  4 +--
 .../__snapshots__/angular.test.ts.snap        |  8 +++---
 .../__tests__/__snapshots__/html.test.ts.snap |  6 ++--
 .../__tests__/__snapshots__/lit.test.ts.snap  |  4 +--
 .../__snapshots__/marko.test.ts.snap          |  9 ++----
 .../__snapshots__/mitosis.test.ts.snap        |  6 ++--
 .../__snapshots__/preact.test.ts.snap         |  6 ++--
 .../__tests__/__snapshots__/qwik.test.ts.snap |  6 ++--
 .../__snapshots__/react-native.test.ts.snap   |  6 ++--
 .../react-state-builder.test.ts.snap          |  6 ++--
 .../react-state-mobx.test.ts.snap             |  6 ++--
 .../react-state-solid.test.ts.snap            |  6 ++--
 .../react-state-valtio.test.ts.snap           |  6 ++--
 .../react-state-variables.test.ts.snap        |  6 ++--
 .../__snapshots__/react.test.ts.snap          |  6 ++--
 .../__tests__/__snapshots__/rsc.test.ts.snap  |  6 ++--
 .../__snapshots__/solid.test.ts.snap          | 28 ++++++++-----------
 .../__snapshots__/stencil.test.ts.snap        |  4 +--
 .../__snapshots__/svelte.test.ts.snap         |  8 +++---
 .../__tests__/__snapshots__/taro.test.ts.snap |  6 ++--
 .../vue-composition.test.ts.snap              |  6 ++--
 .../__tests__/__snapshots__/vue.test.ts.snap  |  6 ++--
 .../__snapshots__/webcomponent.test.ts.snap   | 13 ++++-----
 .../jsx/__snapshots__/signals.test.ts.snap    | 12 ++++++--
 28 files changed, 95 insertions(+), 99 deletions(-)

diff --git a/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap b/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap
index b9ce030602..435fd037c3 100644
--- a/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap
@@ -5821,7 +5821,7 @@ exports[`Alpine.js > jsx > Typescript Test > signalsOnUpdate 1`] = `
 </style>
 <div class=\\"test div\\" x-data=\\"myBasicComponent()\\">
   <span x-html=\\"id\\"></span>
-  <span x-html=\\"foo.value.bar.baz\\"></span>
+  <span x-html=\\"foo.bar.baz\\"></span>
 </div>
 <script>
   document.addEventListener(\\"alpine:init\\", () => {
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 ed5f86f9a4..5587defbd3 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap
@@ -14184,7 +14184,7 @@ type Props = {
 @Component({
   selector: \\"my-basic-component\\",
   template: \`
-    <div class=\\"test div\\">{{id}} {{foo.value.bar.baz}}</div>
+    <div class=\\"test div\\">{{id}} {{foo.bar.baz}}</div>
   \`,
   styles: [
     \`
@@ -14204,7 +14204,7 @@ export default class MyBasicComponent {
   ngOnChanges(changes: SimpleChanges) {
     if (typeof window !== \\"undefined\\") {
       console.log(\\"props.id changed\\", this.id);
-      console.log(\\"props.foo.value.bar.baz changed\\", this.foo.value.bar.baz);
+      console.log(\\"props.foo.value.bar.baz changed\\", this.foo.bar.baz);
     }
   }
 }
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 1282214636..0fa4c40421 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.mapper.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.mapper.test.ts.snap
@@ -14415,7 +14415,7 @@ type Props = {
 @Component({
   selector: \\"my-basic-component\\",
   template: \`
-    <div class=\\"test div\\">{{id}} {{foo.value.bar.baz}}</div>
+    <div class=\\"test div\\">{{id}} {{foo.bar.baz}}</div>
   \`,
   styles: [
     \`
@@ -14435,7 +14435,7 @@ export default class MyBasicComponent {
   ngOnChanges(changes: SimpleChanges) {
     if (typeof window !== \\"undefined\\") {
       console.log(\\"props.id changed\\", this.id);
-      console.log(\\"props.foo.value.bar.baz changed\\", this.foo.value.bar.baz);
+      console.log(\\"props.foo.value.bar.baz changed\\", this.foo.bar.baz);
     }
   }
 }
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 62c672b993..de23dc6e71 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.state.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.state.test.ts.snap
@@ -14674,7 +14674,7 @@ type Props = {
 @Component({
   selector: \\"my-basic-component\\",
   template: \`
-    <div class=\\"test div\\">{{id}} {{foo.value.bar.baz}}</div>
+    <div class=\\"test div\\">{{id}} {{foo.bar.baz}}</div>
   \`,
   styles: [
     \`
@@ -14694,7 +14694,7 @@ export default class MyBasicComponent {
   ngOnChanges(changes: SimpleChanges) {
     if (typeof window !== \\"undefined\\") {
       console.log(\\"props.id changed\\", this.id);
-      console.log(\\"props.foo.value.bar.baz changed\\", this.foo.value.bar.baz);
+      console.log(\\"props.foo.value.bar.baz changed\\", this.foo.bar.baz);
     }
   }
 }
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 06367be7d9..48f5cc8285 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.styles.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.styles.test.ts.snap
@@ -12710,7 +12710,7 @@ type Props = {
 @Component({
   selector: \\"my-basic-component\\",
   template: \`
-    <div class=\\"test div\\">{{id}} {{foo.value.bar.baz}}</div>
+    <div class=\\"test div\\">{{id}} {{foo.bar.baz}}</div>
   \`,
   styles: [
     \`
@@ -12727,7 +12727,7 @@ export default class MyBasicComponent {
   ngOnChanges(changes: SimpleChanges) {
     if (typeof window !== \\"undefined\\") {
       console.log(\\"props.id changed\\", this.id);
-      console.log(\\"props.foo.value.bar.baz changed\\", this.foo.value.bar.baz);
+      console.log(\\"props.foo.value.bar.baz changed\\", this.foo.bar.baz);
     }
   }
 }
diff --git a/packages/core/src/__tests__/__snapshots__/angular.test.ts.snap b/packages/core/src/__tests__/__snapshots__/angular.test.ts.snap
index 028a32b281..7c285bc01d 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.test.ts.snap
@@ -26695,7 +26695,7 @@ type Props = {
 @Component({
   selector: \\"my-basic-component\\",
   template: \`
-    <div class=\\"test div\\">{{id}} {{foo.value.bar.baz}}</div>
+    <div class=\\"test div\\">{{id}} {{foo.bar.baz}}</div>
   \`,
   styles: [
     \`
@@ -26715,7 +26715,7 @@ export default class MyBasicComponent {
   ngOnChanges(changes: SimpleChanges) {
     if (typeof window !== \\"undefined\\") {
       console.log(\\"props.id changed\\", this.id);
-      console.log(\\"props.foo.value.bar.baz changed\\", this.foo.value.bar.baz);
+      console.log(\\"props.foo.value.bar.baz changed\\", this.foo.bar.baz);
     }
   }
 }
@@ -26745,7 +26745,7 @@ type Props = {
 @Component({
   selector: \\"my-basic-component\\",
   template: \`
-    <div class=\\"test div\\">{{id}} {{foo.value.bar.baz}}</div>
+    <div class=\\"test div\\">{{id}} {{foo.bar.baz}}</div>
   \`,
   styles: [
     \`
@@ -26767,7 +26767,7 @@ export default class MyBasicComponent {
   ngOnChanges(changes: SimpleChanges) {
     if (typeof window !== \\"undefined\\") {
       console.log(\\"props.id changed\\", this.id);
-      console.log(\\"props.foo.value.bar.baz changed\\", this.foo.value.bar.baz);
+      console.log(\\"props.foo.value.bar.baz changed\\", this.foo.bar.baz);
     }
   }
 }
diff --git a/packages/core/src/__tests__/__snapshots__/html.test.ts.snap b/packages/core/src/__tests__/__snapshots__/html.test.ts.snap
index 14a4f0de43..754830f4af 100644
--- a/packages/core/src/__tests__/__snapshots__/html.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/html.test.ts.snap
@@ -14763,7 +14763,7 @@ exports[`Html > jsx > Typescript Test > showWithRootText 1`] = `
 exports[`Html > jsx > Typescript Test > signalsOnUpdate 1`] = `
 "<div class=\\"test div\\">
   <template data-el=\\"div-1\\"><!-- props.id --></template>
-  <template data-el=\\"div-2\\"><!-- props.foo.value.bar.baz --></template>
+  <template data-el=\\"div-2\\"><!-- props.foo.bar.baz --></template>
 </div>
 <style>
   .div {
@@ -14798,13 +14798,13 @@ exports[`Html > jsx > Typescript Test > signalsOnUpdate 1`] = `
       });
 
       document.querySelectorAll(\\"[data-el='div-2']\\").forEach((el) => {
-        renderTextNode(el, props.foo.value.bar.baz);
+        renderTextNode(el, props.foo.bar.baz);
       });
 
       destroyAnyNodes();
 
       console.log(\\"props.id changed\\", props.id);
-      console.log(\\"props.foo.value.bar.baz changed\\", props.foo.value.bar.baz);
+      console.log(\\"props.foo.value.bar.baz changed\\", props.foo.bar.baz);
 
       pendingUpdate = false;
     }
diff --git a/packages/core/src/__tests__/__snapshots__/lit.test.ts.snap b/packages/core/src/__tests__/__snapshots__/lit.test.ts.snap
index af87fc777f..f64458f4a0 100644
--- a/packages/core/src/__tests__/__snapshots__/lit.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/lit.test.ts.snap
@@ -9121,7 +9121,7 @@ export default class MyBasicComponent extends LitElement {
 
   updated() {
     console.log(\\"props.id changed\\", this.id);
-    console.log(\\"props.foo.value.bar.baz changed\\", this.foo.value.bar.baz);
+    console.log(\\"props.foo.value.bar.baz changed\\", this.foo.bar.baz);
   }
 
   render() {
@@ -9130,7 +9130,7 @@ export default class MyBasicComponent extends LitElement {
   padding: 10px;
 }
 </style>
-          <div>\${this.id} \${this.foo.value.bar.baz}</div>
+          <div>\${this.id} \${this.foo.bar.baz}</div>
 
         \`;
   }
diff --git a/packages/core/src/__tests__/__snapshots__/marko.test.ts.snap b/packages/core/src/__tests__/__snapshots__/marko.test.ts.snap
index ce8bc470f2..41633ba0e5 100644
--- a/packages/core/src/__tests__/__snapshots__/marko.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/marko.test.ts.snap
@@ -5208,19 +5208,16 @@ exports[`Marko > jsx > Typescript Test > signalsOnUpdate 1`] = `
 "class {
   onRender() {
     console.log(\\"props.id changed\\", this.input.id);
-    console.log(
-      \\"props.foo.value.bar.baz changed\\",
-      this.input.foo.value.bar.baz
-    );
+    console.log(\\"props.foo.value.bar.baz changed\\", this.input.foo.bar.baz);
   }
 }
 
 style {
-  .div-4105a7fa {
+  .div-8c5e5900 {
     padding: 10px;
   }
 }
-<div class=\\"test div-4105a7fa\\">\${input.id} \${input.foo.value.bar.baz}</div>"
+<div class=\\"test div-8c5e5900\\">\${input.id} \${input.foo.bar.baz}</div>"
 `;
 
 exports[`Marko > jsx > Typescript Test > spreadAttrs 1`] = `
diff --git a/packages/core/src/__tests__/__snapshots__/mitosis.test.ts.snap b/packages/core/src/__tests__/__snapshots__/mitosis.test.ts.snap
index 7d799719ed..5cbc1dd33e 100644
--- a/packages/core/src/__tests__/__snapshots__/mitosis.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/mitosis.test.ts.snap
@@ -21423,8 +21423,8 @@ import { useEffect } from \\"react\\";
 function MyBasicComponent(props) {
   useEffect(() => {
     console.log(\\"props.id changed\\", props.id);
-    console.log(\\"props.foo.value.bar.baz changed\\", props.foo.value.bar.baz);
-  }, [props.id, props.foo.value.bar.baz]);
+    console.log(\\"props.foo.value.bar.baz changed\\", props.foo.bar.baz);
+  }, [props.id, props.foo.bar.baz]);
 
   return (
     <div
@@ -21434,7 +21434,7 @@ function MyBasicComponent(props) {
       }}
     >
       {props.id}
-      {props.foo.value.bar.baz}
+      {props.foo.bar.baz}
     </div>
   );
 }
diff --git a/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap b/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap
index bb45a69fb2..09eab87c3f 100644
--- a/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap
@@ -7453,14 +7453,14 @@ type Props = {
 function MyBasicComponent(props: Props) {
   useEffect(() => {
     console.log(\\"props.id changed\\", props.id);
-    console.log(\\"props.foo.value.bar.baz changed\\", props.foo.value.bar.baz);
-  }, [props.id, props.foo.value.bar.baz]);
+    console.log(\\"props.foo.value.bar.baz changed\\", props.foo.bar.baz);
+  }, [props.id, props.foo.bar.baz]);
 
   return (
     <Fragment>
       <div className=\\"test div\\">
         {props.id}
-        {props.foo.value.bar.baz}
+        {props.foo.bar.baz}
       </div>
       <style jsx>{\`
         .div {
diff --git a/packages/core/src/__tests__/__snapshots__/qwik.test.ts.snap b/packages/core/src/__tests__/__snapshots__/qwik.test.ts.snap
index 0b26200417..b4e285c5ca 100644
--- a/packages/core/src/__tests__/__snapshots__/qwik.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/qwik.test.ts.snap
@@ -9062,15 +9062,15 @@ export const MyBasicComponent = component$((props: Props) => {
 
   useTask$(({ track }) => {
     track(() => props.id);
-    track(() => props.foo.value.bar.baz);
+    track(() => props.foo.bar.baz);
     console.log(\\"props.id changed\\", props.id);
-    console.log(\\"props.foo.value.bar.baz changed\\", props.foo.value.bar.baz);
+    console.log(\\"props.foo.value.bar.baz changed\\", props.foo.bar.baz);
   });
 
   return (
     <div class=\\"test div-MyBasicComponent\\">
       {props.id}
-      {props.foo.value.bar.baz}
+      {props.foo.bar.baz}
     </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 a7e5ddff51..6a11d32212 100644
--- a/packages/core/src/__tests__/__snapshots__/react-native.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/react-native.test.ts.snap
@@ -10333,13 +10333,13 @@ type Props = {
 function MyBasicComponent(props: Props) {
   useEffect(() => {
     console.log(\\"props.id changed\\", props.id);
-    console.log(\\"props.foo.value.bar.baz changed\\", props.foo.value.bar.baz);
-  }, [props.id, props.foo.value.bar.baz]);
+    console.log(\\"props.foo.value.bar.baz changed\\", props.foo.bar.baz);
+  }, [props.id, props.foo.bar.baz]);
 
   return (
     <View style={styles.view1}>
       <Text>{props.id}</Text>
-      <Text>{props.foo.value.bar.baz}</Text>
+      <Text>{props.foo.bar.baz}</Text>
     </View>
   );
 }
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 73c396566b..e10e5b46f2 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
@@ -7404,14 +7404,14 @@ function MyBasicComponent(props: Props) {
 
   useEffect(() => {
     console.log(\\"props.id changed\\", props.id);
-    console.log(\\"props.foo.value.bar.baz changed\\", props.foo.value.bar.baz);
-  }, [props.id, props.foo.value.bar.baz]);
+    console.log(\\"props.foo.value.bar.baz changed\\", props.foo.bar.baz);
+  }, [props.id, props.foo.bar.baz]);
 
   return (
     <>
       <div className=\\"test div\\">
         {props.id}
-        {props.foo.value.bar.baz}
+        {props.foo.bar.baz}
       </div>
       <style jsx>{\`
         .div {
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 67a4f7a764..5c9aaa1ce4 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
@@ -7488,14 +7488,14 @@ type Props = {
 function MyBasicComponent(props: Props) {
   useEffect(() => {
     console.log(\\"props.id changed\\", props.id);
-    console.log(\\"props.foo.value.bar.baz changed\\", props.foo.value.bar.baz);
-  }, [props.id, props.foo.value.bar.baz]);
+    console.log(\\"props.foo.value.bar.baz changed\\", props.foo.bar.baz);
+  }, [props.id, props.foo.bar.baz]);
 
   return (
     <>
       <div className=\\"test div\\">
         {props.id}
-        {props.foo.value.bar.baz}
+        {props.foo.bar.baz}
       </div>
       <style jsx>{\`
         .div {
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 aff2d9d54a..61e149d3fd 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
@@ -7261,14 +7261,14 @@ type Props = {
 function MyBasicComponent(props: Props) {
   useEffect(() => {
     console.log(\\"props.id changed\\", props.id);
-    console.log(\\"props.foo.value.bar.baz changed\\", props.foo.value.bar.baz);
-  }, [props.id, props.foo.value.bar.baz]);
+    console.log(\\"props.foo.value.bar.baz changed\\", props.foo.bar.baz);
+  }, [props.id, props.foo.bar.baz]);
 
   return (
     <>
       <div className=\\"test div\\">
         {props.id}
-        {props.foo.value.bar.baz}
+        {props.foo.bar.baz}
       </div>
       <style jsx>{\`
         .div {
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 3ac6feaf38..d550f3a398 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
@@ -7267,14 +7267,14 @@ type Props = {
 function MyBasicComponent(props: Props) {
   useEffect(() => {
     console.log(\\"props.id changed\\", props.id);
-    console.log(\\"props.foo.value.bar.baz changed\\", props.foo.value.bar.baz);
-  }, [props.id, props.foo.value.bar.baz]);
+    console.log(\\"props.foo.value.bar.baz changed\\", props.foo.bar.baz);
+  }, [props.id, props.foo.bar.baz]);
 
   return (
     <>
       <div className=\\"test div\\">
         {props.id}
-        {props.foo.value.bar.baz}
+        {props.foo.bar.baz}
       </div>
       <style jsx>{\`
         .div {
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 dbfe7b52cc..7e44207a3f 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
@@ -5505,14 +5505,14 @@ type Props = {
 function MyBasicComponent(props: Props) {
   useEffect(() => {
     console.log(\\"props.id changed\\", props.id);
-    console.log(\\"props.foo.value.bar.baz changed\\", props.foo.value.bar.baz);
-  }, [props.id, props.foo.value.bar.baz]);
+    console.log(\\"props.foo.value.bar.baz changed\\", props.foo.bar.baz);
+  }, [props.id, props.foo.bar.baz]);
 
   return (
     <>
       <div className=\\"test div\\">
         {props.id}
-        {props.foo.value.bar.baz}
+        {props.foo.bar.baz}
       </div>
       <style jsx>{\`
         .div {
diff --git a/packages/core/src/__tests__/__snapshots__/react.test.ts.snap b/packages/core/src/__tests__/__snapshots__/react.test.ts.snap
index f58a8fab44..ba3fffdf46 100644
--- a/packages/core/src/__tests__/__snapshots__/react.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/react.test.ts.snap
@@ -7256,14 +7256,14 @@ type Props = {
 function MyBasicComponent(props: Props) {
   useEffect(() => {
     console.log(\\"props.id changed\\", props.id);
-    console.log(\\"props.foo.value.bar.baz changed\\", props.foo.value.bar.baz);
-  }, [props.id, props.foo.value.bar.baz]);
+    console.log(\\"props.foo.value.bar.baz changed\\", props.foo.bar.baz);
+  }, [props.id, props.foo.bar.baz]);
 
   return (
     <>
       <div className=\\"test div\\">
         {props.id}
-        {props.foo.value.bar.baz}
+        {props.foo.bar.baz}
       </div>
       <style jsx>{\`
         .div {
diff --git a/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap b/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap
index 035d72909b..47d8be4914 100644
--- a/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap
@@ -6712,14 +6712,14 @@ type Props = {
 function MyBasicComponent(props: Props) {
   useEffect(() => {
     console.log(\\"props.id changed\\", props.id);
-    console.log(\\"props.foo.value.bar.baz changed\\", props.foo.value.bar.baz);
-  }, [props.id, props.foo.value.bar.baz]);
+    console.log(\\"props.foo.value.bar.baz changed\\", props.foo.bar.baz);
+  }, [props.id, props.foo.bar.baz]);
 
   return (
     <>
       <div className=\\"test div\\">
         {props.id}
-        {props.foo.value.bar.baz}
+        {props.foo.bar.baz}
       </div>
       <style jsx>{\`
         .div {
diff --git a/packages/core/src/__tests__/__snapshots__/solid.test.ts.snap b/packages/core/src/__tests__/__snapshots__/solid.test.ts.snap
index 87517c667a..4f1e461a87 100644
--- a/packages/core/src/__tests__/__snapshots__/solid.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/solid.test.ts.snap
@@ -15726,27 +15726,25 @@ type Props = {
 
 function MyBasicComponent(props: Props) {
   const onUpdateFn_0_props_id = createMemo(() => props.id);
-  const onUpdateFn_0_props_foo_value_bar_baz = createMemo(
-    () => props.foo.value.bar.baz
-  );
+  const onUpdateFn_0_props_foo_bar_baz = createMemo(() => props.foo.bar.baz);
   function onUpdateFn_0() {
     console.log(\\"props.id changed\\", props.id);
-    console.log(\\"props.foo.value.bar.baz changed\\", props.foo.value.bar.baz);
+    console.log(\\"props.foo.value.bar.baz changed\\", props.foo.bar.baz);
   }
   createEffect(
     on(
-      () => [onUpdateFn_0_props_id(), onUpdateFn_0_props_foo_value_bar_baz()],
+      () => [onUpdateFn_0_props_id(), onUpdateFn_0_props_foo_bar_baz()],
       onUpdateFn_0
     )
   );
 
   return (
     <>
-      <div class=\\"test div-4105a7fa\\">
+      <div class=\\"test div-8c5e5900\\">
         {props.id}
-        {props.foo.value.bar.baz}
+        {props.foo.bar.baz}
       </div>
-      <style>{\`.div-4105a7fa {
+      <style>{\`.div-8c5e5900 {
   padding: 10px;
 }\`}</style>
     </>
@@ -15771,27 +15769,25 @@ type Props = {
 
 function MyBasicComponent(props: Props) {
   const onUpdateFn_0_props_id = createMemo(() => props.id);
-  const onUpdateFn_0_props_foo_value_bar_baz = createMemo(
-    () => props.foo.value.bar.baz
-  );
+  const onUpdateFn_0_props_foo_bar_baz = createMemo(() => props.foo.bar.baz);
   function onUpdateFn_0() {
     console.log(\\"props.id changed\\", props.id);
-    console.log(\\"props.foo.value.bar.baz changed\\", props.foo.value.bar.baz);
+    console.log(\\"props.foo.value.bar.baz changed\\", props.foo.bar.baz);
   }
   createEffect(
     on(
-      () => [onUpdateFn_0_props_id(), onUpdateFn_0_props_foo_value_bar_baz()],
+      () => [onUpdateFn_0_props_id(), onUpdateFn_0_props_foo_bar_baz()],
       onUpdateFn_0
     )
   );
 
   return (
     <>
-      <div class=\\"test div-4105a7fa\\">
+      <div class=\\"test div-8c5e5900\\">
         {props.id}
-        {props.foo.value.bar.baz}
+        {props.foo.bar.baz}
       </div>
-      <style>{\`.div-4105a7fa {
+      <style>{\`.div-8c5e5900 {
   padding: 10px;
 }\`}</style>
     </>
diff --git a/packages/core/src/__tests__/__snapshots__/stencil.test.ts.snap b/packages/core/src/__tests__/__snapshots__/stencil.test.ts.snap
index 3e4c7ad3e0..47b9a97c71 100644
--- a/packages/core/src/__tests__/__snapshots__/stencil.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/stencil.test.ts.snap
@@ -7711,14 +7711,14 @@ export class MyBasicComponent {
 
   componentDidUpdate() {
     console.log(\\"props.id changed\\", this.id);
-    console.log(\\"props.foo.value.bar.baz changed\\", this.foo.value.bar.baz);
+    console.log(\\"props.foo.value.bar.baz changed\\", this.foo.bar.baz);
   }
 
   render() {
     return (
       <div class=\\"test div\\">
         {this.id}
-        {this.foo.value.bar.baz}
+        {this.foo.bar.baz}
       </div>
     );
   }
diff --git a/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap b/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap
index cdc21a96be..2d4bf25a51 100644
--- a/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap
@@ -6475,13 +6475,13 @@ exports[`Svelte > jsx > Typescript Test > signalsOnUpdate 1`] = `
 
   function onUpdateFn_0(..._args: any[]) {
     console.log(\\"props.id changed\\", id);
-    console.log(\\"props.foo.value.bar.baz changed\\", foo.value.bar.baz);
+    console.log(\\"props.foo.value.bar.baz changed\\", $foo.bar.baz);
   }
-
-  $: onUpdateFn_0(...[id, foo.value.bar.baz]);
+  $: onUpdateFn_0_foo_bar_baz = $foo.bar.baz;
+  $: onUpdateFn_0(...[id, onUpdateFn_0_foo_bar_baz]);
 </script>
 
-<div class=\\"test div\\">{id}{foo.value.bar.baz}</div>
+<div class=\\"test div\\">{id}{$foo.bar.baz}</div>
 
 <style>
   .div {
diff --git a/packages/core/src/__tests__/__snapshots__/taro.test.ts.snap b/packages/core/src/__tests__/__snapshots__/taro.test.ts.snap
index 1e0aea9c43..532b08e5ce 100644
--- a/packages/core/src/__tests__/__snapshots__/taro.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/taro.test.ts.snap
@@ -7418,14 +7418,14 @@ import { View, Text } from \\"@tarojs/components\\";
 function MyBasicComponent(props: Props) {
   useEffect(() => {
     console.log(\\"props.id changed\\", props.id);
-    console.log(\\"props.foo.value.bar.baz changed\\", props.foo.value.bar.baz);
-  }, [props.id, props.foo.value.bar.baz]);
+    console.log(\\"props.foo.value.bar.baz changed\\", props.foo.bar.baz);
+  }, [props.id, props.foo.bar.baz]);
 
   return (
     <>
       <View className=\\"view\\">
         {props.id}
-        {props.foo.value.bar.baz}
+        {props.foo.bar.baz}
       </View>
       <style jsx>{\`
         .view {
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 d17528c5f5..e25007a4b0 100644
--- a/packages/core/src/__tests__/__snapshots__/vue-composition.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/vue-composition.test.ts.snap
@@ -6759,7 +6759,7 @@ const props = defineProps<Props>();
 
 exports[`Vue > jsx > Typescript Test > signalsOnUpdate 1`] = `
 "<template>
-  <div class=\\"test div\\">{{ id }}{{ foo.value.bar.baz }}</div>
+  <div class=\\"test div\\">{{ id }}{{ foo.bar.baz }}</div>
 </template>
 
 <script setup lang=\\"ts\\">
@@ -6777,10 +6777,10 @@ type Props = {
 const props = defineProps<Props>();
 
 watch(
-  () => [props.id, props.foo.value.bar.baz],
+  () => [props.id, props.foo.bar.baz],
   () => {
     console.log(\\"props.id changed\\", props.id);
-    console.log(\\"props.foo.value.bar.baz changed\\", props.foo.value.bar.baz);
+    console.log(\\"props.foo.value.bar.baz changed\\", props.foo.bar.baz);
   },
   { immediate: true }
 );
diff --git a/packages/core/src/__tests__/__snapshots__/vue.test.ts.snap b/packages/core/src/__tests__/__snapshots__/vue.test.ts.snap
index afea3ecd0e..14dd49c49a 100644
--- a/packages/core/src/__tests__/__snapshots__/vue.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/vue.test.ts.snap
@@ -8356,7 +8356,7 @@ export default defineComponent({
 
 exports[`Vue > jsx > Typescript Test > signalsOnUpdate 1`] = `
 "<template>
-  <div class=\\"test div\\">{{ id }}{{ foo.value.bar.baz }}</div>
+  <div class=\\"test div\\">{{ id }}{{ foo.bar.baz }}</div>
 </template>
 
 <script lang=\\"ts\\">
@@ -8380,7 +8380,7 @@ export default defineComponent({
     onUpdateHook0: {
       handler() {
         console.log(\\"props.id changed\\", this.id);
-        console.log(\\"props.foo.value.bar.baz changed\\", this.foo.value.bar.baz);
+        console.log(\\"props.foo.value.bar.baz changed\\", this.foo.bar.baz);
       },
       immediate: true,
     },
@@ -8390,7 +8390,7 @@ export default defineComponent({
     onUpdateHook0() {
       return {
         0: this.id,
-        1: this.foo.value.bar.baz,
+        1: this.foo.bar.baz,
       };
     },
   },
diff --git a/packages/core/src/__tests__/__snapshots__/webcomponent.test.ts.snap b/packages/core/src/__tests__/__snapshots__/webcomponent.test.ts.snap
index b1995f22c2..19d0e8a5d7 100644
--- a/packages/core/src/__tests__/__snapshots__/webcomponent.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/webcomponent.test.ts.snap
@@ -31782,7 +31782,7 @@ class MyBasicComponent extends HTMLElement {
 
     this.componentProps = [\\"id\\", \\"foo\\"];
 
-    this.updateDeps = [[this.props.id, this.props.foo.value.bar.baz]];
+    this.updateDeps = [[this.props.id, this.props.foo.bar.baz]];
 
     // used to keep track of all nodes created by show/for
     this.nodesToDestroy = [];
@@ -31818,7 +31818,7 @@ class MyBasicComponent extends HTMLElement {
       <div class=\\"test div-my-basic-component\\">
         <template data-el=\\"div-my-basic-component-1\\"><!-- props.id --></template>
         <template data-el=\\"div-my-basic-component-2\\">
-          <!-- props.foo.value.bar.baz -->
+          <!-- props.foo.bar.baz -->
         </template>
       </div>
       <style>
@@ -31843,13 +31843,10 @@ class MyBasicComponent extends HTMLElement {
       const __hasChange = __prev.find((val, index) => val !== __next[index]);
       if (__hasChange !== undefined) {
         console.log(\\"props.id changed\\", self.props.id);
-        console.log(
-          \\"props.foo.value.bar.baz changed\\",
-          self.props.foo.value.bar.baz
-        );
+        console.log(\\"props.foo.value.bar.baz changed\\", self.props.foo.bar.baz);
         self.updateDeps[0] = __next;
       }
-    })(self.updateDeps[0], [self.props.id, self.props.foo.value.bar.baz]);
+    })(self.updateDeps[0], [self.props.id, self.props.foo.bar.baz]);
   }
 
   update() {
@@ -31878,7 +31875,7 @@ class MyBasicComponent extends HTMLElement {
     this._root
       .querySelectorAll(\\"[data-el='div-my-basic-component-2']\\")
       .forEach((el) => {
-        this.renderTextNode(el, this.props.foo.value.bar.baz);
+        this.renderTextNode(el, this.props.foo.bar.baz);
       });
   }
 
diff --git a/packages/core/src/parsers/jsx/__snapshots__/signals.test.ts.snap b/packages/core/src/parsers/jsx/__snapshots__/signals.test.ts.snap
index 4c0a21e92a..7ed8b127be 100644
--- a/packages/core/src/parsers/jsx/__snapshots__/signals.test.ts.snap
+++ b/packages/core/src/parsers/jsx/__snapshots__/signals.test.ts.snap
@@ -2,9 +2,15 @@
 
 exports[`Signals type parsing > findSignals 1`] = `
 {
-  "context": Set {},
-  "props": Set {},
-  "state": Set {},
+  "context": Set {
+    "context",
+  },
+  "props": Set {
+    "k",
+  },
+  "state": Set {
+    "n",
+  },
 }
 `;
 

From 2f6f4bcf5fa6984c52171b5b8411fd72cda90736 Mon Sep 17 00:00:00 2001
From: Sami Jaber <me@sami.website>
Date: Tue, 14 Jan 2025 09:53:15 -0500
Subject: [PATCH 4/4] Update .changeset/polite-pugs-pull.md

---
 .changeset/polite-pugs-pull.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.changeset/polite-pugs-pull.md b/.changeset/polite-pugs-pull.md
index fa41d48add..a15e74df56 100644
--- a/.changeset/polite-pugs-pull.md
+++ b/.changeset/polite-pugs-pull.md
@@ -7,7 +7,7 @@
 Based on [choosing-event-names](https://angular.dev/guide/components/outputs#choosing-event-names) custom events are camelCase. 
 [DOM events](https://www.w3schools.com/jsref/dom_obj_event.asp) are always lower-cased for Angular components.
 
-Checkout [event-handlers.ts](https://github.com/BuilderIO/mitosis/blob/main/packages/core/src/helpers/event-handlers.ts) to see all events which are automatically lower-cased everything else will be camelCase.
+Checkout [event-handlers.ts](https://github.com/BuilderIO/mitosis/blob/main/packages/core/src/helpers/event-handlers.ts) for a list of all events that are automatically lower-cased. Everything else will be treated as a custom event and therefore camelCased.
 
 If you need some other event to be lower-cased you can use `useMetadata.angular.nativeEvents`: