From d374367dfc75548b047021db5f0319b7b917e507 Mon Sep 17 00:00:00 2001
From: Nicolas Merget <nicolas.merget@deutschebahn.com>
Date: Mon, 9 Sep 2024 16:10:43 +0200
Subject: [PATCH 1/6] fix: issues for vue composition api

---
 .changeset/perfect-cups-sniff.md              |   5 +
 .../__snapshots__/alpine.test.ts.snap         |  88 ++++
 .../__snapshots__/angular.import.test.ts.snap | 188 +++++++
 .../__snapshots__/angular.mapper.test.ts.snap | 192 ++++++++
 .../__snapshots__/angular.state.test.ts.snap  | 188 +++++++
 .../__snapshots__/angular.styles.test.ts.snap | 160 ++++++
 .../__snapshots__/angular.test.ts.snap        | 348 +++++++++++++
 .../__tests__/__snapshots__/html.test.ts.snap | 108 ++++
 .../__snapshots__/liquid.test.ts.snap         |  28 ++
 .../__tests__/__snapshots__/lit.test.ts.snap  | 150 ++++++
 .../__snapshots__/marko.test.ts.snap          |  76 +++
 .../__snapshots__/parse-jsx.test.ts.snap      | 343 +++++++++++++
 .../__snapshots__/preact.test.ts.snap         | 120 +++++
 .../__tests__/__snapshots__/qwik.test.ts.snap | 101 ++++
 .../__snapshots__/react-native.test.ts.snap   | 180 +++++++
 .../__snapshots__/react.test.ts.snap          | 120 +++++
 .../__tests__/__snapshots__/rsc.test.ts.snap  | 120 +++++
 .../__snapshots__/solid.test.ts.snap          | 224 +++++++++
 .../__snapshots__/stencil.test.ts.snap        | 110 +++++
 .../__snapshots__/svelte.test.ts.snap         |  99 ++++
 .../__tests__/__snapshots__/taro.test.ts.snap | 124 +++++
 .../vue-composition.test.ts.snap              | 376 +++++++++-----
 .../__tests__/__snapshots__/vue.test.ts.snap  | 128 +++++
 .../__snapshots__/webcomponent.test.ts.snap   | 464 ++++++++++++++++++
 .../arrow-function-in-use-store.raw.tsx       |   0
 .../__tests__/data/store/nested-store.raw.tsx |  18 +
 .../string-literal-store-kebab.raw.tsx        |   0
 .../{ => store}/string-literal-store.raw.tsx  |   0
 .../store/use-value-and-fn-from-store.raw.tsx |  32 ++
 packages/core/src/__tests__/test-generator.ts |  50 +-
 .../core/src/generators/vue/compositionApi.ts |  12 +-
 packages/core/src/generators/vue/helpers.ts   |  10 +-
 packages/core/src/generators/vue/vue.ts       |   2 +-
 33 files changed, 4027 insertions(+), 137 deletions(-)
 create mode 100644 .changeset/perfect-cups-sniff.md
 rename packages/core/src/__tests__/data/{ => store}/arrow-function-in-use-store.raw.tsx (100%)
 create mode 100644 packages/core/src/__tests__/data/store/nested-store.raw.tsx
 rename packages/core/src/__tests__/data/{ => store}/string-literal-store-kebab.raw.tsx (100%)
 rename packages/core/src/__tests__/data/{ => store}/string-literal-store.raw.tsx (100%)
 create mode 100644 packages/core/src/__tests__/data/store/use-value-and-fn-from-store.raw.tsx

diff --git a/.changeset/perfect-cups-sniff.md b/.changeset/perfect-cups-sniff.md
new file mode 100644
index 0000000000..71f1b9203b
--- /dev/null
+++ b/.changeset/perfect-cups-sniff.md
@@ -0,0 +1,5 @@
+---
+'@builder.io/mitosis': patch
+---
+
+fix: issues with vue composition api
diff --git a/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap b/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap
index 87fd1cb69e..46df82cdb7 100644
--- a/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap
@@ -1070,6 +1070,23 @@ exports[`Alpine.js > jsx > Javascript Test > InputParent 1`] = `
 "
 `;
 
+exports[`Alpine.js > jsx > Javascript Test > NestedStore 1`] = `
+"<div x-data=\\"nestedStore()\\" x-bind:id=\\"_id\\">
+  Test
+
+  <p x-bind:id=\\"_messageId\\">Message</p>
+</div>
+<script>
+  document.addEventListener(\\"alpine:init\\", () => {
+    Alpine.data(\\"nestedStore\\", () => ({
+      _id: \\"abc\\",
+      _messageId: this._id + \\"-message\\",
+    }));
+  });
+</script>
+"
+`;
+
 exports[`Alpine.js > jsx > Javascript Test > RawText 1`] = `
 "<span
   x-data=\\"rawText()\\"
@@ -1332,6 +1349,33 @@ exports[`Alpine.js > jsx > Javascript Test > Textarea 1`] = `
 "
 `;
 
+exports[`Alpine.js > jsx > Javascript Test > UseValueAndFnFromStore 1`] = `
+"<div x-data=\\"useValueAndFnFromStore()\\" x-effect=\\"onUpdate\\">Test</div>
+<script>
+  document.addEventListener(\\"alpine:init\\", () => {
+    Alpine.data(\\"useValueAndFnFromStore\\", () => ({
+      _id: \\"abc\\",
+      _active: false,
+
+      _do(id) {
+        this._active = !!id;
+
+        if (props.onChange) {
+          props.onChange(this._active);
+        }
+      },
+
+      onUpdate() {
+        if (this._do) {
+          this._do(this._id);
+        }
+      },
+    }));
+  });
+</script>
+"
+`;
+
 exports[`Alpine.js > jsx > Javascript Test > Video 1`] = `
 "<video
   preload=\\"none\\"
@@ -3814,6 +3858,23 @@ exports[`Alpine.js > jsx > Typescript Test > InputParent 1`] = `
 "
 `;
 
+exports[`Alpine.js > jsx > Typescript Test > NestedStore 1`] = `
+"<div x-data=\\"nestedStore()\\" x-bind:id=\\"_id\\">
+  Test
+
+  <p x-bind:id=\\"_messageId\\">Message</p>
+</div>
+<script>
+  document.addEventListener(\\"alpine:init\\", () => {
+    Alpine.data(\\"nestedStore\\", () => ({
+      _id: \\"abc\\",
+      _messageId: this._id + \\"-message\\",
+    }));
+  });
+</script>
+"
+`;
+
 exports[`Alpine.js > jsx > Typescript Test > RawText 1`] = `
 "<span
   x-data=\\"rawText()\\"
@@ -4076,6 +4137,33 @@ exports[`Alpine.js > jsx > Typescript Test > Textarea 1`] = `
 "
 `;
 
+exports[`Alpine.js > jsx > Typescript Test > UseValueAndFnFromStore 1`] = `
+"<div x-data=\\"useValueAndFnFromStore()\\" x-effect=\\"onUpdate\\">Test</div>
+<script>
+  document.addEventListener(\\"alpine:init\\", () => {
+    Alpine.data(\\"useValueAndFnFromStore\\", () => ({
+      _id: \\"abc\\",
+      _active: false,
+
+      _do(id?: string) {
+        this._active = !!id;
+
+        if (props.onChange) {
+          props.onChange(this._active);
+        }
+      },
+
+      onUpdate() {
+        if (this._do) {
+          this._do(this._id);
+        }
+      },
+    }));
+  });
+</script>
+"
+`;
+
 exports[`Alpine.js > jsx > Typescript Test > Video 1`] = `
 "<video
   preload=\\"none\\"
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 fb6da252b3..ff0855ad7b 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap
@@ -2004,6 +2004,43 @@ export class StepperModule {}
 "
 `;
 
+exports[`Angular with Preserve Imports and File Extensions > jsx > Javascript Test > NestedStore 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"nested-store\\",
+  template: \`
+    <div [attr.id]=\\"_id\\">
+      Test
+
+      <p [attr.id]=\\"_messageId\\">Message</p>
+    </div>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class NestedStore {
+  _id = \\"abc\\";
+  _messageId = this._id + \\"-message\\";
+}
+
+@NgModule({
+  declarations: [NestedStore],
+  imports: [CommonModule],
+  exports: [NestedStore],
+})
+export class NestedStoreModule {}
+"
+`;
+
 exports[`Angular with Preserve Imports and File Extensions > jsx > Javascript Test > RawText 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -2835,6 +2872,56 @@ export class TextareaModule {}
 "
 `;
 
+exports[`Angular with Preserve Imports and File Extensions > jsx > Javascript Test > UseValueAndFnFromStore 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Output, EventEmitter, Component } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"use-value-and-fn-from-store\\",
+  template: \`
+    <div>Test</div>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class UseValueAndFnFromStore {
+  @Output() onChange = new EventEmitter();
+
+  _id = \\"abc\\";
+  _active = false;
+  _do(id) {
+    this._active = !!id;
+
+    if (this.onChange) {
+      this.onChange.emit(this._active);
+    }
+  }
+
+  ngOnChanges(changes) {
+    if (typeof window !== \\"undefined\\") {
+      if (this._do) {
+        this._do(this._id);
+      }
+    }
+  }
+}
+
+@NgModule({
+  declarations: [UseValueAndFnFromStore],
+  imports: [CommonModule],
+  exports: [UseValueAndFnFromStore],
+})
+export class UseValueAndFnFromStoreModule {}
+"
+`;
+
 exports[`Angular with Preserve Imports and File Extensions > jsx > Javascript Test > Video 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -8998,6 +9085,48 @@ export class StepperModule {}
 "
 `;
 
+exports[`Angular with Preserve Imports and File Extensions > jsx > Typescript Test > NestedStore 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+
+type MyStore = {
+  _id?: string;
+  _messageId?: string;
+};
+
+@Component({
+  selector: \\"nested-store\\",
+  template: \`
+    <div [attr.id]=\\"_id\\">
+      Test
+
+      <p [attr.id]=\\"_messageId\\">Message</p>
+    </div>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class NestedStore {
+  _id = \\"abc\\";
+  _messageId = this._id + \\"-message\\";
+}
+
+@NgModule({
+  declarations: [NestedStore],
+  imports: [CommonModule],
+  exports: [NestedStore],
+})
+export class NestedStoreModule {}
+"
+`;
+
 exports[`Angular with Preserve Imports and File Extensions > jsx > Typescript Test > RawText 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -9904,6 +10033,65 @@ export class TextareaModule {}
 "
 `;
 
+exports[`Angular with Preserve Imports and File Extensions > jsx > Typescript Test > UseValueAndFnFromStore 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Output, EventEmitter, Component, SimpleChanges } from \\"@angular/core\\";
+
+type MyProps = {
+  onChange?: (active: boolean) => void;
+};
+type MyStore = {
+  _id?: string;
+  _active?: boolean;
+  _do?: (id?: string) => void;
+};
+
+@Component({
+  selector: \\"use-value-and-fn-from-store\\",
+  template: \`
+    <div>Test</div>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class UseValueAndFnFromStore {
+  @Output() onChange = new EventEmitter();
+
+  _id = \\"abc\\";
+  _active = false;
+  _do(id?: string) {
+    this._active = !!id;
+
+    if (this.onChange) {
+      this.onChange.emit(this._active);
+    }
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (typeof window !== \\"undefined\\") {
+      if (this._do) {
+        this._do(this._id);
+      }
+    }
+  }
+}
+
+@NgModule({
+  declarations: [UseValueAndFnFromStore],
+  imports: [CommonModule],
+  exports: [UseValueAndFnFromStore],
+})
+export class UseValueAndFnFromStoreModule {}
+"
+`;
+
 exports[`Angular with Preserve Imports and File Extensions > jsx > Typescript Test > Video 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 4b8db0d072..d63b10e73b 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.mapper.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.mapper.test.ts.snap
@@ -2030,6 +2030,44 @@ export class StepperModule {}
 "
 `;
 
+exports[`Angular with Import Mapper Tests > jsx > Javascript Test > NestedStore 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"nested-store\\",
+  template: \`
+    <div [attr.id]=\\"_id\\">
+      Test
+
+      <p [attr.id]=\\"_messageId\\">Message</p>
+    </div>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class NestedStore {
+  _id = \\"abc\\";
+  _messageId = this._id + \\"-message\\";
+}
+
+@NgModule({
+  declarations: [NestedStore],
+  imports: [CommonModule],
+  exports: [NestedStore],
+  bootstrap: [SomeOtherComponent],
+})
+export class NestedStoreModule {}
+"
+`;
+
 exports[`Angular with Import Mapper Tests > jsx > Javascript Test > RawText 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -2873,6 +2911,57 @@ export class TextareaModule {}
 "
 `;
 
+exports[`Angular with Import Mapper Tests > jsx > Javascript Test > UseValueAndFnFromStore 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Output, EventEmitter, Component } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"use-value-and-fn-from-store\\",
+  template: \`
+    <div>Test</div>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class UseValueAndFnFromStore {
+  @Output() onChange = new EventEmitter();
+
+  _id = \\"abc\\";
+  _active = false;
+  _do(id) {
+    this._active = !!id;
+
+    if (this.onChange) {
+      this.onChange.emit(this._active);
+    }
+  }
+
+  ngOnChanges(changes) {
+    if (typeof window !== \\"undefined\\") {
+      if (this._do) {
+        this._do(this._id);
+      }
+    }
+  }
+}
+
+@NgModule({
+  declarations: [UseValueAndFnFromStore],
+  imports: [CommonModule],
+  exports: [UseValueAndFnFromStore],
+  bootstrap: [SomeOtherComponent],
+})
+export class UseValueAndFnFromStoreModule {}
+"
+`;
+
 exports[`Angular with Import Mapper Tests > jsx > Javascript Test > Video 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -9137,6 +9226,49 @@ export class StepperModule {}
 "
 `;
 
+exports[`Angular with Import Mapper Tests > jsx > Typescript Test > NestedStore 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+
+type MyStore = {
+  _id?: string;
+  _messageId?: string;
+};
+
+@Component({
+  selector: \\"nested-store\\",
+  template: \`
+    <div [attr.id]=\\"_id\\">
+      Test
+
+      <p [attr.id]=\\"_messageId\\">Message</p>
+    </div>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class NestedStore {
+  _id = \\"abc\\";
+  _messageId = this._id + \\"-message\\";
+}
+
+@NgModule({
+  declarations: [NestedStore],
+  imports: [CommonModule],
+  exports: [NestedStore],
+  bootstrap: [SomeOtherComponent],
+})
+export class NestedStoreModule {}
+"
+`;
+
 exports[`Angular with Import Mapper Tests > jsx > Typescript Test > RawText 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -10055,6 +10187,66 @@ export class TextareaModule {}
 "
 `;
 
+exports[`Angular with Import Mapper Tests > jsx > Typescript Test > UseValueAndFnFromStore 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Output, EventEmitter, Component, SimpleChanges } from \\"@angular/core\\";
+
+type MyProps = {
+  onChange?: (active: boolean) => void;
+};
+type MyStore = {
+  _id?: string;
+  _active?: boolean;
+  _do?: (id?: string) => void;
+};
+
+@Component({
+  selector: \\"use-value-and-fn-from-store\\",
+  template: \`
+    <div>Test</div>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class UseValueAndFnFromStore {
+  @Output() onChange = new EventEmitter();
+
+  _id = \\"abc\\";
+  _active = false;
+  _do(id?: string) {
+    this._active = !!id;
+
+    if (this.onChange) {
+      this.onChange.emit(this._active);
+    }
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (typeof window !== \\"undefined\\") {
+      if (this._do) {
+        this._do(this._id);
+      }
+    }
+  }
+}
+
+@NgModule({
+  declarations: [UseValueAndFnFromStore],
+  imports: [CommonModule],
+  exports: [UseValueAndFnFromStore],
+  bootstrap: [SomeOtherComponent],
+})
+export class UseValueAndFnFromStoreModule {}
+"
+`;
+
 exports[`Angular with Import Mapper Tests > jsx > Typescript Test > Video 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 164a92c9ef..4a4622d263 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.state.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.state.test.ts.snap
@@ -2068,6 +2068,43 @@ export class StepperModule {}
 "
 `;
 
+exports[`Angular with manually creating and handling class properties as bindings (more stable) > jsx > Javascript Test > NestedStore 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"nested-store\\",
+  template: \`
+    <div [attr.id]=\\"_id\\">
+      Test
+
+      <p [attr.id]=\\"_messageId\\">Message</p>
+    </div>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class NestedStore {
+  _id = \\"abc\\";
+  _messageId = this._id + \\"-message\\";
+}
+
+@NgModule({
+  declarations: [NestedStore],
+  imports: [CommonModule],
+  exports: [NestedStore],
+})
+export class NestedStoreModule {}
+"
+`;
+
 exports[`Angular with manually creating and handling class properties as bindings (more stable) > jsx > Javascript Test > RawText 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -2917,6 +2954,56 @@ export class TextareaModule {}
 "
 `;
 
+exports[`Angular with manually creating and handling class properties as bindings (more stable) > jsx > Javascript Test > UseValueAndFnFromStore 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Output, EventEmitter, Component } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"use-value-and-fn-from-store\\",
+  template: \`
+    <div>Test</div>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class UseValueAndFnFromStore {
+  @Output() onChange = new EventEmitter();
+
+  _id = \\"abc\\";
+  _active = false;
+  _do(id) {
+    this._active = !!id;
+
+    if (this.onChange) {
+      this.onChange.emit(this._active);
+    }
+  }
+
+  ngOnChanges(changes) {
+    if (typeof window !== \\"undefined\\") {
+      if (this._do) {
+        this._do(this._id);
+      }
+    }
+  }
+}
+
+@NgModule({
+  declarations: [UseValueAndFnFromStore],
+  imports: [CommonModule],
+  exports: [UseValueAndFnFromStore],
+})
+export class UseValueAndFnFromStoreModule {}
+"
+`;
+
 exports[`Angular with manually creating and handling class properties as bindings (more stable) > jsx > Javascript Test > Video 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -9306,6 +9393,48 @@ export class StepperModule {}
 "
 `;
 
+exports[`Angular with manually creating and handling class properties as bindings (more stable) > jsx > Typescript Test > NestedStore 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+
+type MyStore = {
+  _id?: string;
+  _messageId?: string;
+};
+
+@Component({
+  selector: \\"nested-store\\",
+  template: \`
+    <div [attr.id]=\\"_id\\">
+      Test
+
+      <p [attr.id]=\\"_messageId\\">Message</p>
+    </div>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class NestedStore {
+  _id = \\"abc\\";
+  _messageId = this._id + \\"-message\\";
+}
+
+@NgModule({
+  declarations: [NestedStore],
+  imports: [CommonModule],
+  exports: [NestedStore],
+})
+export class NestedStoreModule {}
+"
+`;
+
 exports[`Angular with manually creating and handling class properties as bindings (more stable) > jsx > Typescript Test > RawText 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -10230,6 +10359,65 @@ export class TextareaModule {}
 "
 `;
 
+exports[`Angular with manually creating and handling class properties as bindings (more stable) > jsx > Typescript Test > UseValueAndFnFromStore 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Output, EventEmitter, Component, SimpleChanges } from \\"@angular/core\\";
+
+type MyProps = {
+  onChange?: (active: boolean) => void;
+};
+type MyStore = {
+  _id?: string;
+  _active?: boolean;
+  _do?: (id?: string) => void;
+};
+
+@Component({
+  selector: \\"use-value-and-fn-from-store\\",
+  template: \`
+    <div>Test</div>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class UseValueAndFnFromStore {
+  @Output() onChange = new EventEmitter();
+
+  _id = \\"abc\\";
+  _active = false;
+  _do(id?: string) {
+    this._active = !!id;
+
+    if (this.onChange) {
+      this.onChange.emit(this._active);
+    }
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (typeof window !== \\"undefined\\") {
+      if (this._do) {
+        this._do(this._id);
+      }
+    }
+  }
+}
+
+@NgModule({
+  declarations: [UseValueAndFnFromStore],
+  imports: [CommonModule],
+  exports: [UseValueAndFnFromStore],
+})
+export class UseValueAndFnFromStoreModule {}
+"
+`;
+
 exports[`Angular with manually creating and handling class properties as bindings (more stable) > jsx > Typescript Test > Video 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 41e4307ae4..f2bb16a800 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.styles.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.styles.test.ts.snap
@@ -1846,6 +1846,36 @@ export class StepperModule {}
 "
 `;
 
+exports[`Angular with visuallyIgnoreHostElement = false > jsx > Javascript Test > NestedStore 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"nested-store\\",
+  template: \`
+    <div [attr.id]=\\"_id\\">
+      Test
+
+      <p [attr.id]=\\"_messageId\\">Message</p>
+    </div>
+  \`,
+})
+export default class NestedStore {
+  _id = \\"abc\\";
+  _messageId = this._id + \\"-message\\";
+}
+
+@NgModule({
+  declarations: [NestedStore],
+  imports: [CommonModule],
+  exports: [NestedStore],
+})
+export class NestedStoreModule {}
+"
+`;
+
 exports[`Angular with visuallyIgnoreHostElement = false > jsx > Javascript Test > RawText 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -2597,6 +2627,49 @@ export class TextareaModule {}
 "
 `;
 
+exports[`Angular with visuallyIgnoreHostElement = false > jsx > Javascript Test > UseValueAndFnFromStore 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Output, EventEmitter, Component } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"use-value-and-fn-from-store\\",
+  template: \`
+    <div>Test</div>
+  \`,
+})
+export default class UseValueAndFnFromStore {
+  @Output() onChange = new EventEmitter();
+
+  _id = \\"abc\\";
+  _active = false;
+  _do(id) {
+    this._active = !!id;
+
+    if (this.onChange) {
+      this.onChange.emit(this._active);
+    }
+  }
+
+  ngOnChanges(changes) {
+    if (typeof window !== \\"undefined\\") {
+      if (this._do) {
+        this._do(this._id);
+      }
+    }
+  }
+}
+
+@NgModule({
+  declarations: [UseValueAndFnFromStore],
+  imports: [CommonModule],
+  exports: [UseValueAndFnFromStore],
+})
+export class UseValueAndFnFromStoreModule {}
+"
+`;
+
 exports[`Angular with visuallyIgnoreHostElement = false > jsx > Javascript Test > Video 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -8123,6 +8196,41 @@ export class StepperModule {}
 "
 `;
 
+exports[`Angular with visuallyIgnoreHostElement = false > jsx > Typescript Test > NestedStore 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+
+type MyStore = {
+  _id?: string;
+  _messageId?: string;
+};
+
+@Component({
+  selector: \\"nested-store\\",
+  template: \`
+    <div [attr.id]=\\"_id\\">
+      Test
+
+      <p [attr.id]=\\"_messageId\\">Message</p>
+    </div>
+  \`,
+})
+export default class NestedStore {
+  _id = \\"abc\\";
+  _messageId = this._id + \\"-message\\";
+}
+
+@NgModule({
+  declarations: [NestedStore],
+  imports: [CommonModule],
+  exports: [NestedStore],
+})
+export class NestedStoreModule {}
+"
+`;
+
 exports[`Angular with visuallyIgnoreHostElement = false > jsx > Typescript Test > RawText 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -8949,6 +9057,58 @@ export class TextareaModule {}
 "
 `;
 
+exports[`Angular with visuallyIgnoreHostElement = false > jsx > Typescript Test > UseValueAndFnFromStore 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Output, EventEmitter, Component, SimpleChanges } from \\"@angular/core\\";
+
+type MyProps = {
+  onChange?: (active: boolean) => void;
+};
+type MyStore = {
+  _id?: string;
+  _active?: boolean;
+  _do?: (id?: string) => void;
+};
+
+@Component({
+  selector: \\"use-value-and-fn-from-store\\",
+  template: \`
+    <div>Test</div>
+  \`,
+})
+export default class UseValueAndFnFromStore {
+  @Output() onChange = new EventEmitter();
+
+  _id = \\"abc\\";
+  _active = false;
+  _do(id?: string) {
+    this._active = !!id;
+
+    if (this.onChange) {
+      this.onChange.emit(this._active);
+    }
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (typeof window !== \\"undefined\\") {
+      if (this._do) {
+        this._do(this._id);
+      }
+    }
+  }
+}
+
+@NgModule({
+  declarations: [UseValueAndFnFromStore],
+  imports: [CommonModule],
+  exports: [UseValueAndFnFromStore],
+})
+export class UseValueAndFnFromStoreModule {}
+"
+`;
+
 exports[`Angular with visuallyIgnoreHostElement = false > jsx > Typescript Test > Video 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 1f9225a34e..e2fba9d379 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.test.ts.snap
@@ -3822,6 +3822,73 @@ export default class Stepper {
 "
 `;
 
+exports[`Angular > jsx > Javascript Test > NestedStore 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"nested-store\\",
+  template: \`
+    <div [attr.id]=\\"_id\\">
+      Test
+
+      <p [attr.id]=\\"_messageId\\">Message</p>
+    </div>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class NestedStore {
+  _id = \\"abc\\";
+  _messageId = this._id + \\"-message\\";
+}
+
+@NgModule({
+  declarations: [NestedStore],
+  imports: [CommonModule],
+  exports: [NestedStore],
+})
+export class NestedStoreModule {}
+"
+`;
+
+exports[`Angular > jsx > Javascript Test > NestedStore 2`] = `
+"import { Component } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+@Component({
+  selector: \\"nested-store\\",
+  template: \`
+    <div [attr.id]=\\"_id\\">
+      Test
+
+      <p [attr.id]=\\"_messageId\\">Message</p>
+    </div>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+  standalone: true,
+  imports: [CommonModule],
+})
+export default class NestedStore {
+  _id = \\"abc\\";
+  _messageId = this._id + \\"-message\\";
+}
+"
+`;
+
 exports[`Angular > jsx > Javascript Test > RawText 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -5400,6 +5467,99 @@ export default class Textarea {
 "
 `;
 
+exports[`Angular > jsx > Javascript Test > UseValueAndFnFromStore 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Output, EventEmitter, Component } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"use-value-and-fn-from-store\\",
+  template: \`
+    <div>Test</div>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class UseValueAndFnFromStore {
+  @Output() onChange = new EventEmitter();
+
+  _id = \\"abc\\";
+  _active = false;
+  _do(id) {
+    this._active = !!id;
+
+    if (this.onChange) {
+      this.onChange.emit(this._active);
+    }
+  }
+
+  ngOnChanges(changes) {
+    if (typeof window !== \\"undefined\\") {
+      if (this._do) {
+        this._do(this._id);
+      }
+    }
+  }
+}
+
+@NgModule({
+  declarations: [UseValueAndFnFromStore],
+  imports: [CommonModule],
+  exports: [UseValueAndFnFromStore],
+})
+export class UseValueAndFnFromStoreModule {}
+"
+`;
+
+exports[`Angular > jsx > Javascript Test > UseValueAndFnFromStore 2`] = `
+"import { Output, EventEmitter, Component } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+@Component({
+  selector: \\"use-value-and-fn-from-store\\",
+  template: \`
+    <div>Test</div>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+  standalone: true,
+  imports: [CommonModule],
+})
+export default class UseValueAndFnFromStore {
+  @Output() onChange = new EventEmitter();
+
+  _id = \\"abc\\";
+  _active = false;
+  _do(id) {
+    this._active = !!id;
+
+    if (this.onChange) {
+      this.onChange.emit(this._active);
+    }
+  }
+
+  ngOnChanges(changes) {
+    if (typeof window !== \\"undefined\\") {
+      if (this._do) {
+        this._do(this._id);
+      }
+    }
+  }
+}
+"
+`;
+
 exports[`Angular > jsx > Javascript Test > Video 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -16989,6 +17149,83 @@ export default class Stepper {
 "
 `;
 
+exports[`Angular > jsx > Typescript Test > NestedStore 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+
+type MyStore = {
+  _id?: string;
+  _messageId?: string;
+};
+
+@Component({
+  selector: \\"nested-store\\",
+  template: \`
+    <div [attr.id]=\\"_id\\">
+      Test
+
+      <p [attr.id]=\\"_messageId\\">Message</p>
+    </div>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class NestedStore {
+  _id = \\"abc\\";
+  _messageId = this._id + \\"-message\\";
+}
+
+@NgModule({
+  declarations: [NestedStore],
+  imports: [CommonModule],
+  exports: [NestedStore],
+})
+export class NestedStoreModule {}
+"
+`;
+
+exports[`Angular > jsx > Typescript Test > NestedStore 2`] = `
+"import { Component } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+type MyStore = {
+  _id?: string;
+  _messageId?: string;
+};
+
+@Component({
+  selector: \\"nested-store\\",
+  template: \`
+    <div [attr.id]=\\"_id\\">
+      Test
+
+      <p [attr.id]=\\"_messageId\\">Message</p>
+    </div>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+  standalone: true,
+  imports: [CommonModule],
+})
+export default class NestedStore {
+  _id = \\"abc\\";
+  _messageId = this._id + \\"-message\\";
+}
+"
+`;
+
 exports[`Angular > jsx > Typescript Test > RawText 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -18717,6 +18954,117 @@ export default class Textarea {
 "
 `;
 
+exports[`Angular > jsx > Typescript Test > UseValueAndFnFromStore 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Output, EventEmitter, Component, SimpleChanges } from \\"@angular/core\\";
+
+type MyProps = {
+  onChange?: (active: boolean) => void;
+};
+type MyStore = {
+  _id?: string;
+  _active?: boolean;
+  _do?: (id?: string) => void;
+};
+
+@Component({
+  selector: \\"use-value-and-fn-from-store\\",
+  template: \`
+    <div>Test</div>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class UseValueAndFnFromStore {
+  @Output() onChange = new EventEmitter();
+
+  _id = \\"abc\\";
+  _active = false;
+  _do(id?: string) {
+    this._active = !!id;
+
+    if (this.onChange) {
+      this.onChange.emit(this._active);
+    }
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (typeof window !== \\"undefined\\") {
+      if (this._do) {
+        this._do(this._id);
+      }
+    }
+  }
+}
+
+@NgModule({
+  declarations: [UseValueAndFnFromStore],
+  imports: [CommonModule],
+  exports: [UseValueAndFnFromStore],
+})
+export class UseValueAndFnFromStoreModule {}
+"
+`;
+
+exports[`Angular > jsx > Typescript Test > UseValueAndFnFromStore 2`] = `
+"import { Output, EventEmitter, Component, SimpleChanges } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+type MyProps = {
+  onChange?: (active: boolean) => void;
+};
+type MyStore = {
+  _id?: string;
+  _active?: boolean;
+  _do?: (id?: string) => void;
+};
+
+@Component({
+  selector: \\"use-value-and-fn-from-store\\",
+  template: \`
+    <div>Test</div>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+  standalone: true,
+  imports: [CommonModule],
+})
+export default class UseValueAndFnFromStore {
+  @Output() onChange = new EventEmitter();
+
+  _id = \\"abc\\";
+  _active = false;
+  _do(id?: string) {
+    this._active = !!id;
+
+    if (this.onChange) {
+      this.onChange.emit(this._active);
+    }
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (typeof window !== \\"undefined\\") {
+      if (this._do) {
+        this._do(this._id);
+      }
+    }
+  }
+}
+"
+`;
+
 exports[`Angular > jsx > Typescript Test > Video 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 4c47ee787a..e8ba7f7251 100644
--- a/packages/core/src/__tests__/__snapshots__/html.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/html.test.ts.snap
@@ -2257,6 +2257,55 @@ exports[`Html > jsx > Javascript Test > InputParent 1`] = `
 "
 `;
 
+exports[`Html > jsx > Javascript Test > NestedStore 1`] = `
+"<div data-el=\\"div-1\\">
+  Test
+
+  <p data-el=\\"p-1\\">Message</p>
+</div>
+<script>
+  (() => {
+    const state = { _id: \\"abc\\", _messageId: this._id + \\"-message\\" };
+
+    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='div-1']\\").forEach((el) => {
+        el.setAttribute(\\"id\\", state._id);
+      });
+
+      document.querySelectorAll(\\"[data-el='p-1']\\").forEach((el) => {
+        el.setAttribute(\\"id\\", state._messageId);
+      });
+
+      destroyAnyNodes();
+
+      pendingUpdate = false;
+    }
+
+    // Update with initial state on first load
+    update();
+  })();
+</script>
+"
+`;
+
 exports[`Html > jsx > Javascript Test > RawText 1`] = `
 "<span data-el=\\"span-1\\"></span>
 <script>
@@ -3146,6 +3195,11 @@ exports[`Html > jsx > Javascript Test > Textarea 1`] = `
 "
 `;
 
+exports[`Html > jsx > Javascript Test > UseValueAndFnFromStore 1`] = `
+"<div>Test</div>
+"
+`;
+
 exports[`Html > jsx > Javascript Test > Video 1`] = `
 "<video preload=\\"none\\" data-el=\\"video-1\\"></video>
 <script>
@@ -9069,6 +9123,55 @@ exports[`Html > jsx > Typescript Test > InputParent 1`] = `
 "
 `;
 
+exports[`Html > jsx > Typescript Test > NestedStore 1`] = `
+"<div data-el=\\"div-1\\">
+  Test
+
+  <p data-el=\\"p-1\\">Message</p>
+</div>
+<script>
+  (() => {
+    const state = { _id: \\"abc\\", _messageId: this._id + \\"-message\\" };
+
+    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='div-1']\\").forEach((el) => {
+        el.setAttribute(\\"id\\", state._id);
+      });
+
+      document.querySelectorAll(\\"[data-el='p-1']\\").forEach((el) => {
+        el.setAttribute(\\"id\\", state._messageId);
+      });
+
+      destroyAnyNodes();
+
+      pendingUpdate = false;
+    }
+
+    // Update with initial state on first load
+    update();
+  })();
+</script>
+"
+`;
+
 exports[`Html > jsx > Typescript Test > RawText 1`] = `
 "<span data-el=\\"span-1\\"></span>
 <script>
@@ -9958,6 +10061,11 @@ exports[`Html > jsx > Typescript Test > Textarea 1`] = `
 "
 `;
 
+exports[`Html > jsx > Typescript Test > UseValueAndFnFromStore 1`] = `
+"<div>Test</div>
+"
+`;
+
 exports[`Html > jsx > Typescript Test > Video 1`] = `
 "<video preload=\\"none\\" data-el=\\"video-1\\"></video>
 <script>
diff --git a/packages/core/src/__tests__/__snapshots__/liquid.test.ts.snap b/packages/core/src/__tests__/__snapshots__/liquid.test.ts.snap
index 57798b6ee1..7cb672a5fc 100644
--- a/packages/core/src/__tests__/__snapshots__/liquid.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/liquid.test.ts.snap
@@ -270,6 +270,15 @@ exports[`Liquid > jsx > Javascript Test > InputParent 1`] = `
 "
 `;
 
+exports[`Liquid > jsx > Javascript Test > NestedStore 1`] = `
+"<div id=\\"{{_id}}\\">
+  Test
+
+  <p id=\\"{{_messageId}}\\">Message</p>
+</div>
+"
+`;
+
 exports[`Liquid > jsx > Javascript Test > RawText 1`] = `
 "<span></span>
 "
@@ -387,6 +396,11 @@ exports[`Liquid > jsx > Javascript Test > Textarea 1`] = `
 "
 `;
 
+exports[`Liquid > jsx > Javascript Test > UseValueAndFnFromStore 1`] = `
+"<div>Test</div>
+"
+`;
+
 exports[`Liquid > jsx > Javascript Test > Video 1`] = `
 "<video
   preload=\\"none\\"
@@ -1167,6 +1181,15 @@ exports[`Liquid > jsx > Typescript Test > InputParent 1`] = `
 "
 `;
 
+exports[`Liquid > jsx > Typescript Test > NestedStore 1`] = `
+"<div id=\\"{{_id}}\\">
+  Test
+
+  <p id=\\"{{_messageId}}\\">Message</p>
+</div>
+"
+`;
+
 exports[`Liquid > jsx > Typescript Test > RawText 1`] = `
 "<span></span>
 "
@@ -1284,6 +1307,11 @@ exports[`Liquid > jsx > Typescript Test > Textarea 1`] = `
 "
 `;
 
+exports[`Liquid > jsx > Typescript Test > UseValueAndFnFromStore 1`] = `
+"<div>Test</div>
+"
+`;
+
 exports[`Liquid > jsx > Typescript Test > Video 1`] = `
 "<video
   preload=\\"none\\"
diff --git a/packages/core/src/__tests__/__snapshots__/lit.test.ts.snap b/packages/core/src/__tests__/__snapshots__/lit.test.ts.snap
index 965f0fc720..dc795de426 100644
--- a/packages/core/src/__tests__/__snapshots__/lit.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/lit.test.ts.snap
@@ -1450,6 +1450,34 @@ export default class Stepper extends LitElement {
 "
 `;
 
+exports[`Lit > jsx > Javascript Test > NestedStore 1`] = `
+"import { LitElement, html, css } from \\"lit\\";
+import { customElement, property, state, query } from \\"lit/decorators.js\\";
+
+@customElement(\\"nested-store\\")
+export default class NestedStore extends LitElement {
+  createRenderRoot() {
+    return this;
+  }
+
+  @state() _id = \\"abc\\";
+  @state() _messageId = this._id + \\"-message\\";
+
+  render() {
+    return html\`
+
+          <div .id=\\"\${this._id}\\">
+          Test
+
+          <p .id=\\"\${this._messageId}\\">Message</p>
+        </div>
+
+        \`;
+  }
+}
+"
+`;
+
 exports[`Lit > jsx > Javascript Test > RawText 1`] = `
 "import { LitElement, html, css } from \\"lit\\";
 import { customElement, property, state, query } from \\"lit/decorators.js\\";
@@ -1897,6 +1925,46 @@ export default class Textarea extends LitElement {
 "
 `;
 
+exports[`Lit > jsx > Javascript Test > UseValueAndFnFromStore 1`] = `
+"import { LitElement, html, css } from \\"lit\\";
+import { customElement, property, state, query } from \\"lit/decorators.js\\";
+
+@customElement(\\"use-value-and-fn-from-store\\")
+export default class UseValueAndFnFromStore extends LitElement {
+  createRenderRoot() {
+    return this;
+  }
+
+  @property() onChange: any;
+
+  @state() _id = \\"abc\\";
+  @state() _active = false;
+
+  _do(id) {
+    this._active = !!id;
+
+    if (this.onChange) {
+      this.onChange(this._active);
+    }
+  }
+
+  updated() {
+    if (this._do) {
+      this._do(this._id);
+    }
+  }
+
+  render() {
+    return html\`
+
+          <div>Test</div>
+
+        \`;
+  }
+}
+"
+`;
+
 exports[`Lit > jsx > Javascript Test > Video 1`] = `
 "import { LitElement, html, css } from \\"lit\\";
 import { customElement, property, state, query } from \\"lit/decorators.js\\";
@@ -5764,6 +5832,39 @@ export default class Stepper extends LitElement {
 "
 `;
 
+exports[`Lit > jsx > Typescript Test > NestedStore 1`] = `
+"import { LitElement, html, css } from \\"lit\\";
+import { customElement, property, state, query } from \\"lit/decorators.js\\";
+
+type MyStore = {
+  _id?: string;
+  _messageId?: string;
+};
+
+@customElement(\\"nested-store\\")
+export default class NestedStore extends LitElement {
+  createRenderRoot() {
+    return this;
+  }
+
+  @state() _id = \\"abc\\";
+  @state() _messageId = this._id + \\"-message\\";
+
+  render() {
+    return html\`
+
+          <div .id=\\"\${this._id}\\">
+          Test
+
+          <p .id=\\"\${this._messageId}\\">Message</p>
+        </div>
+
+        \`;
+  }
+}
+"
+`;
+
 exports[`Lit > jsx > Typescript Test > RawText 1`] = `
 "import { LitElement, html, css } from \\"lit\\";
 import { customElement, property, state, query } from \\"lit/decorators.js\\";
@@ -6281,6 +6382,55 @@ export default class Textarea extends LitElement {
 "
 `;
 
+exports[`Lit > jsx > Typescript Test > UseValueAndFnFromStore 1`] = `
+"import { LitElement, html, css } from \\"lit\\";
+import { customElement, property, state, query } from \\"lit/decorators.js\\";
+
+type MyProps = {
+  onChange?: (active: boolean) => void;
+};
+type MyStore = {
+  _id?: string;
+  _active?: boolean;
+  _do?: (id?: string) => void;
+};
+
+@customElement(\\"use-value-and-fn-from-store\\")
+export default class UseValueAndFnFromStore extends LitElement {
+  createRenderRoot() {
+    return this;
+  }
+
+  @property() onChange: any;
+
+  @state() _id = \\"abc\\";
+  @state() _active = false;
+
+  _do(id?: string) {
+    this._active = !!id;
+
+    if (this.onChange) {
+      this.onChange(this._active);
+    }
+  }
+
+  updated() {
+    if (this._do) {
+      this._do(this._id);
+    }
+  }
+
+  render() {
+    return html\`
+
+          <div>Test</div>
+
+        \`;
+  }
+}
+"
+`;
+
 exports[`Lit > jsx > Typescript Test > Video 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 e876eccb22..b7eb0053b6 100644
--- a/packages/core/src/__tests__/__snapshots__/marko.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/marko.test.ts.snap
@@ -1063,6 +1063,20 @@ class {
 ></FormInputComponent>"
 `;
 
+exports[`Marko > jsx > Javascript Test > NestedStore 1`] = `
+"class {
+  onCreate() {
+    this.state = { _id: \\"abc\\", _messageId: this._id + \\"-message\\" };
+  }
+}
+
+<div id=(state._id)>
+  Test
+
+  <p id=(state._messageId)>Message</p>
+</div>"
+`;
+
 exports[`Marko > jsx > Javascript Test > RawText 1`] = `
 "class {}
 
@@ -1286,6 +1300,30 @@ exports[`Marko > jsx > Javascript Test > Textarea 1`] = `
 ></textarea>"
 `;
 
+exports[`Marko > jsx > Javascript Test > UseValueAndFnFromStore 1`] = `
+"class {
+  _do(id) {
+    this._active = !!id;
+
+    if (this.input.onChange) {
+      this.input.onChange(this._active);
+    }
+  }
+
+  onCreate(input) {
+    this.state = { _id: \\"abc\\", _active: false };
+  }
+
+  onRender() {
+    if (this._do) {
+      this._do(this.state._id);
+    }
+  }
+}
+
+<div>Test</div>"
+`;
+
 exports[`Marko > jsx > Javascript Test > Video 1`] = `
 "class {}
 
@@ -3514,6 +3552,20 @@ class {
 ></FormInputComponent>"
 `;
 
+exports[`Marko > jsx > Typescript Test > NestedStore 1`] = `
+"class {
+  onCreate() {
+    this.state = { _id: \\"abc\\", _messageId: this._id + \\"-message\\" };
+  }
+}
+
+<div id=(state._id)>
+  Test
+
+  <p id=(state._messageId)>Message</p>
+</div>"
+`;
+
 exports[`Marko > jsx > Typescript Test > RawText 1`] = `
 "class {}
 
@@ -3737,6 +3789,30 @@ exports[`Marko > jsx > Typescript Test > Textarea 1`] = `
 ></textarea>"
 `;
 
+exports[`Marko > jsx > Typescript Test > UseValueAndFnFromStore 1`] = `
+"class {
+  _do(id?: string) {
+    this._active = !!id;
+
+    if (this.input.onChange) {
+      this.input.onChange(this._active);
+    }
+  }
+
+  onCreate(input) {
+    this.state = { _id: \\"abc\\", _active: false };
+  }
+
+  onRender() {
+    if (this._do) {
+      this._do(this.state._id);
+    }
+  }
+}
+
+<div>Test</div>"
+`;
+
 exports[`Marko > jsx > Typescript Test > Video 1`] = `
 "class {}
 
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 e2a84cb16b..baf04a1d9c 100644
--- a/packages/core/src/__tests__/__snapshots__/parse-jsx.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/parse-jsx.test.ts.snap
@@ -3476,6 +3476,95 @@ exports[`Parse JSX > Javascript > InputParent 1`] = `
 }
 `;
 
+exports[`Parse JSX > Javascript > NestedStore 1`] = `
+{
+  "@type": "@builder.io/mitosis/component",
+  "children": [
+    {
+      "@type": "@builder.io/mitosis/node",
+      "bindings": {
+        "id": {
+          "code": "state._id",
+          "type": "single",
+        },
+      },
+      "children": [
+        {
+          "@type": "@builder.io/mitosis/node",
+          "bindings": {},
+          "children": [],
+          "meta": {},
+          "name": "div",
+          "properties": {
+            "_text": "
+      Test
+      ",
+          },
+          "scope": {},
+        },
+        {
+          "@type": "@builder.io/mitosis/node",
+          "bindings": {
+            "id": {
+              "code": "state._messageId",
+              "type": "single",
+            },
+          },
+          "children": [
+            {
+              "@type": "@builder.io/mitosis/node",
+              "bindings": {},
+              "children": [],
+              "meta": {},
+              "name": "div",
+              "properties": {
+                "_text": "Message",
+              },
+              "scope": {},
+            },
+          ],
+          "meta": {},
+          "name": "p",
+          "properties": {},
+          "scope": {},
+        },
+      ],
+      "meta": {},
+      "name": "div",
+      "properties": {},
+      "scope": {},
+    },
+  ],
+  "context": {
+    "get": {},
+    "set": {},
+  },
+  "exports": {},
+  "hooks": {
+    "onEvent": [],
+    "onMount": [],
+  },
+  "imports": [],
+  "inputs": [],
+  "meta": {},
+  "name": "NestedStore",
+  "refs": {},
+  "state": {
+    "_id": {
+      "code": "\\"abc\\"",
+      "propertyType": "normal",
+      "type": "property",
+    },
+    "_messageId": {
+      "code": "this._id + \\"-message\\"",
+      "propertyType": "normal",
+      "type": "property",
+    },
+  },
+  "subComponents": [],
+}
+`;
+
 exports[`Parse JSX > Javascript > RawText 1`] = `
 {
   "@type": "@builder.io/mitosis/component",
@@ -4686,6 +4775,80 @@ exports[`Parse JSX > Javascript > Textarea 1`] = `
 }
 `;
 
+exports[`Parse JSX > Javascript > UseValueAndFnFromStore 1`] = `
+{
+  "@type": "@builder.io/mitosis/component",
+  "children": [
+    {
+      "@type": "@builder.io/mitosis/node",
+      "bindings": {},
+      "children": [
+        {
+          "@type": "@builder.io/mitosis/node",
+          "bindings": {},
+          "children": [],
+          "meta": {},
+          "name": "div",
+          "properties": {
+            "_text": "Test",
+          },
+          "scope": {},
+        },
+      ],
+      "meta": {},
+      "name": "div",
+      "properties": {},
+      "scope": {},
+    },
+  ],
+  "context": {
+    "get": {},
+    "set": {},
+  },
+  "exports": {},
+  "hooks": {
+    "onEvent": [],
+    "onMount": [],
+    "onUpdate": [
+      {
+        "code": "if (state._do) {
+  state._do(state._id);
+}",
+        "deps": "",
+      },
+    ],
+  },
+  "imports": [],
+  "inputs": [],
+  "meta": {},
+  "name": "UseValueAndFnFromStore",
+  "refs": {},
+  "state": {
+    "_active": {
+      "code": "false",
+      "propertyType": "normal",
+      "type": "property",
+    },
+    "_do": {
+      "code": "_do(id) {
+  this._active = !!id;
+
+  if (props.onChange) {
+    props.onChange(this._active);
+  }
+}",
+      "type": "method",
+    },
+    "_id": {
+      "code": "'abc'",
+      "propertyType": "normal",
+      "type": "property",
+    },
+  },
+  "subComponents": [],
+}
+`;
+
 exports[`Parse JSX > Javascript > Video 1`] = `
 {
   "@type": "@builder.io/mitosis/component",
@@ -14522,6 +14685,101 @@ exports[`Parse JSX > Typescript > InputParent 1`] = `
 }
 `;
 
+exports[`Parse JSX > Typescript > NestedStore 1`] = `
+{
+  "@type": "@builder.io/mitosis/component",
+  "children": [
+    {
+      "@type": "@builder.io/mitosis/node",
+      "bindings": {
+        "id": {
+          "code": "state._id",
+          "type": "single",
+        },
+      },
+      "children": [
+        {
+          "@type": "@builder.io/mitosis/node",
+          "bindings": {},
+          "children": [],
+          "meta": {},
+          "name": "div",
+          "properties": {
+            "_text": "
+      Test
+      ",
+          },
+          "scope": {},
+        },
+        {
+          "@type": "@builder.io/mitosis/node",
+          "bindings": {
+            "id": {
+              "code": "state._messageId",
+              "type": "single",
+            },
+          },
+          "children": [
+            {
+              "@type": "@builder.io/mitosis/node",
+              "bindings": {},
+              "children": [],
+              "meta": {},
+              "name": "div",
+              "properties": {
+                "_text": "Message",
+              },
+              "scope": {},
+            },
+          ],
+          "meta": {},
+          "name": "p",
+          "properties": {},
+          "scope": {},
+        },
+      ],
+      "meta": {},
+      "name": "div",
+      "properties": {},
+      "scope": {},
+    },
+  ],
+  "context": {
+    "get": {},
+    "set": {},
+  },
+  "exports": {},
+  "hooks": {
+    "onEvent": [],
+    "onMount": [],
+  },
+  "imports": [],
+  "inputs": [],
+  "meta": {},
+  "name": "NestedStore",
+  "refs": {},
+  "state": {
+    "_id": {
+      "code": "\\"abc\\"",
+      "propertyType": "normal",
+      "type": "property",
+    },
+    "_messageId": {
+      "code": "this._id + \\"-message\\"",
+      "propertyType": "normal",
+      "type": "property",
+    },
+  },
+  "subComponents": [],
+  "types": [
+    "type MyStore = {
+  _id?: string;
+  _messageId?: string;
+}",
+  ],
+}
+`;
+
 exports[`Parse JSX > Typescript > RawText 1`] = `
 {
   "@type": "@builder.io/mitosis/component",
@@ -15827,6 +16085,91 @@ exports[`Parse JSX > Typescript > Textarea 1`] = `
 }
 `;
 
+exports[`Parse JSX > Typescript > UseValueAndFnFromStore 1`] = `
+{
+  "@type": "@builder.io/mitosis/component",
+  "children": [
+    {
+      "@type": "@builder.io/mitosis/node",
+      "bindings": {},
+      "children": [
+        {
+          "@type": "@builder.io/mitosis/node",
+          "bindings": {},
+          "children": [],
+          "meta": {},
+          "name": "div",
+          "properties": {
+            "_text": "Test",
+          },
+          "scope": {},
+        },
+      ],
+      "meta": {},
+      "name": "div",
+      "properties": {},
+      "scope": {},
+    },
+  ],
+  "context": {
+    "get": {},
+    "set": {},
+  },
+  "exports": {},
+  "hooks": {
+    "onEvent": [],
+    "onMount": [],
+    "onUpdate": [
+      {
+        "code": "if (state._do) {
+  state._do(state._id);
+}",
+        "deps": "",
+      },
+    ],
+  },
+  "imports": [],
+  "inputs": [],
+  "meta": {},
+  "name": "UseValueAndFnFromStore",
+  "propsTypeRef": "MyProps",
+  "refs": {},
+  "state": {
+    "_active": {
+      "code": "false",
+      "propertyType": "normal",
+      "type": "property",
+    },
+    "_do": {
+      "code": "_do(id?: string) {
+  this._active = !!id;
+
+  if (props.onChange) {
+    props.onChange(this._active);
+  }
+}",
+      "type": "method",
+    },
+    "_id": {
+      "code": "'abc'",
+      "propertyType": "normal",
+      "type": "property",
+    },
+  },
+  "subComponents": [],
+  "types": [
+    "type MyProps = {
+  onChange?: (active: boolean) => void;
+}",
+    "type MyStore = {
+  _id?: string;
+  _active?: boolean;
+  _do?: (id?: string) => void;
+}",
+  ],
+}
+`;
+
 exports[`Parse JSX > Typescript > Video 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 9dbfef493a..f689a61ffa 100644
--- a/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap
@@ -1211,6 +1211,28 @@ export default Stepper;
 "
 `;
 
+exports[`Preact > jsx > Javascript Test > NestedStore 1`] = `
+"/** @jsx h */
+import { h, Fragment } from \\"preact\\";
+import { useState } from \\"preact/hooks\\";
+
+function NestedStore(props) {
+  const [_id, set_id] = useState(() => \\"abc\\");
+
+  const [_messageId, set_messageId] = useState(() => _id + \\"-message\\");
+
+  return (
+    <div id={_id}>
+      Test
+      <p id={_messageId}>Message</p>
+    </div>
+  );
+}
+
+export default NestedStore;
+"
+`;
+
 exports[`Preact > jsx > Javascript Test > RawText 1`] = `
 "/** @jsx h */
 import { h, Fragment } from \\"preact\\";
@@ -1523,6 +1545,37 @@ export default Textarea;
 "
 `;
 
+exports[`Preact > jsx > Javascript Test > UseValueAndFnFromStore 1`] = `
+"/** @jsx h */
+import { h, Fragment } from \\"preact\\";
+import { useState, useEffect } from \\"preact/hooks\\";
+
+function UseValueAndFnFromStore(props) {
+  const [_id, set_id] = useState(() => \\"abc\\");
+
+  const [_active, set_active] = useState(() => false);
+
+  function _do(id) {
+    _active = !!id;
+
+    if (props.onChange) {
+      props.onChange(_active);
+    }
+  }
+
+  useEffect(() => {
+    if (_do) {
+      _do(_id);
+    }
+  });
+
+  return <div>Test</div>;
+}
+
+export default UseValueAndFnFromStore;
+"
+`;
+
 exports[`Preact > jsx > Javascript Test > Video 1`] = `
 "/** @jsx h */
 import { h, Fragment } from \\"preact\\";
@@ -4765,6 +4818,33 @@ export default Stepper;
 "
 `;
 
+exports[`Preact > jsx > Typescript Test > NestedStore 1`] = `
+"/** @jsx h */
+import { h, Fragment } from \\"preact\\";
+import { useState } from \\"preact/hooks\\";
+
+type MyStore = {
+  _id?: string;
+  _messageId?: string;
+};
+
+function NestedStore(props: any) {
+  const [_id, set_id] = useState(() => \\"abc\\");
+
+  const [_messageId, set_messageId] = useState(() => _id + \\"-message\\");
+
+  return (
+    <div id={_id}>
+      Test
+      <p id={_messageId}>Message</p>
+    </div>
+  );
+}
+
+export default NestedStore;
+"
+`;
+
 exports[`Preact > jsx > Typescript Test > RawText 1`] = `
 "/** @jsx h */
 import { h, Fragment } from \\"preact\\";
@@ -5143,6 +5223,46 @@ export default Textarea;
 "
 `;
 
+exports[`Preact > jsx > Typescript Test > UseValueAndFnFromStore 1`] = `
+"/** @jsx h */
+import { h, Fragment } from \\"preact\\";
+import { useState, useEffect } from \\"preact/hooks\\";
+
+type MyProps = {
+  onChange?: (active: boolean) => void;
+};
+type MyStore = {
+  _id?: string;
+  _active?: boolean;
+  _do?: (id?: string) => void;
+};
+
+function UseValueAndFnFromStore(props: MyProps) {
+  const [_id, set_id] = useState(() => \\"abc\\");
+
+  const [_active, set_active] = useState(() => false);
+
+  function _do(id?: string) {
+    _active = !!id;
+
+    if (props.onChange) {
+      props.onChange(_active);
+    }
+  }
+
+  useEffect(() => {
+    if (_do) {
+      _do(_id);
+    }
+  });
+
+  return <div>Test</div>;
+}
+
+export default UseValueAndFnFromStore;
+"
+`;
+
 exports[`Preact > jsx > Typescript Test > Video 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 444ac7fb8a..35af511ded 100644
--- a/packages/core/src/__tests__/__snapshots__/qwik.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/qwik.test.ts.snap
@@ -3007,6 +3007,24 @@ export default Stepper;
 "
 `;
 
+exports[`qwik > jsx > Javascript Test > NestedStore 1`] = `
+"import { Fragment, component$, h, useStore } from \\"@builder.io/qwik\\";
+
+export const NestedStore = component$((props) => {
+  const state = useStore({ _id: \\"abc\\", _messageId: this._id + \\"-message\\" });
+
+  return (
+    <div id={state._id}>
+      Test
+      <p id={state._messageId}>Message</p>
+    </div>
+  );
+});
+
+export default NestedStore;
+"
+`;
+
 exports[`qwik > jsx > Javascript Test > RawText 1`] = `
 "import { Fragment, component$, h } from \\"@builder.io/qwik\\";
 
@@ -3360,6 +3378,31 @@ export default Textarea;
 "
 `;
 
+exports[`qwik > jsx > Javascript Test > UseValueAndFnFromStore 1`] = `
+"import { Fragment, component$, h, useStore, useTask$ } from \\"@builder.io/qwik\\";
+
+export const _do = function _do(props, state, id) {
+  this._active = !!id;
+
+  if (props.onChange) {
+    props.onChange(this._active);
+  }
+};
+export const UseValueAndFnFromStore = component$((props) => {
+  const state = useStore({ _active: false, _id: \\"abc\\" });
+  useTask$(({ track }) => {
+    if (_do.bind(null, props, state)) {
+      _do(props, state, state._id);
+    }
+  });
+
+  return <div>Test</div>;
+});
+
+export default UseValueAndFnFromStore;
+"
+`;
+
 exports[`qwik > jsx > Javascript Test > Video 1`] = `
 "import { Fragment, component$, h } from \\"@builder.io/qwik\\";
 
@@ -6450,6 +6493,31 @@ export default Stepper;
 "
 `;
 
+exports[`qwik > jsx > Typescript Test > NestedStore 1`] = `
+"import { Fragment, component$, h, useStore } from \\"@builder.io/qwik\\";
+
+type MyStore = {
+  _id?: string;
+  _messageId?: string;
+};
+export const NestedStore = component$((props: any) => {
+  const state = useStore<any>({
+    _id: \\"abc\\",
+    _messageId: this._id + \\"-message\\",
+  });
+
+  return (
+    <div id={state._id}>
+      Test
+      <p id={state._messageId}>Message</p>
+    </div>
+  );
+});
+
+export default NestedStore;
+"
+`;
+
 exports[`qwik > jsx > Typescript Test > RawText 1`] = `
 "import { Fragment, component$, h } from \\"@builder.io/qwik\\";
 
@@ -6861,6 +6929,39 @@ export default Textarea;
 "
 `;
 
+exports[`qwik > jsx > Typescript Test > UseValueAndFnFromStore 1`] = `
+"import { Fragment, component$, h, useStore, useTask$ } from \\"@builder.io/qwik\\";
+
+type MyProps = {
+  onChange?: (active: boolean) => void;
+};
+type MyStore = {
+  _id?: string;
+  _active?: boolean;
+  _do?: (id?: string) => void;
+};
+export const _do = function _do(props, state, id?: string) {
+  this._active = !!id;
+
+  if (props.onChange) {
+    props.onChange(this._active);
+  }
+};
+export const UseValueAndFnFromStore = component$((props: MyProps) => {
+  const state = useStore<any>({ _active: false, _id: \\"abc\\" });
+  useTask$(({ track }) => {
+    if (_do.bind(null, props, state)) {
+      _do(props, state, state._id);
+    }
+  });
+
+  return <div>Test</div>;
+});
+
+export default UseValueAndFnFromStore;
+"
+`;
+
 exports[`qwik > jsx > Typescript Test > Video 1`] = `
 "import { Fragment, component$, h } 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 b7039cbbf6..745d55dbb2 100644
--- a/packages/core/src/__tests__/__snapshots__/react-native.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/react-native.test.ts.snap
@@ -1466,6 +1466,42 @@ export default Stepper;
 "
 `;
 
+exports[`React Native > jsx > Javascript Test > NestedStore 1`] = `
+"import * as React from \\"react\\";
+import {
+  FlatList,
+  ScrollView,
+  View,
+  StyleSheet,
+  Image,
+  Text,
+  Pressable,
+  TextInput,
+  TouchableOpacity,
+  Button,
+  Linking,
+} from \\"react-native\\";
+import { useState } from \\"react\\";
+
+function NestedStore(props) {
+  const [_id, set_id] = useState(() => \\"abc\\");
+
+  const [_messageId, set_messageId] = useState(() => _id + \\"-message\\");
+
+  return (
+    <View id={_id}>
+      <Text>Test</Text>
+      <View id={_messageId}>
+        <Text>Message</Text>
+      </View>
+    </View>
+  );
+}
+
+export default NestedStore;
+"
+`;
+
 exports[`React Native > jsx > Javascript Test > RawText 1`] = `
 "import * as React from \\"react\\";
 import {
@@ -1904,6 +1940,53 @@ export default Textarea;
 "
 `;
 
+exports[`React Native > jsx > Javascript Test > UseValueAndFnFromStore 1`] = `
+"import * as React from \\"react\\";
+import {
+  FlatList,
+  ScrollView,
+  View,
+  StyleSheet,
+  Image,
+  Text,
+  Pressable,
+  TextInput,
+  TouchableOpacity,
+  Button,
+  Linking,
+} from \\"react-native\\";
+import { useState, useEffect } from \\"react\\";
+
+function UseValueAndFnFromStore(props) {
+  const [_id, set_id] = useState(() => \\"abc\\");
+
+  const [_active, set_active] = useState(() => false);
+
+  function _do(id) {
+    _active = !!id;
+
+    if (props.onChange) {
+      props.onChange(_active);
+    }
+  }
+
+  useEffect(() => {
+    if (_do) {
+      _do(_id);
+    }
+  });
+
+  return (
+    <View>
+      <Text>Test</Text>
+    </View>
+  );
+}
+
+export default UseValueAndFnFromStore;
+"
+`;
+
 exports[`React Native > jsx > Javascript Test > Video 1`] = `
 "import * as React from \\"react\\";
 import {
@@ -6346,6 +6429,47 @@ export default Stepper;
 "
 `;
 
+exports[`React Native > jsx > Typescript Test > NestedStore 1`] = `
+"import * as React from \\"react\\";
+import {
+  FlatList,
+  ScrollView,
+  View,
+  StyleSheet,
+  Image,
+  Text,
+  Pressable,
+  TextInput,
+  TouchableOpacity,
+  Button,
+  Linking,
+} from \\"react-native\\";
+import { useState } from \\"react\\";
+
+type MyStore = {
+  _id?: string;
+  _messageId?: string;
+};
+
+function NestedStore(props: any) {
+  const [_id, set_id] = useState(() => \\"abc\\");
+
+  const [_messageId, set_messageId] = useState(() => _id + \\"-message\\");
+
+  return (
+    <View id={_id}>
+      <Text>Test</Text>
+      <View id={_messageId}>
+        <Text>Message</Text>
+      </View>
+    </View>
+  );
+}
+
+export default NestedStore;
+"
+`;
+
 exports[`React Native > jsx > Typescript Test > RawText 1`] = `
 "import * as React from \\"react\\";
 import {
@@ -6850,6 +6974,62 @@ export default Textarea;
 "
 `;
 
+exports[`React Native > jsx > Typescript Test > UseValueAndFnFromStore 1`] = `
+"import * as React from \\"react\\";
+import {
+  FlatList,
+  ScrollView,
+  View,
+  StyleSheet,
+  Image,
+  Text,
+  Pressable,
+  TextInput,
+  TouchableOpacity,
+  Button,
+  Linking,
+} from \\"react-native\\";
+import { useState, useEffect } from \\"react\\";
+
+type MyProps = {
+  onChange?: (active: boolean) => void;
+};
+type MyStore = {
+  _id?: string;
+  _active?: boolean;
+  _do?: (id?: string) => void;
+};
+
+function UseValueAndFnFromStore(props: MyProps) {
+  const [_id, set_id] = useState(() => \\"abc\\");
+
+  const [_active, set_active] = useState(() => false);
+
+  function _do(id?: string) {
+    _active = !!id;
+
+    if (props.onChange) {
+      props.onChange(_active);
+    }
+  }
+
+  useEffect(() => {
+    if (_do) {
+      _do(_id);
+    }
+  });
+
+  return (
+    <View>
+      <Text>Test</Text>
+    </View>
+  );
+}
+
+export default UseValueAndFnFromStore;
+"
+`;
+
 exports[`React Native > jsx > Typescript Test > Video 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 a21a7e9b54..0518c45f27 100644
--- a/packages/core/src/__tests__/__snapshots__/react.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/react.test.ts.snap
@@ -1204,6 +1204,28 @@ export default Stepper;
 "
 `;
 
+exports[`React > jsx > Javascript Test > NestedStore 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useState } from \\"react\\";
+
+function NestedStore(props) {
+  const [_id, set_id] = useState(() => \\"abc\\");
+
+  const [_messageId, set_messageId] = useState(() => _id + \\"-message\\");
+
+  return (
+    <div id={_id}>
+      Test
+      <p id={_messageId}>Message</p>
+    </div>
+  );
+}
+
+export default NestedStore;
+"
+`;
+
 exports[`React > jsx > Javascript Test > RawText 1`] = `
 "import * as React from \\"react\\";
 
@@ -1507,6 +1529,37 @@ export default Textarea;
 "
 `;
 
+exports[`React > jsx > Javascript Test > UseValueAndFnFromStore 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useState, useEffect } from \\"react\\";
+
+function UseValueAndFnFromStore(props) {
+  const [_id, set_id] = useState(() => \\"abc\\");
+
+  const [_active, set_active] = useState(() => false);
+
+  function _do(id) {
+    _active = !!id;
+
+    if (props.onChange) {
+      props.onChange(_active);
+    }
+  }
+
+  useEffect(() => {
+    if (_do) {
+      _do(_id);
+    }
+  });
+
+  return <div>Test</div>;
+}
+
+export default UseValueAndFnFromStore;
+"
+`;
+
 exports[`React > jsx > Javascript Test > Video 1`] = `
 "import * as React from \\"react\\";
 
@@ -4662,6 +4715,33 @@ export default Stepper;
 "
 `;
 
+exports[`React > jsx > Typescript Test > NestedStore 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useState } from \\"react\\";
+
+type MyStore = {
+  _id?: string;
+  _messageId?: string;
+};
+
+function NestedStore(props: any) {
+  const [_id, set_id] = useState(() => \\"abc\\");
+
+  const [_messageId, set_messageId] = useState(() => _id + \\"-message\\");
+
+  return (
+    <div id={_id}>
+      Test
+      <p id={_messageId}>Message</p>
+    </div>
+  );
+}
+
+export default NestedStore;
+"
+`;
+
 exports[`React > jsx > Typescript Test > RawText 1`] = `
 "import * as React from \\"react\\";
 
@@ -5031,6 +5111,46 @@ export default Textarea;
 "
 `;
 
+exports[`React > jsx > Typescript Test > UseValueAndFnFromStore 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useState, useEffect } from \\"react\\";
+
+type MyProps = {
+  onChange?: (active: boolean) => void;
+};
+type MyStore = {
+  _id?: string;
+  _active?: boolean;
+  _do?: (id?: string) => void;
+};
+
+function UseValueAndFnFromStore(props: MyProps) {
+  const [_id, set_id] = useState(() => \\"abc\\");
+
+  const [_active, set_active] = useState(() => false);
+
+  function _do(id?: string) {
+    _active = !!id;
+
+    if (props.onChange) {
+      props.onChange(_active);
+    }
+  }
+
+  useEffect(() => {
+    if (_do) {
+      _do(_id);
+    }
+  });
+
+  return <div>Test</div>;
+}
+
+export default UseValueAndFnFromStore;
+"
+`;
+
 exports[`React > jsx > Typescript Test > Video 1`] = `
 "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 d5b1d312b9..e1a2b52c7d 100644
--- a/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap
@@ -1201,6 +1201,28 @@ export default Stepper;
 "
 `;
 
+exports[`RSC > jsx > Javascript Test > NestedStore 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useState } from \\"react\\";
+
+function NestedStore(props) {
+  const [_id, set_id] = useState(() => \\"abc\\");
+
+  const [_messageId, set_messageId] = useState(() => _id + \\"-message\\");
+
+  return (
+    <div id={_id}>
+      Test
+      <p id={_messageId}>Message</p>
+    </div>
+  );
+}
+
+export default NestedStore;
+"
+`;
+
 exports[`RSC > jsx > Javascript Test > RawText 1`] = `
 "import * as React from \\"react\\";
 
@@ -1504,6 +1526,37 @@ export default Textarea;
 "
 `;
 
+exports[`RSC > jsx > Javascript Test > UseValueAndFnFromStore 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useState, useEffect } from \\"react\\";
+
+function UseValueAndFnFromStore(props) {
+  const [_id, set_id] = useState(() => \\"abc\\");
+
+  const [_active, set_active] = useState(() => false);
+
+  function _do(id) {
+    _active = !!id;
+
+    if (props.onChange) {
+      props.onChange(_active);
+    }
+  }
+
+  useEffect(() => {
+    if (_do) {
+      _do(_id);
+    }
+  });
+
+  return <div>Test</div>;
+}
+
+export default UseValueAndFnFromStore;
+"
+`;
+
 exports[`RSC > jsx > Javascript Test > Video 1`] = `
 "import * as React from \\"react\\";
 
@@ -4401,6 +4454,33 @@ export default Stepper;
 "
 `;
 
+exports[`RSC > jsx > Typescript Test > NestedStore 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useState } from \\"react\\";
+
+type MyStore = {
+  _id?: string;
+  _messageId?: string;
+};
+
+function NestedStore(props: any) {
+  const [_id, set_id] = useState(() => \\"abc\\");
+
+  const [_messageId, set_messageId] = useState(() => _id + \\"-message\\");
+
+  return (
+    <div id={_id}>
+      Test
+      <p id={_messageId}>Message</p>
+    </div>
+  );
+}
+
+export default NestedStore;
+"
+`;
+
 exports[`RSC > jsx > Typescript Test > RawText 1`] = `
 "import * as React from \\"react\\";
 
@@ -4770,6 +4850,46 @@ export default Textarea;
 "
 `;
 
+exports[`RSC > jsx > Typescript Test > UseValueAndFnFromStore 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useState, useEffect } from \\"react\\";
+
+type MyProps = {
+  onChange?: (active: boolean) => void;
+};
+type MyStore = {
+  _id?: string;
+  _active?: boolean;
+  _do?: (id?: string) => void;
+};
+
+function UseValueAndFnFromStore(props: MyProps) {
+  const [_id, set_id] = useState(() => \\"abc\\");
+
+  const [_active, set_active] = useState(() => false);
+
+  function _do(id?: string) {
+    _active = !!id;
+
+    if (props.onChange) {
+      props.onChange(_active);
+    }
+  }
+
+  useEffect(() => {
+    if (_do) {
+      _do(_id);
+    }
+  });
+
+  return <div>Test</div>;
+}
+
+export default UseValueAndFnFromStore;
+"
+`;
+
 exports[`RSC > jsx > Typescript Test > Video 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 1eb42a35c1..2fdbb472a2 100644
--- a/packages/core/src/__tests__/__snapshots__/solid.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/solid.test.ts.snap
@@ -2560,6 +2560,50 @@ export default Stepper;
 "
 `;
 
+exports[`Solid > jsx > Javascript Test > NestedStore 1`] = `
+"import { createSignal, createMemo } from \\"solid-js\\";
+
+function NestedStore(props) {
+  const [_id, set_id] = createSignal(\\"abc\\");
+
+  const [_messageId, set_messageId] = createSignal(this._id + \\"-message\\");
+
+  return (
+    <>
+      <div id={_id()}>
+        Test
+        <p id={_messageId()}>Message</p>
+      </div>
+    </>
+  );
+}
+
+export default NestedStore;
+"
+`;
+
+exports[`Solid > jsx > Javascript Test > NestedStore 2`] = `
+"import { createSignal, createMemo } from \\"solid-js\\";
+
+function NestedStore(props) {
+  const [_id, set_id] = createSignal(\\"abc\\");
+
+  const [_messageId, set_messageId] = createSignal(this._id + \\"-message\\");
+
+  return (
+    <>
+      <div id={_id()}>
+        Test
+        <p id={_messageId()}>Message</p>
+      </div>
+    </>
+  );
+}
+
+export default NestedStore;
+"
+`;
+
 exports[`Solid > jsx > Javascript Test > RawText 1`] = `
 "function RawText(props) {
   return (
@@ -3258,6 +3302,60 @@ export default Textarea;
 "
 `;
 
+exports[`Solid > jsx > Javascript Test > UseValueAndFnFromStore 1`] = `
+"import { on, createEffect, createMemo, createSignal } from \\"solid-js\\";
+
+function UseValueAndFnFromStore(props) {
+  const [_id, set_id] = createSignal(\\"abc\\");
+
+  const [_active, set_active] = createSignal(false);
+
+  function _do(id) {
+    this._active = !!id;
+
+    if (props.onChange) {
+      props.onChange(this._active);
+    }
+  }
+
+  return (
+    <>
+      <div>Test</div>
+    </>
+  );
+}
+
+export default UseValueAndFnFromStore;
+"
+`;
+
+exports[`Solid > jsx > Javascript Test > UseValueAndFnFromStore 2`] = `
+"import { on, createEffect, createMemo, createSignal } from \\"solid-js\\";
+
+function UseValueAndFnFromStore(props) {
+  const [_id, set_id] = createSignal(\\"abc\\");
+
+  const [_active, set_active] = createSignal(false);
+
+  function _do(id) {
+    this._active = !!id;
+
+    if (props.onChange) {
+      props.onChange(this._active);
+    }
+  }
+
+  return (
+    <>
+      <div>Test</div>
+    </>
+  );
+}
+
+export default UseValueAndFnFromStore;
+"
+`;
+
 exports[`Solid > jsx > Javascript Test > Video 1`] = `
 "function Video(props) {
   return (
@@ -9730,6 +9828,60 @@ export default Stepper;
 "
 `;
 
+exports[`Solid > jsx > Typescript Test > NestedStore 1`] = `
+"import { createSignal, createMemo } from \\"solid-js\\";
+
+type MyStore = {
+  _id?: string;
+  _messageId?: string;
+};
+
+function NestedStore(props: any) {
+  const [_id, set_id] = createSignal(\\"abc\\");
+
+  const [_messageId, set_messageId] = createSignal(this._id + \\"-message\\");
+
+  return (
+    <>
+      <div id={_id()}>
+        Test
+        <p id={_messageId()}>Message</p>
+      </div>
+    </>
+  );
+}
+
+export default NestedStore;
+"
+`;
+
+exports[`Solid > jsx > Typescript Test > NestedStore 2`] = `
+"import { createSignal, createMemo } from \\"solid-js\\";
+
+type MyStore = {
+  _id?: string;
+  _messageId?: string;
+};
+
+function NestedStore(props: any) {
+  const [_id, set_id] = createSignal(\\"abc\\");
+
+  const [_messageId, set_messageId] = createSignal(this._id + \\"-message\\");
+
+  return (
+    <>
+      <div id={_id()}>
+        Test
+        <p id={_messageId()}>Message</p>
+      </div>
+    </>
+  );
+}
+
+export default NestedStore;
+"
+`;
+
 exports[`Solid > jsx > Typescript Test > RawText 1`] = `
 "export interface RawTextProps {
   attributes?: any;
@@ -10568,6 +10720,78 @@ export default Textarea;
 "
 `;
 
+exports[`Solid > jsx > Typescript Test > UseValueAndFnFromStore 1`] = `
+"import { on, createEffect, createMemo, createSignal } from \\"solid-js\\";
+
+type MyProps = {
+  onChange?: (active: boolean) => void;
+};
+type MyStore = {
+  _id?: string;
+  _active?: boolean;
+  _do?: (id?: string) => void;
+};
+
+function UseValueAndFnFromStore(props: MyProps) {
+  const [_id, set_id] = createSignal(\\"abc\\");
+
+  const [_active, set_active] = createSignal(false);
+
+  function _do(id?: string) {
+    this._active = !!id;
+
+    if (props.onChange) {
+      props.onChange(this._active);
+    }
+  }
+
+  return (
+    <>
+      <div>Test</div>
+    </>
+  );
+}
+
+export default UseValueAndFnFromStore;
+"
+`;
+
+exports[`Solid > jsx > Typescript Test > UseValueAndFnFromStore 2`] = `
+"import { on, createEffect, createMemo, createSignal } from \\"solid-js\\";
+
+type MyProps = {
+  onChange?: (active: boolean) => void;
+};
+type MyStore = {
+  _id?: string;
+  _active?: boolean;
+  _do?: (id?: string) => void;
+};
+
+function UseValueAndFnFromStore(props: MyProps) {
+  const [_id, set_id] = createSignal(\\"abc\\");
+
+  const [_active, set_active] = createSignal(false);
+
+  function _do(id?: string) {
+    this._active = !!id;
+
+    if (props.onChange) {
+      props.onChange(this._active);
+    }
+  }
+
+  return (
+    <>
+      <div>Test</div>
+    </>
+  );
+}
+
+export default UseValueAndFnFromStore;
+"
+`;
+
 exports[`Solid > jsx > Typescript Test > Video 1`] = `
 "export interface VideoProps {
   attributes?: any;
diff --git a/packages/core/src/__tests__/__snapshots__/stencil.test.ts.snap b/packages/core/src/__tests__/__snapshots__/stencil.test.ts.snap
index d37f1a2b4f..289ea1e2c9 100644
--- a/packages/core/src/__tests__/__snapshots__/stencil.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/stencil.test.ts.snap
@@ -1269,6 +1269,28 @@ export default class Stepper {
 "
 `;
 
+exports[`Stencil > jsx > Javascript Test > NestedStore 1`] = `
+"import { Component, Prop, h, State, Fragment } from \\"@stencil/core\\";
+
+@Component({
+  tag: \\"nested-store\\",
+})
+export default class NestedStore {
+  @State() _id = \\"abc\\";
+  @State() _messageId = this._id + \\"-message\\";
+
+  render() {
+    return (
+      <div id={this._id}>
+        Test
+        <p id={this._messageId}>Message</p>
+      </div>
+    );
+  }
+}
+"
+`;
+
 exports[`Stencil > jsx > Javascript Test > RawText 1`] = `
 "import { Component, Prop, h, State, Fragment } from \\"@stencil/core\\";
 
@@ -1633,6 +1655,39 @@ export default class Textarea {
 "
 `;
 
+exports[`Stencil > jsx > Javascript Test > UseValueAndFnFromStore 1`] = `
+"import { Component, Prop, h, State, Fragment } from \\"@stencil/core\\";
+
+@Component({
+  tag: \\"use-value-and-fn-from-store\\",
+})
+export default class UseValueAndFnFromStore {
+  @Prop() onChange: any;
+
+  @State() _id = \\"abc\\";
+  @State() _active = false;
+
+  _do(id) {
+    this._active = !!id;
+
+    if (this.onChange) {
+      this.onChange(this._active);
+    }
+  }
+
+  componentDidUpdate() {
+    if (this._do) {
+      this._do(this._id);
+    }
+  }
+
+  render() {
+    return <div>Test</div>;
+  }
+}
+"
+`;
+
 exports[`Stencil > jsx > Javascript Test > Video 1`] = `
 "import { Component, Prop, h, State, Fragment } from \\"@stencil/core\\";
 
@@ -4353,6 +4408,28 @@ export default class Stepper {
 "
 `;
 
+exports[`Stencil > jsx > Typescript Test > NestedStore 1`] = `
+"import { Component, Prop, h, State, Fragment } from \\"@stencil/core\\";
+
+@Component({
+  tag: \\"nested-store\\",
+})
+export default class NestedStore {
+  @State() _id = \\"abc\\";
+  @State() _messageId = this._id + \\"-message\\";
+
+  render() {
+    return (
+      <div id={this._id}>
+        Test
+        <p id={this._messageId}>Message</p>
+      </div>
+    );
+  }
+}
+"
+`;
+
 exports[`Stencil > jsx > Typescript Test > RawText 1`] = `
 "import { Component, Prop, h, State, Fragment } from \\"@stencil/core\\";
 
@@ -4717,6 +4794,39 @@ export default class Textarea {
 "
 `;
 
+exports[`Stencil > jsx > Typescript Test > UseValueAndFnFromStore 1`] = `
+"import { Component, Prop, h, State, Fragment } from \\"@stencil/core\\";
+
+@Component({
+  tag: \\"use-value-and-fn-from-store\\",
+})
+export default class UseValueAndFnFromStore {
+  @Prop() onChange: any;
+
+  @State() _id = \\"abc\\";
+  @State() _active = false;
+
+  _do(id?: string) {
+    this._active = !!id;
+
+    if (this.onChange) {
+      this.onChange(this._active);
+    }
+  }
+
+  componentDidUpdate() {
+    if (this._do) {
+      this._do(this._id);
+    }
+  }
+
+  render() {
+    return <div>Test</div>;
+  }
+}
+"
+`;
+
 exports[`Stencil > jsx > Typescript Test > Video 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 bc71cdbca9..af2a525985 100644
--- a/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap
@@ -1092,6 +1092,19 @@ exports[`Svelte > jsx > Javascript Test > InputParent 1`] = `
 />"
 `;
 
+exports[`Svelte > jsx > Javascript Test > NestedStore 1`] = `
+"<script>
+  let _id = \\"abc\\";
+
+  let _messageId = this._id + \\"-message\\";
+</script>
+
+<div id={_id}>
+  Test
+  <p id={_messageId}>Message</p>
+</div>"
+`;
+
 exports[`Svelte > jsx > Javascript Test > RawText 1`] = `
 "<script>
   export let attributes;
@@ -1387,6 +1400,33 @@ exports[`Svelte > jsx > Javascript Test > Textarea 1`] = `
 <textarea {...attributes} {placeholder} {name} {value} {defaultValue} />"
 `;
 
+exports[`Svelte > jsx > Javascript Test > UseValueAndFnFromStore 1`] = `
+"<script>
+  import { afterUpdate } from \\"svelte\\";
+
+  export let onChange;
+
+  function _do(id) {
+    this._active = !!id;
+
+    if (onChange) {
+      onChange(this._active);
+    }
+  }
+
+  let _id = \\"abc\\";
+  let _active = false;
+
+  afterUpdate(() => {
+    if (_do) {
+      _do(_id);
+    }
+  });
+</script>
+
+<div>Test</div>"
+`;
+
 exports[`Svelte > jsx > Javascript Test > Video 1`] = `
 "<script>
   export let attributes;
@@ -4102,6 +4142,26 @@ exports[`Svelte > jsx > Typescript Test > InputParent 1`] = `
 />"
 `;
 
+exports[`Svelte > jsx > Typescript Test > NestedStore 1`] = `
+"<script context=\\"module\\" lang=\\"ts\\">
+  type MyStore = {
+    _id?: string;
+    _messageId?: string;
+  };
+</script>
+
+<script lang=\\"ts\\">
+  let _id = \\"abc\\";
+
+  let _messageId = this._id + \\"-message\\";
+</script>
+
+<div id={_id}>
+  Test
+  <p id={_messageId}>Message</p>
+</div>"
+`;
+
 exports[`Svelte > jsx > Typescript Test > RawText 1`] = `
 "<script context=\\"module\\" lang=\\"ts\\">
   export interface RawTextProps {
@@ -4502,6 +4562,45 @@ exports[`Svelte > jsx > Typescript Test > Textarea 1`] = `
 <textarea {...attributes} {placeholder} {name} {value} {defaultValue} />"
 `;
 
+exports[`Svelte > jsx > Typescript Test > UseValueAndFnFromStore 1`] = `
+"<script context=\\"module\\" lang=\\"ts\\">
+  type MyProps = {
+    onChange?: (active: boolean) => void;
+  };
+
+  type MyStore = {
+    _id?: string;
+    _active?: boolean;
+    _do?: (id?: string) => void;
+  };
+</script>
+
+<script lang=\\"ts\\">
+  import { afterUpdate } from \\"svelte\\";
+
+  export let onChange: MyProps[\\"onChange\\"] = undefined;
+
+  function _do(id?: string) {
+    this._active = !!id;
+
+    if (onChange) {
+      onChange(this._active);
+    }
+  }
+
+  let _id = \\"abc\\";
+  let _active = false;
+
+  afterUpdate(() => {
+    if (_do) {
+      _do(_id);
+    }
+  });
+</script>
+
+<div>Test</div>"
+`;
+
 exports[`Svelte > jsx > Typescript Test > Video 1`] = `
 "<script context=\\"module\\" lang=\\"ts\\">
   export interface VideoProps {
diff --git a/packages/core/src/__tests__/__snapshots__/taro.test.ts.snap b/packages/core/src/__tests__/__snapshots__/taro.test.ts.snap
index 8aaed01595..1f3dae64da 100644
--- a/packages/core/src/__tests__/__snapshots__/taro.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/taro.test.ts.snap
@@ -1203,6 +1203,29 @@ export default Stepper;
 "
 `;
 
+exports[`Taro > jsx > Javascript Test > NestedStore 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useState } from \\"react\\";
+import { View, Text } from \\"@tarojs/components\\";
+
+function NestedStore(props) {
+  const [_id, set_id] = useState(() => \\"abc\\");
+
+  const [_messageId, set_messageId] = useState(() => _id + \\"-message\\");
+
+  return (
+    <View id={_id}>
+      Test
+      <View id={_messageId}>Message</View>
+    </View>
+  );
+}
+
+export default NestedStore;
+"
+`;
+
 exports[`Taro > jsx > Javascript Test > RawText 1`] = `
 "import * as React from \\"react\\";
 import { Text } from \\"@tarojs/components\\";
@@ -1510,6 +1533,38 @@ export default Textarea;
 "
 `;
 
+exports[`Taro > jsx > Javascript Test > UseValueAndFnFromStore 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useState, useEffect } from \\"react\\";
+import { View, Text } from \\"@tarojs/components\\";
+
+function UseValueAndFnFromStore(props) {
+  const [_id, set_id] = useState(() => \\"abc\\");
+
+  const [_active, set_active] = useState(() => false);
+
+  function _do(id) {
+    _active = !!id;
+
+    if (props.onChange) {
+      props.onChange(_active);
+    }
+  }
+
+  useEffect(() => {
+    if (_do) {
+      _do(_id);
+    }
+  });
+
+  return <View>Test</View>;
+}
+
+export default UseValueAndFnFromStore;
+"
+`;
+
 exports[`Taro > jsx > Javascript Test > Video 1`] = `
 "import * as React from \\"react\\";
 import { View } from \\"@tarojs/components\\";
@@ -4732,6 +4787,34 @@ export default Stepper;
 "
 `;
 
+exports[`Taro > jsx > Typescript Test > NestedStore 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useState } from \\"react\\";
+
+type MyStore = {
+  _id?: string;
+  _messageId?: string;
+};
+import { View, Text } from \\"@tarojs/components\\";
+
+function NestedStore(props: any) {
+  const [_id, set_id] = useState(() => \\"abc\\");
+
+  const [_messageId, set_messageId] = useState(() => _id + \\"-message\\");
+
+  return (
+    <View id={_id}>
+      Test
+      <View id={_messageId}>Message</View>
+    </View>
+  );
+}
+
+export default NestedStore;
+"
+`;
+
 exports[`Taro > jsx > Typescript Test > RawText 1`] = `
 "import * as React from \\"react\\";
 
@@ -5109,6 +5192,47 @@ export default Textarea;
 "
 `;
 
+exports[`Taro > jsx > Typescript Test > UseValueAndFnFromStore 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useState, useEffect } from \\"react\\";
+
+type MyProps = {
+  onChange?: (active: boolean) => void;
+};
+type MyStore = {
+  _id?: string;
+  _active?: boolean;
+  _do?: (id?: string) => void;
+};
+import { View, Text } from \\"@tarojs/components\\";
+
+function UseValueAndFnFromStore(props: MyProps) {
+  const [_id, set_id] = useState(() => \\"abc\\");
+
+  const [_active, set_active] = useState(() => false);
+
+  function _do(id?: string) {
+    _active = !!id;
+
+    if (props.onChange) {
+      props.onChange(_active);
+    }
+  }
+
+  useEffect(() => {
+    if (_do) {
+      _do(_id);
+    }
+  });
+
+  return <View>Test</View>;
+}
+
+export default UseValueAndFnFromStore;
+"
+`;
+
 exports[`Taro > jsx > Typescript Test > Video 1`] = `
 "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 e1a30d8579..416200e840 100644
--- a/packages/core/src/__tests__/__snapshots__/vue-composition.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/vue-composition.test.ts.snap
@@ -34,7 +34,7 @@ const inputRef = ref(null);
 const inputNoArgRef = ref(null);
 
 watch(
-  () => [inputRef.value, inputNoArgRef.value],
+  () => [inputRef?.value, inputNoArgRef?.value],
   () => {
     console.log(\\"Received an update\\");
   },
@@ -42,10 +42,10 @@ watch(
 );
 function onBlur() {
   // Maintain focus
-  inputRef.value.focus();
+  inputRef?.value.focus();
 }
 function lowerCaseName() {
-  return name.value.toLowerCase();
+  return name?.value.toLowerCase();
 }
 </script>
 
@@ -181,7 +181,7 @@ const props = defineProps([\\"onMessage\\", \\"onEvent\\", \\"message\\"]);
 const name = ref(\\"PatrickJS\\");
 
 onMounted(() => {
-  props.onMessage(name);
+  props.onMessage(name?.value);
   props.onEvent(props.message);
 });
 </script>"
@@ -199,7 +199,7 @@ const props = defineProps([\\"onMessage\\", \\"onEvent\\", \\"message\\"]);
 const name = ref(\\"PatrickJS\\");
 
 onMounted(() => {
-  props.onMessage(name);
+  props.onMessage(name?.value);
   props.onEvent(props.message);
 });
 </script>"
@@ -319,10 +319,10 @@ const inputNoArgRef = ref(null);
 
 function onBlur() {
   // Maintain focus
-  inputRef.value.focus();
+  inputRef?.value.focus();
 }
 function lowerCaseName() {
-  return name.value.toLowerCase();
+  return name?.value.toLowerCase();
 }
 </script>
 
@@ -339,12 +339,14 @@ exports[`Vue > jsx > Javascript Test > BasicRefAssignment 1`] = `
 </template>
 
 <script setup>
+import { ref } from \\"vue\\";
+
 const holdValueRef = ref(null);
 
 function handlerClick(event) {
   event.preventDefault();
-  console.log(\\"current value\\", holdValueRef);
-  holdValueRef.value = holdValueRef.value + \\"JS\\";
+  console.log(\\"current value\\", holdValueRef?.value);
+  holdValueRef.value = holdValueRef?.value + \\"JS\\";
 }
 </script>"
 `;
@@ -378,7 +380,7 @@ const count = ref(0);
 const prevCount = ref(null);
 
 watch(
-  () => [count.value],
+  () => [count?.value],
   () => {
     prevCount.value = count.value;
   },
@@ -510,7 +512,7 @@ const showContent = ref(false);
 
 const cls = computed(() => {
   return useSlots().content && useSlots().default
-    ? \`\${name.value}-content\`
+    ? \`\${name?.value}-content\`
     : \\"\\";
 });
 
@@ -544,19 +546,19 @@ onMounted(() => {
 
 function findAndRunScripts() {
   // TODO: Move this function to standalone one in '@builder.io/utils'
-  if (elem.value && typeof window !== \\"undefined\\") {
+  if (elem?.value && typeof window !== \\"undefined\\") {
     /** @type {HTMLScriptElement[]} */
-    const scripts = elem.value.getElementsByTagName(\\"script\\");
+    const scripts = elem?.value.getElementsByTagName(\\"script\\");
 
     for (let i = 0; i < scripts.length; i++) {
       const script = scripts[i];
 
       if (script.src) {
-        if (scriptsInserted.value.includes(script.src)) {
+        if (scriptsInserted?.value.includes(script.src)) {
           continue;
         }
 
-        scriptsInserted.value.push(script.src);
+        scriptsInserted?.value.push(script.src);
         const newScript = document.createElement(\\"script\\");
         newScript.async = true;
         newScript.src = script.src;
@@ -569,12 +571,12 @@ function findAndRunScripts() {
           \\"application/ecmascript\\",
         ].includes(script.type)
       ) {
-        if (scriptsRun.value.includes(script.innerText)) {
+        if (scriptsRun?.value.includes(script.innerText)) {
           continue;
         }
 
         try {
-          scriptsRun.value.push(script.innerText);
+          scriptsRun?.value.push(script.innerText);
           new Function(script.innerText)();
         } catch (error) {
           console.warn(\\"\`CustomCode\`: Error running script:\\", error);
@@ -610,19 +612,19 @@ onMounted(() => {
 
 function findAndRunScripts() {
   // TODO: Move this function to standalone one in '@builder.io/utils'
-  if (elem.value && typeof window !== \\"undefined\\") {
+  if (elem?.value && typeof window !== \\"undefined\\") {
     /** @type {HTMLScriptElement[]} */
-    const scripts = elem.value.getElementsByTagName(\\"script\\");
+    const scripts = elem?.value.getElementsByTagName(\\"script\\");
 
     for (let i = 0; i < scripts.length; i++) {
       const script = scripts[i];
 
       if (script.src) {
-        if (scriptsInserted.value.includes(script.src)) {
+        if (scriptsInserted?.value.includes(script.src)) {
           continue;
         }
 
-        scriptsInserted.value.push(script.src);
+        scriptsInserted?.value.push(script.src);
         const newScript = document.createElement(\\"script\\");
         newScript.async = true;
         newScript.src = script.src;
@@ -635,12 +637,12 @@ function findAndRunScripts() {
           \\"application/ecmascript\\",
         ].includes(script.type)
       ) {
-        if (scriptsRun.value.includes(script.innerText)) {
+        if (scriptsRun?.value.includes(script.innerText)) {
           continue;
         }
 
         try {
-          scriptsRun.value.push(script.innerText);
+          scriptsRun?.value.push(script.innerText);
           new Function(script.innerText)();
         } catch (error) {
           console.warn(\\"\`CustomCode\`: Error running script:\\", error);
@@ -742,7 +744,7 @@ const formErrorMessage = ref(\\"\\");
 const formRef = ref(null);
 
 const submissionState = computed(() => {
-  return (Builder.isEditing && props.previewState) || formState.value;
+  return (Builder.isEditing && props.previewState) || formState?.value;
 });
 
 function onSubmit(event) {
@@ -846,8 +848,8 @@ function onSubmit(event) {
       },
     });
 
-    if (formRef.value) {
-      formRef.value.dispatchEvent(presubmitEvent);
+    if (formRef?.value) {
+      formRef?.value.dispatchEvent(presubmitEvent);
 
       if (presubmitEvent.defaultPrevented) {
         return;
@@ -905,8 +907,8 @@ function onSubmit(event) {
             },
           });
 
-          if (formRef.value) {
-            formRef.value.dispatchEvent(submitSuccessEvent);
+          if (formRef?.value) {
+            formRef?.value.dispatchEvent(submitSuccessEvent);
 
             if (submitSuccessEvent.defaultPrevented) {
               return;
@@ -914,19 +916,19 @@ function onSubmit(event) {
             /* TODO: option to turn this on/off? */
 
             if (props.resetFormOnSubmit !== false) {
-              formRef.value.reset();
+              formRef?.value.reset();
             }
           }
           /* TODO: client side route event first that can be preventDefaulted */
 
           if (props.successUrl) {
-            if (formRef.value) {
+            if (formRef?.value) {
               const event = new CustomEvent(\\"route\\", {
                 detail: {
                   url: props.successUrl,
                 },
               });
-              formRef.value.dispatchEvent(event);
+              formRef?.value.dispatchEvent(event);
 
               if (!event.defaultPrevented) {
                 location.href = props.successUrl;
@@ -944,8 +946,8 @@ function onSubmit(event) {
           },
         });
 
-        if (formRef.value) {
-          formRef.value.dispatchEvent(submitErrorEvent);
+        if (formRef?.value) {
+          formRef?.value.dispatchEvent(submitErrorEvent);
 
           if (submitErrorEvent.defaultPrevented) {
             return;
@@ -1012,8 +1014,8 @@ onMounted(() => {
   if (useLazyLoading()) {
     // throttled scroll capture listener
     const listener = () => {
-      if (pictureRef.value) {
-        const rect = pictureRef.value.getBoundingClientRect();
+      if (pictureRef?.value) {
+        const rect = pictureRef?.value.getBoundingClientRect();
         const buffer = window.innerHeight / 2;
 
         if (rect.top < window.innerHeight + buffer) {
@@ -1033,8 +1035,8 @@ onMounted(() => {
   }
 });
 onUnmounted(() => {
-  if (scrollListener.value) {
-    window.removeEventListener(\\"scroll\\", scrollListener);
+  if (scrollListener?.value) {
+    window.removeEventListener(\\"scroll\\", scrollListener?.value);
   }
 });
 
@@ -1155,6 +1157,22 @@ function handleChange(value) {
 </script>"
 `;
 
+exports[`Vue > jsx > Javascript Test > NestedStore 1`] = `
+"<template>
+  <div :id=\\"_id\\">
+    Test
+    <p :id=\\"_messageId\\">Message</p>
+  </div>
+</template>
+
+<script setup>
+import { ref } from \\"vue\\";
+
+const _id = ref(\\"abc\\");
+const _messageId = ref(_id?.value + \\"-message\\");
+</script>"
+`;
+
 exports[`Vue > jsx > Javascript Test > RawText 1`] = `
 "<template>
   <span
@@ -1432,6 +1450,52 @@ const props = defineProps([
 </script>"
 `;
 
+exports[`Vue > jsx > Javascript Test > UseValueAndFnFromStore 1`] = `
+"<template>
+  <div>Test</div>
+</template>
+
+<script setup>
+    import { onUpdated, ref } from \\"vue\\"
+
+
+
+
+
+
+
+
+
+    const props = defineProps(['onChange'])
+const _id= ref('abc')
+const _active= ref(false)
+
+
+
+
+
+
+
+
+
+
+
+
+onUpdated(() => {if (_do) {
+_do(_id?.value);
+}})
+
+
+ function _do(id) {
+_active?.value = !!id;
+
+if (props.onChange) {
+props.onChange(_active?.value);
+}
+}
+</script>"
+`;
+
 exports[`Vue > jsx > Javascript Test > Video 1`] = `
 "<template>
   <video
@@ -1580,7 +1644,7 @@ import { ref, watch } from \\"vue\\";
 const name = ref(\\"PatrickJS\\");
 
 watch(
-  () => [name.value],
+  () => [name?.value],
   () => {
     const controller = new AbortController();
     const signal = controller.signal;
@@ -1589,7 +1653,7 @@ watch(
     })
       .then((response) => response.json())
       .then((data) => {
-        name.value = data.name;
+        name.value = data.name?.value;
       });
     return () => {
       if (!signal.aborted) {
@@ -1927,22 +1991,22 @@ const c = ref(\\"c\\");
 const d = ref(\\"d\\");
 
 watch(
-  () => [a.value, b.value],
+  () => [a?.value, b?.value],
   () => {
-    console.log(\\"Runs when a or b changes\\", a, b);
+    console.log(\\"Runs when a or b changes\\", a?.value, b?.value);
 
-    if (a.value === \\"a\\") {
+    if (a?.value === \\"a\\") {
       a.value = \\"b\\";
     }
   },
   { immediate: true }
 );
 watch(
-  () => [c.value, d.value],
+  () => [c?.value, d?.value],
   () => {
-    console.log(\\"Runs when c or d changes\\", c, d);
+    console.log(\\"Runs when c or d changes\\", c?.value, d?.value);
 
-    if (a.value === \\"a\\") {
+    if (a?.value === \\"a\\") {
       a.value = \\"b\\";
     }
   },
@@ -2035,12 +2099,12 @@ exports[`Vue > jsx > Javascript Test > onEvent 1`] = `
 </template>
 
 <script setup>
-import { onMounted } from \\"vue\\";
+import { onMounted, ref } from \\"vue\\";
 
 const elem = ref(null);
 
 onMounted(() => {
-  elem.value.dispatchEvent(new CustomEvent(\\"initEditingBldr\\"));
+  elem?.value.dispatchEvent(new CustomEvent(\\"initEditingBldr\\"));
 });
 
 function foo(event) {
@@ -2083,7 +2147,7 @@ export const defaultValues = {
 const props = defineProps([\\"name\\"]);
 const name = ref(\\"\\");
 
-name.value = defaultValues.name || props.name;
+name.value = defaultValues.name?.value || props.name?.value;
 console.log(\\"set defaults with props\\");
 </script>"
 `;
@@ -2152,9 +2216,14 @@ const a = ref(\\"a\\");
 const b = ref(\\"b\\");
 
 watch(
-  () => [a.value, b.value, props.size],
+  () => [a?.value, b?.value, props.size],
   () => {
-    console.log(\\"Runs when a, b or size changes\\", a, b, props.size);
+    console.log(
+      \\"Runs when a, b or size changes\\",
+      a?.value,
+      b?.value,
+      props.size
+    );
   },
   { immediate: true }
 );
@@ -3046,11 +3115,11 @@ export interface Props {
 const props = defineProps<Props>();
 const name = ref(\\"PatrickJS\\");
 
-const inputRef = ref<HTMLInputElement>();
-const inputNoArgRef = ref<HTMLLabelElement>();
+const inputRef = ref<HTMLInputElement>(null);
+const inputNoArgRef = ref<HTMLLabelElement>(null);
 
 watch(
-  () => [inputRef.value, inputNoArgRef.value],
+  () => [inputRef?.value, inputNoArgRef?.value],
   () => {
     console.log(\\"Received an update\\");
   },
@@ -3058,10 +3127,10 @@ watch(
 );
 function onBlur() {
   // Maintain focus
-  inputRef.value.focus();
+  inputRef?.value.focus();
 }
 function lowerCaseName() {
-  return name.value.toLowerCase();
+  return name?.value.toLowerCase();
 }
 </script>
 
@@ -3206,7 +3275,7 @@ const props = defineProps([\\"onMessage\\", \\"onEvent\\", \\"message\\"]);
 const name = ref(\\"PatrickJS\\");
 
 onMounted(() => {
-  props.onMessage(name);
+  props.onMessage(name?.value);
   props.onEvent(props.message);
 });
 </script>"
@@ -3224,7 +3293,7 @@ const props = defineProps([\\"onMessage\\", \\"onEvent\\", \\"message\\"]);
 const name = ref(\\"PatrickJS\\");
 
 onMounted(() => {
-  props.onMessage(name);
+  props.onMessage(name?.value);
   props.onEvent(props.message);
 });
 </script>"
@@ -3348,15 +3417,15 @@ export interface Props {
 const props = defineProps<Props>();
 const name = ref(\\"PatrickJS\\");
 
-const inputRef = ref<HTMLInputElement>();
-const inputNoArgRef = ref<HTMLLabelElement>();
+const inputRef = ref<HTMLInputElement>(null);
+const inputNoArgRef = ref<HTMLLabelElement>(null);
 
 function onBlur() {
   // Maintain focus
-  inputRef.value.focus();
+  inputRef?.value.focus();
 }
 function lowerCaseName() {
-  return name.value.toLowerCase();
+  return name?.value.toLowerCase();
 }
 </script>
 
@@ -3373,16 +3442,18 @@ exports[`Vue > jsx > Typescript Test > BasicRefAssignment 1`] = `
 </template>
 
 <script setup lang=\\"ts\\">
+import { ref } from \\"vue\\";
+
 export interface Props {
   showInput: boolean;
 }
 
-const holdValueRef = ref<undefined>();
+const holdValueRef = ref<any>(null);
 
 function handlerClick(event: Event) {
   event.preventDefault();
-  console.log(\\"current value\\", holdValueRef);
-  holdValueRef.value = holdValueRef.value + \\"JS\\";
+  console.log(\\"current value\\", holdValueRef?.value);
+  holdValueRef.value = holdValueRef?.value + \\"JS\\";
 }
 </script>"
 `;
@@ -3417,10 +3488,10 @@ export interface Props {
 
 const count = ref(0);
 
-const prevCount = ref<undefined>();
+const prevCount = ref<any>(null);
 
 watch(
-  () => [count.value],
+  () => [count?.value],
   () => {
     prevCount.value = count.value;
   },
@@ -3587,7 +3658,7 @@ const showContent = ref(false);
 
 const cls = computed(() => {
   return useSlots().content && useSlots().default
-    ? \`\${name.value}-content\`
+    ? \`\${name?.value}-content\`
     : \\"\\";
 });
 
@@ -3618,7 +3689,7 @@ const props = defineProps<CustomCodeProps>();
 const scriptsInserted = ref([]);
 const scriptsRun = ref([]);
 
-const elem = ref<HTMLDivElement>();
+const elem = ref<HTMLDivElement>(null);
 
 onMounted(() => {
   findAndRunScripts();
@@ -3626,19 +3697,19 @@ onMounted(() => {
 
 function findAndRunScripts() {
   // TODO: Move this function to standalone one in '@builder.io/utils'
-  if (elem.value && typeof window !== \\"undefined\\") {
+  if (elem?.value && typeof window !== \\"undefined\\") {
     /** @type {HTMLScriptElement[]} */
-    const scripts = elem.value.getElementsByTagName(\\"script\\");
+    const scripts = elem?.value.getElementsByTagName(\\"script\\");
 
     for (let i = 0; i < scripts.length; i++) {
       const script = scripts[i];
 
       if (script.src) {
-        if (scriptsInserted.value.includes(script.src)) {
+        if (scriptsInserted?.value.includes(script.src)) {
           continue;
         }
 
-        scriptsInserted.value.push(script.src);
+        scriptsInserted?.value.push(script.src);
         const newScript = document.createElement(\\"script\\");
         newScript.async = true;
         newScript.src = script.src;
@@ -3651,12 +3722,12 @@ function findAndRunScripts() {
           \\"application/ecmascript\\",
         ].includes(script.type)
       ) {
-        if (scriptsRun.value.includes(script.innerText)) {
+        if (scriptsRun?.value.includes(script.innerText)) {
           continue;
         }
 
         try {
-          scriptsRun.value.push(script.innerText);
+          scriptsRun?.value.push(script.innerText);
           new Function(script.innerText)();
         } catch (error) {
           console.warn(\\"\`CustomCode\`: Error running script:\\", error);
@@ -3689,7 +3760,7 @@ const props = defineProps<CustomCodeProps>();
 const scriptsInserted = ref([]);
 const scriptsRun = ref([]);
 
-const elem = ref<HTMLDivElement>();
+const elem = ref<HTMLDivElement>(null);
 
 onMounted(() => {
   findAndRunScripts();
@@ -3697,19 +3768,19 @@ onMounted(() => {
 
 function findAndRunScripts() {
   // TODO: Move this function to standalone one in '@builder.io/utils'
-  if (elem.value && typeof window !== \\"undefined\\") {
+  if (elem?.value && typeof window !== \\"undefined\\") {
     /** @type {HTMLScriptElement[]} */
-    const scripts = elem.value.getElementsByTagName(\\"script\\");
+    const scripts = elem?.value.getElementsByTagName(\\"script\\");
 
     for (let i = 0; i < scripts.length; i++) {
       const script = scripts[i];
 
       if (script.src) {
-        if (scriptsInserted.value.includes(script.src)) {
+        if (scriptsInserted?.value.includes(script.src)) {
           continue;
         }
 
-        scriptsInserted.value.push(script.src);
+        scriptsInserted?.value.push(script.src);
         const newScript = document.createElement(\\"script\\");
         newScript.async = true;
         newScript.src = script.src;
@@ -3722,12 +3793,12 @@ function findAndRunScripts() {
           \\"application/ecmascript\\",
         ].includes(script.type)
       ) {
-        if (scriptsRun.value.includes(script.innerText)) {
+        if (scriptsRun?.value.includes(script.innerText)) {
           continue;
         }
 
         try {
-          scriptsRun.value.push(script.innerText);
+          scriptsRun?.value.push(script.innerText);
           new Function(script.innerText)();
         } catch (error) {
           console.warn(\\"\`CustomCode\`: Error running script:\\", error);
@@ -3831,10 +3902,10 @@ const formState = ref(\\"unsubmitted\\");
 const responseData = ref(null);
 const formErrorMessage = ref(\\"\\");
 
-const formRef = ref<HTMLFormElement>();
+const formRef = ref<HTMLFormElement>(null);
 
 const submissionState = computed(() => {
-  return (Builder.isEditing && props.previewState) || formState.value;
+  return (Builder.isEditing && props.previewState) || formState?.value;
 });
 
 function onSubmit(
@@ -3945,8 +4016,8 @@ function onSubmit(
       },
     });
 
-    if (formRef.value) {
-      formRef.value.dispatchEvent(presubmitEvent);
+    if (formRef?.value) {
+      formRef?.value.dispatchEvent(presubmitEvent);
 
       if (presubmitEvent.defaultPrevented) {
         return;
@@ -4004,8 +4075,8 @@ function onSubmit(
             },
           });
 
-          if (formRef.value) {
-            formRef.value.dispatchEvent(submitSuccessEvent);
+          if (formRef?.value) {
+            formRef?.value.dispatchEvent(submitSuccessEvent);
 
             if (submitSuccessEvent.defaultPrevented) {
               return;
@@ -4013,19 +4084,19 @@ function onSubmit(
             /* TODO: option to turn this on/off? */
 
             if (props.resetFormOnSubmit !== false) {
-              formRef.value.reset();
+              formRef?.value.reset();
             }
           }
           /* TODO: client side route event first that can be preventDefaulted */
 
           if (props.successUrl) {
-            if (formRef.value) {
+            if (formRef?.value) {
               const event = new CustomEvent(\\"route\\", {
                 detail: {
                   url: props.successUrl,
                 },
               });
-              formRef.value.dispatchEvent(event);
+              formRef?.value.dispatchEvent(event);
 
               if (!event.defaultPrevented) {
                 location.href = props.successUrl;
@@ -4043,8 +4114,8 @@ function onSubmit(
           },
         });
 
-        if (formRef.value) {
-          formRef.value.dispatchEvent(submitErrorEvent);
+        if (formRef?.value) {
+          formRef?.value.dispatchEvent(submitErrorEvent);
 
           if (submitErrorEvent.defaultPrevented) {
             return;
@@ -4116,14 +4187,14 @@ const scrollListener = ref(null);
 const imageLoaded = ref(false);
 const load = ref(false);
 
-const pictureRef = ref<HTMLElement>();
+const pictureRef = ref<HTMLElement>(null);
 
 onMounted(() => {
   if (useLazyLoading()) {
     // throttled scroll capture listener
     const listener = () => {
-      if (pictureRef.value) {
-        const rect = pictureRef.value.getBoundingClientRect();
+      if (pictureRef?.value) {
+        const rect = pictureRef?.value.getBoundingClientRect();
         const buffer = window.innerHeight / 2;
 
         if (rect.top < window.innerHeight + buffer) {
@@ -4143,8 +4214,8 @@ onMounted(() => {
   }
 });
 onUnmounted(() => {
-  if (scrollListener.value) {
-    window.removeEventListener(\\"scroll\\", scrollListener);
+  if (scrollListener?.value) {
+    window.removeEventListener(\\"scroll\\", scrollListener?.value);
   }
 });
 
@@ -4278,6 +4349,27 @@ function handleChange(value: string) {
 </script>"
 `;
 
+exports[`Vue > jsx > Typescript Test > NestedStore 1`] = `
+"<template>
+  <div :id=\\"_id\\">
+    Test
+    <p :id=\\"_messageId\\">Message</p>
+  </div>
+</template>
+
+<script setup lang=\\"ts\\">
+import { ref } from \\"vue\\";
+
+type MyStore = {
+  _id?: string;
+  _messageId?: string;
+};
+
+const _id = ref(\\"abc\\");
+const _messageId = ref(_id?.value + \\"-message\\");
+</script>"
+`;
+
 exports[`Vue > jsx > Typescript Test > RawText 1`] = `
 "<template>
   <span
@@ -4617,6 +4709,43 @@ const props = defineProps<TextareaProps>();
 </script>"
 `;
 
+exports[`Vue > jsx > Typescript Test > UseValueAndFnFromStore 1`] = `
+"<template>
+  <div>Test</div>
+</template>
+
+<script setup lang=\\"ts\\">
+import { onUpdated, ref } from \\"vue\\";
+
+type MyProps = {
+  onChange?: (active: boolean) => void;
+};
+type MyStore = {
+  _id?: string;
+  _active?: boolean;
+  _do?: (id?: string) => void;
+};
+
+const props = defineProps<MyProps>();
+const _id = ref(\\"abc\\");
+const _active = ref(false);
+
+onUpdated(() => {
+  if (_do) {
+    _do(_id?.value);
+  }
+});
+
+function _do(id?: string) {
+  _active?.value = !!id;
+
+  if (props.onChange) {
+    props.onChange(_active?.value);
+  }
+}
+</script>"
+`;
+
 exports[`Vue > jsx > Typescript Test > Video 1`] = `
 "<template>
   <video
@@ -4791,7 +4920,7 @@ import { ref, watch } from \\"vue\\";
 const name = ref(\\"PatrickJS\\");
 
 watch(
-  () => [name.value],
+  () => [name?.value],
   () => {
     const controller = new AbortController();
     const signal = controller.signal;
@@ -4800,7 +4929,7 @@ watch(
     })
       .then((response) => response.json())
       .then((data) => {
-        name.value = data.name;
+        name.value = data.name?.value;
       });
     return () => {
       if (!signal.aborted) {
@@ -5186,22 +5315,22 @@ const c = ref(\\"c\\");
 const d = ref(\\"d\\");
 
 watch(
-  () => [a.value, b.value],
+  () => [a?.value, b?.value],
   () => {
-    console.log(\\"Runs when a or b changes\\", a, b);
+    console.log(\\"Runs when a or b changes\\", a?.value, b?.value);
 
-    if (a.value === \\"a\\") {
+    if (a?.value === \\"a\\") {
       a.value = \\"b\\";
     }
   },
   { immediate: true }
 );
 watch(
-  () => [c.value, d.value],
+  () => [c?.value, d?.value],
   () => {
-    console.log(\\"Runs when c or d changes\\", c, d);
+    console.log(\\"Runs when c or d changes\\", c?.value, d?.value);
 
-    if (a.value === \\"a\\") {
+    if (a?.value === \\"a\\") {
       a.value = \\"b\\";
     }
   },
@@ -5299,12 +5428,12 @@ exports[`Vue > jsx > Typescript Test > onEvent 1`] = `
 </template>
 
 <script setup lang=\\"ts\\">
-import { onMounted } from \\"vue\\";
+import { onMounted, ref } from \\"vue\\";
 
-const elem = ref<HTMLDivElement>();
+const elem = ref<HTMLDivElement>(null);
 
 onMounted(() => {
-  elem.value.dispatchEvent(new CustomEvent(\\"initEditingBldr\\"));
+  elem?.value.dispatchEvent(new CustomEvent(\\"initEditingBldr\\"));
 });
 
 function foo(event) {
@@ -5351,7 +5480,7 @@ type Props = {
 const props = defineProps<Props>();
 const name = ref(\\"\\");
 
-name.value = defaultValues.name || props.name;
+name.value = defaultValues.name?.value || props.name?.value;
 console.log(\\"set defaults with props\\");
 </script>"
 `;
@@ -5424,9 +5553,14 @@ const a = ref(\\"a\\");
 const b = ref(\\"b\\");
 
 watch(
-  () => [a.value, b.value, props.size],
+  () => [a?.value, b?.value, props.size],
   () => {
-    console.log(\\"Runs when a, b or size changes\\", a, b, props.size);
+    console.log(
+      \\"Runs when a, b or size changes\\",
+      a?.value,
+      b?.value,
+      props.size
+    );
   },
   { immediate: true }
 );
@@ -6483,7 +6617,7 @@ const activeTab = ref(0);
 
 const disabled = inject(\\"disabled\\");
 
-provide(\\"activeTab\\", activeTab.value);
+provide(\\"activeTab\\", activeTab?.value);
 </script>"
 `;
 
@@ -6548,7 +6682,7 @@ import { ref } from \\"vue\\";
 const show = ref(true);
 
 function toggle() {
-  show.value = !show.value;
+  show.value = !show?.value;
 }
 </script>"
 `;
@@ -6601,7 +6735,7 @@ import { computed, ref } from \\"vue\\";
 const name = ref(\\"Steve\\");
 
 const lowercaseName = computed(() => {
-  return name.value.toLowerCase();
+  return name?.value.toLowerCase();
 });
 </script>"
 `;
@@ -6626,9 +6760,9 @@ const b = ref(5);
 const result = ref(null);
 
 watch(
-  () => [a.value, b.value],
+  () => [a?.value, b?.value],
   () => {
-    calculateResult(a, b);
+    calculateResult(a?.value, b?.value);
   },
   { immediate: true }
 );
@@ -6789,7 +6923,7 @@ const activeTab = ref(0);
 
 const disabled = inject(\\"disabled\\");
 
-provide(\\"activeTab\\", activeTab.value);
+provide(\\"activeTab\\", activeTab?.value);
 </script>"
 `;
 
@@ -6854,7 +6988,7 @@ import { ref } from \\"vue\\";
 const show = ref(true);
 
 function toggle() {
-  show.value = !show.value;
+  show.value = !show?.value;
 }
 </script>"
 `;
@@ -6907,7 +7041,7 @@ import { computed, ref } from \\"vue\\";
 const name = ref(\\"Steve\\");
 
 const lowercaseName = computed(() => {
-  return name.value.toLowerCase();
+  return name?.value.toLowerCase();
 });
 </script>"
 `;
@@ -6932,9 +7066,9 @@ const b = ref(5);
 const result = ref(null);
 
 watch(
-  () => [a.value, b.value],
+  () => [a?.value, b?.value],
   () => {
-    calculateResult(a, b);
+    calculateResult(a?.value, b?.value);
   },
   { immediate: true }
 );
diff --git a/packages/core/src/__tests__/__snapshots__/vue.test.ts.snap b/packages/core/src/__tests__/__snapshots__/vue.test.ts.snap
index 4857f92cb7..ef03746dfc 100644
--- a/packages/core/src/__tests__/__snapshots__/vue.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/vue.test.ts.snap
@@ -1350,6 +1350,27 @@ export default defineComponent({
 </script>"
 `;
 
+exports[`Vue > jsx > Javascript Test > NestedStore 1`] = `
+"<template>
+  <div :id=\\"_id\\">
+    Test
+    <p :id=\\"_messageId\\">Message</p>
+  </div>
+</template>
+
+<script>
+import { defineComponent } from \\"vue\\";
+
+export default defineComponent({
+  name: \\"nested-store\\",
+
+  data() {
+    return { _id: \\"abc\\", _messageId: this._id + \\"-message\\" };
+  },
+});
+</script>"
+`;
+
 exports[`Vue > jsx > Javascript Test > RawText 1`] = `
 "<template>
   <span
@@ -1695,6 +1716,42 @@ export default defineComponent({
 </script>"
 `;
 
+exports[`Vue > jsx > Javascript Test > UseValueAndFnFromStore 1`] = `
+"<template>
+  <div>Test</div>
+</template>
+
+<script>
+import { defineComponent } from \\"vue\\";
+
+export default defineComponent({
+  name: \\"use-value-and-fn-from-store\\",
+
+  props: [\\"onChange\\"],
+
+  data() {
+    return { _id: \\"abc\\", _active: false };
+  },
+
+  updated() {
+    if (this._do) {
+      this._do(this._id);
+    }
+  },
+
+  methods: {
+    _do(id) {
+      this._active = !!id;
+
+      if (this.onChange) {
+        this.onChange(this._active);
+      }
+    },
+  },
+});
+</script>"
+`;
+
 exports[`Vue > jsx > Javascript Test > Video 1`] = `
 "<template>
   <video
@@ -5296,6 +5353,32 @@ export default defineComponent({
 </script>"
 `;
 
+exports[`Vue > jsx > Typescript Test > NestedStore 1`] = `
+"<template>
+  <div :id=\\"_id\\">
+    Test
+    <p :id=\\"_messageId\\">Message</p>
+  </div>
+</template>
+
+<script lang=\\"ts\\">
+import { defineComponent } from \\"vue\\";
+
+type MyStore = {
+  _id?: string;
+  _messageId?: string;
+};
+
+export default defineComponent({
+  name: \\"nested-store\\",
+
+  data() {
+    return { _id: \\"abc\\", _messageId: this._id + \\"-message\\" };
+  },
+});
+</script>"
+`;
+
 exports[`Vue > jsx > Typescript Test > RawText 1`] = `
 "<template>
   <span
@@ -5711,6 +5794,51 @@ export default defineComponent({
 </script>"
 `;
 
+exports[`Vue > jsx > Typescript Test > UseValueAndFnFromStore 1`] = `
+"<template>
+  <div>Test</div>
+</template>
+
+<script lang=\\"ts\\">
+import { defineComponent } from \\"vue\\";
+
+type MyProps = {
+  onChange?: (active: boolean) => void;
+};
+type MyStore = {
+  _id?: string;
+  _active?: boolean;
+  _do?: (id?: string) => void;
+};
+
+export default defineComponent({
+  name: \\"use-value-and-fn-from-store\\",
+
+  props: [\\"onChange\\"],
+
+  data() {
+    return { _id: \\"abc\\", _active: false };
+  },
+
+  updated() {
+    if (this._do) {
+      this._do(this._id);
+    }
+  },
+
+  methods: {
+    _do(id?: string) {
+      this._active = !!id;
+
+      if (this.onChange) {
+        this.onChange(this._active);
+      }
+    },
+  },
+});
+</script>"
+`;
+
 exports[`Vue > jsx > Typescript Test > Video 1`] = `
 "<template>
   <video
diff --git a/packages/core/src/__tests__/__snapshots__/webcomponent.test.ts.snap b/packages/core/src/__tests__/__snapshots__/webcomponent.test.ts.snap
index 5c3c782aaa..7f7fdcfc0d 100644
--- a/packages/core/src/__tests__/__snapshots__/webcomponent.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/webcomponent.test.ts.snap
@@ -4682,6 +4682,110 @@ customElements.define(\\"stepper\\", Stepper);
 "
 `;
 
+exports[`webcomponent > jsx > Javascript Test > NestedStore 1`] = `
+"/**
+ * Usage:
+ *
+ *  <nested-store></nested-store>
+ *
+ */
+class NestedStore extends HTMLElement {
+  get _root() {
+    return this.shadowRoot || this;
+  }
+
+  constructor() {
+    super();
+    const self = this;
+
+    this.state = { _id: \\"abc\\", _messageId: this._id + \\"-message\\" };
+    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 data-el=\\"div-nested-store-1\\">
+        Test
+      
+        <p data-el=\\"p-nested-store-1\\">Message</p>
+      </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() {
+    this._root
+      .querySelectorAll(\\"[data-el='div-nested-store-1']\\")
+      .forEach((el) => {
+        el.setAttribute(\\"id\\", this.state._id);
+      });
+
+    this._root
+      .querySelectorAll(\\"[data-el='p-nested-store-1']\\")
+      .forEach((el) => {
+        el.setAttribute(\\"id\\", this.state._messageId);
+      });
+  }
+
+  // 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(\\"nested-store\\", NestedStore);
+"
+`;
+
 exports[`webcomponent > jsx > Javascript Test > RawText 1`] = `
 "/**
  * Usage:
@@ -6533,6 +6637,127 @@ customElements.define(\\"textarea\\", Textarea);
 "
 `;
 
+exports[`webcomponent > jsx > Javascript Test > UseValueAndFnFromStore 1`] = `
+"/**
+ * Usage:
+ *
+ *  <use-value-and-fn-from-store></use-value-and-fn-from-store>
+ *
+ */
+class UseValueAndFnFromStore extends HTMLElement {
+  get _root() {
+    return this.shadowRoot || this;
+  }
+
+  constructor() {
+    super();
+    const self = this;
+
+    this.state = {
+      _id: \\"abc\\",
+      _active: false,
+      _do(id) {
+        this._active = !!id;
+
+        if (self.props.onChange) {
+          self.props.onChange(this._active);
+        }
+      },
+    };
+    if (!this.props) {
+      this.props = {};
+    }
+
+    this.componentProps = [\\"onChange\\"];
+
+    this.updateDeps = [[]];
+
+    // 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.getAttributeNames().forEach((attr) => {
+      const jsVar = attr.replace(/-/g, \\"\\");
+      const regexp = new RegExp(jsVar, \\"i\\");
+      this.componentProps.forEach((prop) => {
+        if (regexp.test(prop)) {
+          const attrValue = this.getAttribute(attr);
+          if (this.props[prop] !== attrValue) {
+            this.props[prop] = attrValue;
+          }
+        }
+      });
+    });
+
+    this._root.innerHTML = \`
+      <div>Test</div>\`;
+    this.pendingUpdate = true;
+
+    this.render();
+    this.onMount();
+    this.pendingUpdate = false;
+    this.update();
+  }
+
+  onMount() {}
+
+  onUpdate() {
+    const self = this;
+
+    if (self.state._do) {
+      self.state._do(self.state._id);
+    }
+  }
+
+  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(\\"use-value-and-fn-from-store\\", UseValueAndFnFromStore);
+"
+`;
+
 exports[`webcomponent > jsx > Javascript Test > Video 1`] = `
 "/**
  * Usage:
@@ -19466,6 +19691,115 @@ customElements.define(\\"stepper\\", Stepper);
 "
 `;
 
+exports[`webcomponent > jsx > Typescript Test > NestedStore 1`] = `
+"type MyStore = {
+  _id?: string;
+  _messageId?: string;
+};
+
+/**
+ * Usage:
+ *
+ *  <nested-store></nested-store>
+ *
+ */
+class NestedStore extends HTMLElement {
+  get _root() {
+    return this.shadowRoot || this;
+  }
+
+  constructor() {
+    super();
+    const self = this;
+
+    this.state = { _id: \\"abc\\", _messageId: this._id + \\"-message\\" };
+    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 data-el=\\"div-nested-store-1\\">
+        Test
+      
+        <p data-el=\\"p-nested-store-1\\">Message</p>
+      </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() {
+    this._root
+      .querySelectorAll(\\"[data-el='div-nested-store-1']\\")
+      .forEach((el) => {
+        el.setAttribute(\\"id\\", this.state._id);
+      });
+
+    this._root
+      .querySelectorAll(\\"[data-el='p-nested-store-1']\\")
+      .forEach((el) => {
+        el.setAttribute(\\"id\\", this.state._messageId);
+      });
+  }
+
+  // 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(\\"nested-store\\", NestedStore);
+"
+`;
+
 exports[`webcomponent > jsx > Typescript Test > RawText 1`] = `
 "export interface RawTextProps {
   attributes?: any;
@@ -21387,6 +21721,136 @@ customElements.define(\\"textarea\\", Textarea);
 "
 `;
 
+exports[`webcomponent > jsx > Typescript Test > UseValueAndFnFromStore 1`] = `
+"type MyProps = {
+  onChange?: (active: boolean) => void;
+};
+type MyStore = {
+  _id?: string;
+  _active?: boolean;
+  _do?: (id?: string) => void;
+};
+
+/**
+ * Usage:
+ *
+ *  <use-value-and-fn-from-store></use-value-and-fn-from-store>
+ *
+ */
+class UseValueAndFnFromStore extends HTMLElement {
+  get _root() {
+    return this.shadowRoot || this;
+  }
+
+  constructor() {
+    super();
+    const self = this;
+
+    this.state = {
+      _id: \\"abc\\",
+      _active: false,
+      _do(id?: string) {
+        this._active = !!id;
+
+        if (self.props.onChange) {
+          self.props.onChange(this._active);
+        }
+      },
+    };
+    if (!this.props) {
+      this.props = {};
+    }
+
+    this.componentProps = [\\"onChange\\"];
+
+    this.updateDeps = [[]];
+
+    // 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.getAttributeNames().forEach((attr) => {
+      const jsVar = attr.replace(/-/g, \\"\\");
+      const regexp = new RegExp(jsVar, \\"i\\");
+      this.componentProps.forEach((prop) => {
+        if (regexp.test(prop)) {
+          const attrValue = this.getAttribute(attr);
+          if (this.props[prop] !== attrValue) {
+            this.props[prop] = attrValue;
+          }
+        }
+      });
+    });
+
+    this._root.innerHTML = \`
+      <div>Test</div>\`;
+    this.pendingUpdate = true;
+
+    this.render();
+    this.onMount();
+    this.pendingUpdate = false;
+    this.update();
+  }
+
+  onMount() {}
+
+  onUpdate() {
+    const self = this;
+
+    if (self.state._do) {
+      self.state._do(self.state._id);
+    }
+  }
+
+  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(\\"use-value-and-fn-from-store\\", UseValueAndFnFromStore);
+"
+`;
+
 exports[`webcomponent > jsx > Typescript Test > Video 1`] = `
 "export interface VideoProps {
   attributes?: any;
diff --git a/packages/core/src/__tests__/data/arrow-function-in-use-store.raw.tsx b/packages/core/src/__tests__/data/store/arrow-function-in-use-store.raw.tsx
similarity index 100%
rename from packages/core/src/__tests__/data/arrow-function-in-use-store.raw.tsx
rename to packages/core/src/__tests__/data/store/arrow-function-in-use-store.raw.tsx
diff --git a/packages/core/src/__tests__/data/store/nested-store.raw.tsx b/packages/core/src/__tests__/data/store/nested-store.raw.tsx
new file mode 100644
index 0000000000..51e7b52a28
--- /dev/null
+++ b/packages/core/src/__tests__/data/store/nested-store.raw.tsx
@@ -0,0 +1,18 @@
+import { useStore } from '@builder.io/mitosis';
+
+type MyStore = {
+  _id?: string;
+  _messageId?: string;
+};
+
+export default function NestedStore() {
+  /* prettier-ignore */
+  const state = useStore<MyStore>({ _id: "abc", _messageId: this._id + "-message" });
+
+  return (
+    <div id={state._id}>
+      Test
+      <p id={state._messageId}>Message</p>
+    </div>
+  );
+}
diff --git a/packages/core/src/__tests__/data/string-literal-store-kebab.raw.tsx b/packages/core/src/__tests__/data/store/string-literal-store-kebab.raw.tsx
similarity index 100%
rename from packages/core/src/__tests__/data/string-literal-store-kebab.raw.tsx
rename to packages/core/src/__tests__/data/store/string-literal-store-kebab.raw.tsx
diff --git a/packages/core/src/__tests__/data/string-literal-store.raw.tsx b/packages/core/src/__tests__/data/store/string-literal-store.raw.tsx
similarity index 100%
rename from packages/core/src/__tests__/data/string-literal-store.raw.tsx
rename to packages/core/src/__tests__/data/store/string-literal-store.raw.tsx
diff --git a/packages/core/src/__tests__/data/store/use-value-and-fn-from-store.raw.tsx b/packages/core/src/__tests__/data/store/use-value-and-fn-from-store.raw.tsx
new file mode 100644
index 0000000000..aee55f838e
--- /dev/null
+++ b/packages/core/src/__tests__/data/store/use-value-and-fn-from-store.raw.tsx
@@ -0,0 +1,32 @@
+import { onUpdate, useStore } from '@builder.io/mitosis';
+
+type MyProps = {
+  onChange?: (active: boolean) => void;
+};
+
+type MyStore = {
+  _id?: string;
+  _active?: boolean;
+  _do?: (id?: string) => void;
+};
+
+export default function UseValueAndFnFromStore(props: MyProps) {
+  const state = useStore<MyStore>({
+    _id: 'abc',
+    _active: false,
+    _do: (id?: string) => {
+      this._active = !!id;
+      if (props.onChange) {
+        props.onChange(this._active);
+      }
+    },
+  });
+
+  onUpdate(() => {
+    if (state._do) {
+      state._do(state._id);
+    }
+  });
+
+  return <div>Test</div>;
+}
diff --git a/packages/core/src/__tests__/test-generator.ts b/packages/core/src/__tests__/test-generator.ts
index 3c19f76dc6..496a24a951 100644
--- a/packages/core/src/__tests__/test-generator.ts
+++ b/packages/core/src/__tests__/test-generator.ts
@@ -1,8 +1,8 @@
+import { parseJsx } from '@/parsers/jsx';
+import { Target } from '@/types/config';
+import { BaseTranspilerOptions, TranspilerGenerator } from '@/types/transpiler';
 import { describe, test } from 'vitest';
 import { MitosisComponent, createTypescriptProject, parseSvelte } from '..';
-import { parseJsx } from '../parsers/jsx';
-import { Target } from '../types/config';
-import { BaseTranspilerOptions, TranspilerGenerator } from '../types/transpiler';
 const getRawFile = async (filePath: string) => {
   const code = await import(`${filePath}?raw`).then((x) => x.default as string);
   return { code, filePath: ['src', '__tests__', filePath].join('/') };
@@ -42,7 +42,6 @@ const nestedStyles = getRawFile('./data/nested-styles.raw.tsx');
 const preserveExportOrLocalStatement = getRawFile(
   './data/basic-preserve-export-or-local-statement.raw.tsx',
 );
-const arrowFunctionInUseStore = getRawFile('./data/arrow-function-in-use-store.raw.tsx');
 const svgComponent = getRawFile('./data/svg.raw.tsx');
 const webComponent = getRawFile('./data/basic-web-component.raw.tsx');
 const propsType = getRawFile('./data/types/component-props-type.raw.tsx');
@@ -122,8 +121,12 @@ const renderContentExample = getRawFile('./data/render-content.raw.tsx');
 const onClickToPressable = getRawFile('./data/react-native/onclick-to-pressable.raw.tsx');
 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');
+// Store
+const arrowFunctionInUseStore = getRawFile('./data/store/arrow-function-in-use-store.raw.tsx');
+const NestedStore = getRawFile('./data/store/nested-store.raw.tsx');
+const UseValueAndFnFromStore = getRawFile('./data/store/use-value-and-fn-from-store.raw.tsx');
+const StringLiteralStore = getRawFile('./data/store/string-literal-store.raw.tsx');
+const StringLiteralStoreKebab = getRawFile('./data/store/string-literal-store-kebab.raw.tsx');
 
 /**
  * Use TestsWithFailFor when you want to write a test that you know will fail
@@ -237,6 +240,8 @@ const BASIC_TESTS: Tests = {
   useTarget,
   signalsOnUpdate,
   getterState,
+  NestedStore,
+  UseValueAndFnFromStore,
   'string-literal-store': StringLiteralStore,
   'string-literal-store-kebab': {
     file: StringLiteralStoreKebab,
@@ -578,14 +583,35 @@ export const runTestsForSvelteSyntax = () => {
 
 const tsProject = createTypescriptProject(__dirname + '/tsconfig.json');
 
+const filterTests = (testArray?: Tests[], only?: string[]) =>
+  testArray?.map((tests: Tests) => {
+    if (!only) {
+      return tests;
+    }
+
+    const filteredTests: Tests = {};
+
+    Object.entries(tests).forEach(([key, test]) => {
+      if (only.includes(key)) {
+        filteredTests[key] = test;
+      }
+    });
+
+    return filteredTests;
+  });
+
 export const runTestsForTarget = <X extends BaseTranspilerOptions>({
   target,
   generator,
   options,
+  only,
+  logOutput,
 }: {
   target: Target;
   generator: TranspilerGenerator<X>;
   options: X;
+  logOutput?: boolean;
+  only?: string[]; // Test only some tests based on key
 }) => {
   const configurations: { options: X; testName: string }[] = [
     { options: { ...options, typescript: false }, testName: 'Javascript Test' },
@@ -615,12 +641,12 @@ export const runTestsForTarget = <X extends BaseTranspilerOptions>({
                   typescript: false,
                 },
           ),
-        testsArray: JSX_TESTS_FOR_TARGET[target],
+        testsArray: filterTests(JSX_TESTS_FOR_TARGET[target], only),
       },
       {
         name: 'svelte',
         parser: async ({ filePath, code }) => parseSvelte(code),
-        testsArray: [SVELTE_SYNTAX_TESTS],
+        testsArray: filterTests([SVELTE_SYNTAX_TESTS], only),
       },
     ];
     for (const { name, parser, testsArray } of parsers) {
@@ -652,7 +678,13 @@ export const runTestsForTarget = <X extends BaseTranspilerOptions>({
                     expect(getOutput).toThrowError();
                   } else {
                     try {
-                      expect(getOutput()).toMatchSnapshot();
+                      const output = getOutput();
+                      if (logOutput) {
+                        process.stdout.write(`--- Start: ${key} ---\n\n`);
+                        process.stdout.write(output);
+                        process.stdout.write(`--- End: ${key} ---\n\n`);
+                      }
+                      expect(output).toMatchSnapshot();
                     } catch (error) {
                       expect(getOutput).toThrowErrorMatchingSnapshot();
                     }
diff --git a/packages/core/src/generators/vue/compositionApi.ts b/packages/core/src/generators/vue/compositionApi.ts
index a2322e8e9e..0aca42d917 100644
--- a/packages/core/src/generators/vue/compositionApi.ts
+++ b/packages/core/src/generators/vue/compositionApi.ts
@@ -51,8 +51,10 @@ export function generateCompositionApiScript(
     functions: false,
     getters: false,
     format: 'variables',
-    valueMapper: (code, _, typeParameter) =>
-      isTs && typeParameter ? `ref<${typeParameter}>(${code})` : `ref(${code})`,
+    valueMapper: (code, _, typeParameter) => {
+      const cleanCode = code.replaceAll('this.', ''); // Composition api isn't a class we don't need "this." here
+      return isTs && typeParameter ? `ref<${typeParameter}>(${cleanCode})` : `ref(${cleanCode})`;
+    },
     keyPrefix: 'const',
   });
 
@@ -61,6 +63,9 @@ export function generateCompositionApiScript(
     getters: false,
     functions: true,
     format: 'variables',
+    valueMapper: (code) => {
+      return code.replaceAll('this.', ''); // Composition api isn't a class we don't need "this." here
+    },
   });
 
   if (template.includes('_classStringToObject')) {
@@ -99,7 +104,8 @@ export function generateCompositionApiScript(
     ${Object.keys(component.refs)
       ?.map((key) => {
         if (isTs) {
-          return `const ${key} = ref<${component.refs[key].typeParameter}>()`;
+          const type = component.refs[key].typeParameter ?? 'any';
+          return `const ${key} = ref<${type}>(null)`;
         } else {
           return `const ${key} = ref(null)`;
         }
diff --git a/packages/core/src/generators/vue/helpers.ts b/packages/core/src/generators/vue/helpers.ts
index c2cb3d11fd..d9842c2e3b 100644
--- a/packages/core/src/generators/vue/helpers.ts
+++ b/packages/core/src/generators/vue/helpers.ts
@@ -124,13 +124,17 @@ function processRefs({
   options: ToVueOptions;
   thisPrefix: ProcessBinding['thisPrefix'];
 }) {
-  const refs = options.api === 'options' ? getContextNames(component) : getAllRefs(component);
+  const { api } = options;
+  const refs = api === 'options' ? getContextNames(component) : getAllRefs(component);
 
   return babelTransformExpression(input, {
     Identifier(path: babel.NodePath<babel.types.Identifier>) {
       const name = path.node.name;
-      if (refs.includes(name) && shouldAppendValueToRef(path)) {
-        const newValue = options.api === 'options' ? `${thisPrefix}.${name}` : `${name}.value`;
+      // Composition api should use .value all the time
+      if (refs.includes(name) && (api === 'composition' || shouldAppendValueToRef(path))) {
+        const isAssignment = types.isAssignmentExpression(path.parent); // Ref could be optional
+        const newValue =
+          api === 'options' ? `${thisPrefix}.${name}` : `${name}${isAssignment ? '' : '?'}.value`;
         path.replaceWith(types.identifier(newValue));
       }
     },
diff --git a/packages/core/src/generators/vue/vue.ts b/packages/core/src/generators/vue/vue.ts
index 67c002ada4..befcf5f05b 100644
--- a/packages/core/src/generators/vue/vue.ts
+++ b/packages/core/src/generators/vue/vue.ts
@@ -233,7 +233,7 @@ export const componentToVue: TranspilerGenerator<Partial<ToVueOptions>> =
       size(component.context.get) && vueImports.push('inject');
       size(
         Object.keys(component.state).filter((key) => component.state[key]?.type === 'property'),
-      ) && vueImports.push('ref');
+      ) + size(component.refs) && vueImports.push('ref');
       size(slotsProps) && vueImports.push('useSlots');
     }
 

From ac8576d8c6f29f4b5d14760bfe2e925080cd6383 Mon Sep 17 00:00:00 2001
From: Nicolas Merget <nicolas.merget@deutschebahn.com>
Date: Mon, 9 Sep 2024 16:54:28 +0200
Subject: [PATCH 2/6] fix: issue with vue build

---
 .../__snapshots__/alpine.test.ts.snap         |  36 +-
 .../__snapshots__/angular.import.test.ts.snap |  74 +++-
 .../__snapshots__/angular.mapper.test.ts.snap |  76 ++++-
 .../__snapshots__/angular.state.test.ts.snap  |  74 +++-
 .../__snapshots__/angular.styles.test.ts.snap |  60 +++-
 .../__snapshots__/angular.test.ts.snap        | 134 +++++++-
 .../__tests__/__snapshots__/html.test.ts.snap | 108 +++++-
 .../__snapshots__/liquid.test.ts.snap         |  10 +
 .../__tests__/__snapshots__/lit.test.ts.snap  |  58 +++-
 .../__snapshots__/marko.test.ts.snap          |  40 ++-
 .../__snapshots__/parse-jsx.test.ts.snap      | 152 ++++++++-
 .../__snapshots__/preact.test.ts.snap         |  54 ++-
 .../__tests__/__snapshots__/qwik.test.ts.snap |  44 +++
 .../__snapshots__/react-native.test.ts.snap   |  82 ++++-
 .../__snapshots__/react.test.ts.snap          |  54 ++-
 .../__tests__/__snapshots__/rsc.test.ts.snap  |  54 ++-
 .../__snapshots__/solid.test.ts.snap          | 124 ++++++-
 .../__snapshots__/stencil.test.ts.snap        |  52 ++-
 .../__snapshots__/svelte.test.ts.snap         |  44 ++-
 .../__tests__/__snapshots__/taro.test.ts.snap |  56 ++-
 .../vue-composition.test.ts.snap              | 318 +++++++++---------
 .../__tests__/__snapshots__/vue.test.ts.snap  |  52 ++-
 .../__snapshots__/webcomponent.test.ts.snap   | 214 +++++++++++-
 .../core/src/__tests__/data/basic-ref.raw.tsx |   6 +-
 .../data/{ => state}/context-state.raw.tsx    |   0
 .../data/{ => state}/expression-state.raw.tsx |   0
 .../__tests__/data/state/set-state.raw.tsx    |  17 +
 packages/core/src/__tests__/test-generator.ts |   9 +-
 packages/core/src/generators/vue/helpers.ts   |   4 +-
 29 files changed, 1768 insertions(+), 238 deletions(-)
 rename packages/core/src/__tests__/data/{ => state}/context-state.raw.tsx (100%)
 rename packages/core/src/__tests__/data/{ => state}/expression-state.raw.tsx (100%)
 create mode 100644 packages/core/src/__tests__/data/state/set-state.raw.tsx

diff --git a/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap b/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap
index 46df82cdb7..9106ba62bd 100644
--- a/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap
@@ -307,7 +307,7 @@ exports[`Alpine.js > jsx > Javascript Test > BasicRef 1`] = `
       name: \\"PatrickJS\\",
       onBlur: function onBlur() {
         // Maintain focus
-        this.$refs.inputRef.focus();
+        this.$refs.inputRef?.focus();
       },
       lowerCaseName: function lowerCaseName() {
         return this.name.toLowerCase();
@@ -2461,6 +2461,22 @@ exports[`Alpine.js > jsx > Javascript Test > self-referencing component with chi
 "
 `;
 
+exports[`Alpine.js > jsx > Javascript Test > setState 1`] = `
+"<div x-data=\\"setState()\\"><button x-on:click=\\"someFn\\">Click me</button></div>
+<script>
+  document.addEventListener(\\"alpine:init\\", () => {
+    Alpine.data(\\"setState\\", () => ({
+      n: [\\"123\\"],
+
+      someFn() {
+        this.n[0] = \\"123\\";
+      },
+    }));
+  });
+</script>
+"
+`;
+
 exports[`Alpine.js > jsx > Javascript Test > showExpressions 1`] = `
 "<div x-data=\\"showWithOtherValues()\\">
   <template x-if=\\"conditionA\\">Content0</template>
@@ -3106,7 +3122,7 @@ exports[`Alpine.js > jsx > Typescript Test > BasicRef 1`] = `
       name: \\"PatrickJS\\",
       onBlur: function onBlur() {
         // Maintain focus
-        this.$refs.inputRef.focus();
+        this.$refs.inputRef?.focus();
       },
       lowerCaseName: function lowerCaseName() {
         return this.name.toLowerCase();
@@ -5252,6 +5268,22 @@ exports[`Alpine.js > jsx > Typescript Test > self-referencing component with chi
 "
 `;
 
+exports[`Alpine.js > jsx > Typescript Test > setState 1`] = `
+"<div x-data=\\"setState()\\"><button x-on:click=\\"someFn\\">Click me</button></div>
+<script>
+  document.addEventListener(\\"alpine:init\\", () => {
+    Alpine.data(\\"setState\\", () => ({
+      n: [\\"123\\"],
+
+      someFn() {
+        this.n[0] = \\"123\\";
+      },
+    }));
+  });
+</script>
+"
+`;
+
 exports[`Alpine.js > jsx > Typescript Test > showExpressions 1`] = `
 "<div x-data=\\"showWithOtherValues()\\">
   <template x-if=\\"conditionA\\">Content0</template>
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 ff0855ad7b..7280f9deee 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap
@@ -590,7 +590,7 @@ export default class MyBasicRefComponent {
   name = \\"PatrickJS\\";
   onBlur = function onBlur() {
     // Maintain focus
-    this.inputRef.nativeElement.focus();
+    this.inputRef.nativeElement?.focus();
   };
   lowerCaseName = function lowerCaseName() {
     return this.name.toLowerCase();
@@ -5740,6 +5740,41 @@ export class MyComponentModule {}
 "
 `;
 
+exports[`Angular with Preserve Imports and File Extensions > jsx > Javascript Test > setState 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"set-state\\",
+  template: \`
+    <div><button (click)=\\"someFn\\">Click me</button></div>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class SetState {
+  n = [\\"123\\"];
+  someFn() {
+    this.n[0] = \\"123\\";
+  }
+}
+
+@NgModule({
+  declarations: [SetState],
+  imports: [CommonModule],
+  exports: [SetState],
+})
+export class SetStateModule {}
+"
+`;
+
 exports[`Angular with Preserve Imports and File Extensions > jsx > Javascript Test > showExpressions 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -7536,7 +7571,7 @@ export default class MyBasicRefComponent {
   name = \\"PatrickJS\\";
   onBlur = function onBlur() {
     // Maintain focus
-    this.inputRef.nativeElement.focus();
+    this.inputRef.nativeElement?.focus();
   };
   lowerCaseName = function lowerCaseName() {
     return this.name.toLowerCase();
@@ -13091,6 +13126,41 @@ export class MyComponentModule {}
 "
 `;
 
+exports[`Angular with Preserve Imports and File Extensions > jsx > Typescript Test > setState 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"set-state\\",
+  template: \`
+    <div><button (click)=\\"someFn\\">Click me</button></div>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class SetState {
+  n = [\\"123\\"];
+  someFn() {
+    this.n[0] = \\"123\\";
+  }
+}
+
+@NgModule({
+  declarations: [SetState],
+  imports: [CommonModule],
+  exports: [SetState],
+})
+export class SetStateModule {}
+"
+`;
+
 exports[`Angular with Preserve Imports and File Extensions > jsx > Typescript Test > showExpressions 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 d63b10e73b..de9cd9c9f0 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.mapper.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.mapper.test.ts.snap
@@ -601,7 +601,7 @@ export default class MyBasicRefComponent {
   name = \\"PatrickJS\\";
   onBlur = function onBlur() {
     // Maintain focus
-    this.inputRef.nativeElement.focus();
+    this.inputRef.nativeElement?.focus();
   };
   lowerCaseName = function lowerCaseName() {
     return this.name.toLowerCase();
@@ -5831,6 +5831,42 @@ export class MyComponentModule {}
 "
 `;
 
+exports[`Angular with Import Mapper Tests > jsx > Javascript Test > setState 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"set-state\\",
+  template: \`
+    <div><button (click)=\\"someFn\\">Click me</button></div>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class SetState {
+  n = [\\"123\\"];
+  someFn() {
+    this.n[0] = \\"123\\";
+  }
+}
+
+@NgModule({
+  declarations: [SetState],
+  imports: [CommonModule],
+  exports: [SetState],
+  bootstrap: [SomeOtherComponent],
+})
+export class SetStateModule {}
+"
+`;
+
 exports[`Angular with Import Mapper Tests > jsx > Javascript Test > showExpressions 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -7662,7 +7698,7 @@ export default class MyBasicRefComponent {
   name = \\"PatrickJS\\";
   onBlur = function onBlur() {
     // Maintain focus
-    this.inputRef.nativeElement.focus();
+    this.inputRef.nativeElement?.focus();
   };
   lowerCaseName = function lowerCaseName() {
     return this.name.toLowerCase();
@@ -13299,6 +13335,42 @@ export class MyComponentModule {}
 "
 `;
 
+exports[`Angular with Import Mapper Tests > jsx > Typescript Test > setState 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"set-state\\",
+  template: \`
+    <div><button (click)=\\"someFn\\">Click me</button></div>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class SetState {
+  n = [\\"123\\"];
+  someFn() {
+    this.n[0] = \\"123\\";
+  }
+}
+
+@NgModule({
+  declarations: [SetState],
+  imports: [CommonModule],
+  exports: [SetState],
+  bootstrap: [SomeOtherComponent],
+})
+export class SetStateModule {}
+"
+`;
+
 exports[`Angular with Import Mapper Tests > jsx > Typescript Test > showExpressions 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 4a4622d263..5463c40dfb 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.state.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.state.test.ts.snap
@@ -601,7 +601,7 @@ export default class MyBasicRefComponent {
   name = \\"PatrickJS\\";
   onBlur = function onBlur() {
     // Maintain focus
-    this.inputRef.nativeElement.focus();
+    this.inputRef.nativeElement?.focus();
   };
   lowerCaseName = function lowerCaseName() {
     return this.name.toLowerCase();
@@ -5922,6 +5922,41 @@ export class MyComponentModule {}
 "
 `;
 
+exports[`Angular with manually creating and handling class properties as bindings (more stable) > jsx > Javascript Test > setState 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"set-state\\",
+  template: \`
+    <div><button (click)=\\"someFn\\">Click me</button></div>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class SetState {
+  n = [\\"123\\"];
+  someFn() {
+    this.n[0] = \\"123\\";
+  }
+}
+
+@NgModule({
+  declarations: [SetState],
+  imports: [CommonModule],
+  exports: [SetState],
+})
+export class SetStateModule {}
+"
+`;
+
 exports[`Angular with manually creating and handling class properties as bindings (more stable) > jsx > Javascript Test > showExpressions 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -7773,7 +7808,7 @@ export default class MyBasicRefComponent {
   name = \\"PatrickJS\\";
   onBlur = function onBlur() {
     // Maintain focus
-    this.inputRef.nativeElement.focus();
+    this.inputRef.nativeElement?.focus();
   };
   lowerCaseName = function lowerCaseName() {
     return this.name.toLowerCase();
@@ -13519,6 +13554,41 @@ export class MyComponentModule {}
 "
 `;
 
+exports[`Angular with manually creating and handling class properties as bindings (more stable) > jsx > Typescript Test > setState 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"set-state\\",
+  template: \`
+    <div><button (click)=\\"someFn\\">Click me</button></div>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class SetState {
+  n = [\\"123\\"];
+  someFn() {
+    this.n[0] = \\"123\\";
+  }
+}
+
+@NgModule({
+  declarations: [SetState],
+  imports: [CommonModule],
+  exports: [SetState],
+})
+export class SetStateModule {}
+"
+`;
+
 exports[`Angular with manually creating and handling class properties as bindings (more stable) > jsx > Typescript Test > showExpressions 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 f2bb16a800..d41c3f5c6e 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.styles.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.styles.test.ts.snap
@@ -518,7 +518,7 @@ export default class MyBasicRefComponent {
   name = \\"PatrickJS\\";
   onBlur = function onBlur() {
     // Maintain focus
-    this.inputRef.nativeElement.focus();
+    this.inputRef.nativeElement?.focus();
   };
   lowerCaseName = function lowerCaseName() {
     return this.name.toLowerCase();
@@ -5155,6 +5155,34 @@ export class MyComponentModule {}
 "
 `;
 
+exports[`Angular with visuallyIgnoreHostElement = false > jsx > Javascript Test > setState 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"set-state\\",
+  template: \`
+    <div><button (click)=\\"someFn\\">Click me</button></div>
+  \`,
+})
+export default class SetState {
+  n = [\\"123\\"];
+  someFn() {
+    this.n[0] = \\"123\\";
+  }
+}
+
+@NgModule({
+  declarations: [SetState],
+  imports: [CommonModule],
+  exports: [SetState],
+})
+export class SetStateModule {}
+"
+`;
+
 exports[`Angular with visuallyIgnoreHostElement = false > jsx > Javascript Test > showExpressions 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -6733,7 +6761,7 @@ export default class MyBasicRefComponent {
   name = \\"PatrickJS\\";
   onBlur = function onBlur() {
     // Maintain focus
-    this.inputRef.nativeElement.focus();
+    this.inputRef.nativeElement?.focus();
   };
   lowerCaseName = function lowerCaseName() {
     return this.name.toLowerCase();
@@ -11774,6 +11802,34 @@ export class MyComponentModule {}
 "
 `;
 
+exports[`Angular with visuallyIgnoreHostElement = false > jsx > Typescript Test > setState 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"set-state\\",
+  template: \`
+    <div><button (click)=\\"someFn\\">Click me</button></div>
+  \`,
+})
+export default class SetState {
+  n = [\\"123\\"];
+  someFn() {
+    this.n[0] = \\"123\\";
+  }
+}
+
+@NgModule({
+  declarations: [SetState],
+  imports: [CommonModule],
+  exports: [SetState],
+})
+export class SetStateModule {}
+"
+`;
+
 exports[`Angular with visuallyIgnoreHostElement = false > jsx > Typescript Test > showExpressions 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 e2fba9d379..5438f2e9d8 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.test.ts.snap
@@ -1048,7 +1048,7 @@ export default class MyBasicRefComponent {
   name = \\"PatrickJS\\";
   onBlur = function onBlur() {
     // Maintain focus
-    this.inputRef.nativeElement.focus();
+    this.inputRef.nativeElement?.focus();
   };
   lowerCaseName = function lowerCaseName() {
     return this.name.toLowerCase();
@@ -1115,7 +1115,7 @@ export default class MyBasicRefComponent {
   name = \\"PatrickJS\\";
   onBlur = function onBlur() {
     // Maintain focus
-    this.inputRef.nativeElement.focus();
+    this.inputRef.nativeElement?.focus();
   };
   lowerCaseName = function lowerCaseName() {
     return this.name.toLowerCase();
@@ -10826,6 +10826,69 @@ export default class MyComponent {
 "
 `;
 
+exports[`Angular > jsx > Javascript Test > setState 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"set-state\\",
+  template: \`
+    <div><button (click)=\\"someFn\\">Click me</button></div>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class SetState {
+  n = [\\"123\\"];
+  someFn() {
+    this.n[0] = \\"123\\";
+  }
+}
+
+@NgModule({
+  declarations: [SetState],
+  imports: [CommonModule],
+  exports: [SetState],
+})
+export class SetStateModule {}
+"
+`;
+
+exports[`Angular > jsx > Javascript Test > setState 2`] = `
+"import { Component } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+@Component({
+  selector: \\"set-state\\",
+  template: \`
+    <div><button (click)=\\"someFn\\">Click me</button></div>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+  standalone: true,
+  imports: [CommonModule],
+})
+export default class SetState {
+  n = [\\"123\\"];
+  someFn() {
+    this.n[0] = \\"123\\";
+  }
+}
+"
+`;
+
 exports[`Angular > jsx > Javascript Test > showExpressions 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -14101,7 +14164,7 @@ export default class MyBasicRefComponent {
   name = \\"PatrickJS\\";
   onBlur = function onBlur() {
     // Maintain focus
-    this.inputRef.nativeElement.focus();
+    this.inputRef.nativeElement?.focus();
   };
   lowerCaseName = function lowerCaseName() {
     return this.name.toLowerCase();
@@ -14172,7 +14235,7 @@ export default class MyBasicRefComponent {
   name = \\"PatrickJS\\";
   onBlur = function onBlur() {
     // Maintain focus
-    this.inputRef.nativeElement.focus();
+    this.inputRef.nativeElement?.focus();
   };
   lowerCaseName = function lowerCaseName() {
     return this.name.toLowerCase();
@@ -24692,6 +24755,69 @@ export default class MyComponent {
 "
 `;
 
+exports[`Angular > jsx > Typescript Test > setState 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"set-state\\",
+  template: \`
+    <div><button (click)=\\"someFn\\">Click me</button></div>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class SetState {
+  n = [\\"123\\"];
+  someFn() {
+    this.n[0] = \\"123\\";
+  }
+}
+
+@NgModule({
+  declarations: [SetState],
+  imports: [CommonModule],
+  exports: [SetState],
+})
+export class SetStateModule {}
+"
+`;
+
+exports[`Angular > jsx > Typescript Test > setState 2`] = `
+"import { Component } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+@Component({
+  selector: \\"set-state\\",
+  template: \`
+    <div><button (click)=\\"someFn\\">Click me</button></div>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+  standalone: true,
+  imports: [CommonModule],
+})
+export default class SetState {
+  n = [\\"123\\"];
+  someFn() {
+    this.n[0] = \\"123\\";
+  }
+}
+"
+`;
+
 exports[`Angular > jsx > Typescript Test > showExpressions 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 e8ba7f7251..ed295a5114 100644
--- a/packages/core/src/__tests__/__snapshots__/html.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/html.test.ts.snap
@@ -964,7 +964,7 @@ exports[`Html > jsx > Javascript Test > BasicRef 1`] = `
       name: \\"PatrickJS\\",
       onBlur: function onBlur() {
         // Maintain focus
-        inputRef.focus();
+        inputRef?.focus();
       },
       lowerCaseName: function lowerCaseName() {
         return state.name.toLowerCase();
@@ -5712,6 +5712,58 @@ exports[`Html > jsx > Javascript Test > self-referencing component with children
 "
 `;
 
+exports[`Html > jsx > Javascript Test > setState 1`] = `
+"<div><button data-el=\\"button-1\\">Click me</button></div>
+<script>
+  (() => {
+    const state = {
+      n: [\\"123\\"],
+      someFn() {
+        state.n[0] = \\"123\\";
+      },
+    };
+
+    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);
+      });
+
+      destroyAnyNodes();
+
+      pendingUpdate = false;
+    }
+
+    // Event handler for 'click' event on button-1
+    function onButton1Click(event) {
+      state.someFn;
+    }
+
+    // Update with initial state on first load
+    update();
+  })();
+</script>
+"
+`;
+
 exports[`Html > jsx > Javascript Test > showExpressions 1`] = `
 "<div>
   <template data-el=\\"show\\">Content0</template>
@@ -7830,7 +7882,7 @@ exports[`Html > jsx > Typescript Test > BasicRef 1`] = `
       name: \\"PatrickJS\\",
       onBlur: function onBlur() {
         // Maintain focus
-        inputRef.focus();
+        inputRef?.focus();
       },
       lowerCaseName: function lowerCaseName() {
         return state.name.toLowerCase();
@@ -12581,6 +12633,58 @@ exports[`Html > jsx > Typescript Test > self-referencing component with children
 "
 `;
 
+exports[`Html > jsx > Typescript Test > setState 1`] = `
+"<div><button data-el=\\"button-1\\">Click me</button></div>
+<script>
+  (() => {
+    const state = {
+      n: [\\"123\\"],
+      someFn() {
+        state.n[0] = \\"123\\";
+      },
+    };
+
+    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);
+      });
+
+      destroyAnyNodes();
+
+      pendingUpdate = false;
+    }
+
+    // Event handler for 'click' event on button-1
+    function onButton1Click(event) {
+      state.someFn;
+    }
+
+    // Update with initial state on first load
+    update();
+  })();
+</script>
+"
+`;
+
 exports[`Html > jsx > Typescript Test > showExpressions 1`] = `
 "<div>
   <template data-el=\\"show\\">Content0</template>
diff --git a/packages/core/src/__tests__/__snapshots__/liquid.test.ts.snap b/packages/core/src/__tests__/__snapshots__/liquid.test.ts.snap
index 7cb672a5fc..d54a292edf 100644
--- a/packages/core/src/__tests__/__snapshots__/liquid.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/liquid.test.ts.snap
@@ -726,6 +726,11 @@ exports[`Liquid > jsx > Javascript Test > self-referencing component with childr
 "
 `;
 
+exports[`Liquid > jsx > Javascript Test > setState 1`] = `
+"<div><button>Click me</button></div>
+"
+`;
+
 exports[`Liquid > jsx > Javascript Test > showExpressions 1`] = `
 "<div>
   {% if conditionA %}Content0{% endif %} {% if conditionA %}ContentA{% endif %}
@@ -1637,6 +1642,11 @@ exports[`Liquid > jsx > Typescript Test > self-referencing component with childr
 "
 `;
 
+exports[`Liquid > jsx > Typescript Test > setState 1`] = `
+"<div><button>Click me</button></div>
+"
+`;
+
 exports[`Liquid > jsx > Typescript Test > showExpressions 1`] = `
 "<div>
   {% if conditionA %}Content0{% endif %} {% if conditionA %}ContentA{% endif %}
diff --git a/packages/core/src/__tests__/__snapshots__/lit.test.ts.snap b/packages/core/src/__tests__/__snapshots__/lit.test.ts.snap
index dc795de426..fa82c82513 100644
--- a/packages/core/src/__tests__/__snapshots__/lit.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/lit.test.ts.snap
@@ -428,7 +428,7 @@ export default class MyBasicRefComponent extends LitElement {
 
   onBlur = function onBlur() {
     // Maintain focus
-    inputRef.focus();
+    inputRef?.focus();
   };
   lowerCaseName = function lowerCaseName() {
     return this.name.toLowerCase();
@@ -3648,6 +3648,33 @@ export default class MyComponent extends LitElement {
 "
 `;
 
+exports[`Lit > jsx > Javascript Test > setState 1`] = `
+"import { LitElement, html, css } from \\"lit\\";
+import { customElement, property, state, query } from \\"lit/decorators.js\\";
+
+@customElement(\\"set-state\\")
+export default class SetState extends LitElement {
+  createRenderRoot() {
+    return this;
+  }
+
+  @state() n = [\\"123\\"];
+
+  someFn() {
+    this.n[0] = \\"123\\";
+  }
+
+  render() {
+    return html\`
+
+          <div ><button  @click=\${(event) =>
+            this.someFn} >Click me</button></div>
+        \`;
+  }
+}
+"
+`;
+
 exports[`Lit > jsx > Javascript Test > showExpressions 1`] = `
 "import { LitElement, html, css } from \\"lit\\";
 import { customElement, property, state, query } from \\"lit/decorators.js\\";
@@ -4676,7 +4703,7 @@ export default class MyBasicRefComponent extends LitElement {
 
   onBlur = function onBlur() {
     // Maintain focus
-    inputRef.focus();
+    inputRef?.focus();
   };
   lowerCaseName = function lowerCaseName() {
     return this.name.toLowerCase();
@@ -8281,6 +8308,33 @@ export default class MyComponent extends LitElement {
 "
 `;
 
+exports[`Lit > jsx > Typescript Test > setState 1`] = `
+"import { LitElement, html, css } from \\"lit\\";
+import { customElement, property, state, query } from \\"lit/decorators.js\\";
+
+@customElement(\\"set-state\\")
+export default class SetState extends LitElement {
+  createRenderRoot() {
+    return this;
+  }
+
+  @state() n = [\\"123\\"];
+
+  someFn() {
+    this.n[0] = \\"123\\";
+  }
+
+  render() {
+    return html\`
+
+          <div ><button  @click=\${(event) =>
+            this.someFn} >Click me</button></div>
+        \`;
+  }
+}
+"
+`;
+
 exports[`Lit > jsx > Typescript Test > showExpressions 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 b7eb0053b6..413167ccc7 100644
--- a/packages/core/src/__tests__/__snapshots__/marko.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/marko.test.ts.snap
@@ -305,7 +305,7 @@ exports[`Marko > jsx > Javascript Test > BasicRef 1`] = `
 "class {
   onBlur = function onBlur() {
     // Maintain focus
-    this.inputRef.focus();
+    this.inputRef?.focus();
   };
   lowerCaseName = function lowerCaseName() {
     return this.state.name.toLowerCase();
@@ -324,14 +324,14 @@ exports[`Marko > jsx > Javascript Test > BasicRef 1`] = `
 }
 
 style { 
-  .input-38729636 {
+  .input-9243d59c {
     color: red;
   }
 }
 <div>
   <if(input.showInput)>
     <input
-      class=\\"input-38729636\\"
+      class=\\"input-9243d59c\\"
       key=\\"inputRef\\"
       value=(state.name)
       on-blur(event => component.onBlur())
@@ -2240,6 +2240,20 @@ exports[`Marko > jsx > Javascript Test > self-referencing component with childre
 </div>"
 `;
 
+exports[`Marko > jsx > Javascript Test > setState 1`] = `
+"class {
+  someFn() {
+    this.state.n[0] = \\"123\\";
+  }
+
+  onCreate() {
+    this.state = { n: [\\"123\\"] };
+  }
+}
+
+<div><button on-click(event => component.someFn)>Click me</button></div>"
+`;
+
 exports[`Marko > jsx > Javascript Test > showExpressions 1`] = `
 "class {}
 
@@ -2783,7 +2797,7 @@ exports[`Marko > jsx > Typescript Test > BasicRef 1`] = `
 "class {
   onBlur = function onBlur() {
     // Maintain focus
-    this.inputRef.focus();
+    this.inputRef?.focus();
   };
   lowerCaseName = function lowerCaseName() {
     return this.state.name.toLowerCase();
@@ -2802,14 +2816,14 @@ exports[`Marko > jsx > Typescript Test > BasicRef 1`] = `
 }
 
 style { 
-  .input-77dfc7d6 {
+  .input-2cbd8d2e {
     color: red;
   }
 }
 <div>
   <if(input.showInput)>
     <input
-      class=\\"input-77dfc7d6\\"
+      class=\\"input-2cbd8d2e\\"
       key=\\"inputRef\\"
       value=(state.name)
       on-blur(event => component.onBlur())
@@ -4740,6 +4754,20 @@ exports[`Marko > jsx > Typescript Test > self-referencing component with childre
 </div>"
 `;
 
+exports[`Marko > jsx > Typescript Test > setState 1`] = `
+"class {
+  someFn() {
+    this.state.n[0] = \\"123\\";
+  }
+
+  onCreate() {
+    this.state = { n: [\\"123\\"] };
+  }
+}
+
+<div><button on-click(event => component.someFn)>Click me</button></div>"
+`;
+
 exports[`Marko > jsx > Typescript Test > showExpressions 1`] = `
 "class {}
 
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 baf04a1d9c..be7773fb70 100644
--- a/packages/core/src/__tests__/__snapshots__/parse-jsx.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/parse-jsx.test.ts.snap
@@ -1446,7 +1446,7 @@ exports[`Parse JSX > Javascript > BasicRef 1`] = `
     "onBlur": {
       "code": "function onBlur() {
   // Maintain focus
-  inputRef.focus();
+  inputRef?.focus();
 }",
       "type": "function",
     },
@@ -8853,6 +8853,78 @@ exports[`Parse JSX > Javascript > self-referencing component with children 1`] =
 }
 `;
 
+exports[`Parse JSX > Javascript > setState 1`] = `
+{
+  "@type": "@builder.io/mitosis/component",
+  "children": [
+    {
+      "@type": "@builder.io/mitosis/node",
+      "bindings": {},
+      "children": [
+        {
+          "@type": "@builder.io/mitosis/node",
+          "bindings": {
+            "onClick": {
+              "code": "state.someFn",
+              "type": "single",
+            },
+          },
+          "children": [
+            {
+              "@type": "@builder.io/mitosis/node",
+              "bindings": {},
+              "children": [],
+              "meta": {},
+              "name": "div",
+              "properties": {
+                "_text": "Click me",
+              },
+              "scope": {},
+            },
+          ],
+          "meta": {},
+          "name": "button",
+          "properties": {},
+          "scope": {},
+        },
+      ],
+      "meta": {},
+      "name": "div",
+      "properties": {},
+      "scope": {},
+    },
+  ],
+  "context": {
+    "get": {},
+    "set": {},
+  },
+  "exports": {},
+  "hooks": {
+    "onEvent": [],
+    "onMount": [],
+  },
+  "imports": [],
+  "inputs": [],
+  "meta": {},
+  "name": "SetState",
+  "refs": {},
+  "state": {
+    "n": {
+      "code": "['123']",
+      "propertyType": "reactive",
+      "type": "property",
+    },
+    "someFn": {
+      "code": "someFn() {
+  state.n.value[0] = '123';
+}",
+      "type": "method",
+    },
+  },
+  "subComponents": [],
+}
+`;
+
 exports[`Parse JSX > Javascript > showExpressions 1`] = `
 {
   "@type": "@builder.io/mitosis/component",
@@ -12467,11 +12539,11 @@ exports[`Parse JSX > Typescript > BasicRef 1`] = `
   "refs": {
     "inputNoArgRef": {
       "argument": "null",
-      "typeParameter": "HTMLLabelElement",
+      "typeParameter": "HTMLLabelElement | null",
     },
     "inputRef": {
       "argument": "null",
-      "typeParameter": "HTMLInputElement",
+      "typeParameter": "HTMLInputElement | null",
     },
   },
   "state": {
@@ -12489,7 +12561,7 @@ exports[`Parse JSX > Typescript > BasicRef 1`] = `
     "onBlur": {
       "code": "function onBlur() {
   // Maintain focus
-  inputRef.focus();
+  inputRef?.focus();
 }",
       "type": "function",
     },
@@ -20424,6 +20496,78 @@ exports[`Parse JSX > Typescript > self-referencing component with children 1`] =
 }
 `;
 
+exports[`Parse JSX > Typescript > setState 1`] = `
+{
+  "@type": "@builder.io/mitosis/component",
+  "children": [
+    {
+      "@type": "@builder.io/mitosis/node",
+      "bindings": {},
+      "children": [
+        {
+          "@type": "@builder.io/mitosis/node",
+          "bindings": {
+            "onClick": {
+              "code": "state.someFn",
+              "type": "single",
+            },
+          },
+          "children": [
+            {
+              "@type": "@builder.io/mitosis/node",
+              "bindings": {},
+              "children": [],
+              "meta": {},
+              "name": "div",
+              "properties": {
+                "_text": "Click me",
+              },
+              "scope": {},
+            },
+          ],
+          "meta": {},
+          "name": "button",
+          "properties": {},
+          "scope": {},
+        },
+      ],
+      "meta": {},
+      "name": "div",
+      "properties": {},
+      "scope": {},
+    },
+  ],
+  "context": {
+    "get": {},
+    "set": {},
+  },
+  "exports": {},
+  "hooks": {
+    "onEvent": [],
+    "onMount": [],
+  },
+  "imports": [],
+  "inputs": [],
+  "meta": {},
+  "name": "SetState",
+  "refs": {},
+  "state": {
+    "n": {
+      "code": "['123']",
+      "propertyType": "reactive",
+      "type": "property",
+    },
+    "someFn": {
+      "code": "someFn() {
+  state.n.value[0] = '123';
+}",
+      "type": "method",
+    },
+  },
+  "subComponents": [],
+}
+`;
+
 exports[`Parse JSX > Typescript > showExpressions 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 f689a61ffa..4ba93ba561 100644
--- a/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap
@@ -325,7 +325,7 @@ function MyBasicRefComponent(props) {
 
   function onBlur() {
     // Maintain focus
-    inputRef.current.focus();
+    inputRef.current?.focus();
   }
 
   function lowerCaseName() {
@@ -2973,6 +2973,29 @@ export default MyComponent;
 "
 `;
 
+exports[`Preact > jsx > Javascript Test > setState 1`] = `
+"/** @jsx h */
+import { h, Fragment } from \\"preact\\";
+import { useState } from \\"preact/hooks\\";
+
+function SetState(props) {
+  const [n, setN] = useState(() => [\\"123\\"]);
+
+  function someFn() {
+    n[0] = \\"123\\";
+  }
+
+  return (
+    <div>
+      <button onClick={(event) => someFn}>Click me</button>
+    </div>
+  );
+}
+
+export default SetState;
+"
+`;
+
 exports[`Preact > jsx > Javascript Test > showExpressions 1`] = `
 "/** @jsx h */
 import { h, Fragment } from \\"preact\\";
@@ -3795,13 +3818,13 @@ export interface Props {
 }
 
 function MyBasicRefComponent(props: Props) {
-  const inputRef = useRef<HTMLInputElement>(null);
-  const inputNoArgRef = useRef<HTMLLabelElement>(null);
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  const inputNoArgRef = useRef<HTMLLabelElement | null>(null);
   const [name, setName] = useState(() => \\"PatrickJS\\");
 
   function onBlur() {
     // Maintain focus
-    inputRef.current.focus();
+    inputRef.current?.focus();
   }
 
   function lowerCaseName() {
@@ -6828,6 +6851,29 @@ export default MyComponent;
 "
 `;
 
+exports[`Preact > jsx > Typescript Test > setState 1`] = `
+"/** @jsx h */
+import { h, Fragment } from \\"preact\\";
+import { useState } from \\"preact/hooks\\";
+
+function SetState(props: any) {
+  const [n, setN] = useState(() => [\\"123\\"]);
+
+  function someFn() {
+    n[0] = \\"123\\";
+  }
+
+  return (
+    <div>
+      <button onClick={(event) => someFn}>Click me</button>
+    </div>
+  );
+}
+
+export default SetState;
+"
+`;
+
 exports[`Preact > jsx > Typescript Test > showExpressions 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 35af511ded..e79fc95840 100644
--- a/packages/core/src/__tests__/__snapshots__/qwik.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/qwik.test.ts.snap
@@ -4672,6 +4672,28 @@ export default MyComponent;
 "
 `;
 
+exports[`qwik > jsx > Javascript Test > setState 1`] = `
+"import { $, Fragment, component$, h, useStore } from \\"@builder.io/qwik\\";
+
+export const someFn = function someFn(props, state) {
+  state.n[0] = \\"123\\";
+};
+export const SetState = component$((props) => {
+  const state = useStore({ n: [\\"123\\"] });
+
+  return (
+    <div>
+      <button onClick$={$((event) => someFn.bind(null, props, state))}>
+        Click me
+      </button>
+    </div>
+  );
+});
+
+export default SetState;
+"
+`;
+
 exports[`qwik > jsx > Javascript Test > showExpressions 1`] = `
 "SyntaxError: Expression expected. (5:115)
   3 | export const ShowWithOtherValues=component$((props)=>{
@@ -8383,6 +8405,28 @@ export default MyComponent;
 "
 `;
 
+exports[`qwik > jsx > Typescript Test > setState 1`] = `
+"import { $, Fragment, component$, h, useStore } from \\"@builder.io/qwik\\";
+
+export const someFn = function someFn(props, state) {
+  state.n[0] = \\"123\\";
+};
+export const SetState = component$((props: any) => {
+  const state = useStore<any>({ n: [\\"123\\"] });
+
+  return (
+    <div>
+      <button onClick$={$((event) => someFn.bind(null, props, state))}>
+        Click me
+      </button>
+    </div>
+  );
+});
+
+export default SetState;
+"
+`;
+
 exports[`qwik > jsx > Typescript Test > showExpressions 1`] = `
 "SyntaxError: Expression expected. (9:115)
    7 | export const ShowWithOtherValues=component$((props:Props)=>{
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 745d55dbb2..c295f7d37e 100644
--- a/packages/core/src/__tests__/__snapshots__/react-native.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/react-native.test.ts.snap
@@ -458,7 +458,7 @@ function MyBasicRefComponent(props) {
 
   function onBlur() {
     // Maintain focus
-    inputRef.current.focus();
+    inputRef.current?.focus();
   }
 
   function lowerCaseName() {
@@ -4006,6 +4006,43 @@ export default MyComponent;
 "
 `;
 
+exports[`React Native > jsx > Javascript Test > setState 1`] = `
+"import * as React from \\"react\\";
+import {
+  FlatList,
+  ScrollView,
+  View,
+  StyleSheet,
+  Image,
+  Text,
+  Pressable,
+  TextInput,
+  TouchableOpacity,
+  Button,
+  Linking,
+} from \\"react-native\\";
+import { useState } from \\"react\\";
+
+function SetState(props) {
+  const [n, setN] = useState(() => [\\"123\\"]);
+
+  function someFn() {
+    n[0] = \\"123\\";
+  }
+
+  return (
+    <View>
+      <Button onPress={(event) => someFn}>
+        <Text>Click me</Text>
+      </Button>
+    </View>
+  );
+}
+
+export default SetState;
+"
+`;
+
 exports[`React Native > jsx > Javascript Test > showExpressions 1`] = `
 "import * as React from \\"react\\";
 import {
@@ -5284,13 +5321,13 @@ export interface Props {
 }
 
 function MyBasicRefComponent(props: Props) {
-  const inputRef = useRef<HTMLInputElement>(null);
-  const inputNoArgRef = useRef<HTMLLabelElement>(null);
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  const inputNoArgRef = useRef<HTMLLabelElement | null>(null);
   const [name, setName] = useState(() => \\"PatrickJS\\");
 
   function onBlur() {
     // Maintain focus
-    inputRef.current.focus();
+    inputRef.current?.focus();
   }
 
   function lowerCaseName() {
@@ -9217,6 +9254,43 @@ export default MyComponent;
 "
 `;
 
+exports[`React Native > jsx > Typescript Test > setState 1`] = `
+"import * as React from \\"react\\";
+import {
+  FlatList,
+  ScrollView,
+  View,
+  StyleSheet,
+  Image,
+  Text,
+  Pressable,
+  TextInput,
+  TouchableOpacity,
+  Button,
+  Linking,
+} from \\"react-native\\";
+import { useState } from \\"react\\";
+
+function SetState(props: any) {
+  const [n, setN] = useState(() => [\\"123\\"]);
+
+  function someFn() {
+    n[0] = \\"123\\";
+  }
+
+  return (
+    <View>
+      <Button onPress={(event) => someFn}>
+        <Text>Click me</Text>
+      </Button>
+    </View>
+  );
+}
+
+export default SetState;
+"
+`;
+
 exports[`React Native > jsx > Typescript Test > showExpressions 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 0518c45f27..8576aed5fb 100644
--- a/packages/core/src/__tests__/__snapshots__/react.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/react.test.ts.snap
@@ -323,7 +323,7 @@ function MyBasicRefComponent(props) {
 
   function onBlur() {
     // Maintain focus
-    inputRef.current.focus();
+    inputRef.current?.focus();
   }
 
   function lowerCaseName() {
@@ -2944,6 +2944,29 @@ export default MyComponent;
 "
 `;
 
+exports[`React > jsx > Javascript Test > setState 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useState } from \\"react\\";
+
+function SetState(props) {
+  const [n, setN] = useState(() => [\\"123\\"]);
+
+  function someFn() {
+    n[0] = \\"123\\";
+  }
+
+  return (
+    <div>
+      <button onClick={(event) => someFn}>Click me</button>
+    </div>
+  );
+}
+
+export default SetState;
+"
+`;
+
 exports[`React > jsx > Javascript Test > showExpressions 1`] = `
 "import * as React from \\"react\\";
 
@@ -3697,13 +3720,13 @@ export interface Props {
 }
 
 function MyBasicRefComponent(props: Props) {
-  const inputRef = useRef<HTMLInputElement>(null);
-  const inputNoArgRef = useRef<HTMLLabelElement>(null);
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  const inputNoArgRef = useRef<HTMLLabelElement | null>(null);
   const [name, setName] = useState(() => \\"PatrickJS\\");
 
   function onBlur() {
     // Maintain focus
-    inputRef.current.focus();
+    inputRef.current?.focus();
   }
 
   function lowerCaseName() {
@@ -6703,6 +6726,29 @@ export default MyComponent;
 "
 `;
 
+exports[`React > jsx > Typescript Test > setState 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useState } from \\"react\\";
+
+function SetState(props: any) {
+  const [n, setN] = useState(() => [\\"123\\"]);
+
+  function someFn() {
+    n[0] = \\"123\\";
+  }
+
+  return (
+    <div>
+      <button onClick={(event) => someFn}>Click me</button>
+    </div>
+  );
+}
+
+export default SetState;
+"
+`;
+
 exports[`React > jsx > Typescript Test > showExpressions 1`] = `
 "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 e1a2b52c7d..9601088419 100644
--- a/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap
@@ -323,7 +323,7 @@ function MyBasicRefComponent(props) {
 
   function onBlur() {
     // Maintain focus
-    inputRef.current.focus();
+    inputRef.current?.focus();
   }
 
   function lowerCaseName() {
@@ -2689,6 +2689,29 @@ export default MyComponent;
 "
 `;
 
+exports[`RSC > jsx > Javascript Test > setState 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useState } from \\"react\\";
+
+function SetState(props) {
+  const [n, setN] = useState(() => [\\"123\\"]);
+
+  function someFn() {
+    n[0] = \\"123\\";
+  }
+
+  return (
+    <div>
+      <button onClick={(event) => someFn}>Click me</button>
+    </div>
+  );
+}
+
+export default SetState;
+"
+`;
+
 exports[`RSC > jsx > Javascript Test > showExpressions 1`] = `
 "import * as React from \\"react\\";
 
@@ -3439,13 +3462,13 @@ export interface Props {
 }
 
 function MyBasicRefComponent(props: Props) {
-  const inputRef = useRef<HTMLInputElement>(null);
-  const inputNoArgRef = useRef<HTMLLabelElement>(null);
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  const inputNoArgRef = useRef<HTMLLabelElement | null>(null);
   const [name, setName] = useState(() => \\"PatrickJS\\");
 
   function onBlur() {
     // Maintain focus
-    inputRef.current.focus();
+    inputRef.current?.focus();
   }
 
   function lowerCaseName() {
@@ -6177,6 +6200,29 @@ export default MyComponent;
 "
 `;
 
+exports[`RSC > jsx > Typescript Test > setState 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useState } from \\"react\\";
+
+function SetState(props: any) {
+  const [n, setN] = useState(() => [\\"123\\"]);
+
+  function someFn() {
+    n[0] = \\"123\\";
+  }
+
+  return (
+    <div>
+      <button onClick={(event) => someFn}>Click me</button>
+    </div>
+  );
+}
+
+export default SetState;
+"
+`;
+
 exports[`RSC > jsx > Typescript Test > showExpressions 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 2fdbb472a2..ff3a5220ed 100644
--- a/packages/core/src/__tests__/__snapshots__/solid.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/solid.test.ts.snap
@@ -744,7 +744,7 @@ function MyBasicRefComponent(props) {
 
   function onBlur() {
     // Maintain focus
-    inputRef.focus();
+    inputRef?.focus();
   }
 
   function lowerCaseName() {
@@ -760,7 +760,7 @@ function MyBasicRefComponent(props) {
         <Show when={props.showInput}>
           <>
             <input
-              class=\\"input-1360a7e4\\"
+              class=\\"input-0334592e\\"
               ref={inputRef}
               value={name()}
               onBlur={(event) => onBlur()}
@@ -779,7 +779,7 @@ function MyBasicRefComponent(props) {
         {lowerCaseName()}! I can run in React, Qwik, Vue, Solid, or Web
         Component!
       </div>
-      <style>{\`.input-1360a7e4 {
+      <style>{\`.input-0334592e {
   color: red;
 }\`}</style>
     </>
@@ -798,7 +798,7 @@ function MyBasicRefComponent(props) {
 
   function onBlur() {
     // Maintain focus
-    inputRef.focus();
+    inputRef?.focus();
   }
 
   function lowerCaseName() {
@@ -814,7 +814,7 @@ function MyBasicRefComponent(props) {
         <Show when={props.showInput}>
           <>
             <input
-              class=\\"input-1360a7e4\\"
+              class=\\"input-0334592e\\"
               ref={inputRef}
               value={name()}
               onBlur={(event) => onBlur()}
@@ -833,7 +833,7 @@ function MyBasicRefComponent(props) {
         {lowerCaseName()}! I can run in React, Qwik, Vue, Solid, or Web
         Component!
       </div>
-      <style>{\`.input-1360a7e4 {
+      <style>{\`.input-0334592e {
   color: red;
 }\`}</style>
     </>
@@ -6142,6 +6142,52 @@ export default MyComponent;
 "
 `;
 
+exports[`Solid > jsx > Javascript Test > setState 1`] = `
+"import { createSignal, createMemo } from \\"solid-js\\";
+
+function SetState(props) {
+  const [n, setN] = createSignal([\\"123\\"]);
+
+  function someFn() {
+    n()[0] = \\"123\\";
+  }
+
+  return (
+    <>
+      <div>
+        <button onClick={(event) => someFn}>Click me</button>
+      </div>
+    </>
+  );
+}
+
+export default SetState;
+"
+`;
+
+exports[`Solid > jsx > Javascript Test > setState 2`] = `
+"import { createSignal, createMemo } from \\"solid-js\\";
+
+function SetState(props) {
+  const [n, setN] = createSignal([\\"123\\"]);
+
+  function someFn() {
+    n()[0] = \\"123\\";
+  }
+
+  return (
+    <>
+      <div>
+        <button onClick={(event) => someFn}>Click me</button>
+      </div>
+    </>
+  );
+}
+
+export default SetState;
+"
+`;
+
 exports[`Solid > jsx > Javascript Test > showExpressions 1`] = `
 "An identifier or keyword cannot immediately follow a numeric literal. (36:34)
   34 | <Show fallback={123} when={props.conditionA} >ContentF</Show>
@@ -7746,15 +7792,15 @@ function MyBasicRefComponent(props: Props) {
 
   function onBlur() {
     // Maintain focus
-    inputRef.focus();
+    inputRef?.focus();
   }
 
   function lowerCaseName() {
     return name().toLowerCase();
   }
 
-  let inputRef: HTMLInputElement;
-  let inputNoArgRef: HTMLLabelElement;
+  let inputRef: HTMLInputElement | null;
+  let inputNoArgRef: HTMLLabelElement | null;
 
   return (
     <>
@@ -7762,7 +7808,7 @@ function MyBasicRefComponent(props: Props) {
         <Show when={props.showInput}>
           <>
             <input
-              class=\\"input-1dafdd72\\"
+              class=\\"input-66077644\\"
               ref={inputRef!}
               value={name()}
               onBlur={(event) => onBlur()}
@@ -7781,7 +7827,7 @@ function MyBasicRefComponent(props: Props) {
         {lowerCaseName()}! I can run in React, Qwik, Vue, Solid, or Web
         Component!
       </div>
-      <style>{\`.input-1dafdd72 {
+      <style>{\`.input-66077644 {
   color: red;
 }\`}</style>
     </>
@@ -7804,15 +7850,15 @@ function MyBasicRefComponent(props: Props) {
 
   function onBlur() {
     // Maintain focus
-    inputRef.focus();
+    inputRef?.focus();
   }
 
   function lowerCaseName() {
     return name().toLowerCase();
   }
 
-  let inputRef: HTMLInputElement;
-  let inputNoArgRef: HTMLLabelElement;
+  let inputRef: HTMLInputElement | null;
+  let inputNoArgRef: HTMLLabelElement | null;
 
   return (
     <>
@@ -7820,7 +7866,7 @@ function MyBasicRefComponent(props: Props) {
         <Show when={props.showInput}>
           <>
             <input
-              class=\\"input-1dafdd72\\"
+              class=\\"input-66077644\\"
               ref={inputRef!}
               value={name()}
               onBlur={(event) => onBlur()}
@@ -7839,7 +7885,7 @@ function MyBasicRefComponent(props: Props) {
         {lowerCaseName()}! I can run in React, Qwik, Vue, Solid, or Web
         Component!
       </div>
-      <style>{\`.input-1dafdd72 {
+      <style>{\`.input-66077644 {
   color: red;
 }\`}</style>
     </>
@@ -13912,6 +13958,52 @@ export default MyComponent;
 "
 `;
 
+exports[`Solid > jsx > Typescript Test > setState 1`] = `
+"import { createSignal, createMemo } from \\"solid-js\\";
+
+function SetState(props: any) {
+  const [n, setN] = createSignal([\\"123\\"]);
+
+  function someFn() {
+    n()[0] = \\"123\\";
+  }
+
+  return (
+    <>
+      <div>
+        <button onClick={(event) => someFn}>Click me</button>
+      </div>
+    </>
+  );
+}
+
+export default SetState;
+"
+`;
+
+exports[`Solid > jsx > Typescript Test > setState 2`] = `
+"import { createSignal, createMemo } from \\"solid-js\\";
+
+function SetState(props: any) {
+  const [n, setN] = createSignal([\\"123\\"]);
+
+  function someFn() {
+    n()[0] = \\"123\\";
+  }
+
+  return (
+    <>
+      <div>
+        <button onClick={(event) => someFn}>Click me</button>
+      </div>
+    </>
+  );
+}
+
+export default SetState;
+"
+`;
+
 exports[`Solid > jsx > Typescript Test > showExpressions 1`] = `
 "An identifier or keyword cannot immediately follow a numeric literal. (39:34)
   37 | <Show fallback={123} when={props.conditionA} >ContentF</Show>
diff --git a/packages/core/src/__tests__/__snapshots__/stencil.test.ts.snap b/packages/core/src/__tests__/__snapshots__/stencil.test.ts.snap
index 289ea1e2c9..19c45435eb 100644
--- a/packages/core/src/__tests__/__snapshots__/stencil.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/stencil.test.ts.snap
@@ -345,7 +345,7 @@ export default class MyBasicRefComponent {
 
   onBlur = function onBlur() {
     // Maintain focus
-    inputRef.focus();
+    inputRef?.focus();
   };
   lowerCaseName = function lowerCaseName() {
     return this.name.toLowerCase();
@@ -2774,6 +2774,30 @@ export default class MyComponent {
 "
 `;
 
+exports[`Stencil > jsx > Javascript Test > setState 1`] = `
+"import { Component, Prop, h, State, Fragment } from \\"@stencil/core\\";
+
+@Component({
+  tag: \\"set-state\\",
+})
+export default class SetState {
+  @State() n = [\\"123\\"];
+
+  someFn() {
+    this.n[0] = \\"123\\";
+  }
+
+  render() {
+    return (
+      <div>
+        <button onClick={(event) => this.someFn}>Click me</button>
+      </div>
+    );
+  }
+}
+"
+`;
+
 exports[`Stencil > jsx > Javascript Test > signalsOnUpdate 1`] = `
 "import { Component, Prop, h, State, Fragment } from \\"@stencil/core\\";
 
@@ -3475,7 +3499,7 @@ export default class MyBasicRefComponent {
 
   onBlur = function onBlur() {
     // Maintain focus
-    inputRef.focus();
+    inputRef?.focus();
   };
   lowerCaseName = function lowerCaseName() {
     return this.name.toLowerCase();
@@ -5916,6 +5940,30 @@ export default class MyComponent {
 "
 `;
 
+exports[`Stencil > jsx > Typescript Test > setState 1`] = `
+"import { Component, Prop, h, State, Fragment } from \\"@stencil/core\\";
+
+@Component({
+  tag: \\"set-state\\",
+})
+export default class SetState {
+  @State() n = [\\"123\\"];
+
+  someFn() {
+    this.n[0] = \\"123\\";
+  }
+
+  render() {
+    return (
+      <div>
+        <button onClick={(event) => this.someFn}>Click me</button>
+      </div>
+    );
+  }
+}
+"
+`;
+
 exports[`Stencil > jsx > Typescript Test > signalsOnUpdate 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 af2a525985..0692314ff4 100644
--- a/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap
@@ -265,7 +265,7 @@ exports[`Svelte > jsx > Javascript Test > BasicRef 1`] = `
 
   function onBlur() {
     // Maintain focus
-    inputRef.focus();
+    inputRef?.focus();
   }
 
   function lowerCaseName() {
@@ -2489,6 +2489,26 @@ exports[`Svelte > jsx > Javascript Test > self-referencing component with childr
 </div>"
 `;
 
+exports[`Svelte > jsx > Javascript Test > setState 1`] = `
+"<script>
+  import { writable } from \\"svelte/store\\";
+
+  function someFn() {
+    $n[0] = \\"123\\";
+  }
+
+  let n = writable([\\"123\\"]);
+</script>
+
+<div>
+  <button
+    on:click={(event) => {
+      someFn;
+    }}>Click me</button
+  >
+</div>"
+`;
+
 exports[`Svelte > jsx > Javascript Test > showExpressions 1`] = `
 "<script>
   export let conditionA;
@@ -3155,7 +3175,7 @@ exports[`Svelte > jsx > Typescript Test > BasicRef 1`] = `
 
   function onBlur() {
     // Maintain focus
-    inputRef.focus();
+    inputRef?.focus();
   }
 
   function lowerCaseName() {
@@ -5896,6 +5916,26 @@ exports[`Svelte > jsx > Typescript Test > self-referencing component with childr
 </div>"
 `;
 
+exports[`Svelte > jsx > Typescript Test > setState 1`] = `
+"<script lang=\\"ts\\">
+  import { writable } from \\"svelte/store\\";
+
+  function someFn() {
+    $n[0] = \\"123\\";
+  }
+
+  let n = writable([\\"123\\"]);
+</script>
+
+<div>
+  <button
+    on:click={(event) => {
+      someFn;
+    }}>Click me</button
+  >
+</div>"
+`;
+
 exports[`Svelte > jsx > Typescript Test > showExpressions 1`] = `
 "<script context=\\"module\\" lang=\\"ts\\">
   interface Props {
diff --git a/packages/core/src/__tests__/__snapshots__/taro.test.ts.snap b/packages/core/src/__tests__/__snapshots__/taro.test.ts.snap
index 1f3dae64da..513acfbd01 100644
--- a/packages/core/src/__tests__/__snapshots__/taro.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/taro.test.ts.snap
@@ -333,7 +333,7 @@ function MyBasicRefComponent(props) {
 
   function onBlur() {
     // Maintain focus
-    inputRef.current.focus();
+    inputRef.current?.focus();
   }
 
   function lowerCaseName() {
@@ -2990,6 +2990,30 @@ export default MyComponent;
 "
 `;
 
+exports[`Taro > jsx > Javascript Test > setState 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useState } from \\"react\\";
+import { View, Button, Text } from \\"@tarojs/components\\";
+
+function SetState(props) {
+  const [n, setN] = useState(() => [\\"123\\"]);
+
+  function someFn() {
+    n[0] = \\"123\\";
+  }
+
+  return (
+    <View>
+      <Button onClick={(event) => someFn}>Click me</Button>
+    </View>
+  );
+}
+
+export default SetState;
+"
+`;
+
 exports[`Taro > jsx > Javascript Test > showExpressions 1`] = `
 "import * as React from \\"react\\";
 import { View, Text } from \\"@tarojs/components\\";
@@ -3773,13 +3797,13 @@ export interface Props {
 import { View, Input, Text } from \\"@tarojs/components\\";
 
 function MyBasicRefComponent(props: Props) {
-  const inputRef = useRef<HTMLInputElement>(null);
-  const inputNoArgRef = useRef<HTMLLabelElement>(null);
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  const inputNoArgRef = useRef<HTMLLabelElement | null>(null);
   const [name, setName] = useState(() => \\"PatrickJS\\");
 
   function onBlur() {
     // Maintain focus
-    inputRef.current.focus();
+    inputRef.current?.focus();
   }
 
   function lowerCaseName() {
@@ -6838,6 +6862,30 @@ export default MyComponent;
 "
 `;
 
+exports[`Taro > jsx > Typescript Test > setState 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useState } from \\"react\\";
+import { View, Button, Text } from \\"@tarojs/components\\";
+
+function SetState(props: any) {
+  const [n, setN] = useState(() => [\\"123\\"]);
+
+  function someFn() {
+    n[0] = \\"123\\";
+  }
+
+  return (
+    <View>
+      <Button onClick={(event) => someFn}>Click me</Button>
+    </View>
+  );
+}
+
+export default SetState;
+"
+`;
+
 exports[`Taro > jsx > Typescript Test > showExpressions 1`] = `
 "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 416200e840..71803655e8 100644
--- a/packages/core/src/__tests__/__snapshots__/vue-composition.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/vue-composition.test.ts.snap
@@ -34,7 +34,7 @@ const inputRef = ref(null);
 const inputNoArgRef = ref(null);
 
 watch(
-  () => [inputRef?.value, inputNoArgRef?.value],
+  () => [inputRef.value, inputNoArgRef.value],
   () => {
     console.log(\\"Received an update\\");
   },
@@ -42,10 +42,10 @@ watch(
 );
 function onBlur() {
   // Maintain focus
-  inputRef?.value.focus();
+  inputRef.value.focus();
 }
 function lowerCaseName() {
-  return name?.value.toLowerCase();
+  return name.value.toLowerCase();
 }
 </script>
 
@@ -181,7 +181,7 @@ const props = defineProps([\\"onMessage\\", \\"onEvent\\", \\"message\\"]);
 const name = ref(\\"PatrickJS\\");
 
 onMounted(() => {
-  props.onMessage(name?.value);
+  props.onMessage(name.value);
   props.onEvent(props.message);
 });
 </script>"
@@ -199,7 +199,7 @@ const props = defineProps([\\"onMessage\\", \\"onEvent\\", \\"message\\"]);
 const name = ref(\\"PatrickJS\\");
 
 onMounted(() => {
-  props.onMessage(name?.value);
+  props.onMessage(name.value);
   props.onEvent(props.message);
 });
 </script>"
@@ -319,10 +319,10 @@ const inputNoArgRef = ref(null);
 
 function onBlur() {
   // Maintain focus
-  inputRef?.value.focus();
+  inputRef.value?.focus();
 }
 function lowerCaseName() {
-  return name?.value.toLowerCase();
+  return name.value.toLowerCase();
 }
 </script>
 
@@ -345,8 +345,8 @@ const holdValueRef = ref(null);
 
 function handlerClick(event) {
   event.preventDefault();
-  console.log(\\"current value\\", holdValueRef?.value);
-  holdValueRef.value = holdValueRef?.value + \\"JS\\";
+  console.log(\\"current value\\", holdValueRef.value);
+  holdValueRef.value = holdValueRef.value + \\"JS\\";
 }
 </script>"
 `;
@@ -380,7 +380,7 @@ const count = ref(0);
 const prevCount = ref(null);
 
 watch(
-  () => [count?.value],
+  () => [count.value],
   () => {
     prevCount.value = count.value;
   },
@@ -512,7 +512,7 @@ const showContent = ref(false);
 
 const cls = computed(() => {
   return useSlots().content && useSlots().default
-    ? \`\${name?.value}-content\`
+    ? \`\${name.value}-content\`
     : \\"\\";
 });
 
@@ -546,19 +546,19 @@ onMounted(() => {
 
 function findAndRunScripts() {
   // TODO: Move this function to standalone one in '@builder.io/utils'
-  if (elem?.value && typeof window !== \\"undefined\\") {
+  if (elem.value && typeof window !== \\"undefined\\") {
     /** @type {HTMLScriptElement[]} */
-    const scripts = elem?.value.getElementsByTagName(\\"script\\");
+    const scripts = elem.value.getElementsByTagName(\\"script\\");
 
     for (let i = 0; i < scripts.length; i++) {
       const script = scripts[i];
 
       if (script.src) {
-        if (scriptsInserted?.value.includes(script.src)) {
+        if (scriptsInserted.value.includes(script.src)) {
           continue;
         }
 
-        scriptsInserted?.value.push(script.src);
+        scriptsInserted.value.push(script.src);
         const newScript = document.createElement(\\"script\\");
         newScript.async = true;
         newScript.src = script.src;
@@ -571,12 +571,12 @@ function findAndRunScripts() {
           \\"application/ecmascript\\",
         ].includes(script.type)
       ) {
-        if (scriptsRun?.value.includes(script.innerText)) {
+        if (scriptsRun.value.includes(script.innerText)) {
           continue;
         }
 
         try {
-          scriptsRun?.value.push(script.innerText);
+          scriptsRun.value.push(script.innerText);
           new Function(script.innerText)();
         } catch (error) {
           console.warn(\\"\`CustomCode\`: Error running script:\\", error);
@@ -612,19 +612,19 @@ onMounted(() => {
 
 function findAndRunScripts() {
   // TODO: Move this function to standalone one in '@builder.io/utils'
-  if (elem?.value && typeof window !== \\"undefined\\") {
+  if (elem.value && typeof window !== \\"undefined\\") {
     /** @type {HTMLScriptElement[]} */
-    const scripts = elem?.value.getElementsByTagName(\\"script\\");
+    const scripts = elem.value.getElementsByTagName(\\"script\\");
 
     for (let i = 0; i < scripts.length; i++) {
       const script = scripts[i];
 
       if (script.src) {
-        if (scriptsInserted?.value.includes(script.src)) {
+        if (scriptsInserted.value.includes(script.src)) {
           continue;
         }
 
-        scriptsInserted?.value.push(script.src);
+        scriptsInserted.value.push(script.src);
         const newScript = document.createElement(\\"script\\");
         newScript.async = true;
         newScript.src = script.src;
@@ -637,12 +637,12 @@ function findAndRunScripts() {
           \\"application/ecmascript\\",
         ].includes(script.type)
       ) {
-        if (scriptsRun?.value.includes(script.innerText)) {
+        if (scriptsRun.value.includes(script.innerText)) {
           continue;
         }
 
         try {
-          scriptsRun?.value.push(script.innerText);
+          scriptsRun.value.push(script.innerText);
           new Function(script.innerText)();
         } catch (error) {
           console.warn(\\"\`CustomCode\`: Error running script:\\", error);
@@ -744,7 +744,7 @@ const formErrorMessage = ref(\\"\\");
 const formRef = ref(null);
 
 const submissionState = computed(() => {
-  return (Builder.isEditing && props.previewState) || formState?.value;
+  return (Builder.isEditing && props.previewState) || formState.value;
 });
 
 function onSubmit(event) {
@@ -848,8 +848,8 @@ function onSubmit(event) {
       },
     });
 
-    if (formRef?.value) {
-      formRef?.value.dispatchEvent(presubmitEvent);
+    if (formRef.value) {
+      formRef.value.dispatchEvent(presubmitEvent);
 
       if (presubmitEvent.defaultPrevented) {
         return;
@@ -907,8 +907,8 @@ function onSubmit(event) {
             },
           });
 
-          if (formRef?.value) {
-            formRef?.value.dispatchEvent(submitSuccessEvent);
+          if (formRef.value) {
+            formRef.value.dispatchEvent(submitSuccessEvent);
 
             if (submitSuccessEvent.defaultPrevented) {
               return;
@@ -916,19 +916,19 @@ function onSubmit(event) {
             /* TODO: option to turn this on/off? */
 
             if (props.resetFormOnSubmit !== false) {
-              formRef?.value.reset();
+              formRef.value.reset();
             }
           }
           /* TODO: client side route event first that can be preventDefaulted */
 
           if (props.successUrl) {
-            if (formRef?.value) {
+            if (formRef.value) {
               const event = new CustomEvent(\\"route\\", {
                 detail: {
                   url: props.successUrl,
                 },
               });
-              formRef?.value.dispatchEvent(event);
+              formRef.value.dispatchEvent(event);
 
               if (!event.defaultPrevented) {
                 location.href = props.successUrl;
@@ -946,8 +946,8 @@ function onSubmit(event) {
           },
         });
 
-        if (formRef?.value) {
-          formRef?.value.dispatchEvent(submitErrorEvent);
+        if (formRef.value) {
+          formRef.value.dispatchEvent(submitErrorEvent);
 
           if (submitErrorEvent.defaultPrevented) {
             return;
@@ -1014,8 +1014,8 @@ onMounted(() => {
   if (useLazyLoading()) {
     // throttled scroll capture listener
     const listener = () => {
-      if (pictureRef?.value) {
-        const rect = pictureRef?.value.getBoundingClientRect();
+      if (pictureRef.value) {
+        const rect = pictureRef.value.getBoundingClientRect();
         const buffer = window.innerHeight / 2;
 
         if (rect.top < window.innerHeight + buffer) {
@@ -1035,8 +1035,8 @@ onMounted(() => {
   }
 });
 onUnmounted(() => {
-  if (scrollListener?.value) {
-    window.removeEventListener(\\"scroll\\", scrollListener?.value);
+  if (scrollListener.value) {
+    window.removeEventListener(\\"scroll\\", scrollListener.value);
   }
 });
 
@@ -1169,7 +1169,7 @@ exports[`Vue > jsx > Javascript Test > NestedStore 1`] = `
 import { ref } from \\"vue\\";
 
 const _id = ref(\\"abc\\");
-const _messageId = ref(_id?.value + \\"-message\\");
+const _messageId = ref(_id.value + \\"-message\\");
 </script>"
 `;
 
@@ -1456,42 +1456,24 @@ exports[`Vue > jsx > Javascript Test > UseValueAndFnFromStore 1`] = `
 </template>
 
 <script setup>
-    import { onUpdated, ref } from \\"vue\\"
-
-
-
-
-
-
-
-
-
-    const props = defineProps(['onChange'])
-const _id= ref('abc')
-const _active= ref(false)
-
-
-
-
-
-
-
-
-
-
-
+import { onUpdated, ref } from \\"vue\\";
 
-onUpdated(() => {if (_do) {
-_do(_id?.value);
-}})
+const props = defineProps([\\"onChange\\"]);
+const _id = ref(\\"abc\\");
+const _active = ref(false);
 
+onUpdated(() => {
+  if (_do) {
+    _do(_id.value);
+  }
+});
 
- function _do(id) {
-_active?.value = !!id;
+function _do(id) {
+  _active.value = !!id;
 
-if (props.onChange) {
-props.onChange(_active?.value);
-}
+  if (props.onChange) {
+    props.onChange(_active.value);
+  }
 }
 </script>"
 `;
@@ -1644,7 +1626,7 @@ import { ref, watch } from \\"vue\\";
 const name = ref(\\"PatrickJS\\");
 
 watch(
-  () => [name?.value],
+  () => [name.value],
   () => {
     const controller = new AbortController();
     const signal = controller.signal;
@@ -1653,7 +1635,7 @@ watch(
     })
       .then((response) => response.json())
       .then((data) => {
-        name.value = data.name?.value;
+        name.value = data.name.value;
       });
     return () => {
       if (!signal.aborted) {
@@ -1991,22 +1973,22 @@ const c = ref(\\"c\\");
 const d = ref(\\"d\\");
 
 watch(
-  () => [a?.value, b?.value],
+  () => [a.value, b.value],
   () => {
-    console.log(\\"Runs when a or b changes\\", a?.value, b?.value);
+    console.log(\\"Runs when a or b changes\\", a.value, b.value);
 
-    if (a?.value === \\"a\\") {
+    if (a.value === \\"a\\") {
       a.value = \\"b\\";
     }
   },
   { immediate: true }
 );
 watch(
-  () => [c?.value, d?.value],
+  () => [c.value, d.value],
   () => {
-    console.log(\\"Runs when c or d changes\\", c?.value, d?.value);
+    console.log(\\"Runs when c or d changes\\", c.value, d.value);
 
-    if (a?.value === \\"a\\") {
+    if (a.value === \\"a\\") {
       a.value = \\"b\\";
     }
   },
@@ -2104,7 +2086,7 @@ import { onMounted, ref } from \\"vue\\";
 const elem = ref(null);
 
 onMounted(() => {
-  elem?.value.dispatchEvent(new CustomEvent(\\"initEditingBldr\\"));
+  elem.value.dispatchEvent(new CustomEvent(\\"initEditingBldr\\"));
 });
 
 function foo(event) {
@@ -2147,7 +2129,7 @@ export const defaultValues = {
 const props = defineProps([\\"name\\"]);
 const name = ref(\\"\\");
 
-name.value = defaultValues.name?.value || props.name?.value;
+name.value = defaultValues.name.value || props.name.value;
 console.log(\\"set defaults with props\\");
 </script>"
 `;
@@ -2216,14 +2198,9 @@ const a = ref(\\"a\\");
 const b = ref(\\"b\\");
 
 watch(
-  () => [a?.value, b?.value, props.size],
+  () => [a.value, b.value, props.size],
   () => {
-    console.log(
-      \\"Runs when a, b or size changes\\",
-      a?.value,
-      b?.value,
-      props.size
-    );
+    console.log(\\"Runs when a, b or size changes\\", a.value, b.value, props.size);
   },
   { immediate: true }
 );
@@ -2676,6 +2653,22 @@ const props = defineProps([\\"name\\", \\"children\\"]);
 </script>"
 `;
 
+exports[`Vue > jsx > Javascript Test > setState 1`] = `
+"<template>
+  <div><button @click=\\"someFn\\">Click me</button></div>
+</template>
+
+<script setup>
+import { ref } from \\"vue\\";
+
+const n = ref([\\"123\\"]);
+
+function someFn() {
+  n.value[0] = \\"123\\";
+}
+</script>"
+`;
+
 exports[`Vue > jsx > Javascript Test > showExpressions 1`] = `
 "<template>
   <div>
@@ -3119,7 +3112,7 @@ const inputRef = ref<HTMLInputElement>(null);
 const inputNoArgRef = ref<HTMLLabelElement>(null);
 
 watch(
-  () => [inputRef?.value, inputNoArgRef?.value],
+  () => [inputRef.value, inputNoArgRef.value],
   () => {
     console.log(\\"Received an update\\");
   },
@@ -3127,10 +3120,10 @@ watch(
 );
 function onBlur() {
   // Maintain focus
-  inputRef?.value.focus();
+  inputRef.value.focus();
 }
 function lowerCaseName() {
-  return name?.value.toLowerCase();
+  return name.value.toLowerCase();
 }
 </script>
 
@@ -3275,7 +3268,7 @@ const props = defineProps([\\"onMessage\\", \\"onEvent\\", \\"message\\"]);
 const name = ref(\\"PatrickJS\\");
 
 onMounted(() => {
-  props.onMessage(name?.value);
+  props.onMessage(name.value);
   props.onEvent(props.message);
 });
 </script>"
@@ -3293,7 +3286,7 @@ const props = defineProps([\\"onMessage\\", \\"onEvent\\", \\"message\\"]);
 const name = ref(\\"PatrickJS\\");
 
 onMounted(() => {
-  props.onMessage(name?.value);
+  props.onMessage(name.value);
   props.onEvent(props.message);
 });
 </script>"
@@ -3417,15 +3410,15 @@ export interface Props {
 const props = defineProps<Props>();
 const name = ref(\\"PatrickJS\\");
 
-const inputRef = ref<HTMLInputElement>(null);
-const inputNoArgRef = ref<HTMLLabelElement>(null);
+const inputRef = ref<HTMLInputElement | null>(null);
+const inputNoArgRef = ref<HTMLLabelElement | null>(null);
 
 function onBlur() {
   // Maintain focus
-  inputRef?.value.focus();
+  inputRef.value?.focus();
 }
 function lowerCaseName() {
-  return name?.value.toLowerCase();
+  return name.value.toLowerCase();
 }
 </script>
 
@@ -3452,8 +3445,8 @@ const holdValueRef = ref<any>(null);
 
 function handlerClick(event: Event) {
   event.preventDefault();
-  console.log(\\"current value\\", holdValueRef?.value);
-  holdValueRef.value = holdValueRef?.value + \\"JS\\";
+  console.log(\\"current value\\", holdValueRef.value);
+  holdValueRef.value = holdValueRef.value + \\"JS\\";
 }
 </script>"
 `;
@@ -3491,7 +3484,7 @@ const count = ref(0);
 const prevCount = ref<any>(null);
 
 watch(
-  () => [count?.value],
+  () => [count.value],
   () => {
     prevCount.value = count.value;
   },
@@ -3658,7 +3651,7 @@ const showContent = ref(false);
 
 const cls = computed(() => {
   return useSlots().content && useSlots().default
-    ? \`\${name?.value}-content\`
+    ? \`\${name.value}-content\`
     : \\"\\";
 });
 
@@ -3697,19 +3690,19 @@ onMounted(() => {
 
 function findAndRunScripts() {
   // TODO: Move this function to standalone one in '@builder.io/utils'
-  if (elem?.value && typeof window !== \\"undefined\\") {
+  if (elem.value && typeof window !== \\"undefined\\") {
     /** @type {HTMLScriptElement[]} */
-    const scripts = elem?.value.getElementsByTagName(\\"script\\");
+    const scripts = elem.value.getElementsByTagName(\\"script\\");
 
     for (let i = 0; i < scripts.length; i++) {
       const script = scripts[i];
 
       if (script.src) {
-        if (scriptsInserted?.value.includes(script.src)) {
+        if (scriptsInserted.value.includes(script.src)) {
           continue;
         }
 
-        scriptsInserted?.value.push(script.src);
+        scriptsInserted.value.push(script.src);
         const newScript = document.createElement(\\"script\\");
         newScript.async = true;
         newScript.src = script.src;
@@ -3722,12 +3715,12 @@ function findAndRunScripts() {
           \\"application/ecmascript\\",
         ].includes(script.type)
       ) {
-        if (scriptsRun?.value.includes(script.innerText)) {
+        if (scriptsRun.value.includes(script.innerText)) {
           continue;
         }
 
         try {
-          scriptsRun?.value.push(script.innerText);
+          scriptsRun.value.push(script.innerText);
           new Function(script.innerText)();
         } catch (error) {
           console.warn(\\"\`CustomCode\`: Error running script:\\", error);
@@ -3768,19 +3761,19 @@ onMounted(() => {
 
 function findAndRunScripts() {
   // TODO: Move this function to standalone one in '@builder.io/utils'
-  if (elem?.value && typeof window !== \\"undefined\\") {
+  if (elem.value && typeof window !== \\"undefined\\") {
     /** @type {HTMLScriptElement[]} */
-    const scripts = elem?.value.getElementsByTagName(\\"script\\");
+    const scripts = elem.value.getElementsByTagName(\\"script\\");
 
     for (let i = 0; i < scripts.length; i++) {
       const script = scripts[i];
 
       if (script.src) {
-        if (scriptsInserted?.value.includes(script.src)) {
+        if (scriptsInserted.value.includes(script.src)) {
           continue;
         }
 
-        scriptsInserted?.value.push(script.src);
+        scriptsInserted.value.push(script.src);
         const newScript = document.createElement(\\"script\\");
         newScript.async = true;
         newScript.src = script.src;
@@ -3793,12 +3786,12 @@ function findAndRunScripts() {
           \\"application/ecmascript\\",
         ].includes(script.type)
       ) {
-        if (scriptsRun?.value.includes(script.innerText)) {
+        if (scriptsRun.value.includes(script.innerText)) {
           continue;
         }
 
         try {
-          scriptsRun?.value.push(script.innerText);
+          scriptsRun.value.push(script.innerText);
           new Function(script.innerText)();
         } catch (error) {
           console.warn(\\"\`CustomCode\`: Error running script:\\", error);
@@ -3905,7 +3898,7 @@ const formErrorMessage = ref(\\"\\");
 const formRef = ref<HTMLFormElement>(null);
 
 const submissionState = computed(() => {
-  return (Builder.isEditing && props.previewState) || formState?.value;
+  return (Builder.isEditing && props.previewState) || formState.value;
 });
 
 function onSubmit(
@@ -4016,8 +4009,8 @@ function onSubmit(
       },
     });
 
-    if (formRef?.value) {
-      formRef?.value.dispatchEvent(presubmitEvent);
+    if (formRef.value) {
+      formRef.value.dispatchEvent(presubmitEvent);
 
       if (presubmitEvent.defaultPrevented) {
         return;
@@ -4075,8 +4068,8 @@ function onSubmit(
             },
           });
 
-          if (formRef?.value) {
-            formRef?.value.dispatchEvent(submitSuccessEvent);
+          if (formRef.value) {
+            formRef.value.dispatchEvent(submitSuccessEvent);
 
             if (submitSuccessEvent.defaultPrevented) {
               return;
@@ -4084,19 +4077,19 @@ function onSubmit(
             /* TODO: option to turn this on/off? */
 
             if (props.resetFormOnSubmit !== false) {
-              formRef?.value.reset();
+              formRef.value.reset();
             }
           }
           /* TODO: client side route event first that can be preventDefaulted */
 
           if (props.successUrl) {
-            if (formRef?.value) {
+            if (formRef.value) {
               const event = new CustomEvent(\\"route\\", {
                 detail: {
                   url: props.successUrl,
                 },
               });
-              formRef?.value.dispatchEvent(event);
+              formRef.value.dispatchEvent(event);
 
               if (!event.defaultPrevented) {
                 location.href = props.successUrl;
@@ -4114,8 +4107,8 @@ function onSubmit(
           },
         });
 
-        if (formRef?.value) {
-          formRef?.value.dispatchEvent(submitErrorEvent);
+        if (formRef.value) {
+          formRef.value.dispatchEvent(submitErrorEvent);
 
           if (submitErrorEvent.defaultPrevented) {
             return;
@@ -4193,8 +4186,8 @@ onMounted(() => {
   if (useLazyLoading()) {
     // throttled scroll capture listener
     const listener = () => {
-      if (pictureRef?.value) {
-        const rect = pictureRef?.value.getBoundingClientRect();
+      if (pictureRef.value) {
+        const rect = pictureRef.value.getBoundingClientRect();
         const buffer = window.innerHeight / 2;
 
         if (rect.top < window.innerHeight + buffer) {
@@ -4214,8 +4207,8 @@ onMounted(() => {
   }
 });
 onUnmounted(() => {
-  if (scrollListener?.value) {
-    window.removeEventListener(\\"scroll\\", scrollListener?.value);
+  if (scrollListener.value) {
+    window.removeEventListener(\\"scroll\\", scrollListener.value);
   }
 });
 
@@ -4366,7 +4359,7 @@ type MyStore = {
 };
 
 const _id = ref(\\"abc\\");
-const _messageId = ref(_id?.value + \\"-message\\");
+const _messageId = ref(_id.value + \\"-message\\");
 </script>"
 `;
 
@@ -4732,15 +4725,15 @@ const _active = ref(false);
 
 onUpdated(() => {
   if (_do) {
-    _do(_id?.value);
+    _do(_id.value);
   }
 });
 
 function _do(id?: string) {
-  _active?.value = !!id;
+  _active.value = !!id;
 
   if (props.onChange) {
-    props.onChange(_active?.value);
+    props.onChange(_active.value);
   }
 }
 </script>"
@@ -4920,7 +4913,7 @@ import { ref, watch } from \\"vue\\";
 const name = ref(\\"PatrickJS\\");
 
 watch(
-  () => [name?.value],
+  () => [name.value],
   () => {
     const controller = new AbortController();
     const signal = controller.signal;
@@ -4929,7 +4922,7 @@ watch(
     })
       .then((response) => response.json())
       .then((data) => {
-        name.value = data.name?.value;
+        name.value = data.name.value;
       });
     return () => {
       if (!signal.aborted) {
@@ -5315,22 +5308,22 @@ const c = ref(\\"c\\");
 const d = ref(\\"d\\");
 
 watch(
-  () => [a?.value, b?.value],
+  () => [a.value, b.value],
   () => {
-    console.log(\\"Runs when a or b changes\\", a?.value, b?.value);
+    console.log(\\"Runs when a or b changes\\", a.value, b.value);
 
-    if (a?.value === \\"a\\") {
+    if (a.value === \\"a\\") {
       a.value = \\"b\\";
     }
   },
   { immediate: true }
 );
 watch(
-  () => [c?.value, d?.value],
+  () => [c.value, d.value],
   () => {
-    console.log(\\"Runs when c or d changes\\", c?.value, d?.value);
+    console.log(\\"Runs when c or d changes\\", c.value, d.value);
 
-    if (a?.value === \\"a\\") {
+    if (a.value === \\"a\\") {
       a.value = \\"b\\";
     }
   },
@@ -5433,7 +5426,7 @@ import { onMounted, ref } from \\"vue\\";
 const elem = ref<HTMLDivElement>(null);
 
 onMounted(() => {
-  elem?.value.dispatchEvent(new CustomEvent(\\"initEditingBldr\\"));
+  elem.value.dispatchEvent(new CustomEvent(\\"initEditingBldr\\"));
 });
 
 function foo(event) {
@@ -5480,7 +5473,7 @@ type Props = {
 const props = defineProps<Props>();
 const name = ref(\\"\\");
 
-name.value = defaultValues.name?.value || props.name?.value;
+name.value = defaultValues.name.value || props.name.value;
 console.log(\\"set defaults with props\\");
 </script>"
 `;
@@ -5553,14 +5546,9 @@ const a = ref(\\"a\\");
 const b = ref(\\"b\\");
 
 watch(
-  () => [a?.value, b?.value, props.size],
+  () => [a.value, b.value, props.size],
   () => {
-    console.log(
-      \\"Runs when a, b or size changes\\",
-      a?.value,
-      b?.value,
-      props.size
-    );
+    console.log(\\"Runs when a, b or size changes\\", a.value, b.value, props.size);
   },
   { immediate: true }
 );
@@ -6083,6 +6071,22 @@ const props = defineProps([\\"name\\", \\"children\\"]);
 </script>"
 `;
 
+exports[`Vue > jsx > Typescript Test > setState 1`] = `
+"<template>
+  <div><button @click=\\"someFn\\">Click me</button></div>
+</template>
+
+<script setup lang=\\"ts\\">
+import { ref } from \\"vue\\";
+
+const n = ref([\\"123\\"]);
+
+function someFn() {
+  n.value[0] = \\"123\\";
+}
+</script>"
+`;
+
 exports[`Vue > jsx > Typescript Test > showExpressions 1`] = `
 "<template>
   <div>
@@ -6617,7 +6621,7 @@ const activeTab = ref(0);
 
 const disabled = inject(\\"disabled\\");
 
-provide(\\"activeTab\\", activeTab?.value);
+provide(\\"activeTab\\", activeTab.value);
 </script>"
 `;
 
@@ -6682,7 +6686,7 @@ import { ref } from \\"vue\\";
 const show = ref(true);
 
 function toggle() {
-  show.value = !show?.value;
+  show.value = !show.value;
 }
 </script>"
 `;
@@ -6735,7 +6739,7 @@ import { computed, ref } from \\"vue\\";
 const name = ref(\\"Steve\\");
 
 const lowercaseName = computed(() => {
-  return name?.value.toLowerCase();
+  return name.value.toLowerCase();
 });
 </script>"
 `;
@@ -6760,9 +6764,9 @@ const b = ref(5);
 const result = ref(null);
 
 watch(
-  () => [a?.value, b?.value],
+  () => [a.value, b.value],
   () => {
-    calculateResult(a?.value, b?.value);
+    calculateResult(a.value, b.value);
   },
   { immediate: true }
 );
@@ -6923,7 +6927,7 @@ const activeTab = ref(0);
 
 const disabled = inject(\\"disabled\\");
 
-provide(\\"activeTab\\", activeTab?.value);
+provide(\\"activeTab\\", activeTab.value);
 </script>"
 `;
 
@@ -6988,7 +6992,7 @@ import { ref } from \\"vue\\";
 const show = ref(true);
 
 function toggle() {
-  show.value = !show?.value;
+  show.value = !show.value;
 }
 </script>"
 `;
@@ -7041,7 +7045,7 @@ import { computed, ref } from \\"vue\\";
 const name = ref(\\"Steve\\");
 
 const lowercaseName = computed(() => {
-  return name?.value.toLowerCase();
+  return name.value.toLowerCase();
 });
 </script>"
 `;
@@ -7066,9 +7070,9 @@ const b = ref(5);
 const result = ref(null);
 
 watch(
-  () => [a?.value, b?.value],
+  () => [a.value, b.value],
   () => {
-    calculateResult(a?.value, b?.value);
+    calculateResult(a.value, b.value);
   },
   { immediate: true }
 );
diff --git a/packages/core/src/__tests__/__snapshots__/vue.test.ts.snap b/packages/core/src/__tests__/__snapshots__/vue.test.ts.snap
index ef03746dfc..05da97fb5f 100644
--- a/packages/core/src/__tests__/__snapshots__/vue.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/vue.test.ts.snap
@@ -416,7 +416,7 @@ export default defineComponent({
   methods: {
     onBlur: function onBlur() {
       // Maintain focus
-      this.$refs.inputRef.focus();
+      this.$refs.inputRef?.focus();
     },
     lowerCaseName: function lowerCaseName() {
       return this.name.toLowerCase();
@@ -3283,6 +3283,30 @@ export default defineComponent({
 </script>"
 `;
 
+exports[`Vue > jsx > Javascript Test > setState 1`] = `
+"<template>
+  <div><button @click=\\"someFn\\">Click me</button></div>
+</template>
+
+<script>
+import { defineComponent } from \\"vue\\";
+
+export default defineComponent({
+  name: \\"set-state\\",
+
+  data() {
+    return { n: [\\"123\\"] };
+  },
+
+  methods: {
+    someFn() {
+      this.n[0] = \\"123\\";
+    },
+  },
+});
+</script>"
+`;
+
 exports[`Vue > jsx > Javascript Test > showExpressions 1`] = `
 "<template>
   <div>
@@ -4288,7 +4312,7 @@ export default defineComponent({
   methods: {
     onBlur: function onBlur() {
       // Maintain focus
-      this.$refs.inputRef.focus();
+      this.$refs.inputRef?.focus();
     },
     lowerCaseName: function lowerCaseName() {
       return this.name.toLowerCase();
@@ -7537,6 +7561,30 @@ export default defineComponent({
 </script>"
 `;
 
+exports[`Vue > jsx > Typescript Test > setState 1`] = `
+"<template>
+  <div><button @click=\\"someFn\\">Click me</button></div>
+</template>
+
+<script lang=\\"ts\\">
+import { defineComponent } from \\"vue\\";
+
+export default defineComponent({
+  name: \\"set-state\\",
+
+  data() {
+    return { n: [\\"123\\"] };
+  },
+
+  methods: {
+    someFn() {
+      this.n[0] = \\"123\\";
+    },
+  },
+});
+</script>"
+`;
+
 exports[`Vue > jsx > Typescript Test > showExpressions 1`] = `
 "<template>
   <div>
diff --git a/packages/core/src/__tests__/__snapshots__/webcomponent.test.ts.snap b/packages/core/src/__tests__/__snapshots__/webcomponent.test.ts.snap
index 7f7fdcfc0d..09cb0b4f08 100644
--- a/packages/core/src/__tests__/__snapshots__/webcomponent.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/webcomponent.test.ts.snap
@@ -2360,7 +2360,7 @@ class MyBasicRefComponent extends HTMLElement {
       name: \\"PatrickJS\\",
       onBlur: function onBlur() {
         // Maintain focus
-        self._inputRef.focus();
+        self._inputRef?.focus();
       },
       lowerCaseName: function lowerCaseName() {
         return self.state.name.toLowerCase();
@@ -12655,6 +12655,111 @@ customElements.define(\\"my-component\\", MyComponent);
 "
 `;
 
+exports[`webcomponent > jsx > Javascript Test > setState 1`] = `
+"/**
+ * Usage:
+ *
+ *  <set-state></set-state>
+ *
+ */
+class SetState extends HTMLElement {
+  get _root() {
+    return this.shadowRoot || this;
+  }
+
+  constructor() {
+    super();
+    const self = this;
+
+    this.state = {
+      n: [\\"123\\"],
+      someFn() {
+        self.state.n[0] = \\"123\\";
+      },
+    };
+    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-set-state-1
+    this.onButtonSetState1Click = (event) => {
+      this.state.someFn;
+    };
+
+    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><button data-el=\\"button-set-state-1\\">Click me</button></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() {
+    this._root
+      .querySelectorAll(\\"[data-el='button-set-state-1']\\")
+      .forEach((el) => {
+        el.removeEventListener(\\"click\\", this.onButtonSetState1Click);
+        el.addEventListener(\\"click\\", this.onButtonSetState1Click);
+      });
+  }
+
+  // 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(\\"set-state\\", SetState);
+"
+`;
+
 exports[`webcomponent > jsx > Javascript Test > showExpressions 1`] = `
 "/**
  * Usage:
@@ -17269,7 +17374,7 @@ class MyBasicRefComponent extends HTMLElement {
       name: \\"PatrickJS\\",
       onBlur: function onBlur() {
         // Maintain focus
-        self._inputRef.focus();
+        self._inputRef?.focus();
       },
       lowerCaseName: function lowerCaseName() {
         return self.state.name.toLowerCase();
@@ -27915,6 +28020,111 @@ customElements.define(\\"my-component\\", MyComponent);
 "
 `;
 
+exports[`webcomponent > jsx > Typescript Test > setState 1`] = `
+"/**
+ * Usage:
+ *
+ *  <set-state></set-state>
+ *
+ */
+class SetState extends HTMLElement {
+  get _root() {
+    return this.shadowRoot || this;
+  }
+
+  constructor() {
+    super();
+    const self = this;
+
+    this.state = {
+      n: [\\"123\\"],
+      someFn() {
+        self.state.n[0] = \\"123\\";
+      },
+    };
+    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-set-state-1
+    this.onButtonSetState1Click = (event) => {
+      this.state.someFn;
+    };
+
+    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><button data-el=\\"button-set-state-1\\">Click me</button></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() {
+    this._root
+      .querySelectorAll(\\"[data-el='button-set-state-1']\\")
+      .forEach((el) => {
+        el.removeEventListener(\\"click\\", this.onButtonSetState1Click);
+        el.addEventListener(\\"click\\", this.onButtonSetState1Click);
+      });
+  }
+
+  // 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(\\"set-state\\", SetState);
+"
+`;
+
 exports[`webcomponent > jsx > Typescript Test > showExpressions 1`] = `
 "interface Props {
   conditionA: boolean;
diff --git a/packages/core/src/__tests__/data/basic-ref.raw.tsx b/packages/core/src/__tests__/data/basic-ref.raw.tsx
index 4874aefe92..4677dd7c69 100644
--- a/packages/core/src/__tests__/data/basic-ref.raw.tsx
+++ b/packages/core/src/__tests__/data/basic-ref.raw.tsx
@@ -5,8 +5,8 @@ export interface Props {
 }
 
 export default function MyBasicRefComponent(props: Props) {
-  const inputRef = useRef<HTMLInputElement>(null);
-  const inputNoArgRef = useRef<HTMLLabelElement>(null);
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  const inputNoArgRef = useRef<HTMLLabelElement | null>(null);
 
   const state = useStore({
     name: 'PatrickJS',
@@ -14,7 +14,7 @@ export default function MyBasicRefComponent(props: Props) {
 
   function onBlur() {
     // Maintain focus
-    inputRef.focus();
+    inputRef?.focus();
   }
 
   function lowerCaseName() {
diff --git a/packages/core/src/__tests__/data/context-state.raw.tsx b/packages/core/src/__tests__/data/state/context-state.raw.tsx
similarity index 100%
rename from packages/core/src/__tests__/data/context-state.raw.tsx
rename to packages/core/src/__tests__/data/state/context-state.raw.tsx
diff --git a/packages/core/src/__tests__/data/expression-state.raw.tsx b/packages/core/src/__tests__/data/state/expression-state.raw.tsx
similarity index 100%
rename from packages/core/src/__tests__/data/expression-state.raw.tsx
rename to packages/core/src/__tests__/data/state/expression-state.raw.tsx
diff --git a/packages/core/src/__tests__/data/state/set-state.raw.tsx b/packages/core/src/__tests__/data/state/set-state.raw.tsx
new file mode 100644
index 0000000000..e96e8e0763
--- /dev/null
+++ b/packages/core/src/__tests__/data/state/set-state.raw.tsx
@@ -0,0 +1,17 @@
+import { useState, useStore } from '@builder.io/mitosis';
+
+export default function SetState() {
+  const [n] = useState(['123'], { reactive: true });
+
+  const state = useStore({
+    someFn() {
+      n.value[0] = '123';
+    },
+  });
+
+  return (
+    <div>
+      <button onClick={state.someFn}>Click me</button>
+    </div>
+  );
+}
diff --git a/packages/core/src/__tests__/test-generator.ts b/packages/core/src/__tests__/test-generator.ts
index 496a24a951..2dee04d5c1 100644
--- a/packages/core/src/__tests__/test-generator.ts
+++ b/packages/core/src/__tests__/test-generator.ts
@@ -23,9 +23,6 @@ const componentWithContextMultiRoot = getRawFile(
   './data/context/component-with-context-multi-root.raw.tsx',
 );
 
-const expressionState = getRawFile('./data/expression-state.raw.tsx');
-const contentState = getRawFile('./data/context-state.raw.tsx');
-
 const basic = getRawFile('./data/basic.raw.tsx');
 const basicAttribute = getRawFile('./data/basic-attribute.raw.tsx');
 const basicMitosis = getRawFile('./data/basic-custom-mitosis-package.raw.tsx');
@@ -121,6 +118,11 @@ const renderContentExample = getRawFile('./data/render-content.raw.tsx');
 const onClickToPressable = getRawFile('./data/react-native/onclick-to-pressable.raw.tsx');
 const inputToTextInputRN = getRawFile('./data/react-native/text-input.raw.tsx');
 
+// State
+const setState = getRawFile('./data/state/set-state.raw.tsx');
+const expressionState = getRawFile('./data/state/expression-state.raw.tsx');
+const contentState = getRawFile('./data/state/context-state.raw.tsx');
+
 // Store
 const arrowFunctionInUseStore = getRawFile('./data/store/arrow-function-in-use-store.raw.tsx');
 const NestedStore = getRawFile('./data/store/nested-store.raw.tsx');
@@ -231,6 +233,7 @@ const BASIC_TESTS: Tests = {
   spreadProps,
   renderContentExample,
   arrowFunctionInUseStore,
+  setState,
   expressionState,
   contentState,
   referencingFunInsideHook,
diff --git a/packages/core/src/generators/vue/helpers.ts b/packages/core/src/generators/vue/helpers.ts
index d9842c2e3b..1bc168b1fd 100644
--- a/packages/core/src/generators/vue/helpers.ts
+++ b/packages/core/src/generators/vue/helpers.ts
@@ -132,9 +132,7 @@ function processRefs({
       const name = path.node.name;
       // Composition api should use .value all the time
       if (refs.includes(name) && (api === 'composition' || shouldAppendValueToRef(path))) {
-        const isAssignment = types.isAssignmentExpression(path.parent); // Ref could be optional
-        const newValue =
-          api === 'options' ? `${thisPrefix}.${name}` : `${name}${isAssignment ? '' : '?'}.value`;
+        const newValue = api === 'options' ? `${thisPrefix}.${name}` : `${name}.value`;
         path.replaceWith(types.identifier(newValue));
       }
     },

From d673af20d0b9b5fa46ed473ad9a843d634f2953f Mon Sep 17 00:00:00 2001
From: Nicolas Merget <nicolas.merget@deutschebahn.com>
Date: Mon, 30 Sep 2024 14:15:09 +0200
Subject: [PATCH 3/6] fix: issue with `this.` inside `useStore` for all
 generators

---
 .changeset/perfect-cups-sniff.md              |  8 ++++++-
 .../__snapshots__/marko.test.ts.snap          |  8 +++----
 .../__snapshots__/parse-jsx.test.ts.snap      |  8 +++----
 .../__snapshots__/preact.test.ts.snap         |  4 ++--
 .../__tests__/__snapshots__/qwik.test.ts.snap |  8 +++----
 .../__snapshots__/react-native.test.ts.snap   |  4 ++--
 .../__snapshots__/react.test.ts.snap          |  4 ++--
 .../__tests__/__snapshots__/rsc.test.ts.snap  |  4 ++--
 .../__snapshots__/solid.test.ts.snap          | 16 +++++++-------
 .../__snapshots__/svelte.test.ts.snap         |  8 +++----
 .../__tests__/__snapshots__/taro.test.ts.snap |  4 ++--
 .../__snapshots__/webcomponent.test.ts.snap   | 10 +++++----
 packages/core/src/__tests__/test-generator.ts | 18 +++++++++-------
 .../core/src/generators/vue/compositionApi.ts |  4 ++--
 .../core/src/helpers/replace-identifiers.ts   | 21 +++++++++----------
 packages/core/src/parsers/jsx/state.ts        | 14 +++++++++++--
 16 files changed, 81 insertions(+), 62 deletions(-)

diff --git a/.changeset/perfect-cups-sniff.md b/.changeset/perfect-cups-sniff.md
index 71f1b9203b..fd35813cdb 100644
--- a/.changeset/perfect-cups-sniff.md
+++ b/.changeset/perfect-cups-sniff.md
@@ -2,4 +2,10 @@
 '@builder.io/mitosis': patch
 ---
 
-fix: issues with vue composition api
+[Vue] fix: ref wasn't imported when using `useRef` hook without using `useState`
+
+[Vue] fix: Composition api always use `ref()` wihtout any class -> we don't need this., but we always use `.value`
+
+[Vue] fix: `ref` could be `null` for `useRef` see: https://vuejs.org/guide/essentials/template-refs.html#accessing-the-refs
+
+[All] fix: replace `this.` expression in `useState` with `state.` to resolve correct `stripStateAndPropsRefs()` function inside all generators
diff --git a/packages/core/src/__tests__/__snapshots__/marko.test.ts.snap b/packages/core/src/__tests__/__snapshots__/marko.test.ts.snap
index 413167ccc7..4a35f7fd38 100644
--- a/packages/core/src/__tests__/__snapshots__/marko.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/marko.test.ts.snap
@@ -1303,10 +1303,10 @@ exports[`Marko > jsx > Javascript Test > Textarea 1`] = `
 exports[`Marko > jsx > Javascript Test > UseValueAndFnFromStore 1`] = `
 "class {
   _do(id) {
-    this._active = !!id;
+    this.state._active = !!id;
 
     if (this.input.onChange) {
-      this.input.onChange(this._active);
+      this.input.onChange(this.state._active);
     }
   }
 
@@ -3806,10 +3806,10 @@ exports[`Marko > jsx > Typescript Test > Textarea 1`] = `
 exports[`Marko > jsx > Typescript Test > UseValueAndFnFromStore 1`] = `
 "class {
   _do(id?: string) {
-    this._active = !!id;
+    this.state._active = !!id;
 
     if (this.input.onChange) {
-      this.input.onChange(this._active);
+      this.input.onChange(this.state._active);
     }
   }
 
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 be7773fb70..7482e31862 100644
--- a/packages/core/src/__tests__/__snapshots__/parse-jsx.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/parse-jsx.test.ts.snap
@@ -4831,10 +4831,10 @@ exports[`Parse JSX > Javascript > UseValueAndFnFromStore 1`] = `
     },
     "_do": {
       "code": "_do(id) {
-  this._active = !!id;
+  state._active = !!id;
 
   if (props.onChange) {
-    props.onChange(this._active);
+    props.onChange(state._active);
   }
 }",
       "type": "method",
@@ -16214,10 +16214,10 @@ exports[`Parse JSX > Typescript > UseValueAndFnFromStore 1`] = `
     },
     "_do": {
       "code": "_do(id?: string) {
-  this._active = !!id;
+  state._active = !!id;
 
   if (props.onChange) {
-    props.onChange(this._active);
+    props.onChange(state._active);
   }
 }",
       "type": "method",
diff --git a/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap b/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap
index 4ba93ba561..8350f1c911 100644
--- a/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap
@@ -1556,7 +1556,7 @@ function UseValueAndFnFromStore(props) {
   const [_active, set_active] = useState(() => false);
 
   function _do(id) {
-    _active = !!id;
+    set_active(!!id);
 
     if (props.onChange) {
       props.onChange(_active);
@@ -5266,7 +5266,7 @@ function UseValueAndFnFromStore(props: MyProps) {
   const [_active, set_active] = useState(() => false);
 
   function _do(id?: string) {
-    _active = !!id;
+    set_active(!!id);
 
     if (props.onChange) {
       props.onChange(_active);
diff --git a/packages/core/src/__tests__/__snapshots__/qwik.test.ts.snap b/packages/core/src/__tests__/__snapshots__/qwik.test.ts.snap
index e79fc95840..a473ddc452 100644
--- a/packages/core/src/__tests__/__snapshots__/qwik.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/qwik.test.ts.snap
@@ -3382,10 +3382,10 @@ exports[`qwik > jsx > Javascript Test > UseValueAndFnFromStore 1`] = `
 "import { Fragment, component$, h, useStore, useTask$ } from \\"@builder.io/qwik\\";
 
 export const _do = function _do(props, state, id) {
-  this._active = !!id;
+  state._active = !!id;
 
   if (props.onChange) {
-    props.onChange(this._active);
+    props.onChange(state._active);
   }
 };
 export const UseValueAndFnFromStore = component$((props) => {
@@ -6963,10 +6963,10 @@ type MyStore = {
   _do?: (id?: string) => void;
 };
 export const _do = function _do(props, state, id?: string) {
-  this._active = !!id;
+  state._active = !!id;
 
   if (props.onChange) {
-    props.onChange(this._active);
+    props.onChange(state._active);
   }
 };
 export const UseValueAndFnFromStore = component$((props: MyProps) => {
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 c295f7d37e..063824163c 100644
--- a/packages/core/src/__tests__/__snapshots__/react-native.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/react-native.test.ts.snap
@@ -1963,7 +1963,7 @@ function UseValueAndFnFromStore(props) {
   const [_active, set_active] = useState(() => false);
 
   function _do(id) {
-    _active = !!id;
+    set_active(!!id);
 
     if (props.onChange) {
       props.onChange(_active);
@@ -7043,7 +7043,7 @@ function UseValueAndFnFromStore(props: MyProps) {
   const [_active, set_active] = useState(() => false);
 
   function _do(id?: string) {
-    _active = !!id;
+    set_active(!!id);
 
     if (props.onChange) {
       props.onChange(_active);
diff --git a/packages/core/src/__tests__/__snapshots__/react.test.ts.snap b/packages/core/src/__tests__/__snapshots__/react.test.ts.snap
index 8576aed5fb..3bb3509a0f 100644
--- a/packages/core/src/__tests__/__snapshots__/react.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/react.test.ts.snap
@@ -1540,7 +1540,7 @@ function UseValueAndFnFromStore(props) {
   const [_active, set_active] = useState(() => false);
 
   function _do(id) {
-    _active = !!id;
+    set_active(!!id);
 
     if (props.onChange) {
       props.onChange(_active);
@@ -5154,7 +5154,7 @@ function UseValueAndFnFromStore(props: MyProps) {
   const [_active, set_active] = useState(() => false);
 
   function _do(id?: string) {
-    _active = !!id;
+    set_active(!!id);
 
     if (props.onChange) {
       props.onChange(_active);
diff --git a/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap b/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap
index 9601088419..2329b0e004 100644
--- a/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap
@@ -1537,7 +1537,7 @@ function UseValueAndFnFromStore(props) {
   const [_active, set_active] = useState(() => false);
 
   function _do(id) {
-    _active = !!id;
+    set_active(!!id);
 
     if (props.onChange) {
       props.onChange(_active);
@@ -4893,7 +4893,7 @@ function UseValueAndFnFromStore(props: MyProps) {
   const [_active, set_active] = useState(() => false);
 
   function _do(id?: string) {
-    _active = !!id;
+    set_active(!!id);
 
     if (props.onChange) {
       props.onChange(_active);
diff --git a/packages/core/src/__tests__/__snapshots__/solid.test.ts.snap b/packages/core/src/__tests__/__snapshots__/solid.test.ts.snap
index ff3a5220ed..d46de7f9ef 100644
--- a/packages/core/src/__tests__/__snapshots__/solid.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/solid.test.ts.snap
@@ -3311,10 +3311,10 @@ function UseValueAndFnFromStore(props) {
   const [_active, set_active] = createSignal(false);
 
   function _do(id) {
-    this._active = !!id;
+    set_active(!!id);
 
     if (props.onChange) {
-      props.onChange(this._active);
+      props.onChange(_active());
     }
   }
 
@@ -3338,10 +3338,10 @@ function UseValueAndFnFromStore(props) {
   const [_active, set_active] = createSignal(false);
 
   function _do(id) {
-    this._active = !!id;
+    set_active(!!id);
 
     if (props.onChange) {
-      props.onChange(this._active);
+      props.onChange(_active());
     }
   }
 
@@ -10784,10 +10784,10 @@ function UseValueAndFnFromStore(props: MyProps) {
   const [_active, set_active] = createSignal(false);
 
   function _do(id?: string) {
-    this._active = !!id;
+    set_active(!!id);
 
     if (props.onChange) {
-      props.onChange(this._active);
+      props.onChange(_active());
     }
   }
 
@@ -10820,10 +10820,10 @@ function UseValueAndFnFromStore(props: MyProps) {
   const [_active, set_active] = createSignal(false);
 
   function _do(id?: string) {
-    this._active = !!id;
+    set_active(!!id);
 
     if (props.onChange) {
-      props.onChange(this._active);
+      props.onChange(_active());
     }
   }
 
diff --git a/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap b/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap
index 0692314ff4..5c49f83bdf 100644
--- a/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap
@@ -1407,10 +1407,10 @@ exports[`Svelte > jsx > Javascript Test > UseValueAndFnFromStore 1`] = `
   export let onChange;
 
   function _do(id) {
-    this._active = !!id;
+    _active = !!id;
 
     if (onChange) {
-      onChange(this._active);
+      onChange(_active);
     }
   }
 
@@ -4601,10 +4601,10 @@ exports[`Svelte > jsx > Typescript Test > UseValueAndFnFromStore 1`] = `
   export let onChange: MyProps[\\"onChange\\"] = undefined;
 
   function _do(id?: string) {
-    this._active = !!id;
+    _active = !!id;
 
     if (onChange) {
-      onChange(this._active);
+      onChange(_active);
     }
   }
 
diff --git a/packages/core/src/__tests__/__snapshots__/taro.test.ts.snap b/packages/core/src/__tests__/__snapshots__/taro.test.ts.snap
index 513acfbd01..78fb765346 100644
--- a/packages/core/src/__tests__/__snapshots__/taro.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/taro.test.ts.snap
@@ -1545,7 +1545,7 @@ function UseValueAndFnFromStore(props) {
   const [_active, set_active] = useState(() => false);
 
   function _do(id) {
-    _active = !!id;
+    set_active(!!id);
 
     if (props.onChange) {
       props.onChange(_active);
@@ -5237,7 +5237,7 @@ function UseValueAndFnFromStore(props: MyProps) {
   const [_active, set_active] = useState(() => false);
 
   function _do(id?: string) {
-    _active = !!id;
+    set_active(!!id);
 
     if (props.onChange) {
       props.onChange(_active);
diff --git a/packages/core/src/__tests__/__snapshots__/webcomponent.test.ts.snap b/packages/core/src/__tests__/__snapshots__/webcomponent.test.ts.snap
index 09cb0b4f08..0024ac702a 100644
--- a/packages/core/src/__tests__/__snapshots__/webcomponent.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/webcomponent.test.ts.snap
@@ -6657,10 +6657,11 @@ class UseValueAndFnFromStore extends HTMLElement {
       _id: \\"abc\\",
       _active: false,
       _do(id) {
-        this._active = !!id;
+        self.state._active = !!id;
+        self.update();
 
         if (self.props.onChange) {
-          self.props.onChange(this._active);
+          self.props.onChange(self.state._active);
         }
       },
     };
@@ -21855,10 +21856,11 @@ class UseValueAndFnFromStore extends HTMLElement {
       _id: \\"abc\\",
       _active: false,
       _do(id?: string) {
-        this._active = !!id;
+        self.state._active = !!id;
+        self.update();
 
         if (self.props.onChange) {
-          self.props.onChange(this._active);
+          self.props.onChange(self.state._active);
         }
       },
     };
diff --git a/packages/core/src/__tests__/test-generator.ts b/packages/core/src/__tests__/test-generator.ts
index 2dee04d5c1..27f24dbbf2 100644
--- a/packages/core/src/__tests__/test-generator.ts
+++ b/packages/core/src/__tests__/test-generator.ts
@@ -655,15 +655,17 @@ export const runTestsForTarget = <X extends BaseTranspilerOptions>({
     for (const { name, parser, testsArray } of parsers) {
       if (testsArray) {
         describe(name, () => {
-          if (name === 'jsx' && options.typescript === false) {
-            test('Remove Internal mitosis package', async () => {
-              const t = await basicMitosis;
-              const component = parseJsx(t.code, {
-                compileAwayPackages: ['@dummy/custom-mitosis'],
+          if (!only) {
+            if (name === 'jsx' && options.typescript === false) {
+              test('Remove Internal mitosis package', async () => {
+                const t = await basicMitosis;
+                const component = parseJsx(t.code, {
+                  compileAwayPackages: ['@dummy/custom-mitosis'],
+                });
+                const output = generator(options)({ component, path: t.filePath });
+                expect(output).toMatchSnapshot();
               });
-              const output = generator(options)({ component, path: t.filePath });
-              expect(output).toMatchSnapshot();
-            });
+            }
           }
           describe(testName, () => {
             testsArray.forEach((tests) => {
diff --git a/packages/core/src/generators/vue/compositionApi.ts b/packages/core/src/generators/vue/compositionApi.ts
index 0aca42d917..61a64e02c0 100644
--- a/packages/core/src/generators/vue/compositionApi.ts
+++ b/packages/core/src/generators/vue/compositionApi.ts
@@ -63,9 +63,9 @@ export function generateCompositionApiScript(
     getters: false,
     functions: true,
     format: 'variables',
-    valueMapper: (code) => {
+    /*    valueMapper: (code) => {
       return code.replaceAll('this.', ''); // Composition api isn't a class we don't need "this." here
-    },
+    },*/
   });
 
   if (template.includes('_classStringToObject')) {
diff --git a/packages/core/src/helpers/replace-identifiers.ts b/packages/core/src/helpers/replace-identifiers.ts
index 59bc563bea..c39fa63ed6 100644
--- a/packages/core/src/helpers/replace-identifiers.ts
+++ b/packages/core/src/helpers/replace-identifiers.ts
@@ -26,6 +26,12 @@ type ReplaceArgs = {
   to: ReplaceTo;
 };
 
+export type NodeMap = {
+  from: types.Node;
+  condition?: (path: babel.NodePath<types.Node>) => boolean;
+  to: types.Node;
+};
+
 /**
  * Given a `to` function given by the user, figure out the best argument to provide to the `to` function.
  * This function makes a best guess based on the AST structure it's dealing with.
@@ -182,17 +188,7 @@ const isNewlyGenerated = (node: types.Node) => (node as AllowMeta)?._builder_met
  * Replaces all instances of a Babel AST Node with a new Node within a code string.
  * Uses `generate()` to convert the Node to a string and compare them.
  */
-export const replaceNodes = ({
-  code,
-  nodeMaps,
-}: {
-  code: string;
-  nodeMaps: {
-    from: types.Node;
-    condition?: (path: babel.NodePath<types.Node>) => boolean;
-    to: types.Node;
-  }[];
-}) => {
+export const replaceNodes = ({ code, nodeMaps }: { code: string; nodeMaps: NodeMap[] }) => {
   const searchAndReplace = (path: babel.NodePath<types.Node>) => {
     if (isNewlyGenerated(path.node) || isNewlyGenerated(path.parent)) return;
 
@@ -220,6 +216,9 @@ export const replaceNodes = ({
   };
 
   return babelTransformExpression(code, {
+    ThisExpression(path) {
+      searchAndReplace(path);
+    },
     MemberExpression(path) {
       searchAndReplace(path);
     },
diff --git a/packages/core/src/parsers/jsx/state.ts b/packages/core/src/parsers/jsx/state.ts
index 3ce21d1f5b..c77dfce4ec 100644
--- a/packages/core/src/parsers/jsx/state.ts
+++ b/packages/core/src/parsers/jsx/state.ts
@@ -2,8 +2,9 @@ import { babelTransformExpression } from '@/helpers/babel-transform';
 import { capitalize } from '@/helpers/capitalize';
 import { isMitosisNode } from '@/helpers/is-mitosis-node';
 import { createCodeProcessorPlugin } from '@/helpers/plugins/process-code';
+import { NodeMap, replaceNodes } from '@/helpers/replace-identifiers';
 import { MitosisComponent, MitosisState, StateValue } from '@/types/mitosis-component';
-import { NodePath } from '@babel/core';
+import { NodePath, types } from '@babel/core';
 import {
   BlockStatement,
   Expression,
@@ -152,6 +153,13 @@ export function mapStateIdentifiers(json: MitosisComponent) {
   });
 }
 
+const replaceThisWithStateNodes: NodeMap[] = [
+  {
+    from: types.thisExpression(),
+    to: types.identifier('state'),
+  },
+];
+
 const processStateObjectSlice = (item: ObjectMethod | ObjectProperty): StateValue => {
   if (isObjectProperty(item)) {
     if (isFunctionExpression(item.value)) {
@@ -166,7 +174,9 @@ const processStateObjectSlice = (item: ObjectMethod | ObjectProperty): StateValu
         item.value.params,
         item.value.body as BlockStatement,
       );
-      const code = parseCode(n).trim();
+      // Replace this. with state. to handle following
+      // const state = useStore({ _do: () => {this._active = !!id;}})
+      const code = replaceNodes({ code: parseCode(n).trim(), nodeMaps: replaceThisWithStateNodes });
       return {
         code: code,
         type: 'method',

From 144dd27902b6b1734066c5cac48975f168cac5ef Mon Sep 17 00:00:00 2001
From: Nicolas Merget <104347736+nmerget@users.noreply.github.com>
Date: Mon, 30 Sep 2024 21:30:54 +0200
Subject: [PATCH 4/6] Update packages/core/src/generators/vue/compositionApi.ts

Co-authored-by: Sami Jaber <me@sami.website>
---
 packages/core/src/generators/vue/compositionApi.ts | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/packages/core/src/generators/vue/compositionApi.ts b/packages/core/src/generators/vue/compositionApi.ts
index 61a64e02c0..1ec6f4e4bf 100644
--- a/packages/core/src/generators/vue/compositionApi.ts
+++ b/packages/core/src/generators/vue/compositionApi.ts
@@ -63,9 +63,6 @@ export function generateCompositionApiScript(
     getters: false,
     functions: true,
     format: 'variables',
-    /*    valueMapper: (code) => {
-      return code.replaceAll('this.', ''); // Composition api isn't a class we don't need "this." here
-    },*/
   });
 
   if (template.includes('_classStringToObject')) {

From 8d2040c2e932625cd4837a36f68e88bf77afd46b Mon Sep 17 00:00:00 2001
From: Nicolas Merget <nicolas.merget@deutschebahn.com>
Date: Wed, 2 Oct 2024 09:10:01 +0200
Subject: [PATCH 5/6] fix: issue with types for all states

---
 .../__snapshots__/angular.import.test.ts.snap | 20 +++++++---
 .../__snapshots__/angular.mapper.test.ts.snap | 20 +++++++---
 .../__snapshots__/angular.state.test.ts.snap  | 20 +++++++---
 .../__snapshots__/angular.styles.test.ts.snap | 20 +++++++---
 .../__snapshots__/angular.test.ts.snap        | 40 +++++++++++++------
 .../__snapshots__/context.test.ts.snap        |  8 ++--
 .../__tests__/__snapshots__/html.test.ts.snap |  4 +-
 .../__snapshots__/marko.test.ts.snap          | 20 +++++-----
 .../__snapshots__/parse-jsx.test.ts.snap      |  9 ++++-
 .../__snapshots__/preact.test.ts.snap         | 12 +++---
 .../__tests__/__snapshots__/qwik.test.ts.snap |  4 +-
 .../__snapshots__/react-native.test.ts.snap   | 12 +++---
 .../__snapshots__/react.test.ts.snap          | 12 +++---
 .../__tests__/__snapshots__/rsc.test.ts.snap  | 12 +++---
 .../__snapshots__/solid.test.ts.snap          | 40 +++++++++----------
 .../__snapshots__/svelte.test.ts.snap         |  4 +-
 .../__tests__/__snapshots__/taro.test.ts.snap | 12 +++---
 .../vue-composition.test.ts.snap              | 10 ++---
 .../__snapshots__/webcomponent.test.ts.snap   |  4 +-
 .../core/src/generators/vue/compositionApi.ts |  3 +-
 packages/core/src/parsers/jsx/state.ts        | 33 +++++++++------
 21 files changed, 195 insertions(+), 124 deletions(-)

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 6c60377478..eb9fe56f3a 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap
@@ -2029,7 +2029,11 @@ import { Component } from \\"@angular/core\\";
 })
 export default class NestedStore {
   _id = \\"abc\\";
-  _messageId = this._id + \\"-message\\";
+  _messageId = null;
+
+  ngOnInit() {
+    this._messageId = this._id + \\"-message\\";
+  }
 }
 
 @NgModule({
@@ -9223,8 +9227,12 @@ type MyStore = {
   ],
 })
 export default class NestedStore {
-  _id = \\"abc\\";
-  _messageId = this._id + \\"-message\\";
+  _id: MyStore[\\"_id\\"] = \\"abc\\";
+  _messageId: MyStore[\\"_messageId\\"] = null;
+
+  ngOnInit() {
+    this._messageId = this._id + \\"-message\\";
+  }
 }
 
 @NgModule({
@@ -10173,9 +10181,9 @@ type MyStore = {
 export default class UseValueAndFnFromStore {
   @Output() onChange = new EventEmitter();
 
-  _id = \\"abc\\";
-  _active = false;
-  _do(id?: string) {
+  _id: MyStore[\\"_id\\"] = \\"abc\\";
+  _active: MyStore[\\"_active\\"] = false;
+  _do(id?: string): MyStore[\\"_do\\"] {
     this._active = !!id;
 
     if (this.onChange) {
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 fa37c7c41a..d3930ceece 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.mapper.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.mapper.test.ts.snap
@@ -2055,7 +2055,11 @@ import { Component } from \\"@angular/core\\";
 })
 export default class NestedStore {
   _id = \\"abc\\";
-  _messageId = this._id + \\"-message\\";
+  _messageId = null;
+
+  ngOnInit() {
+    this._messageId = this._id + \\"-message\\";
+  }
 }
 
 @NgModule({
@@ -9367,8 +9371,12 @@ type MyStore = {
   ],
 })
 export default class NestedStore {
-  _id = \\"abc\\";
-  _messageId = this._id + \\"-message\\";
+  _id: MyStore[\\"_id\\"] = \\"abc\\";
+  _messageId: MyStore[\\"_messageId\\"] = null;
+
+  ngOnInit() {
+    this._messageId = this._id + \\"-message\\";
+  }
 }
 
 @NgModule({
@@ -10330,9 +10338,9 @@ type MyStore = {
 export default class UseValueAndFnFromStore {
   @Output() onChange = new EventEmitter();
 
-  _id = \\"abc\\";
-  _active = false;
-  _do(id?: string) {
+  _id: MyStore[\\"_id\\"] = \\"abc\\";
+  _active: MyStore[\\"_active\\"] = false;
+  _do(id?: string): MyStore[\\"_do\\"] {
     this._active = !!id;
 
     if (this.onChange) {
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 9f13e0437b..9db7acffc1 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.state.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.state.test.ts.snap
@@ -2093,7 +2093,11 @@ import { Component } from \\"@angular/core\\";
 })
 export default class NestedStore {
   _id = \\"abc\\";
-  _messageId = this._id + \\"-message\\";
+  _messageId = null;
+
+  ngOnInit() {
+    this._messageId = this._id + \\"-message\\";
+  }
 }
 
 @NgModule({
@@ -9531,8 +9535,12 @@ type MyStore = {
   ],
 })
 export default class NestedStore {
-  _id = \\"abc\\";
-  _messageId = this._id + \\"-message\\";
+  _id: MyStore[\\"_id\\"] = \\"abc\\";
+  _messageId: MyStore[\\"_messageId\\"] = null;
+
+  ngOnInit() {
+    this._messageId = this._id + \\"-message\\";
+  }
 }
 
 @NgModule({
@@ -10499,9 +10507,9 @@ type MyStore = {
 export default class UseValueAndFnFromStore {
   @Output() onChange = new EventEmitter();
 
-  _id = \\"abc\\";
-  _active = false;
-  _do(id?: string) {
+  _id: MyStore[\\"_id\\"] = \\"abc\\";
+  _active: MyStore[\\"_active\\"] = false;
+  _do(id?: string): MyStore[\\"_do\\"] {
     this._active = !!id;
 
     if (this.onChange) {
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 4b2a3efd24..4ae500b1f4 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.styles.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.styles.test.ts.snap
@@ -1864,7 +1864,11 @@ import { Component } from \\"@angular/core\\";
 })
 export default class NestedStore {
   _id = \\"abc\\";
-  _messageId = this._id + \\"-message\\";
+  _messageId = null;
+
+  ngOnInit() {
+    this._messageId = this._id + \\"-message\\";
+  }
 }
 
 @NgModule({
@@ -8306,8 +8310,12 @@ type MyStore = {
   \`,
 })
 export default class NestedStore {
-  _id = \\"abc\\";
-  _messageId = this._id + \\"-message\\";
+  _id: MyStore[\\"_id\\"] = \\"abc\\";
+  _messageId: MyStore[\\"_messageId\\"] = null;
+
+  ngOnInit() {
+    this._messageId = this._id + \\"-message\\";
+  }
 }
 
 @NgModule({
@@ -9169,9 +9177,9 @@ type MyStore = {
 export default class UseValueAndFnFromStore {
   @Output() onChange = new EventEmitter();
 
-  _id = \\"abc\\";
-  _active = false;
-  _do(id?: string) {
+  _id: MyStore[\\"_id\\"] = \\"abc\\";
+  _active: MyStore[\\"_active\\"] = false;
+  _do(id?: string): MyStore[\\"_do\\"] {
     this._active = !!id;
 
     if (this.onChange) {
diff --git a/packages/core/src/__tests__/__snapshots__/angular.test.ts.snap b/packages/core/src/__tests__/__snapshots__/angular.test.ts.snap
index 9168878d4c..6d5b06dba7 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.test.ts.snap
@@ -3847,7 +3847,11 @@ import { Component } from \\"@angular/core\\";
 })
 export default class NestedStore {
   _id = \\"abc\\";
-  _messageId = this._id + \\"-message\\";
+  _messageId = null;
+
+  ngOnInit() {
+    this._messageId = this._id + \\"-message\\";
+  }
 }
 
 @NgModule({
@@ -3884,7 +3888,11 @@ import { CommonModule } from \\"@angular/common\\";
 })
 export default class NestedStore {
   _id = \\"abc\\";
-  _messageId = this._id + \\"-message\\";
+  _messageId = null;
+
+  ngOnInit() {
+    this._messageId = this._id + \\"-message\\";
+  }
 }
 "
 `;
@@ -17375,8 +17383,12 @@ type MyStore = {
   ],
 })
 export default class NestedStore {
-  _id = \\"abc\\";
-  _messageId = this._id + \\"-message\\";
+  _id: MyStore[\\"_id\\"] = \\"abc\\";
+  _messageId: MyStore[\\"_messageId\\"] = null;
+
+  ngOnInit() {
+    this._messageId = this._id + \\"-message\\";
+  }
 }
 
 @NgModule({
@@ -17417,8 +17429,12 @@ type MyStore = {
   imports: [CommonModule],
 })
 export default class NestedStore {
-  _id = \\"abc\\";
-  _messageId = this._id + \\"-message\\";
+  _id: MyStore[\\"_id\\"] = \\"abc\\";
+  _messageId: MyStore[\\"_messageId\\"] = null;
+
+  ngOnInit() {
+    this._messageId = this._id + \\"-message\\";
+  }
 }
 "
 `;
@@ -19182,9 +19198,9 @@ type MyStore = {
 export default class UseValueAndFnFromStore {
   @Output() onChange = new EventEmitter();
 
-  _id = \\"abc\\";
-  _active = false;
-  _do(id?: string) {
+  _id: MyStore[\\"_id\\"] = \\"abc\\";
+  _active: MyStore[\\"_active\\"] = false;
+  _do(id?: string): MyStore[\\"_do\\"] {
     this._active = !!id;
 
     if (this.onChange) {
@@ -19241,9 +19257,9 @@ type MyStore = {
 export default class UseValueAndFnFromStore {
   @Output() onChange = new EventEmitter();
 
-  _id = \\"abc\\";
-  _active = false;
-  _do(id?: string) {
+  _id: MyStore[\\"_id\\"] = \\"abc\\";
+  _active: MyStore[\\"_active\\"] = false;
+  _do(id?: string): MyStore[\\"_do\\"] {
     this._active = !!id;
 
     if (this.onChange) {
diff --git a/packages/core/src/__tests__/__snapshots__/context.test.ts.snap b/packages/core/src/__tests__/__snapshots__/context.test.ts.snap
index 49e0cda311..5510c6d3f8 100644
--- a/packages/core/src/__tests__/__snapshots__/context.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/context.test.ts.snap
@@ -22,13 +22,13 @@ exports[`Context > Parse context 1`] = `
     },
     "fooUpperCase": {
       "code": "get fooUpperCase() {
-  return this.foo.toUpperCase();
+  return state.foo.toUpperCase();
 }",
       "type": "getter",
     },
     "someMethod": {
       "code": "someMethod() {
-  return this.fooUpperCase.toLowercase();
+  return state.fooUpperCase.toLowercase();
 }",
       "type": "method",
     },
@@ -47,10 +47,10 @@ exports[`Context > Parse context 2`] = `
 export default createContext({
   foo: \\"bar\\",
   get fooUpperCase() {
-    return this.foo.toUpperCase();
+    return state.foo.toUpperCase();
   },
   someMethod() {
-    return this.fooUpperCase.toLowercase();
+    return state.fooUpperCase.toLowercase();
   },
   content: null,
   context: {},
diff --git a/packages/core/src/__tests__/__snapshots__/html.test.ts.snap b/packages/core/src/__tests__/__snapshots__/html.test.ts.snap
index 51dd0559c0..75147f8ca4 100644
--- a/packages/core/src/__tests__/__snapshots__/html.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/html.test.ts.snap
@@ -2265,7 +2265,7 @@ exports[`Html > jsx > Javascript Test > NestedStore 1`] = `
 </div>
 <script>
   (() => {
-    const state = { _id: \\"abc\\", _messageId: this._id + \\"-message\\" };
+    const state = { _id: \\"abc\\", _messageId: state._id + \\"-message\\" };
 
     let context = null;
     let nodesToDestroy = [];
@@ -9311,7 +9311,7 @@ exports[`Html > jsx > Typescript Test > NestedStore 1`] = `
 </div>
 <script>
   (() => {
-    const state = { _id: \\"abc\\", _messageId: this._id + \\"-message\\" };
+    const state = { _id: \\"abc\\", _messageId: state._id + \\"-message\\" };
 
     let context = null;
     let nodesToDestroy = [];
diff --git a/packages/core/src/__tests__/__snapshots__/marko.test.ts.snap b/packages/core/src/__tests__/__snapshots__/marko.test.ts.snap
index 72f0a8d7db..0defe055ab 100644
--- a/packages/core/src/__tests__/__snapshots__/marko.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/marko.test.ts.snap
@@ -125,11 +125,11 @@ class {
 }
 
 style { 
-  .div-360ae4be {
+  .div-3970f665 {
     padding: 10px;
   }
 }
-<div class=\\"test div-360ae4be\\">
+<div class=\\"test div-3970f665\\">
   <input
     value=(DEFAULT_VALUES.name || state.name)
     on-input(myEvent => state.name = myEvent.target.value)
@@ -324,14 +324,14 @@ exports[`Marko > jsx > Javascript Test > BasicRef 1`] = `
 }
 
 style { 
-  .input-9243d59c {
+  .input-d2b8a7d4 {
     color: red;
   }
 }
 <div>
   <if(input.showInput)>
     <input
-      class=\\"input-9243d59c\\"
+      class=\\"input-d2b8a7d4\\"
       key=\\"inputRef\\"
       value=(state.name)
       on-blur(event => component.onBlur())
@@ -1066,7 +1066,7 @@ class {
 exports[`Marko > jsx > Javascript Test > NestedStore 1`] = `
 "class {
   onCreate() {
-    this.state = { _id: \\"abc\\", _messageId: this._id + \\"-message\\" };
+    this.state = { _id: \\"abc\\", _messageId: this.state._id + \\"-message\\" };
   }
 }
 
@@ -2648,11 +2648,11 @@ class {
 }
 
 style { 
-  .div-11706802 {
+  .div-476b44c0 {
     padding: 10px;
   }
 }
-<div class=\\"test div-11706802\\">
+<div class=\\"test div-476b44c0\\">
   <input
     value=(DEFAULT_VALUES.name || state.name)
     on-input(myEvent => state.name = myEvent.target.value)
@@ -2847,14 +2847,14 @@ exports[`Marko > jsx > Typescript Test > BasicRef 1`] = `
 }
 
 style { 
-  .input-2cbd8d2e {
+  .input-9b2529ca {
     color: red;
   }
 }
 <div>
   <if(input.showInput)>
     <input
-      class=\\"input-2cbd8d2e\\"
+      class=\\"input-9b2529ca\\"
       key=\\"inputRef\\"
       value=(state.name)
       on-blur(event => component.onBlur())
@@ -3600,7 +3600,7 @@ class {
 exports[`Marko > jsx > Typescript Test > NestedStore 1`] = `
 "class {
   onCreate() {
-    this.state = { _id: \\"abc\\", _messageId: this._id + \\"-message\\" };
+    this.state = { _id: \\"abc\\", _messageId: this.state._id + \\"-message\\" };
   }
 }
 
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 3edf0b1638..d8174c84c9 100644
--- a/packages/core/src/__tests__/__snapshots__/parse-jsx.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/parse-jsx.test.ts.snap
@@ -3556,7 +3556,7 @@ exports[`Parse JSX > Javascript > NestedStore 1`] = `
       "type": "property",
     },
     "_messageId": {
-      "code": "this._id + \\"-message\\"",
+      "code": "state._id + \\"-message\\"",
       "propertyType": "normal",
       "type": "property",
     },
@@ -15003,11 +15003,13 @@ exports[`Parse JSX > Typescript > NestedStore 1`] = `
       "code": "\\"abc\\"",
       "propertyType": "normal",
       "type": "property",
+      "typeParameter": "MyStore[\\"_id\\"]",
     },
     "_messageId": {
-      "code": "this._id + \\"-message\\"",
+      "code": "state._id + \\"-message\\"",
       "propertyType": "normal",
       "type": "property",
+      "typeParameter": "MyStore[\\"_messageId\\"]",
     },
   },
   "subComponents": [],
@@ -16379,6 +16381,7 @@ exports[`Parse JSX > Typescript > UseValueAndFnFromStore 1`] = `
       "code": "false",
       "propertyType": "normal",
       "type": "property",
+      "typeParameter": "MyStore[\\"_active\\"]",
     },
     "_do": {
       "code": "_do(id?: string) {
@@ -16389,11 +16392,13 @@ exports[`Parse JSX > Typescript > UseValueAndFnFromStore 1`] = `
   }
 }",
       "type": "method",
+      "typeParameter": "MyStore[\\"_do\\"]",
     },
     "_id": {
       "code": "'abc'",
       "propertyType": "normal",
       "type": "property",
+      "typeParameter": "MyStore[\\"_id\\"]",
     },
   },
   "subComponents": [],
diff --git a/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap b/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap
index e3558adcce..db6b9c8123 100644
--- a/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap
@@ -4894,9 +4894,11 @@ type MyStore = {
 };
 
 function NestedStore(props: any) {
-  const [_id, set_id] = useState(() => \\"abc\\");
+  const [_id, set_id] = useState<MyStore[\\"_id\\"]>(() => \\"abc\\");
 
-  const [_messageId, set_messageId] = useState(() => _id + \\"-message\\");
+  const [_messageId, set_messageId] = useState<MyStore[\\"_messageId\\"]>(
+    () => _id + \\"-message\\"
+  );
 
   return (
     <div id={_id}>
@@ -5303,11 +5305,11 @@ type MyStore = {
 };
 
 function UseValueAndFnFromStore(props: MyProps) {
-  const [_id, set_id] = useState(() => \\"abc\\");
+  const [_id, set_id] = useState<MyStore[\\"_id\\"]>(() => \\"abc\\");
 
-  const [_active, set_active] = useState(() => false);
+  const [_active, set_active] = useState<MyStore[\\"_active\\"]>(() => false);
 
-  function _do(id?: string) {
+  function _do(id?: string): MyStore[\\"_do\\"] {
     set_active(!!id);
 
     if (props.onChange) {
diff --git a/packages/core/src/__tests__/__snapshots__/qwik.test.ts.snap b/packages/core/src/__tests__/__snapshots__/qwik.test.ts.snap
index 0374510899..4fdfc50091 100644
--- a/packages/core/src/__tests__/__snapshots__/qwik.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/qwik.test.ts.snap
@@ -3011,7 +3011,7 @@ exports[`qwik > jsx > Javascript Test > NestedStore 1`] = `
 "import { Fragment, component$, h, useStore } from \\"@builder.io/qwik\\";
 
 export const NestedStore = component$((props) => {
-  const state = useStore({ _id: \\"abc\\", _messageId: this._id + \\"-message\\" });
+  const state = useStore({ _id: \\"abc\\", _messageId: state._id + \\"-message\\" });
 
   return (
     <div id={state._id}>
@@ -6567,7 +6567,7 @@ type MyStore = {
 export const NestedStore = component$((props: any) => {
   const state = useStore<any>({
     _id: \\"abc\\",
-    _messageId: this._id + \\"-message\\",
+    _messageId: state._id + \\"-message\\",
   });
 
   return (
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 da6d773ae6..b785f6bf99 100644
--- a/packages/core/src/__tests__/__snapshots__/react-native.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/react-native.test.ts.snap
@@ -6567,9 +6567,11 @@ type MyStore = {
 };
 
 function NestedStore(props: any) {
-  const [_id, set_id] = useState(() => \\"abc\\");
+  const [_id, set_id] = useState<MyStore[\\"_id\\"]>(() => \\"abc\\");
 
-  const [_messageId, set_messageId] = useState(() => _id + \\"-message\\");
+  const [_messageId, set_messageId] = useState<MyStore[\\"_messageId\\"]>(
+    () => _id + \\"-message\\"
+  );
 
   return (
     <View id={_id}>
@@ -7116,11 +7118,11 @@ type MyStore = {
 };
 
 function UseValueAndFnFromStore(props: MyProps) {
-  const [_id, set_id] = useState(() => \\"abc\\");
+  const [_id, set_id] = useState<MyStore[\\"_id\\"]>(() => \\"abc\\");
 
-  const [_active, set_active] = useState(() => false);
+  const [_active, set_active] = useState<MyStore[\\"_active\\"]>(() => false);
 
-  function _do(id?: string) {
+  function _do(id?: string): MyStore[\\"_do\\"] {
     set_active(!!id);
 
     if (props.onChange) {
diff --git a/packages/core/src/__tests__/__snapshots__/react.test.ts.snap b/packages/core/src/__tests__/__snapshots__/react.test.ts.snap
index d3102332a4..b8955abd97 100644
--- a/packages/core/src/__tests__/__snapshots__/react.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/react.test.ts.snap
@@ -4791,9 +4791,11 @@ type MyStore = {
 };
 
 function NestedStore(props: any) {
-  const [_id, set_id] = useState(() => \\"abc\\");
+  const [_id, set_id] = useState<MyStore[\\"_id\\"]>(() => \\"abc\\");
 
-  const [_messageId, set_messageId] = useState(() => _id + \\"-message\\");
+  const [_messageId, set_messageId] = useState<MyStore[\\"_messageId\\"]>(
+    () => _id + \\"-message\\"
+  );
 
   return (
     <div id={_id}>
@@ -5191,11 +5193,11 @@ type MyStore = {
 };
 
 function UseValueAndFnFromStore(props: MyProps) {
-  const [_id, set_id] = useState(() => \\"abc\\");
+  const [_id, set_id] = useState<MyStore[\\"_id\\"]>(() => \\"abc\\");
 
-  const [_active, set_active] = useState(() => false);
+  const [_active, set_active] = useState<MyStore[\\"_active\\"]>(() => false);
 
-  function _do(id?: string) {
+  function _do(id?: string): MyStore[\\"_do\\"] {
     set_active(!!id);
 
     if (props.onChange) {
diff --git a/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap b/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap
index 17e7cacd6d..8a79ea0ed8 100644
--- a/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap
@@ -4530,9 +4530,11 @@ type MyStore = {
 };
 
 function NestedStore(props: any) {
-  const [_id, set_id] = useState(() => \\"abc\\");
+  const [_id, set_id] = useState<MyStore[\\"_id\\"]>(() => \\"abc\\");
 
-  const [_messageId, set_messageId] = useState(() => _id + \\"-message\\");
+  const [_messageId, set_messageId] = useState<MyStore[\\"_messageId\\"]>(
+    () => _id + \\"-message\\"
+  );
 
   return (
     <div id={_id}>
@@ -4930,11 +4932,11 @@ type MyStore = {
 };
 
 function UseValueAndFnFromStore(props: MyProps) {
-  const [_id, set_id] = useState(() => \\"abc\\");
+  const [_id, set_id] = useState<MyStore[\\"_id\\"]>(() => \\"abc\\");
 
-  const [_active, set_active] = useState(() => false);
+  const [_active, set_active] = useState<MyStore[\\"_active\\"]>(() => false);
 
-  function _do(id?: string) {
+  function _do(id?: string): MyStore[\\"_do\\"] {
     set_active(!!id);
 
     if (props.onChange) {
diff --git a/packages/core/src/__tests__/__snapshots__/solid.test.ts.snap b/packages/core/src/__tests__/__snapshots__/solid.test.ts.snap
index cd334395ff..70812e3697 100644
--- a/packages/core/src/__tests__/__snapshots__/solid.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/solid.test.ts.snap
@@ -152,14 +152,14 @@ function MyBasicComponent(props) {
 
   return (
     <>
-      <div class=\\"test div-046ccea4\\">
+      <div class=\\"test div-7a6b8f8c\\">
         <input
           value={DEFAULT_VALUES.name || name()}
           onInput={(myEvent) => setName(myEvent.target.value)}
         />
         Hello! I can run in React, Vue, Solid, or Liquid! &gt;
       </div>
-      <style>{\`.div-046ccea4 {
+      <style>{\`.div-7a6b8f8c {
   padding: 10px;
 }\`}</style>
     </>
@@ -228,14 +228,14 @@ function MyBasicComponent(props) {
 
   return (
     <>
-      <div class=\\"test div-046ccea4\\">
+      <div class=\\"test div-7a6b8f8c\\">
         <input
           value={DEFAULT_VALUES.name || name()}
           onInput={(myEvent) => setName(myEvent.target.value)}
         />
         Hello! I can run in React, Vue, Solid, or Liquid! &gt;
       </div>
-      <style>{\`.div-046ccea4 {
+      <style>{\`.div-7a6b8f8c {
   padding: 10px;
 }\`}</style>
     </>
@@ -760,7 +760,7 @@ function MyBasicRefComponent(props) {
         <Show when={props.showInput}>
           <>
             <input
-              class=\\"input-0334592e\\"
+              class=\\"input-bd83514c\\"
               ref={inputRef}
               value={name()}
               onBlur={(event) => onBlur()}
@@ -779,7 +779,7 @@ function MyBasicRefComponent(props) {
         {lowerCaseName()}! I can run in React, Qwik, Vue, Solid, or Web
         Component!
       </div>
-      <style>{\`.input-0334592e {
+      <style>{\`.input-bd83514c {
   color: red;
 }\`}</style>
     </>
@@ -814,7 +814,7 @@ function MyBasicRefComponent(props) {
         <Show when={props.showInput}>
           <>
             <input
-              class=\\"input-0334592e\\"
+              class=\\"input-bd83514c\\"
               ref={inputRef}
               value={name()}
               onBlur={(event) => onBlur()}
@@ -833,7 +833,7 @@ function MyBasicRefComponent(props) {
         {lowerCaseName()}! I can run in React, Qwik, Vue, Solid, or Web
         Component!
       </div>
-      <style>{\`.input-0334592e {
+      <style>{\`.input-bd83514c {
   color: red;
 }\`}</style>
     </>
@@ -2566,7 +2566,7 @@ exports[`Solid > jsx > Javascript Test > NestedStore 1`] = `
 function NestedStore(props) {
   const [_id, set_id] = createSignal(\\"abc\\");
 
-  const [_messageId, set_messageId] = createSignal(this._id + \\"-message\\");
+  const [_messageId, set_messageId] = createSignal(_id() + \\"-message\\");
 
   return (
     <>
@@ -2588,7 +2588,7 @@ exports[`Solid > jsx > Javascript Test > NestedStore 2`] = `
 function NestedStore(props) {
   const [_id, set_id] = createSignal(\\"abc\\");
 
-  const [_messageId, set_messageId] = createSignal(this._id + \\"-message\\");
+  const [_messageId, set_messageId] = createSignal(_id() + \\"-message\\");
 
   return (
     <>
@@ -7276,14 +7276,14 @@ function MyBasicComponent(props: MyBasicComponentProps) {
 
   return (
     <>
-      <div class=\\"test div-3c5f02b2\\">
+      <div class=\\"test div-7d6ae8f6\\">
         <input
           value={DEFAULT_VALUES.name || name()}
           onInput={(myEvent) => setName(myEvent.target.value)}
         />
         Hello! I can run in React, Vue, Solid, or Liquid! &gt;
       </div>
-      <style>{\`.div-3c5f02b2 {
+      <style>{\`.div-7d6ae8f6 {
   padding: 10px;
 }\`}</style>
     </>
@@ -7356,14 +7356,14 @@ function MyBasicComponent(props: MyBasicComponentProps) {
 
   return (
     <>
-      <div class=\\"test div-3c5f02b2\\">
+      <div class=\\"test div-7d6ae8f6\\">
         <input
           value={DEFAULT_VALUES.name || name()}
           onInput={(myEvent) => setName(myEvent.target.value)}
         />
         Hello! I can run in React, Vue, Solid, or Liquid! &gt;
       </div>
-      <style>{\`.div-3c5f02b2 {
+      <style>{\`.div-7d6ae8f6 {
   padding: 10px;
 }\`}</style>
     </>
@@ -7912,7 +7912,7 @@ function MyBasicRefComponent(props: Props) {
         <Show when={props.showInput}>
           <>
             <input
-              class=\\"input-66077644\\"
+              class=\\"input-9f1627bc\\"
               ref={inputRef!}
               value={name()}
               onBlur={(event) => onBlur()}
@@ -7931,7 +7931,7 @@ function MyBasicRefComponent(props: Props) {
         {lowerCaseName()}! I can run in React, Qwik, Vue, Solid, or Web
         Component!
       </div>
-      <style>{\`.input-66077644 {
+      <style>{\`.input-9f1627bc {
   color: red;
 }\`}</style>
     </>
@@ -7970,7 +7970,7 @@ function MyBasicRefComponent(props: Props) {
         <Show when={props.showInput}>
           <>
             <input
-              class=\\"input-66077644\\"
+              class=\\"input-9f1627bc\\"
               ref={inputRef!}
               value={name()}
               onBlur={(event) => onBlur()}
@@ -7989,7 +7989,7 @@ function MyBasicRefComponent(props: Props) {
         {lowerCaseName()}! I can run in React, Qwik, Vue, Solid, or Web
         Component!
       </div>
-      <style>{\`.input-66077644 {
+      <style>{\`.input-9f1627bc {
   color: red;
 }\`}</style>
     </>
@@ -9989,7 +9989,7 @@ type MyStore = {
 function NestedStore(props: any) {
   const [_id, set_id] = createSignal(\\"abc\\");
 
-  const [_messageId, set_messageId] = createSignal(this._id + \\"-message\\");
+  const [_messageId, set_messageId] = createSignal(_id() + \\"-message\\");
 
   return (
     <>
@@ -10016,7 +10016,7 @@ type MyStore = {
 function NestedStore(props: any) {
   const [_id, set_id] = createSignal(\\"abc\\");
 
-  const [_messageId, set_messageId] = createSignal(this._id + \\"-message\\");
+  const [_messageId, set_messageId] = createSignal(_id() + \\"-message\\");
 
   return (
     <>
diff --git a/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap b/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap
index 89679de790..51f736c990 100644
--- a/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap
@@ -1096,7 +1096,7 @@ exports[`Svelte > jsx > Javascript Test > NestedStore 1`] = `
 "<script>
   let _id = \\"abc\\";
 
-  let _messageId = this._id + \\"-message\\";
+  let _messageId = _id + \\"-message\\";
 </script>
 
 <div id={_id}>
@@ -4200,7 +4200,7 @@ exports[`Svelte > jsx > Typescript Test > NestedStore 1`] = `
 <script lang=\\"ts\\">
   let _id = \\"abc\\";
 
-  let _messageId = this._id + \\"-message\\";
+  let _messageId = _id + \\"-message\\";
 </script>
 
 <div id={_id}>
diff --git a/packages/core/src/__tests__/__snapshots__/taro.test.ts.snap b/packages/core/src/__tests__/__snapshots__/taro.test.ts.snap
index 7478c95618..264ccf4704 100644
--- a/packages/core/src/__tests__/__snapshots__/taro.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/taro.test.ts.snap
@@ -4867,9 +4867,11 @@ type MyStore = {
 import { View, Text } from \\"@tarojs/components\\";
 
 function NestedStore(props: any) {
-  const [_id, set_id] = useState(() => \\"abc\\");
+  const [_id, set_id] = useState<MyStore[\\"_id\\"]>(() => \\"abc\\");
 
-  const [_messageId, set_messageId] = useState(() => _id + \\"-message\\");
+  const [_messageId, set_messageId] = useState<MyStore[\\"_messageId\\"]>(
+    () => _id + \\"-message\\"
+  );
 
   return (
     <View id={_id}>
@@ -5276,11 +5278,11 @@ type MyStore = {
 import { View, Text } from \\"@tarojs/components\\";
 
 function UseValueAndFnFromStore(props: MyProps) {
-  const [_id, set_id] = useState(() => \\"abc\\");
+  const [_id, set_id] = useState<MyStore[\\"_id\\"]>(() => \\"abc\\");
 
-  const [_active, set_active] = useState(() => false);
+  const [_active, set_active] = useState<MyStore[\\"_active\\"]>(() => false);
 
-  function _do(id?: string) {
+  function _do(id?: string): MyStore[\\"_do\\"] {
     set_active(!!id);
 
     if (props.onChange) {
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 216ab850f2..69e6ee51e2 100644
--- a/packages/core/src/__tests__/__snapshots__/vue-composition.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/vue-composition.test.ts.snap
@@ -4394,8 +4394,8 @@ type MyStore = {
   _messageId?: string;
 };
 
-const _id = ref(\\"abc\\");
-const _messageId = ref(_id.value + \\"-message\\");
+const _id = ref<MyStore[\\"_id\\"]>(\\"abc\\");
+const _messageId = ref<MyStore[\\"_messageId\\"]>(_id.value + \\"-message\\");
 </script>"
 `;
 
@@ -4756,8 +4756,8 @@ type MyStore = {
 };
 
 const props = defineProps<MyProps>();
-const _id = ref(\\"abc\\");
-const _active = ref(false);
+const _id = ref<MyStore[\\"_id\\"]>(\\"abc\\");
+const _active = ref<MyStore[\\"_active\\"]>(false);
 
 onUpdated(() => {
   if (_do) {
@@ -4765,7 +4765,7 @@ onUpdated(() => {
   }
 });
 
-function _do(id?: string) {
+function _do(id?: string): MyStore[\\"_do\\"] {
   _active.value = !!id;
 
   if (props.onChange) {
diff --git a/packages/core/src/__tests__/__snapshots__/webcomponent.test.ts.snap b/packages/core/src/__tests__/__snapshots__/webcomponent.test.ts.snap
index 2804ce83eb..3f2f6d1926 100644
--- a/packages/core/src/__tests__/__snapshots__/webcomponent.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/webcomponent.test.ts.snap
@@ -4698,7 +4698,7 @@ class NestedStore extends HTMLElement {
     super();
     const self = this;
 
-    this.state = { _id: \\"abc\\", _messageId: this._id + \\"-message\\" };
+    this.state = { _id: \\"abc\\", _messageId: self.state._id + \\"-message\\" };
     if (!this.props) {
       this.props = {};
     }
@@ -20026,7 +20026,7 @@ class NestedStore extends HTMLElement {
     super();
     const self = this;
 
-    this.state = { _id: \\"abc\\", _messageId: this._id + \\"-message\\" };
+    this.state = { _id: \\"abc\\", _messageId: self.state._id + \\"-message\\" };
     if (!this.props) {
       this.props = {};
     }
diff --git a/packages/core/src/generators/vue/compositionApi.ts b/packages/core/src/generators/vue/compositionApi.ts
index 30b47402bb..26dbc97d6e 100644
--- a/packages/core/src/generators/vue/compositionApi.ts
+++ b/packages/core/src/generators/vue/compositionApi.ts
@@ -53,8 +53,7 @@ export function generateCompositionApiScript(
     getters: false,
     format: 'variables',
     valueMapper: (code, _, typeParameter) => {
-      const cleanCode = code.replaceAll('this.', ''); // Composition api isn't a class we don't need "this." here
-      return isTs && typeParameter ? `ref<${typeParameter}>(${cleanCode})` : `ref(${cleanCode})`;
+      return isTs && typeParameter ? `ref<${typeParameter}>(${code})` : `ref(${code})`;
     },
     keyPrefix: 'const',
   });
diff --git a/packages/core/src/parsers/jsx/state.ts b/packages/core/src/parsers/jsx/state.ts
index c77dfce4ec..d0ac70aa17 100644
--- a/packages/core/src/parsers/jsx/state.ts
+++ b/packages/core/src/parsers/jsx/state.ts
@@ -2,7 +2,7 @@ import { babelTransformExpression } from '@/helpers/babel-transform';
 import { capitalize } from '@/helpers/capitalize';
 import { isMitosisNode } from '@/helpers/is-mitosis-node';
 import { createCodeProcessorPlugin } from '@/helpers/plugins/process-code';
-import { NodeMap, replaceNodes } from '@/helpers/replace-identifiers';
+import { replaceNodes } from '@/helpers/replace-identifiers';
 import { MitosisComponent, MitosisState, StateValue } from '@/types/mitosis-component';
 import { NodePath, types } from '@babel/core';
 import {
@@ -153,18 +153,27 @@ export function mapStateIdentifiers(json: MitosisComponent) {
   });
 }
 
-const replaceThisWithStateNodes: NodeMap[] = [
-  {
-    from: types.thisExpression(),
-    to: types.identifier('state'),
-  },
-];
+/**
+ * Replaces `this.` with `state.` and trims code
+ * @param code origin code
+ */
+const getCleanedStateCode = (code: string): string => {
+  return replaceNodes({
+    code,
+    nodeMaps: [
+      {
+        from: types.thisExpression(),
+        to: types.identifier('state'),
+      },
+    ],
+  }).trim();
+};
 
 const processStateObjectSlice = (item: ObjectMethod | ObjectProperty): StateValue => {
   if (isObjectProperty(item)) {
     if (isFunctionExpression(item.value)) {
       return {
-        code: parseCode(item.value).trim(),
+        code: getCleanedStateCode(parseCode(item.value)),
         type: 'function',
       };
     } else if (isArrowFunctionExpression(item.value)) {
@@ -176,7 +185,7 @@ const processStateObjectSlice = (item: ObjectMethod | ObjectProperty): StateValu
       );
       // Replace this. with state. to handle following
       // const state = useStore({ _do: () => {this._active = !!id;}})
-      const code = replaceNodes({ code: parseCode(n).trim(), nodeMaps: replaceThisWithStateNodes });
+      const code = getCleanedStateCode(parseCode(n));
       return {
         code: code,
         type: 'method',
@@ -186,19 +195,19 @@ const processStateObjectSlice = (item: ObjectMethod | ObjectProperty): StateValu
       // { foo: ('string' as SomeType) }
       if (isTSAsExpression(item.value)) {
         return {
-          code: parseCode(item.value.expression).trim(),
+          code: getCleanedStateCode(parseCode(item.value.expression)),
           type: 'property',
           propertyType: 'normal',
         };
       }
       return {
-        code: parseCode(item.value).trim(),
+        code: getCleanedStateCode(parseCode(item.value)),
         type: 'property',
         propertyType: 'normal',
       };
     }
   } else if (isObjectMethod(item)) {
-    const n = parseCode({ ...item, returnType: null }).trim();
+    const n = getCleanedStateCode(parseCode({ ...item, returnType: null }));
 
     const isGetter = item.kind === 'get';
 

From 6c6d47929952a163d68bdfc8cbe5a12d423296a4 Mon Sep 17 00:00:00 2001
From: Nicolas Merget <nicolas.merget@deutschebahn.com>
Date: Wed, 2 Oct 2024 09:41:05 +0200
Subject: [PATCH 6/6] chore: update from main

---
 .../__snapshots__/alpine.test.ts.snap         |   4 +-
 .../__snapshots__/angular.import.test.ts.snap |   6 +-
 .../__snapshots__/angular.mapper.test.ts.snap |   6 +-
 .../__snapshots__/angular.state.test.ts.snap  |   6 +-
 .../__snapshots__/angular.styles.test.ts.snap |   6 +-
 .../__snapshots__/angular.test.ts.snap        |  12 +-
 .../__tests__/__snapshots__/html.test.ts.snap |   4 +-
 .../__tests__/__snapshots__/lit.test.ts.snap  |   4 +-
 .../__snapshots__/marko.test.ts.snap          |   4 +-
 .../__snapshots__/parse-jsx.test.ts.snap      |   4 +-
 .../__snapshots__/preact.test.ts.snap         |   6 +-
 .../__tests__/__snapshots__/qwik.test.ts.snap |   8 +-
 .../__snapshots__/react-native.test.ts.snap   |   6 +-
 .../__snapshots__/react.test.ts.snap          |   6 +-
 .../__tests__/__snapshots__/rsc.test.ts.snap  |   6 +-
 .../__snapshots__/solid.test.ts.snap          |   8 +-
 .../__snapshots__/stencil.test.ts.snap        | 178 +++++++++++++++++-
 .../__snapshots__/svelte.test.ts.snap         |   4 +-
 .../__tests__/__snapshots__/taro.test.ts.snap |   6 +-
 .../vue-composition.test.ts.snap              |   6 +-
 .../__tests__/__snapshots__/vue.test.ts.snap  |   4 +-
 .../__snapshots__/webcomponent.test.ts.snap   |   4 +-
 .../__tests__/data/state/set-state.raw.tsx    |   2 +-
 23 files changed, 233 insertions(+), 67 deletions(-)

diff --git a/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap b/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap
index e6726ada3c..af2f4f7637 100644
--- a/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap
@@ -2462,7 +2462,7 @@ exports[`Alpine.js > jsx > Javascript Test > self-referencing component with chi
 `;
 
 exports[`Alpine.js > jsx > Javascript Test > setState 1`] = `
-"<div x-data=\\"setState()\\"><button x-on:click=\\"someFn\\">Click me</button></div>
+"<div x-data=\\"setState()\\"><button x-on:click=\\"someFn()\\">Click me</button></div>
 <script>
   document.addEventListener(\\"alpine:init\\", () => {
     Alpine.data(\\"setState\\", () => ({
@@ -5313,7 +5313,7 @@ exports[`Alpine.js > jsx > Typescript Test > self-referencing component with chi
 `;
 
 exports[`Alpine.js > jsx > Typescript Test > setState 1`] = `
-"<div x-data=\\"setState()\\"><button x-on:click=\\"someFn\\">Click me</button></div>
+"<div x-data=\\"setState()\\"><button x-on:click=\\"someFn()\\">Click me</button></div>
 <script>
   document.addEventListener(\\"alpine:init\\", () => {
     Alpine.data(\\"setState\\", () => ({
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 992bc2c6a2..2a56c569f4 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap
@@ -5753,7 +5753,7 @@ import { Component } from \\"@angular/core\\";
 @Component({
   selector: \\"set-state\\",
   template: \`
-    <div><button (click)=\\"someFn\\">Click me</button></div>
+    <div><button (click)=\\"someFn()\\">Click me</button></div>
   \`,
   styles: [
     \`
@@ -10183,7 +10183,7 @@ export default class UseValueAndFnFromStore {
 
   _id: MyStore[\\"_id\\"] = \\"abc\\";
   _active: MyStore[\\"_active\\"] = false;
-  _do(id?: string): MyStore[\\"_do\\"] {
+  _do(id?: string): ReturnType<MyStore[\\"_do\\"]> {
     this._active = !!id;
 
     if (this.onChange) {
@@ -13217,7 +13217,7 @@ import { Component } from \\"@angular/core\\";
 @Component({
   selector: \\"set-state\\",
   template: \`
-    <div><button (click)=\\"someFn\\">Click me</button></div>
+    <div><button (click)=\\"someFn()\\">Click me</button></div>
   \`,
   styles: [
     \`
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 1bbee00822..d5c3ecad35 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.mapper.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.mapper.test.ts.snap
@@ -5844,7 +5844,7 @@ import { Component } from \\"@angular/core\\";
 @Component({
   selector: \\"set-state\\",
   template: \`
-    <div><button (click)=\\"someFn\\">Click me</button></div>
+    <div><button (click)=\\"someFn()\\">Click me</button></div>
   \`,
   styles: [
     \`
@@ -10340,7 +10340,7 @@ export default class UseValueAndFnFromStore {
 
   _id: MyStore[\\"_id\\"] = \\"abc\\";
   _active: MyStore[\\"_active\\"] = false;
-  _do(id?: string): MyStore[\\"_do\\"] {
+  _do(id?: string): ReturnType<MyStore[\\"_do\\"]> {
     this._active = !!id;
 
     if (this.onChange) {
@@ -13428,7 +13428,7 @@ import { Component } from \\"@angular/core\\";
 @Component({
   selector: \\"set-state\\",
   template: \`
-    <div><button (click)=\\"someFn\\">Click me</button></div>
+    <div><button (click)=\\"someFn()\\">Click me</button></div>
   \`,
   styles: [
     \`
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 dec788bf09..38d4073c25 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.state.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.state.test.ts.snap
@@ -5935,7 +5935,7 @@ import { Component } from \\"@angular/core\\";
 @Component({
   selector: \\"set-state\\",
   template: \`
-    <div><button (click)=\\"someFn\\">Click me</button></div>
+    <div><button (click)=\\"someFn()\\">Click me</button></div>
   \`,
   styles: [
     \`
@@ -10509,7 +10509,7 @@ export default class UseValueAndFnFromStore {
 
   _id: MyStore[\\"_id\\"] = \\"abc\\";
   _active: MyStore[\\"_active\\"] = false;
-  _do(id?: string): MyStore[\\"_do\\"] {
+  _do(id?: string): ReturnType<MyStore[\\"_do\\"]> {
     this._active = !!id;
 
     if (this.onChange) {
@@ -13645,7 +13645,7 @@ import { Component } from \\"@angular/core\\";
 @Component({
   selector: \\"set-state\\",
   template: \`
-    <div><button (click)=\\"someFn\\">Click me</button></div>
+    <div><button (click)=\\"someFn()\\">Click me</button></div>
   \`,
   styles: [
     \`
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 5348f9af8e..d83d91b6dc 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.styles.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.styles.test.ts.snap
@@ -5168,7 +5168,7 @@ import { Component } from \\"@angular/core\\";
 @Component({
   selector: \\"set-state\\",
   template: \`
-    <div><button (click)=\\"someFn\\">Click me</button></div>
+    <div><button (click)=\\"someFn()\\">Click me</button></div>
   \`,
 })
 export default class SetState {
@@ -9179,7 +9179,7 @@ export default class UseValueAndFnFromStore {
 
   _id: MyStore[\\"_id\\"] = \\"abc\\";
   _active: MyStore[\\"_active\\"] = false;
-  _do(id?: string): MyStore[\\"_do\\"] {
+  _do(id?: string): ReturnType<MyStore[\\"_do\\"]> {
     this._active = !!id;
 
     if (this.onChange) {
@@ -11879,7 +11879,7 @@ import { Component } from \\"@angular/core\\";
 @Component({
   selector: \\"set-state\\",
   template: \`
-    <div><button (click)=\\"someFn\\">Click me</button></div>
+    <div><button (click)=\\"someFn()\\">Click me</button></div>
   \`,
 })
 export default class SetState {
diff --git a/packages/core/src/__tests__/__snapshots__/angular.test.ts.snap b/packages/core/src/__tests__/__snapshots__/angular.test.ts.snap
index 53497b2cf3..74a698e717 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.test.ts.snap
@@ -10843,7 +10843,7 @@ import { Component } from \\"@angular/core\\";
 @Component({
   selector: \\"set-state\\",
   template: \`
-    <div><button (click)=\\"someFn\\">Click me</button></div>
+    <div><button (click)=\\"someFn()\\">Click me</button></div>
   \`,
   styles: [
     \`
@@ -10876,7 +10876,7 @@ import { CommonModule } from \\"@angular/common\\";
 @Component({
   selector: \\"set-state\\",
   template: \`
-    <div><button (click)=\\"someFn\\">Click me</button></div>
+    <div><button (click)=\\"someFn()\\">Click me</button></div>
   \`,
   styles: [
     \`
@@ -19200,7 +19200,7 @@ export default class UseValueAndFnFromStore {
 
   _id: MyStore[\\"_id\\"] = \\"abc\\";
   _active: MyStore[\\"_active\\"] = false;
-  _do(id?: string): MyStore[\\"_do\\"] {
+  _do(id?: string): ReturnType<MyStore[\\"_do\\"]> {
     this._active = !!id;
 
     if (this.onChange) {
@@ -19259,7 +19259,7 @@ export default class UseValueAndFnFromStore {
 
   _id: MyStore[\\"_id\\"] = \\"abc\\";
   _active: MyStore[\\"_active\\"] = false;
-  _do(id?: string): MyStore[\\"_do\\"] {
+  _do(id?: string): ReturnType<MyStore[\\"_do\\"]> {
     this._active = !!id;
 
     if (this.onChange) {
@@ -24914,7 +24914,7 @@ import { Component } from \\"@angular/core\\";
 @Component({
   selector: \\"set-state\\",
   template: \`
-    <div><button (click)=\\"someFn\\">Click me</button></div>
+    <div><button (click)=\\"someFn()\\">Click me</button></div>
   \`,
   styles: [
     \`
@@ -24947,7 +24947,7 @@ import { CommonModule } from \\"@angular/common\\";
 @Component({
   selector: \\"set-state\\",
   template: \`
-    <div><button (click)=\\"someFn\\">Click me</button></div>
+    <div><button (click)=\\"someFn()\\">Click me</button></div>
   \`,
   styles: [
     \`
diff --git a/packages/core/src/__tests__/__snapshots__/html.test.ts.snap b/packages/core/src/__tests__/__snapshots__/html.test.ts.snap
index 871efa2e5f..ae76c0a508 100644
--- a/packages/core/src/__tests__/__snapshots__/html.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/html.test.ts.snap
@@ -5754,7 +5754,7 @@ exports[`Html > jsx > Javascript Test > setState 1`] = `
 
     // Event handler for 'click' event on button-1
     function onButton1Click(event) {
-      state.someFn;
+      state.someFn();
     }
 
     // Update with initial state on first load
@@ -12803,7 +12803,7 @@ exports[`Html > jsx > Typescript Test > setState 1`] = `
 
     // Event handler for 'click' event on button-1
     function onButton1Click(event) {
-      state.someFn;
+      state.someFn();
     }
 
     // Update with initial state on first load
diff --git a/packages/core/src/__tests__/__snapshots__/lit.test.ts.snap b/packages/core/src/__tests__/__snapshots__/lit.test.ts.snap
index c9cb4999bd..0265d92536 100644
--- a/packages/core/src/__tests__/__snapshots__/lit.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/lit.test.ts.snap
@@ -3668,7 +3668,7 @@ export default class SetState extends LitElement {
     return html\`
 
           <div ><button  @click=\${(event) =>
-            this.someFn} >Click me</button></div>
+            this.someFn()} >Click me</button></div>
         \`;
   }
 }
@@ -8385,7 +8385,7 @@ export default class SetState extends LitElement {
     return html\`
 
           <div ><button  @click=\${(event) =>
-            this.someFn} >Click me</button></div>
+            this.someFn()} >Click me</button></div>
         \`;
   }
 }
diff --git a/packages/core/src/__tests__/__snapshots__/marko.test.ts.snap b/packages/core/src/__tests__/__snapshots__/marko.test.ts.snap
index 161bbf770d..a87081f5bd 100644
--- a/packages/core/src/__tests__/__snapshots__/marko.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/marko.test.ts.snap
@@ -2251,7 +2251,7 @@ exports[`Marko > jsx > Javascript Test > setState 1`] = `
   }
 }
 
-<div><button on-click(event => component.someFn)>Click me</button></div>"
+<div><button on-click(event => component.someFn())>Click me</button></div>"
 `;
 
 exports[`Marko > jsx > Javascript Test > showExpressions 1`] = `
@@ -4796,7 +4796,7 @@ exports[`Marko > jsx > Typescript Test > setState 1`] = `
   }
 }
 
-<div><button on-click(event => component.someFn)>Click me</button></div>"
+<div><button on-click(event => component.someFn())>Click me</button></div>"
 `;
 
 exports[`Marko > jsx > Typescript Test > showExpressions 1`] = `
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 ad76cb73e0..d2a79fd3e0 100644
--- a/packages/core/src/__tests__/__snapshots__/parse-jsx.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/parse-jsx.test.ts.snap
@@ -8862,7 +8862,7 @@ exports[`Parse JSX > Javascript > setState 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "onClick": {
-              "code": "state.someFn",
+              "code": "state.someFn()",
               "type": "single",
             },
           },
@@ -20675,7 +20675,7 @@ exports[`Parse JSX > Typescript > setState 1`] = `
           "@type": "@builder.io/mitosis/node",
           "bindings": {
             "onClick": {
-              "code": "state.someFn",
+              "code": "state.someFn()",
               "type": "single",
             },
           },
diff --git a/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap b/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap
index ab31b06b61..467c208e30 100644
--- a/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap
@@ -2987,7 +2987,7 @@ function SetState(props) {
 
   return (
     <div>
-      <button onClick={(event) => someFn}>Click me</button>
+      <button onClick={(event) => someFn()}>Click me</button>
     </div>
   );
 }
@@ -5309,7 +5309,7 @@ function UseValueAndFnFromStore(props: MyProps) {
 
   const [_active, set_active] = useState<MyStore[\\"_active\\"]>(() => false);
 
-  function _do(id?: string): MyStore[\\"_do\\"] {
+  function _do(id?: string): ReturnType<MyStore[\\"_do\\"]> {
     set_active(!!id);
 
     if (props.onChange) {
@@ -6909,7 +6909,7 @@ function SetState(props: any) {
 
   return (
     <div>
-      <button onClick={(event) => someFn}>Click me</button>
+      <button onClick={(event) => someFn()}>Click me</button>
     </div>
   );
 }
diff --git a/packages/core/src/__tests__/__snapshots__/qwik.test.ts.snap b/packages/core/src/__tests__/__snapshots__/qwik.test.ts.snap
index ce87c08aec..9edcf3d1b6 100644
--- a/packages/core/src/__tests__/__snapshots__/qwik.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/qwik.test.ts.snap
@@ -4683,9 +4683,7 @@ export const SetState = component$((props) => {
 
   return (
     <div>
-      <button onClick$={$((event) => someFn.bind(null, props, state))}>
-        Click me
-      </button>
+      <button onClick$={$((event) => someFn(props, state))}>Click me</button>
     </div>
   );
 });
@@ -8458,9 +8456,7 @@ export const SetState = component$((props: any) => {
 
   return (
     <div>
-      <button onClick$={$((event) => someFn.bind(null, props, state))}>
-        Click me
-      </button>
+      <button onClick$={$((event) => someFn(props, state))}>Click me</button>
     </div>
   );
 });
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 3967b574ba..3ca86f0a39 100644
--- a/packages/core/src/__tests__/__snapshots__/react-native.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/react-native.test.ts.snap
@@ -4032,7 +4032,7 @@ function SetState(props) {
 
   return (
     <View>
-      <Button onPress={(event) => someFn}>
+      <Button onPress={(event) => someFn()}>
         <Text>Click me</Text>
       </Button>
     </View>
@@ -7122,7 +7122,7 @@ function UseValueAndFnFromStore(props: MyProps) {
 
   const [_active, set_active] = useState<MyStore[\\"_active\\"]>(() => false);
 
-  function _do(id?: string): MyStore[\\"_do\\"] {
+  function _do(id?: string): ReturnType<MyStore[\\"_do\\"]> {
     set_active(!!id);
 
     if (props.onChange) {
@@ -9360,7 +9360,7 @@ function SetState(props: any) {
 
   return (
     <View>
-      <Button onPress={(event) => someFn}>
+      <Button onPress={(event) => someFn()}>
         <Text>Click me</Text>
       </Button>
     </View>
diff --git a/packages/core/src/__tests__/__snapshots__/react.test.ts.snap b/packages/core/src/__tests__/__snapshots__/react.test.ts.snap
index c6a36810c0..d74997c99e 100644
--- a/packages/core/src/__tests__/__snapshots__/react.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/react.test.ts.snap
@@ -2958,7 +2958,7 @@ function SetState(props) {
 
   return (
     <div>
-      <button onClick={(event) => someFn}>Click me</button>
+      <button onClick={(event) => someFn()}>Click me</button>
     </div>
   );
 }
@@ -5197,7 +5197,7 @@ function UseValueAndFnFromStore(props: MyProps) {
 
   const [_active, set_active] = useState<MyStore[\\"_active\\"]>(() => false);
 
-  function _do(id?: string): MyStore[\\"_do\\"] {
+  function _do(id?: string): ReturnType<MyStore[\\"_do\\"]> {
     set_active(!!id);
 
     if (props.onChange) {
@@ -6784,7 +6784,7 @@ function SetState(props: any) {
 
   return (
     <div>
-      <button onClick={(event) => someFn}>Click me</button>
+      <button onClick={(event) => someFn()}>Click me</button>
     </div>
   );
 }
diff --git a/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap b/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap
index 9f7ce9e3d1..2d9edf5bba 100644
--- a/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap
@@ -2703,7 +2703,7 @@ function SetState(props) {
 
   return (
     <div>
-      <button onClick={(event) => someFn}>Click me</button>
+      <button onClick={(event) => someFn()}>Click me</button>
     </div>
   );
 }
@@ -4936,7 +4936,7 @@ function UseValueAndFnFromStore(props: MyProps) {
 
   const [_active, set_active] = useState<MyStore[\\"_active\\"]>(() => false);
 
-  function _do(id?: string): MyStore[\\"_do\\"] {
+  function _do(id?: string): ReturnType<MyStore[\\"_do\\"]> {
     set_active(!!id);
 
     if (props.onChange) {
@@ -6258,7 +6258,7 @@ function SetState(props: any) {
 
   return (
     <div>
-      <button onClick={(event) => someFn}>Click me</button>
+      <button onClick={(event) => someFn()}>Click me</button>
     </div>
   );
 }
diff --git a/packages/core/src/__tests__/__snapshots__/solid.test.ts.snap b/packages/core/src/__tests__/__snapshots__/solid.test.ts.snap
index 6386f8d576..4b1e15af50 100644
--- a/packages/core/src/__tests__/__snapshots__/solid.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/solid.test.ts.snap
@@ -6155,7 +6155,7 @@ function SetState(props) {
   return (
     <>
       <div>
-        <button onClick={(event) => someFn}>Click me</button>
+        <button onClick={(event) => someFn()}>Click me</button>
       </div>
     </>
   );
@@ -6178,7 +6178,7 @@ function SetState(props) {
   return (
     <>
       <div>
-        <button onClick={(event) => someFn}>Click me</button>
+        <button onClick={(event) => someFn()}>Click me</button>
       </div>
     </>
   );
@@ -14075,7 +14075,7 @@ function SetState(props: any) {
   return (
     <>
       <div>
-        <button onClick={(event) => someFn}>Click me</button>
+        <button onClick={(event) => someFn()}>Click me</button>
       </div>
     </>
   );
@@ -14098,7 +14098,7 @@ function SetState(props: any) {
   return (
     <>
       <div>
-        <button onClick={(event) => someFn}>Click me</button>
+        <button onClick={(event) => someFn()}>Click me</button>
       </div>
     </>
   );
diff --git a/packages/core/src/__tests__/__snapshots__/stencil.test.ts.snap b/packages/core/src/__tests__/__snapshots__/stencil.test.ts.snap
index 1d6e11d746..b81317f12a 100644
--- a/packages/core/src/__tests__/__snapshots__/stencil.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/stencil.test.ts.snap
@@ -384,7 +384,7 @@ export class MyBasicRefComponent {
 
   onBlur = function onBlur() {
     // Maintain focus
-    this.inputRef.focus();
+    this.inputRef?.focus();
   };
   lowerCaseName = function lowerCaseName() {
     return this.name.toLowerCase();
@@ -1355,6 +1355,28 @@ export class Stepper {
 "
 `;
 
+exports[`Stencil > jsx > Javascript Test > NestedStore 1`] = `
+"import { Component, h, Fragment, State } from \\"@stencil/core\\";
+
+@Component({
+  tag: \\"nested-store\\",
+})
+export class NestedStore {
+  @State() _id = \\"abc\\";
+  @State() _messageId = this._id + \\"-message\\";
+
+  render() {
+    return (
+      <div id={this._id}>
+        Test
+        <p id={this._messageId}>Message</p>
+      </div>
+    );
+  }
+}
+"
+`;
+
 exports[`Stencil > jsx > Javascript Test > RawText 1`] = `
 "import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
 
@@ -1752,6 +1774,38 @@ export class Textarea {
 "
 `;
 
+exports[`Stencil > jsx > Javascript Test > UseValueAndFnFromStore 1`] = `
+"import { Component, h, Fragment, Event, Prop, State } from \\"@stencil/core\\";
+
+@Component({
+  tag: \\"use-value-and-fn-from-store\\",
+})
+export class UseValueAndFnFromStore {
+  @Event() onChange: any;
+  @State() _id = \\"abc\\";
+  @State() _active = false;
+
+  _do(id) {
+    this._active = !!id;
+
+    if (this.onChange) {
+      this.onChange.emit(this._active);
+    }
+  }
+
+  componentDidUpdate() {
+    if (this._do) {
+      this._do(this._id);
+    }
+  }
+
+  render() {
+    return <div>Test</div>;
+  }
+}
+"
+`;
+
 exports[`Stencil > jsx > Javascript Test > Video 1`] = `
 "import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
 
@@ -3127,6 +3181,30 @@ export class MyComponent {
 "
 `;
 
+exports[`Stencil > jsx > Javascript Test > setState 1`] = `
+"import { Component, h, Fragment, State } from \\"@stencil/core\\";
+
+@Component({
+  tag: \\"set-state\\",
+})
+export class SetState {
+  @State() n = [\\"123\\"];
+
+  someFn() {
+    this.n[0] = \\"123\\";
+  }
+
+  render() {
+    return (
+      <div>
+        <button onClick={() => this.someFn()}>Click me</button>
+      </div>
+    );
+  }
+}
+"
+`;
+
 exports[`Stencil > jsx > Javascript Test > signalsOnUpdate 1`] = `
 "import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
 
@@ -3941,14 +4019,14 @@ export interface Props {
 \`,
 })
 export class MyBasicRefComponent {
-  private inputRef!: HTMLInputElement;
-  private inputNoArgRef!: HTMLLabelElement;
+  private inputRef!: HTMLInputElement | null;
+  private inputNoArgRef!: HTMLLabelElement | null;
   @Prop() showInput: Props[\\"showInput\\"];
   @State() name = \\"PatrickJS\\";
 
   onBlur = function onBlur() {
     // Maintain focus
-    this.inputRef.focus();
+    this.inputRef?.focus();
   };
   lowerCaseName = function lowerCaseName() {
     return this.name.toLowerCase();
@@ -5050,6 +5128,33 @@ export class Stepper {
 "
 `;
 
+exports[`Stencil > jsx > Typescript Test > NestedStore 1`] = `
+"import { Component, h, Fragment, State } from \\"@stencil/core\\";
+
+type MyStore = {
+  _id?: string;
+  _messageId?: string;
+};
+
+@Component({
+  tag: \\"nested-store\\",
+})
+export class NestedStore {
+  @State() _id = \\"abc\\";
+  @State() _messageId = this._id + \\"-message\\";
+
+  render() {
+    return (
+      <div id={this._id}>
+        Test
+        <p id={this._messageId}>Message</p>
+      </div>
+    );
+  }
+}
+"
+`;
+
 exports[`Stencil > jsx > Typescript Test > RawText 1`] = `
 "import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
 
@@ -5517,6 +5622,47 @@ export class Textarea {
 "
 `;
 
+exports[`Stencil > jsx > Typescript Test > UseValueAndFnFromStore 1`] = `
+"import { Component, h, Fragment, Event, Prop, State } from \\"@stencil/core\\";
+
+type MyProps = {
+  onChange?: (active: boolean) => void;
+};
+type MyStore = {
+  _id?: string;
+  _active?: boolean;
+  _do?: (id?: string) => void;
+};
+
+@Component({
+  tag: \\"use-value-and-fn-from-store\\",
+})
+export class UseValueAndFnFromStore {
+  @Event() onChange: any;
+  @State() _id = \\"abc\\";
+  @State() _active = false;
+
+  _do(id?: string) {
+    this._active = !!id;
+
+    if (this.onChange) {
+      this.onChange.emit(this._active);
+    }
+  }
+
+  componentDidUpdate() {
+    if (this._do) {
+      this._do(this._id);
+    }
+  }
+
+  render() {
+    return <div>Test</div>;
+  }
+}
+"
+`;
+
 exports[`Stencil > jsx > Typescript Test > Video 1`] = `
 "import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
 
@@ -7050,6 +7196,30 @@ export class MyComponent {
 "
 `;
 
+exports[`Stencil > jsx > Typescript Test > setState 1`] = `
+"import { Component, h, Fragment, State } from \\"@stencil/core\\";
+
+@Component({
+  tag: \\"set-state\\",
+})
+export class SetState {
+  @State() n = [\\"123\\"];
+
+  someFn() {
+    this.n[0] = \\"123\\";
+  }
+
+  render() {
+    return (
+      <div>
+        <button onClick={() => this.someFn()}>Click me</button>
+      </div>
+    );
+  }
+}
+"
+`;
+
 exports[`Stencil > jsx > Typescript Test > signalsOnUpdate 1`] = `
 "import { Component, h, Fragment, Prop } 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 3358243394..0d217afaee 100644
--- a/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap
@@ -2503,7 +2503,7 @@ exports[`Svelte > jsx > Javascript Test > setState 1`] = `
 <div>
   <button
     on:click={(event) => {
-      someFn;
+      someFn();
     }}>Click me</button
   >
 </div>"
@@ -5957,7 +5957,7 @@ exports[`Svelte > jsx > Typescript Test > setState 1`] = `
 <div>
   <button
     on:click={(event) => {
-      someFn;
+      someFn();
     }}>Click me</button
   >
 </div>"
diff --git a/packages/core/src/__tests__/__snapshots__/taro.test.ts.snap b/packages/core/src/__tests__/__snapshots__/taro.test.ts.snap
index 5ab35b7f9b..c3f4f36264 100644
--- a/packages/core/src/__tests__/__snapshots__/taro.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/taro.test.ts.snap
@@ -3005,7 +3005,7 @@ function SetState(props) {
 
   return (
     <View>
-      <Button onClick={(event) => someFn}>Click me</Button>
+      <Button onClick={(event) => someFn()}>Click me</Button>
     </View>
   );
 }
@@ -5282,7 +5282,7 @@ function UseValueAndFnFromStore(props: MyProps) {
 
   const [_active, set_active] = useState<MyStore[\\"_active\\"]>(() => false);
 
-  function _do(id?: string): MyStore[\\"_do\\"] {
+  function _do(id?: string): ReturnType<MyStore[\\"_do\\"]> {
     set_active(!!id);
 
     if (props.onChange) {
@@ -6923,7 +6923,7 @@ function SetState(props: any) {
 
   return (
     <View>
-      <Button onClick={(event) => someFn}>Click me</Button>
+      <Button onClick={(event) => someFn()}>Click me</Button>
     </View>
   );
 }
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 007aa657b0..c6c7c6c58a 100644
--- a/packages/core/src/__tests__/__snapshots__/vue-composition.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/vue-composition.test.ts.snap
@@ -2655,7 +2655,7 @@ const props = defineProps([\\"name\\", \\"children\\"]);
 
 exports[`Vue > jsx > Javascript Test > setState 1`] = `
 "<template>
-  <div><button @click=\\"someFn\\">Click me</button></div>
+  <div><button @click=\\"someFn()\\">Click me</button></div>
 </template>
 
 <script setup>
@@ -4765,7 +4765,7 @@ onUpdated(() => {
   }
 });
 
-function _do(id?: string): MyStore[\\"_do\\"] {
+function _do(id?: string): ReturnType<MyStore[\\"_do\\"]> {
   _active.value = !!id;
 
   if (props.onChange) {
@@ -6109,7 +6109,7 @@ const props = defineProps([\\"name\\", \\"children\\"]);
 
 exports[`Vue > jsx > Typescript Test > setState 1`] = `
 "<template>
-  <div><button @click=\\"someFn\\">Click me</button></div>
+  <div><button @click=\\"someFn()\\">Click me</button></div>
 </template>
 
 <script setup lang=\\"ts\\">
diff --git a/packages/core/src/__tests__/__snapshots__/vue.test.ts.snap b/packages/core/src/__tests__/__snapshots__/vue.test.ts.snap
index da0007aa2e..5af7783d37 100644
--- a/packages/core/src/__tests__/__snapshots__/vue.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/vue.test.ts.snap
@@ -3285,7 +3285,7 @@ export default defineComponent({
 
 exports[`Vue > jsx > Javascript Test > setState 1`] = `
 "<template>
-  <div><button @click=\\"someFn\\">Click me</button></div>
+  <div><button @click=\\"someFn()\\">Click me</button></div>
 </template>
 
 <script>
@@ -7615,7 +7615,7 @@ export default defineComponent({
 
 exports[`Vue > jsx > Typescript Test > setState 1`] = `
 "<template>
-  <div><button @click=\\"someFn\\">Click me</button></div>
+  <div><button @click=\\"someFn()\\">Click me</button></div>
 </template>
 
 <script lang=\\"ts\\">
diff --git a/packages/core/src/__tests__/__snapshots__/webcomponent.test.ts.snap b/packages/core/src/__tests__/__snapshots__/webcomponent.test.ts.snap
index 18956a5e29..a8cdf90c17 100644
--- a/packages/core/src/__tests__/__snapshots__/webcomponent.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/webcomponent.test.ts.snap
@@ -12689,7 +12689,7 @@ class SetState extends HTMLElement {
 
     // Event handler for 'click' event on button-set-state-1
     this.onButtonSetState1Click = (event) => {
-      this.state.someFn;
+      this.state.someFn();
     };
 
     if (undefined) {
@@ -28263,7 +28263,7 @@ class SetState extends HTMLElement {
 
     // Event handler for 'click' event on button-set-state-1
     this.onButtonSetState1Click = (event) => {
-      this.state.someFn;
+      this.state.someFn();
     };
 
     if (undefined) {
diff --git a/packages/core/src/__tests__/data/state/set-state.raw.tsx b/packages/core/src/__tests__/data/state/set-state.raw.tsx
index e96e8e0763..5e2b69ecad 100644
--- a/packages/core/src/__tests__/data/state/set-state.raw.tsx
+++ b/packages/core/src/__tests__/data/state/set-state.raw.tsx
@@ -11,7 +11,7 @@ export default function SetState() {
 
   return (
     <div>
-      <button onClick={state.someFn}>Click me</button>
+      <button onClick={() => state.someFn()}>Click me</button>
     </div>
   );
 }