From 5e2cf3cf1886683cd4f1f41b2c9e26ba542ce0c1 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Mon, 28 Oct 2024 19:04:11 -0400
Subject: [PATCH] fix: async functions in store are preserved (#1612)

* test: add failing test

* preserve async status

* add fix

* fix path

* better fix

* snapshots

* changeset

* snapshots

* workarounds do not apply for async fns

* add comments

* add another test case

* account for object methods too

* add comment

* remove log

* update snapshots

* style
---
 .changeset/great-phones-exist.md              |   5 +
 .../__snapshots__/alpine.test.ts.snap         |  40 ++++
 .../__snapshots__/angular.import.test.ts.snap |  80 +++++++
 .../__snapshots__/angular.mapper.test.ts.snap |  82 ++++++++
 .../__snapshots__/angular.state.test.ts.snap  |  80 +++++++
 .../__snapshots__/angular.styles.test.ts.snap |  66 ++++++
 .../__snapshots__/angular.test.ts.snap        | 146 +++++++++++++
 .../__tests__/__snapshots__/html.test.ts.snap |  10 +
 .../__snapshots__/liquid.test.ts.snap         |  10 +
 .../__tests__/__snapshots__/lit.test.ts.snap  |  62 ++++++
 .../__snapshots__/marko.test.ts.snap          |  32 +++
 .../__snapshots__/mitosis.test.ts.snap        | 130 ++++++++++++
 .../__snapshots__/parse-jsx.test.ts.snap      | 104 ++++++++++
 .../__snapshots__/preact.test.ts.snap         |  48 +++++
 .../__tests__/__snapshots__/qwik.test.ts.snap |  44 ++++
 .../__snapshots__/react-native.test.ts.snap   |  72 +++++++
 .../react-state-builder.test.ts.snap          |  46 ++++
 .../react-state-mobx.test.ts.snap             |  50 +++++
 .../react-state-solid.test.ts.snap            |  48 +++++
 .../react-state-valtio.test.ts.snap           |  48 +++++
 .../react-state-variables.test.ts.snap        |  42 ++++
 .../__snapshots__/react.test.ts.snap          |  46 ++++
 .../__tests__/__snapshots__/rsc.test.ts.snap  |  42 ++++
 .../__snapshots__/solid.test.ts.snap          | 108 ++++++++++
 .../__snapshots__/stencil.test.ts.snap        |  48 +++++
 .../__snapshots__/svelte.test.ts.snap         |  36 ++++
 .../__tests__/__snapshots__/taro.test.ts.snap |  48 +++++
 .../vue-composition.test.ts.snap              |  36 ++++
 .../__tests__/__snapshots__/vue.test.ts.snap  |  52 +++++
 .../__snapshots__/webcomponent.test.ts.snap   | 196 ++++++++++++++++++
 .../data/store-async-function.raw.tsx         |  17 ++
 packages/core/src/__tests__/test-generator.ts |   2 +
 .../core/src/generators/qwik/helpers/state.ts |  21 +-
 .../core/src/generators/react/generator.ts    |   3 +-
 packages/core/src/parsers/jsx/state.ts        |  45 ++++
 35 files changed, 1935 insertions(+), 10 deletions(-)
 create mode 100644 .changeset/great-phones-exist.md
 create mode 100644 packages/core/src/__tests__/data/store-async-function.raw.tsx

diff --git a/.changeset/great-phones-exist.md b/.changeset/great-phones-exist.md
new file mode 100644
index 0000000000..39f826e2df
--- /dev/null
+++ b/.changeset/great-phones-exist.md
@@ -0,0 +1,5 @@
+---
+'@builder.io/mitosis': patch
+---
+
+respect async with anonymous arrow function in state
diff --git a/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap b/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap
index 6789407d19..2f6f8d96c9 100644
--- a/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap
@@ -2629,6 +2629,26 @@ exports[`Alpine.js > jsx > Javascript Test > spreadProps 1`] = `
 "
 `;
 
+exports[`Alpine.js > jsx > Javascript Test > store-async-function 1`] = `
+"<div x-data=\\"stringLiteralStore()\\"></div>
+<script>
+  document.addEventListener(\\"alpine:init\\", () => {
+    Alpine.data(\\"stringLiteralStore\\", () => ({
+      arrowFunction: async function arrowFunction() {
+        return Promise.resolve();
+      },
+      namedFunction: async function namedFunction() {
+        return Promise.resolve();
+      },
+      fetchUsers: async function fetchUsers() {
+        return Promise.resolve();
+      },
+    }));
+  });
+</script>
+"
+`;
+
 exports[`Alpine.js > jsx > Javascript Test > string-literal-store 1`] = `
 "<div x-data=\\"stringLiteralStore()\\"><span x-html=\\"foo\\"></span></div>
 <script>
@@ -5517,6 +5537,26 @@ exports[`Alpine.js > jsx > Typescript Test > spreadProps 1`] = `
 "
 `;
 
+exports[`Alpine.js > jsx > Typescript Test > store-async-function 1`] = `
+"<div x-data=\\"stringLiteralStore()\\"></div>
+<script>
+  document.addEventListener(\\"alpine:init\\", () => {
+    Alpine.data(\\"stringLiteralStore\\", () => ({
+      arrowFunction: async function arrowFunction() {
+        return Promise.resolve();
+      },
+      namedFunction: async function namedFunction() {
+        return Promise.resolve();
+      },
+      fetchUsers: async function fetchUsers() {
+        return Promise.resolve();
+      },
+    }));
+  });
+</script>
+"
+`;
+
 exports[`Alpine.js > jsx > Typescript Test > string-literal-store 1`] = `
 "<div x-data=\\"stringLiteralStore()\\"><span x-html=\\"foo\\"></span></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 c97b3d96b9..624b7b1eb2 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap
@@ -6324,6 +6324,46 @@ export class MyComponentModule {}
 "
 `;
 
+exports[`Angular with Preserve Imports and File Extensions > jsx > Javascript Test > store-async-function 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"string-literal-store\\",
+  template: \`
+    <div></div>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class StringLiteralStore {
+  arrowFunction = async function arrowFunction() {
+    return Promise.resolve();
+  };
+  namedFunction = async function namedFunction() {
+    return Promise.resolve();
+  };
+  fetchUsers = async function fetchUsers() {
+    return Promise.resolve();
+  };
+}
+
+@NgModule({
+  declarations: [StringLiteralStore],
+  imports: [CommonModule],
+  exports: [StringLiteralStore],
+})
+export class StringLiteralStoreModule {}
+"
+`;
+
 exports[`Angular with Preserve Imports and File Extensions > jsx > Javascript Test > string-literal-store 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -13814,6 +13854,46 @@ export class MyComponentModule {}
 "
 `;
 
+exports[`Angular with Preserve Imports and File Extensions > jsx > Typescript Test > store-async-function 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"string-literal-store\\",
+  template: \`
+    <div></div>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class StringLiteralStore {
+  arrowFunction = async function arrowFunction() {
+    return Promise.resolve();
+  };
+  namedFunction = async function namedFunction() {
+    return Promise.resolve();
+  };
+  fetchUsers = async function fetchUsers() {
+    return Promise.resolve();
+  };
+}
+
+@NgModule({
+  declarations: [StringLiteralStore],
+  imports: [CommonModule],
+  exports: [StringLiteralStore],
+})
+export class StringLiteralStoreModule {}
+"
+`;
+
 exports[`Angular with Preserve Imports and File Extensions > jsx > Typescript Test > string-literal-store 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 c7af5e684d..cedeccfb8b 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.mapper.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.mapper.test.ts.snap
@@ -6425,6 +6425,47 @@ export class MyComponentModule {}
 "
 `;
 
+exports[`Angular with Import Mapper Tests > jsx > Javascript Test > store-async-function 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"string-literal-store\\",
+  template: \`
+    <div></div>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class StringLiteralStore {
+  arrowFunction = async function arrowFunction() {
+    return Promise.resolve();
+  };
+  namedFunction = async function namedFunction() {
+    return Promise.resolve();
+  };
+  fetchUsers = async function fetchUsers() {
+    return Promise.resolve();
+  };
+}
+
+@NgModule({
+  declarations: [StringLiteralStore],
+  imports: [CommonModule],
+  exports: [StringLiteralStore],
+  bootstrap: [SomeOtherComponent],
+})
+export class StringLiteralStoreModule {}
+"
+`;
+
 exports[`Angular with Import Mapper Tests > jsx > Javascript Test > string-literal-store 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -14034,6 +14075,47 @@ export class MyComponentModule {}
 "
 `;
 
+exports[`Angular with Import Mapper Tests > jsx > Typescript Test > store-async-function 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"string-literal-store\\",
+  template: \`
+    <div></div>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class StringLiteralStore {
+  arrowFunction = async function arrowFunction() {
+    return Promise.resolve();
+  };
+  namedFunction = async function namedFunction() {
+    return Promise.resolve();
+  };
+  fetchUsers = async function fetchUsers() {
+    return Promise.resolve();
+  };
+}
+
+@NgModule({
+  declarations: [StringLiteralStore],
+  imports: [CommonModule],
+  exports: [StringLiteralStore],
+  bootstrap: [SomeOtherComponent],
+})
+export class StringLiteralStoreModule {}
+"
+`;
+
 exports[`Angular with Import Mapper Tests > jsx > Typescript Test > string-literal-store 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
diff --git a/packages/core/src/__tests__/__snapshots__/angular.state.test.ts.snap b/packages/core/src/__tests__/__snapshots__/angular.state.test.ts.snap
index 31b9b5ae13..212d33d7f7 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.state.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.state.test.ts.snap
@@ -6510,6 +6510,46 @@ export class MyComponentModule {}
 "
 `;
 
+exports[`Angular with manually creating and handling class properties as bindings (more stable) > jsx > Javascript Test > store-async-function 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"string-literal-store\\",
+  template: \`
+    <div></div>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class StringLiteralStore {
+  arrowFunction = async function arrowFunction() {
+    return Promise.resolve();
+  };
+  namedFunction = async function namedFunction() {
+    return Promise.resolve();
+  };
+  fetchUsers = async function fetchUsers() {
+    return Promise.resolve();
+  };
+}
+
+@NgModule({
+  declarations: [StringLiteralStore],
+  imports: [CommonModule],
+  exports: [StringLiteralStore],
+})
+export class StringLiteralStoreModule {}
+"
+`;
+
 exports[`Angular with manually creating and handling class properties as bindings (more stable) > jsx > Javascript Test > string-literal-store 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -14255,6 +14295,46 @@ export class MyComponentModule {}
 "
 `;
 
+exports[`Angular with manually creating and handling class properties as bindings (more stable) > jsx > Typescript Test > store-async-function 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"string-literal-store\\",
+  template: \`
+    <div></div>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class StringLiteralStore {
+  arrowFunction = async function arrowFunction() {
+    return Promise.resolve();
+  };
+  namedFunction = async function namedFunction() {
+    return Promise.resolve();
+  };
+  fetchUsers = async function fetchUsers() {
+    return Promise.resolve();
+  };
+}
+
+@NgModule({
+  declarations: [StringLiteralStore],
+  imports: [CommonModule],
+  exports: [StringLiteralStore],
+})
+export class StringLiteralStoreModule {}
+"
+`;
+
 exports[`Angular with manually creating and handling class properties as bindings (more stable) > jsx > Typescript Test > string-literal-store 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
diff --git a/packages/core/src/__tests__/__snapshots__/angular.styles.test.ts.snap b/packages/core/src/__tests__/__snapshots__/angular.styles.test.ts.snap
index f120436d59..188ef731ef 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.styles.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.styles.test.ts.snap
@@ -5671,6 +5671,39 @@ export class MyComponentModule {}
 "
 `;
 
+exports[`Angular with visuallyIgnoreHostElement = false > jsx > Javascript Test > store-async-function 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"string-literal-store\\",
+  template: \`
+    <div></div>
+  \`,
+})
+export default class StringLiteralStore {
+  arrowFunction = async function arrowFunction() {
+    return Promise.resolve();
+  };
+  namedFunction = async function namedFunction() {
+    return Promise.resolve();
+  };
+  fetchUsers = async function fetchUsers() {
+    return Promise.resolve();
+  };
+}
+
+@NgModule({
+  declarations: [StringLiteralStore],
+  imports: [CommonModule],
+  exports: [StringLiteralStore],
+})
+export class StringLiteralStoreModule {}
+"
+`;
+
 exports[`Angular with visuallyIgnoreHostElement = false > jsx > Javascript Test > string-literal-store 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -12413,6 +12446,39 @@ export class MyComponentModule {}
 "
 `;
 
+exports[`Angular with visuallyIgnoreHostElement = false > jsx > Typescript Test > store-async-function 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"string-literal-store\\",
+  template: \`
+    <div></div>
+  \`,
+})
+export default class StringLiteralStore {
+  arrowFunction = async function arrowFunction() {
+    return Promise.resolve();
+  };
+  namedFunction = async function namedFunction() {
+    return Promise.resolve();
+  };
+  fetchUsers = async function fetchUsers() {
+    return Promise.resolve();
+  };
+}
+
+@NgModule({
+  declarations: [StringLiteralStore],
+  imports: [CommonModule],
+  exports: [StringLiteralStore],
+})
+export class StringLiteralStoreModule {}
+"
+`;
+
 exports[`Angular with visuallyIgnoreHostElement = false > jsx > Typescript Test > string-literal-store 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 f103d0d255..2642166359 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.test.ts.snap
@@ -11922,6 +11922,79 @@ export default class MyComponent {
 "
 `;
 
+exports[`Angular > jsx > Javascript Test > store-async-function 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"string-literal-store\\",
+  template: \`
+    <div></div>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class StringLiteralStore {
+  arrowFunction = async function arrowFunction() {
+    return Promise.resolve();
+  };
+  namedFunction = async function namedFunction() {
+    return Promise.resolve();
+  };
+  fetchUsers = async function fetchUsers() {
+    return Promise.resolve();
+  };
+}
+
+@NgModule({
+  declarations: [StringLiteralStore],
+  imports: [CommonModule],
+  exports: [StringLiteralStore],
+})
+export class StringLiteralStoreModule {}
+"
+`;
+
+exports[`Angular > jsx > Javascript Test > store-async-function 2`] = `
+"import { Component } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+@Component({
+  selector: \\"string-literal-store\\",
+  template: \`
+    <div></div>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+  standalone: true,
+  imports: [CommonModule],
+})
+export default class StringLiteralStore {
+  arrowFunction = async function arrowFunction() {
+    return Promise.resolve();
+  };
+  namedFunction = async function namedFunction() {
+    return Promise.resolve();
+  };
+  fetchUsers = async function fetchUsers() {
+    return Promise.resolve();
+  };
+}
+"
+`;
+
 exports[`Angular > jsx > Javascript Test > string-literal-store 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -26050,6 +26123,79 @@ export default class MyComponent {
 "
 `;
 
+exports[`Angular > jsx > Typescript Test > store-async-function 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"string-literal-store\\",
+  template: \`
+    <div></div>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class StringLiteralStore {
+  arrowFunction = async function arrowFunction() {
+    return Promise.resolve();
+  };
+  namedFunction = async function namedFunction() {
+    return Promise.resolve();
+  };
+  fetchUsers = async function fetchUsers() {
+    return Promise.resolve();
+  };
+}
+
+@NgModule({
+  declarations: [StringLiteralStore],
+  imports: [CommonModule],
+  exports: [StringLiteralStore],
+})
+export class StringLiteralStoreModule {}
+"
+`;
+
+exports[`Angular > jsx > Typescript Test > store-async-function 2`] = `
+"import { Component } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+@Component({
+  selector: \\"string-literal-store\\",
+  template: \`
+    <div></div>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+  standalone: true,
+  imports: [CommonModule],
+})
+export default class StringLiteralStore {
+  arrowFunction = async function arrowFunction() {
+    return Promise.resolve();
+  };
+  namedFunction = async function namedFunction() {
+    return Promise.resolve();
+  };
+  fetchUsers = async function fetchUsers() {
+    return Promise.resolve();
+  };
+}
+"
+`;
+
 exports[`Angular > jsx > Typescript Test > string-literal-store 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 db98dddb03..2ed1fd48ab 100644
--- a/packages/core/src/__tests__/__snapshots__/html.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/html.test.ts.snap
@@ -6582,6 +6582,11 @@ exports[`Html > jsx > Javascript Test > spreadProps 1`] = `
 "
 `;
 
+exports[`Html > jsx > Javascript Test > store-async-function 1`] = `
+"<div></div>
+"
+`;
+
 exports[`Html > jsx > Javascript Test > string-literal-store 1`] = `
 "<div>
   <template data-el=\\"div-1\\"><!-- state.foo --></template>
@@ -13829,6 +13834,11 @@ exports[`Html > jsx > Typescript Test > spreadProps 1`] = `
 "
 `;
 
+exports[`Html > jsx > Typescript Test > store-async-function 1`] = `
+"<div></div>
+"
+`;
+
 exports[`Html > jsx > Typescript Test > string-literal-store 1`] = `
 "<div>
   <template data-el=\\"div-1\\"><!-- state.foo --></template>
diff --git a/packages/core/src/__tests__/__snapshots__/liquid.test.ts.snap b/packages/core/src/__tests__/__snapshots__/liquid.test.ts.snap
index 89bfc646ff..dc34018c93 100644
--- a/packages/core/src/__tests__/__snapshots__/liquid.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/liquid.test.ts.snap
@@ -782,6 +782,11 @@ exports[`Liquid > jsx > Javascript Test > spreadProps 1`] = `
 "
 `;
 
+exports[`Liquid > jsx > Javascript Test > store-async-function 1`] = `
+"<div></div>
+"
+`;
+
 exports[`Liquid > jsx > Javascript Test > string-literal-store 1`] = `
 "<div>{{foo}}</div>
 "
@@ -1699,6 +1704,11 @@ exports[`Liquid > jsx > Typescript Test > spreadProps 1`] = `
 "
 `;
 
+exports[`Liquid > jsx > Typescript Test > store-async-function 1`] = `
+"<div></div>
+"
+`;
+
 exports[`Liquid > jsx > Typescript Test > string-literal-store 1`] = `
 "<div>{{foo}}</div>
 "
diff --git a/packages/core/src/__tests__/__snapshots__/lit.test.ts.snap b/packages/core/src/__tests__/__snapshots__/lit.test.ts.snap
index e4ab0a120a..3c3c53694d 100644
--- a/packages/core/src/__tests__/__snapshots__/lit.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/lit.test.ts.snap
@@ -3945,6 +3945,37 @@ export default class MyBasicComponent extends LitElement {
 "
 `;
 
+exports[`Lit > jsx > Javascript Test > store-async-function 1`] = `
+"import { LitElement, html, css } from \\"lit\\";
+import { customElement, property, state, query } from \\"lit/decorators.js\\";
+
+@customElement(\\"string-literal-store\\")
+export default class StringLiteralStore extends LitElement {
+  createRenderRoot() {
+    return this;
+  }
+
+  arrowFunction = async function arrowFunction() {
+    return Promise.resolve();
+  };
+  namedFunction = async function namedFunction() {
+    return Promise.resolve();
+  };
+  fetchUsers = async function fetchUsers() {
+    return Promise.resolve();
+  };
+
+  render() {
+    return html\`
+
+          <div></div>
+
+        \`;
+  }
+}
+"
+`;
+
 exports[`Lit > jsx > Javascript Test > string-literal-store 1`] = `
 "import { LitElement, html, css } from \\"lit\\";
 import { customElement, property, state, query } from \\"lit/decorators.js\\";
@@ -8682,6 +8713,37 @@ export default class MyBasicComponent extends LitElement {
 "
 `;
 
+exports[`Lit > jsx > Typescript Test > store-async-function 1`] = `
+"import { LitElement, html, css } from \\"lit\\";
+import { customElement, property, state, query } from \\"lit/decorators.js\\";
+
+@customElement(\\"string-literal-store\\")
+export default class StringLiteralStore extends LitElement {
+  createRenderRoot() {
+    return this;
+  }
+
+  arrowFunction = async function arrowFunction() {
+    return Promise.resolve();
+  };
+  namedFunction = async function namedFunction() {
+    return Promise.resolve();
+  };
+  fetchUsers = async function fetchUsers() {
+    return Promise.resolve();
+  };
+
+  render() {
+    return html\`
+
+          <div></div>
+
+        \`;
+  }
+}
+"
+`;
+
 exports[`Lit > jsx > Typescript Test > string-literal-store 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 2322f05a61..c9b67b4b5f 100644
--- a/packages/core/src/__tests__/__snapshots__/marko.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/marko.test.ts.snap
@@ -2380,6 +2380,22 @@ exports[`Marko > jsx > Javascript Test > spreadProps 1`] = `
 <input ...(props) />"
 `;
 
+exports[`Marko > jsx > Javascript Test > store-async-function 1`] = `
+"class {
+  arrowFunction = async function arrowFunction() {
+    return Promise.resolve();
+  };
+  namedFunction = async function namedFunction() {
+    return Promise.resolve();
+  };
+  fetchUsers = async function fetchUsers() {
+    return Promise.resolve();
+  };
+}
+
+<div></div>"
+`;
+
 exports[`Marko > jsx > Javascript Test > string-literal-store 1`] = `
 "class {
   onCreate() {
@@ -4938,6 +4954,22 @@ exports[`Marko > jsx > Typescript Test > spreadProps 1`] = `
 <input ...(props) />"
 `;
 
+exports[`Marko > jsx > Typescript Test > store-async-function 1`] = `
+"class {
+  arrowFunction = async function arrowFunction() {
+    return Promise.resolve();
+  };
+  namedFunction = async function namedFunction() {
+    return Promise.resolve();
+  };
+  fetchUsers = async function fetchUsers() {
+    return Promise.resolve();
+  };
+}
+
+<div></div>"
+`;
+
 exports[`Marko > jsx > Typescript Test > string-literal-store 1`] = `
 "class {
   onCreate() {
diff --git a/packages/core/src/__tests__/__snapshots__/mitosis.test.ts.snap b/packages/core/src/__tests__/__snapshots__/mitosis.test.ts.snap
index bf67cf50ab..53c74fcc32 100644
--- a/packages/core/src/__tests__/__snapshots__/mitosis.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/mitosis.test.ts.snap
@@ -2625,6 +2625,27 @@ exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Javascr
 "
 `;
 
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Javascript Test > store-async-function 1`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+
+export default function StringLiteralStore(props) {
+  const state = useStore({
+    arrowFunction: async function arrowFunction() {
+      return Promise.resolve();
+    },
+    namedFunction: async function namedFunction() {
+      return Promise.resolve();
+    },
+    fetchUsers: async function fetchUsers() {
+      return Promise.resolve();
+    },
+  });
+
+  return [<div />];
+}
+"
+`;
+
 exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Javascript Test > string-literal-store 1`] = `
 "import { useStore } from \\"@builder.io/mitosis\\";
 
@@ -5862,6 +5883,27 @@ exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Typescr
 "
 `;
 
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Typescript Test > store-async-function 1`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+
+export default function StringLiteralStore(props) {
+  const state = useStore({
+    arrowFunction: async function arrowFunction() {
+      return Promise.resolve();
+    },
+    namedFunction: async function namedFunction() {
+      return Promise.resolve();
+    },
+    fetchUsers: async function fetchUsers() {
+      return Promise.resolve();
+    },
+  });
+
+  return [<div />];
+}
+"
+`;
+
 exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Typescript Test > string-literal-store 1`] = `
 "import { useStore } from \\"@builder.io/mitosis\\";
 
@@ -9459,6 +9501,27 @@ exports[`Mitosis, format: legacy > jsx > Javascript Test > spreadProps 1`] = `
 "
 `;
 
+exports[`Mitosis, format: legacy > jsx > Javascript Test > store-async-function 1`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+
+export default function StringLiteralStore(props) {
+  const state = useStore({
+    arrowFunction: async function arrowFunction() {
+      return Promise.resolve();
+    },
+    namedFunction: async function namedFunction() {
+      return Promise.resolve();
+    },
+    fetchUsers: async function fetchUsers() {
+      return Promise.resolve();
+    },
+  });
+
+  return <div />;
+}
+"
+`;
+
 exports[`Mitosis, format: legacy > jsx > Javascript Test > string-literal-store 1`] = `
 "import { useStore } from \\"@builder.io/mitosis\\";
 
@@ -12759,6 +12822,27 @@ exports[`Mitosis, format: legacy > jsx > Typescript Test > spreadProps 1`] = `
 "
 `;
 
+exports[`Mitosis, format: legacy > jsx > Typescript Test > store-async-function 1`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+
+export default function StringLiteralStore(props) {
+  const state = useStore({
+    arrowFunction: async function arrowFunction() {
+      return Promise.resolve();
+    },
+    namedFunction: async function namedFunction() {
+      return Promise.resolve();
+    },
+    fetchUsers: async function fetchUsers() {
+      return Promise.resolve();
+    },
+  });
+
+  return <div />;
+}
+"
+`;
+
 exports[`Mitosis, format: legacy > jsx > Typescript Test > string-literal-store 1`] = `
 "import { useStore } from \\"@builder.io/mitosis\\";
 
@@ -16833,6 +16917,29 @@ export default MyBasicComponent;
 "
 `;
 
+exports[`Mitosis, format: react > jsx > Javascript Test > store-async-function 1`] = `
+"import * as React from \\"react\\";
+
+function StringLiteralStore(props) {
+  async function arrowFunction() {
+    return Promise.resolve();
+  }
+
+  async function namedFunction() {
+    return Promise.resolve();
+  }
+
+  async function fetchUsers() {
+    return Promise.resolve();
+  }
+
+  return <div />;
+}
+
+export default StringLiteralStore;
+"
+`;
+
 exports[`Mitosis, format: react > jsx > Javascript Test > string-literal-store 1`] = `
 "\\"use client\\";
 import * as React from \\"react\\";
@@ -20311,6 +20418,29 @@ export default MyBasicComponent;
 "
 `;
 
+exports[`Mitosis, format: react > jsx > Typescript Test > store-async-function 1`] = `
+"import * as React from \\"react\\";
+
+function StringLiteralStore(props) {
+  async function arrowFunction() {
+    return Promise.resolve();
+  }
+
+  async function namedFunction() {
+    return Promise.resolve();
+  }
+
+  async function fetchUsers() {
+    return Promise.resolve();
+  }
+
+  return <div />;
+}
+
+export default StringLiteralStore;
+"
+`;
+
 exports[`Mitosis, format: react > jsx > Typescript Test > string-literal-store 1`] = `
 "\\"use client\\";
 import * as React from \\"react\\";
diff --git a/packages/core/src/__tests__/__snapshots__/parse-jsx.test.ts.snap b/packages/core/src/__tests__/__snapshots__/parse-jsx.test.ts.snap
index 0e64d952e5..80d80392ac 100644
--- a/packages/core/src/__tests__/__snapshots__/parse-jsx.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/parse-jsx.test.ts.snap
@@ -10585,6 +10585,58 @@ exports[`Parse JSX > Javascript > spreadProps 1`] = `
 }
 `;
 
+exports[`Parse JSX > Javascript > store-async-function 1`] = `
+{
+  "@type": "@builder.io/mitosis/component",
+  "children": [
+    {
+      "@type": "@builder.io/mitosis/node",
+      "bindings": {},
+      "children": [],
+      "meta": {},
+      "name": "div",
+      "properties": {},
+      "scope": {},
+    },
+  ],
+  "context": {
+    "get": {},
+    "set": {},
+  },
+  "exports": {},
+  "hooks": {
+    "onEvent": [],
+    "onMount": [],
+  },
+  "imports": [],
+  "inputs": [],
+  "meta": {},
+  "name": "StringLiteralStore",
+  "refs": {},
+  "state": {
+    "arrowFunction": {
+      "code": "async function arrowFunction() {
+  return Promise.resolve();
+}",
+      "type": "function",
+    },
+    "fetchUsers": {
+      "code": "async function fetchUsers() {
+  return Promise.resolve();
+}",
+      "type": "function",
+    },
+    "namedFunction": {
+      "code": "async function namedFunction() {
+  return Promise.resolve();
+}",
+      "type": "function",
+    },
+  },
+  "subComponents": [],
+}
+`;
+
 exports[`Parse JSX > Javascript > string-literal-store 1`] = `
 {
   "@type": "@builder.io/mitosis/component",
@@ -22872,6 +22924,58 @@ exports[`Parse JSX > Typescript > spreadProps 1`] = `
 }
 `;
 
+exports[`Parse JSX > Typescript > store-async-function 1`] = `
+{
+  "@type": "@builder.io/mitosis/component",
+  "children": [
+    {
+      "@type": "@builder.io/mitosis/node",
+      "bindings": {},
+      "children": [],
+      "meta": {},
+      "name": "div",
+      "properties": {},
+      "scope": {},
+    },
+  ],
+  "context": {
+    "get": {},
+    "set": {},
+  },
+  "exports": {},
+  "hooks": {
+    "onEvent": [],
+    "onMount": [],
+  },
+  "imports": [],
+  "inputs": [],
+  "meta": {},
+  "name": "StringLiteralStore",
+  "refs": {},
+  "state": {
+    "arrowFunction": {
+      "code": "async function arrowFunction() {
+  return Promise.resolve();
+}",
+      "type": "function",
+    },
+    "fetchUsers": {
+      "code": "async function fetchUsers() {
+  return Promise.resolve();
+}",
+      "type": "function",
+    },
+    "namedFunction": {
+      "code": "async function namedFunction() {
+  return Promise.resolve();
+}",
+      "type": "function",
+    },
+  },
+  "subComponents": [],
+}
+`;
+
 exports[`Parse JSX > Typescript > string-literal-store 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 0b2abdd829..d4a78d2763 100644
--- a/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap
@@ -3175,6 +3175,30 @@ export default MyBasicComponent;
 "
 `;
 
+exports[`Preact > jsx > Javascript Test > store-async-function 1`] = `
+"/** @jsx h */
+import { h, Fragment } from \\"preact\\";
+
+function StringLiteralStore(props) {
+  async function arrowFunction() {
+    return Promise.resolve();
+  }
+
+  async function namedFunction() {
+    return Promise.resolve();
+  }
+
+  async function fetchUsers() {
+    return Promise.resolve();
+  }
+
+  return <div />;
+}
+
+export default StringLiteralStore;
+"
+`;
+
 exports[`Preact > jsx > Javascript Test > string-literal-store 1`] = `
 "/** @jsx h */
 import { h, Fragment } from \\"preact\\";
@@ -7075,6 +7099,30 @@ export default MyBasicComponent;
 "
 `;
 
+exports[`Preact > jsx > Typescript Test > store-async-function 1`] = `
+"/** @jsx h */
+import { h, Fragment } from \\"preact\\";
+
+function StringLiteralStore(props: any) {
+  async function arrowFunction() {
+    return Promise.resolve();
+  }
+
+  async function namedFunction() {
+    return Promise.resolve();
+  }
+
+  async function fetchUsers() {
+    return Promise.resolve();
+  }
+
+  return <div />;
+}
+
+export default StringLiteralStore;
+"
+`;
+
 exports[`Preact > jsx > Typescript Test > string-literal-store 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 b8b4c1f825..01479fa220 100644
--- a/packages/core/src/__tests__/__snapshots__/qwik.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/qwik.test.ts.snap
@@ -4876,6 +4876,28 @@ export default MyBasicComponent;
 "
 `;
 
+exports[`qwik > jsx > Javascript Test > store-async-function 1`] = `
+"import { Fragment, component$, h } from \\"@builder.io/qwik\\";
+
+export const arrowFunction = async function arrowFunction() {
+  return Promise.resolve();
+};
+export const namedFunction = async function namedFunction() {
+  return Promise.resolve();
+};
+export const fetchUsers = async function fetchUsers() {
+  return Promise.resolve();
+};
+export const StringLiteralStore = component$((props) => {
+  const state = {};
+
+  return <div></div>;
+});
+
+export default StringLiteralStore;
+"
+`;
+
 exports[`qwik > jsx > Javascript Test > string-literal-store 1`] = `
 "import { Fragment, component$, h, useStore } from \\"@builder.io/qwik\\";
 
@@ -8705,6 +8727,28 @@ export default MyBasicComponent;
 "
 `;
 
+exports[`qwik > jsx > Typescript Test > store-async-function 1`] = `
+"import { Fragment, component$, h } from \\"@builder.io/qwik\\";
+
+export const arrowFunction = async function arrowFunction() {
+  return Promise.resolve();
+};
+export const namedFunction = async function namedFunction() {
+  return Promise.resolve();
+};
+export const fetchUsers = async function fetchUsers() {
+  return Promise.resolve();
+};
+export const StringLiteralStore = component$((props: any) => {
+  const state: any = {};
+
+  return <div></div>;
+});
+
+export default StringLiteralStore;
+"
+`;
+
 exports[`qwik > jsx > Typescript Test > string-literal-store 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 f82c7c3aa4..54f5d413bb 100644
--- a/packages/core/src/__tests__/__snapshots__/react-native.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/react-native.test.ts.snap
@@ -4462,6 +4462,42 @@ export default MyBasicComponent;
 "
 `;
 
+exports[`React Native > jsx > Javascript Test > store-async-function 1`] = `
+"import * as React from \\"react\\";
+import {
+  FlatList,
+  ScrollView,
+  View,
+  StyleSheet,
+  Image,
+  Text,
+  Pressable,
+  TextInput,
+  TouchableOpacity,
+  Button,
+  Linking,
+} from \\"react-native\\";
+
+function StringLiteralStore(props) {
+  async function arrowFunction() {
+    return Promise.resolve();
+  }
+
+  async function namedFunction() {
+    return Promise.resolve();
+  }
+
+  async function fetchUsers() {
+    return Promise.resolve();
+  }
+
+  return <View />;
+}
+
+export default StringLiteralStore;
+"
+`;
+
 exports[`React Native > jsx > Javascript Test > string-literal-store 1`] = `
 "import * as React from \\"react\\";
 import {
@@ -9744,6 +9780,42 @@ export default MyBasicComponent;
 "
 `;
 
+exports[`React Native > jsx > Typescript Test > store-async-function 1`] = `
+"import * as React from \\"react\\";
+import {
+  FlatList,
+  ScrollView,
+  View,
+  StyleSheet,
+  Image,
+  Text,
+  Pressable,
+  TextInput,
+  TouchableOpacity,
+  Button,
+  Linking,
+} from \\"react-native\\";
+
+function StringLiteralStore(props: any) {
+  async function arrowFunction() {
+    return Promise.resolve();
+  }
+
+  async function namedFunction() {
+    return Promise.resolve();
+  }
+
+  async function fetchUsers() {
+    return Promise.resolve();
+  }
+
+  return <View />;
+}
+
+export default StringLiteralStore;
+"
+`;
+
 exports[`React Native > jsx > Typescript Test > string-literal-store 1`] = `
 "import * as React from \\"react\\";
 import {
diff --git a/packages/core/src/__tests__/__snapshots__/react-state-builder.test.ts.snap b/packages/core/src/__tests__/__snapshots__/react-state-builder.test.ts.snap
index 37f4d74f77..77f9a77e55 100644
--- a/packages/core/src/__tests__/__snapshots__/react-state-builder.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/react-state-builder.test.ts.snap
@@ -3151,6 +3151,29 @@ export default MyBasicComponent;
 "
 `;
 
+exports[`React - stateType: builder > jsx > Javascript Test > store-async-function 1`] = `
+"import * as React from \\"react\\";
+
+function StringLiteralStore(props) {
+  const state = useBuilderState({
+    arrowFunction: async function arrowFunction() {
+      return Promise.resolve();
+    },
+    namedFunction: async function namedFunction() {
+      return Promise.resolve();
+    },
+    fetchUsers: async function fetchUsers() {
+      return Promise.resolve();
+    },
+  });
+
+  return <div />;
+}
+
+export default StringLiteralStore;
+"
+`;
+
 exports[`React - stateType: builder > jsx > Javascript Test > string-literal-store 1`] = `
 "\\"use client\\";
 import * as React from \\"react\\";
@@ -7038,6 +7061,29 @@ export default MyBasicComponent;
 "
 `;
 
+exports[`React - stateType: builder > jsx > Typescript Test > store-async-function 1`] = `
+"import * as React from \\"react\\";
+
+function StringLiteralStore(props: any) {
+  const state = useBuilderState({
+    arrowFunction: async function arrowFunction() {
+      return Promise.resolve();
+    },
+    namedFunction: async function namedFunction() {
+      return Promise.resolve();
+    },
+    fetchUsers: async function fetchUsers() {
+      return Promise.resolve();
+    },
+  });
+
+  return <div />;
+}
+
+export default StringLiteralStore;
+"
+`;
+
 exports[`React - stateType: builder > jsx > Typescript Test > string-literal-store 1`] = `
 "\\"use client\\";
 import * as React from \\"react\\";
diff --git a/packages/core/src/__tests__/__snapshots__/react-state-mobx.test.ts.snap b/packages/core/src/__tests__/__snapshots__/react-state-mobx.test.ts.snap
index daf5cb6d9c..5819a9f46d 100644
--- a/packages/core/src/__tests__/__snapshots__/react-state-mobx.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/react-state-mobx.test.ts.snap
@@ -3187,6 +3187,31 @@ export default observedMyBasicComponent;
 "
 `;
 
+exports[`React - stateType: mobx > jsx > Javascript Test > store-async-function 1`] = `
+"import * as React from \\"react\\";
+import { useLocalObservable, observer } from \\"mobx-react-lite\\";
+
+function StringLiteralStore(props) {
+  const state = useLocalObservable(() => ({
+    arrowFunction: async function arrowFunction() {
+      return Promise.resolve();
+    },
+    namedFunction: async function namedFunction() {
+      return Promise.resolve();
+    },
+    fetchUsers: async function fetchUsers() {
+      return Promise.resolve();
+    },
+  }));
+
+  return <div />;
+}
+
+const observedStringLiteralStore = observer(StringLiteralStore);
+export default observedStringLiteralStore;
+"
+`;
+
 exports[`React - stateType: mobx > jsx > Javascript Test > string-literal-store 1`] = `
 "\\"use client\\";
 import * as React from \\"react\\";
@@ -7088,6 +7113,31 @@ export default observedMyBasicComponent;
 "
 `;
 
+exports[`React - stateType: mobx > jsx > Typescript Test > store-async-function 1`] = `
+"import * as React from \\"react\\";
+import { useLocalObservable, observer } from \\"mobx-react-lite\\";
+
+function StringLiteralStore(props: any) {
+  const state = useLocalObservable(() => ({
+    arrowFunction: async function arrowFunction() {
+      return Promise.resolve();
+    },
+    namedFunction: async function namedFunction() {
+      return Promise.resolve();
+    },
+    fetchUsers: async function fetchUsers() {
+      return Promise.resolve();
+    },
+  }));
+
+  return <div />;
+}
+
+const observedStringLiteralStore = observer(StringLiteralStore);
+export default observedStringLiteralStore;
+"
+`;
+
 exports[`React - stateType: mobx > jsx > Typescript Test > string-literal-store 1`] = `
 "\\"use client\\";
 import * as React from \\"react\\";
diff --git a/packages/core/src/__tests__/__snapshots__/react-state-solid.test.ts.snap b/packages/core/src/__tests__/__snapshots__/react-state-solid.test.ts.snap
index a22febcf25..d475df619d 100644
--- a/packages/core/src/__tests__/__snapshots__/react-state-solid.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/react-state-solid.test.ts.snap
@@ -3090,6 +3090,30 @@ export default MyBasicComponent;
 "
 `;
 
+exports[`React - stateType: solid > jsx > Javascript Test > store-async-function 1`] = `
+"import * as React from \\"react\\";
+import { useMutable } from \\"react-solid-state\\";
+
+function StringLiteralStore(props) {
+  const state = useMutable({
+    arrowFunction: async function arrowFunction() {
+      return Promise.resolve();
+    },
+    namedFunction: async function namedFunction() {
+      return Promise.resolve();
+    },
+    fetchUsers: async function fetchUsers() {
+      return Promise.resolve();
+    },
+  });
+
+  return <div />;
+}
+
+export default StringLiteralStore;
+"
+`;
+
 exports[`React - stateType: solid > jsx > Javascript Test > string-literal-store 1`] = `
 "\\"use client\\";
 import * as React from \\"react\\";
@@ -6880,6 +6904,30 @@ export default MyBasicComponent;
 "
 `;
 
+exports[`React - stateType: solid > jsx > Typescript Test > store-async-function 1`] = `
+"import * as React from \\"react\\";
+import { useMutable } from \\"react-solid-state\\";
+
+function StringLiteralStore(props: any) {
+  const state = useMutable({
+    arrowFunction: async function arrowFunction() {
+      return Promise.resolve();
+    },
+    namedFunction: async function namedFunction() {
+      return Promise.resolve();
+    },
+    fetchUsers: async function fetchUsers() {
+      return Promise.resolve();
+    },
+  });
+
+  return <div />;
+}
+
+export default StringLiteralStore;
+"
+`;
+
 exports[`React - stateType: solid > jsx > Typescript Test > string-literal-store 1`] = `
 "\\"use client\\";
 import * as React from \\"react\\";
diff --git a/packages/core/src/__tests__/__snapshots__/react-state-valtio.test.ts.snap b/packages/core/src/__tests__/__snapshots__/react-state-valtio.test.ts.snap
index 1c6ef4cdd2..cec173a657 100644
--- a/packages/core/src/__tests__/__snapshots__/react-state-valtio.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/react-state-valtio.test.ts.snap
@@ -3090,6 +3090,30 @@ export default MyBasicComponent;
 "
 `;
 
+exports[`React - stateType: valtio > jsx > Javascript Test > store-async-function 1`] = `
+"import * as React from \\"react\\";
+import { useLocalProxy } from \\"valtio/utils\\";
+
+function StringLiteralStore(props) {
+  const state = useLocalProxy({
+    arrowFunction: async function arrowFunction() {
+      return Promise.resolve();
+    },
+    namedFunction: async function namedFunction() {
+      return Promise.resolve();
+    },
+    fetchUsers: async function fetchUsers() {
+      return Promise.resolve();
+    },
+  });
+
+  return <div />;
+}
+
+export default StringLiteralStore;
+"
+`;
+
 exports[`React - stateType: valtio > jsx > Javascript Test > string-literal-store 1`] = `
 "\\"use client\\";
 import * as React from \\"react\\";
@@ -6880,6 +6904,30 @@ export default MyBasicComponent;
 "
 `;
 
+exports[`React - stateType: valtio > jsx > Typescript Test > store-async-function 1`] = `
+"import * as React from \\"react\\";
+import { useLocalProxy } from \\"valtio/utils\\";
+
+function StringLiteralStore(props: any) {
+  const state = useLocalProxy({
+    arrowFunction: async function arrowFunction() {
+      return Promise.resolve();
+    },
+    namedFunction: async function namedFunction() {
+      return Promise.resolve();
+    },
+    fetchUsers: async function fetchUsers() {
+      return Promise.resolve();
+    },
+  });
+
+  return <div />;
+}
+
+export default StringLiteralStore;
+"
+`;
+
 exports[`React - stateType: valtio > jsx > Typescript Test > string-literal-store 1`] = `
 "\\"use client\\";
 import * as React from \\"react\\";
diff --git a/packages/core/src/__tests__/__snapshots__/react-state-variables.test.ts.snap b/packages/core/src/__tests__/__snapshots__/react-state-variables.test.ts.snap
index 95c38dac81..c7103c2541 100644
--- a/packages/core/src/__tests__/__snapshots__/react-state-variables.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/react-state-variables.test.ts.snap
@@ -2260,6 +2260,27 @@ export default MyBasicComponent;
 "
 `;
 
+exports[`React - stateType: variables > jsx > Javascript Test > store-async-function 1`] = `
+"import * as React from \\"react\\";
+
+function StringLiteralStore(props) {
+  const arrowFunction = async function arrowFunction() {
+    return Promise.resolve();
+  };
+  const namedFunction = async function namedFunction() {
+    return Promise.resolve();
+  };
+  const fetchUsers = async function fetchUsers() {
+    return Promise.resolve();
+  };
+
+  return <div />;
+}
+
+export default StringLiteralStore;
+"
+`;
+
 exports[`React - stateType: variables > jsx > Javascript Test > string-literal-store 1`] = `
 "\\"use client\\";
 import * as React from \\"react\\";
@@ -5157,6 +5178,27 @@ export default MyBasicComponent;
 "
 `;
 
+exports[`React - stateType: variables > jsx > Typescript Test > store-async-function 1`] = `
+"import * as React from \\"react\\";
+
+function StringLiteralStore(props: any) {
+  const arrowFunction = async function arrowFunction() {
+    return Promise.resolve();
+  };
+  const namedFunction = async function namedFunction() {
+    return Promise.resolve();
+  };
+  const fetchUsers = async function fetchUsers() {
+    return Promise.resolve();
+  };
+
+  return <div />;
+}
+
+export default StringLiteralStore;
+"
+`;
+
 exports[`React - stateType: variables > jsx > Typescript Test > string-literal-store 1`] = `
 "\\"use client\\";
 import * as React from \\"react\\";
diff --git a/packages/core/src/__tests__/__snapshots__/react.test.ts.snap b/packages/core/src/__tests__/__snapshots__/react.test.ts.snap
index 7fe63c2a89..af39bb5292 100644
--- a/packages/core/src/__tests__/__snapshots__/react.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/react.test.ts.snap
@@ -3078,6 +3078,29 @@ export default MyBasicComponent;
 "
 `;
 
+exports[`React - stateType: useState > jsx > Javascript Test > store-async-function 1`] = `
+"import * as React from \\"react\\";
+
+function StringLiteralStore(props) {
+  async function arrowFunction() {
+    return Promise.resolve();
+  }
+
+  async function namedFunction() {
+    return Promise.resolve();
+  }
+
+  async function fetchUsers() {
+    return Promise.resolve();
+  }
+
+  return <div />;
+}
+
+export default StringLiteralStore;
+"
+`;
+
 exports[`React - stateType: useState > jsx > Javascript Test > string-literal-store 1`] = `
 "\\"use client\\";
 import * as React from \\"react\\";
@@ -6876,6 +6899,29 @@ export default MyBasicComponent;
 "
 `;
 
+exports[`React - stateType: useState > jsx > Typescript Test > store-async-function 1`] = `
+"import * as React from \\"react\\";
+
+function StringLiteralStore(props: any) {
+  async function arrowFunction() {
+    return Promise.resolve();
+  }
+
+  async function namedFunction() {
+    return Promise.resolve();
+  }
+
+  async function fetchUsers() {
+    return Promise.resolve();
+  }
+
+  return <div />;
+}
+
+export default StringLiteralStore;
+"
+`;
+
 exports[`React - stateType: useState > jsx > Typescript Test > string-literal-store 1`] = `
 "\\"use client\\";
 import * as React 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 505af45593..1d6a1596e7 100644
--- a/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap
@@ -2818,6 +2818,27 @@ export default MyBasicComponent;
 "
 `;
 
+exports[`RSC > jsx > Javascript Test > store-async-function 1`] = `
+"import * as React from \\"react\\";
+
+function StringLiteralStore(props) {
+  const arrowFunction = async function arrowFunction() {
+    return Promise.resolve();
+  };
+  const namedFunction = async function namedFunction() {
+    return Promise.resolve();
+  };
+  const fetchUsers = async function fetchUsers() {
+    return Promise.resolve();
+  };
+
+  return <div />;
+}
+
+export default StringLiteralStore;
+"
+`;
+
 exports[`RSC > jsx > Javascript Test > string-literal-store 1`] = `
 "\\"use client\\";
 import * as React from \\"react\\";
@@ -6334,6 +6355,27 @@ export default MyBasicComponent;
 "
 `;
 
+exports[`RSC > jsx > Typescript Test > store-async-function 1`] = `
+"import * as React from \\"react\\";
+
+function StringLiteralStore(props: any) {
+  const arrowFunction = async function arrowFunction() {
+    return Promise.resolve();
+  };
+  const namedFunction = async function namedFunction() {
+    return Promise.resolve();
+  };
+  const fetchUsers = async function fetchUsers() {
+    return Promise.resolve();
+  };
+
+  return <div />;
+}
+
+export default StringLiteralStore;
+"
+`;
+
 exports[`RSC > jsx > Typescript Test > string-literal-store 1`] = `
 "\\"use client\\";
 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 8ba779c9de..e92da20c73 100644
--- a/packages/core/src/__tests__/__snapshots__/solid.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/solid.test.ts.snap
@@ -6746,6 +6746,60 @@ export default MyBasicComponent;
 "
 `;
 
+exports[`Solid > jsx > Javascript Test > store-async-function 1`] = `
+"import { createSignal, createMemo } from \\"solid-js\\";
+
+function StringLiteralStore(props) {
+  async function arrowFunction() {
+    return Promise.resolve();
+  }
+
+  async function namedFunction() {
+    return Promise.resolve();
+  }
+
+  async function fetchUsers() {
+    return Promise.resolve();
+  }
+
+  return (
+    <>
+      <div></div>
+    </>
+  );
+}
+
+export default StringLiteralStore;
+"
+`;
+
+exports[`Solid > jsx > Javascript Test > store-async-function 2`] = `
+"import { createSignal, createMemo } from \\"solid-js\\";
+
+function StringLiteralStore(props) {
+  async function arrowFunction() {
+    return Promise.resolve();
+  }
+
+  async function namedFunction() {
+    return Promise.resolve();
+  }
+
+  async function fetchUsers() {
+    return Promise.resolve();
+  }
+
+  return (
+    <>
+      <div></div>
+    </>
+  );
+}
+
+export default StringLiteralStore;
+"
+`;
+
 exports[`Solid > jsx > Javascript Test > string-literal-store 1`] = `
 "import { createSignal, createMemo } from \\"solid-js\\";
 
@@ -14950,6 +15004,60 @@ export default MyBasicComponent;
 "
 `;
 
+exports[`Solid > jsx > Typescript Test > store-async-function 1`] = `
+"import { createSignal, createMemo } from \\"solid-js\\";
+
+function StringLiteralStore(props: any) {
+  async function arrowFunction() {
+    return Promise.resolve();
+  }
+
+  async function namedFunction() {
+    return Promise.resolve();
+  }
+
+  async function fetchUsers() {
+    return Promise.resolve();
+  }
+
+  return (
+    <>
+      <div></div>
+    </>
+  );
+}
+
+export default StringLiteralStore;
+"
+`;
+
+exports[`Solid > jsx > Typescript Test > store-async-function 2`] = `
+"import { createSignal, createMemo } from \\"solid-js\\";
+
+function StringLiteralStore(props: any) {
+  async function arrowFunction() {
+    return Promise.resolve();
+  }
+
+  async function namedFunction() {
+    return Promise.resolve();
+  }
+
+  async function fetchUsers() {
+    return Promise.resolve();
+  }
+
+  return (
+    <>
+      <div></div>
+    </>
+  );
+}
+
+export default StringLiteralStore;
+"
+`;
+
 exports[`Solid > jsx > Typescript Test > string-literal-store 1`] = `
 "import { createSignal, createMemo } 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 122828a67e..fd39b5c1f0 100644
--- a/packages/core/src/__tests__/__snapshots__/stencil.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/stencil.test.ts.snap
@@ -3294,6 +3294,30 @@ export class MyBasicComponent {
 "
 `;
 
+exports[`Stencil > jsx > Javascript Test > store-async-function 1`] = `
+"import { Component, h, Fragment } from \\"@stencil/core\\";
+
+@Component({
+  tag: \\"string-literal-store\\",
+})
+export class StringLiteralStore {
+  arrowFunction = async function arrowFunction() {
+    return Promise.resolve();
+  };
+  namedFunction = async function namedFunction() {
+    return Promise.resolve();
+  };
+  fetchUsers = async function fetchUsers() {
+    return Promise.resolve();
+  };
+
+  render() {
+    return <div></div>;
+  }
+}
+"
+`;
+
 exports[`Stencil > jsx > Javascript Test > string-literal-store 1`] = `
 "import { Component, h, Fragment, State } from \\"@stencil/core\\";
 
@@ -7320,6 +7344,30 @@ export class MyBasicComponent {
 "
 `;
 
+exports[`Stencil > jsx > Typescript Test > store-async-function 1`] = `
+"import { Component, h, Fragment } from \\"@stencil/core\\";
+
+@Component({
+  tag: \\"string-literal-store\\",
+})
+export class StringLiteralStore {
+  arrowFunction = async function arrowFunction() {
+    return Promise.resolve();
+  };
+  namedFunction = async function namedFunction() {
+    return Promise.resolve();
+  };
+  fetchUsers = async function fetchUsers() {
+    return Promise.resolve();
+  };
+
+  render() {
+    return <div></div>;
+  }
+}
+"
+`;
+
 exports[`Stencil > jsx > Typescript Test > string-literal-store 1`] = `
 "import { Component, h, Fragment, State } 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 e1b4975788..ced6426aba 100644
--- a/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap
@@ -2698,6 +2698,24 @@ exports[`Svelte > jsx > Javascript Test > spreadNestedProps 1`] = `
 
 exports[`Svelte > jsx > Javascript Test > spreadProps 1`] = `"<input {...$$props} />"`;
 
+exports[`Svelte > jsx > Javascript Test > store-async-function 1`] = `
+"<script>
+  async function arrowFunction() {
+    return Promise.resolve();
+  }
+
+  async function namedFunction() {
+    return Promise.resolve();
+  }
+
+  async function fetchUsers() {
+    return Promise.resolve();
+  }
+</script>
+
+<div />"
+`;
+
 exports[`Svelte > jsx > Javascript Test > string-literal-store 1`] = `
 "<script>
   let foo = 123;
@@ -6199,6 +6217,24 @@ exports[`Svelte > jsx > Typescript Test > spreadProps 1`] = `
 <input {...$$props} />"
 `;
 
+exports[`Svelte > jsx > Typescript Test > store-async-function 1`] = `
+"<script lang=\\"ts\\">
+  async function arrowFunction() {
+    return Promise.resolve();
+  }
+
+  async function namedFunction() {
+    return Promise.resolve();
+  }
+
+  async function fetchUsers() {
+    return Promise.resolve();
+  }
+</script>
+
+<div />"
+`;
+
 exports[`Svelte > jsx > Typescript Test > string-literal-store 1`] = `
 "<script lang=\\"ts\\">
   let foo = 123;
diff --git a/packages/core/src/__tests__/__snapshots__/taro.test.ts.snap b/packages/core/src/__tests__/__snapshots__/taro.test.ts.snap
index 48242c2435..c5a468d78a 100644
--- a/packages/core/src/__tests__/__snapshots__/taro.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/taro.test.ts.snap
@@ -3133,6 +3133,30 @@ export default MyBasicComponent;
 "
 `;
 
+exports[`Taro > jsx > Javascript Test > store-async-function 1`] = `
+"import * as React from \\"react\\";
+import { View } from \\"@tarojs/components\\";
+
+function StringLiteralStore(props) {
+  async function arrowFunction() {
+    return Promise.resolve();
+  }
+
+  async function namedFunction() {
+    return Promise.resolve();
+  }
+
+  async function fetchUsers() {
+    return Promise.resolve();
+  }
+
+  return <View />;
+}
+
+export default StringLiteralStore;
+"
+`;
+
 exports[`Taro > jsx > Javascript Test > string-literal-store 1`] = `
 "\\"use client\\";
 import * as React from \\"react\\";
@@ -7024,6 +7048,30 @@ export default MyBasicComponent;
 "
 `;
 
+exports[`Taro > jsx > Typescript Test > store-async-function 1`] = `
+"import * as React from \\"react\\";
+import { View } from \\"@tarojs/components\\";
+
+function StringLiteralStore(props: any) {
+  async function arrowFunction() {
+    return Promise.resolve();
+  }
+
+  async function namedFunction() {
+    return Promise.resolve();
+  }
+
+  async function fetchUsers() {
+    return Promise.resolve();
+  }
+
+  return <View />;
+}
+
+export default StringLiteralStore;
+"
+`;
+
 exports[`Taro > jsx > Typescript Test > string-literal-store 1`] = `
 "\\"use client\\";
 import * as React 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 9070d5c7c8..1f6ba168a4 100644
--- a/packages/core/src/__tests__/__snapshots__/vue-composition.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/vue-composition.test.ts.snap
@@ -2880,6 +2880,24 @@ exports[`Vue > jsx > Javascript Test > spreadProps 1`] = `
 </template>"
 `;
 
+exports[`Vue > jsx > Javascript Test > store-async-function 1`] = `
+"<template>
+  <div></div>
+</template>
+
+<script setup>
+async function arrowFunction() {
+  return Promise.resolve();
+}
+async function namedFunction() {
+  return Promise.resolve();
+}
+async function fetchUsers() {
+  return Promise.resolve();
+}
+</script>"
+`;
+
 exports[`Vue > jsx > Javascript Test > string-literal-store 1`] = `
 "<template>
   <div>{{ foo }}</div>
@@ -6375,6 +6393,24 @@ exports[`Vue > jsx > Typescript Test > spreadProps 1`] = `
 </template>"
 `;
 
+exports[`Vue > jsx > Typescript Test > store-async-function 1`] = `
+"<template>
+  <div></div>
+</template>
+
+<script setup lang=\\"ts\\">
+async function arrowFunction() {
+  return Promise.resolve();
+}
+async function namedFunction() {
+  return Promise.resolve();
+}
+async function fetchUsers() {
+  return Promise.resolve();
+}
+</script>"
+`;
+
 exports[`Vue > jsx > Typescript Test > string-literal-store 1`] = `
 "<template>
   <div>{{ foo }}</div>
diff --git a/packages/core/src/__tests__/__snapshots__/vue.test.ts.snap b/packages/core/src/__tests__/__snapshots__/vue.test.ts.snap
index 63ddbf3a48..22a0078619 100644
--- a/packages/core/src/__tests__/__snapshots__/vue.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/vue.test.ts.snap
@@ -3573,6 +3573,32 @@ export default defineComponent({
 </script>"
 `;
 
+exports[`Vue > jsx > Javascript Test > store-async-function 1`] = `
+"<template>
+  <div></div>
+</template>
+
+<script>
+import { defineComponent } from \\"vue\\";
+
+export default defineComponent({
+  name: \\"string-literal-store\\",
+
+  methods: {
+    arrowFunction: async function arrowFunction() {
+      return Promise.resolve();
+    },
+    namedFunction: async function namedFunction() {
+      return Promise.resolve();
+    },
+    fetchUsers: async function fetchUsers() {
+      return Promise.resolve();
+    },
+  },
+});
+</script>"
+`;
+
 exports[`Vue > jsx > Javascript Test > string-literal-store 1`] = `
 "<template>
   <div>{{ foo }}</div>
@@ -7938,6 +7964,32 @@ export default defineComponent({
 </script>"
 `;
 
+exports[`Vue > jsx > Typescript Test > store-async-function 1`] = `
+"<template>
+  <div></div>
+</template>
+
+<script lang=\\"ts\\">
+import { defineComponent } from \\"vue\\";
+
+export default defineComponent({
+  name: \\"string-literal-store\\",
+
+  methods: {
+    arrowFunction: async function arrowFunction() {
+      return Promise.resolve();
+    },
+    namedFunction: async function namedFunction() {
+      return Promise.resolve();
+    },
+    fetchUsers: async function fetchUsers() {
+      return Promise.resolve();
+    },
+  },
+});
+</script>"
+`;
+
 exports[`Vue > jsx > Typescript Test > string-literal-store 1`] = `
 "<template>
   <div>{{ foo }}</div>
diff --git a/packages/core/src/__tests__/__snapshots__/webcomponent.test.ts.snap b/packages/core/src/__tests__/__snapshots__/webcomponent.test.ts.snap
index cb68f5aa59..96b21c8b83 100644
--- a/packages/core/src/__tests__/__snapshots__/webcomponent.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/webcomponent.test.ts.snap
@@ -14324,6 +14324,104 @@ customElements.define(\\"my-basic-component\\", MyBasicComponent);
 "
 `;
 
+exports[`webcomponent > jsx > Javascript Test > store-async-function 1`] = `
+"/**
+ * Usage:
+ *
+ *  <string-literal-store></string-literal-store>
+ *
+ */
+class StringLiteralStore extends HTMLElement {
+  get _root() {
+    return this.shadowRoot || this;
+  }
+
+  constructor() {
+    super();
+    const self = this;
+
+    this.state = {
+      arrowFunction: async function arrowFunction() {
+        return Promise.resolve();
+      },
+      namedFunction: async function namedFunction() {
+        return Promise.resolve();
+      },
+      fetchUsers: async function fetchUsers() {
+        return Promise.resolve();
+      },
+    };
+    if (!this.props) {
+      this.props = {};
+    }
+
+    // used to keep track of all nodes created by show/for
+    this.nodesToDestroy = [];
+    // batch updates
+    this.pendingUpdate = false;
+
+    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 = \`
+      <div></div>\`;
+    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() {}
+
+  // 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(\\"string-literal-store\\", StringLiteralStore);
+"
+`;
+
 exports[`webcomponent > jsx > Javascript Test > string-literal-store 1`] = `
 "/**
  * Usage:
@@ -30090,6 +30188,104 @@ customElements.define(\\"my-basic-component\\", MyBasicComponent);
 "
 `;
 
+exports[`webcomponent > jsx > Typescript Test > store-async-function 1`] = `
+"/**
+ * Usage:
+ *
+ *  <string-literal-store></string-literal-store>
+ *
+ */
+class StringLiteralStore extends HTMLElement {
+  get _root() {
+    return this.shadowRoot || this;
+  }
+
+  constructor() {
+    super();
+    const self = this;
+
+    this.state = {
+      arrowFunction: async function arrowFunction() {
+        return Promise.resolve();
+      },
+      namedFunction: async function namedFunction() {
+        return Promise.resolve();
+      },
+      fetchUsers: async function fetchUsers() {
+        return Promise.resolve();
+      },
+    };
+    if (!this.props) {
+      this.props = {};
+    }
+
+    // used to keep track of all nodes created by show/for
+    this.nodesToDestroy = [];
+    // batch updates
+    this.pendingUpdate = false;
+
+    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 = \`
+      <div></div>\`;
+    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() {}
+
+  // 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(\\"string-literal-store\\", StringLiteralStore);
+"
+`;
+
 exports[`webcomponent > jsx > Typescript Test > string-literal-store 1`] = `
 "/**
  * Usage:
diff --git a/packages/core/src/__tests__/data/store-async-function.raw.tsx b/packages/core/src/__tests__/data/store-async-function.raw.tsx
new file mode 100644
index 0000000000..7e4abb2cbe
--- /dev/null
+++ b/packages/core/src/__tests__/data/store-async-function.raw.tsx
@@ -0,0 +1,17 @@
+import { useStore } from '@builder.io/mitosis';
+
+export default function StringLiteralStore() {
+  const state = useStore({
+    arrowFunction: async () => {
+      return Promise.resolve();
+    },
+    namedFunction: async function namedFunction() {
+      return Promise.resolve();
+    },
+    async fetchUsers() {
+      return Promise.resolve();
+    },
+  });
+
+  return <div></div>;
+}
diff --git a/packages/core/src/__tests__/test-generator.ts b/packages/core/src/__tests__/test-generator.ts
index 22cf9a8d59..9d73d956e3 100644
--- a/packages/core/src/__tests__/test-generator.ts
+++ b/packages/core/src/__tests__/test-generator.ts
@@ -130,6 +130,7 @@ const inputToTextInputRN = getRawFile('./data/react-native/text-input.raw.tsx');
 
 const StringLiteralStore = getRawFile('./data/string-literal-store.raw.tsx');
 const StringLiteralStoreKebab = getRawFile('./data/string-literal-store-kebab.raw.tsx');
+const StoreAsyncFunction = getRawFile('./data/store-async-function.raw.tsx');
 
 /**
  * Use TestsWithFailFor when you want to write a test that you know will fail
@@ -246,6 +247,7 @@ const BASIC_TESTS: Tests = {
   useTarget,
   signalsOnUpdate,
   getterState,
+  'store-async-function': StoreAsyncFunction,
   'string-literal-store': StringLiteralStore,
   'string-literal-store-kebab': {
     file: StringLiteralStoreKebab,
diff --git a/packages/core/src/generators/qwik/helpers/state.ts b/packages/core/src/generators/qwik/helpers/state.ts
index f64ddb171f..7909a7053a 100644
--- a/packages/core/src/generators/qwik/helpers/state.ts
+++ b/packages/core/src/generators/qwik/helpers/state.ts
@@ -68,21 +68,24 @@ function emitStateMethods(
       case 'method':
       case 'function':
         let code = stateValue.code;
-        let prefixIdx = 0;
-        if (stateValue.type === 'function') {
-          prefixIdx += 'function '.length;
+        const isAsync = code.startsWith('async');
+        if (!isAsync) {
+          let prefixIdx = 0;
+          if (stateValue.type === 'function') {
+            prefixIdx += 'function '.length;
+          }
+          code = code.substring(prefixIdx);
+          code = convertMethodToFunction(code, methodMap, lexicalArgs).replace(
+            '(',
+            `(${lexicalArgs.join(',')},`,
+          );
         }
-        code = code.substring(prefixIdx);
-        code = convertMethodToFunction(code, methodMap, lexicalArgs).replace(
-          '(',
-          `(${lexicalArgs.join(',')},`,
-        );
         const functionName = code.split(/\(/)[0];
         if (!file.options.isTypeScript) {
           // Erase type information
           code = convertTypeScriptToJS(code);
         }
-        file.exportConst(functionName, 'function ' + code, true);
+        file.exportConst(isAsync ? key : functionName, isAsync ? code : 'function ' + code, true);
         continue;
 
       case 'property':
diff --git a/packages/core/src/generators/react/generator.ts b/packages/core/src/generators/react/generator.ts
index 6f69f74f00..b4ea1a5065 100644
--- a/packages/core/src/generators/react/generator.ts
+++ b/packages/core/src/generators/react/generator.ts
@@ -447,7 +447,8 @@ const _componentToReact = (
               keyPrefix: 'const',
               valueMapper: (code, type, _, key) => {
                 if (type === 'getter') return `${key} = function ${code.replace('get ', '')}`;
-                if (type === 'function') return `${key} = function ${code}`;
+                if (type === 'function')
+                  return code.startsWith('async') ? code : `${key} = function ${code}`;
                 return code;
               },
             })
diff --git a/packages/core/src/parsers/jsx/state.ts b/packages/core/src/parsers/jsx/state.ts
index c92dcfb722..d9f9a0fcdc 100644
--- a/packages/core/src/parsers/jsx/state.ts
+++ b/packages/core/src/parsers/jsx/state.ts
@@ -12,11 +12,13 @@ import { NodePath } from '@babel/core';
 import {
   BlockStatement,
   Expression,
+  Identifier,
   Node,
   ObjectExpression,
   ObjectMethod,
   ObjectProperty,
   assignmentExpression,
+  functionExpression,
   identifier,
   isArrowFunctionExpression,
   isDeclaration,
@@ -178,13 +180,40 @@ const processStateObjectSlice = (item: ObjectMethod | ObjectProperty): StateValu
         type: 'function',
       };
     } else if (isArrowFunctionExpression(item.value)) {
+      /**
+       * Arrow functions are normally converted to object methods to work around
+       * limitations with arrow functions in state in frameworks such as Svelte.
+       * However, this conversion does not work for async arrow functions due to
+       * how we handle parsing in `handleErrorOrExpression` for parsing
+       * expressions. That code does not detect async functions in order to apply
+       * its parsing workarounds. Even if it did, it does not consider async code
+       * when prefixing with "function". This would result in "function async foo()"
+       * which is not a valid function expression definition.
+       */
+      // TODO ENG-7256 Find a way to do this without diverging code path
+      if (item.value.async) {
+        const func = functionExpression(
+          item.key as Identifier,
+          item.value.params,
+          item.value.body as BlockStatement,
+          false,
+          true,
+        );
+
+        return {
+          code: parseCode(func).trim(),
+          type: 'function',
+        };
+      }
       const n = objectMethod(
         'method',
         item.key as Expression,
         item.value.params,
         item.value.body as BlockStatement,
       );
+
       const code = parseCode(n).trim();
+
       return {
         code: code,
         type: 'method',
@@ -206,6 +235,22 @@ const processStateObjectSlice = (item: ObjectMethod | ObjectProperty): StateValu
       };
     }
   } else if (isObjectMethod(item)) {
+    // TODO ENG-7256 Find a way to do this without diverging code path
+    if (item.async) {
+      const func = functionExpression(
+        item.key as Identifier,
+        item.params,
+        item.body as BlockStatement,
+        false,
+        true,
+      );
+
+      return {
+        code: parseCode(func).trim(),
+        type: 'function',
+      };
+    }
+
     const n = parseCode({ ...item, returnType: null }).trim();
 
     const isGetter = item.kind === 'get';