Correctly handle arrow function expression arguments when used with n…

…on-'on' properties
BuilderIO · Jan 30, 2025 · 1a4682e · 1a4682e
1 parent 5594fac
commit 1a4682e
Show file tree

Hide file tree

Showing 32 changed files with 2,730 additions and 41 deletions.
diff --git a/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap b/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap
@@ -1999,6 +1999,34 @@ Auto Width\\":false,\\"Full Width\\":\\"full\\"}}}}} */
 "
 `;
 
+exports[`Alpine.js > jsx > Javascript Test > functionProps 1`] = `
+"<p
+  x-data=\\"myBasicComponent()\\"
+  x-bind:f=\\"() => x\\"
+  x-bind:f1=\\"x => x\\"
+  x-bind:f2=\\"x => {}\\"
+  x-bind:f3=\\"function () {
+  return x;
+}\\"
+  x-bind:f4=\\"function (x) {
+  return x;
+}\\"
+  x-bind:f5=\\"function (x) {
+  return;
+}\\"
+  x-bind:f6=\\"function () {
+  return;
+}\\"
+  x-bind:f7=\\"(a, b, c) => a + b + c\\"
+></p>
+<script>
+  document.addEventListener(\\"alpine:init\\", () => {
+    Alpine.data(\\"myBasicComponent\\", () => ({}));
+  });
+</script>
+"
+`;
+
 exports[`Alpine.js > jsx > Javascript Test > getterState 1`] = `
 "<div x-data=\\"button()\\">
   <p><span x-html=\\"foo2\\"></span></p>
@@ -5143,6 +5171,34 @@ Auto Width\\":false,\\"Full Width\\":\\"full\\"}}}}} */
 "
 `;
 
+exports[`Alpine.js > jsx > Typescript Test > functionProps 1`] = `
+"<p
+  x-data=\\"myBasicComponent()\\"
+  x-bind:f=\\"() => x\\"
+  x-bind:f1=\\"x => x\\"
+  x-bind:f2=\\"x => {}\\"
+  x-bind:f3=\\"function () {
+  return x;
+}\\"
+  x-bind:f4=\\"function (x) {
+  return x;
+}\\"
+  x-bind:f5=\\"function (x) {
+  return;
+}\\"
+  x-bind:f6=\\"function () {
+  return;
+}\\"
+  x-bind:f7=\\"(a, b, c) => a + b + c\\"
+></p>
+<script>
+  document.addEventListener(\\"alpine:init\\", () => {
+    Alpine.data(\\"myBasicComponent\\", () => ({}));
+  });
+</script>
+"
+`;
+
 exports[`Alpine.js > jsx > Typescript Test > getterState 1`] = `
 "<div x-data=\\"button()\\">
   <p><span x-html=\\"foo2\\"></span></p>

