fix: angular native events vs. custom events

BuilderIO · Jan 14, 2025 · 17d77d6 · 17d77d6
1 parent 709fb42
commit 17d77d6
Show file tree

Hide file tree

Showing 51 changed files with 413 additions and 195 deletions.
diff --git a/.changeset/polite-pugs-pull.md 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 {