diff --git a/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap b/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap
index 6e9edc2831..cd6b6c6471 100644
--- a/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap
@@ -5251,6 +5251,26 @@ exports[`Alpine.js > svelte > Javascript Test > eventHandlers 1`] = `
 "
 `;
 
+exports[`Alpine.js > svelte > Javascript Test > fatArrowFunctions 1`] = `
+"<div x-data=\\"myComponent()\\">
+  <button x-on:click=\\"clickHandler1($event)\\">Button 1</button>
+  <button x-on:click=\\"clickHandler2($event)\\">Button 2</button>
+</div>
+<script>
+  document.addEventListener(\\"alpine:init\\", () => {
+    Alpine.data(\\"myComponent\\", () => ({
+      clickHandler1: (this.clickHandler1 = (event) => {
+        console.log(\\"do something 1\\");
+      }),
+      clickHandler2: function clickHandler2(event) {
+        console.log(\\"do something 2\\");
+      },
+    }));
+  });
+</script>
+"
+`;
+
 exports[`Alpine.js > svelte > Javascript Test > html 1`] = `
 "<div x-data=\\"myComponent()\\" x-bind:innerHTML=\\"html\\"></div>
 <script>
@@ -5565,6 +5585,26 @@ exports[`Alpine.js > svelte > Typescript Test > eventHandlers 1`] = `
 "
 `;
 
+exports[`Alpine.js > svelte > Typescript Test > fatArrowFunctions 1`] = `
+"<div x-data=\\"myComponent()\\">
+  <button x-on:click=\\"clickHandler1($event)\\">Button 1</button>
+  <button x-on:click=\\"clickHandler2($event)\\">Button 2</button>
+</div>
+<script>
+  document.addEventListener(\\"alpine:init\\", () => {
+    Alpine.data(\\"myComponent\\", () => ({
+      clickHandler1: (this.clickHandler1 = (event) => {
+        console.log(\\"do something 1\\");
+      }),
+      clickHandler2: function clickHandler2(event) {
+        console.log(\\"do something 2\\");
+      },
+    }));
+  });
+</script>
+"
+`;
+
 exports[`Alpine.js > svelte > Typescript Test > html 1`] = `
 "<div x-data=\\"myComponent()\\" x-bind:innerHTML=\\"html\\"></div>
 <script>
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 fd37efb6b2..01618e3884 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap
@@ -8799,6 +8799,39 @@ export class MyComponentModule {}
 "
 `;
 
+exports[`Angular with Preserve Imports and File Extensions > svelte > Javascript Test > fatArrowFunctions 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"my-component, MyComponent\\",
+  template: \`
+    <ng-container>
+      <button (click)=\\"clickHandler1($event)\\">Button 1</button>
+      <button (click)=\\"clickHandler2($event)\\">Button 2</button>
+    </ng-container>
+  \`,
+})
+export class MyComponent {
+  clickHandler1 = (this.clickHandler1 = (event) => {
+    console.log(\\"do something 1\\");
+  });
+  clickHandler2 = function clickHandler2(event) {
+    console.log(\\"do something 2\\");
+  };
+}
+
+@NgModule({
+  declarations: [MyComponent],
+  imports: [CommonModule],
+  exports: [MyComponent],
+})
+export class MyComponentModule {}
+"
+`;
+
 exports[`Angular with Preserve Imports and File Extensions > svelte > Javascript Test > html 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -9328,6 +9361,39 @@ export class MyComponentModule {}
 "
 `;
 
+exports[`Angular with Preserve Imports and File Extensions > svelte > Typescript Test > fatArrowFunctions 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"my-component, MyComponent\\",
+  template: \`
+    <ng-container>
+      <button (click)=\\"clickHandler1($event)\\">Button 1</button>
+      <button (click)=\\"clickHandler2($event)\\">Button 2</button>
+    </ng-container>
+  \`,
+})
+export class MyComponent {
+  clickHandler1 = (this.clickHandler1 = (event) => {
+    console.log(\\"do something 1\\");
+  });
+  clickHandler2 = function clickHandler2(event) {
+    console.log(\\"do something 2\\");
+  };
+}
+
+@NgModule({
+  declarations: [MyComponent],
+  imports: [CommonModule],
+  exports: [MyComponent],
+})
+export class MyComponentModule {}
+"
+`;
+
 exports[`Angular with Preserve Imports and File Extensions > svelte > Typescript Test > html 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
index 9f5f301530..7e7c54bcc6 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.mapper.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.mapper.test.ts.snap
@@ -8993,6 +8993,40 @@ export class MyComponentModule {}
 "
 `;
 
+exports[`Angular with Import Mapper Tests > svelte > Javascript Test > fatArrowFunctions 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"my-component, MyComponent\\",
+  template: \`
+    <ng-container>
+      <button (click)=\\"clickHandler1($event)\\">Button 1</button>
+      <button (click)=\\"clickHandler2($event)\\">Button 2</button>
+    </ng-container>
+  \`,
+})
+export class MyComponent {
+  clickHandler1 = (this.clickHandler1 = (event) => {
+    console.log(\\"do something 1\\");
+  });
+  clickHandler2 = function clickHandler2(event) {
+    console.log(\\"do something 2\\");
+  };
+}
+
+@NgModule({
+  declarations: [MyComponent],
+  imports: [CommonModule],
+  exports: [MyComponent],
+  bootstrap: [SomeOtherComponent],
+})
+export class MyComponentModule {}
+"
+`;
+
 exports[`Angular with Import Mapper Tests > svelte > Javascript Test > html 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -9538,6 +9572,40 @@ export class MyComponentModule {}
 "
 `;
 
+exports[`Angular with Import Mapper Tests > svelte > Typescript Test > fatArrowFunctions 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"my-component, MyComponent\\",
+  template: \`
+    <ng-container>
+      <button (click)=\\"clickHandler1($event)\\">Button 1</button>
+      <button (click)=\\"clickHandler2($event)\\">Button 2</button>
+    </ng-container>
+  \`,
+})
+export class MyComponent {
+  clickHandler1 = (this.clickHandler1 = (event) => {
+    console.log(\\"do something 1\\");
+  });
+  clickHandler2 = function clickHandler2(event) {
+    console.log(\\"do something 2\\");
+  };
+}
+
+@NgModule({
+  declarations: [MyComponent],
+  imports: [CommonModule],
+  exports: [MyComponent],
+  bootstrap: [SomeOtherComponent],
+})
+export class MyComponentModule {}
+"
+`;
+
 exports[`Angular with Import Mapper Tests > svelte > Typescript Test > html 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
diff --git a/packages/core/src/__tests__/__snapshots__/angular.test.ts.snap b/packages/core/src/__tests__/__snapshots__/angular.test.ts.snap
index 09951bd70d..5380058cc8 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.test.ts.snap
@@ -16214,6 +16214,65 @@ export class MyComponent {
 "
 `;
 
+exports[`Angular > svelte > Javascript Test > fatArrowFunctions 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"my-component, MyComponent\\",
+  template: \`
+    <ng-container>
+      <button (click)=\\"clickHandler1($event)\\">Button 1</button>
+      <button (click)=\\"clickHandler2($event)\\">Button 2</button>
+    </ng-container>
+  \`,
+})
+export class MyComponent {
+  clickHandler1 = (this.clickHandler1 = (event) => {
+    console.log(\\"do something 1\\");
+  });
+  clickHandler2 = function clickHandler2(event) {
+    console.log(\\"do something 2\\");
+  };
+}
+
+@NgModule({
+  declarations: [MyComponent],
+  imports: [CommonModule],
+  exports: [MyComponent],
+})
+export class MyComponentModule {}
+"
+`;
+
+exports[`Angular > svelte > Javascript Test > fatArrowFunctions 2`] = `
+"import { Component } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+@Component({
+  selector: \\"my-component, MyComponent\\",
+  template: \`
+    <ng-container>
+      <button (click)=\\"clickHandler1($event)\\">Button 1</button>
+      <button (click)=\\"clickHandler2($event)\\">Button 2</button>
+    </ng-container>
+  \`,
+  standalone: true,
+  imports: [CommonModule],
+})
+export class MyComponent {
+  clickHandler1 = (this.clickHandler1 = (event) => {
+    console.log(\\"do something 1\\");
+  });
+  clickHandler2 = function clickHandler2(event) {
+    console.log(\\"do something 2\\");
+  };
+}
+"
+`;
+
 exports[`Angular > svelte > Javascript Test > html 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -17158,6 +17217,65 @@ export class MyComponent {
 "
 `;
 
+exports[`Angular > svelte > Typescript Test > fatArrowFunctions 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"my-component, MyComponent\\",
+  template: \`
+    <ng-container>
+      <button (click)=\\"clickHandler1($event)\\">Button 1</button>
+      <button (click)=\\"clickHandler2($event)\\">Button 2</button>
+    </ng-container>
+  \`,
+})
+export class MyComponent {
+  clickHandler1 = (this.clickHandler1 = (event) => {
+    console.log(\\"do something 1\\");
+  });
+  clickHandler2 = function clickHandler2(event) {
+    console.log(\\"do something 2\\");
+  };
+}
+
+@NgModule({
+  declarations: [MyComponent],
+  imports: [CommonModule],
+  exports: [MyComponent],
+})
+export class MyComponentModule {}
+"
+`;
+
+exports[`Angular > svelte > Typescript Test > fatArrowFunctions 2`] = `
+"import { Component } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+@Component({
+  selector: \\"my-component, MyComponent\\",
+  template: \`
+    <ng-container>
+      <button (click)=\\"clickHandler1($event)\\">Button 1</button>
+      <button (click)=\\"clickHandler2($event)\\">Button 2</button>
+    </ng-container>
+  \`,
+  standalone: true,
+  imports: [CommonModule],
+})
+export class MyComponent {
+  clickHandler1 = (this.clickHandler1 = (event) => {
+    console.log(\\"do something 1\\");
+  });
+  clickHandler2 = function clickHandler2(event) {
+    console.log(\\"do something 2\\");
+  };
+}
+"
+`;
+
 exports[`Angular > svelte > Typescript Test > html 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
diff --git a/packages/core/src/__tests__/__snapshots__/html.test.ts.snap b/packages/core/src/__tests__/__snapshots__/html.test.ts.snap
index e3b4231e31..6eae2f4aee 100644
--- a/packages/core/src/__tests__/__snapshots__/html.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/html.test.ts.snap
@@ -12510,6 +12510,94 @@ exports[`Html > svelte > Javascript Test > eventHandlers 1`] = `
 "
 `;
 
+exports[`Html > svelte > Javascript Test > fatArrowFunctions 1`] = `
+"<button data-el=\\"button-1\\">Button 1</button>
+<button data-el=\\"button-2\\">Button 2</button>
+<script>
+        (() => {
+          const state = { clickHandler1 : state.clickHandler1 = event => {
+    console.log(\\"do something 1\\");
+  };
+
+  update(), clickHandler2 : function clickHandler2(event) {
+    console.log(\\"do something 2\\");
+  },};
+
+          let context = null;
+          let nodesToDestroy = [];
+          let pendingUpdate = false;
+
+
+          function destroyAnyNodes() {
+            // destroy current view template refs before rendering again
+            nodesToDestroy.forEach(el => el.remove());
+            nodesToDestroy = [];
+          }
+
+
+          // Function to update data bindings and loops
+          // call update() when you mutate state and need the updates to reflect
+          // in the dom
+          function update() {
+            if (pendingUpdate === true) {
+              return;
+            }
+            pendingUpdate = true;
+
+                document.querySelectorAll(\\"[data-el='button-1']\\").forEach((el) => {
+
+              ;el.removeEventListener('click', onButton1Click);
+              ;el.addEventListener('click', onButton1Click);
+
+                });
+
+
+
+                document.querySelectorAll(\\"[data-el='button-2']\\").forEach((el) => {
+
+              ;el.removeEventListener('click', onButton2Click);
+              ;el.addEventListener('click', onButton2Click);
+
+                });
+
+
+            destroyAnyNodes();
+
+
+
+            pendingUpdate = false;
+          }
+
+
+            // Event handler for 'click' event on button-1
+            function onButton1Click (event) {
+
+              state.clickHandler1(event)
+            }
+
+            // Event handler for 'click' event on button-2
+            function onButton2Click (event) {
+
+              state.clickHandler2(event)
+            }
+
+
+          // Update with initial state on first load
+          update();
+
+
+
+
+
+
+
+
+
+        })()
+</script>
+"
+`;
+
 exports[`Html > svelte > Javascript Test > html 1`] = `
 "<div data-el=\\"div-1\\"></div>
 <script>
@@ -13540,6 +13628,94 @@ exports[`Html > svelte > Typescript Test > eventHandlers 1`] = `
 "
 `;
 
+exports[`Html > svelte > Typescript Test > fatArrowFunctions 1`] = `
+"<button data-el=\\"button-1\\">Button 1</button>
+<button data-el=\\"button-2\\">Button 2</button>
+<script>
+        (() => {
+          const state = { clickHandler1 : state.clickHandler1 = event => {
+    console.log(\\"do something 1\\");
+  };
+
+  update(), clickHandler2 : function clickHandler2(event) {
+    console.log(\\"do something 2\\");
+  },};
+
+          let context = null;
+          let nodesToDestroy = [];
+          let pendingUpdate = false;
+
+
+          function destroyAnyNodes() {
+            // destroy current view template refs before rendering again
+            nodesToDestroy.forEach(el => el.remove());
+            nodesToDestroy = [];
+          }
+
+
+          // Function to update data bindings and loops
+          // call update() when you mutate state and need the updates to reflect
+          // in the dom
+          function update() {
+            if (pendingUpdate === true) {
+              return;
+            }
+            pendingUpdate = true;
+
+                document.querySelectorAll(\\"[data-el='button-1']\\").forEach((el) => {
+
+              ;el.removeEventListener('click', onButton1Click);
+              ;el.addEventListener('click', onButton1Click);
+
+                });
+
+
+
+                document.querySelectorAll(\\"[data-el='button-2']\\").forEach((el) => {
+
+              ;el.removeEventListener('click', onButton2Click);
+              ;el.addEventListener('click', onButton2Click);
+
+                });
+
+
+            destroyAnyNodes();
+
+
+
+            pendingUpdate = false;
+          }
+
+
+            // Event handler for 'click' event on button-1
+            function onButton1Click (event) {
+
+              state.clickHandler1(event)
+            }
+
+            // Event handler for 'click' event on button-2
+            function onButton2Click (event) {
+
+              state.clickHandler2(event)
+            }
+
+
+          // Update with initial state on first load
+          update();
+
+
+
+
+
+
+
+
+
+        })()
+</script>
+"
+`;
+
 exports[`Html > svelte > Typescript Test > html 1`] = `
 "<div data-el=\\"div-1\\"></div>
 <script>
diff --git a/packages/core/src/__tests__/__snapshots__/liquid.test.ts.snap b/packages/core/src/__tests__/__snapshots__/liquid.test.ts.snap
index 11c3f8fbd1..3e908f5bd8 100644
--- a/packages/core/src/__tests__/__snapshots__/liquid.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/liquid.test.ts.snap
@@ -1778,6 +1778,14 @@ exports[`Liquid > svelte > Javascript Test > eventHandlers 1`] = `
 "
 `;
 
+exports[`Liquid > svelte > Javascript Test > fatArrowFunctions 1`] = `
+"<div>
+  <button>Button 1</button>
+  <button>Button 2</button>
+</div>
+"
+`;
+
 exports[`Liquid > svelte > Javascript Test > html 1`] = `
 "<div innerHTML=\\"{{html}}\\"></div>
 "
@@ -1914,6 +1922,14 @@ exports[`Liquid > svelte > Typescript Test > eventHandlers 1`] = `
 "
 `;
 
+exports[`Liquid > svelte > Typescript Test > fatArrowFunctions 1`] = `
+"<div>
+  <button>Button 1</button>
+  <button>Button 2</button>
+</div>
+"
+`;
+
 exports[`Liquid > svelte > Typescript Test > html 1`] = `
 "<div innerHTML=\\"{{html}}\\"></div>
 "
diff --git a/packages/core/src/__tests__/__snapshots__/lit.test.ts.snap b/packages/core/src/__tests__/__snapshots__/lit.test.ts.snap
index b804ebb707..19ebee9213 100644
--- a/packages/core/src/__tests__/__snapshots__/lit.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/lit.test.ts.snap
@@ -8556,6 +8556,36 @@ export default class MyComponent extends LitElement {
 "
 `;
 
+exports[`Lit > svelte > Javascript Test > fatArrowFunctions 1`] = `
+"import { LitElement, html, css } from \\"lit\\";
+import { customElement, property, state, query } from \\"lit/decorators.js\\";
+
+@customElement(\\"my-component\\")
+export default class MyComponent extends LitElement {
+  createRenderRoot() {
+    return this;
+  }
+
+  clickHandler1 = (this.clickHandler1 = (event) => {
+    console.log(\\"do something 1\\");
+  });
+  clickHandler2 = function clickHandler2(event) {
+    console.log(\\"do something 2\\");
+  };
+
+  render() {
+    return html\`
+
+          <my-fragment ><button  @click=\${(event) =>
+            this.clickHandler1(event)} >Button 1</button>
+        <button  @click=\${(event) =>
+          this.clickHandler2(event)} >Button 2</button></my-fragment>
+        \`;
+  }
+}
+"
+`;
+
 exports[`Lit > svelte > Javascript Test > html 1`] = `
 "import { LitElement, html, css } from \\"lit\\";
 import { customElement, property, state, query } from \\"lit/decorators.js\\";
@@ -9051,6 +9081,36 @@ export default class MyComponent extends LitElement {
 "
 `;
 
+exports[`Lit > svelte > Typescript Test > fatArrowFunctions 1`] = `
+"import { LitElement, html, css } from \\"lit\\";
+import { customElement, property, state, query } from \\"lit/decorators.js\\";
+
+@customElement(\\"my-component\\")
+export default class MyComponent extends LitElement {
+  createRenderRoot() {
+    return this;
+  }
+
+  clickHandler1 = (this.clickHandler1 = (event) => {
+    console.log(\\"do something 1\\");
+  });
+  clickHandler2 = function clickHandler2(event) {
+    console.log(\\"do something 2\\");
+  };
+
+  render() {
+    return html\`
+
+          <my-fragment ><button  @click=\${(event) =>
+            this.clickHandler1(event)} >Button 1</button>
+        <button  @click=\${(event) =>
+          this.clickHandler2(event)} >Button 2</button></my-fragment>
+        \`;
+  }
+}
+"
+`;
+
 exports[`Lit > svelte > Typescript Test > html 1`] = `
 "import { LitElement, html, css } from \\"lit\\";
 import { customElement, property, state, query } from \\"lit/decorators.js\\";
diff --git a/packages/core/src/__tests__/__snapshots__/marko.test.ts.snap b/packages/core/src/__tests__/__snapshots__/marko.test.ts.snap
index c6efae5241..16bb2ea2e5 100644
--- a/packages/core/src/__tests__/__snapshots__/marko.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/marko.test.ts.snap
@@ -4747,6 +4747,20 @@ exports[`Marko > svelte > Javascript Test > eventHandlers 1`] = `
 </div>"
 `;
 
+exports[`Marko > svelte > Javascript Test > fatArrowFunctions 1`] = `
+"class {
+  clickHandler1 = (this.clickHandler1 = (event) => {
+    console.log(\\"do something 1\\");
+  });
+  clickHandler2 = function clickHandler2(event) {
+    console.log(\\"do something 2\\");
+  };
+}
+
+<button on-click(event => component.clickHandler1(event))>Button 1</button>
+<button on-click(event => component.clickHandler2(event))>Button 2</button>"
+`;
+
 exports[`Marko > svelte > Javascript Test > html 1`] = `
 "class {
   onCreate() {
@@ -5025,6 +5039,20 @@ exports[`Marko > svelte > Typescript Test > eventHandlers 1`] = `
 </div>"
 `;
 
+exports[`Marko > svelte > Typescript Test > fatArrowFunctions 1`] = `
+"class {
+  clickHandler1 = (this.clickHandler1 = (event) => {
+    console.log(\\"do something 1\\");
+  });
+  clickHandler2 = function clickHandler2(event) {
+    console.log(\\"do something 2\\");
+  };
+}
+
+<button on-click(event => component.clickHandler1(event))>Button 1</button>
+<button on-click(event => component.clickHandler2(event))>Button 2</button>"
+`;
+
 exports[`Marko > svelte > Typescript Test > html 1`] = `
 "class {
   onCreate() {
diff --git a/packages/core/src/__tests__/__snapshots__/parse-svelte.test.ts.snap b/packages/core/src/__tests__/__snapshots__/parse-svelte.test.ts.snap
index 6eff8f42e7..067930dec1 100644
--- a/packages/core/src/__tests__/__snapshots__/parse-svelte.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/parse-svelte.test.ts.snap
@@ -708,6 +708,107 @@ exports[`Parse JSX > eventHandlers 1`] = `
 }
 `;
 
+exports[`Parse JSX > fatArrowFunctions 1`] = `
+{
+  "@type": "@builder.io/mitosis/component",
+  "children": [
+    {
+      "@type": "@builder.io/mitosis/node",
+      "bindings": {},
+      "children": [
+        {
+          "@type": "@builder.io/mitosis/node",
+          "bindings": {
+            "onClick": {
+              "arguments": undefined,
+              "code": "state.clickHandler1(event)",
+              "type": "single",
+            },
+          },
+          "children": [
+            {
+              "@type": "@builder.io/mitosis/node",
+              "bindings": {},
+              "children": [],
+              "meta": {},
+              "name": "div",
+              "properties": {
+                "_text": "Button 1",
+              },
+              "scope": {},
+            },
+          ],
+          "meta": {},
+          "name": "button",
+          "properties": {},
+          "scope": {},
+        },
+        {
+          "@type": "@builder.io/mitosis/node",
+          "bindings": {
+            "onClick": {
+              "arguments": undefined,
+              "code": "state.clickHandler2(event)",
+              "type": "single",
+            },
+          },
+          "children": [
+            {
+              "@type": "@builder.io/mitosis/node",
+              "bindings": {},
+              "children": [],
+              "meta": {},
+              "name": "div",
+              "properties": {
+                "_text": "Button 2",
+              },
+              "scope": {},
+            },
+          ],
+          "meta": {},
+          "name": "button",
+          "properties": {},
+          "scope": {},
+        },
+      ],
+      "meta": {},
+      "name": "Fragment",
+      "properties": {},
+      "scope": {},
+    },
+  ],
+  "context": {
+    "get": {},
+    "set": {},
+  },
+  "hooks": {},
+  "imports": [],
+  "inputs": [],
+  "meta": {},
+  "name": "MyComponent",
+  "refs": {},
+  "state": {
+    "clickHandler1": {
+      "code": "state.clickHandler1 = event => {
+  console.log(\\"do something 1\\");
+}",
+      "type": "function",
+    },
+    "clickHandler2": {
+      "arguments": [
+        "event",
+      ],
+      "code": "function clickHandler2(event) {
+  console.log(\\"do something 2\\");
+}",
+      "type": "function",
+    },
+  },
+  "style": undefined,
+  "subComponents": [],
+}
+`;
+
 exports[`Parse JSX > html 1`] = `
 {
   "@type": "@builder.io/mitosis/component",
diff --git a/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap b/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap
index cc1dc8fe4b..2f17a1fe36 100644
--- a/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap
@@ -6910,6 +6910,31 @@ export default MyComponent;
 "
 `;
 
+exports[`Preact > svelte > Javascript Test > fatArrowFunctions 1`] = `
+"/** @jsx h */
+import { h, Fragment } from \\"preact\\";
+
+function MyComponent(props) {
+  setClickHandler1((event) => {
+    console.log(\\"do something 1\\");
+  });
+
+  function clickHandler2(event) {
+    console.log(\\"do something 2\\");
+  }
+
+  return (
+    <Fragment>
+      <button onClick={(event) => clickHandler1(event)}>Button 1</button>
+      <button onClick={(event) => clickHandler2(event)}>Button 2</button>
+    </Fragment>
+  );
+}
+
+export default MyComponent;
+"
+`;
+
 exports[`Preact > svelte > Javascript Test > html 1`] = `
 "/** @jsx h */
 import { h, Fragment } from \\"preact\\";
@@ -7330,6 +7355,31 @@ export default MyComponent;
 "
 `;
 
+exports[`Preact > svelte > Typescript Test > fatArrowFunctions 1`] = `
+"/** @jsx h */
+import { h, Fragment } from \\"preact\\";
+
+function MyComponent(props: any) {
+  setClickHandler1((event) => {
+    console.log(\\"do something 1\\");
+  });
+
+  function clickHandler2(event) {
+    console.log(\\"do something 2\\");
+  }
+
+  return (
+    <Fragment>
+      <button onClick={(event) => clickHandler1(event)}>Button 1</button>
+      <button onClick={(event) => clickHandler2(event)}>Button 2</button>
+    </Fragment>
+  );
+}
+
+export default MyComponent;
+"
+`;
+
 exports[`Preact > svelte > Typescript Test > html 1`] = `
 "/** @jsx h */
 import { h, Fragment } from \\"preact\\";
diff --git a/packages/core/src/__tests__/__snapshots__/qwik.test.ts.snap b/packages/core/src/__tests__/__snapshots__/qwik.test.ts.snap
index e48d0ac891..5f64aec651 100644
--- a/packages/core/src/__tests__/__snapshots__/qwik.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/qwik.test.ts.snap
@@ -8811,6 +8811,47 @@ export default MyComponent;
 "
 `;
 
+exports[`qwik > svelte > Javascript Test > fatArrowFunctions 1`] = `
+"Error: SyntaxError: '(' expected. (4:35)
+  2 |
+  3 | export const ckHandler1 = event => {
+> 4 |   console.log=function ckHandler1 = event => {
+    |                                   ^
+  5 |   console.log(props, state, \\"do something 1\\");
+  6 | };export const clickHandler2=function  clickHandler2(props, state, event) {
+  7 |   console.log(\\"do something 2\\");
+========================================================================
+import{Fragment,component$,h}from\\"@builder.io/qwik\\";
+
+export const ckHandler1 = event => {
+  console.log=function ckHandler1 = event => {
+  console.log(props, state, \\"do something 1\\");
+};export const clickHandler2=function  clickHandler2(props, state, event) {
+  console.log(\\"do something 2\\");
+};export const MyComponent=component$((props)=>{const state = {};
+
+return (<Fragment><button onClick$={(event)=>state.clickHandler1(event)}>Button 1</button><button onClick$={(event)=>state.clickHandler2(event)}>Button 2</button></Fragment>)});
+
+export default MyComponent;
+
+========================================================================
+    at File.toString (/home/dritter/Projekte/mitosis/packages/core/src/generators/qwik/src-generator.ts:84:15)
+    at /home/dritter/Projekte/mitosis/packages/core/src/generators/qwik/component-generator.ts:135:27
+    at getOutput (/home/dritter/Projekte/mitosis/packages/core/src/__tests__/test-generator.ts:502:62)
+    at /home/dritter/Projekte/mitosis/packages/core/src/__tests__/test-generator.ts:504:28
+    at async runTest (/home/dritter/Projekte/mitosis/packages/core/node_modules/vitest/dist/chunk-runtime-setup.ab6b6274.js:417:7)
+    at async runSuite (/home/dritter/Projekte/mitosis/packages/core/node_modules/vitest/dist/chunk-runtime-setup.ab6b6274.js:512:15)
+    at async runSuite (/home/dritter/Projekte/mitosis/packages/core/node_modules/vitest/dist/chunk-runtime-setup.ab6b6274.js:512:15)
+    at async runSuite (/home/dritter/Projekte/mitosis/packages/core/node_modules/vitest/dist/chunk-runtime-setup.ab6b6274.js:512:15)
+    at async runSuite (/home/dritter/Projekte/mitosis/packages/core/node_modules/vitest/dist/chunk-runtime-setup.ab6b6274.js:512:15)
+    at async runFiles (/home/dritter/Projekte/mitosis/packages/core/node_modules/vitest/dist/chunk-runtime-setup.ab6b6274.js:646:5)
+    at async startTestsNode (/home/dritter/Projekte/mitosis/packages/core/node_modules/vitest/dist/chunk-runtime-setup.ab6b6274.js:664:3)
+    at async /home/dritter/Projekte/mitosis/packages/core/node_modules/vitest/dist/entry.js:96:11
+    at async Module.withEnv (/home/dritter/Projekte/mitosis/packages/core/node_modules/vitest/dist/chunk-runtime-setup.ab6b6274.js:162:5)
+    at async run (/home/dritter/Projekte/mitosis/packages/core/node_modules/vitest/dist/entry.js:89:7)
+    at async file:///home/dritter/Projekte/mitosis/packages/core/node_modules/tinypool/dist/esm/worker.js:109:20"
+`;
+
 exports[`qwik > svelte > Javascript Test > html 1`] = `
 "import { Fragment, component$, h, useStore } from \\"@builder.io/qwik\\";
 
@@ -9213,6 +9254,47 @@ export default MyComponent;
 "
 `;
 
+exports[`qwik > svelte > Typescript Test > fatArrowFunctions 1`] = `
+"Error: SyntaxError: '(' expected. (4:35)
+  2 |
+  3 | export const ckHandler1 = event => {
+> 4 |   console.log=function ckHandler1 = event => {
+    |                                   ^
+  5 |   console.log(props,state,\\"do something 1\\");
+  6 | };export const clickHandler2=function clickHandler2(props,state,event) {
+  7 |   console.log(\\"do something 2\\");
+========================================================================
+import{Fragment,component$,h}from\\"@builder.io/qwik\\";
+
+export const ckHandler1 = event => {
+  console.log=function ckHandler1 = event => {
+  console.log(props,state,\\"do something 1\\");
+};export const clickHandler2=function clickHandler2(props,state,event) {
+  console.log(\\"do something 2\\");
+};export const MyComponent=component$((props:any)=>{const state: any = {};
+
+return (<Fragment><button onClick$={(event)=>state.clickHandler1(event)}>Button 1</button><button onClick$={(event)=>state.clickHandler2(event)}>Button 2</button></Fragment>)});
+
+export default MyComponent;
+
+========================================================================
+    at File.toString (/home/dritter/Projekte/mitosis/packages/core/src/generators/qwik/src-generator.ts:84:15)
+    at /home/dritter/Projekte/mitosis/packages/core/src/generators/qwik/component-generator.ts:135:27
+    at getOutput (/home/dritter/Projekte/mitosis/packages/core/src/__tests__/test-generator.ts:502:62)
+    at /home/dritter/Projekte/mitosis/packages/core/src/__tests__/test-generator.ts:504:28
+    at async runTest (/home/dritter/Projekte/mitosis/packages/core/node_modules/vitest/dist/chunk-runtime-setup.ab6b6274.js:417:7)
+    at async runSuite (/home/dritter/Projekte/mitosis/packages/core/node_modules/vitest/dist/chunk-runtime-setup.ab6b6274.js:512:15)
+    at async runSuite (/home/dritter/Projekte/mitosis/packages/core/node_modules/vitest/dist/chunk-runtime-setup.ab6b6274.js:512:15)
+    at async runSuite (/home/dritter/Projekte/mitosis/packages/core/node_modules/vitest/dist/chunk-runtime-setup.ab6b6274.js:512:15)
+    at async runSuite (/home/dritter/Projekte/mitosis/packages/core/node_modules/vitest/dist/chunk-runtime-setup.ab6b6274.js:512:15)
+    at async runFiles (/home/dritter/Projekte/mitosis/packages/core/node_modules/vitest/dist/chunk-runtime-setup.ab6b6274.js:646:5)
+    at async startTestsNode (/home/dritter/Projekte/mitosis/packages/core/node_modules/vitest/dist/chunk-runtime-setup.ab6b6274.js:664:3)
+    at async /home/dritter/Projekte/mitosis/packages/core/node_modules/vitest/dist/entry.js:96:11
+    at async Module.withEnv (/home/dritter/Projekte/mitosis/packages/core/node_modules/vitest/dist/chunk-runtime-setup.ab6b6274.js:162:5)
+    at async run (/home/dritter/Projekte/mitosis/packages/core/node_modules/vitest/dist/entry.js:89:7)
+    at async file:///home/dritter/Projekte/mitosis/packages/core/node_modules/tinypool/dist/esm/worker.js:109:20"
+`;
+
 exports[`qwik > svelte > Typescript Test > html 1`] = `
 "import { Fragment, component$, h, useStore } from \\"@builder.io/qwik\\";
 
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 1927ce89be..960ef0dbcb 100644
--- a/packages/core/src/__tests__/__snapshots__/react-native.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/react-native.test.ts.snap
@@ -8017,6 +8017,42 @@ export default MyComponent;
 "
 `;
 
+exports[`React Native > svelte > Javascript Test > fatArrowFunctions 1`] = `
+"import * as React from \\"react\\";
+import {
+  FlatList,
+  ScrollView,
+  View,
+  StyleSheet,
+  Image,
+  Text,
+} from \\"react-native\\";
+
+function MyComponent(props) {
+  setClickHandler1((event) => {
+    console.log(\\"do something 1\\");
+  });
+
+  function clickHandler2(event) {
+    console.log(\\"do something 2\\");
+  }
+
+  return (
+    <>
+      <View onClick={(event) => clickHandler1(event)}>
+        <Text>Button 1</Text>
+      </View>
+      <View onClick={(event) => clickHandler2(event)}>
+        <Text>Button 2</Text>
+      </View>
+    </>
+  );
+}
+
+export default MyComponent;
+"
+`;
+
 exports[`React Native > svelte > Javascript Test > html 1`] = `
 "import * as React from \\"react\\";
 import {
@@ -8549,6 +8585,42 @@ export default MyComponent;
 "
 `;
 
+exports[`React Native > svelte > Typescript Test > fatArrowFunctions 1`] = `
+"import * as React from \\"react\\";
+import {
+  FlatList,
+  ScrollView,
+  View,
+  StyleSheet,
+  Image,
+  Text,
+} from \\"react-native\\";
+
+function MyComponent(props: any) {
+  setClickHandler1((event) => {
+    console.log(\\"do something 1\\");
+  });
+
+  function clickHandler2(event) {
+    console.log(\\"do something 2\\");
+  }
+
+  return (
+    <>
+      <View onClick={(event) => clickHandler1(event)}>
+        <Text>Button 1</Text>
+      </View>
+      <View onClick={(event) => clickHandler2(event)}>
+        <Text>Button 2</Text>
+      </View>
+    </>
+  );
+}
+
+export default MyComponent;
+"
+`;
+
 exports[`React Native > svelte > Typescript Test > html 1`] = `
 "import * as React from \\"react\\";
 import {
diff --git a/packages/core/src/__tests__/__snapshots__/react.test.ts.snap b/packages/core/src/__tests__/__snapshots__/react.test.ts.snap
index ca22df913f..a69a79e9bd 100644
--- a/packages/core/src/__tests__/__snapshots__/react.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/react.test.ts.snap
@@ -6924,6 +6924,30 @@ export default MyComponent;
 "
 `;
 
+exports[`React > svelte > Javascript Test > fatArrowFunctions 1`] = `
+"import * as React from \\"react\\";
+
+function MyComponent(props) {
+  setClickHandler1((event) => {
+    console.log(\\"do something 1\\");
+  });
+
+  function clickHandler2(event) {
+    console.log(\\"do something 2\\");
+  }
+
+  return (
+    <>
+      <button onClick={(event) => clickHandler1(event)}>Button 1</button>
+      <button onClick={(event) => clickHandler2(event)}>Button 2</button>
+    </>
+  );
+}
+
+export default MyComponent;
+"
+`;
+
 exports[`React > svelte > Javascript Test > html 1`] = `
 "import * as React from \\"react\\";
 import { useState } from \\"react\\";
@@ -7328,6 +7352,30 @@ export default MyComponent;
 "
 `;
 
+exports[`React > svelte > Typescript Test > fatArrowFunctions 1`] = `
+"import * as React from \\"react\\";
+
+function MyComponent(props: any) {
+  setClickHandler1((event) => {
+    console.log(\\"do something 1\\");
+  });
+
+  function clickHandler2(event) {
+    console.log(\\"do something 2\\");
+  }
+
+  return (
+    <>
+      <button onClick={(event) => clickHandler1(event)}>Button 1</button>
+      <button onClick={(event) => clickHandler2(event)}>Button 2</button>
+    </>
+  );
+}
+
+export default MyComponent;
+"
+`;
+
 exports[`React > svelte > Typescript Test > html 1`] = `
 "import * as React from \\"react\\";
 import { useState } from \\"react\\";
diff --git a/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap b/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap
index 2538a280fd..8cc9491b8a 100644
--- a/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap
@@ -6350,6 +6350,33 @@ export default MyComponent;
 "
 `;
 
+exports[`RSC > svelte > Javascript Test > fatArrowFunctions 1`] = `
+"import * as React from \\"react\\";
+
+function MyComponent(props) {
+  const _context = { ...props[\\"_context\\"] };
+
+  const state = {
+    clickHandler1: (state.clickHandler1 = (event) => {
+      console.log(\\"do something 1\\");
+    }),
+    clickHandler2: function clickHandler2(event) {
+      console.log(\\"do something 2\\");
+    },
+  };
+
+  return (
+    <>
+      <button>Button 1</button>
+      <button>Button 2</button>
+    </>
+  );
+}
+
+export default MyComponent;
+"
+`;
+
 exports[`RSC > svelte > Javascript Test > html 1`] = `
 "import * as React from \\"react\\";
 
@@ -6714,6 +6741,33 @@ export default MyComponent;
 "
 `;
 
+exports[`RSC > svelte > Typescript Test > fatArrowFunctions 1`] = `
+"import * as React from \\"react\\";
+
+function MyComponent(props: any) {
+  const _context = { ...props[\\"_context\\"] };
+
+  const state = {
+    clickHandler1: (state.clickHandler1 = (event) => {
+      console.log(\\"do something 1\\");
+    }),
+    clickHandler2: function clickHandler2(event) {
+      console.log(\\"do something 2\\");
+    },
+  };
+
+  return (
+    <>
+      <button>Button 1</button>
+      <button>Button 2</button>
+    </>
+  );
+}
+
+export default MyComponent;
+"
+`;
+
 exports[`RSC > svelte > Typescript Test > html 1`] = `
 "import * as React from \\"react\\";
 
diff --git a/packages/core/src/__tests__/__snapshots__/solid.test.ts.snap b/packages/core/src/__tests__/__snapshots__/solid.test.ts.snap
index 8f63396900..6e615fd2e1 100644
--- a/packages/core/src/__tests__/__snapshots__/solid.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/solid.test.ts.snap
@@ -13455,6 +13455,58 @@ export default MyComponent;
 "
 `;
 
+exports[`Solid > svelte > Javascript Test > fatArrowFunctions 1`] = `
+"import { createSignal } from \\"solid-js\\";
+
+function MyComponent(props) {
+  setClickHandler1((event) => {
+    console.log(\\"do something 1\\");
+  });
+
+  function clickHandler2(event) {
+    console.log(\\"do something 2\\");
+  }
+
+  return (
+    <>
+      <button onClick={(event) => clickHandler1(event)}>Button 1</button>
+      <button onClick={(event) => clickHandler2(event)}>Button 2</button>
+    </>
+  );
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`Solid > svelte > Javascript Test > fatArrowFunctions 2`] = `
+"import { createSignal } from \\"solid-js\\";
+
+import { css } from \\"solid-styled-components\\";
+
+function MyComponent(props) {
+  setClickHandler1((event) => {
+    console.log(\\"do something 1\\");
+  });
+
+  function clickHandler2(event) {
+    console.log(\\"do something 2\\");
+  }
+
+  return (
+    <>
+      <>
+        <button onClick={(event) => clickHandler1(event)}>Button 1</button>
+        <button onClick={(event) => clickHandler2(event)}>Button 2</button>
+      </>
+    </>
+  );
+}
+
+export default MyComponent;
+"
+`;
+
 exports[`Solid > svelte > Javascript Test > html 1`] = `
 "import { createSignal } from \\"solid-js\\";
 
@@ -14256,6 +14308,58 @@ export default MyComponent;
 "
 `;
 
+exports[`Solid > svelte > Typescript Test > fatArrowFunctions 1`] = `
+"import { createSignal } from \\"solid-js\\";
+
+function MyComponent(props: any) {
+  setClickHandler1((event) => {
+    console.log(\\"do something 1\\");
+  });
+
+  function clickHandler2(event) {
+    console.log(\\"do something 2\\");
+  }
+
+  return (
+    <>
+      <button onClick={(event) => clickHandler1(event)}>Button 1</button>
+      <button onClick={(event) => clickHandler2(event)}>Button 2</button>
+    </>
+  );
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`Solid > svelte > Typescript Test > fatArrowFunctions 2`] = `
+"import { createSignal } from \\"solid-js\\";
+
+import { css } from \\"solid-styled-components\\";
+
+function MyComponent(props: any) {
+  setClickHandler1((event) => {
+    console.log(\\"do something 1\\");
+  });
+
+  function clickHandler2(event) {
+    console.log(\\"do something 2\\");
+  }
+
+  return (
+    <>
+      <>
+        <button onClick={(event) => clickHandler1(event)}>Button 1</button>
+        <button onClick={(event) => clickHandler2(event)}>Button 2</button>
+      </>
+    </>
+  );
+}
+
+export default MyComponent;
+"
+`;
+
 exports[`Solid > svelte > Typescript Test > html 1`] = `
 "import { createSignal } from \\"solid-js\\";
 
diff --git a/packages/core/src/__tests__/__snapshots__/stencil.test.ts.snap b/packages/core/src/__tests__/__snapshots__/stencil.test.ts.snap
index 67ebba0f7c..e69a84e0ad 100644
--- a/packages/core/src/__tests__/__snapshots__/stencil.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/stencil.test.ts.snap
@@ -5992,6 +5992,32 @@ export default class MyComponent {
 "
 `;
 
+exports[`Stencil > svelte > Javascript Test > fatArrowFunctions 1`] = `
+"import { Component, Prop, h, State, Fragment } from \\"@stencil/core\\";
+
+@Component({
+  tag: \\"my-component\\",
+})
+export default class MyComponent {
+  clickHandler1 = (this.clickHandler1 = (event) => {
+    console.log(\\"do something 1\\");
+  });
+  clickHandler2 = function clickHandler2(event) {
+    console.log(\\"do something 2\\");
+  };
+
+  render() {
+    return (
+      <Fragment>
+        <button onClick={(event) => this.clickHandler1(event)}>Button 1</button>
+        <button onClick={(event) => this.clickHandler2(event)}>Button 2</button>
+      </Fragment>
+    );
+  }
+}
+"
+`;
+
 exports[`Stencil > svelte > Javascript Test > html 1`] = `
 "import { Component, Prop, h, State, Fragment } from \\"@stencil/core\\";
 
@@ -6402,6 +6428,32 @@ export default class MyComponent {
 "
 `;
 
+exports[`Stencil > svelte > Typescript Test > fatArrowFunctions 1`] = `
+"import { Component, Prop, h, State, Fragment } from \\"@stencil/core\\";
+
+@Component({
+  tag: \\"my-component\\",
+})
+export default class MyComponent {
+  clickHandler1 = (this.clickHandler1 = (event) => {
+    console.log(\\"do something 1\\");
+  });
+  clickHandler2 = function clickHandler2(event) {
+    console.log(\\"do something 2\\");
+  };
+
+  render() {
+    return (
+      <Fragment>
+        <button onClick={(event) => this.clickHandler1(event)}>Button 1</button>
+        <button onClick={(event) => this.clickHandler2(event)}>Button 2</button>
+      </Fragment>
+    );
+  }
+}
+"
+`;
+
 exports[`Stencil > svelte > Typescript Test > html 1`] = `
 "import { Component, Prop, h, State, Fragment } from \\"@stencil/core\\";
 
diff --git a/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap b/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap
index 96562ee88d..82913ac265 100644
--- a/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap
@@ -5825,6 +5825,29 @@ exports[`Svelte > svelte > Javascript Test > eventHandlers 1`] = `
 </div>"
 `;
 
+exports[`Svelte > svelte > Javascript Test > fatArrowFunctions 1`] = `
+"<script>
+  clickHandler1 = (event) => {
+    console.log(\\"do something 1\\");
+  };
+
+  function clickHandler2(event) {
+    console.log(\\"do something 2\\");
+  }
+</script>
+
+<button
+  on:click={(event) => {
+    clickHandler1(event);
+  }}>Button 1</button
+>
+<button
+  on:click={(event) => {
+    clickHandler2(event);
+  }}>Button 2</button
+>"
+`;
+
 exports[`Svelte > svelte > Javascript Test > html 1`] = `
 "<script>
   let html = \\"<b>bold</b>\\";
@@ -6102,6 +6125,29 @@ exports[`Svelte > svelte > Typescript Test > eventHandlers 1`] = `
 </div>"
 `;
 
+exports[`Svelte > svelte > Typescript Test > fatArrowFunctions 1`] = `
+"<script lang=\\"ts\\">
+  clickHandler1 = (event) => {
+    console.log(\\"do something 1\\");
+  };
+
+  function clickHandler2(event) {
+    console.log(\\"do something 2\\");
+  }
+</script>
+
+<button
+  on:click={(event) => {
+    clickHandler1(event);
+  }}>Button 1</button
+>
+<button
+  on:click={(event) => {
+    clickHandler2(event);
+  }}>Button 2</button
+>"
+`;
+
 exports[`Svelte > svelte > Typescript Test > html 1`] = `
 "<script lang=\\"ts\\">
   let html = \\"<b>bold</b>\\";
diff --git a/packages/core/src/__tests__/__snapshots__/taro.test.ts.snap b/packages/core/src/__tests__/__snapshots__/taro.test.ts.snap
index 3040186d37..b8d437013b 100644
--- a/packages/core/src/__tests__/__snapshots__/taro.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/taro.test.ts.snap
@@ -6862,6 +6862,31 @@ export default MyComponent;
 "
 `;
 
+exports[`Taro > svelte > Javascript Test > fatArrowFunctions 1`] = `
+"import * as React from \\"react\\";
+import { Button, View, Text } from \\"@tarojs/components\\";
+
+function MyComponent(props) {
+  setClickHandler1((event) => {
+    console.log(\\"do something 1\\");
+  });
+
+  function clickHandler2(event) {
+    console.log(\\"do something 2\\");
+  }
+
+  return (
+    <>
+      <Button onClick={(event) => clickHandler1(event)}>Button 1</Button>
+      <Button onClick={(event) => clickHandler2(event)}>Button 2</Button>
+    </>
+  );
+}
+
+export default MyComponent;
+"
+`;
+
 exports[`Taro > svelte > Javascript Test > html 1`] = `
 "import * as React from \\"react\\";
 import { useState } from \\"react\\";
@@ -7276,6 +7301,31 @@ export default MyComponent;
 "
 `;
 
+exports[`Taro > svelte > Typescript Test > fatArrowFunctions 1`] = `
+"import * as React from \\"react\\";
+import { Button, View, Text } from \\"@tarojs/components\\";
+
+function MyComponent(props: any) {
+  setClickHandler1((event) => {
+    console.log(\\"do something 1\\");
+  });
+
+  function clickHandler2(event) {
+    console.log(\\"do something 2\\");
+  }
+
+  return (
+    <>
+      <Button onClick={(event) => clickHandler1(event)}>Button 1</Button>
+      <Button onClick={(event) => clickHandler2(event)}>Button 2</Button>
+    </>
+  );
+}
+
+export default MyComponent;
+"
+`;
+
 exports[`Taro > svelte > Typescript Test > html 1`] = `
 "import * as React from \\"react\\";
 import { useState } from \\"react\\";
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 79abcd2800..4d46bc4cbe 100644
--- a/packages/core/src/__tests__/__snapshots__/vue-composition.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/vue-composition.test.ts.snap
@@ -6167,6 +6167,22 @@ function log(msg = \\"hello\\") {
 </script>"
 `;
 
+exports[`Vue > svelte > Javascript Test > fatArrowFunctions 1`] = `
+"<template>
+  <button @click=\\"clickHandler1($event)\\">Button 1</button>
+  <button @click=\\"clickHandler2($event)\\">Button 2</button>
+</template>
+
+<script setup>
+clickHandler1 = (event) => {
+  console.log(\\"do something 1\\");
+};
+function clickHandler2(event) {
+  console.log(\\"do something 2\\");
+}
+</script>"
+`;
+
 exports[`Vue > svelte > Javascript Test > html 1`] = `
 "<template>
   <div v-html=\\"html\\"></div>
@@ -6487,6 +6503,22 @@ function log(msg = \\"hello\\") {
 </script>"
 `;
 
+exports[`Vue > svelte > Typescript Test > fatArrowFunctions 1`] = `
+"<template>
+  <button @click=\\"clickHandler1($event)\\">Button 1</button>
+  <button @click=\\"clickHandler2($event)\\">Button 2</button>
+</template>
+
+<script setup lang=\\"ts\\">
+clickHandler1 = (event) => {
+  console.log(\\"do something 1\\");
+};
+function clickHandler2(event) {
+  console.log(\\"do something 2\\");
+}
+</script>"
+`;
+
 exports[`Vue > svelte > Typescript Test > html 1`] = `
 "<template>
   <div v-html=\\"html\\"></div>
diff --git a/packages/core/src/__tests__/__snapshots__/vue.test.ts.snap b/packages/core/src/__tests__/__snapshots__/vue.test.ts.snap
index 2398040e8c..89a82cf1b0 100644
--- a/packages/core/src/__tests__/__snapshots__/vue.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/vue.test.ts.snap
@@ -7564,6 +7564,32 @@ export default defineComponent({
 </script>"
 `;
 
+exports[`Vue > svelte > Javascript Test > fatArrowFunctions 1`] = `
+"<template>
+  <div>
+    <button @click=\\"clickHandler1($event)\\">Button 1</button>
+    <button @click=\\"clickHandler2($event)\\">Button 2</button>
+  </div>
+</template>
+
+<script>
+import { defineComponent } from \\"vue\\";
+
+export default defineComponent({
+  name: \\"my-component\\",
+
+  methods: {
+    clickHandler1: (this.clickHandler1 = (event) => {
+      console.log(\\"do something 1\\");
+    }),
+    clickHandler2: function clickHandler2(event) {
+      console.log(\\"do something 2\\");
+    },
+  },
+});
+</script>"
+`;
+
 exports[`Vue > svelte > Javascript Test > html 1`] = `
 "<template>
   <div v-html=\\"html\\"></div>
@@ -8000,6 +8026,32 @@ export default defineComponent({
 </script>"
 `;
 
+exports[`Vue > svelte > Typescript Test > fatArrowFunctions 1`] = `
+"<template>
+  <div>
+    <button @click=\\"clickHandler1($event)\\">Button 1</button>
+    <button @click=\\"clickHandler2($event)\\">Button 2</button>
+  </div>
+</template>
+
+<script lang=\\"ts\\">
+import { defineComponent } from \\"vue\\";
+
+export default defineComponent({
+  name: \\"my-component\\",
+
+  methods: {
+    clickHandler1: (this.clickHandler1 = (event) => {
+      console.log(\\"do something 1\\");
+    }),
+    clickHandler2: function clickHandler2(event) {
+      console.log(\\"do something 2\\");
+    },
+  },
+});
+</script>"
+`;
+
 exports[`Vue > svelte > Typescript Test > html 1`] = `
 "<template>
   <div v-html=\\"html\\"></div>
diff --git a/packages/core/src/__tests__/__snapshots__/webcomponent.test.ts.snap b/packages/core/src/__tests__/__snapshots__/webcomponent.test.ts.snap
index 087f90e59a..18da35527e 100644
--- a/packages/core/src/__tests__/__snapshots__/webcomponent.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/webcomponent.test.ts.snap
@@ -26981,6 +26981,179 @@ customElements.define(\\"my-component\\", MyComponent);
 "
 `;
 
+exports[`webcomponent > svelte > Javascript Test > fatArrowFunctions 1`] = `
+"
+      
+      
+    
+    
+    
+  
+      /**
+       * Usage:
+       * 
+       *  <my-component></my-component>
+       * 
+       */
+      class MyComponent extends HTMLElement {
+        
+
+        get _root() {
+          return this.shadowRoot || this;
+        }
+
+        constructor() {
+          super();
+          const self = this;
+          
+
+          
+
+          this.state = { clickHandler1 : self.state.clickHandler1 = event => {
+  console.log(\\"do something 1\\");
+};
+
+self.update(), clickHandler2 : function clickHandler2(event) {
+  console.log(\\"do something 2\\");
+},};
+          if (!this.props) {
+            this.props = {};
+          }
+          
+
+          
+
+          // used to keep track of all nodes created by show/for
+          this.nodesToDestroy = [];
+          // batch updates
+          this.pendingUpdate = false;
+          
+
+          
+          // Event handler for 'click' event on button-my-component-1
+          this.onButtonMyComponent1Click = (event) => {
+              
+            this.state.clickHandler1(event)
+          }
+        
+          // Event handler for 'click' event on button-my-component-2
+          this.onButtonMyComponent2Click = (event) => {
+              
+            this.state.clickHandler2(event)
+          }
+        
+
+          
+
+          if (undefined) {
+            this.attachShadow({ mode: 'open' })
+          }
+        }
+
+
+        
+
+        destroyAnyNodes() {
+          // destroy current view template refs before rendering again
+          this.nodesToDestroy.forEach(el => el.remove());
+          this.nodesToDestroy = [];
+        }
+
+        connectedCallback() {
+          
+          
+          
+              this._root.innerHTML = \`
+      <button data-el=\\"button-my-component-1\\">Button 1</button>
+      <button data-el=\\"button-my-component-2\\">Button 2</button>\`;
+              this.pendingUpdate = true;
+              
+              this.render();
+              this.onMount();
+              this.pendingUpdate = false;
+              this.update();
+              
+        }
+        
+
+        
+        
+
+        onMount() {
+          
+        }
+
+        onUpdate() {
+          
+        }
+
+        update() {
+          if (this.pendingUpdate === true) {
+            return;
+          }
+          this.pendingUpdate = true;
+          this.render();
+          this.onUpdate();
+          this.pendingUpdate = false;
+        }
+
+        render() {
+          
+
+          // re-rendering needs to ensure that all nodes generated by for/show are refreshed
+          this.destroyAnyNodes();
+          this.updateBindings();
+
+          
+        }
+        
+
+        updateBindings() {
+          
+                            
+              this._root.querySelectorAll(\\"[data-el='button-my-component-1']\\").forEach((el) => {
+                ;
+el.removeEventListener('click', this.onButtonMyComponent1Click);
+;
+el.addEventListener('click', this.onButtonMyComponent1Click)
+              })
+              
+            
+
+
+                            
+              this._root.querySelectorAll(\\"[data-el='button-my-component-2']\\").forEach((el) => {
+                ;
+el.removeEventListener('click', this.onButtonMyComponent2Click);
+;
+el.addEventListener('click', this.onButtonMyComponent2Click)
+              })
+              
+            
+        }
+
+        // Helper to render content
+        renderTextNode(el, text) {
+          const textNode = document.createTextNode(text);
+          if (el?.scope) {
+            textNode.scope = el.scope;
+          }
+          if (el?.context) {
+            textNode.context = el.context;
+          }
+          el.after(textNode);
+          this.nodesToDestroy.push(el.nextSibling);
+        }
+        
+        
+
+        
+      }
+
+      customElements.define('my-component', MyComponent);
+    "
+`;
+
 exports[`webcomponent > svelte > Javascript Test > html 1`] = `
 "/**
  * Usage:
@@ -29220,6 +29393,179 @@ customElements.define(\\"my-component\\", MyComponent);
 "
 `;
 
+exports[`webcomponent > svelte > Typescript Test > fatArrowFunctions 1`] = `
+"
+      
+      
+    
+    
+    
+  
+      /**
+       * Usage:
+       * 
+       *  <my-component></my-component>
+       * 
+       */
+      class MyComponent extends HTMLElement {
+        
+
+        get _root() {
+          return this.shadowRoot || this;
+        }
+
+        constructor() {
+          super();
+          const self = this;
+          
+
+          
+
+          this.state = { clickHandler1 : self.state.clickHandler1 = event => {
+  console.log(\\"do something 1\\");
+};
+
+self.update(), clickHandler2 : function clickHandler2(event) {
+  console.log(\\"do something 2\\");
+},};
+          if (!this.props) {
+            this.props = {};
+          }
+          
+
+          
+
+          // used to keep track of all nodes created by show/for
+          this.nodesToDestroy = [];
+          // batch updates
+          this.pendingUpdate = false;
+          
+
+          
+          // Event handler for 'click' event on button-my-component-1
+          this.onButtonMyComponent1Click = (event) => {
+              
+            this.state.clickHandler1(event)
+          }
+        
+          // Event handler for 'click' event on button-my-component-2
+          this.onButtonMyComponent2Click = (event) => {
+              
+            this.state.clickHandler2(event)
+          }
+        
+
+          
+
+          if (undefined) {
+            this.attachShadow({ mode: 'open' })
+          }
+        }
+
+
+        
+
+        destroyAnyNodes() {
+          // destroy current view template refs before rendering again
+          this.nodesToDestroy.forEach(el => el.remove());
+          this.nodesToDestroy = [];
+        }
+
+        connectedCallback() {
+          
+          
+          
+              this._root.innerHTML = \`
+      <button data-el=\\"button-my-component-1\\">Button 1</button>
+      <button data-el=\\"button-my-component-2\\">Button 2</button>\`;
+              this.pendingUpdate = true;
+              
+              this.render();
+              this.onMount();
+              this.pendingUpdate = false;
+              this.update();
+              
+        }
+        
+
+        
+        
+
+        onMount() {
+          
+        }
+
+        onUpdate() {
+          
+        }
+
+        update() {
+          if (this.pendingUpdate === true) {
+            return;
+          }
+          this.pendingUpdate = true;
+          this.render();
+          this.onUpdate();
+          this.pendingUpdate = false;
+        }
+
+        render() {
+          
+
+          // re-rendering needs to ensure that all nodes generated by for/show are refreshed
+          this.destroyAnyNodes();
+          this.updateBindings();
+
+          
+        }
+        
+
+        updateBindings() {
+          
+                            
+              this._root.querySelectorAll(\\"[data-el='button-my-component-1']\\").forEach((el) => {
+                ;
+el.removeEventListener('click', this.onButtonMyComponent1Click);
+;
+el.addEventListener('click', this.onButtonMyComponent1Click)
+              })
+              
+            
+
+
+                            
+              this._root.querySelectorAll(\\"[data-el='button-my-component-2']\\").forEach((el) => {
+                ;
+el.removeEventListener('click', this.onButtonMyComponent2Click);
+;
+el.addEventListener('click', this.onButtonMyComponent2Click)
+              })
+              
+            
+        }
+
+        // Helper to render content
+        renderTextNode(el, text) {
+          const textNode = document.createTextNode(text);
+          if (el?.scope) {
+            textNode.scope = el.scope;
+          }
+          if (el?.context) {
+            textNode.context = el.context;
+          }
+          el.after(textNode);
+          this.nodesToDestroy.push(el.nextSibling);
+        }
+        
+        
+
+        
+      }
+
+      customElements.define('my-component', MyComponent);
+    "
+`;
+
 exports[`webcomponent > svelte > Typescript Test > html 1`] = `
 "/**
  * Usage:
diff --git a/packages/core/src/__tests__/syntax/svelte/fat-arrow.raw.svelte b/packages/core/src/__tests__/syntax/svelte/fat-arrow.raw.svelte
new file mode 100644
index 0000000000..a53eb7b80a
--- /dev/null
+++ b/packages/core/src/__tests__/syntax/svelte/fat-arrow.raw.svelte
@@ -0,0 +1,8 @@
+<script>
+  const clickHandler1 = (event) => { console.log("do something 1") }
+
+  function clickHandler2(event) { console.log("do something 2"); }
+</script>
+
+<button on:click={clickHandler1}>Button 1</button>
+<button on:click={clickHandler2}>Button 2</button>
diff --git a/packages/core/src/__tests__/test-generator.ts b/packages/core/src/__tests__/test-generator.ts
index b8b0519c6f..f987400088 100644
--- a/packages/core/src/__tests__/test-generator.ts
+++ b/packages/core/src/__tests__/test-generator.ts
@@ -130,6 +130,7 @@ const SVELTE_SYNTAX_TESTS: Tests = {
   slots: getRawFile('./syntax/svelte/slots.raw.svelte'),
   style: getRawFile('./syntax/svelte/style.raw.svelte'),
   textExpressions: getRawFile('./syntax/svelte/text-expressions.raw.svelte'),
+  fatArrowFunctions: getRawFile('./syntax/svelte/fat-arrow.raw.svelte'),
 };
 
 const BASIC_TESTS: Tests = {
diff --git a/packages/core/src/parsers/svelte/instance/index.ts b/packages/core/src/parsers/svelte/instance/index.ts
index 137bd9201a..678187836d 100644
--- a/packages/core/src/parsers/svelte/instance/index.ts
+++ b/packages/core/src/parsers/svelte/instance/index.ts
@@ -115,8 +115,12 @@ const handleStatement: InstanceHandler<Statement> = (json, node, parent) => {
 };
 
 export function parseInstance(ast: Ast, json: SveltosisComponent) {
+  const nodeList :BaseNode[] = []
+  let currentIndex :number = 0
   walk(ast.instance as BaseNode, {
     enter(node, parent) {
+      nodeList.push(node) // memorize node, for easier traversal
+      currentIndex++
       switch (node.type) {
         case 'ImportDeclaration':
           handleImportDeclaration(json, node as ImportDeclaration);
@@ -127,6 +131,12 @@ export function parseInstance(ast: Ast, json: SveltosisComponent) {
         case 'ExpressionStatement':
           handleExpressionStatement(json, node as ExpressionStatement, parent);
           break;
+        case 'ArrowFunctionExpression':
+          const parentIndexModifier :number = 3
+            // TODO: May cause problems on VariableDeclarations like `const foo, bar = () => {}` or on destructured Variables..
+          parent.type === 'VariableDeclarator' && handleFunctionDeclaration(json, nodeList[currentIndex - parentIndexModifier] as FunctionDeclaration);
+          // Do nothing if this was an IIFE
+          break;
         case 'FunctionDeclaration':
           handleFunctionDeclaration(json, node as FunctionDeclaration);
           break;
diff --git a/packages/core/src/parsers/svelte/instance/references.ts b/packages/core/src/parsers/svelte/instance/references.ts
index ed9f64d85d..32e397fc4e 100644
--- a/packages/core/src/parsers/svelte/instance/references.ts
+++ b/packages/core/src/parsers/svelte/instance/references.ts
@@ -62,6 +62,12 @@ export function parseReferences(json: SveltosisComponent, node: VariableDeclarat
       code = parseObjectExpression(json, declaration.init);
       break;
     }
+    case 'ArrowFunctionExpression': {
+      code = generate(node);
+      type = 'function';
+
+      break;
+    }
     case 'FunctionExpression': {
       declaration.init.id = declaration.id as Identifier;
       code = generate(declaration.init);