From c1efd3c9e41f2f2176388bbb0bb375d74afbc38a Mon Sep 17 00:00:00 2001
From: Sami Jaber <jabersami@gmail.com>
Date: Mon, 22 Apr 2024 14:14:02 -0300
Subject: [PATCH 01/10] add test

---
 .../data/blocks/getter-state.raw.lite.tsx     | 24 +++++++++++++++++++
 packages/core/src/__tests__/test-generator.ts |  2 ++
 2 files changed, 26 insertions(+)
 create mode 100644 packages/core/src/__tests__/data/blocks/getter-state.raw.lite.tsx

diff --git a/packages/core/src/__tests__/data/blocks/getter-state.raw.lite.tsx b/packages/core/src/__tests__/data/blocks/getter-state.raw.lite.tsx
new file mode 100644
index 0000000000..a1bd3a907e
--- /dev/null
+++ b/packages/core/src/__tests__/data/blocks/getter-state.raw.lite.tsx
@@ -0,0 +1,24 @@
+import { useStore } from '@builder.io/mitosis';
+
+export default function Button(props: { foo: string }) {
+  const state = useStore({
+    get foo() {
+      return props.foo + 'foo';
+    },
+
+    get bar() {
+      return 'bar';
+    },
+
+    baz(i: number) {
+      return i + state.foo.length;
+    },
+  });
+  return (
+    <div>
+      <p>{state.foo}</p>
+      <p>{state.bar}</p>
+      <p>{state.baz(1)}</p>
+    </div>
+  );
+}
diff --git a/packages/core/src/__tests__/test-generator.ts b/packages/core/src/__tests__/test-generator.ts
index c4a6bdfc14..dd4f53e877 100644
--- a/packages/core/src/__tests__/test-generator.ts
+++ b/packages/core/src/__tests__/test-generator.ts
@@ -10,6 +10,7 @@ const getRawFile = async (filePath: string) => {
 
 type RawFile = ReturnType<typeof getRawFile>;
 
+const getterState = getRawFile('./data/blocks/getter-state.raw.lite.tsx');
 const basicForShow = getRawFile('./data/basic-for-show.raw.tsx');
 const basicBooleanAttribute = getRawFile('./data/basic-boolean-attribute.raw.tsx');
 const basicOnMountUpdate = getRawFile('./data/basic-onMount-update.raw.tsx');
@@ -221,6 +222,7 @@ const BASIC_TESTS: Tests = {
   renderBlock,
   useTarget,
   signalsOnUpdate,
+  getterState,
 };
 
 const SLOTS_TESTS: Tests = {

From e8b7f6eab6e4dd7a7a5cd005fa5bd95486c363d3 Mon Sep 17 00:00:00 2001
From: Sami Jaber <jabersami@gmail.com>
Date: Mon, 22 Apr 2024 16:25:26 -0300
Subject: [PATCH 02/10] add test

---
 .../__snapshots__/alpine.test.ts.snap         |  26 ++
 .../__snapshots__/angular.import.test.ts.snap |  39 +++
 .../__snapshots__/angular.mapper.test.ts.snap |  40 +++
 .../__snapshots__/angular.test.ts.snap        |  71 +++++
 .../__tests__/__snapshots__/html.test.ts.snap |  82 ++++++
 .../__snapshots__/liquid.test.ts.snap         |   9 +
 .../__tests__/__snapshots__/lit.test.ts.snap  |  37 +++
 .../__snapshots__/marko.test.ts.snap          |  20 ++
 .../__snapshots__/parse-jsx.test.ts.snap      | 256 ++++++++++++++++++
 .../__snapshots__/preact.test.ts.snap         |  30 ++
 .../__tests__/__snapshots__/qwik.test.ts.snap |  28 ++
 .../__snapshots__/react-native.test.ts.snap   |  44 +++
 .../__snapshots__/react.test.ts.snap          |  29 ++
 .../__tests__/__snapshots__/rsc.test.ts.snap  |  27 ++
 .../__snapshots__/solid.test.ts.snap          |  60 ++++
 .../__snapshots__/stencil.test.ts.snap        |  32 +++
 .../__snapshots__/svelte.test.ts.snap         |  23 ++
 .../__tests__/__snapshots__/taro.test.ts.snap |  30 ++
 .../vue-composition.test.ts.snap              |  27 ++
 .../__tests__/__snapshots__/vue.test.ts.snap  |  35 +++
 .../__snapshots__/webcomponent.test.ts.snap   | 135 +++++++++
 21 files changed, 1080 insertions(+)

diff --git a/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap b/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap
index 1724a20c51..bed53287c3 100644
--- a/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap
@@ -1697,6 +1697,32 @@ exports[`Alpine.js > jsx > Javascript Test > expressionState 1`] = `
 "
 `;
 
+exports[`Alpine.js > jsx > Javascript Test > getterState 1`] = `
+"<div x-data=\\"button()\\">
+  <p><span x-html=\\"foo\\"></span></p>
+  <p><span x-html=\\"bar\\"></span></p>
+  <p><span x-html=\\"baz(1)\\"></span></p>
+</div>
+<script>
+  document.addEventListener(\\"alpine:init\\", () => {
+    Alpine.data(\\"button\\", () => ({
+      get foo() {
+        return props.foo + \\"foo\\";
+      },
+
+      get bar() {
+        return \\"bar\\";
+      },
+
+      baz(i) {
+        return i + this.foo.length;
+      },
+    }));
+  });
+</script>
+"
+`;
+
 exports[`Alpine.js > jsx > Javascript Test > import types 1`] = `
 "<RenderBlock
   x-data=\\"renderContent()\\"
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 6872c209dd..5760dd2483 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap
@@ -2673,6 +2673,45 @@ export class MyComponentModule {}
 "
 `;
 
+exports[`Angular with Preserve Imports and File Extensions > jsx > Javascript Test > getterState 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component, Input } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"button, Button\\",
+  template: \`
+    <div>
+      <p>{{foo}}</p>
+      <p>{{bar}}</p>
+      <p>{{baz(1)}}</p>
+    </div>
+  \`,
+})
+export default class Button {
+  @Input() foo!: any;
+
+  get foo() {
+    return this.foo + \\"foo\\";
+  }
+  get bar() {
+    return \\"bar\\";
+  }
+  baz(i) {
+    return i + this.foo.length;
+  }
+}
+
+@NgModule({
+  declarations: [Button],
+  imports: [CommonModule],
+  exports: [Button],
+})
+export class ButtonModule {}
+"
+`;
+
 exports[`Angular with Preserve Imports and File Extensions > jsx > Javascript Test > import types 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 f8b3cb42de..e94b71d788 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.mapper.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.mapper.test.ts.snap
@@ -2729,6 +2729,46 @@ export class MyComponentModule {}
 "
 `;
 
+exports[`Angular with Import Mapper Tests > jsx > Javascript Test > getterState 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component, Input } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"button, Button\\",
+  template: \`
+    <div>
+      <p>{{foo}}</p>
+      <p>{{bar}}</p>
+      <p>{{baz(1)}}</p>
+    </div>
+  \`,
+})
+export default class Button {
+  @Input() foo!: any;
+
+  get foo() {
+    return this.foo + \\"foo\\";
+  }
+  get bar() {
+    return \\"bar\\";
+  }
+  baz(i) {
+    return i + this.foo.length;
+  }
+}
+
+@NgModule({
+  declarations: [Button],
+  imports: [CommonModule],
+  exports: [Button],
+  bootstrap: [SomeOtherComponent],
+})
+export class ButtonModule {}
+"
+`;
+
 exports[`Angular with Import Mapper Tests > jsx > Javascript Test > import types 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 32d173daf9..229bb61173 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.test.ts.snap
@@ -4948,6 +4948,77 @@ export default class MyComponent {
 "
 `;
 
+exports[`Angular > jsx > Javascript Test > getterState 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component, Input } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"button, Button\\",
+  template: \`
+    <div>
+      <p>{{foo}}</p>
+      <p>{{bar}}</p>
+      <p>{{baz(1)}}</p>
+    </div>
+  \`,
+})
+export default class Button {
+  @Input() foo!: any;
+
+  get foo() {
+    return this.foo + \\"foo\\";
+  }
+  get bar() {
+    return \\"bar\\";
+  }
+  baz(i) {
+    return i + this.foo.length;
+  }
+}
+
+@NgModule({
+  declarations: [Button],
+  imports: [CommonModule],
+  exports: [Button],
+})
+export class ButtonModule {}
+"
+`;
+
+exports[`Angular > jsx > Javascript Test > getterState 2`] = `
+"import { Component, Input } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+@Component({
+  selector: \\"button, Button\\",
+  template: \`
+    <div>
+      <p>{{foo}}</p>
+      <p>{{bar}}</p>
+      <p>{{baz(1)}}</p>
+    </div>
+  \`,
+  standalone: true,
+  imports: [CommonModule],
+})
+export default class Button {
+  @Input() foo!: any;
+
+  get foo() {
+    return this.foo + \\"foo\\";
+  }
+  get bar() {
+    return \\"bar\\";
+  }
+  baz(i) {
+    return i + this.foo.length;
+  }
+}
+"
+`;
+
 exports[`Angular > jsx > Javascript Test > import types 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 b30d369cfa..f7e941d11e 100644
--- a/packages/core/src/__tests__/__snapshots__/html.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/html.test.ts.snap
@@ -4214,6 +4214,88 @@ exports[`Html > jsx > Javascript Test > expressionState 1`] = `
 "
 `;
 
+exports[`Html > jsx > Javascript Test > getterState 1`] = `
+"<div>
+  <p>
+    <template data-el=\\"div-1\\"><!-- state.foo --></template>
+  </p>
+  <p>
+    <template data-el=\\"div-2\\"><!-- state.bar --></template>
+  </p>
+  <p>
+    <template data-el=\\"div-3\\"><!-- state.baz(1) --></template>
+  </p>
+</div>
+<script>
+  (() => {
+    const state = {
+      get foo() {
+        return props.foo + \\"foo\\";
+      },
+      get bar() {
+        return \\"bar\\";
+      },
+      baz(i) {
+        return i + state.foo.length;
+      },
+    };
+    let props = {};
+    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) => {
+        renderTextNode(el, state.foo);
+      });
+
+      document.querySelectorAll(\\"[data-el='div-2']\\").forEach((el) => {
+        renderTextNode(el, state.bar);
+      });
+
+      document.querySelectorAll(\\"[data-el='div-3']\\").forEach((el) => {
+        renderTextNode(el, state.baz(1));
+      });
+
+      destroyAnyNodes();
+
+      pendingUpdate = false;
+    }
+
+    // Update with initial state on first load
+    update();
+
+    // Helper text DOM nodes
+    function renderTextNode(el, text) {
+      const textNode = document.createTextNode(text);
+      if (el?.scope) {
+        textNode.scope = el.scope;
+      }
+      if (el?.context) {
+        child.context = el.context;
+      }
+      el.after(textNode);
+      nodesToDestroy.push(el.nextSibling);
+    }
+  })();
+</script>
+"
+`;
+
 exports[`Html > jsx > Javascript Test > import types 1`] = `
 "<RenderBlock data-el=\\"render-block\\"></RenderBlock>
 "
diff --git a/packages/core/src/__tests__/__snapshots__/liquid.test.ts.snap b/packages/core/src/__tests__/__snapshots__/liquid.test.ts.snap
index 2c83073851..ae1a458f69 100644
--- a/packages/core/src/__tests__/__snapshots__/liquid.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/liquid.test.ts.snap
@@ -541,6 +541,15 @@ exports[`Liquid > jsx > Javascript Test > expressionState 1`] = `
 "
 `;
 
+exports[`Liquid > jsx > Javascript Test > getterState 1`] = `
+"<div>
+  <p>{{foo}}</p>
+  <p>{{bar}}</p>
+  <p></p>
+</div>
+"
+`;
+
 exports[`Liquid > jsx > Javascript Test > import types 1`] = `
 "<RenderBlock></RenderBlock>
 "
diff --git a/packages/core/src/__tests__/__snapshots__/lit.test.ts.snap b/packages/core/src/__tests__/__snapshots__/lit.test.ts.snap
index fc6cac0ba0..be62f9ff3e 100644
--- a/packages/core/src/__tests__/__snapshots__/lit.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/lit.test.ts.snap
@@ -2490,6 +2490,43 @@ export default class MyComponent extends LitElement {
 "
 `;
 
+exports[`Lit > jsx > Javascript Test > getterState 1`] = `
+"import { LitElement, html, css } from \\"lit\\";
+import { customElement, property, state, query } from \\"lit/decorators.js\\";
+
+@customElement(\\"my-button\\")
+export default class Button extends LitElement {
+  createRenderRoot() {
+    return this;
+  }
+
+  @property() foo: any;
+
+  get foo() {
+    return this.foo + \\"foo\\";
+  }
+  get bar() {
+    return \\"bar\\";
+  }
+  baz(i) {
+    return i + this.foo.length;
+  }
+
+  render() {
+    return html\`
+
+          <div>
+          <p>\${this.foo}</p>
+          <p>\${this.bar}</p>
+          <p>\${this.baz(1)}</p>
+        </div>
+
+        \`;
+  }
+}
+"
+`;
+
 exports[`Lit > jsx > Javascript Test > import types 1`] = `
 "import RenderBlock from \\"./builder-render-block.raw\\";
 
diff --git a/packages/core/src/__tests__/__snapshots__/marko.test.ts.snap b/packages/core/src/__tests__/__snapshots__/marko.test.ts.snap
index 39f7e5dd4e..66200786f8 100644
--- a/packages/core/src/__tests__/__snapshots__/marko.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/marko.test.ts.snap
@@ -1597,6 +1597,26 @@ exports[`Marko > jsx > Javascript Test > expressionState 1`] = `
 <div>\${state.refToUse}</div>"
 `;
 
+exports[`Marko > jsx > Javascript Test > getterState 1`] = `
+"class {
+  get foo() {
+    return this.input.foo + \\"foo\\";
+  }
+  get bar() {
+    return \\"bar\\";
+  }
+  baz(i) {
+    return i + this.foo.length;
+  }
+}
+
+<div>
+  <p>\${component.foo}</p>
+  <p>\${component.bar}</p>
+  <p>\${component.baz(1)}</p>
+</div>"
+`;
+
 exports[`Marko > jsx > Javascript Test > import types 1`] = `
 "import RenderBlock from \\"./builder-render-block.raw\\";
 
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 40c01bbae7..f9cc85e2bd 100644
--- a/packages/core/src/__tests__/__snapshots__/parse-jsx.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/parse-jsx.test.ts.snap
@@ -6239,6 +6239,131 @@ exports[`Parse JSX > Javascript > expressionState 1`] = `
 }
 `;
 
+exports[`Parse JSX > Javascript > getterState 1`] = `
+{
+  "@type": "@builder.io/mitosis/component",
+  "children": [
+    {
+      "@type": "@builder.io/mitosis/node",
+      "bindings": {},
+      "children": [
+        {
+          "@type": "@builder.io/mitosis/node",
+          "bindings": {},
+          "children": [
+            {
+              "@type": "@builder.io/mitosis/node",
+              "bindings": {
+                "_text": {
+                  "code": "state.foo",
+                  "type": "single",
+                },
+              },
+              "children": [],
+              "meta": {},
+              "name": "div",
+              "properties": {},
+              "scope": {},
+            },
+          ],
+          "meta": {},
+          "name": "p",
+          "properties": {},
+          "scope": {},
+        },
+        {
+          "@type": "@builder.io/mitosis/node",
+          "bindings": {},
+          "children": [
+            {
+              "@type": "@builder.io/mitosis/node",
+              "bindings": {
+                "_text": {
+                  "code": "state.bar",
+                  "type": "single",
+                },
+              },
+              "children": [],
+              "meta": {},
+              "name": "div",
+              "properties": {},
+              "scope": {},
+            },
+          ],
+          "meta": {},
+          "name": "p",
+          "properties": {},
+          "scope": {},
+        },
+        {
+          "@type": "@builder.io/mitosis/node",
+          "bindings": {},
+          "children": [
+            {
+              "@type": "@builder.io/mitosis/node",
+              "bindings": {
+                "_text": {
+                  "code": "state.baz(1)",
+                  "type": "single",
+                },
+              },
+              "children": [],
+              "meta": {},
+              "name": "div",
+              "properties": {},
+              "scope": {},
+            },
+          ],
+          "meta": {},
+          "name": "p",
+          "properties": {},
+          "scope": {},
+        },
+      ],
+      "meta": {},
+      "name": "div",
+      "properties": {},
+      "scope": {},
+    },
+  ],
+  "context": {
+    "get": {},
+    "set": {},
+  },
+  "exports": {},
+  "hooks": {
+    "onEvent": [],
+    "onMount": [],
+  },
+  "imports": [],
+  "inputs": [],
+  "meta": {},
+  "name": "Button",
+  "refs": {},
+  "state": {
+    "bar": {
+      "code": "get bar() {
+  return 'bar';
+}",
+      "type": "getter",
+    },
+    "baz": {
+      "code": "baz(i) {
+  return i + state.foo.length;
+}",
+      "type": "method",
+    },
+    "foo": {
+      "code": "get foo() {
+  return props.foo + 'foo';
+}",
+      "type": "getter",
+    },
+  },
+  "subComponents": [],
+}
+`;
+
 exports[`Parse JSX > Javascript > import types 1`] = `
 {
   "@type": "@builder.io/mitosis/component",
@@ -16335,6 +16460,137 @@ exports[`Parse JSX > Typescript > expressionState 1`] = `
 }
 `;
 
+exports[`Parse JSX > Typescript > getterState 1`] = `
+{
+  "@type": "@builder.io/mitosis/component",
+  "children": [
+    {
+      "@type": "@builder.io/mitosis/node",
+      "bindings": {},
+      "children": [
+        {
+          "@type": "@builder.io/mitosis/node",
+          "bindings": {},
+          "children": [
+            {
+              "@type": "@builder.io/mitosis/node",
+              "bindings": {
+                "_text": {
+                  "code": "state.foo",
+                  "type": "single",
+                },
+              },
+              "children": [],
+              "meta": {},
+              "name": "div",
+              "properties": {},
+              "scope": {},
+            },
+          ],
+          "meta": {},
+          "name": "p",
+          "properties": {},
+          "scope": {},
+        },
+        {
+          "@type": "@builder.io/mitosis/node",
+          "bindings": {},
+          "children": [
+            {
+              "@type": "@builder.io/mitosis/node",
+              "bindings": {
+                "_text": {
+                  "code": "state.bar",
+                  "type": "single",
+                },
+              },
+              "children": [],
+              "meta": {},
+              "name": "div",
+              "properties": {},
+              "scope": {},
+            },
+          ],
+          "meta": {},
+          "name": "p",
+          "properties": {},
+          "scope": {},
+        },
+        {
+          "@type": "@builder.io/mitosis/node",
+          "bindings": {},
+          "children": [
+            {
+              "@type": "@builder.io/mitosis/node",
+              "bindings": {
+                "_text": {
+                  "code": "state.baz(1)",
+                  "type": "single",
+                },
+              },
+              "children": [],
+              "meta": {},
+              "name": "div",
+              "properties": {},
+              "scope": {},
+            },
+          ],
+          "meta": {},
+          "name": "p",
+          "properties": {},
+          "scope": {},
+        },
+      ],
+      "meta": {},
+      "name": "div",
+      "properties": {},
+      "scope": {},
+    },
+  ],
+  "context": {
+    "get": {},
+    "set": {},
+  },
+  "exports": {},
+  "hooks": {
+    "onEvent": [],
+    "onMount": [],
+  },
+  "imports": [],
+  "inputs": [],
+  "meta": {},
+  "name": "Button",
+  "propsTypeRef": "ButtonProps",
+  "refs": {},
+  "state": {
+    "bar": {
+      "code": "get bar() {
+  return 'bar';
+}",
+      "type": "getter",
+    },
+    "baz": {
+      "code": "baz(i: number) {
+  return i + state.foo.length;
+}",
+      "type": "method",
+    },
+    "foo": {
+      "code": "get foo() {
+  return props.foo + 'foo';
+}",
+      "type": "getter",
+    },
+  },
+  "subComponents": [],
+  "types": [
+    "export interface ButtonProps {
+  foo: string;
+}",
+  ],
+}
+`;
+
 exports[`Parse JSX > Typescript > import types 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 3f7d1706a9..20917caf7a 100644