diff --git a/packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap b/packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap
@@ -4747,6 +4747,53 @@ export class FigmaButtonModule {}
 "
 `;
 
+exports[`Angular with Preserve Imports and File Extensions > jsx > Javascript Test > functionProps 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"my-basic-component\\",
+  template: \`
+    <p
+      [attr.f]=\\"() => x\\"
+      [attr.f1]=\\"x => x\\"
+      [attr.f2]=\\"x => {}\\"
+      [attr.f3]=\\"function () {
+          return x;
+        }\\"
+      [attr.f4]=\\"function (x) {
+          return x;
+        }\\"
+      [attr.f5]=\\"function (x) {
+          return;
+        }\\"
+      [attr.f6]=\\"function () {
+          return;
+        }\\"
+      [attr.f7]=\\"(a, b, c) => a + b + c\\"
+    ></p>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class MyBasicComponent {}
+
+@NgModule({
+  declarations: [MyBasicComponent],
+  imports: [CommonModule],
+  exports: [MyBasicComponent],
+})
+export class MyBasicComponentModule {}
+"
+`;
+
 exports[`Angular with Preserve Imports and File Extensions > jsx > Javascript Test > getterState 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -12771,6 +12818,57 @@ export class FigmaButtonModule {}
 "
 `;
 
+exports[`Angular with Preserve Imports and File Extensions > jsx > Typescript Test > functionProps 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+
+export interface MyBasicComponentProps {
+  id: string;
+}
+
+@Component({
+  selector: \\"my-basic-component\\",
+  template: \`
+    <p
+      [attr.f]=\\"() => x\\"
+      [attr.f1]=\\"x => x\\"
+      [attr.f2]=\\"x => {}\\"
+      [attr.f3]=\\"function () {
+          return x;
+        }\\"
+      [attr.f4]=\\"function (x) {
+          return x;
+        }\\"
+      [attr.f5]=\\"function (x) {
+          return;
+        }\\"
+      [attr.f6]=\\"function () {
+          return;
+        }\\"
+      [attr.f7]=\\"(a, b, c) => a + b + c\\"
+    ></p>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class MyBasicComponent {}
+
+@NgModule({
+  declarations: [MyBasicComponent],
+  imports: [CommonModule],
+  exports: [MyBasicComponent],
+})
+export class MyBasicComponentModule {}
+"
+`;
+
 exports[`Angular with Preserve Imports and File Extensions > jsx > Typescript Test > getterState 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";

diff --git a/packages/core/src/__tests__/__snapshots__/angular.mapper.test.ts.snap b/packages/core/src/__tests__/__snapshots__/angular.mapper.test.ts.snap
@@ -4819,6 +4819,54 @@ export class FigmaButtonModule {}
 "
 `;
 
+exports[`Angular with Import Mapper Tests > jsx > Javascript Test > functionProps 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"my-basic-component\\",
+  template: \`
+    <p
+      [attr.f]=\\"() => x\\"
+      [attr.f1]=\\"x => x\\"
+      [attr.f2]=\\"x => {}\\"
+      [attr.f3]=\\"function () {
+          return x;
+        }\\"
+      [attr.f4]=\\"function (x) {
+          return x;
+        }\\"
+      [attr.f5]=\\"function (x) {
+          return;
+        }\\"
+      [attr.f6]=\\"function () {
+          return;
+        }\\"
+      [attr.f7]=\\"(a, b, c) => a + b + c\\"
+    ></p>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class MyBasicComponent {}
+
+@NgModule({
+  declarations: [MyBasicComponent],
+  imports: [CommonModule],
+  exports: [MyBasicComponent],
+  bootstrap: [SomeOtherComponent],
+})
+export class MyBasicComponentModule {}
+"
+`;
+
 exports[`Angular with Import Mapper Tests > jsx > Javascript Test > getterState 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -12973,6 +13021,58 @@ export class FigmaButtonModule {}
 "
 `;
 
+exports[`Angular with Import Mapper Tests > jsx > Typescript Test > functionProps 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+
+export interface MyBasicComponentProps {
+  id: string;
+}
+
+@Component({
+  selector: \\"my-basic-component\\",
+  template: \`
+    <p
+      [attr.f]=\\"() => x\\"
+      [attr.f1]=\\"x => x\\"
+      [attr.f2]=\\"x => {}\\"
+      [attr.f3]=\\"function () {
+          return x;
+        }\\"
+      [attr.f4]=\\"function (x) {
+          return x;
+        }\\"
+      [attr.f5]=\\"function (x) {
+          return;
+        }\\"
+      [attr.f6]=\\"function () {
+          return;
+        }\\"
+      [attr.f7]=\\"(a, b, c) => a + b + c\\"
+    ></p>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class MyBasicComponent {}
+
+@NgModule({
+  declarations: [MyBasicComponent],
+  imports: [CommonModule],
+  exports: [MyBasicComponent],
+  bootstrap: [SomeOtherComponent],
+})
+export class MyBasicComponentModule {}
+"
+`;
+
 exports[`Angular with Import Mapper Tests > jsx > Typescript Test > getterState 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";