From 30e1e80ffaabaf43bf99f7ad260b1316323463ec Mon Sep 17 00:00:00 2001
From: Dominik Ritter <dominik.ritter@chefkoch.de>
Date: Wed, 17 May 2023 17:13:17 +0200
Subject: [PATCH 1/6] Treat ArrowFunctions and FunctionDeclarations equally

We do this by converting ArrowFunctions into FunctionDeclarations.
---
 packages/core/src/parsers/svelte/instance/index.ts | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/packages/core/src/parsers/svelte/instance/index.ts b/packages/core/src/parsers/svelte/instance/index.ts
index 137bd9201a..541e191fe4 100644
--- a/packages/core/src/parsers/svelte/instance/index.ts
+++ b/packages/core/src/parsers/svelte/instance/index.ts
@@ -127,6 +127,17 @@ export function parseInstance(ast: Ast, json: SveltosisComponent) {
         case 'ExpressionStatement':
           handleExpressionStatement(json, node as ExpressionStatement, parent);
           break;
+        case 'ArrowFunctionExpression':
+          if (parent.type === 'VariableDeclarator') {
+            // Convert ArrowFunctions into regular FunctionDeclarations
+            // TODO 1: Converting might change the meaning of "this"!
+            // TODO 2: Figure out a way if the ArrowFunction does not contain a BlockStatement!
+            node.type = 'FunctionDeclaration'
+            node.id = parent.id // Name the created function after the variable!
+            handleFunctionDeclaration(json, node as FunctionDeclaration);
+          }
+          // Do nothing if this was an IIFE
+          break;
         case 'FunctionDeclaration':
           handleFunctionDeclaration(json, node as FunctionDeclaration);
           break;

From 89c3d1c00778deb0ddf51a1c21488905035d69dc Mon Sep 17 00:00:00 2001
From: Dominik Ritter <dominik.ritter@chefkoch.de>
Date: Wed, 17 May 2023 17:15:45 +0200
Subject: [PATCH 2/6] Add Tests for ArrowFunctions being treated as
 FunctionDeclarations

---
 .../__snapshots__/alpine.test.ts.snap         |  40 +++
 .../__snapshots__/angular.import.test.ts.snap |  66 +++++
 .../__snapshots__/angular.mapper.test.ts.snap |  68 +++++
 .../__snapshots__/angular.test.ts.snap        | 118 +++++++++
 .../__tests__/__snapshots__/html.test.ts.snap | 130 ++++++++++
 .../__snapshots__/liquid.test.ts.snap         |  16 ++
 .../__tests__/__snapshots__/lit.test.ts.snap  |  60 +++++
 .../__snapshots__/marko.test.ts.snap          |  28 ++
 .../__snapshots__/parse-svelte.test.ts.snap   | 104 ++++++++
 .../__snapshots__/preact.test.ts.snap         |  50 ++++
 .../__tests__/__snapshots__/qwik.test.ts.snap |  48 ++++
 .../__snapshots__/react-native.test.ts.snap   |  72 ++++++
 .../__snapshots__/react.test.ts.snap          |  48 ++++
 .../__tests__/__snapshots__/rsc.test.ts.snap  |  54 ++++
 .../__snapshots__/solid.test.ts.snap          | 104 ++++++++
 .../__snapshots__/stencil.test.ts.snap        |  52 ++++
 .../__snapshots__/svelte.test.ts.snap         |  46 ++++
 .../__tests__/__snapshots__/taro.test.ts.snap |  50 ++++
 .../vue-composition.test.ts.snap              |  32 +++
 .../__tests__/__snapshots__/vue.test.ts.snap  |  52 ++++
 .../__snapshots__/webcomponent.test.ts.snap   | 240 ++++++++++++++++++
 .../syntax/svelte/fat-arrow.raw.svelte        |   8 +
 packages/core/src/__tests__/test-generator.ts |   1 +
 23 files changed, 1487 insertions(+)
 create mode 100644 packages/core/src/__tests__/syntax/svelte/fat-arrow.raw.svelte

diff --git a/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap b/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap
index 6e9edc2831..67bd1465e0 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: function 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: function 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..d6a2f7a81d 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 = function 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 = function 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..ae70125e38 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 = function 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 = function 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..c6e5489e1e 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 = function 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 = function 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 = function 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 = function 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..812960480f 100644
--- a/packages/core/src/__tests__/__snapshots__/html.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/html.test.ts.snap
@@ -12510,6 +12510,71 @@ 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: function clickHandler1(event) {
+        console.log(\\"do something 1\\");
+      },
+      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 +13605,71 @@ 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: function clickHandler1(event) {
+        console.log(\\"do something 1\\");
+      },
+      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..b7c1b19da6 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 = function 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 = function 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..fbfc7246dc 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 = function 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 = function 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..642cf5fa55 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,110 @@ 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": {
+      "arguments": [
+        "event",
+      ],
+      "code": "function 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..dcbcb4f3a1 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) {
+  function clickHandler1(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) {
+  function clickHandler1(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..63b7734053 100644
--- a/packages/core/src/__tests__/__snapshots__/qwik.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/qwik.test.ts.snap
@@ -8811,6 +8811,30 @@ export default MyComponent;
 "
 `;
 
+exports[`qwik > svelte > Javascript Test > fatArrowFunctions 1`] = `
+"import { Fragment, component$, h } from \\"@builder.io/qwik\\";
+
+export const clickHandler1 = function clickHandler1(props, state, event) {
+  console.log(\\"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;
+"
+`;
+
 exports[`qwik > svelte > Javascript Test > html 1`] = `
 "import { Fragment, component$, h, useStore } from \\"@builder.io/qwik\\";
 
@@ -9213,6 +9237,30 @@ export default MyComponent;
 "
 `;
 
+exports[`qwik > svelte > Typescript Test > fatArrowFunctions 1`] = `
+"import { Fragment, component$, h } from \\"@builder.io/qwik\\";
+
+export const clickHandler1 = function clickHandler1(props, state, event) {
+  console.log(\\"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;
+"
+`;
+
 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..e7390e9476 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) {
+  function clickHandler1(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) {
+  function clickHandler1(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..28f098a653 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) {
+  function clickHandler1(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) {
+  function clickHandler1(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..0699500bfe 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: function 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: function 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..c11e21d93d 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) {
+  function clickHandler1(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) {
+  function clickHandler1(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) {
+  function clickHandler1(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) {
+  function clickHandler1(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..78e4caa277 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 = function 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 = function 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..5463496bbf 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>
+  function 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\\">
+  function 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..ebab5aae65 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) {
+  function clickHandler1(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) {
+  function clickHandler1(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..a99233676e 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>
+function 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\\">
+function 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..a06ad33502 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: function 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: function 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..1ff7fcf2cc 100644
--- a/packages/core/src/__tests__/__snapshots__/webcomponent.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/webcomponent.test.ts.snap
@@ -26981,6 +26981,126 @@ 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: function clickHandler1(event) {
+        console.log(\\"do something 1\\");
+      },
+      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 +29340,126 @@ 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: function clickHandler1(event) {
+        console.log(\\"do something 1\\");
+      },
+      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 = {

From 0de378307dad9814b83be1b9d81373c6114517e3 Mon Sep 17 00:00:00 2001
From: Dominik Ritter <dominik.ritter@chefkoch.de>
Date: Thu, 25 May 2023 17:40:51 +0200
Subject: [PATCH 3/6] Do not convert ArrowFunctions into FunctionExpressions

---
 .../core/src/parsers/svelte/instance/index.ts     | 15 +++++++--------
 .../src/parsers/svelte/instance/references.ts     |  6 ++++++
 2 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/packages/core/src/parsers/svelte/instance/index.ts b/packages/core/src/parsers/svelte/instance/index.ts
index 541e191fe4..e3337a4aa0 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);
@@ -128,14 +132,9 @@ export function parseInstance(ast: Ast, json: SveltosisComponent) {
           handleExpressionStatement(json, node as ExpressionStatement, parent);
           break;
         case 'ArrowFunctionExpression':
-          if (parent.type === 'VariableDeclarator') {
-            // Convert ArrowFunctions into regular FunctionDeclarations
-            // TODO 1: Converting might change the meaning of "this"!
-            // TODO 2: Figure out a way if the ArrowFunction does not contain a BlockStatement!
-            node.type = 'FunctionDeclaration'
-            node.id = parent.id // Name the created function after the variable!
-            handleFunctionDeclaration(json, node as FunctionDeclaration);
-          }
+          const parentIndexModifier = 4
+            // TODO: May cause problems on VariableDeclarations like `const foo, bar = () => {}` or on destructured Variables..
+          parent.type === 'VariableDeclarator' && handleVariableDeclaration(json, nodeList[currentIndex - parentIndexModifier] as VariableDeclaration);
           // Do nothing if this was an IIFE
           break;
         case 'FunctionDeclaration':
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);

From 463f84f3e6532b8e4c6f44ef0ebb721b0e5de28d Mon Sep 17 00:00:00 2001
From: Dominik Ritter <dominik.ritter@chefkoch.de>
Date: Thu, 25 May 2023 17:41:12 +0200
Subject: [PATCH 4/6] Update Snapshots

---
 .../__snapshots__/alpine.test.ts.snap         |  10 +-
 .../__snapshots__/angular.import.test.ts.snap | 134 ++++++---
 .../__snapshots__/angular.mapper.test.ts.snap | 136 ++++++---
 .../__snapshots__/angular.test.ts.snap        | 268 ++++++++++++------
 .../__tests__/__snapshots__/html.test.ts.snap |  14 +-
 .../__tests__/__snapshots__/lit.test.ts.snap  | 224 +++++++++------
 .../__snapshots__/marko.test.ts.snap          |  30 +-
 .../__snapshots__/parse-svelte.test.ts.snap   |   9 +-
 .../__snapshots__/preact.test.ts.snap         |  12 +-
 .../__tests__/__snapshots__/qwik.test.ts.snap | 153 +++++++---
 .../__snapshots__/react-native.test.ts.snap   |  12 +-
 .../__snapshots__/react.test.ts.snap          |  12 +-
 .../__tests__/__snapshots__/rsc.test.ts.snap  |  10 +-
 .../__snapshots__/solid.test.ts.snap          | 132 +++------
 .../__snapshots__/stencil.test.ts.snap        | 120 +++-----
 .../__snapshots__/svelte.test.ts.snap         | 188 ++++++++----
 .../__tests__/__snapshots__/taro.test.ts.snap |  12 +-
 .../vue-composition.test.ts.snap              |  36 ++-
 .../__tests__/__snapshots__/vue.test.ts.snap  |  92 ++++--
 .../__snapshots__/webcomponent.test.ts.snap   |  14 +-
 20 files changed, 993 insertions(+), 625 deletions(-)

diff --git a/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap b/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap
index 67bd1465e0..6c5a70e922 100644
--- a/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap
@@ -5259,9 +5259,8 @@ exports[`Alpine.js > svelte > Javascript Test > fatArrowFunctions 1`] = `
 <script>
   document.addEventListener(\\"alpine:init\\", () => {
     Alpine.data(\\"myComponent\\", () => ({
-      clickHandler1: function clickHandler1(event) {
-        console.log(\\"do something 1\\");
-      },
+      clickHandler1:
+        'const this.clickHandler1 = event => {\\\\n  console.log(\\"do something 1\\");\\\\n};',
       clickHandler2: function clickHandler2(event) {
         console.log(\\"do something 2\\");
       },
@@ -5593,9 +5592,8 @@ exports[`Alpine.js > svelte > Typescript Test > fatArrowFunctions 1`] = `
 <script>
   document.addEventListener(\\"alpine:init\\", () => {
     Alpine.data(\\"myComponent\\", () => ({
-      clickHandler1: function clickHandler1(event) {
-        console.log(\\"do something 1\\");
-      },
+      clickHandler1:
+        'const this.clickHandler1 = event => {\\\\n  console.log(\\"do something 1\\");\\\\n};',
       clickHandler2: function clickHandler2(event) {
         console.log(\\"do something 2\\");
       },
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 d6a2f7a81d..e0f587ab32 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap
@@ -8803,33 +8803,62 @@ exports[`Angular with Preserve Imports and File Extensions > svelte > Javascript
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
 
-import { Component } from \\"@angular/core\\";
+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 = function clickHandler1(event) {
-    console.log(\\"do something 1\\");
-  };
-  clickHandler2 = function clickHandler2(event) {
-    console.log(\\"do something 2\\");
-  };
+
+
+
+
+
+
+
+
+
+   @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 = \\"const state.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 {}
-"
+export class MyComponentModule {}"
 `;
 
 exports[`Angular with Preserve Imports and File Extensions > svelte > Javascript Test > html 1`] = `
@@ -9365,33 +9394,62 @@ exports[`Angular with Preserve Imports and File Extensions > svelte > Typescript
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
 
-import { Component } from \\"@angular/core\\";
+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 = function clickHandler1(event) {
-    console.log(\\"do something 1\\");
-  };
-  clickHandler2 = function clickHandler2(event) {
-    console.log(\\"do something 2\\");
-  };
+
+
+
+
+
+
+
+
+
+   @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 = \\"const state.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 {}
-"
+export class MyComponentModule {}"
 `;
 
 exports[`Angular with Preserve Imports and File Extensions > svelte > Typescript Test > html 1`] = `
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 ae70125e38..4dfbdc66fa 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.mapper.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.mapper.test.ts.snap
@@ -8997,34 +8997,62 @@ exports[`Angular with Import Mapper Tests > svelte > Javascript Test > fatArrowF
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
 
-import { Component } from \\"@angular/core\\";
+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 = function clickHandler1(event) {
-    console.log(\\"do something 1\\");
-  };
-  clickHandler2 = function clickHandler2(event) {
-    console.log(\\"do something 2\\");
-  };
+
+
+
+
+
+
+
+
+
+   @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 = \\"const state.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],
+  bootstrap: [SomeOtherComponent]
 })
-export class MyComponentModule {}
-"
+export class MyComponentModule {}"
 `;
 
 exports[`Angular with Import Mapper Tests > svelte > Javascript Test > html 1`] = `
@@ -9576,34 +9604,62 @@ exports[`Angular with Import Mapper Tests > svelte > Typescript Test > fatArrowF
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
 
-import { Component } from \\"@angular/core\\";
+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 = function clickHandler1(event) {
-    console.log(\\"do something 1\\");
-  };
-  clickHandler2 = function clickHandler2(event) {
-    console.log(\\"do something 2\\");
-  };
+
+
+
+
+
+
+
+
+
+   @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 = \\"const state.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],
+  bootstrap: [SomeOtherComponent]
 })
-export class MyComponentModule {}
-"
+export class MyComponentModule {}"
 `;
 
 exports[`Angular with Import Mapper Tests > svelte > Typescript Test > html 1`] = `
diff --git a/packages/core/src/__tests__/__snapshots__/angular.test.ts.snap b/packages/core/src/__tests__/__snapshots__/angular.test.ts.snap
index c6e5489e1e..d53c17113c 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.test.ts.snap
@@ -16218,59 +16218,113 @@ exports[`Angular > svelte > Javascript Test > fatArrowFunctions 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
 
-import { Component } from \\"@angular/core\\";
+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 = function clickHandler1(event) {
-    console.log(\\"do something 1\\");
-  };
-  clickHandler2 = function clickHandler2(event) {
-    console.log(\\"do something 2\\");
-  };
+
+
+
+
+
+
+
+
+
+   @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 = \\"const state.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 {}
-"
+export class MyComponentModule {}"
 `;
 
 exports[`Angular > svelte > Javascript Test > fatArrowFunctions 2`] = `
-"import { Component } from \\"@angular/core\\";
-import { CommonModule } from \\"@angular/common\\";
+"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 = function clickHandler1(event) {
-    console.log(\\"do something 1\\");
-  };
-  clickHandler2 = function clickHandler2(event) {
-    console.log(\\"do something 2\\");
-  };
+
+
+
+
+
+
+
+
+   @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 = \\"const state.clickHandler1 = event => {
+  console.log(\\\\\\"do something 1\\\\\\");
+};\\"
+clickHandler2 = function clickHandler2(event) {
+ console.log(\\"do something 2\\");
 }
-"
+
+
+
+
+
+
+
+
+
+
+
+   }"
 `;
 
 exports[`Angular > svelte > Javascript Test > html 1`] = `
@@ -17221,59 +17275,113 @@ exports[`Angular > svelte > Typescript Test > fatArrowFunctions 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
 
-import { Component } from \\"@angular/core\\";
+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 = function clickHandler1(event) {
-    console.log(\\"do something 1\\");
-  };
-  clickHandler2 = function clickHandler2(event) {
-    console.log(\\"do something 2\\");
-  };
+
+
+
+
+
+
+
+
+
+   @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 = \\"const state.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 {}
-"
+export class MyComponentModule {}"
 `;
 
 exports[`Angular > svelte > Typescript Test > fatArrowFunctions 2`] = `
-"import { Component } from \\"@angular/core\\";
-import { CommonModule } from \\"@angular/common\\";
+"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 = function clickHandler1(event) {
-    console.log(\\"do something 1\\");
-  };
-  clickHandler2 = function clickHandler2(event) {
-    console.log(\\"do something 2\\");
-  };
+
+
+
+
+
+
+
+
+   @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 = \\"const state.clickHandler1 = event => {
+  console.log(\\\\\\"do something 1\\\\\\");
+};\\"
+clickHandler2 = function clickHandler2(event) {
+ console.log(\\"do something 2\\");
 }
-"
+
+
+
+
+
+
+
+
+
+
+
+   }"
 `;
 
 exports[`Angular > svelte > Typescript Test > html 1`] = `
diff --git a/packages/core/src/__tests__/__snapshots__/html.test.ts.snap b/packages/core/src/__tests__/__snapshots__/html.test.ts.snap
index 812960480f..8268e40bab 100644
--- a/packages/core/src/__tests__/__snapshots__/html.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/html.test.ts.snap
@@ -12489,7 +12489,7 @@ exports[`Html > svelte > Javascript Test > eventHandlers 1`] = `
     }
 
     // Event handler for 'click' event on button-1
-    function onButton1Click(a) {
+    function onButton1Click() {
       state.log(\\"hi\\");
     }
 
@@ -12516,9 +12516,8 @@ exports[`Html > svelte > Javascript Test > fatArrowFunctions 1`] = `
 <script>
   (() => {
     const state = {
-      clickHandler1: function clickHandler1(event) {
-        console.log(\\"do something 1\\");
-      },
+      clickHandler1:
+        'const state.clickHandler1 = event => {\\\\n  console.log(\\"do something 1\\");\\\\n};',
       clickHandler2: function clickHandler2(event) {
         console.log(\\"do something 2\\");
       },
@@ -13584,7 +13583,7 @@ exports[`Html > svelte > Typescript Test > eventHandlers 1`] = `
     }
 
     // Event handler for 'click' event on button-1
-    function onButton1Click(a) {
+    function onButton1Click() {
       state.log(\\"hi\\");
     }
 
@@ -13611,9 +13610,8 @@ exports[`Html > svelte > Typescript Test > fatArrowFunctions 1`] = `
 <script>
   (() => {
     const state = {
-      clickHandler1: function clickHandler1(event) {
-        console.log(\\"do something 1\\");
-      },
+      clickHandler1:
+        'const state.clickHandler1 = event => {\\\\n  console.log(\\"do something 1\\");\\\\n};',
       clickHandler2: function clickHandler2(event) {
         console.log(\\"do something 2\\");
       },
diff --git a/packages/core/src/__tests__/__snapshots__/lit.test.ts.snap b/packages/core/src/__tests__/__snapshots__/lit.test.ts.snap
index b7c1b19da6..37c436e4c8 100644
--- a/packages/core/src/__tests__/__snapshots__/lit.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/lit.test.ts.snap
@@ -8531,59 +8531,91 @@ export default class MyComponent extends LitElement {
 `;
 
 exports[`Lit > svelte > Javascript Test > eventHandlers 1`] = `
-"import { LitElement, html, css } from \\"lit\\";
-import { customElement, property, state, query } from \\"lit/decorators.js\\";
+"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;
-  }
 
-  log = function log(msg = \\"hello\\") {
-    console.log(msg);
-  };
 
-  render() {
-    return html\`
 
-          <div ><button  @click=\${(a) => this.log(\\"hi\\")} >Log</button>
-        <button  @click=\${(event) => this.log(event)} >Log</button>
-        <button  @click=\${(event) => this.log(event)} >Log</button></div>
-        \`;
-  }
+  @customElement('my-component')
+  export default class MyComponent extends LitElement {
+
+      createRenderRoot() {
+        return this;
+      }
+
+
+
+
+
+
+
+
+
+
+       log = function log(msg = 'hello') {
+console.log(msg);
 }
-"
+
+
+
+
+
+
+    render() {
+      return html\`
+
+          <div ><button  @click=\${ => this.log('hi')} >Log</button>
+        <button  @click=\${event => this.log(event)} >Log</button>
+        <button  @click=\${event => this.log(event)} >Log</button></div>
+        \`
+    }
+  }"
 `;
 
 exports[`Lit > svelte > Javascript Test > fatArrowFunctions 1`] = `
-"import { LitElement, html, css } from \\"lit\\";
-import { customElement, property, state, query } from \\"lit/decorators.js\\";
+"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 = function 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>
-        \`;
-  }
+   @customElement('my-component')
+   export default class MyComponent extends LitElement {
+
+       createRenderRoot() {
+         return this;
+       }
+
+
+
+
+
+
+
+
+
+
+        clickHandler1 = \\"const state.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`] = `
@@ -9056,59 +9088,91 @@ export default class MyComponent extends LitElement {
 `;
 
 exports[`Lit > svelte > Typescript Test > eventHandlers 1`] = `
-"import { LitElement, html, css } from \\"lit\\";
-import { customElement, property, state, query } from \\"lit/decorators.js\\";
+"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;
-  }
 
-  log = function log(msg = \\"hello\\") {
-    console.log(msg);
-  };
 
-  render() {
-    return html\`
 
-          <div ><button  @click=\${(a) => this.log(\\"hi\\")} >Log</button>
-        <button  @click=\${(event) => this.log(event)} >Log</button>
-        <button  @click=\${(event) => this.log(event)} >Log</button></div>
-        \`;
-  }
+  @customElement('my-component')
+  export default class MyComponent extends LitElement {
+
+      createRenderRoot() {
+        return this;
+      }
+
+
+
+
+
+
+
+
+
+
+       log = function log(msg = 'hello') {
+console.log(msg);
 }
-"
+
+
+
+
+
+
+    render() {
+      return html\`
+
+          <div ><button  @click=\${ => this.log('hi')} >Log</button>
+        <button  @click=\${event => this.log(event)} >Log</button>
+        <button  @click=\${event => this.log(event)} >Log</button></div>
+        \`
+    }
+  }"
 `;
 
 exports[`Lit > svelte > Typescript Test > fatArrowFunctions 1`] = `
-"import { LitElement, html, css } from \\"lit\\";
-import { customElement, property, state, query } from \\"lit/decorators.js\\";
+"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 = function 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>
-        \`;
-  }
+   @customElement('my-component')
+   export default class MyComponent extends LitElement {
+
+       createRenderRoot() {
+         return this;
+       }
+
+
+
+
+
+
+
+
+
+
+        clickHandler1 = \\"const state.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`] = `
diff --git a/packages/core/src/__tests__/__snapshots__/marko.test.ts.snap b/packages/core/src/__tests__/__snapshots__/marko.test.ts.snap
index fbfc7246dc..6e02a43e98 100644
--- a/packages/core/src/__tests__/__snapshots__/marko.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/marko.test.ts.snap
@@ -4741,7 +4741,7 @@ exports[`Marko > svelte > Javascript Test > eventHandlers 1`] = `
 }
 
 <div>
-  <button on-click(a => component.log('hi'))>Log</button>
+  <button on-click( => component.log('hi'))>Log</button>
   <button on-click(event => component.log(event))>Log</button>
   <button on-click(event => component.log(event))>Log</button>
 </div>"
@@ -4749,14 +4749,15 @@ exports[`Marko > svelte > Javascript Test > eventHandlers 1`] = `
 
 exports[`Marko > svelte > Javascript Test > fatArrowFunctions 1`] = `
 "class {
-  clickHandler1 = function clickHandler1(event) {
-    console.log(\\"do something 1\\");
-  };
-  clickHandler2 = function clickHandler2(event) {
-    console.log(\\"do something 2\\");
-  };
+        clickHandler1 = \\"const state.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>"
 `;
@@ -5033,7 +5034,7 @@ exports[`Marko > svelte > Typescript Test > eventHandlers 1`] = `
 }
 
 <div>
-  <button on-click(a => component.log('hi'))>Log</button>
+  <button on-click( => component.log('hi'))>Log</button>
   <button on-click(event => component.log(event))>Log</button>
   <button on-click(event => component.log(event))>Log</button>
 </div>"
@@ -5041,14 +5042,15 @@ exports[`Marko > svelte > Typescript Test > eventHandlers 1`] = `
 
 exports[`Marko > svelte > Typescript Test > fatArrowFunctions 1`] = `
 "class {
-  clickHandler1 = function clickHandler1(event) {
-    console.log(\\"do something 1\\");
-  };
-  clickHandler2 = function clickHandler2(event) {
-    console.log(\\"do something 2\\");
-  };
+        clickHandler1 = \\"const state.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>"
 `;
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 642cf5fa55..56308c1ae2 100644
--- a/packages/core/src/__tests__/__snapshots__/parse-svelte.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/parse-svelte.test.ts.snap
@@ -597,7 +597,7 @@ exports[`Parse JSX > eventHandlers 1`] = `
           "bindings": {
             "onClick": {
               "arguments": [
-                "a",
+                [],
               ],
               "code": "state.log('hi')",
               "type": "single",
@@ -789,12 +789,7 @@ exports[`Parse JSX > fatArrowFunctions 1`] = `
   "refs": {},
   "state": {
     "clickHandler1": {
-      "arguments": [
-        "event",
-      ],
-      "code": "function clickHandler1(event) {
-  console.log(\\"do something 1\\");
-}",
+      "code": "\\"const state.clickHandler1 = event => {\\\\n  console.log(\\\\\\"do something 1\\\\\\");\\\\n};\\"",
       "type": "function",
     },
     "clickHandler2": {
diff --git a/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap b/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap
index dcbcb4f3a1..a39d11dec3 100644
--- a/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap
@@ -6899,7 +6899,7 @@ function MyComponent(props) {
 
   return (
     <div>
-      <button onClick={(a) => log(\\"hi\\")}>Log</button>
+      <button onClick={() => log(\\"hi\\")}>Log</button>
       <button onClick={(event) => log(event)}>Log</button>
       <button onClick={(event) => log(event)}>Log</button>
     </div>
@@ -6915,9 +6915,7 @@ exports[`Preact > svelte > Javascript Test > fatArrowFunctions 1`] = `
 import { h, Fragment } from \\"preact\\";
 
 function MyComponent(props) {
-  function clickHandler1(event) {
-    console.log(\\"do something 1\\");
-  }
+  \\"const state.clickHandler1 = event => { console.log(\\\\\\"do something 1\\\\\\"); };\\";
 
   function clickHandler2(event) {
     console.log(\\"do something 2\\");
@@ -7344,7 +7342,7 @@ function MyComponent(props: any) {
 
   return (
     <div>
-      <button onClick={(a) => log(\\"hi\\")}>Log</button>
+      <button onClick={() => log(\\"hi\\")}>Log</button>
       <button onClick={(event) => log(event)}>Log</button>
       <button onClick={(event) => log(event)}>Log</button>
     </div>
@@ -7360,9 +7358,7 @@ exports[`Preact > svelte > Typescript Test > fatArrowFunctions 1`] = `
 import { h, Fragment } from \\"preact\\";
 
 function MyComponent(props: any) {
-  function clickHandler1(event) {
-    console.log(\\"do something 1\\");
-  }
+  \\"const state.clickHandler1 = event => { console.log(\\\\\\"do something 1\\\\\\"); };\\";
 
   function clickHandler2(event) {
     console.log(\\"do something 2\\");
diff --git a/packages/core/src/__tests__/__snapshots__/qwik.test.ts.snap b/packages/core/src/__tests__/__snapshots__/qwik.test.ts.snap
index 63b7734053..b47cff73b2 100644
--- a/packages/core/src/__tests__/__snapshots__/qwik.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/qwik.test.ts.snap
@@ -8812,27 +8812,90 @@ export default MyComponent;
 `;
 
 exports[`qwik > svelte > Javascript Test > fatArrowFunctions 1`] = `
-"import { Fragment, component$, h } from \\"@builder.io/qwik\\";
-
-export const clickHandler1 = function clickHandler1(props, state, event) {
-  console.log(\\"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;
-"
+"SyntaxError: unknown: Expecting Unicode escape sequence \\\\uXXXX. (1:39)
+
+> 1 | let _ = ate.clickHandler1 = event => {\\\\n  console.log(props,state,\\\\\\"do something 1\\\\\\");\\\\n};\\"
+    |                                        ^
+    at instantiate (/home/dritter/Projekte/mitosis/packages/core/node_modules/@babel/parser/lib/index.js:72:32)
+    at constructor (/home/dritter/Projekte/mitosis/packages/core/node_modules/@babel/parser/lib/index.js:358:12)
+    at Parser.raise (/home/dritter/Projekte/mitosis/packages/core/node_modules/@babel/parser/lib/index.js:3341:19)
+    at Parser.readWord1 (/home/dritter/Projekte/mitosis/packages/core/node_modules/@babel/parser/lib/index.js:3281:16)
+    at Parser.readWord (/home/dritter/Projekte/mitosis/packages/core/node_modules/@babel/parser/lib/index.js:3311:23)
+    at Parser.getTokenFromCode (/home/dritter/Projekte/mitosis/packages/core/node_modules/@babel/parser/lib/index.js:2675:14)
+    at Parser.getTokenFromCode (/home/dritter/Projekte/mitosis/packages/core/node_modules/@babel/parser/lib/index.js:8077:18)
+    at Parser.getTokenFromCode (/home/dritter/Projekte/mitosis/packages/core/node_modules/@babel/parser/lib/index.js:10982:18)
+    at Parser.nextToken (/home/dritter/Projekte/mitosis/packages/core/node_modules/@babel/parser/lib/index.js:2025:10)
+    at Parser.next (/home/dritter/Projekte/mitosis/packages/core/node_modules/@babel/parser/lib/index.js:1929:10)
+    at Parser.eat (/home/dritter/Projekte/mitosis/packages/core/node_modules/@babel/parser/lib/index.js:1934:12)
+    at Parser.expect (/home/dritter/Projekte/mitosis/packages/core/node_modules/@babel/parser/lib/index.js:4008:10)
+    at Parser.parseBlock (/home/dritter/Projekte/mitosis/packages/core/node_modules/@babel/parser/lib/index.js:15250:10)
+    at Parser.parseFunctionBody (/home/dritter/Projekte/mitosis/packages/core/node_modules/@babel/parser/lib/index.js:13946:24)
+    at Parser.parseArrowExpression (/home/dritter/Projekte/mitosis/packages/core/node_modules/@babel/parser/lib/index.js:13917:10)
+    at Parser.parseExprAtom (/home/dritter/Projekte/mitosis/packages/core/node_modules/@babel/parser/lib/index.js:13113:25)
+    at Parser.parseExprAtom (/home/dritter/Projekte/mitosis/packages/core/node_modules/@babel/parser/lib/index.js:8041:20)
+    at Parser.parseExprSubscripts (/home/dritter/Projekte/mitosis/packages/core/node_modules/@babel/parser/lib/index.js:12643:23)
+    at Parser.parseUpdate (/home/dritter/Projekte/mitosis/packages/core/node_modules/@babel/parser/lib/index.js:12622:21)
+    at Parser.parseMaybeUnary (/home/dritter/Projekte/mitosis/packages/core/node_modules/@babel/parser/lib/index.js:12593:23)
+    at Parser.parseMaybeUnary (/home/dritter/Projekte/mitosis/packages/core/node_modules/@babel/parser/lib/index.js:10795:20)
+    at Parser.parseMaybeUnaryOrPrivate (/home/dritter/Projekte/mitosis/packages/core/node_modules/@babel/parser/lib/index.js:12387:61)
+    at Parser.parseExprOps (/home/dritter/Projekte/mitosis/packages/core/node_modules/@babel/parser/lib/index.js:12394:23)
+    at Parser.parseMaybeConditional (/home/dritter/Projekte/mitosis/packages/core/node_modules/@babel/parser/lib/index.js:12364:23)
+    at Parser.parseMaybeAssign (/home/dritter/Projekte/mitosis/packages/core/node_modules/@babel/parser/lib/index.js:12316:21)
+    at Parser.parseMaybeAssign (/home/dritter/Projekte/mitosis/packages/core/node_modules/@babel/parser/lib/index.js:10725:20)
+    at Parser.parseMaybeAssign (/home/dritter/Projekte/mitosis/packages/core/node_modules/@babel/parser/lib/index.js:12348:25)
+    at Parser.parseMaybeAssign (/home/dritter/Projekte/mitosis/packages/core/node_modules/@babel/parser/lib/index.js:10725:20)
+    at /home/dritter/Projekte/mitosis/packages/core/node_modules/@babel/parser/lib/index.js:12274:39
+    at Parser.allowInAnd (/home/dritter/Projekte/mitosis/packages/core/node_modules/@babel/parser/lib/index.js:14341:16)
+    at Parser.parseMaybeAssignAllowIn (/home/dritter/Projekte/mitosis/packages/core/node_modules/@babel/parser/lib/index.js:12274:17)
+    at Parser.parseVar (/home/dritter/Projekte/mitosis/packages/core/node_modules/@babel/parser/lib/index.js:15369:91)
+    at Parser.parseVarStatement (/home/dritter/Projekte/mitosis/packages/core/node_modules/@babel/parser/lib/index.js:15171:10)
+    at Parser.parseVarStatement (/home/dritter/Projekte/mitosis/packages/core/node_modules/@babel/parser/lib/index.js:10318:31)
+    at Parser.parseStatementContent (/home/dritter/Projekte/mitosis/packages/core/node_modules/@babel/parser/lib/index.js:14713:21)
+    at Parser.parseStatementContent (/home/dritter/Projekte/mitosis/packages/core/node_modules/@babel/parser/lib/index.js:10359:18)
+    at Parser.parseStatement (/home/dritter/Projekte/mitosis/packages/core/node_modules/@babel/parser/lib/index.js:14638:17)
+    at Parser.parseBlockOrModuleBlockBody (/home/dritter/Projekte/mitosis/packages/core/node_modules/@babel/parser/lib/index.js:15281:25)
+    at Parser.parseBlockBody (/home/dritter/Projekte/mitosis/packages/core/node_modules/@babel/parser/lib/index.js:15272:10)
+    at Parser.parseProgram (/home/dritter/Projekte/mitosis/packages/core/node_modules/@babel/parser/lib/index.js:14556:10)
+    at Parser.parseTopLevel (/home/dritter/Projekte/mitosis/packages/core/node_modules/@babel/parser/lib/index.js:14543:25)
+    at Parser.parse (/home/dritter/Projekte/mitosis/packages/core/node_modules/@babel/parser/lib/index.js:16506:10)
+    at Parser.parse (/home/dritter/Projekte/mitosis/packages/core/node_modules/@babel/parser/lib/index.js:11149:18)
+    at parse (/home/dritter/Projekte/mitosis/packages/core/node_modules/@babel/parser/lib/index.js:16558:38)
+    at parser (/home/dritter/Projekte/mitosis/packages/core/node_modules/@babel/core/lib/parser/index.js:52:34)
+    at parser.next (<anonymous>)
+    at normalizeFile (/home/dritter/Projekte/mitosis/packages/core/node_modules/@babel/core/lib/transformation/normalize-file.js:82:38)
+    at normalizeFile.next (<anonymous>)
+    at run (/home/dritter/Projekte/mitosis/packages/core/node_modules/@babel/core/lib/transformation/index.js:29:50)
+    at run.next (<anonymous>)
+    at Function.transform (/home/dritter/Projekte/mitosis/packages/core/node_modules/@babel/core/lib/transform.js:25:41)
+    at transform.next (<anonymous>)
+    at evaluateSync (/home/dritter/Projekte/mitosis/packages/core/node_modules/gensync/index.js:251:28)
+    at Function.sync (/home/dritter/Projekte/mitosis/packages/core/node_modules/gensync/index.js:89:14)
+    at Proxy.transform (/home/dritter/Projekte/mitosis/packages/core/node_modules/@babel/core/lib/transform.js:34:54)
+    at babelTransform (/home/dritter/Projekte/mitosis/packages/core/src/helpers/babel-transform.ts:48:32)
+    at babelTransformCode (/home/dritter/Projekte/mitosis/packages/core/src/helpers/babel-transform.ts:61:67)
+    at /home/dritter/Projekte/mitosis/packages/core/src/helpers/babel-transform.ts:31:18
+    at Proxy.pipe (/home/dritter/Projekte/mitosis/packages/core/node_modules/fp-ts/lib/function.js:290:26)
+    at handleErrorOrExpression (/home/dritter/Projekte/mitosis/packages/core/src/helpers/babel-transform.ts:29:36)
+    at /home/dritter/Projekte/mitosis/packages/core/src/helpers/babel-transform.ts:99:18
+    at Proxy.pipe (/home/dritter/Projekte/mitosis/packages/core/node_modules/fp-ts/lib/function.js:292:23)
+    at babelTransformExpression (/home/dritter/Projekte/mitosis/packages/core/src/helpers/babel-transform.ts:86:32)
+    at Module.convertTypeScriptToJS (/home/dritter/Projekte/mitosis/packages/core/src/helpers/babel-transform.ts:109:41)
+    at emitStateMethods (/home/dritter/Projekte/mitosis/packages/core/src/generators/qwik/helpers/state.ts:49:40)
+    at Module.emitStateMethodsAndRewriteBindings (/home/dritter/Projekte/mitosis/packages/core/src/generators/qwik/helpers/state.ts:62:17)
+    at /home/dritter/Projekte/mitosis/packages/core/src/generators/qwik/component-generator.ts:105:42
+    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`] = `
@@ -9238,27 +9301,41 @@ export default MyComponent;
 `;
 
 exports[`qwik > svelte > Typescript Test > fatArrowFunctions 1`] = `
-"import { Fragment, component$, h } from \\"@builder.io/qwik\\";
-
-export const clickHandler1 = function clickHandler1(props, state, event) {
-  console.log(\\"do something 1\\");
-};
-export const clickHandler2 = function clickHandler2(props, state, event) {
+"Error: SyntaxError: ',' expected. (3:17)
+  1 | import{Fragment,component$,h}from\\"@builder.io/qwik\\";
+  2 |
+> 3 | export const ate.clickHandler1 = event => {\\\\n  console.log=function ate.clickHandler1 = event => {\\\\n  console.log(props,state,\\\\\\"do something 1\\\\\\");\\\\n};\\";export const clickHandler2=function clickHandler2(props,state,event) {
+    |                 ^
+  4 |   console.log(\\"do something 2\\");
+  5 | };export const MyComponent=component$((props:any)=>{const state: any = {};
+  6 |
+========================================================================
+import{Fragment,component$,h}from\\"@builder.io/qwik\\";
+
+export const ate.clickHandler1 = event => {\\\\n  console.log=function ate.clickHandler1 = event => {\\\\n  console.log(props,state,\\\\\\"do something 1\\\\\\");\\\\n};\\";export const clickHandler2=function clickHandler2(props,state,event) {
   console.log(\\"do something 2\\");
-};
-export const MyComponent = component$((props: any) => {
-  const state: any = {};
+};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>
-  );
-});
+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`] = `
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 e7390e9476..b644699f17 100644
--- a/packages/core/src/__tests__/__snapshots__/react-native.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/react-native.test.ts.snap
@@ -8000,7 +8000,7 @@ function MyComponent(props) {
 
   return (
     <View>
-      <View onClick={(a) => log(\\"hi\\")}>
+      <View onClick={() => log(\\"hi\\")}>
         <Text>Log</Text>
       </View>
       <View onClick={(event) => log(event)}>
@@ -8029,9 +8029,7 @@ import {
 } from \\"react-native\\";
 
 function MyComponent(props) {
-  function clickHandler1(event) {
-    console.log(\\"do something 1\\");
-  }
+  \\"const state.clickHandler1 = event => { console.log(\\\\\\"do something 1\\\\\\"); };\\";
 
   function clickHandler2(event) {
     console.log(\\"do something 2\\");
@@ -8568,7 +8566,7 @@ function MyComponent(props: any) {
 
   return (
     <View>
-      <View onClick={(a) => log(\\"hi\\")}>
+      <View onClick={() => log(\\"hi\\")}>
         <Text>Log</Text>
       </View>
       <View onClick={(event) => log(event)}>
@@ -8597,9 +8595,7 @@ import {
 } from \\"react-native\\";
 
 function MyComponent(props: any) {
-  function clickHandler1(event) {
-    console.log(\\"do something 1\\");
-  }
+  \\"const state.clickHandler1 = event => { console.log(\\\\\\"do something 1\\\\\\"); };\\";
 
   function clickHandler2(event) {
     console.log(\\"do something 2\\");
diff --git a/packages/core/src/__tests__/__snapshots__/react.test.ts.snap b/packages/core/src/__tests__/__snapshots__/react.test.ts.snap
index 28f098a653..069baeb384 100644
--- a/packages/core/src/__tests__/__snapshots__/react.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/react.test.ts.snap
@@ -6913,7 +6913,7 @@ function MyComponent(props) {
 
   return (
     <div>
-      <button onClick={(a) => log(\\"hi\\")}>Log</button>
+      <button onClick={() => log(\\"hi\\")}>Log</button>
       <button onClick={(event) => log(event)}>Log</button>
       <button onClick={(event) => log(event)}>Log</button>
     </div>
@@ -6928,9 +6928,7 @@ exports[`React > svelte > Javascript Test > fatArrowFunctions 1`] = `
 "import * as React from \\"react\\";
 
 function MyComponent(props) {
-  function clickHandler1(event) {
-    console.log(\\"do something 1\\");
-  }
+  \\"const state.clickHandler1 = event => { console.log(\\\\\\"do something 1\\\\\\"); };\\";
 
   function clickHandler2(event) {
     console.log(\\"do something 2\\");
@@ -7341,7 +7339,7 @@ function MyComponent(props: any) {
 
   return (
     <div>
-      <button onClick={(a) => log(\\"hi\\")}>Log</button>
+      <button onClick={() => log(\\"hi\\")}>Log</button>
       <button onClick={(event) => log(event)}>Log</button>
       <button onClick={(event) => log(event)}>Log</button>
     </div>
@@ -7356,9 +7354,7 @@ exports[`React > svelte > Typescript Test > fatArrowFunctions 1`] = `
 "import * as React from \\"react\\";
 
 function MyComponent(props: any) {
-  function clickHandler1(event) {
-    console.log(\\"do something 1\\");
-  }
+  \\"const state.clickHandler1 = event => { console.log(\\\\\\"do something 1\\\\\\"); };\\";
 
   function clickHandler2(event) {
     console.log(\\"do something 2\\");
diff --git a/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap b/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap
index 0699500bfe..a4cac33e42 100644
--- a/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap
@@ -6357,9 +6357,8 @@ function MyComponent(props) {
   const _context = { ...props[\\"_context\\"] };
 
   const state = {
-    clickHandler1: function clickHandler1(event) {
-      console.log(\\"do something 1\\");
-    },
+    clickHandler1:
+      'const state.clickHandler1 = event => { console.log(\\"do something 1\\"); };',
     clickHandler2: function clickHandler2(event) {
       console.log(\\"do something 2\\");
     },
@@ -6748,9 +6747,8 @@ function MyComponent(props: any) {
   const _context = { ...props[\\"_context\\"] };
 
   const state = {
-    clickHandler1: function clickHandler1(event) {
-      console.log(\\"do something 1\\");
-    },
+    clickHandler1:
+      'const state.clickHandler1 = event => { console.log(\\"do something 1\\"); };',
     clickHandler2: function clickHandler2(event) {
       console.log(\\"do something 2\\");
     },
diff --git a/packages/core/src/__tests__/__snapshots__/solid.test.ts.snap b/packages/core/src/__tests__/__snapshots__/solid.test.ts.snap
index c11e21d93d..9a8df4d208 100644
--- a/packages/core/src/__tests__/__snapshots__/solid.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/solid.test.ts.snap
@@ -13419,7 +13419,7 @@ function MyComponent(props) {
 
   return (
     <div>
-      <button onClick={(a) => log(\\"hi\\")}>Log</button>
+      <button onClick={() => log(\\"hi\\")}>Log</button>
       <button onClick={(event) => log(event)}>Log</button>
       <button onClick={(event) => log(event)}>Log</button>
     </div>
@@ -13443,7 +13443,7 @@ function MyComponent(props) {
   return (
     <>
       <div>
-        <button onClick={(a) => log(\\"hi\\")}>Log</button>
+        <button onClick={() => log(\\"hi\\")}>Log</button>
         <button onClick={(event) => log(event)}>Log</button>
         <button onClick={(event) => log(event)}>Log</button>
       </div>
@@ -13456,55 +13456,25 @@ export default MyComponent;
 `;
 
 exports[`Solid > svelte > Javascript Test > fatArrowFunctions 1`] = `
-"import { createSignal } from \\"solid-js\\";
-
-function MyComponent(props) {
-  function clickHandler1(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;
-"
+"Unterminated string literal. (15:40)
+  13 |
+  14 |
+> 15 | \\"const state.clickHandler1 = event => {
+     |                                        ^
+  16 |   console.log(\\\\\\"do something 1\\\\\\");
+  17 | };\\"
+  18 |"
 `;
 
 exports[`Solid > svelte > Javascript Test > fatArrowFunctions 2`] = `
-"import { createSignal } from \\"solid-js\\";
-
-import { css } from \\"solid-styled-components\\";
-
-function MyComponent(props) {
-  function clickHandler1(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;
-"
+"Unterminated string literal. (15:40)
+  13 |
+  14 |
+> 15 | \\"const state.clickHandler1 = event => {
+     |                                        ^
+  16 |   console.log(\\\\\\"do something 1\\\\\\");
+  17 | };\\"
+  18 |"
 `;
 
 exports[`Solid > svelte > Javascript Test > html 1`] = `
@@ -14272,7 +14242,7 @@ function MyComponent(props: any) {
 
   return (
     <div>
-      <button onClick={(a) => log(\\"hi\\")}>Log</button>
+      <button onClick={() => log(\\"hi\\")}>Log</button>
       <button onClick={(event) => log(event)}>Log</button>
       <button onClick={(event) => log(event)}>Log</button>
     </div>
@@ -14296,7 +14266,7 @@ function MyComponent(props: any) {
   return (
     <>
       <div>
-        <button onClick={(a) => log(\\"hi\\")}>Log</button>
+        <button onClick={() => log(\\"hi\\")}>Log</button>
         <button onClick={(event) => log(event)}>Log</button>
         <button onClick={(event) => log(event)}>Log</button>
       </div>
@@ -14309,55 +14279,25 @@ export default MyComponent;
 `;
 
 exports[`Solid > svelte > Typescript Test > fatArrowFunctions 1`] = `
-"import { createSignal } from \\"solid-js\\";
-
-function MyComponent(props: any) {
-  function clickHandler1(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;
-"
+"Unterminated string literal. (15:40)
+  13 |
+  14 |
+> 15 | \\"const state.clickHandler1 = event => {
+     |                                        ^
+  16 |   console.log(\\\\\\"do something 1\\\\\\");
+  17 | };\\"
+  18 |"
 `;
 
 exports[`Solid > svelte > Typescript Test > fatArrowFunctions 2`] = `
-"import { createSignal } from \\"solid-js\\";
-
-import { css } from \\"solid-styled-components\\";
-
-function MyComponent(props: any) {
-  function clickHandler1(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;
-"
+"Unterminated string literal. (15:40)
+  13 |
+  14 |
+> 15 | \\"const state.clickHandler1 = event => {
+     |                                        ^
+  16 |   console.log(\\\\\\"do something 1\\\\\\");
+  17 | };\\"
+  18 |"
 `;
 
 exports[`Solid > svelte > Typescript Test > html 1`] = `
diff --git a/packages/core/src/__tests__/__snapshots__/stencil.test.ts.snap b/packages/core/src/__tests__/__snapshots__/stencil.test.ts.snap
index 78e4caa277..b5a76f9a4c 100644
--- a/packages/core/src/__tests__/__snapshots__/stencil.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/stencil.test.ts.snap
@@ -5969,53 +5969,25 @@ export default class MyComponent {
 `;
 
 exports[`Stencil > svelte > Javascript Test > eventHandlers 1`] = `
-"import { Component, Prop, h, State, Fragment } from \\"@stencil/core\\";
-
-@Component({
-  tag: \\"my-component\\",
-})
-export default class MyComponent {
-  log = function log(msg = \\"hello\\") {
-    console.log(msg);
-  };
-
-  render() {
-    return (
-      <div>
-        <button onClick={(a) => this.log(\\"hi\\")}>Log</button>
-        <button onClick={(event) => this.log(event)}>Log</button>
-        <button onClick={(event) => this.log(event)}>Log</button>
-      </div>
-    );
-  }
-}
-"
+"'(' expected. (24:34)
+  22 |       return (
+  23 |
+> 24 |         <div ><button  onClick={ => this.log('hi')} >Log</button>
+     |                                  ^
+  25 | <button  onClick={event => this.log(event)} >Log</button>
+  26 | <button  onClick={event => this.log(event)} >Log</button></div>
+  27 |"
 `;
 
 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 = function 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>
-    );
-  }
-}
-"
+"Unterminated string literal. (12:64)
+  10 |
+  11 |
+> 12 |         clickHandler1 = \\"const state.clickHandler1 = event => {
+     |                                                                ^
+  13 |   console.log(\\\\\\"do something 1\\\\\\");
+  14 | };\\"
+  15 | clickHandler2 = function clickHandler2(event) {"
 `;
 
 exports[`Stencil > svelte > Javascript Test > html 1`] = `
@@ -6405,53 +6377,25 @@ export default class MyComponent {
 `;
 
 exports[`Stencil > svelte > Typescript Test > eventHandlers 1`] = `
-"import { Component, Prop, h, State, Fragment } from \\"@stencil/core\\";
-
-@Component({
-  tag: \\"my-component\\",
-})
-export default class MyComponent {
-  log = function log(msg = \\"hello\\") {
-    console.log(msg);
-  };
-
-  render() {
-    return (
-      <div>
-        <button onClick={(a) => this.log(\\"hi\\")}>Log</button>
-        <button onClick={(event) => this.log(event)}>Log</button>
-        <button onClick={(event) => this.log(event)}>Log</button>
-      </div>
-    );
-  }
-}
-"
+"'(' expected. (24:34)
+  22 |       return (
+  23 |
+> 24 |         <div ><button  onClick={ => this.log('hi')} >Log</button>
+     |                                  ^
+  25 | <button  onClick={event => this.log(event)} >Log</button>
+  26 | <button  onClick={event => this.log(event)} >Log</button></div>
+  27 |"
 `;
 
 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 = function 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>
-    );
-  }
-}
-"
+"Unterminated string literal. (12:64)
+  10 |
+  11 |
+> 12 |         clickHandler1 = \\"const state.clickHandler1 = event => {
+     |                                                                ^
+  13 |   console.log(\\\\\\"do something 1\\\\\\");
+  14 | };\\"
+  15 | clickHandler2 = function clickHandler2(event) {"
 `;
 
 exports[`Stencil > svelte > Typescript Test > html 1`] = `
diff --git a/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap b/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap
index 5463496bbf..eb77855707 100644
--- a/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap
@@ -5802,38 +5802,80 @@ exports[`Svelte > svelte > Javascript Test > each 1`] = `
 `;
 
 exports[`Svelte > svelte > Javascript Test > eventHandlers 1`] = `
-"<script>
-  function log(msg = \\"hello\\") {
-    console.log(msg);
-  }
-</script>
+"<script >
 
-<div>
-  <button
-    on:click={(a) => {
-      log(\\"hi\\");
-    }}>Log</button
-  ><button
-    on:click={(event) => {
-      log(event);
-    }}>Log</button
-  ><button
-    on:click={(event) => {
-      log(event);
-    }}>Log</button
-  >
-</div>"
+
+
+
+
+
+
+
+
+
+
+
+
+
+    function log(msg = 'hello') {
+console.log(msg);
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  </script>
+
+  <div ><button  on:click=\\"{ => {log('hi')}}\\" >Log</button><button  on:click=\\"{event => {log(event)}}\\" >Log</button><button  on:click=\\"{event => {log(event)}}\\" >Log</button></div>"
 `;
 
 exports[`Svelte > svelte > Javascript Test > fatArrowFunctions 1`] = `
 "<script>
-  function clickHandler1(event) {
-    console.log(\\"do something 1\\");
-  }
 
-  function clickHandler2(event) {
-    console.log(\\"do something 2\\");
-  }
+
+
+
+
+
+
+
+
+
+
+
+
+
+    \\"const state.clickHandler1 = event => {
+  console.log(\\\\\\"do something 1\\\\\\");
+};\\";
+
+function clickHandler2(event) {
+console.log(\\"do something 2\\");
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 </script>
 
 <button
@@ -6102,38 +6144,80 @@ exports[`Svelte > svelte > Typescript Test > each 1`] = `
 `;
 
 exports[`Svelte > svelte > Typescript Test > eventHandlers 1`] = `
-"<script lang=\\"ts\\">
-  function log(msg = \\"hello\\") {
-    console.log(msg);
-  }
-</script>
+"<script lang='ts'>
 
-<div>
-  <button
-    on:click={(a) => {
-      log(\\"hi\\");
-    }}>Log</button
-  ><button
-    on:click={(event) => {
-      log(event);
-    }}>Log</button
-  ><button
-    on:click={(event) => {
-      log(event);
-    }}>Log</button
-  >
-</div>"
+
+
+
+
+
+
+
+
+
+
+
+
+
+    function log(msg = 'hello') {
+console.log(msg);
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  </script>
+
+  <div ><button  on:click=\\"{ => {log('hi')}}\\" >Log</button><button  on:click=\\"{event => {log(event)}}\\" >Log</button><button  on:click=\\"{event => {log(event)}}\\" >Log</button></div>"
 `;
 
 exports[`Svelte > svelte > Typescript Test > fatArrowFunctions 1`] = `
 "<script lang=\\"ts\\">
-  function clickHandler1(event) {
-    console.log(\\"do something 1\\");
-  }
 
-  function clickHandler2(event) {
-    console.log(\\"do something 2\\");
-  }
+
+
+
+
+
+
+
+
+
+
+
+
+
+    \\"const state.clickHandler1 = event => {
+  console.log(\\\\\\"do something 1\\\\\\");
+};\\";
+
+function clickHandler2(event) {
+console.log(\\"do something 2\\");
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 </script>
 
 <button
diff --git a/packages/core/src/__tests__/__snapshots__/taro.test.ts.snap b/packages/core/src/__tests__/__snapshots__/taro.test.ts.snap
index ebab5aae65..15e2e2b22d 100644
--- a/packages/core/src/__tests__/__snapshots__/taro.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/taro.test.ts.snap
@@ -6851,7 +6851,7 @@ function MyComponent(props) {
 
   return (
     <View>
-      <Button onClick={(a) => log(\\"hi\\")}>Log</Button>
+      <Button onClick={() => log(\\"hi\\")}>Log</Button>
       <Button onClick={(event) => log(event)}>Log</Button>
       <Button onClick={(event) => log(event)}>Log</Button>
     </View>
@@ -6867,9 +6867,7 @@ exports[`Taro > svelte > Javascript Test > fatArrowFunctions 1`] = `
 import { Button, View, Text } from \\"@tarojs/components\\";
 
 function MyComponent(props) {
-  function clickHandler1(event) {
-    console.log(\\"do something 1\\");
-  }
+  \\"const state.clickHandler1 = event => { console.log(\\\\\\"do something 1\\\\\\"); };\\";
 
   function clickHandler2(event) {
     console.log(\\"do something 2\\");
@@ -7290,7 +7288,7 @@ function MyComponent(props: any) {
 
   return (
     <View>
-      <Button onClick={(a) => log(\\"hi\\")}>Log</Button>
+      <Button onClick={() => log(\\"hi\\")}>Log</Button>
       <Button onClick={(event) => log(event)}>Log</Button>
       <Button onClick={(event) => log(event)}>Log</Button>
     </View>
@@ -7306,9 +7304,7 @@ exports[`Taro > svelte > Typescript Test > fatArrowFunctions 1`] = `
 import { Button, View, Text } from \\"@tarojs/components\\";
 
 function MyComponent(props: any) {
-  function clickHandler1(event) {
-    console.log(\\"do something 1\\");
-  }
+  \\"const state.clickHandler1 = event => { console.log(\\\\\\"do something 1\\\\\\"); };\\";
 
   function clickHandler2(event) {
     console.log(\\"do something 2\\");
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 a99233676e..bab0d5f38d 100644
--- a/packages/core/src/__tests__/__snapshots__/vue-composition.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/vue-composition.test.ts.snap
@@ -6174,11 +6174,21 @@ exports[`Vue > svelte > Javascript Test > fatArrowFunctions 1`] = `
 </template>
 
 <script setup>
-function clickHandler1(event) {
-  console.log(\\"do something 1\\");
-}
+
+
+
+
+
+
+
+
+
+
+     \\"const state.clickHandler1 = event => {
+ console.log(\\\\\\"do something 1\\\\\\");
+};\\"
 function clickHandler2(event) {
-  console.log(\\"do something 2\\");
+console.log(\\"do something 2\\");
 }
 </script>"
 `;
@@ -6510,11 +6520,21 @@ exports[`Vue > svelte > Typescript Test > fatArrowFunctions 1`] = `
 </template>
 
 <script setup lang=\\"ts\\">
-function clickHandler1(event) {
-  console.log(\\"do something 1\\");
-}
+
+
+
+
+
+
+
+
+
+
+     \\"const state.clickHandler1 = event => {
+ console.log(\\\\\\"do something 1\\\\\\");
+};\\"
 function clickHandler2(event) {
-  console.log(\\"do something 2\\");
+console.log(\\"do something 2\\");
 }
 </script>"
 `;
diff --git a/packages/core/src/__tests__/__snapshots__/vue.test.ts.snap b/packages/core/src/__tests__/__snapshots__/vue.test.ts.snap
index a06ad33502..05fc88917e 100644
--- a/packages/core/src/__tests__/__snapshots__/vue.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/vue.test.ts.snap
@@ -7573,20 +7573,42 @@ exports[`Vue > svelte > Javascript Test > fatArrowFunctions 1`] = `
 </template>
 
 <script>
-import { defineComponent } from \\"vue\\";
+    import { defineComponent } from \\"vue\\"
 
-export default defineComponent({
-  name: \\"my-component\\",
 
-  methods: {
-    clickHandler1: function clickHandler1(event) {
-      console.log(\\"do something 1\\");
-    },
-    clickHandler2: function clickHandler2(event) {
-      console.log(\\"do something 2\\");
-    },
-  },
-});
+
+
+
+
+
+
+
+
+      export default defineComponent( {
+      name: 'my-component',
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+        methods: { clickHandler1 : \\"const state.clickHandler1 = event => {
+  console.log(\\\\\\"do something 1\\\\\\");
+};\\", clickHandler2 : function clickHandler2(event) {
+console.log(\\"do something 2\\");
+},},
+
+
+      }
+      )
 </script>"
 `;
 
@@ -8035,20 +8057,42 @@ exports[`Vue > svelte > Typescript Test > fatArrowFunctions 1`] = `
 </template>
 
 <script lang=\\"ts\\">
-import { defineComponent } from \\"vue\\";
+    import { defineComponent } from \\"vue\\"
 
-export default defineComponent({
-  name: \\"my-component\\",
 
-  methods: {
-    clickHandler1: function clickHandler1(event) {
-      console.log(\\"do something 1\\");
-    },
-    clickHandler2: function clickHandler2(event) {
-      console.log(\\"do something 2\\");
-    },
-  },
-});
+
+
+
+
+
+
+
+
+      export default defineComponent( {
+      name: 'my-component',
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+        methods: { clickHandler1 : \\"const state.clickHandler1 = event => {
+  console.log(\\\\\\"do something 1\\\\\\");
+};\\", clickHandler2 : function clickHandler2(event) {
+console.log(\\"do something 2\\");
+},},
+
+
+      }
+      )
 </script>"
 `;
 
diff --git a/packages/core/src/__tests__/__snapshots__/webcomponent.test.ts.snap b/packages/core/src/__tests__/__snapshots__/webcomponent.test.ts.snap
index 1ff7fcf2cc..88c50e9267 100644
--- a/packages/core/src/__tests__/__snapshots__/webcomponent.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/webcomponent.test.ts.snap
@@ -26880,7 +26880,7 @@ class MyComponent extends HTMLElement {
     this.pendingUpdate = false;
 
     // Event handler for 'click' event on button-my-component-1
-    this.onButtonMyComponent1Click = (a) => {
+    this.onButtonMyComponent1Click = () => {
       this.state.log(\\"hi\\");
     };
 
@@ -26998,9 +26998,8 @@ class MyComponent extends HTMLElement {
     const self = this;
 
     this.state = {
-      clickHandler1: function clickHandler1(event) {
-        console.log(\\"do something 1\\");
-      },
+      clickHandler1:
+        'const state.clickHandler1 = event => {\\\\n  console.log(\\"do something 1\\");\\\\n};',
       clickHandler2: function clickHandler2(event) {
         console.log(\\"do something 2\\");
       },
@@ -29239,7 +29238,7 @@ class MyComponent extends HTMLElement {
     this.pendingUpdate = false;
 
     // Event handler for 'click' event on button-my-component-1
-    this.onButtonMyComponent1Click = (a) => {
+    this.onButtonMyComponent1Click = () => {
       this.state.log(\\"hi\\");
     };
 
@@ -29357,9 +29356,8 @@ class MyComponent extends HTMLElement {
     const self = this;
 
     this.state = {
-      clickHandler1: function clickHandler1(event) {
-        console.log(\\"do something 1\\");
-      },
+      clickHandler1:
+        'const state.clickHandler1 = event => {\\\\n  console.log(\\"do something 1\\");\\\\n};',
       clickHandler2: function clickHandler2(event) {
         console.log(\\"do something 2\\");
       },

From 4cea3707dd8a866f65e700469f15cfcec2457037 Mon Sep 17 00:00:00 2001
From: Dominik Ritter <dominik.ritter@chefkoch.de>
Date: Wed, 31 May 2023 18:15:40 +0200
Subject: [PATCH 5/6] Treat ArrowFunctions as FunctionDeclarations

by passing the AssignmentExpression to handleFunctionDeclaration().
---
 packages/core/src/parsers/svelte/instance/index.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/core/src/parsers/svelte/instance/index.ts b/packages/core/src/parsers/svelte/instance/index.ts
index e3337a4aa0..678187836d 100644
--- a/packages/core/src/parsers/svelte/instance/index.ts
+++ b/packages/core/src/parsers/svelte/instance/index.ts
@@ -132,9 +132,9 @@ export function parseInstance(ast: Ast, json: SveltosisComponent) {
           handleExpressionStatement(json, node as ExpressionStatement, parent);
           break;
         case 'ArrowFunctionExpression':
-          const parentIndexModifier = 4
+          const parentIndexModifier :number = 3
             // TODO: May cause problems on VariableDeclarations like `const foo, bar = () => {}` or on destructured Variables..
-          parent.type === 'VariableDeclarator' && handleVariableDeclaration(json, nodeList[currentIndex - parentIndexModifier] as VariableDeclaration);
+          parent.type === 'VariableDeclarator' && handleFunctionDeclaration(json, nodeList[currentIndex - parentIndexModifier] as FunctionDeclaration);
           // Do nothing if this was an IIFE
           break;
         case 'FunctionDeclaration':

From d3058179175ca1c0a7a70cef92f1f47859b4e458 Mon Sep 17 00:00:00 2001
From: Dominik Ritter <dominik.ritter@chefkoch.de>
Date: Wed, 31 May 2023 18:23:28 +0200
Subject: [PATCH 6/6] Update Snapshots

---
 .../__snapshots__/alpine.test.ts.snap         |  10 +-
 .../__snapshots__/angular.import.test.ts.snap | 134 ++---
 .../__snapshots__/angular.mapper.test.ts.snap | 136 ++---
 .../__snapshots__/angular.test.ts.snap        | 268 +++------
 .../__tests__/__snapshots__/html.test.ts.snap | 236 ++++----
 .../__tests__/__snapshots__/lit.test.ts.snap  | 224 +++-----
 .../__snapshots__/marko.test.ts.snap          |  30 +-
 .../__snapshots__/parse-svelte.test.ts.snap   |   6 +-
 .../__snapshots__/preact.test.ts.snap         |  12 +-
 .../__tests__/__snapshots__/qwik.test.ts.snap | 115 ++--
 .../__snapshots__/react-native.test.ts.snap   |  12 +-
 .../__snapshots__/react.test.ts.snap          |  12 +-
 .../__tests__/__snapshots__/rsc.test.ts.snap  |  10 +-
 .../__snapshots__/solid.test.ts.snap          | 132 +++--
 .../__snapshots__/stencil.test.ts.snap        | 120 ++--
 .../__snapshots__/svelte.test.ts.snap         | 188 ++-----
 .../__tests__/__snapshots__/taro.test.ts.snap |  12 +-
 .../vue-composition.test.ts.snap              |  36 +-
 .../__tests__/__snapshots__/vue.test.ts.snap  |  92 +---
 .../__snapshots__/webcomponent.test.ts.snap   | 512 +++++++++++-------
 20 files changed, 1056 insertions(+), 1241 deletions(-)

diff --git a/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap b/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap
index 6c5a70e922..cd6b6c6471 100644
--- a/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap
@@ -5259,8 +5259,9 @@ exports[`Alpine.js > svelte > Javascript Test > fatArrowFunctions 1`] = `
 <script>
   document.addEventListener(\\"alpine:init\\", () => {
     Alpine.data(\\"myComponent\\", () => ({
-      clickHandler1:
-        'const this.clickHandler1 = event => {\\\\n  console.log(\\"do something 1\\");\\\\n};',
+      clickHandler1: (this.clickHandler1 = (event) => {
+        console.log(\\"do something 1\\");
+      }),
       clickHandler2: function clickHandler2(event) {
         console.log(\\"do something 2\\");
       },
@@ -5592,8 +5593,9 @@ exports[`Alpine.js > svelte > Typescript Test > fatArrowFunctions 1`] = `
 <script>
   document.addEventListener(\\"alpine:init\\", () => {
     Alpine.data(\\"myComponent\\", () => ({
-      clickHandler1:
-        'const this.clickHandler1 = event => {\\\\n  console.log(\\"do something 1\\");\\\\n};',
+      clickHandler1: (this.clickHandler1 = (event) => {
+        console.log(\\"do something 1\\");
+      }),
       clickHandler2: function clickHandler2(event) {
         console.log(\\"do something 2\\");
       },
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 e0f587ab32..01618e3884 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap
@@ -8803,62 +8803,33 @@ exports[`Angular with Preserve Imports and File Extensions > svelte > Javascript
 "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 {
-
-
-
-
-
-
-
-
+import { Component } from \\"@angular/core\\";
 
-      clickHandler1 = \\"const state.clickHandler1 = event => {
-  console.log(\\\\\\"do something 1\\\\\\");
-};\\"
-clickHandler2 = function clickHandler2(event) {
- console.log(\\"do something 2\\");
+@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 {}"
+export class MyComponentModule {}
+"
 `;
 
 exports[`Angular with Preserve Imports and File Extensions > svelte > Javascript Test > html 1`] = `
@@ -9394,62 +9365,33 @@ exports[`Angular with Preserve Imports and File Extensions > svelte > Typescript
 "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 {
-
-
-
-
-
-
-
-
+import { Component } from \\"@angular/core\\";
 
-      clickHandler1 = \\"const state.clickHandler1 = event => {
-  console.log(\\\\\\"do something 1\\\\\\");
-};\\"
-clickHandler2 = function clickHandler2(event) {
- console.log(\\"do something 2\\");
+@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 {}"
+export class MyComponentModule {}
+"
 `;
 
 exports[`Angular with Preserve Imports and File Extensions > svelte > Typescript Test > html 1`] = `
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 4dfbdc66fa..7e7c54bcc6 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.mapper.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.mapper.test.ts.snap
@@ -8997,62 +8997,34 @@ exports[`Angular with Import Mapper Tests > svelte > Javascript Test > fatArrowF
 "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 {
-
-
-
-
-
-
-
-
+import { Component } from \\"@angular/core\\";
 
-      clickHandler1 = \\"const state.clickHandler1 = event => {
-  console.log(\\\\\\"do something 1\\\\\\");
-};\\"
-clickHandler2 = function clickHandler2(event) {
- console.log(\\"do something 2\\");
+@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]
+  bootstrap: [SomeOtherComponent],
 })
-export class MyComponentModule {}"
+export class MyComponentModule {}
+"
 `;
 
 exports[`Angular with Import Mapper Tests > svelte > Javascript Test > html 1`] = `
@@ -9604,62 +9576,34 @@ exports[`Angular with Import Mapper Tests > svelte > Typescript Test > fatArrowF
 "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 {
-
-
-
-
-
-
-
-
+import { Component } from \\"@angular/core\\";
 
-      clickHandler1 = \\"const state.clickHandler1 = event => {
-  console.log(\\\\\\"do something 1\\\\\\");
-};\\"
-clickHandler2 = function clickHandler2(event) {
- console.log(\\"do something 2\\");
+@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]
+  bootstrap: [SomeOtherComponent],
 })
-export class MyComponentModule {}"
+export class MyComponentModule {}
+"
 `;
 
 exports[`Angular with Import Mapper Tests > svelte > Typescript Test > html 1`] = `
diff --git a/packages/core/src/__tests__/__snapshots__/angular.test.ts.snap b/packages/core/src/__tests__/__snapshots__/angular.test.ts.snap
index d53c17113c..5380058cc8 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.test.ts.snap
@@ -16218,113 +16218,59 @@ 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 {
-
-
-
-
-
-
-
-
+import { Component } from \\"@angular/core\\";
 
-      clickHandler1 = \\"const state.clickHandler1 = event => {
-  console.log(\\\\\\"do something 1\\\\\\");
-};\\"
-clickHandler2 = function clickHandler2(event) {
- console.log(\\"do something 2\\");
+@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 {}"
+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 {
-
-
-
-
-
-
-
-
+"import { Component } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
 
-      clickHandler1 = \\"const state.clickHandler1 = event => {
-  console.log(\\\\\\"do something 1\\\\\\");
-};\\"
-clickHandler2 = function clickHandler2(event) {
- console.log(\\"do something 2\\");
+@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`] = `
@@ -17275,113 +17221,59 @@ 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 {
-
-
-
-
-
-
-
-
+import { Component } from \\"@angular/core\\";
 
-      clickHandler1 = \\"const state.clickHandler1 = event => {
-  console.log(\\\\\\"do something 1\\\\\\");
-};\\"
-clickHandler2 = function clickHandler2(event) {
- console.log(\\"do something 2\\");
+@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 {}"
+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 {
-
-
-
-
-
-
-
-
+"import { Component } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
 
-      clickHandler1 = \\"const state.clickHandler1 = event => {
-  console.log(\\\\\\"do something 1\\\\\\");
-};\\"
-clickHandler2 = function clickHandler2(event) {
- console.log(\\"do something 2\\");
+@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`] = `
diff --git a/packages/core/src/__tests__/__snapshots__/html.test.ts.snap b/packages/core/src/__tests__/__snapshots__/html.test.ts.snap
index 8268e40bab..6eae2f4aee 100644
--- a/packages/core/src/__tests__/__snapshots__/html.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/html.test.ts.snap
@@ -12489,7 +12489,7 @@ exports[`Html > svelte > Javascript Test > eventHandlers 1`] = `
     }
 
     // Event handler for 'click' event on button-1
-    function onButton1Click() {
+    function onButton1Click(a) {
       state.log(\\"hi\\");
     }
 
@@ -12514,62 +12514,86 @@ 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:
-        'const state.clickHandler1 = event => {\\\\n  console.log(\\"do something 1\\");\\\\n};',
-      clickHandler2: function clickHandler2(event) {
-        console.log(\\"do something 2\\");
-      },
-    };
+        (() => {
+          const state = { clickHandler1 : state.clickHandler1 = event => {
+    console.log(\\"do something 1\\");
+  };
 
-    let context = null;
-    let nodesToDestroy = [];
-    let pendingUpdate = false;
+  update(), clickHandler2 : function clickHandler2(event) {
+    console.log(\\"do something 2\\");
+  },};
 
-    function destroyAnyNodes() {
-      // destroy current view template refs before rendering again
-      nodesToDestroy.forEach((el) => el.remove());
-      nodesToDestroy = [];
-    }
+          let context = null;
+          let nodesToDestroy = [];
+          let pendingUpdate = false;
 
-    // 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);
-      });
+          function destroyAnyNodes() {
+            // destroy current view template refs before rendering again
+            nodesToDestroy.forEach(el => el.remove());
+            nodesToDestroy = [];
+          }
 
-      document.querySelectorAll(\\"[data-el='button-2']\\").forEach((el) => {
-        el.removeEventListener(\\"click\\", onButton2Click);
-        el.addEventListener(\\"click\\", onButton2Click);
-      });
 
-      destroyAnyNodes();
+          // 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;
 
-      pendingUpdate = false;
-    }
+                document.querySelectorAll(\\"[data-el='button-1']\\").forEach((el) => {
 
-    // Event handler for 'click' event on button-1
-    function onButton1Click(event) {
-      state.clickHandler1(event);
-    }
+              ;el.removeEventListener('click', onButton1Click);
+              ;el.addEventListener('click', onButton1Click);
 
-    // Event handler for 'click' event on button-2
-    function onButton2Click(event) {
-      state.clickHandler2(event);
-    }
+                });
 
-    // Update with initial state on first load
-    update();
-  })();
+
+
+                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>
 "
 `;
@@ -13583,7 +13607,7 @@ exports[`Html > svelte > Typescript Test > eventHandlers 1`] = `
     }
 
     // Event handler for 'click' event on button-1
-    function onButton1Click() {
+    function onButton1Click(a) {
       state.log(\\"hi\\");
     }
 
@@ -13608,62 +13632,86 @@ 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:
-        'const state.clickHandler1 = event => {\\\\n  console.log(\\"do something 1\\");\\\\n};',
-      clickHandler2: function clickHandler2(event) {
-        console.log(\\"do something 2\\");
-      },
-    };
+        (() => {
+          const state = { clickHandler1 : state.clickHandler1 = event => {
+    console.log(\\"do something 1\\");
+  };
 
-    let context = null;
-    let nodesToDestroy = [];
-    let pendingUpdate = false;
+  update(), clickHandler2 : function clickHandler2(event) {
+    console.log(\\"do something 2\\");
+  },};
 
-    function destroyAnyNodes() {
-      // destroy current view template refs before rendering again
-      nodesToDestroy.forEach((el) => el.remove());
-      nodesToDestroy = [];
-    }
+          let context = null;
+          let nodesToDestroy = [];
+          let pendingUpdate = false;
 
-    // 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);
-      });
+          function destroyAnyNodes() {
+            // destroy current view template refs before rendering again
+            nodesToDestroy.forEach(el => el.remove());
+            nodesToDestroy = [];
+          }
 
-      document.querySelectorAll(\\"[data-el='button-2']\\").forEach((el) => {
-        el.removeEventListener(\\"click\\", onButton2Click);
-        el.addEventListener(\\"click\\", onButton2Click);
-      });
 
-      destroyAnyNodes();
+          // 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;
 
-      pendingUpdate = false;
-    }
+                document.querySelectorAll(\\"[data-el='button-1']\\").forEach((el) => {
 
-    // Event handler for 'click' event on button-1
-    function onButton1Click(event) {
-      state.clickHandler1(event);
-    }
+              ;el.removeEventListener('click', onButton1Click);
+              ;el.addEventListener('click', onButton1Click);
 
-    // Event handler for 'click' event on button-2
-    function onButton2Click(event) {
-      state.clickHandler2(event);
-    }
+                });
 
-    // Update with initial state on first load
-    update();
-  })();
+
+
+                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>
 "
 `;
diff --git a/packages/core/src/__tests__/__snapshots__/lit.test.ts.snap b/packages/core/src/__tests__/__snapshots__/lit.test.ts.snap
index 37c436e4c8..19ebee9213 100644
--- a/packages/core/src/__tests__/__snapshots__/lit.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/lit.test.ts.snap
@@ -8531,91 +8531,59 @@ export default class MyComponent extends LitElement {
 `;
 
 exports[`Lit > svelte > Javascript Test > eventHandlers 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;
-      }
-
-
-
-
-
-
+"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;
+  }
 
+  log = function log(msg = \\"hello\\") {
+    console.log(msg);
+  };
 
+  render() {
+    return html\`
 
-       log = function log(msg = 'hello') {
-console.log(msg);
+          <div ><button  @click=\${(a) => this.log(\\"hi\\")} >Log</button>
+        <button  @click=\${(event) => this.log(event)} >Log</button>
+        <button  @click=\${(event) => this.log(event)} >Log</button></div>
+        \`;
+  }
 }
-
-
-
-
-
-
-    render() {
-      return html\`
-
-          <div ><button  @click=\${ => this.log('hi')} >Log</button>
-        <button  @click=\${event => this.log(event)} >Log</button>
-        <button  @click=\${event => this.log(event)} >Log</button></div>
-        \`
-    }
-  }"
+"
 `;
 
 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;
-       }
-
-
-
-
-
-
+"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\`
 
-        clickHandler1 = \\"const state.clickHandler1 = event => {
-  console.log(\\\\\\"do something 1\\\\\\");
-};\\"
-clickHandler2 = function clickHandler2(event) {
- console.log(\\"do something 2\\");
+          <my-fragment ><button  @click=\${(event) =>
+            this.clickHandler1(event)} >Button 1</button>
+        <button  @click=\${(event) =>
+          this.clickHandler2(event)} >Button 2</button></my-fragment>
+        \`;
+  }
 }
-
-
-
-
-
-
-     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`] = `
@@ -9088,91 +9056,59 @@ export default class MyComponent extends LitElement {
 `;
 
 exports[`Lit > svelte > Typescript Test > eventHandlers 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;
-      }
-
-
-
-
-
-
+"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;
+  }
 
+  log = function log(msg = \\"hello\\") {
+    console.log(msg);
+  };
 
+  render() {
+    return html\`
 
-       log = function log(msg = 'hello') {
-console.log(msg);
+          <div ><button  @click=\${(a) => this.log(\\"hi\\")} >Log</button>
+        <button  @click=\${(event) => this.log(event)} >Log</button>
+        <button  @click=\${(event) => this.log(event)} >Log</button></div>
+        \`;
+  }
 }
-
-
-
-
-
-
-    render() {
-      return html\`
-
-          <div ><button  @click=\${ => this.log('hi')} >Log</button>
-        <button  @click=\${event => this.log(event)} >Log</button>
-        <button  @click=\${event => this.log(event)} >Log</button></div>
-        \`
-    }
-  }"
+"
 `;
 
 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;
-       }
-
-
-
-
-
-
+"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\`
 
-        clickHandler1 = \\"const state.clickHandler1 = event => {
-  console.log(\\\\\\"do something 1\\\\\\");
-};\\"
-clickHandler2 = function clickHandler2(event) {
- console.log(\\"do something 2\\");
+          <my-fragment ><button  @click=\${(event) =>
+            this.clickHandler1(event)} >Button 1</button>
+        <button  @click=\${(event) =>
+          this.clickHandler2(event)} >Button 2</button></my-fragment>
+        \`;
+  }
 }
-
-
-
-
-
-
-     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`] = `
diff --git a/packages/core/src/__tests__/__snapshots__/marko.test.ts.snap b/packages/core/src/__tests__/__snapshots__/marko.test.ts.snap
index 6e02a43e98..16bb2ea2e5 100644
--- a/packages/core/src/__tests__/__snapshots__/marko.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/marko.test.ts.snap
@@ -4741,7 +4741,7 @@ exports[`Marko > svelte > Javascript Test > eventHandlers 1`] = `
 }
 
 <div>
-  <button on-click( => component.log('hi'))>Log</button>
+  <button on-click(a => component.log('hi'))>Log</button>
   <button on-click(event => component.log(event))>Log</button>
   <button on-click(event => component.log(event))>Log</button>
 </div>"
@@ -4749,15 +4749,14 @@ exports[`Marko > svelte > Javascript Test > eventHandlers 1`] = `
 
 exports[`Marko > svelte > Javascript Test > fatArrowFunctions 1`] = `
 "class {
-        clickHandler1 = \\"const state.clickHandler1 = event => {
-  console.log(\\\\\\"do something 1\\\\\\");
-};\\"
-clickHandler2 = function clickHandler2(event) {
- console.log(\\"do something 2\\");
+  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>"
 `;
@@ -5034,7 +5033,7 @@ exports[`Marko > svelte > Typescript Test > eventHandlers 1`] = `
 }
 
 <div>
-  <button on-click( => component.log('hi'))>Log</button>
+  <button on-click(a => component.log('hi'))>Log</button>
   <button on-click(event => component.log(event))>Log</button>
   <button on-click(event => component.log(event))>Log</button>
 </div>"
@@ -5042,15 +5041,14 @@ exports[`Marko > svelte > Typescript Test > eventHandlers 1`] = `
 
 exports[`Marko > svelte > Typescript Test > fatArrowFunctions 1`] = `
 "class {
-        clickHandler1 = \\"const state.clickHandler1 = event => {
-  console.log(\\\\\\"do something 1\\\\\\");
-};\\"
-clickHandler2 = function clickHandler2(event) {
- console.log(\\"do something 2\\");
+  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>"
 `;
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 56308c1ae2..067930dec1 100644
--- a/packages/core/src/__tests__/__snapshots__/parse-svelte.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/parse-svelte.test.ts.snap
@@ -597,7 +597,7 @@ exports[`Parse JSX > eventHandlers 1`] = `
           "bindings": {
             "onClick": {
               "arguments": [
-                [],
+                "a",
               ],
               "code": "state.log('hi')",
               "type": "single",
@@ -789,7 +789,9 @@ exports[`Parse JSX > fatArrowFunctions 1`] = `
   "refs": {},
   "state": {
     "clickHandler1": {
-      "code": "\\"const state.clickHandler1 = event => {\\\\n  console.log(\\\\\\"do something 1\\\\\\");\\\\n};\\"",
+      "code": "state.clickHandler1 = event => {
+  console.log(\\"do something 1\\");
+}",
       "type": "function",
     },
     "clickHandler2": {
diff --git a/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap b/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap
index a39d11dec3..2f17a1fe36 100644
--- a/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap
@@ -6899,7 +6899,7 @@ function MyComponent(props) {
 
   return (
     <div>
-      <button onClick={() => log(\\"hi\\")}>Log</button>
+      <button onClick={(a) => log(\\"hi\\")}>Log</button>
       <button onClick={(event) => log(event)}>Log</button>
       <button onClick={(event) => log(event)}>Log</button>
     </div>
@@ -6915,7 +6915,9 @@ exports[`Preact > svelte > Javascript Test > fatArrowFunctions 1`] = `
 import { h, Fragment } from \\"preact\\";
 
 function MyComponent(props) {
-  \\"const state.clickHandler1 = event => { console.log(\\\\\\"do something 1\\\\\\"); };\\";
+  setClickHandler1((event) => {
+    console.log(\\"do something 1\\");
+  });
 
   function clickHandler2(event) {
     console.log(\\"do something 2\\");
@@ -7342,7 +7344,7 @@ function MyComponent(props: any) {
 
   return (
     <div>
-      <button onClick={() => log(\\"hi\\")}>Log</button>
+      <button onClick={(a) => log(\\"hi\\")}>Log</button>
       <button onClick={(event) => log(event)}>Log</button>
       <button onClick={(event) => log(event)}>Log</button>
     </div>
@@ -7358,7 +7360,9 @@ exports[`Preact > svelte > Typescript Test > fatArrowFunctions 1`] = `
 import { h, Fragment } from \\"preact\\";
 
 function MyComponent(props: any) {
-  \\"const state.clickHandler1 = event => { console.log(\\\\\\"do something 1\\\\\\"); };\\";
+  setClickHandler1((event) => {
+    console.log(\\"do something 1\\");
+  });
 
   function clickHandler2(event) {
     console.log(\\"do something 2\\");
diff --git a/packages/core/src/__tests__/__snapshots__/qwik.test.ts.snap b/packages/core/src/__tests__/__snapshots__/qwik.test.ts.snap
index b47cff73b2..5f64aec651 100644
--- a/packages/core/src/__tests__/__snapshots__/qwik.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/qwik.test.ts.snap
@@ -8812,77 +8812,31 @@ export default MyComponent;
 `;
 
 exports[`qwik > svelte > Javascript Test > fatArrowFunctions 1`] = `
-"SyntaxError: unknown: Expecting Unicode escape sequence \\\\uXXXX. (1:39)
-
-> 1 | let _ = ate.clickHandler1 = event => {\\\\n  console.log(props,state,\\\\\\"do something 1\\\\\\");\\\\n};\\"
-    |                                        ^
-    at instantiate (/home/dritter/Projekte/mitosis/packages/core/node_modules/@babel/parser/lib/index.js:72:32)
-    at constructor (/home/dritter/Projekte/mitosis/packages/core/node_modules/@babel/parser/lib/index.js:358:12)
-    at Parser.raise (/home/dritter/Projekte/mitosis/packages/core/node_modules/@babel/parser/lib/index.js:3341:19)
-    at Parser.readWord1 (/home/dritter/Projekte/mitosis/packages/core/node_modules/@babel/parser/lib/index.js:3281:16)
-    at Parser.readWord (/home/dritter/Projekte/mitosis/packages/core/node_modules/@babel/parser/lib/index.js:3311:23)
-    at Parser.getTokenFromCode (/home/dritter/Projekte/mitosis/packages/core/node_modules/@babel/parser/lib/index.js:2675:14)
-    at Parser.getTokenFromCode (/home/dritter/Projekte/mitosis/packages/core/node_modules/@babel/parser/lib/index.js:8077:18)
-    at Parser.getTokenFromCode (/home/dritter/Projekte/mitosis/packages/core/node_modules/@babel/parser/lib/index.js:10982:18)
-    at Parser.nextToken (/home/dritter/Projekte/mitosis/packages/core/node_modules/@babel/parser/lib/index.js:2025:10)
-    at Parser.next (/home/dritter/Projekte/mitosis/packages/core/node_modules/@babel/parser/lib/index.js:1929:10)
-    at Parser.eat (/home/dritter/Projekte/mitosis/packages/core/node_modules/@babel/parser/lib/index.js:1934:12)
-    at Parser.expect (/home/dritter/Projekte/mitosis/packages/core/node_modules/@babel/parser/lib/index.js:4008:10)
-    at Parser.parseBlock (/home/dritter/Projekte/mitosis/packages/core/node_modules/@babel/parser/lib/index.js:15250:10)
-    at Parser.parseFunctionBody (/home/dritter/Projekte/mitosis/packages/core/node_modules/@babel/parser/lib/index.js:13946:24)
-    at Parser.parseArrowExpression (/home/dritter/Projekte/mitosis/packages/core/node_modules/@babel/parser/lib/index.js:13917:10)
-    at Parser.parseExprAtom (/home/dritter/Projekte/mitosis/packages/core/node_modules/@babel/parser/lib/index.js:13113:25)
-    at Parser.parseExprAtom (/home/dritter/Projekte/mitosis/packages/core/node_modules/@babel/parser/lib/index.js:8041:20)
-    at Parser.parseExprSubscripts (/home/dritter/Projekte/mitosis/packages/core/node_modules/@babel/parser/lib/index.js:12643:23)
-    at Parser.parseUpdate (/home/dritter/Projekte/mitosis/packages/core/node_modules/@babel/parser/lib/index.js:12622:21)
-    at Parser.parseMaybeUnary (/home/dritter/Projekte/mitosis/packages/core/node_modules/@babel/parser/lib/index.js:12593:23)
-    at Parser.parseMaybeUnary (/home/dritter/Projekte/mitosis/packages/core/node_modules/@babel/parser/lib/index.js:10795:20)
-    at Parser.parseMaybeUnaryOrPrivate (/home/dritter/Projekte/mitosis/packages/core/node_modules/@babel/parser/lib/index.js:12387:61)
-    at Parser.parseExprOps (/home/dritter/Projekte/mitosis/packages/core/node_modules/@babel/parser/lib/index.js:12394:23)
-    at Parser.parseMaybeConditional (/home/dritter/Projekte/mitosis/packages/core/node_modules/@babel/parser/lib/index.js:12364:23)
-    at Parser.parseMaybeAssign (/home/dritter/Projekte/mitosis/packages/core/node_modules/@babel/parser/lib/index.js:12316:21)
-    at Parser.parseMaybeAssign (/home/dritter/Projekte/mitosis/packages/core/node_modules/@babel/parser/lib/index.js:10725:20)
-    at Parser.parseMaybeAssign (/home/dritter/Projekte/mitosis/packages/core/node_modules/@babel/parser/lib/index.js:12348:25)
-    at Parser.parseMaybeAssign (/home/dritter/Projekte/mitosis/packages/core/node_modules/@babel/parser/lib/index.js:10725:20)
-    at /home/dritter/Projekte/mitosis/packages/core/node_modules/@babel/parser/lib/index.js:12274:39
-    at Parser.allowInAnd (/home/dritter/Projekte/mitosis/packages/core/node_modules/@babel/parser/lib/index.js:14341:16)
-    at Parser.parseMaybeAssignAllowIn (/home/dritter/Projekte/mitosis/packages/core/node_modules/@babel/parser/lib/index.js:12274:17)
-    at Parser.parseVar (/home/dritter/Projekte/mitosis/packages/core/node_modules/@babel/parser/lib/index.js:15369:91)
-    at Parser.parseVarStatement (/home/dritter/Projekte/mitosis/packages/core/node_modules/@babel/parser/lib/index.js:15171:10)
-    at Parser.parseVarStatement (/home/dritter/Projekte/mitosis/packages/core/node_modules/@babel/parser/lib/index.js:10318:31)
-    at Parser.parseStatementContent (/home/dritter/Projekte/mitosis/packages/core/node_modules/@babel/parser/lib/index.js:14713:21)
-    at Parser.parseStatementContent (/home/dritter/Projekte/mitosis/packages/core/node_modules/@babel/parser/lib/index.js:10359:18)
-    at Parser.parseStatement (/home/dritter/Projekte/mitosis/packages/core/node_modules/@babel/parser/lib/index.js:14638:17)
-    at Parser.parseBlockOrModuleBlockBody (/home/dritter/Projekte/mitosis/packages/core/node_modules/@babel/parser/lib/index.js:15281:25)
-    at Parser.parseBlockBody (/home/dritter/Projekte/mitosis/packages/core/node_modules/@babel/parser/lib/index.js:15272:10)
-    at Parser.parseProgram (/home/dritter/Projekte/mitosis/packages/core/node_modules/@babel/parser/lib/index.js:14556:10)
-    at Parser.parseTopLevel (/home/dritter/Projekte/mitosis/packages/core/node_modules/@babel/parser/lib/index.js:14543:25)
-    at Parser.parse (/home/dritter/Projekte/mitosis/packages/core/node_modules/@babel/parser/lib/index.js:16506:10)
-    at Parser.parse (/home/dritter/Projekte/mitosis/packages/core/node_modules/@babel/parser/lib/index.js:11149:18)
-    at parse (/home/dritter/Projekte/mitosis/packages/core/node_modules/@babel/parser/lib/index.js:16558:38)
-    at parser (/home/dritter/Projekte/mitosis/packages/core/node_modules/@babel/core/lib/parser/index.js:52:34)
-    at parser.next (<anonymous>)
-    at normalizeFile (/home/dritter/Projekte/mitosis/packages/core/node_modules/@babel/core/lib/transformation/normalize-file.js:82:38)
-    at normalizeFile.next (<anonymous>)
-    at run (/home/dritter/Projekte/mitosis/packages/core/node_modules/@babel/core/lib/transformation/index.js:29:50)
-    at run.next (<anonymous>)
-    at Function.transform (/home/dritter/Projekte/mitosis/packages/core/node_modules/@babel/core/lib/transform.js:25:41)
-    at transform.next (<anonymous>)
-    at evaluateSync (/home/dritter/Projekte/mitosis/packages/core/node_modules/gensync/index.js:251:28)
-    at Function.sync (/home/dritter/Projekte/mitosis/packages/core/node_modules/gensync/index.js:89:14)
-    at Proxy.transform (/home/dritter/Projekte/mitosis/packages/core/node_modules/@babel/core/lib/transform.js:34:54)
-    at babelTransform (/home/dritter/Projekte/mitosis/packages/core/src/helpers/babel-transform.ts:48:32)
-    at babelTransformCode (/home/dritter/Projekte/mitosis/packages/core/src/helpers/babel-transform.ts:61:67)
-    at /home/dritter/Projekte/mitosis/packages/core/src/helpers/babel-transform.ts:31:18
-    at Proxy.pipe (/home/dritter/Projekte/mitosis/packages/core/node_modules/fp-ts/lib/function.js:290:26)
-    at handleErrorOrExpression (/home/dritter/Projekte/mitosis/packages/core/src/helpers/babel-transform.ts:29:36)
-    at /home/dritter/Projekte/mitosis/packages/core/src/helpers/babel-transform.ts:99:18
-    at Proxy.pipe (/home/dritter/Projekte/mitosis/packages/core/node_modules/fp-ts/lib/function.js:292:23)
-    at babelTransformExpression (/home/dritter/Projekte/mitosis/packages/core/src/helpers/babel-transform.ts:86:32)
-    at Module.convertTypeScriptToJS (/home/dritter/Projekte/mitosis/packages/core/src/helpers/babel-transform.ts:109:41)
-    at emitStateMethods (/home/dritter/Projekte/mitosis/packages/core/src/generators/qwik/helpers/state.ts:49:40)
-    at Module.emitStateMethodsAndRewriteBindings (/home/dritter/Projekte/mitosis/packages/core/src/generators/qwik/helpers/state.ts:62:17)
-    at /home/dritter/Projekte/mitosis/packages/core/src/generators/qwik/component-generator.ts:105:42
+"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)
@@ -9301,18 +9255,21 @@ export default MyComponent;
 `;
 
 exports[`qwik > svelte > Typescript Test > fatArrowFunctions 1`] = `
-"Error: SyntaxError: ',' expected. (3:17)
-  1 | import{Fragment,component$,h}from\\"@builder.io/qwik\\";
+"Error: SyntaxError: '(' expected. (4:35)
   2 |
-> 3 | export const ate.clickHandler1 = event => {\\\\n  console.log=function ate.clickHandler1 = event => {\\\\n  console.log(props,state,\\\\\\"do something 1\\\\\\");\\\\n};\\";export const clickHandler2=function clickHandler2(props,state,event) {
-    |                 ^
-  4 |   console.log(\\"do something 2\\");
-  5 | };export const MyComponent=component$((props:any)=>{const state: any = {};
-  6 |
+  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 ate.clickHandler1 = event => {\\\\n  console.log=function ate.clickHandler1 = event => {\\\\n  console.log(props,state,\\\\\\"do something 1\\\\\\");\\\\n};\\";export const clickHandler2=function clickHandler2(props,state,event) {
+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 = {};
 
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 b644699f17..960ef0dbcb 100644
--- a/packages/core/src/__tests__/__snapshots__/react-native.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/react-native.test.ts.snap
@@ -8000,7 +8000,7 @@ function MyComponent(props) {
 
   return (
     <View>
-      <View onClick={() => log(\\"hi\\")}>
+      <View onClick={(a) => log(\\"hi\\")}>
         <Text>Log</Text>
       </View>
       <View onClick={(event) => log(event)}>
@@ -8029,7 +8029,9 @@ import {
 } from \\"react-native\\";
 
 function MyComponent(props) {
-  \\"const state.clickHandler1 = event => { console.log(\\\\\\"do something 1\\\\\\"); };\\";
+  setClickHandler1((event) => {
+    console.log(\\"do something 1\\");
+  });
 
   function clickHandler2(event) {
     console.log(\\"do something 2\\");
@@ -8566,7 +8568,7 @@ function MyComponent(props: any) {
 
   return (
     <View>
-      <View onClick={() => log(\\"hi\\")}>
+      <View onClick={(a) => log(\\"hi\\")}>
         <Text>Log</Text>
       </View>
       <View onClick={(event) => log(event)}>
@@ -8595,7 +8597,9 @@ import {
 } from \\"react-native\\";
 
 function MyComponent(props: any) {
-  \\"const state.clickHandler1 = event => { console.log(\\\\\\"do something 1\\\\\\"); };\\";
+  setClickHandler1((event) => {
+    console.log(\\"do something 1\\");
+  });
 
   function clickHandler2(event) {
     console.log(\\"do something 2\\");
diff --git a/packages/core/src/__tests__/__snapshots__/react.test.ts.snap b/packages/core/src/__tests__/__snapshots__/react.test.ts.snap
index 069baeb384..a69a79e9bd 100644
--- a/packages/core/src/__tests__/__snapshots__/react.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/react.test.ts.snap
@@ -6913,7 +6913,7 @@ function MyComponent(props) {
 
   return (
     <div>
-      <button onClick={() => log(\\"hi\\")}>Log</button>
+      <button onClick={(a) => log(\\"hi\\")}>Log</button>
       <button onClick={(event) => log(event)}>Log</button>
       <button onClick={(event) => log(event)}>Log</button>
     </div>
@@ -6928,7 +6928,9 @@ exports[`React > svelte > Javascript Test > fatArrowFunctions 1`] = `
 "import * as React from \\"react\\";
 
 function MyComponent(props) {
-  \\"const state.clickHandler1 = event => { console.log(\\\\\\"do something 1\\\\\\"); };\\";
+  setClickHandler1((event) => {
+    console.log(\\"do something 1\\");
+  });
 
   function clickHandler2(event) {
     console.log(\\"do something 2\\");
@@ -7339,7 +7341,7 @@ function MyComponent(props: any) {
 
   return (
     <div>
-      <button onClick={() => log(\\"hi\\")}>Log</button>
+      <button onClick={(a) => log(\\"hi\\")}>Log</button>
       <button onClick={(event) => log(event)}>Log</button>
       <button onClick={(event) => log(event)}>Log</button>
     </div>
@@ -7354,7 +7356,9 @@ exports[`React > svelte > Typescript Test > fatArrowFunctions 1`] = `
 "import * as React from \\"react\\";
 
 function MyComponent(props: any) {
-  \\"const state.clickHandler1 = event => { console.log(\\\\\\"do something 1\\\\\\"); };\\";
+  setClickHandler1((event) => {
+    console.log(\\"do something 1\\");
+  });
 
   function clickHandler2(event) {
     console.log(\\"do something 2\\");
diff --git a/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap b/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap
index a4cac33e42..8cc9491b8a 100644
--- a/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap
@@ -6357,8 +6357,9 @@ function MyComponent(props) {
   const _context = { ...props[\\"_context\\"] };
 
   const state = {
-    clickHandler1:
-      'const state.clickHandler1 = event => { console.log(\\"do something 1\\"); };',
+    clickHandler1: (state.clickHandler1 = (event) => {
+      console.log(\\"do something 1\\");
+    }),
     clickHandler2: function clickHandler2(event) {
       console.log(\\"do something 2\\");
     },
@@ -6747,8 +6748,9 @@ function MyComponent(props: any) {
   const _context = { ...props[\\"_context\\"] };
 
   const state = {
-    clickHandler1:
-      'const state.clickHandler1 = event => { console.log(\\"do something 1\\"); };',
+    clickHandler1: (state.clickHandler1 = (event) => {
+      console.log(\\"do something 1\\");
+    }),
     clickHandler2: function clickHandler2(event) {
       console.log(\\"do something 2\\");
     },
diff --git a/packages/core/src/__tests__/__snapshots__/solid.test.ts.snap b/packages/core/src/__tests__/__snapshots__/solid.test.ts.snap
index 9a8df4d208..6e615fd2e1 100644
--- a/packages/core/src/__tests__/__snapshots__/solid.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/solid.test.ts.snap
@@ -13419,7 +13419,7 @@ function MyComponent(props) {
 
   return (
     <div>
-      <button onClick={() => log(\\"hi\\")}>Log</button>
+      <button onClick={(a) => log(\\"hi\\")}>Log</button>
       <button onClick={(event) => log(event)}>Log</button>
       <button onClick={(event) => log(event)}>Log</button>
     </div>
@@ -13443,7 +13443,7 @@ function MyComponent(props) {
   return (
     <>
       <div>
-        <button onClick={() => log(\\"hi\\")}>Log</button>
+        <button onClick={(a) => log(\\"hi\\")}>Log</button>
         <button onClick={(event) => log(event)}>Log</button>
         <button onClick={(event) => log(event)}>Log</button>
       </div>
@@ -13456,25 +13456,55 @@ export default MyComponent;
 `;
 
 exports[`Solid > svelte > Javascript Test > fatArrowFunctions 1`] = `
-"Unterminated string literal. (15:40)
-  13 |
-  14 |
-> 15 | \\"const state.clickHandler1 = event => {
-     |                                        ^
-  16 |   console.log(\\\\\\"do something 1\\\\\\");
-  17 | };\\"
-  18 |"
+"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`] = `
-"Unterminated string literal. (15:40)
-  13 |
-  14 |
-> 15 | \\"const state.clickHandler1 = event => {
-     |                                        ^
-  16 |   console.log(\\\\\\"do something 1\\\\\\");
-  17 | };\\"
-  18 |"
+"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`] = `
@@ -14242,7 +14272,7 @@ function MyComponent(props: any) {
 
   return (
     <div>
-      <button onClick={() => log(\\"hi\\")}>Log</button>
+      <button onClick={(a) => log(\\"hi\\")}>Log</button>
       <button onClick={(event) => log(event)}>Log</button>
       <button onClick={(event) => log(event)}>Log</button>
     </div>
@@ -14266,7 +14296,7 @@ function MyComponent(props: any) {
   return (
     <>
       <div>
-        <button onClick={() => log(\\"hi\\")}>Log</button>
+        <button onClick={(a) => log(\\"hi\\")}>Log</button>
         <button onClick={(event) => log(event)}>Log</button>
         <button onClick={(event) => log(event)}>Log</button>
       </div>
@@ -14279,25 +14309,55 @@ export default MyComponent;
 `;
 
 exports[`Solid > svelte > Typescript Test > fatArrowFunctions 1`] = `
-"Unterminated string literal. (15:40)
-  13 |
-  14 |
-> 15 | \\"const state.clickHandler1 = event => {
-     |                                        ^
-  16 |   console.log(\\\\\\"do something 1\\\\\\");
-  17 | };\\"
-  18 |"
+"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`] = `
-"Unterminated string literal. (15:40)
-  13 |
-  14 |
-> 15 | \\"const state.clickHandler1 = event => {
-     |                                        ^
-  16 |   console.log(\\\\\\"do something 1\\\\\\");
-  17 | };\\"
-  18 |"
+"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`] = `
diff --git a/packages/core/src/__tests__/__snapshots__/stencil.test.ts.snap b/packages/core/src/__tests__/__snapshots__/stencil.test.ts.snap
index b5a76f9a4c..e69a84e0ad 100644
--- a/packages/core/src/__tests__/__snapshots__/stencil.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/stencil.test.ts.snap
@@ -5969,25 +5969,53 @@ export default class MyComponent {
 `;
 
 exports[`Stencil > svelte > Javascript Test > eventHandlers 1`] = `
-"'(' expected. (24:34)
-  22 |       return (
-  23 |
-> 24 |         <div ><button  onClick={ => this.log('hi')} >Log</button>
-     |                                  ^
-  25 | <button  onClick={event => this.log(event)} >Log</button>
-  26 | <button  onClick={event => this.log(event)} >Log</button></div>
-  27 |"
+"import { Component, Prop, h, State, Fragment } from \\"@stencil/core\\";
+
+@Component({
+  tag: \\"my-component\\",
+})
+export default class MyComponent {
+  log = function log(msg = \\"hello\\") {
+    console.log(msg);
+  };
+
+  render() {
+    return (
+      <div>
+        <button onClick={(a) => this.log(\\"hi\\")}>Log</button>
+        <button onClick={(event) => this.log(event)}>Log</button>
+        <button onClick={(event) => this.log(event)}>Log</button>
+      </div>
+    );
+  }
+}
+"
 `;
 
 exports[`Stencil > svelte > Javascript Test > fatArrowFunctions 1`] = `
-"Unterminated string literal. (12:64)
-  10 |
-  11 |
-> 12 |         clickHandler1 = \\"const state.clickHandler1 = event => {
-     |                                                                ^
-  13 |   console.log(\\\\\\"do something 1\\\\\\");
-  14 | };\\"
-  15 | clickHandler2 = function clickHandler2(event) {"
+"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`] = `
@@ -6377,25 +6405,53 @@ export default class MyComponent {
 `;
 
 exports[`Stencil > svelte > Typescript Test > eventHandlers 1`] = `
-"'(' expected. (24:34)
-  22 |       return (
-  23 |
-> 24 |         <div ><button  onClick={ => this.log('hi')} >Log</button>
-     |                                  ^
-  25 | <button  onClick={event => this.log(event)} >Log</button>
-  26 | <button  onClick={event => this.log(event)} >Log</button></div>
-  27 |"
+"import { Component, Prop, h, State, Fragment } from \\"@stencil/core\\";
+
+@Component({
+  tag: \\"my-component\\",
+})
+export default class MyComponent {
+  log = function log(msg = \\"hello\\") {
+    console.log(msg);
+  };
+
+  render() {
+    return (
+      <div>
+        <button onClick={(a) => this.log(\\"hi\\")}>Log</button>
+        <button onClick={(event) => this.log(event)}>Log</button>
+        <button onClick={(event) => this.log(event)}>Log</button>
+      </div>
+    );
+  }
+}
+"
 `;
 
 exports[`Stencil > svelte > Typescript Test > fatArrowFunctions 1`] = `
-"Unterminated string literal. (12:64)
-  10 |
-  11 |
-> 12 |         clickHandler1 = \\"const state.clickHandler1 = event => {
-     |                                                                ^
-  13 |   console.log(\\\\\\"do something 1\\\\\\");
-  14 | };\\"
-  15 | clickHandler2 = function clickHandler2(event) {"
+"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`] = `
diff --git a/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap b/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap
index eb77855707..82913ac265 100644
--- a/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap
@@ -5802,80 +5802,38 @@ exports[`Svelte > svelte > Javascript Test > each 1`] = `
 `;
 
 exports[`Svelte > svelte > Javascript Test > eventHandlers 1`] = `
-"<script >
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-    function log(msg = 'hello') {
-console.log(msg);
-}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-  </script>
+"<script>
+  function log(msg = \\"hello\\") {
+    console.log(msg);
+  }
+</script>
 
-  <div ><button  on:click=\\"{ => {log('hi')}}\\" >Log</button><button  on:click=\\"{event => {log(event)}}\\" >Log</button><button  on:click=\\"{event => {log(event)}}\\" >Log</button></div>"
+<div>
+  <button
+    on:click={(a) => {
+      log(\\"hi\\");
+    }}>Log</button
+  ><button
+    on:click={(event) => {
+      log(event);
+    }}>Log</button
+  ><button
+    on:click={(event) => {
+      log(event);
+    }}>Log</button
+  >
+</div>"
 `;
 
 exports[`Svelte > svelte > Javascript Test > fatArrowFunctions 1`] = `
 "<script>
+  clickHandler1 = (event) => {
+    console.log(\\"do something 1\\");
+  };
 
-
-
-
-
-
-
-
-
-
-
-
-
-
-    \\"const state.clickHandler1 = event => {
-  console.log(\\\\\\"do something 1\\\\\\");
-};\\";
-
-function clickHandler2(event) {
-console.log(\\"do something 2\\");
-}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+  function clickHandler2(event) {
+    console.log(\\"do something 2\\");
+  }
 </script>
 
 <button
@@ -6144,80 +6102,38 @@ exports[`Svelte > svelte > Typescript Test > each 1`] = `
 `;
 
 exports[`Svelte > svelte > Typescript Test > eventHandlers 1`] = `
-"<script lang='ts'>
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-    function log(msg = 'hello') {
-console.log(msg);
-}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-  </script>
+"<script lang=\\"ts\\">
+  function log(msg = \\"hello\\") {
+    console.log(msg);
+  }
+</script>
 
-  <div ><button  on:click=\\"{ => {log('hi')}}\\" >Log</button><button  on:click=\\"{event => {log(event)}}\\" >Log</button><button  on:click=\\"{event => {log(event)}}\\" >Log</button></div>"
+<div>
+  <button
+    on:click={(a) => {
+      log(\\"hi\\");
+    }}>Log</button
+  ><button
+    on:click={(event) => {
+      log(event);
+    }}>Log</button
+  ><button
+    on:click={(event) => {
+      log(event);
+    }}>Log</button
+  >
+</div>"
 `;
 
 exports[`Svelte > svelte > Typescript Test > fatArrowFunctions 1`] = `
 "<script lang=\\"ts\\">
+  clickHandler1 = (event) => {
+    console.log(\\"do something 1\\");
+  };
 
-
-
-
-
-
-
-
-
-
-
-
-
-
-    \\"const state.clickHandler1 = event => {
-  console.log(\\\\\\"do something 1\\\\\\");
-};\\";
-
-function clickHandler2(event) {
-console.log(\\"do something 2\\");
-}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+  function clickHandler2(event) {
+    console.log(\\"do something 2\\");
+  }
 </script>
 
 <button
diff --git a/packages/core/src/__tests__/__snapshots__/taro.test.ts.snap b/packages/core/src/__tests__/__snapshots__/taro.test.ts.snap
index 15e2e2b22d..b8d437013b 100644
--- a/packages/core/src/__tests__/__snapshots__/taro.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/taro.test.ts.snap
@@ -6851,7 +6851,7 @@ function MyComponent(props) {
 
   return (
     <View>
-      <Button onClick={() => log(\\"hi\\")}>Log</Button>
+      <Button onClick={(a) => log(\\"hi\\")}>Log</Button>
       <Button onClick={(event) => log(event)}>Log</Button>
       <Button onClick={(event) => log(event)}>Log</Button>
     </View>
@@ -6867,7 +6867,9 @@ exports[`Taro > svelte > Javascript Test > fatArrowFunctions 1`] = `
 import { Button, View, Text } from \\"@tarojs/components\\";
 
 function MyComponent(props) {
-  \\"const state.clickHandler1 = event => { console.log(\\\\\\"do something 1\\\\\\"); };\\";
+  setClickHandler1((event) => {
+    console.log(\\"do something 1\\");
+  });
 
   function clickHandler2(event) {
     console.log(\\"do something 2\\");
@@ -7288,7 +7290,7 @@ function MyComponent(props: any) {
 
   return (
     <View>
-      <Button onClick={() => log(\\"hi\\")}>Log</Button>
+      <Button onClick={(a) => log(\\"hi\\")}>Log</Button>
       <Button onClick={(event) => log(event)}>Log</Button>
       <Button onClick={(event) => log(event)}>Log</Button>
     </View>
@@ -7304,7 +7306,9 @@ exports[`Taro > svelte > Typescript Test > fatArrowFunctions 1`] = `
 import { Button, View, Text } from \\"@tarojs/components\\";
 
 function MyComponent(props: any) {
-  \\"const state.clickHandler1 = event => { console.log(\\\\\\"do something 1\\\\\\"); };\\";
+  setClickHandler1((event) => {
+    console.log(\\"do something 1\\");
+  });
 
   function clickHandler2(event) {
     console.log(\\"do something 2\\");
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 bab0d5f38d..4d46bc4cbe 100644
--- a/packages/core/src/__tests__/__snapshots__/vue-composition.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/vue-composition.test.ts.snap
@@ -6174,21 +6174,11 @@ exports[`Vue > svelte > Javascript Test > fatArrowFunctions 1`] = `
 </template>
 
 <script setup>
-
-
-
-
-
-
-
-
-
-
-     \\"const state.clickHandler1 = event => {
- console.log(\\\\\\"do something 1\\\\\\");
-};\\"
+clickHandler1 = (event) => {
+  console.log(\\"do something 1\\");
+};
 function clickHandler2(event) {
-console.log(\\"do something 2\\");
+  console.log(\\"do something 2\\");
 }
 </script>"
 `;
@@ -6520,21 +6510,11 @@ exports[`Vue > svelte > Typescript Test > fatArrowFunctions 1`] = `
 </template>
 
 <script setup lang=\\"ts\\">
-
-
-
-
-
-
-
-
-
-
-     \\"const state.clickHandler1 = event => {
- console.log(\\\\\\"do something 1\\\\\\");
-};\\"
+clickHandler1 = (event) => {
+  console.log(\\"do something 1\\");
+};
 function clickHandler2(event) {
-console.log(\\"do something 2\\");
+  console.log(\\"do something 2\\");
 }
 </script>"
 `;
diff --git a/packages/core/src/__tests__/__snapshots__/vue.test.ts.snap b/packages/core/src/__tests__/__snapshots__/vue.test.ts.snap
index 05fc88917e..89a82cf1b0 100644
--- a/packages/core/src/__tests__/__snapshots__/vue.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/vue.test.ts.snap
@@ -7573,42 +7573,20 @@ exports[`Vue > svelte > Javascript Test > fatArrowFunctions 1`] = `
 </template>
 
 <script>
-    import { defineComponent } from \\"vue\\"
-
-
-
-
-
-
-
-
-
-
-      export default defineComponent( {
-      name: 'my-component',
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-        methods: { clickHandler1 : \\"const state.clickHandler1 = event => {
-  console.log(\\\\\\"do something 1\\\\\\");
-};\\", clickHandler2 : function clickHandler2(event) {
-console.log(\\"do something 2\\");
-},},
+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>"
 `;
 
@@ -8057,42 +8035,20 @@ exports[`Vue > svelte > Typescript Test > fatArrowFunctions 1`] = `
 </template>
 
 <script lang=\\"ts\\">
-    import { defineComponent } from \\"vue\\"
-
-
-
-
-
-
-
-
-
-
-      export default defineComponent( {
-      name: 'my-component',
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-        methods: { clickHandler1 : \\"const state.clickHandler1 = event => {
-  console.log(\\\\\\"do something 1\\\\\\");
-};\\", clickHandler2 : function clickHandler2(event) {
-console.log(\\"do something 2\\");
-},},
+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>"
 `;
 
diff --git a/packages/core/src/__tests__/__snapshots__/webcomponent.test.ts.snap b/packages/core/src/__tests__/__snapshots__/webcomponent.test.ts.snap
index 88c50e9267..18da35527e 100644
--- a/packages/core/src/__tests__/__snapshots__/webcomponent.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/webcomponent.test.ts.snap
@@ -26880,7 +26880,7 @@ class MyComponent extends HTMLElement {
     this.pendingUpdate = false;
 
     // Event handler for 'click' event on button-my-component-1
-    this.onButtonMyComponent1Click = () => {
+    this.onButtonMyComponent1Click = (a) => {
       this.state.log(\\"hi\\");
     };
 
@@ -26982,122 +26982,176 @@ 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;
-  }
+"
+      
+      
+    
+    
+    
+  
+      /**
+       * 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\\");
+};
 
-  constructor() {
-    super();
-    const self = this;
+self.update(), clickHandler2 : function clickHandler2(event) {
+  console.log(\\"do something 2\\");
+},};
+          if (!this.props) {
+            this.props = {};
+          }
+          
 
-    this.state = {
-      clickHandler1:
-        'const state.clickHandler1 = event => {\\\\n  console.log(\\"do something 1\\");\\\\n};',
-      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;
+          // 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);
-    };
+          
+          // 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 = [];
-  }
+          if (undefined) {
+            this.attachShadow({ mode: 'open' })
+          }
+        }
 
-  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() {}
+        destroyAnyNodes() {
+          // destroy current view template refs before rendering again
+          this.nodesToDestroy.forEach(el => el.remove());
+          this.nodesToDestroy = [];
+        }
 
-  onUpdate() {}
+        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();
+              
+        }
+        
 
-  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();
-  }
+        onMount() {
+          
+        }
 
-  updateBindings() {
-    this._root
-      .querySelectorAll(\\"[data-el='button-my-component-1']\\")
-      .forEach((el) => {
-        el.removeEventListener(\\"click\\", this.onButtonMyComponent1Click);
-        el.addEventListener(\\"click\\", this.onButtonMyComponent1Click);
-      });
+        onUpdate() {
+          
+        }
 
-    this._root
-      .querySelectorAll(\\"[data-el='button-my-component-2']\\")
-      .forEach((el) => {
-        el.removeEventListener(\\"click\\", this.onButtonMyComponent2Click);
-        el.addEventListener(\\"click\\", this.onButtonMyComponent2Click);
-      });
-  }
+        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);
+        }
+        
+        
 
-  // 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);
-"
+      customElements.define('my-component', MyComponent);
+    "
 `;
 
 exports[`webcomponent > svelte > Javascript Test > html 1`] = `
@@ -29238,7 +29292,7 @@ class MyComponent extends HTMLElement {
     this.pendingUpdate = false;
 
     // Event handler for 'click' event on button-my-component-1
-    this.onButtonMyComponent1Click = () => {
+    this.onButtonMyComponent1Click = (a) => {
       this.state.log(\\"hi\\");
     };
 
@@ -29340,122 +29394,176 @@ 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;
-  }
+"
+      
+      
+    
+    
+    
+  
+      /**
+       * 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\\");
+};
 
-  constructor() {
-    super();
-    const self = this;
+self.update(), clickHandler2 : function clickHandler2(event) {
+  console.log(\\"do something 2\\");
+},};
+          if (!this.props) {
+            this.props = {};
+          }
+          
 
-    this.state = {
-      clickHandler1:
-        'const state.clickHandler1 = event => {\\\\n  console.log(\\"do something 1\\");\\\\n};',
-      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;
+          // 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);
-    };
+          
+          // 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 = [];
-  }
+          if (undefined) {
+            this.attachShadow({ mode: 'open' })
+          }
+        }
 
-  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() {}
+        destroyAnyNodes() {
+          // destroy current view template refs before rendering again
+          this.nodesToDestroy.forEach(el => el.remove());
+          this.nodesToDestroy = [];
+        }
 
-  onUpdate() {}
+        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();
+              
+        }
+        
 
-  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();
-  }
+        onMount() {
+          
+        }
 
-  updateBindings() {
-    this._root
-      .querySelectorAll(\\"[data-el='button-my-component-1']\\")
-      .forEach((el) => {
-        el.removeEventListener(\\"click\\", this.onButtonMyComponent1Click);
-        el.addEventListener(\\"click\\", this.onButtonMyComponent1Click);
-      });
+        onUpdate() {
+          
+        }
 
-    this._root
-      .querySelectorAll(\\"[data-el='button-my-component-2']\\")
-      .forEach((el) => {
-        el.removeEventListener(\\"click\\", this.onButtonMyComponent2Click);
-        el.addEventListener(\\"click\\", this.onButtonMyComponent2Click);
-      });
-  }
+        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);
+        }
+        
+        
 
-  // 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);
-"
+      customElements.define('my-component', MyComponent);
+    "
 `;
 
 exports[`webcomponent > svelte > Typescript Test > html 1`] = `