--- a/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap
@@ -2033,6 +2033,36 @@ export default MyComponent;
 "
 `;
 
+exports[`Preact > jsx > Javascript Test > getterState 1`] = `
+"/** @jsx h */
+import { h, Fragment } from \\"preact\\";
+
+function Button(props) {
+  function foo() {
+    return props.foo + \\"foo\\";
+  }
+
+  function bar() {
+    return \\"bar\\";
+  }
+
+  function baz(i) {
+    return i + foo().length;
+  }
+
+  return (
+    <div>
+      <p>{foo()}</p>
+      <p>{bar()}</p>
+      <p>{baz(1)}</p>
+    </div>
+  );
+}
+
+export default Button;
+"
+`;
+
 exports[`Preact > jsx > Javascript Test > import types 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 4692897e8f..f4de140767 100644
--- a/packages/core/src/__tests__/__snapshots__/qwik.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/qwik.test.ts.snap
@@ -3814,6 +3814,34 @@ export default MyComponent;
 "
 `;
 
+exports[`qwik > jsx > Javascript Test > getterState 1`] = `
+"import { Fragment, component$, h, useComputed$ } from \\"@builder.io/qwik\\";
+
+export const baz = function baz(props, state, i) {
+  return i + foo.value.length;
+};
+export const Button = component$((props) => {
+  const foo = useComputed$(() => {
+    return props.foo + \\"foo\\";
+  });
+  const bar = useComputed$(() => {
+    return \\"bar\\";
+  });
+  const state = {};
+
+  return (
+    <div>
+      <p>{foo.value}</p>
+      <p>{bar.value}</p>
+      <p>{baz(props, state, 1)}</p>
+    </div>
+  );
+});
+
+export default Button;
+"
+`;
+
 exports[`qwik > jsx > Javascript Test > import types 1`] = `
 "import RenderBlock from \\"./builder-render-block.raw\\";
 
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 fad1ff2074..64291f4d68 100644
--- a/packages/core/src/__tests__/__snapshots__/react-native.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/react-native.test.ts.snap
@@ -2419,6 +2419,50 @@ export default MyComponent;
 "
 `;
 
+exports[`React Native > jsx > Javascript Test > getterState 1`] = `
+"import * as React from \\"react\\";
+import {
+  FlatList,
+  ScrollView,
+  View,
+  StyleSheet,
+  Image,
+  Text,
+  Pressable,
+} from \\"react-native\\";
+
+function Button(props) {
+  function foo() {
+    return props.foo + \\"foo\\";
+  }
+
+  function bar() {
+    return \\"bar\\";
+  }
+
+  function baz(i) {
+    return i + foo().length;
+  }
+
+  return (
+    <View>
+      <View>
+        <Text>{foo()}</Text>
+      </View>
+      <View>
+        <Text>{bar()}</Text>
+      </View>
+      <View>
+        <Text>{baz(1)}</Text>
+      </View>
+    </View>
+  );
+}
+
+export default Button;
+"
+`;
+
 exports[`React Native > jsx > Javascript Test > import types 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 e20212e0f5..4e35dc0396 100644
--- a/packages/core/src/__tests__/__snapshots__/react.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/react.test.ts.snap
@@ -2016,6 +2016,35 @@ export default MyComponent;
 "
 `;
 
+exports[`React > jsx > Javascript Test > getterState 1`] = `
+"import * as React from \\"react\\";
+
+function Button(props) {
+  function foo() {
+    return props.foo + \\"foo\\";
+  }
+
+  function bar() {
+    return \\"bar\\";
+  }
+
+  function baz(i) {
+    return i + foo().length;
+  }
+
+  return (
+    <div>
+      <p>{foo()}</p>
+      <p>{bar()}</p>
+      <p>{baz(1)}</p>
+    </div>
+  );
+}
+
+export default Button;
+"
+`;
+
 exports[`React > jsx > Javascript Test > import types 1`] = `
 "import * as React from \\"react\\";
 import RenderBlock from \\"./builder-render-block.raw\\";
diff --git a/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap b/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap
index 9aa63ebf03..397416c06e 100644
--- a/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap
@@ -2013,6 +2013,33 @@ export default MyComponent;
 "
 `;
 
+exports[`RSC > jsx > Javascript Test > getterState 1`] = `
+"import * as React from \\"react\\";
+
+function Button(props) {
+  const foo = function foo() {
+    return props.foo + \\"foo\\";
+  };
+  const bar = function bar() {
+    return \\"bar\\";
+  };
+  const baz = function baz(i) {
+    return i + foo().length;
+  };
+
+  return (
+    <div>
+      <p>{foo()}</p>
+      <p>{bar()}</p>
+      <p>{baz(1)}</p>
+    </div>
+  );
+}
+
+export default Button;
+"
+`;
+
 exports[`RSC > jsx > Javascript Test > import types 1`] = `
 "import * as React from \\"react\\";
 import RenderBlock from \\"./builder-render-block.raw\\";
diff --git a/packages/core/src/__tests__/__snapshots__/solid.test.ts.snap b/packages/core/src/__tests__/__snapshots__/solid.test.ts.snap
index f0bc53359e..96a7b291b3 100644
--- a/packages/core/src/__tests__/__snapshots__/solid.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/solid.test.ts.snap
@@ -4122,6 +4122,66 @@ export default MyComponent;
 "
 `;
 
+exports[`Solid > jsx > Javascript Test > getterState 1`] = `
+"import { createSignal, createMemo } from \\"solid-js\\";
+
+function Button(props) {
+  const foo = createMemo(() => {
+    return props.foo + \\"foo\\";
+  });
+
+  const bar = createMemo(() => {
+    return \\"bar\\";
+  });
+
+  function baz(i) {
+    return i + foo().length;
+  }
+
+  return (
+    <div>
+      <p>{foo()}</p>
+      <p>{bar()}</p>
+      <p>{baz(1)}</p>
+    </div>
+  );
+}
+
+export default Button;
+"
+`;
+
+exports[`Solid > jsx > Javascript Test > getterState 2`] = `
+"import { createSignal, createMemo } from \\"solid-js\\";
+
+function Button(props) {
+  const foo = createMemo(() => {
+    return props.foo + \\"foo\\";
+  });
+
+  const bar = createMemo(() => {
+    return \\"bar\\";
+  });
+
+  function baz(i) {
+    return i + foo().length;
+  }
+
+  return (
+    <>
+      <div>
+        <p>{foo()}</p>
+        <p>{bar()}</p>
+        <p>{baz(1)}</p>
+      </div>
+    </>
+  );
+}
+
+export default Button;
+"
+`;
+
 exports[`Solid > jsx > Javascript Test > import types 1`] = `
 "import { createSignal, createMemo } from \\"solid-js\\";
 
diff --git a/packages/core/src/__tests__/__snapshots__/stencil.test.ts.snap b/packages/core/src/__tests__/__snapshots__/stencil.test.ts.snap
index f390c4642d..883ea17514 100644
--- a/packages/core/src/__tests__/__snapshots__/stencil.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/stencil.test.ts.snap
@@ -1854,6 +1854,38 @@ export default class MyComponent {
 "
 `;
 
+exports[`Stencil > jsx > Javascript Test > getterState 1`] = `
+"import { Component, Prop, h, State, Fragment } from \\"@stencil/core\\";
+
+@Component({
+  tag: \\"button\\",
+})
+export default class Button {
+  @Prop() foo: any;
+
+  get foo() {
+    return this.foo + \\"foo\\";
+  }
+  get bar() {
+    return \\"bar\\";
+  }
+  baz(i) {
+    return i + this.foo.length;
+  }
+
+  render() {
+    return (
+      <div>
+        <p>{this.foo}</p>
+        <p>{this.bar}</p>
+        <p>{this.baz(1)}</p>
+      </div>
+    );
+  }
+}
+"
+`;
+
 exports[`Stencil > jsx > Javascript Test > import types 1`] = `
 "import RenderBlock from \\"./builder-render-block.raw\\";
 
diff --git a/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap b/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap
index 2f32c73de5..f62590ae2c 100644
--- a/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap
@@ -1758,6 +1758,29 @@ exports[`Svelte > jsx > Javascript Test > expressionState 1`] = `
 <div>{refToUse}</div>"
 `;
 
+exports[`Svelte > jsx > Javascript Test > getterState 1`] = `
+"<script>
+  export let foo;
+
+  function baz(i) {
+    return i + foo().length;
+  }
+  $: foo = () => {
+    return foo + \\"foo\\";
+  };
+
+  $: bar = () => {
+    return \\"bar\\";
+  };
+</script>
+
+<div>
+  <p>{foo()}</p>
+  <p>{bar()}</p>
+  <p>{baz(1)}</p>
+</div>"
+`;
+
 exports[`Svelte > jsx > Javascript Test > import types 1`] = `
 "<script>
   import RenderBlock from \\"./builder-render-block.raw\\";
diff --git a/packages/core/src/__tests__/__snapshots__/taro.test.ts.snap b/packages/core/src/__tests__/__snapshots__/taro.test.ts.snap
index 5e99f42392..49759f1d94 100644
--- a/packages/core/src/__tests__/__snapshots__/taro.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/taro.test.ts.snap
@@ -2034,6 +2034,36 @@ export default MyComponent;
 "
 `;
 
+exports[`Taro > jsx > Javascript Test > getterState 1`] = `
+"import * as React from \\"react\\";
+import { View, Text } from \\"@tarojs/components\\";
+
+function Button(props) {
+  function foo() {
+    return props.foo + \\"foo\\";
+  }
+
+  function bar() {
+    return \\"bar\\";
+  }
+
+  function baz(i) {
+    return i + foo().length;
+  }
+
+  return (
+    <View>
+      <View>{foo()}</View>
+      <View>{bar()}</View>
+      <View>{baz(1)}</View>
+    </View>
+  );
+}
+
+export default Button;
+"
+`;
+
 exports[`Taro > jsx > Javascript Test > import types 1`] = `
 "import * as React from \\"react\\";
 import RenderBlock from \\"./builder-render-block.raw\\";
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 f7c45c6a20..58de53ce9d 100644
--- a/packages/core/src/__tests__/__snapshots__/vue-composition.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/vue-composition.test.ts.snap
@@ -1856,6 +1856,33 @@ const refToUse = ref(
 </script>"
 `;
 
+exports[`Vue > jsx > Javascript Test > getterState 1`] = `
+"<template>
+  <div>
+    <p>{{ foo }}</p>
+    <p>{{ bar }}</p>
+    <p>{{ baz(1) }}</p>
+  </div>
+</template>
+
+<script setup>
+import { computed } from \\"vue\\";
+
+const props = defineProps([\\"foo\\"]);
+
+const foo = computed(() => {
+  return props.foo + \\"foo\\";
+});
+const bar = computed(() => {
+  return \\"bar\\";
+});
+
+function baz(i) {
+  return i + foo.length;
+}
+</script>"
+`;
+
 exports[`Vue > jsx > Javascript Test > import types 1`] = `
 "<template>
   <render-block
diff --git a/packages/core/src/__tests__/__snapshots__/vue.test.ts.snap b/packages/core/src/__tests__/__snapshots__/vue.test.ts.snap
index 286895260a..3ed5649597 100644
--- a/packages/core/src/__tests__/__snapshots__/vue.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/vue.test.ts.snap
@@ -2263,6 +2263,41 @@ export default defineComponent({
 </script>"
 `;
 
+exports[`Vue > jsx > Javascript Test > getterState 1`] = `
+"<template>
+  <div>
+    <p>{{ foo }}</p>
+    <p>{{ bar }}</p>
+    <p>{{ baz(1) }}</p>
+  </div>
+</template>
+
+<script>
+import { defineComponent } from \\"vue\\";
+
+export default defineComponent({
+  name: \\"button\\",
+
+  props: [\\"foo\\"],
+
+  computed: {
+    foo() {
+      return this.foo + \\"foo\\";
+    },
+    bar() {
+      return \\"bar\\";
+    },
+  },
+
+  methods: {
+    baz(i) {
+      return i + this.foo.length;
+    },
+  },
+});
+</script>"
+`;
+
 exports[`Vue > jsx > Javascript Test > import types 1`] = `
 "<template>
   <render-block
diff --git a/packages/core/src/__tests__/__snapshots__/webcomponent.test.ts.snap b/packages/core/src/__tests__/__snapshots__/webcomponent.test.ts.snap
index 51eeb911fd..2d76c99adf 100644
--- a/packages/core/src/__tests__/__snapshots__/webcomponent.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/webcomponent.test.ts.snap
@@ -8871,6 +8871,141 @@ customElements.define(\\"my-component\\", MyComponent);
 "
 `;
 
+exports[`webcomponent > jsx > Javascript Test > getterState 1`] = `
+"/**
+ * Usage:
+ *
+ *  <button></button>
+ *
+ */
+class Button extends HTMLElement {
+  get _root() {
+    return this.shadowRoot || this;
+  }
+
+  constructor() {
+    super();
+    const self = this;
+
+    this.state = {
+      get foo() {
+        return self.props.foo + \\"foo\\";
+      },
+      get bar() {
+        return \\"bar\\";
+      },
+      baz(i) {
+        return i + self.state.foo.length;
+      },
+    };
+    if (!this.props) {
+      this.props = {};
+    }
+
+    this.componentProps = [\\"foo\\"];
+
+    // 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>
+        <p>
+          <template data-el=\\"div-button-1\\"><!-- state.foo --></template>
+        </p>
+        <p>
+          <template data-el=\\"div-button-2\\"><!-- state.bar --></template>
+        </p>
+        <p>
+          <template data-el=\\"div-button-3\\"><!-- state.baz(1) --></template>
+        </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-button-1']\\").forEach((el) => {
+      this.renderTextNode(el, this.state.foo);
+    });
+
+    this._root.querySelectorAll(\\"[data-el='div-button-2']\\").forEach((el) => {
+      this.renderTextNode(el, this.state.bar);
+    });
+
+    this._root.querySelectorAll(\\"[data-el='div-button-3']\\").forEach((el) => {
+      this.renderTextNode(el, this.state.baz(1));
+    });
+  }
+
+  // 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(\\"button\\", Button);
+"
+`;
+
 exports[`webcomponent > jsx > Javascript Test > import types 1`] = `
 "import RenderBlock from \\"./builder-render-block.raw\\";
 

From e4fb6a3b0263ded93940ab323a964b1f00c44980 Mon Sep 17 00:00:00 2001
From: Sami Jaber <jabersami@gmail.com>
Date: Mon, 22 Apr 2024 16:54:39 -0300
Subject: [PATCH 03/10] snap

---
 .gitignore                                    |  2 ++
 .../__snapshots__/alpine.test.ts.snap         |  6 ++--
 .../__snapshots__/angular.import.test.ts.snap |  6 ++--
 .../__snapshots__/angular.mapper.test.ts.snap |  6 ++--
 .../__snapshots__/angular.test.ts.snap        | 12 +++----
 .../__tests__/__snapshots__/html.test.ts.snap |  8 ++---
 .../__snapshots__/liquid.test.ts.snap         |  2 +-
 .../__tests__/__snapshots__/lit.test.ts.snap  |  6 ++--
 .../__snapshots__/marko.test.ts.snap          |  6 ++--
 .../__snapshots__/parse-jsx.test.ts.snap      | 16 ++++-----
 .../__snapshots__/preact.test.ts.snap         |  6 ++--
 .../__tests__/__snapshots__/qwik.test.ts.snap | 35 ++++++++++++-------
 .../__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          | 12 +++----
 .../__snapshots__/stencil.test.ts.snap        |  6 ++--
 .../__snapshots__/svelte.test.ts.snap         |  6 ++--
 .../__tests__/__snapshots__/taro.test.ts.snap |  6 ++--
 .../vue-composition.test.ts.snap              |  6 ++--
 .../__tests__/__snapshots__/vue.test.ts.snap  |  6 ++--
 .../__snapshots__/webcomponent.test.ts.snap   |  8 ++---
 .../data/blocks/getter-state.raw.lite.tsx     |  6 ++--
 packages/core/src/__tests__/local.test.ts     | 33 +++++++++++++++++
 .../core/src/generators/qwik/helpers/state.ts | 14 +++++++-
 25 files changed, 145 insertions(+), 87 deletions(-)
 create mode 100644 packages/core/src/__tests__/local.test.ts

diff --git a/.gitignore b/.gitignore
index c9679be8f8..747030ae8c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -26,3 +26,5 @@ packages/core/mitosis-build
 
 **/test-results/
 **/playwright-report/
+
+packages/core/src/__tests__/__snapshots__/local.test.ts.snap
diff --git a/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap b/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap
index bed53287c3..b783369f49 100644
--- a/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap
@@ -1699,14 +1699,14 @@ exports[`Alpine.js > jsx > Javascript Test > expressionState 1`] = `
 
 exports[`Alpine.js > jsx > Javascript Test > getterState 1`] = `
 "<div x-data=\\"button()\\">
-  <p><span x-html=\\"foo\\"></span></p>
+  <p><span x-html=\\"foo2\\"></span></p>
   <p><span x-html=\\"bar\\"></span></p>
   <p><span x-html=\\"baz(1)\\"></span></p>
 </div>
 <script>
   document.addEventListener(\\"alpine:init\\", () => {
     Alpine.data(\\"button\\", () => ({
-      get foo() {
+      get foo2() {
         return props.foo + \\"foo\\";
       },
 
@@ -1715,7 +1715,7 @@ exports[`Alpine.js > jsx > Javascript Test > getterState 1`] = `
       },
 
       baz(i) {
-        return i + this.foo.length;
+        return i + this.foo2.length;
       },
     }));
   });
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 5760dd2483..e38389d2ca 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap
@@ -2683,7 +2683,7 @@ import { Component, Input } from \\"@angular/core\\";
   selector: \\"button, Button\\",
   template: \`
     <div>
-      <p>{{foo}}</p>
+      <p>{{foo2}}</p>
       <p>{{bar}}</p>
       <p>{{baz(1)}}</p>
     </div>
@@ -2692,14 +2692,14 @@ import { Component, Input } from \\"@angular/core\\";
 export default class Button {
   @Input() foo!: any;
 
-  get foo() {
+  get foo2() {
     return this.foo + \\"foo\\";
   }
   get bar() {
     return \\"bar\\";
   }
   baz(i) {
-    return i + this.foo.length;
+    return i + this.foo2.length;
   }
 }
 
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 e94b71d788..9d366ef8ac 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.mapper.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.mapper.test.ts.snap
@@ -2739,7 +2739,7 @@ import { Component, Input } from \\"@angular/core\\";
   selector: \\"button, Button\\",
   template: \`
     <div>
-      <p>{{foo}}</p>
+      <p>{{foo2}}</p>
       <p>{{bar}}</p>
       <p>{{baz(1)}}</p>
     </div>
@@ -2748,14 +2748,14 @@ import { Component, Input } from \\"@angular/core\\";
 export default class Button {
   @Input() foo!: any;
 
-  get foo() {
+  get foo2() {
     return this.foo + \\"foo\\";
   }
   get bar() {
     return \\"bar\\";
   }
   baz(i) {
-    return i + this.foo.length;
+    return i + this.foo2.length;
   }
 }
 
diff --git a/packages/core/src/__tests__/__snapshots__/angular.test.ts.snap b/packages/core/src/__tests__/__snapshots__/angular.test.ts.snap
index 229bb61173..82252dfbee 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.test.ts.snap
@@ -4958,7 +4958,7 @@ import { Component, Input } from \\"@angular/core\\";
   selector: \\"button, Button\\",
   template: \`
     <div>
-      <p>{{foo}}</p>
+      <p>{{foo2}}</p>
       <p>{{bar}}</p>
       <p>{{baz(1)}}</p>
     </div>
@@ -4967,14 +4967,14 @@ import { Component, Input } from \\"@angular/core\\";
 export default class Button {
   @Input() foo!: any;
 
-  get foo() {
+  get foo2() {
     return this.foo + \\"foo\\";
   }
   get bar() {
     return \\"bar\\";
   }
   baz(i) {
-    return i + this.foo.length;
+    return i + this.foo2.length;
   }
 }
 
@@ -4995,7 +4995,7 @@ import { CommonModule } from \\"@angular/common\\";
   selector: \\"button, Button\\",
   template: \`
     <div>
-      <p>{{foo}}</p>
+      <p>{{foo2}}</p>
       <p>{{bar}}</p>
       <p>{{baz(1)}}</p>
     </div>
@@ -5006,14 +5006,14 @@ import { CommonModule } from \\"@angular/common\\";
 export default class Button {
   @Input() foo!: any;
 
-  get foo() {
+  get foo2() {
     return this.foo + \\"foo\\";
   }
   get bar() {
     return \\"bar\\";
   }
   baz(i) {
-    return i + this.foo.length;
+    return i + this.foo2.length;
   }
 }
 "
diff --git a/packages/core/src/__tests__/__snapshots__/html.test.ts.snap b/packages/core/src/__tests__/__snapshots__/html.test.ts.snap
index f7e941d11e..21d32a8744 100644
--- a/packages/core/src/__tests__/__snapshots__/html.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/html.test.ts.snap
@@ -4217,7 +4217,7 @@ exports[`Html > jsx > Javascript Test > expressionState 1`] = `
 exports[`Html > jsx > Javascript Test > getterState 1`] = `
 "<div>
   <p>
-    <template data-el=\\"div-1\\"><!-- state.foo --></template>
+    <template data-el=\\"div-1\\"><!-- state.foo2 --></template>
   </p>
   <p>
     <template data-el=\\"div-2\\"><!-- state.bar --></template>
@@ -4229,14 +4229,14 @@ exports[`Html > jsx > Javascript Test > getterState 1`] = `
 <script>
   (() => {
     const state = {
-      get foo() {
+      get foo2() {
         return props.foo + \\"foo\\";
       },
       get bar() {
         return \\"bar\\";
       },
       baz(i) {
-        return i + state.foo.length;
+        return i + state.foo2.length;
       },
     };
     let props = {};
@@ -4260,7 +4260,7 @@ exports[`Html > jsx > Javascript Test > getterState 1`] = `
       pendingUpdate = true;
 
       document.querySelectorAll(\\"[data-el='div-1']\\").forEach((el) => {
-        renderTextNode(el, state.foo);
+        renderTextNode(el, state.foo2);
       });
 
       document.querySelectorAll(\\"[data-el='div-2']\\").forEach((el) => {
diff --git a/packages/core/src/__tests__/__snapshots__/liquid.test.ts.snap b/packages/core/src/__tests__/__snapshots__/liquid.test.ts.snap
index ae1a458f69..9f84570d85 100644
--- a/packages/core/src/__tests__/__snapshots__/liquid.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/liquid.test.ts.snap
@@ -543,7 +543,7 @@ exports[`Liquid > jsx > Javascript Test > expressionState 1`] = `
 
 exports[`Liquid > jsx > Javascript Test > getterState 1`] = `
 "<div>
-  <p>{{foo}}</p>
+  <p>{{foo2}}</p>
   <p>{{bar}}</p>
   <p></p>
 </div>
diff --git a/packages/core/src/__tests__/__snapshots__/lit.test.ts.snap b/packages/core/src/__tests__/__snapshots__/lit.test.ts.snap
index be62f9ff3e..41193658f0 100644
--- a/packages/core/src/__tests__/__snapshots__/lit.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/lit.test.ts.snap
@@ -2502,21 +2502,21 @@ export default class Button extends LitElement {
 
   @property() foo: any;
 
-  get foo() {
+  get foo2() {
     return this.foo + \\"foo\\";
   }
   get bar() {
     return \\"bar\\";
   }
   baz(i) {
-    return i + this.foo.length;
+    return i + this.foo2.length;
   }
 
   render() {
     return html\`
 
           <div>
-          <p>\${this.foo}</p>
+          <p>\${this.foo2}</p>
           <p>\${this.bar}</p>
           <p>\${this.baz(1)}</p>
         </div>
diff --git a/packages/core/src/__tests__/__snapshots__/marko.test.ts.snap b/packages/core/src/__tests__/__snapshots__/marko.test.ts.snap
index 66200786f8..913e660fdd 100644
--- a/packages/core/src/__tests__/__snapshots__/marko.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/marko.test.ts.snap
@@ -1599,19 +1599,19 @@ exports[`Marko > jsx > Javascript Test > expressionState 1`] = `
 
 exports[`Marko > jsx > Javascript Test > getterState 1`] = `
 "class {
-  get foo() {
+  get foo2() {
     return this.input.foo + \\"foo\\";
   }
   get bar() {
     return \\"bar\\";
   }
   baz(i) {
-    return i + this.foo.length;
+    return i + this.foo2.length;
   }
 }
 
 <div>
-  <p>\${component.foo}</p>
+  <p>\${component.foo2}</p>
   <p>\${component.bar}</p>
   <p>\${component.baz(1)}</p>
 </div>"
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 f9cc85e2bd..bc41ec003c 100644
--- a/packages/core/src/__tests__/__snapshots__/parse-jsx.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/parse-jsx.test.ts.snap
@@ -6255,7 +6255,7 @@ exports[`Parse JSX > Javascript > getterState 1`] = `
               "@type": "@builder.io/mitosis/node",
               "bindings": {
                 "_text": {
-                  "code": "state.foo",
+                  "code": "state.foo2",
                   "type": "single",
                 },
               },
@@ -6349,12 +6349,12 @@ exports[`Parse JSX > Javascript > getterState 1`] = `
     },
     "baz": {
       "code": "baz(i) {
-  return i + state.foo.length;
+  return i + state.foo2.length;
 }",
       "type": "method",
     },
-    "foo": {
-      "code": "get foo() {
+    "foo2": {
+      "code": "get foo2() {
   return props.foo + 'foo';
 }",
       "type": "getter",
@@ -16476,7 +16476,7 @@ exports[`Parse JSX > Typescript > getterState 1`] = `
               "@type": "@builder.io/mitosis/node",
               "bindings": {
                 "_text": {
-                  "code": "state.foo",
+                  "code": "state.foo2",
                   "type": "single",
                 },
               },
@@ -16571,12 +16571,12 @@ exports[`Parse JSX > Typescript > getterState 1`] = `
     },
     "baz": {
       "code": "baz(i: number) {
-  return i + state.foo.length;
+  return i + state.foo2.length;
 }",
       "type": "method",
     },
-    "foo": {
-      "code": "get foo() {
+    "foo2": {
+      "code": "get foo2() {
   return props.foo + 'foo';
 }",
       "type": "getter",
diff --git a/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap b/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap
index 20917caf7a..4149eadf3e 100644
--- a/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap
@@ -2038,7 +2038,7 @@ exports[`Preact > jsx > Javascript Test > getterState 1`] = `
 import { h, Fragment } from \\"preact\\";
 
 function Button(props) {
-  function foo() {
+  function foo2() {
     return props.foo + \\"foo\\";
   }
 
@@ -2047,12 +2047,12 @@ function Button(props) {
   }
 
   function baz(i) {
-    return i + foo().length;
+    return i + foo2().length;
   }
 
   return (
     <div>
-      <p>{foo()}</p>
+      <p>{foo2()}</p>
       <p>{bar()}</p>
       <p>{baz(1)}</p>
     </div>
diff --git a/packages/core/src/__tests__/__snapshots__/qwik.test.ts.snap b/packages/core/src/__tests__/__snapshots__/qwik.test.ts.snap
index f4de140767..2fa5009803 100644
--- a/packages/core/src/__tests__/__snapshots__/qwik.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/qwik.test.ts.snap
@@ -2340,7 +2340,7 @@ import {
   useStore,
 } from \\"@builder.io/qwik\\";
 
-export const show = function show(props, state) {
+export const show = function show(props, state, cls) {
   props.slotContent ? 1 : \\"\\";
 };
 export const ContentSlotJsxCode = component$((props) => {
@@ -2356,7 +2356,7 @@ export const ContentSlotJsxCode = component$((props) => {
           name={props.slotContent ? \\"name1\\" : \\"name2\\"}
           title={props.slotContent ? \\"title1\\" : \\"title2\\"}
           {...props.attributes}
-          onClick$={$((event) => show(props, state))}
+          onClick$={$((event) => show(props, state, cls))}
           class={cls.value}
         >
           {state.showContent && props.slotContent ? (
@@ -2553,7 +2553,13 @@ import {
   set,
 } from \\"@fake\\";
 
-export const onSubmit = function onSubmit(props, state, formRef, event) {
+export const onSubmit = function onSubmit(
+  props,
+  state,
+  submissionState,
+  formRef,
+  event
+) {
   const sendWithJs = props.sendWithJs || props.sendSubmissionsTo === \\"email\\";
 
   if (props.sendSubmissionsTo === \\"zapier\\") {
@@ -2788,7 +2794,9 @@ export const FormComponent = component$((props) => {
       })()}
       method={props.method}
       name={props.name}
-      onSubmit$={$((event) => onSubmit(props, state, formRef, event))}
+      onSubmit$={$((event) =>
+        onSubmit(props, state, submissionState, formRef, event)
+      )}
       {...props.attributes}
     >
       {props.builderBlock && props.builderBlock.children
@@ -3817,11 +3825,11 @@ export default MyComponent;
 exports[`qwik > jsx > Javascript Test > getterState 1`] = `
 "import { Fragment, component$, h, useComputed$ } from \\"@builder.io/qwik\\";
 
-export const baz = function baz(props, state, i) {
-  return i + foo.value.length;
+export const baz = function baz(props, state, foo2, bar, i) {
+  return i + foo2.value.length;
 };
 export const Button = component$((props) => {
-  const foo = useComputed$(() => {
+  const foo2 = useComputed$(() => {
     return props.foo + \\"foo\\";
   });
   const bar = useComputed$(() => {
@@ -3831,9 +3839,9 @@ export const Button = component$((props) => {
 
   return (
     <div>
-      <p>{foo.value}</p>
+      <p>{foo2.value}</p>
       <p>{bar.value}</p>
-      <p>{baz(props, state, 1)}</p>
+      <p>{baz(props, state, foo2, bar, 1)}</p>
     </div>
   );
 });
@@ -5651,7 +5659,7 @@ import {
 type Props = {
   [key: string]: string | JSX.Element;
 };
-export const show = function show(props, state) {
+export const show = function show(props, state, cls) {
   props.slotContent ? 1 : \\"\\";
 };
 export const ContentSlotJsxCode = component$((props: Props) => {
@@ -5667,7 +5675,7 @@ export const ContentSlotJsxCode = component$((props: Props) => {
           name={props.slotContent ? \\"name1\\" : \\"name2\\"}
           title={props.slotContent ? \\"title1\\" : \\"title2\\"}
           {...props.attributes}
-          onClick$={$((event) => show(props, state))}
+          onClick$={$((event) => show(props, state, cls))}
           class={cls.value}
         >
           {state.showContent && props.slotContent ? (
@@ -5898,6 +5906,7 @@ export type FormState = \\"unsubmitted\\" | \\"sending\\" | \\"success\\" | \\"e
 export const onSubmit = function onSubmit(
   props,
   state,
+  submissionState,
   formRef,
   event: Event & {
     currentTarget: HTMLFormElement;
@@ -6140,7 +6149,9 @@ export const FormComponent = component$((props: FormProps) => {
       })()}
       method={props.method}
       name={props.name}
-      onSubmit$={$((event) => onSubmit(props, state, formRef, event))}
+      onSubmit$={$((event) =>
+        onSubmit(props, state, submissionState, formRef, event)
+      )}
       {...props.attributes}
     >
       {props.builderBlock && props.builderBlock.children
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 64291f4d68..da22cbcb4a 100644
--- a/packages/core/src/__tests__/__snapshots__/react-native.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/react-native.test.ts.snap
@@ -2432,7 +2432,7 @@ import {
 } from \\"react-native\\";
 
 function Button(props) {
-  function foo() {
+  function foo2() {
     return props.foo + \\"foo\\";
   }
 
@@ -2441,13 +2441,13 @@ function Button(props) {
   }
 
   function baz(i) {
-    return i + foo().length;
+    return i + foo2().length;
   }
 
   return (
     <View>
       <View>
-        <Text>{foo()}</Text>
+        <Text>{foo2()}</Text>
       </View>
       <View>
         <Text>{bar()}</Text>
diff --git a/packages/core/src/__tests__/__snapshots__/react.test.ts.snap b/packages/core/src/__tests__/__snapshots__/react.test.ts.snap
index 4e35dc0396..c0f9776dad 100644
--- a/packages/core/src/__tests__/__snapshots__/react.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/react.test.ts.snap
@@ -2020,7 +2020,7 @@ exports[`React > jsx > Javascript Test > getterState 1`] = `
 "import * as React from \\"react\\";
 
 function Button(props) {
-  function foo() {
+  function foo2() {
     return props.foo + \\"foo\\";
   }
 
@@ -2029,12 +2029,12 @@ function Button(props) {
   }
 
   function baz(i) {
-    return i + foo().length;
+    return i + foo2().length;
   }
 
   return (
     <div>
-      <p>{foo()}</p>
+      <p>{foo2()}</p>
       <p>{bar()}</p>
       <p>{baz(1)}</p>
     </div>
diff --git a/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap b/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap
index 397416c06e..ac2ca5d9b8 100644
--- a/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap
@@ -2017,19 +2017,19 @@ exports[`RSC > jsx > Javascript Test > getterState 1`] = `
 "import * as React from \\"react\\";
 
 function Button(props) {
-  const foo = function foo() {
+  const foo2 = function foo2() {
     return props.foo + \\"foo\\";
   };
   const bar = function bar() {
     return \\"bar\\";
   };
   const baz = function baz(i) {
-    return i + foo().length;
+    return i + foo2().length;
   };
 
   return (
     <div>
-      <p>{foo()}</p>
+      <p>{foo2()}</p>
       <p>{bar()}</p>
       <p>{baz(1)}</p>
     </div>
diff --git a/packages/core/src/__tests__/__snapshots__/solid.test.ts.snap b/packages/core/src/__tests__/__snapshots__/solid.test.ts.snap
index 96a7b291b3..375abdece9 100644
--- a/packages/core/src/__tests__/__snapshots__/solid.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/solid.test.ts.snap
@@ -4126,7 +4126,7 @@ exports[`Solid > jsx > Javascript Test > getterState 1`] = `
 "import { createSignal, createMemo } from \\"solid-js\\";
 
 function Button(props) {
-  const foo = createMemo(() => {
+  const foo2 = createMemo(() => {
     return props.foo + \\"foo\\";
   });
 
@@ -4135,12 +4135,12 @@ function Button(props) {
   });
 
   function baz(i) {
-    return i + foo().length;
+    return i + foo2().length;
   }
 
   return (
     <div>
-      <p>{foo()}</p>
+      <p>{foo2()}</p>
       <p>{bar()}</p>
       <p>{baz(1)}</p>
     </div>
@@ -4155,7 +4155,7 @@ exports[`Solid > jsx > Javascript Test > getterState 2`] = `
 "import { createSignal, createMemo } from \\"solid-js\\";
 
 function Button(props) {
-  const foo = createMemo(() => {
+  const foo2 = createMemo(() => {
     return props.foo + \\"foo\\";
   });
 
@@ -4164,13 +4164,13 @@ function Button(props) {
   });
 
   function baz(i) {
-    return i + foo().length;
+    return i + foo2().length;
   }
 
   return (
     <>
       <div>
-        <p>{foo()}</p>
+        <p>{foo2()}</p>
         <p>{bar()}</p>
         <p>{baz(1)}</p>
       </div>
diff --git a/packages/core/src/__tests__/__snapshots__/stencil.test.ts.snap b/packages/core/src/__tests__/__snapshots__/stencil.test.ts.snap
index 883ea17514..2ae31999c6 100644
--- a/packages/core/src/__tests__/__snapshots__/stencil.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/stencil.test.ts.snap
@@ -1863,20 +1863,20 @@ exports[`Stencil > jsx > Javascript Test > getterState 1`] = `
 export default class Button {
   @Prop() foo: any;
 
-  get foo() {
+  get foo2() {
     return this.foo + \\"foo\\";
   }
   get bar() {
     return \\"bar\\";
   }
   baz(i) {
-    return i + this.foo.length;
+    return i + this.foo2.length;
   }
 
   render() {
     return (
       <div>
-        <p>{this.foo}</p>
+        <p>{this.foo2}</p>
         <p>{this.bar}</p>
         <p>{this.baz(1)}</p>
       </div>
diff --git a/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap b/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap
index f62590ae2c..af387e5467 100644
--- a/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap
@@ -1763,9 +1763,9 @@ exports[`Svelte > jsx > Javascript Test > getterState 1`] = `
   export let foo;
 
   function baz(i) {
-    return i + foo().length;
+    return i + foo2().length;
   }
-  $: foo = () => {
+  $: foo2 = () => {
     return foo + \\"foo\\";
   };
 
@@ -1775,7 +1775,7 @@ exports[`Svelte > jsx > Javascript Test > getterState 1`] = `
 </script>
 
 <div>
-  <p>{foo()}</p>
+  <p>{foo2()}</p>
   <p>{bar()}</p>
   <p>{baz(1)}</p>
 </div>"
diff --git a/packages/core/src/__tests__/__snapshots__/taro.test.ts.snap b/packages/core/src/__tests__/__snapshots__/taro.test.ts.snap
index 49759f1d94..34e1230cb4 100644
--- a/packages/core/src/__tests__/__snapshots__/taro.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/taro.test.ts.snap
@@ -2039,7 +2039,7 @@ exports[`Taro > jsx > Javascript Test > getterState 1`] = `
 import { View, Text } from \\"@tarojs/components\\";
 
 function Button(props) {
-  function foo() {
+  function foo2() {
     return props.foo + \\"foo\\";
   }
 
@@ -2048,12 +2048,12 @@ function Button(props) {
   }
 
   function baz(i) {
-    return i + foo().length;
+    return i + foo2().length;
   }
 
   return (
     <View>
-      <View>{foo()}</View>
+      <View>{foo2()}</View>
       <View>{bar()}</View>
       <View>{baz(1)}</View>
     </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 58de53ce9d..b37a71562e 100644
--- a/packages/core/src/__tests__/__snapshots__/vue-composition.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/vue-composition.test.ts.snap
@@ -1859,7 +1859,7 @@ const refToUse = ref(
 exports[`Vue > jsx > Javascript Test > getterState 1`] = `
 "<template>
   <div>
-    <p>{{ foo }}</p>
+    <p>{{ foo2 }}</p>
     <p>{{ bar }}</p>
     <p>{{ baz(1) }}</p>
   </div>
@@ -1870,7 +1870,7 @@ import { computed } from \\"vue\\";
 
 const props = defineProps([\\"foo\\"]);
 
-const foo = computed(() => {
+const foo2 = computed(() => {
   return props.foo + \\"foo\\";
 });
 const bar = computed(() => {
@@ -1878,7 +1878,7 @@ const bar = computed(() => {
 });
 
 function baz(i) {
-  return i + foo.length;
+  return i + foo2.length;
 }
 </script>"
 `;
diff --git a/packages/core/src/__tests__/__snapshots__/vue.test.ts.snap b/packages/core/src/__tests__/__snapshots__/vue.test.ts.snap
index 3ed5649597..f2ad3d542d 100644
--- a/packages/core/src/__tests__/__snapshots__/vue.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/vue.test.ts.snap
@@ -2266,7 +2266,7 @@ export default defineComponent({
 exports[`Vue > jsx > Javascript Test > getterState 1`] = `
 "<template>
   <div>
-    <p>{{ foo }}</p>
+    <p>{{ foo2 }}</p>
     <p>{{ bar }}</p>
     <p>{{ baz(1) }}</p>
   </div>
@@ -2281,7 +2281,7 @@ export default defineComponent({
   props: [\\"foo\\"],
 
   computed: {
-    foo() {
+    foo2() {
       return this.foo + \\"foo\\";
     },
     bar() {
@@ -2291,7 +2291,7 @@ export default defineComponent({
 
   methods: {
     baz(i) {
-      return i + this.foo.length;
+      return i + this.foo2.length;
     },
   },
 });
diff --git a/packages/core/src/__tests__/__snapshots__/webcomponent.test.ts.snap b/packages/core/src/__tests__/__snapshots__/webcomponent.test.ts.snap
index 2d76c99adf..b90afc4396 100644
--- a/packages/core/src/__tests__/__snapshots__/webcomponent.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/webcomponent.test.ts.snap
@@ -8888,14 +8888,14 @@ class Button extends HTMLElement {
     const self = this;
 
     this.state = {
-      get foo() {
+      get foo2() {
         return self.props.foo + \\"foo\\";
       },
       get bar() {
         return \\"bar\\";
       },
       baz(i) {
-        return i + self.state.foo.length;
+        return i + self.state.foo2.length;
       },
     };
     if (!this.props) {
@@ -8937,7 +8937,7 @@ class Button extends HTMLElement {
     this._root.innerHTML = \`
       <div>
         <p>
-          <template data-el=\\"div-button-1\\"><!-- state.foo --></template>
+          <template data-el=\\"div-button-1\\"><!-- state.foo2 --></template>
         </p>
         <p>
           <template data-el=\\"div-button-2\\"><!-- state.bar --></template>
@@ -8976,7 +8976,7 @@ class Button extends HTMLElement {
 
   updateBindings() {
     this._root.querySelectorAll(\\"[data-el='div-button-1']\\").forEach((el) => {
-      this.renderTextNode(el, this.state.foo);
+      this.renderTextNode(el, this.state.foo2);
     });
 
     this._root.querySelectorAll(\\"[data-el='div-button-2']\\").forEach((el) => {
diff --git a/packages/core/src/__tests__/data/blocks/getter-state.raw.lite.tsx b/packages/core/src/__tests__/data/blocks/getter-state.raw.lite.tsx
index a1bd3a907e..9c971976f8 100644
--- a/packages/core/src/__tests__/data/blocks/getter-state.raw.lite.tsx
+++ b/packages/core/src/__tests__/data/blocks/getter-state.raw.lite.tsx
@@ -2,7 +2,7 @@ import { useStore } from '@builder.io/mitosis';
 
 export default function Button(props: { foo: string }) {
   const state = useStore({
-    get foo() {
+    get foo2() {
       return props.foo + 'foo';
     },
 
@@ -11,12 +11,12 @@ export default function Button(props: { foo: string }) {
     },
 
     baz(i: number) {
-      return i + state.foo.length;
+      return i + state.foo2.length;
     },
   });
   return (
     <div>
-      <p>{state.foo}</p>
+      <p>{state.foo2}</p>
       <p>{state.bar}</p>
       <p>{state.baz(1)}</p>
     </div>
diff --git a/packages/core/src/__tests__/local.test.ts b/packages/core/src/__tests__/local.test.ts
new file mode 100644
index 0000000000..53786fb5b6
--- /dev/null
+++ b/packages/core/src/__tests__/local.test.ts
@@ -0,0 +1,33 @@
+import { describe, expect, test } from 'vitest';
+import { componentToQwik, parseJsx } from '..';
+
+/**
+ * this test is for local development only, to conveniently iterate on one file/one generator.
+ */
+
+// ignore this in CI
+if (process.env.CI) {
+  test.skip('file', () => {});
+}
+
+const getRawFile = async (filePath: string) => {
+  const code = await import(`${filePath}?raw`).then((x) => x.default as string);
+  return { code, filePath: ['src', '__tests__', filePath].join('/') };
+};
+
+const file = getRawFile('./data/blocks/getter-state.raw.lite.tsx');
+
+describe('LOCAL', () => {
+  test('file', async () => {
+    const { code, filePath } = await file;
+    const mitosisJSON = await parseJsx(code);
+
+    const output = componentToQwik({})({
+      component: mitosisJSON,
+      path: filePath,
+    });
+
+    expect(mitosisJSON).toMatchSnapshot();
+    expect(output).matchSnapshot();
+  });
+});
diff --git a/packages/core/src/generators/qwik/helpers/state.ts b/packages/core/src/generators/qwik/helpers/state.ts
index f2fdc509d7..f1e25433e1 100644
--- a/packages/core/src/generators/qwik/helpers/state.ts
+++ b/packages/core/src/generators/qwik/helpers/state.ts
@@ -82,6 +82,7 @@ function emitStateMethods(
           // Erase type information
           code = convertTypeScriptToJS(code);
         }
+        console.log('WRITING FUNCTION', { functionName, code, initial: stateValue.code });
         file.exportConst(functionName, 'function ' + code, true);
         continue;
 
@@ -111,7 +112,18 @@ const checkIsObjectWithCodeBlock = (obj: any): obj is { code: string } => {
 };
 
 export function getLexicalScopeVars(component: MitosisComponent) {
-  return ['props', 'state', ...Object.keys(component.refs), ...Object.keys(component.context.get)];
+  const newLocal = [
+    'props',
+    'state',
+
+    // all `useComputed` values
+    ...Object.keys(component.state).filter((k) => component.state[k]!.type === 'getter'),
+
+    ...Object.keys(component.refs),
+    ...Object.keys(component.context.get),
+  ];
+
+  return newLocal;
 }
 
 function rewriteCodeExpr(

From f28fba33f6017abf4b858f5d2619b9a56f3b89fe Mon Sep 17 00:00:00 2001
From: Sami Jaber <jabersami@gmail.com>
Date: Mon, 22 Apr 2024 16:55:15 -0300
Subject: [PATCH 04/10] f

---
 .changeset/weak-fishes-behave.md | 6 ++++++
 1 file changed, 6 insertions(+)
 create mode 100644 .changeset/weak-fishes-behave.md

diff --git a/.changeset/weak-fishes-behave.md b/.changeset/weak-fishes-behave.md
new file mode 100644
index 0000000000..d2dbdd7382
--- /dev/null
+++ b/.changeset/weak-fishes-behave.md
@@ -0,0 +1,6 @@
+---
+'@builder.io/mitosis': patch
+'@builder.io/mitosis-cli': patch
+---
+
+Fix: Qwik methods using computed variables

From c10da7967e4ee7d078a4c968e5d88fbffd1c2729 Mon Sep 17 00:00:00 2001
From: Sami Jaber <jabersami@gmail.com>
Date: Mon, 22 Apr 2024 16:57:41 -0300
Subject: [PATCH 05/10] f

---
 packages/core/src/generators/qwik/helpers/state.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/core/src/generators/qwik/helpers/state.ts b/packages/core/src/generators/qwik/helpers/state.ts
index f1e25433e1..57464b8804 100644
--- a/packages/core/src/generators/qwik/helpers/state.ts
+++ b/packages/core/src/generators/qwik/helpers/state.ts
@@ -82,7 +82,6 @@ function emitStateMethods(
           // Erase type information
           code = convertTypeScriptToJS(code);
         }
-        console.log('WRITING FUNCTION', { functionName, code, initial: stateValue.code });
         file.exportConst(functionName, 'function ' + code, true);
         continue;
 

From a78dff57a9188375176661940fbd696245e212d3 Mon Sep 17 00:00:00 2001
From: Sami Jaber <jabersami@gmail.com>
Date: Mon, 22 Apr 2024 17:11:30 -0300
Subject: [PATCH 06/10] f

---
 .../blocks/{getter-state.raw.lite.tsx => getter-state.raw.tsx}  | 0
 packages/core/src/__tests__/local.test.ts                       | 2 +-
 packages/core/src/__tests__/test-generator.ts                   | 2 +-
 3 files changed, 2 insertions(+), 2 deletions(-)
 rename packages/core/src/__tests__/data/blocks/{getter-state.raw.lite.tsx => getter-state.raw.tsx} (100%)

diff --git a/packages/core/src/__tests__/data/blocks/getter-state.raw.lite.tsx b/packages/core/src/__tests__/data/blocks/getter-state.raw.tsx
similarity index 100%
rename from packages/core/src/__tests__/data/blocks/getter-state.raw.lite.tsx
rename to packages/core/src/__tests__/data/blocks/getter-state.raw.tsx
diff --git a/packages/core/src/__tests__/local.test.ts b/packages/core/src/__tests__/local.test.ts
index 53786fb5b6..d92b10496c 100644
--- a/packages/core/src/__tests__/local.test.ts
+++ b/packages/core/src/__tests__/local.test.ts
@@ -15,7 +15,7 @@ const getRawFile = async (filePath: string) => {
   return { code, filePath: ['src', '__tests__', filePath].join('/') };
 };
 
-const file = getRawFile('./data/blocks/getter-state.raw.lite.tsx');
+const file = getRawFile('./data/blocks/getter-state.raw.tsx');
 
 describe('LOCAL', () => {
   test('file', async () => {
diff --git a/packages/core/src/__tests__/test-generator.ts b/packages/core/src/__tests__/test-generator.ts
index dd4f53e877..272248a512 100644
--- a/packages/core/src/__tests__/test-generator.ts
+++ b/packages/core/src/__tests__/test-generator.ts
@@ -10,7 +10,7 @@ const getRawFile = async (filePath: string) => {
 
 type RawFile = ReturnType<typeof getRawFile>;
 
-const getterState = getRawFile('./data/blocks/getter-state.raw.lite.tsx');
+const getterState = getRawFile('./data/blocks/getter-state.raw.tsx');
 const basicForShow = getRawFile('./data/basic-for-show.raw.tsx');
 const basicBooleanAttribute = getRawFile('./data/basic-boolean-attribute.raw.tsx');
 const basicOnMountUpdate = getRawFile('./data/basic-onMount-update.raw.tsx');

From f8d73cb5b4c0141e9792d81af16e5a2a4f914826 Mon Sep 17 00:00:00 2001
From: Sami Jaber <jabersami@gmail.com>
Date: Mon, 22 Apr 2024 17:33:07 -0300
Subject: [PATCH 07/10] f

---
 .../__snapshots__/alpine.test.ts.snap         |  26 ++++
 .../__snapshots__/angular.import.test.ts.snap |  43 ++++++
 .../__snapshots__/angular.mapper.test.ts.snap |  44 ++++++
 .../__snapshots__/angular.test.ts.snap        |  79 ++++++++++
 .../__tests__/__snapshots__/html.test.ts.snap |  82 +++++++++++
 .../__snapshots__/liquid.test.ts.snap         |   9 ++
 .../__tests__/__snapshots__/lit.test.ts.snap  |  41 ++++++
 .../__snapshots__/marko.test.ts.snap          |  20 +++
 .../__snapshots__/preact.test.ts.snap         |  34 +++++
 .../__tests__/__snapshots__/qwik.test.ts.snap |  31 ++++
 .../__snapshots__/react-native.test.ts.snap   |  48 ++++++
 .../__snapshots__/react.test.ts.snap          |  33 +++++
 .../__tests__/__snapshots__/rsc.test.ts.snap  |  31 ++++
 .../__snapshots__/solid.test.ts.snap          |  68 +++++++++
 .../__snapshots__/stencil.test.ts.snap        |  32 ++++
 .../__snapshots__/svelte.test.ts.snap         |  29 ++++
 .../__tests__/__snapshots__/taro.test.ts.snap |  35 +++++
 .../vue-composition.test.ts.snap              |  31 ++++
 .../__tests__/__snapshots__/vue.test.ts.snap  |  39 +++++
 .../__snapshots__/webcomponent.test.ts.snap   | 139 ++++++++++++++++++
 20 files changed, 894 insertions(+)

diff --git a/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap b/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap
index b783369f49..13d76c4a25 100644
--- a/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap
@@ -4381,6 +4381,32 @@ exports[`Alpine.js > jsx > Typescript Test > expressionState 1`] = `
 "
 `;
 
+exports[`Alpine.js > jsx > Typescript Test > getterState 1`] = `
+"<div x-data=\\"button()\\">
+  <p><span x-html=\\"foo2\\"></span></p>
+  <p><span x-html=\\"bar\\"></span></p>
+  <p><span x-html=\\"baz(1)\\"></span></p>
+</div>
+<script>
+  document.addEventListener(\\"alpine:init\\", () => {
+    Alpine.data(\\"button\\", () => ({
+      get foo2() {
+        return props.foo + \\"foo\\";
+      },
+
+      get bar() {
+        return \\"bar\\";
+      },
+
+      baz(i: number) {
+        return i + this.foo2.length;
+      },
+    }));
+  });
+</script>
+"
+`;
+
 exports[`Alpine.js > jsx > Typescript Test > import types 1`] = `
 "<RenderBlock
   x-data=\\"renderContent()\\"
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 e38389d2ca..a53eb61b74 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap
@@ -7360,6 +7360,49 @@ export class MyComponentModule {}
 "
 `;
 
+exports[`Angular with Preserve Imports and File Extensions > jsx > Typescript Test > getterState 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component, Input } from \\"@angular/core\\";
+
+export interface ButtonProps {
+  foo: string;
+}
+
+@Component({
+  selector: \\"button, Button\\",
+  template: \`
+    <div>
+      <p>{{foo2}}</p>
+      <p>{{bar}}</p>
+      <p>{{baz(1)}}</p>
+    </div>
+  \`,
+})
+export default class Button {
+  @Input() foo!: ButtonProps[\\"foo\\"];
+
+  get foo2() {
+    return this.foo + \\"foo\\";
+  }
+  get bar() {
+    return \\"bar\\";
+  }
+  baz(i: number) {
+    return i + this.foo2.length;
+  }
+}
+
+@NgModule({
+  declarations: [Button],
+  imports: [CommonModule],
+  exports: [Button],
+})
+export class ButtonModule {}
+"
+`;
+
 exports[`Angular with Preserve Imports and File Extensions > jsx > Typescript Test > import types 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 9d366ef8ac..1c38b11e33 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.mapper.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.mapper.test.ts.snap
@@ -7518,6 +7518,50 @@ export class MyComponentModule {}
 "
 `;
 
+exports[`Angular with Import Mapper Tests > jsx > Typescript Test > getterState 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component, Input } from \\"@angular/core\\";
+
+export interface ButtonProps {
+  foo: string;
+}
+
+@Component({
+  selector: \\"button, Button\\",
+  template: \`
+    <div>
+      <p>{{foo2}}</p>
+      <p>{{bar}}</p>
+      <p>{{baz(1)}}</p>
+    </div>
+  \`,
+})
+export default class Button {
+  @Input() foo!: ButtonProps[\\"foo\\"];
+
+  get foo2() {
+    return this.foo + \\"foo\\";
+  }
+  get bar() {
+    return \\"bar\\";
+  }
+  baz(i: number) {
+    return i + this.foo2.length;
+  }
+}
+
+@NgModule({
+  declarations: [Button],
+  imports: [CommonModule],
+  exports: [Button],
+  bootstrap: [SomeOtherComponent],
+})
+export class ButtonModule {}
+"
+`;
+
 exports[`Angular with Import Mapper Tests > jsx > Typescript Test > import types 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 82252dfbee..9c8267e17a 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.test.ts.snap
@@ -13589,6 +13589,85 @@ export default class MyComponent {
 "
 `;
 
+exports[`Angular > jsx > Typescript Test > getterState 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component, Input } from \\"@angular/core\\";
+
+export interface ButtonProps {
+  foo: string;
+}
+
+@Component({
+  selector: \\"button, Button\\",
+  template: \`
+    <div>
+      <p>{{foo2}}</p>
+      <p>{{bar}}</p>
+      <p>{{baz(1)}}</p>
+    </div>
+  \`,
+})
+export default class Button {
+  @Input() foo!: ButtonProps[\\"foo\\"];
+
+  get foo2() {
+    return this.foo + \\"foo\\";
+  }
+  get bar() {
+    return \\"bar\\";
+  }
+  baz(i: number) {
+    return i + this.foo2.length;
+  }
+}
+
+@NgModule({
+  declarations: [Button],
+  imports: [CommonModule],
+  exports: [Button],
+})
+export class ButtonModule {}
+"
+`;
+
+exports[`Angular > jsx > Typescript Test > getterState 2`] = `
+"import { Component, Input } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+export interface ButtonProps {
+  foo: string;
+}
+
+@Component({
+  selector: \\"button, Button\\",
+  template: \`
+    <div>
+      <p>{{foo2}}</p>
+      <p>{{bar}}</p>
+      <p>{{baz(1)}}</p>
+    </div>
+  \`,
+  standalone: true,
+  imports: [CommonModule],
+})
+export default class Button {
+  @Input() foo!: ButtonProps[\\"foo\\"];
+
+  get foo2() {
+    return this.foo + \\"foo\\";
+  }
+  get bar() {
+    return \\"bar\\";
+  }
+  baz(i: number) {
+    return i + this.foo2.length;
+  }
+}
+"
+`;
+
 exports[`Angular > jsx > Typescript Test > import types 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 21d32a8744..5ae12083d9 100644
--- a/packages/core/src/__tests__/__snapshots__/html.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/html.test.ts.snap
@@ -10570,6 +10570,88 @@ exports[`Html > jsx > Typescript Test > expressionState 1`] = `
 "
 `;
 
+exports[`Html > jsx > Typescript Test > getterState 1`] = `
+"<div>
+  <p>
+    <template data-el=\\"div-1\\"><!-- state.foo2 --></template>
+  </p>
+  <p>
+    <template data-el=\\"div-2\\"><!-- state.bar --></template>
+  </p>
+  <p>
+    <template data-el=\\"div-3\\"><!-- state.baz(1) --></template>
+  </p>
+</div>
+<script>
+  (() => {
+    const state = {
+      get foo2() {
+        return props.foo + \\"foo\\";
+      },
+      get bar() {
+        return \\"bar\\";
+      },
+      baz(i: number) {
+        return i + state.foo2.length;
+      },
+    };
+    let props = {};
+    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) => {
+        renderTextNode(el, state.foo2);
+      });
+
+      document.querySelectorAll(\\"[data-el='div-2']\\").forEach((el) => {
+        renderTextNode(el, state.bar);
+      });
+
+      document.querySelectorAll(\\"[data-el='div-3']\\").forEach((el) => {
+        renderTextNode(el, state.baz(1));
+      });
+
+      destroyAnyNodes();
+
+      pendingUpdate = false;
+    }
+
+    // Update with initial state on first load
+    update();
+
+    // Helper text DOM nodes
+    function renderTextNode(el, text) {
+      const textNode = document.createTextNode(text);
+      if (el?.scope) {
+        textNode.scope = el.scope;
+      }
+      if (el?.context) {
+        child.context = el.context;
+      }
+      el.after(textNode);
+      nodesToDestroy.push(el.nextSibling);
+    }
+  })();
+</script>
+"
+`;
+
 exports[`Html > jsx > Typescript Test > import types 1`] = `
 "<RenderBlock data-el=\\"render-block\\"></RenderBlock>
 "
diff --git a/packages/core/src/__tests__/__snapshots__/liquid.test.ts.snap b/packages/core/src/__tests__/__snapshots__/liquid.test.ts.snap
index 9f84570d85..b56de37556 100644
--- a/packages/core/src/__tests__/__snapshots__/liquid.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/liquid.test.ts.snap
@@ -1404,6 +1404,15 @@ exports[`Liquid > jsx > Typescript Test > expressionState 1`] = `
 "
 `;
 
+exports[`Liquid > jsx > Typescript Test > getterState 1`] = `
+"<div>
+  <p>{{foo2}}</p>
+  <p>{{bar}}</p>
+  <p></p>
+</div>
+"
+`;
+
 exports[`Liquid > jsx > Typescript Test > import types 1`] = `
 "<RenderBlock></RenderBlock>
 "
diff --git a/packages/core/src/__tests__/__snapshots__/lit.test.ts.snap b/packages/core/src/__tests__/__snapshots__/lit.test.ts.snap
index 41193658f0..06518ac316 100644
--- a/packages/core/src/__tests__/__snapshots__/lit.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/lit.test.ts.snap
@@ -6840,6 +6840,47 @@ export default class MyComponent extends LitElement {
 "
 `;
 
+exports[`Lit > jsx > Typescript Test > getterState 1`] = `
+"import { LitElement, html, css } from \\"lit\\";
+import { customElement, property, state, query } from \\"lit/decorators.js\\";
+
+export interface ButtonProps {
+  foo: string;
+}
+
+@customElement(\\"my-button\\")
+export default class Button extends LitElement {
+  createRenderRoot() {
+    return this;
+  }
+
+  @property() foo: any;
+
+  get foo2() {
+    return this.foo + \\"foo\\";
+  }
+  get bar() {
+    return \\"bar\\";
+  }
+  baz(i: number) {
+    return i + this.foo2.length;
+  }
+
+  render() {
+    return html\`
+
+          <div>
+          <p>\${this.foo2}</p>
+          <p>\${this.bar}</p>
+          <p>\${this.baz(1)}</p>
+        </div>
+
+        \`;
+  }
+}
+"
+`;
+
 exports[`Lit > jsx > Typescript Test > import types 1`] = `
 "import { BuilderContent, GetContentOptions } from \\"@builder.io/sdk\\";
 import RenderBlock, { RenderBlockProps } from \\"./builder-render-block.raw\\";
diff --git a/packages/core/src/__tests__/__snapshots__/marko.test.ts.snap b/packages/core/src/__tests__/__snapshots__/marko.test.ts.snap
index 913e660fdd..7bd5cf851c 100644
--- a/packages/core/src/__tests__/__snapshots__/marko.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/marko.test.ts.snap
@@ -3968,6 +3968,26 @@ exports[`Marko > jsx > Typescript Test > expressionState 1`] = `
 <div>\${state.refToUse}</div>"
 `;
 
+exports[`Marko > jsx > Typescript Test > getterState 1`] = `
+"class {
+  get foo2() {
+    return this.input.foo + \\"foo\\";
+  }
+  get bar() {
+    return \\"bar\\";
+  }
+  baz(i: number) {
+    return i + this.foo2.length;
+  }
+}
+
+<div>
+  <p>\${component.foo2}</p>
+  <p>\${component.bar}</p>
+  <p>\${component.baz(1)}</p>
+</div>"
+`;
+
 exports[`Marko > jsx > Typescript Test > import types 1`] = `
 "import { BuilderContent, GetContentOptions } from \\"@builder.io/sdk\\";
 import RenderBlock, { RenderBlockProps } from \\"./builder-render-block.raw\\";
diff --git a/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap b/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap
index 4149eadf3e..bc0f1cd9c0 100644
--- a/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap
@@ -5594,6 +5594,40 @@ export default MyComponent;
 "
 `;
 
+exports[`Preact > jsx > Typescript Test > getterState 1`] = `
+"/** @jsx h */
+import { h, Fragment } from \\"preact\\";
+
+export interface ButtonProps {
+  foo: string;
+}
+
+function Button(props: ButtonProps) {
+  function foo2() {
+    return props.foo + \\"foo\\";
+  }
+
+  function bar() {
+    return \\"bar\\";
+  }
+
+  function baz(i: number) {
+    return i + foo2().length;
+  }
+
+  return (
+    <div>
+      <p>{foo2()}</p>
+      <p>{bar()}</p>
+      <p>{baz(1)}</p>
+    </div>
+  );
+}
+
+export default Button;
+"
+`;
+
 exports[`Preact > jsx > Typescript Test > import types 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 2fa5009803..5e6f4921a8 100644
--- a/packages/core/src/__tests__/__snapshots__/qwik.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/qwik.test.ts.snap
@@ -7341,6 +7341,37 @@ export default MyComponent;
 "
 `;
 
+exports[`qwik > jsx > Typescript Test > getterState 1`] = `
+"import { Fragment, component$, h, useComputed$ } from \\"@builder.io/qwik\\";
+
+export interface ButtonProps {
+  foo: string;
+}
+export const baz = function baz(props, state, foo2, bar, i: number) {
+  return i + foo2.value.length;
+};
+export const Button = component$((props: ButtonProps) => {
+  const foo2 = useComputed$(() => {
+    return props.foo + \\"foo\\";
+  });
+  const bar = useComputed$(() => {
+    return \\"bar\\";
+  });
+  const state: any = {};
+
+  return (
+    <div>
+      <p>{foo2.value}</p>
+      <p>{bar.value}</p>
+      <p>{baz(props, state, foo2, bar, 1)}</p>
+    </div>
+  );
+});
+
+export default Button;
+"
+`;
+
 exports[`qwik > jsx > Typescript Test > import types 1`] = `
 "import {
   RenderBlockProps,
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 da22cbcb4a..a4238ea930 100644
--- a/packages/core/src/__tests__/__snapshots__/react-native.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/react-native.test.ts.snap
@@ -6740,6 +6740,54 @@ export default MyComponent;
 "
 `;
 
+exports[`React Native > jsx > Typescript Test > getterState 1`] = `
+"import * as React from \\"react\\";
+import {
+  FlatList,
+  ScrollView,
+  View,
+  StyleSheet,
+  Image,
+  Text,
+  Pressable,
+} from \\"react-native\\";
+
+export interface ButtonProps {
+  foo: string;
+}
+
+function Button(props: ButtonProps) {
+  function foo2() {
+    return props.foo + \\"foo\\";
+  }
+
+  function bar() {
+    return \\"bar\\";
+  }
+
+  function baz(i: number) {
+    return i + foo2().length;
+  }
+
+  return (
+    <View>
+      <View>
+        <Text>{foo2()}</Text>
+      </View>
+      <View>
+        <Text>{bar()}</Text>
+      </View>
+      <View>
+        <Text>{baz(1)}</Text>
+      </View>
+    </View>
+  );
+}
+
+export default Button;
+"
+`;
+
 exports[`React Native > jsx > Typescript Test > import types 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 c0f9776dad..7e69d936dc 100644
--- a/packages/core/src/__tests__/__snapshots__/react.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/react.test.ts.snap
@@ -5529,6 +5529,39 @@ export default MyComponent;
 "
 `;
 
+exports[`React > jsx > Typescript Test > getterState 1`] = `
+"import * as React from \\"react\\";
+
+export interface ButtonProps {
+  foo: string;
+}
+
+function Button(props: ButtonProps) {
+  function foo2() {
+    return props.foo + \\"foo\\";
+  }
+
+  function bar() {
+    return \\"bar\\";
+  }
+
+  function baz(i: number) {
+    return i + foo2().length;
+  }
+
+  return (
+    <div>
+      <p>{foo2()}</p>
+      <p>{bar()}</p>
+      <p>{baz(1)}</p>
+    </div>
+  );
+}
+
+export default Button;
+"
+`;
+
 exports[`React > jsx > Typescript Test > import types 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 ac2ca5d9b8..62bdd80770 100644
--- a/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap
@@ -5268,6 +5268,37 @@ export default MyComponent;
 "
 `;
 
+exports[`RSC > jsx > Typescript Test > getterState 1`] = `
+"import * as React from \\"react\\";
+
+export interface ButtonProps {
+  foo: string;
+}
+
+function Button(props: ButtonProps) {
+  const foo2 = function foo2() {
+    return props.foo + \\"foo\\";
+  };
+  const bar = function bar() {
+    return \\"bar\\";
+  };
+  const baz = function baz(i: number) {
+    return i + foo2().length;
+  };
+
+  return (
+    <div>
+      <p>{foo2()}</p>
+      <p>{bar()}</p>
+      <p>{baz(1)}</p>
+    </div>
+  );
+}
+
+export default Button;
+"
+`;
+
 exports[`RSC > jsx > Typescript Test > import types 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 375abdece9..47baea934a 100644
--- a/packages/core/src/__tests__/__snapshots__/solid.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/solid.test.ts.snap
@@ -11234,6 +11234,74 @@ export default MyComponent;
 "
 `;
 
+exports[`Solid > jsx > Typescript Test > getterState 1`] = `
+"import { createSignal, createMemo } from \\"solid-js\\";
+
+export interface ButtonProps {
+  foo: string;
+}
+
+function Button(props: ButtonProps) {
+  const foo2 = createMemo(() => {
+    return props.foo + \\"foo\\";
+  });
+
+  const bar = createMemo(() => {
+    return \\"bar\\";
+  });
+
+  function baz(i: number) {
+    return i + foo2().length;
+  }
+
+  return (
+    <div>
+      <p>{foo2()}</p>
+      <p>{bar()}</p>
+      <p>{baz(1)}</p>
+    </div>
+  );
+}
+
+export default Button;
+"
+`;
+
+exports[`Solid > jsx > Typescript Test > getterState 2`] = `
+"import { createSignal, createMemo } from \\"solid-js\\";
+
+export interface ButtonProps {
+  foo: string;
+}
+
+function Button(props: ButtonProps) {
+  const foo2 = createMemo(() => {
+    return props.foo + \\"foo\\";
+  });
+
+  const bar = createMemo(() => {
+    return \\"bar\\";
+  });
+
+  function baz(i: number) {
+    return i + foo2().length;
+  }
+
+  return (
+    <>
+      <div>
+        <p>{foo2()}</p>
+        <p>{bar()}</p>
+        <p>{baz(1)}</p>
+      </div>
+    </>
+  );
+}
+
+export default Button;
+"
+`;
+
 exports[`Solid > jsx > Typescript Test > import types 1`] = `
 "import { createSignal, createMemo } from \\"solid-js\\";
 
diff --git a/packages/core/src/__tests__/__snapshots__/stencil.test.ts.snap b/packages/core/src/__tests__/__snapshots__/stencil.test.ts.snap
index 2ae31999c6..170cb9b462 100644
--- a/packages/core/src/__tests__/__snapshots__/stencil.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/stencil.test.ts.snap
@@ -4615,6 +4615,38 @@ export default class MyComponent {
 "
 `;
 
+exports[`Stencil > jsx > Typescript Test > getterState 1`] = `
+"import { Component, Prop, h, State, Fragment } from \\"@stencil/core\\";
+
+@Component({
+  tag: \\"button\\",
+})
+export default class Button {
+  @Prop() foo: any;
+
+  get foo2() {
+    return this.foo + \\"foo\\";
+  }
+  get bar() {
+    return \\"bar\\";
+  }
+  baz(i: number) {
+    return i + this.foo2.length;
+  }
+
+  render() {
+    return (
+      <div>
+        <p>{this.foo2}</p>
+        <p>{this.bar}</p>
+        <p>{this.baz(1)}</p>
+      </div>
+    );
+  }
+}
+"
+`;
+
 exports[`Stencil > jsx > Typescript Test > import types 1`] = `
 "import { BuilderContent, GetContentOptions } from \\"@builder.io/sdk\\";
 import RenderBlock, { RenderBlockProps } from \\"./builder-render-block.raw\\";
diff --git a/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap b/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap
index af387e5467..8707ebb626 100644
--- a/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap
@@ -4855,6 +4855,35 @@ exports[`Svelte > jsx > Typescript Test > expressionState 1`] = `
 <div>{refToUse}</div>"
 `;
 
+exports[`Svelte > jsx > Typescript Test > getterState 1`] = `
+"<script context=\\"module\\" lang=\\"ts\\">
+  export interface ButtonProps {
+    foo: string;
+  }
+</script>
+
+<script lang=\\"ts\\">
+  export let foo: ButtonProps[\\"foo\\"];
+
+  function baz(i: number) {
+    return i + foo2().length;
+  }
+  $: foo2 = () => {
+    return foo + \\"foo\\";
+  };
+
+  $: bar = () => {
+    return \\"bar\\";
+  };
+</script>
+
+<div>
+  <p>{foo2()}</p>
+  <p>{bar()}</p>
+  <p>{baz(1)}</p>
+</div>"
+`;
+
 exports[`Svelte > jsx > Typescript Test > import types 1`] = `
 "<script context=\\"module\\" lang=\\"ts\\">
   type RenderContentProps = {
diff --git a/packages/core/src/__tests__/__snapshots__/taro.test.ts.snap b/packages/core/src/__tests__/__snapshots__/taro.test.ts.snap
index 34e1230cb4..4358b19e1a 100644
--- a/packages/core/src/__tests__/__snapshots__/taro.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/taro.test.ts.snap
@@ -5624,6 +5624,41 @@ export default MyComponent;
 "
 `;
 
+exports[`Taro > jsx > Typescript Test > getterState 1`] = `
+"import * as React from \\"react\\";
+
+export interface ButtonProps {
+  foo: string;
+}
+
+import { View, Text } from \\"@tarojs/components\\";
+
+function Button(props: ButtonProps) {
+  function foo2() {
+    return props.foo + \\"foo\\";
+  }
+
+  function bar() {
+    return \\"bar\\";
+  }
+
+  function baz(i: number) {
+    return i + foo2().length;
+  }
+
+  return (
+    <View>
+      <View>{foo2()}</View>
+      <View>{bar()}</View>
+      <View>{baz(1)}</View>
+    </View>
+  );
+}
+
+export default Button;
+"
+`;
+
 exports[`Taro > jsx > Typescript Test > import types 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 b37a71562e..19b64a8e5b 100644
--- a/packages/core/src/__tests__/__snapshots__/vue-composition.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/vue-composition.test.ts.snap
@@ -4974,6 +4974,37 @@ const refToUse = ref(
 </script>"
 `;
 
+exports[`Vue > jsx > Typescript Test > getterState 1`] = `
+"<template>
+  <div>
+    <p>{{ foo2 }}</p>
+    <p>{{ bar }}</p>
+    <p>{{ baz(1) }}</p>
+  </div>
+</template>
+
+<script setup lang=\\"ts\\">
+import { computed } from \\"vue\\";
+
+export interface ButtonProps {
+  foo: string;
+}
+
+const props = defineProps<ButtonProps>();
+
+const foo2 = computed(() => {
+  return props.foo + \\"foo\\";
+});
+const bar = computed(() => {
+  return \\"bar\\";
+});
+
+function baz(i: number) {
+  return i + foo2.length;
+}
+</script>"
+`;
+
 exports[`Vue > jsx > Typescript Test > import types 1`] = `
 "<template>
   <render-block
diff --git a/packages/core/src/__tests__/__snapshots__/vue.test.ts.snap b/packages/core/src/__tests__/__snapshots__/vue.test.ts.snap
index f2ad3d542d..2a17c0a7c1 100644
--- a/packages/core/src/__tests__/__snapshots__/vue.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/vue.test.ts.snap
@@ -6181,6 +6181,45 @@ export default defineComponent({
 </script>"
 `;
 
+exports[`Vue > jsx > Typescript Test > getterState 1`] = `
+"<template>
+  <div>
+    <p>{{ foo2 }}</p>
+    <p>{{ bar }}</p>
+    <p>{{ baz(1) }}</p>
+  </div>
+</template>
+
+<script lang=\\"ts\\">
+import { defineComponent } from \\"vue\\";
+
+export interface ButtonProps {
+  foo: string;
+}
+
+export default defineComponent({
+  name: \\"button\\",
+
+  props: [\\"foo\\"],
+
+  computed: {
+    foo2() {
+      return this.foo + \\"foo\\";
+    },
+    bar() {
+      return \\"bar\\";
+    },
+  },
+
+  methods: {
+    baz(i: number) {
+      return i + this.foo2.length;
+    },
+  },
+});
+</script>"
+`;
+
 exports[`Vue > jsx > Typescript Test > import types 1`] = `
 "<template>
   <render-block
diff --git a/packages/core/src/__tests__/__snapshots__/webcomponent.test.ts.snap b/packages/core/src/__tests__/__snapshots__/webcomponent.test.ts.snap
index b90afc4396..1f7e28e008 100644
--- a/packages/core/src/__tests__/__snapshots__/webcomponent.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/webcomponent.test.ts.snap
@@ -23200,6 +23200,145 @@ customElements.define(\\"my-component\\", MyComponent);
 "
 `;
 
+exports[`webcomponent > jsx > Typescript Test > getterState 1`] = `
+"export interface ButtonProps {
+  foo: string;
+}
+
+/**
+ * Usage:
+ *
+ *  <button></button>
+ *
+ */
+class Button extends HTMLElement {
+  get _root() {
+    return this.shadowRoot || this;
+  }
+
+  constructor() {
+    super();
+    const self = this;
+
+    this.state = {
+      get foo2() {
+        return self.props.foo + \\"foo\\";
+      },
+      get bar() {
+        return \\"bar\\";
+      },
+      baz(i: number) {
+        return i + self.state.foo2.length;
+      },
+    };
+    if (!this.props) {
+      this.props = {};
+    }
+
+    this.componentProps = [\\"foo\\"];
+
+    // 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>
+        <p>
+          <template data-el=\\"div-button-1\\"><!-- state.foo2 --></template>
+        </p>
+        <p>
+          <template data-el=\\"div-button-2\\"><!-- state.bar --></template>
+        </p>
+        <p>
+          <template data-el=\\"div-button-3\\"><!-- state.baz(1) --></template>
+        </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-button-1']\\").forEach((el) => {
+      this.renderTextNode(el, this.state.foo2);
+    });
+
+    this._root.querySelectorAll(\\"[data-el='div-button-2']\\").forEach((el) => {
+      this.renderTextNode(el, this.state.bar);
+    });
+
+    this._root.querySelectorAll(\\"[data-el='div-button-3']\\").forEach((el) => {
+      this.renderTextNode(el, this.state.baz(1));
+    });
+  }
+
+  // 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(\\"button\\", Button);
+"
+`;
+
 exports[`webcomponent > jsx > Typescript Test > import types 1`] = `
 "type RenderContentProps = {
   options?: GetContentOptions;

From 4a139447a0fc28066b78b0419fb4e8261fc0e995 Mon Sep 17 00:00:00 2001
From: Sami Jaber <jabersami@gmail.com>
Date: Mon, 22 Apr 2024 17:47:13 -0300
Subject: [PATCH 08/10] f

---
 packages/core/src/__tests__/local.test.ts | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/packages/core/src/__tests__/local.test.ts b/packages/core/src/__tests__/local.test.ts
index d92b10496c..b54112aeee 100644
--- a/packages/core/src/__tests__/local.test.ts
+++ b/packages/core/src/__tests__/local.test.ts
@@ -4,11 +4,7 @@ import { componentToQwik, parseJsx } from '..';
 /**
  * this test is for local development only, to conveniently iterate on one file/one generator.
  */
-
-// ignore this in CI
-if (process.env.CI) {
-  test.skip('file', () => {});
-}
+test.skip('file', () => {});
 
 const getRawFile = async (filePath: string) => {
   const code = await import(`${filePath}?raw`).then((x) => x.default as string);

From f63ce444d08c745289cb473c93f5cb69b618bc61 Mon Sep 17 00:00:00 2001
From: Sami Jaber <jabersami@gmail.com>
Date: Mon, 22 Apr 2024 18:11:33 -0300
Subject: [PATCH 09/10] fdsa

---
 packages/core/src/__tests__/local.test.ts | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/packages/core/src/__tests__/local.test.ts b/packages/core/src/__tests__/local.test.ts
index b54112aeee..873b59938e 100644
--- a/packages/core/src/__tests__/local.test.ts
+++ b/packages/core/src/__tests__/local.test.ts
@@ -1,11 +1,6 @@
 import { describe, expect, test } from 'vitest';
 import { componentToQwik, parseJsx } from '..';
 
-/**
- * this test is for local development only, to conveniently iterate on one file/one generator.
- */
-test.skip('file', () => {});
-
 const getRawFile = async (filePath: string) => {
   const code = await import(`${filePath}?raw`).then((x) => x.default as string);
   return { code, filePath: ['src', '__tests__', filePath].join('/') };
@@ -14,7 +9,10 @@ const getRawFile = async (filePath: string) => {
 const file = getRawFile('./data/blocks/getter-state.raw.tsx');
 
 describe('LOCAL', () => {
-  test('file', async () => {
+  /**
+   * this test is for local development only, to conveniently iterate on one file/one generator.
+   */
+  test.skip('file', async () => {
     const { code, filePath } = await file;
     const mitosisJSON = await parseJsx(code);
 

From 79d8496927c589b23afbccb0ecda9e16c9267c9e Mon Sep 17 00:00:00 2001
From: Sami Jaber <jabersami@gmail.com>
Date: Mon, 22 Apr 2024 18:11:43 -0300
Subject: [PATCH 10/10] f

---
 .../__snapshots__/svelte.test.ts.snap         |  8 +++++--
 packages/core/src/generators/svelte/blocks.ts | 21 +++++++------------
 2 files changed, 13 insertions(+), 16 deletions(-)

diff --git a/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap b/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap
index 8707ebb626..cf3f765939 100644
--- a/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap
@@ -1088,7 +1088,9 @@ exports[`Svelte > jsx > Javascript Test > InputParent 1`] = `
 <FormInputComponent
   name=\\"kingzez\\"
   type=\\"text\\"
-  onChange={(value) => handleChange(value)}
+  onChange={(value) => {
+    handleChange(value);
+  }}
 />"
 `;
 
@@ -3978,7 +3980,9 @@ exports[`Svelte > jsx > Typescript Test > InputParent 1`] = `
 <FormInputComponent
   name=\\"kingzez\\"
   type=\\"text\\"
-  onChange={(value) => handleChange(value)}
+  onChange={(value) => {
+    handleChange(value);
+  }}
 />"
 `;
 
diff --git a/packages/core/src/generators/svelte/blocks.ts b/packages/core/src/generators/svelte/blocks.ts
index 1f28af5915..f5fc129d0a 100644
--- a/packages/core/src/generators/svelte/blocks.ts
+++ b/packages/core/src/generators/svelte/blocks.ts
@@ -213,38 +213,31 @@ type BlockToSvelte<T extends BaseNode = MitosisNode> = (props: {
 }) => string;
 
 const stringifyBinding =
-  (node: MitosisNode, options: ToSvelteOptions) =>
+  (node: MitosisNode, options: ToSvelteOptions, tagName: string) =>
   ([key, binding]: [string, Binding | undefined]) => {
     if (key === 'innerHTML' || !binding) {
       return '';
     }
 
     const { code, arguments: cusArgs = ['event'], type } = binding;
-    const isValidHtmlTag = VALID_HTML_TAGS.includes(node.name) || node.name === 'svelte:element';
+    const isValidHtmlTag = VALID_HTML_TAGS.includes(tagName) || tagName === 'svelte:element';
 
     if (type === 'spread') {
       const spreadValue = key === 'props' ? '$$props' : code;
       return ` {...${spreadValue}} `;
-    } else if (key.startsWith('on') && isValidHtmlTag) {
+    } else if (key.startsWith('on')) {
       // handle html native on[event] props
       const event = key.replace('on', '').toLowerCase();
       // TODO: handle quotes in event handler values
 
       const valueWithoutBlock = removeSurroundingBlock(code);
 
-      if (valueWithoutBlock === key) {
-        return ` on:${event}={${valueWithoutBlock}} `;
-      } else {
-        return ` on:${event}="{${cusArgs.join(',')} => {${valueWithoutBlock}}}" `;
-      }
-    } else if (key.startsWith('on')) {
-      // handle on[custom event] props
-      const valueWithoutBlock = removeSurroundingBlock(code);
+      const keyToUse = isValidHtmlTag ? `on:${event}` : key;
 
       if (valueWithoutBlock === key) {
-        return ` ${key}={${valueWithoutBlock}} `;
+        return ` ${keyToUse}={${valueWithoutBlock}} `;
       } else {
-        return ` ${key}={(${cusArgs.join(',')}) => ${valueWithoutBlock}}`;
+        return ` ${keyToUse}="{${cusArgs.join(',')} => {${valueWithoutBlock}}}" `;
       }
     } else if (key === 'ref') {
       return ` bind:this={${code}} `;
@@ -300,7 +293,7 @@ export const blockToSvelte: BlockToSvelte = ({ json, options, parentComponent })
   }
 
   const stringifiedBindings = Object.entries(json.bindings)
-    .map(stringifyBinding(json, options))
+    .map(stringifyBinding(json, options, tagName))
     .join('');
 
   str += stringifiedBindings;