From 08601cc9fcfeceb402816fbeb3b28d0465d9ef04 Mon Sep 17 00:00:00 2001
From: Nicolas Merget <nicolas.merget@deutschebahn.com>
Date: Wed, 15 Jan 2025 11:01:09 +0100
Subject: [PATCH 01/20] refactor: change defaultProps generation for react

---
 .changeset/fluffy-eyes-add.md                 |    5 +
 .../__snapshots__/mitosis.test.ts.snap        |  100 +-
 .../__snapshots__/preact.test.ts.snap         |  104 +-
 .../__snapshots__/react-native.test.ts.snap   |  104 +-
 .../react-state-builder.test.ts.snap          |  104 +-
 .../react-state-mobx.test.ts.snap             |  104 +-
 .../react-state-solid.test.ts.snap            |  104 +-
 .../react-state-valtio.test.ts.snap           |  104 +-
 .../react-state-variables.test.ts.snap        | 2447 +++++++----------
 .../__snapshots__/react.test.ts.snap          |  104 +-
 .../__tests__/__snapshots__/rsc.test.ts.snap  |  506 +---
 .../__tests__/__snapshots__/taro.test.ts.snap |  104 +-
 packages/core/src/__tests__/react.test.ts     |   12 +
 packages/core/src/generators/react/blocks.ts  |    2 +-
 .../core/src/generators/react/generator.ts    |  203 +-
 .../generators/react/helpers/default-props.ts |   14 +
 .../src/generators/react/helpers/hooks.ts     |   95 +
 .../react/{helpers.ts => helpers/index.ts}    |    5 +-
 .../generators/react/{ => helpers}/state.ts   |   77 +-
 .../core/src/helpers/get-function-string.ts   |    2 +
 20 files changed, 1726 insertions(+), 2574 deletions(-)
 create mode 100644 .changeset/fluffy-eyes-add.md
 create mode 100644 packages/core/src/generators/react/helpers/default-props.ts
 create mode 100644 packages/core/src/generators/react/helpers/hooks.ts
 rename packages/core/src/generators/react/{helpers.ts => helpers/index.ts} (93%)
 rename packages/core/src/generators/react/{ => helpers}/state.ts (57%)
 create mode 100644 packages/core/src/helpers/get-function-string.ts

diff --git a/.changeset/fluffy-eyes-add.md b/.changeset/fluffy-eyes-add.md
new file mode 100644
index 0000000000..b8f02f1215
--- /dev/null
+++ b/.changeset/fluffy-eyes-add.md
@@ -0,0 +1,5 @@
+---
+'@builder.io/mitosis': patch
+---
+
+[react]: Changed `defaultProps` generation for react, because defaultProps for function components is deprecated
diff --git a/packages/core/src/__tests__/__snapshots__/mitosis.test.ts.snap b/packages/core/src/__tests__/__snapshots__/mitosis.test.ts.snap
index 8b2e56b818..6aade9ad5b 100644
--- a/packages/core/src/__tests__/__snapshots__/mitosis.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/mitosis.test.ts.snap
@@ -15416,7 +15416,9 @@ exports[`Mitosis, format: react > jsx > Javascript Test > ContentSlotJSX 1`] = `
 import * as React from \\"react\\";
 import { useState } from \\"react\\";
 
-function ContentSlotJsxCode(props) {
+function ContentSlotJsxCode(
+  props = { content: \\"\\", slotReference: undefined, slotContent: undefined }
+) {
   const [name, setName] = useState(() => \\"king\\");
 
   const [showContent, setShowContent] = useState(() => false);
@@ -15454,12 +15456,6 @@ function ContentSlotJsxCode(props) {
   );
 }
 
-ContentSlotJsxCode.defaultProps = {
-  content: \\"\\",
-  slotReference: undefined,
-  slotContent: undefined,
-};
-
 export default ContentSlotJsxCode;
 "
 `;
@@ -16937,7 +16933,16 @@ exports[`Mitosis, format: react > jsx > Javascript Test > defaultProps 1`] = `
 "\\"use client\\";
 import * as React from \\"react\\";
 
-function Button(props) {
+function Button(
+  props = {
+    text: \\"default text\\",
+    link: \\"https://builder.io/\\",
+    openLinkInNewTab: false,
+    onClick: () => {
+      console.log(\\"hi\\");
+    },
+  }
+) {
   return (
     <div>
       {props.link ? (
@@ -16962,15 +16967,6 @@ function Button(props) {
   );
 }
 
-Button.defaultProps = {
-  text: \\"default text\\",
-  link: \\"https://builder.io/\\",
-  openLinkInNewTab: false,
-  onClick: () => {
-    console.log(\\"hi\\");
-  },
-};
-
 export default Button;
 "
 `;
@@ -16979,7 +16975,14 @@ exports[`Mitosis, format: react > jsx > Javascript Test > defaultPropsOutsideCom
 "\\"use client\\";
 import * as React from \\"react\\";
 
-function Button(props) {
+function Button(
+  props = {
+    text: \\"default text\\",
+    link: \\"https://builder.io/\\",
+    openLinkInNewTab: false,
+    onClick: () => {},
+  }
+) {
   return (
     <div>
       {props.link ? (
@@ -17004,13 +17007,6 @@ function Button(props) {
   );
 }
 
-Button.defaultProps = {
-  text: \\"default text\\",
-  link: \\"https://builder.io/\\",
-  openLinkInNewTab: false,
-  onClick: () => {},
-};
-
 export default Button;
 "
 `;
@@ -19124,7 +19120,9 @@ import * as React from \\"react\\";
 import { useState } from \\"react\\";
 import type { JSX } from \\"../../../../jsx-runtime\\";
 
-function ContentSlotJsxCode(props) {
+function ContentSlotJsxCode(
+  props = { content: \\"\\", slotReference: undefined, slotContent: undefined }
+) {
   const [name, setName] = useState(() => \\"king\\");
 
   const [showContent, setShowContent] = useState(() => false);
@@ -19162,12 +19160,6 @@ function ContentSlotJsxCode(props) {
   );
 }
 
-ContentSlotJsxCode.defaultProps = {
-  content: \\"\\",
-  slotReference: undefined,
-  slotContent: undefined,
-};
-
 export default ContentSlotJsxCode;
 "
 `;
@@ -20653,7 +20645,16 @@ exports[`Mitosis, format: react > jsx > Typescript Test > defaultProps 1`] = `
 "\\"use client\\";
 import * as React from \\"react\\";
 
-function Button(props) {
+function Button(
+  props = {
+    text: \\"default text\\",
+    link: \\"https://builder.io/\\",
+    openLinkInNewTab: false,
+    onClick: () => {
+      console.log(\\"hi\\");
+    },
+  }
+) {
   return (
     <div>
       {props.link ? (
@@ -20678,15 +20679,6 @@ function Button(props) {
   );
 }
 
-Button.defaultProps = {
-  text: \\"default text\\",
-  link: \\"https://builder.io/\\",
-  openLinkInNewTab: false,
-  onClick: () => {
-    console.log(\\"hi\\");
-  },
-};
-
 export default Button;
 "
 `;
@@ -20695,7 +20687,14 @@ exports[`Mitosis, format: react > jsx > Typescript Test > defaultPropsOutsideCom
 "\\"use client\\";
 import * as React from \\"react\\";
 
-function Button(props) {
+function Button(
+  props = {
+    text: \\"default text\\",
+    link: \\"https://builder.io/\\",
+    openLinkInNewTab: false,
+    onClick: () => {},
+  }
+) {
   return (
     <div>
       {props.link ? (
@@ -20720,13 +20719,6 @@ function Button(props) {
   );
 }
 
-Button.defaultProps = {
-  text: \\"default text\\",
-  link: \\"https://builder.io/\\",
-  openLinkInNewTab: false,
-  onClick: () => {},
-};
-
 export default Button;
 "
 `;
@@ -22303,7 +22295,7 @@ exports[`Mitosis, format: react > svelte > Javascript Test > classDirective 1`]
 import * as React from \\"react\\";
 import { useState } from \\"react\\";
 
-function MyComponent(props) {
+function MyComponent(props = {}) {
   const [focus, setFocus] = useState(() => true);
 
   return (
@@ -22315,8 +22307,6 @@ function MyComponent(props) {
   );
 }
 
-MyComponent.defaultProps = {};
-
 export default MyComponent;
 "
 `;
@@ -22706,7 +22696,7 @@ exports[`Mitosis, format: react > svelte > Typescript Test > classDirective 1`]
 import * as React from \\"react\\";
 import { useState } from \\"react\\";
 
-function MyComponent(props) {
+function MyComponent(props = {}) {
   const [focus, setFocus] = useState(() => true);
 
   return (
@@ -22718,8 +22708,6 @@ function MyComponent(props) {
   );
 }
 
-MyComponent.defaultProps = {};
-
 export default MyComponent;
 "
 `;
diff --git a/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap b/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap
index 3e5fc770be..1c48c8a76a 100644
--- a/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap
@@ -560,7 +560,9 @@ exports[`Preact > jsx > Javascript Test > ContentSlotJSX 1`] = `
 import { h, Fragment } from \\"preact\\";
 import { useState } from \\"preact/hooks\\";
 
-function ContentSlotJsxCode(props) {
+function ContentSlotJsxCode(
+  props = { content: \\"\\", slotReference: undefined, slotContent: undefined }
+) {
   const [name, setName] = useState(() => \\"king\\");
 
   const [showContent, setShowContent] = useState(() => false);
@@ -598,12 +600,6 @@ function ContentSlotJsxCode(props) {
   );
 }
 
-ContentSlotJsxCode.defaultProps = {
-  content: \\"\\",
-  slotReference: undefined,
-  slotContent: undefined,
-};
-
 export default ContentSlotJsxCode;
 "
 `;
@@ -2103,7 +2099,16 @@ exports[`Preact > jsx > Javascript Test > defaultProps 1`] = `
 "/** @jsx h */
 import { h, Fragment } from \\"preact\\";
 
-function Button(props) {
+function Button(
+  props = {
+    text: \\"default text\\",
+    link: \\"https://builder.io/\\",
+    openLinkInNewTab: false,
+    onClick: () => {
+      console.log(\\"hi\\");
+    },
+  }
+) {
   return (
     <div>
       {props.link ? (
@@ -2128,15 +2133,6 @@ function Button(props) {
   );
 }
 
-Button.defaultProps = {
-  text: \\"default text\\",
-  link: \\"https://builder.io/\\",
-  openLinkInNewTab: false,
-  onClick: () => {
-    console.log(\\"hi\\");
-  },
-};
-
 export default Button;
 "
 `;
@@ -2145,7 +2141,14 @@ exports[`Preact > jsx > Javascript Test > defaultPropsOutsideComponent 1`] = `
 "/** @jsx h */
 import { h, Fragment } from \\"preact\\";
 
-function Button(props) {
+function Button(
+  props = {
+    text: \\"default text\\",
+    link: \\"https://builder.io/\\",
+    openLinkInNewTab: false,
+    onClick: () => {},
+  }
+) {
   return (
     <div>
       {props.link ? (
@@ -2170,13 +2173,6 @@ function Button(props) {
   );
 }
 
-Button.defaultProps = {
-  text: \\"default text\\",
-  link: \\"https://builder.io/\\",
-  openLinkInNewTab: false,
-  onClick: () => {},
-};
-
 export default Button;
 "
 `;
@@ -4384,7 +4380,13 @@ type Props = {
 };
 import type { JSX } from \\"../../../../jsx-runtime\\";
 
-function ContentSlotJsxCode(props: Props) {
+function ContentSlotJsxCode(
+  props: Props = {
+    content: \\"\\",
+    slotReference: undefined,
+    slotContent: undefined,
+  }
+) {
   const [name, setName] = useState(() => \\"king\\");
 
   const [showContent, setShowContent] = useState(() => false);
@@ -4422,12 +4424,6 @@ function ContentSlotJsxCode(props: Props) {
   );
 }
 
-ContentSlotJsxCode.defaultProps = {
-  content: \\"\\",
-  slotReference: undefined,
-  slotContent: undefined,
-};
-
 export default ContentSlotJsxCode;
 "
 `;
@@ -6161,7 +6157,16 @@ export interface ButtonProps {
   onClick?: () => void;
 }
 
-function Button(props: ButtonProps) {
+function Button(
+  props: ButtonProps = {
+    text: \\"default text\\",
+    link: \\"https://builder.io/\\",
+    openLinkInNewTab: false,
+    onClick: () => {
+      console.log(\\"hi\\");
+    },
+  }
+) {
   return (
     <div>
       {props.link ? (
@@ -6186,15 +6191,6 @@ function Button(props: ButtonProps) {
   );
 }
 
-Button.defaultProps = {
-  text: \\"default text\\",
-  link: \\"https://builder.io/\\",
-  openLinkInNewTab: false,
-  onClick: () => {
-    console.log(\\"hi\\");
-  },
-};
-
 export default Button;
 "
 `;
@@ -6211,7 +6207,14 @@ export interface ButtonProps {
   onClick: () => void;
 }
 
-function Button(props: ButtonProps) {
+function Button(
+  props: ButtonProps = {
+    text: \\"default text\\",
+    link: \\"https://builder.io/\\",
+    openLinkInNewTab: false,
+    onClick: () => {},
+  }
+) {
   return (
     <div>
       {props.link ? (
@@ -6236,13 +6239,6 @@ function Button(props: ButtonProps) {
   );
 }
 
-Button.defaultProps = {
-  text: \\"default text\\",
-  link: \\"https://builder.io/\\",
-  openLinkInNewTab: false,
-  onClick: () => {},
-};
-
 export default Button;
 "
 `;
@@ -8055,7 +8051,7 @@ exports[`Preact > svelte > Javascript Test > classDirective 1`] = `
 import { h, Fragment } from \\"preact\\";
 import { useState } from \\"preact/hooks\\";
 
-function MyComponent(props) {
+function MyComponent(props = {}) {
   const [focus, setFocus] = useState(() => true);
 
   return (
@@ -8067,8 +8063,6 @@ function MyComponent(props) {
   );
 }
 
-MyComponent.defaultProps = {};
-
 export default MyComponent;
 "
 `;
@@ -8459,7 +8453,7 @@ exports[`Preact > svelte > Typescript Test > classDirective 1`] = `
 import { h, Fragment } from \\"preact\\";
 import { useState } from \\"preact/hooks\\";
 
-function MyComponent(props: any) {
+function MyComponent(props: any = {}) {
   const [focus, setFocus] = useState(() => true);
 
   return (
@@ -8471,8 +8465,6 @@ function MyComponent(props: any) {
   );
 }
 
-MyComponent.defaultProps = {};
-
 export default MyComponent;
 "
 `;
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 7cd91475be..18b0eb23fc 100644
--- a/packages/core/src/__tests__/__snapshots__/react-native.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/react-native.test.ts.snap
@@ -823,7 +823,9 @@ import {
 } from \\"react-native\\";
 import { useState } from \\"react\\";
 
-function ContentSlotJsxCode(props) {
+function ContentSlotJsxCode(
+  props = { content: \\"\\", slotReference: undefined, slotContent: undefined }
+) {
   const [name, setName] = useState(() => \\"king\\");
 
   const [showContent, setShowContent] = useState(() => false);
@@ -860,12 +862,6 @@ function ContentSlotJsxCode(props) {
   );
 }
 
-ContentSlotJsxCode.defaultProps = {
-  content: \\"\\",
-  slotReference: undefined,
-  slotContent: undefined,
-};
-
 export default ContentSlotJsxCode;
 "
 `;
@@ -2842,7 +2838,16 @@ import {
   Linking,
 } from \\"react-native\\";
 
-function Button(props) {
+function Button(
+  props = {
+    text: \\"default text\\",
+    link: \\"https://builder.io/\\",
+    openLinkInNewTab: false,
+    onClick: () => {
+      console.log(\\"hi\\");
+    },
+  }
+) {
   return (
     <View>
       {props.link ? (
@@ -2866,15 +2871,6 @@ function Button(props) {
   );
 }
 
-Button.defaultProps = {
-  text: \\"default text\\",
-  link: \\"https://builder.io/\\",
-  openLinkInNewTab: false,
-  onClick: () => {
-    console.log(\\"hi\\");
-  },
-};
-
 export default Button;
 "
 `;
@@ -2895,7 +2891,14 @@ import {
   Linking,
 } from \\"react-native\\";
 
-function Button(props) {
+function Button(
+  props = {
+    text: \\"default text\\",
+    link: \\"https://builder.io/\\",
+    openLinkInNewTab: false,
+    onClick: () => {},
+  }
+) {
   return (
     <View>
       {props.link ? (
@@ -2919,13 +2922,6 @@ function Button(props) {
   );
 }
 
-Button.defaultProps = {
-  text: \\"default text\\",
-  link: \\"https://builder.io/\\",
-  openLinkInNewTab: false,
-  onClick: () => {},
-};
-
 export default Button;
 "
 `;
@@ -6180,7 +6176,13 @@ type Props = {
 };
 import type { JSX } from \\"../../../../jsx-runtime\\";
 
-function ContentSlotJsxCode(props: Props) {
+function ContentSlotJsxCode(
+  props: Props = {
+    content: \\"\\",
+    slotReference: undefined,
+    slotContent: undefined,
+  }
+) {
   const [name, setName] = useState(() => \\"king\\");
 
   const [showContent, setShowContent] = useState(() => false);
@@ -6217,12 +6219,6 @@ function ContentSlotJsxCode(props: Props) {
   );
 }
 
-ContentSlotJsxCode.defaultProps = {
-  content: \\"\\",
-  slotReference: undefined,
-  slotContent: undefined,
-};
-
 export default ContentSlotJsxCode;
 "
 `;
@@ -8433,7 +8429,16 @@ export interface ButtonProps {
   onClick?: () => void;
 }
 
-function Button(props: ButtonProps) {
+function Button(
+  props: ButtonProps = {
+    text: \\"default text\\",
+    link: \\"https://builder.io/\\",
+    openLinkInNewTab: false,
+    onClick: () => {
+      console.log(\\"hi\\");
+    },
+  }
+) {
   return (
     <View>
       {props.link ? (
@@ -8457,15 +8462,6 @@ function Button(props: ButtonProps) {
   );
 }
 
-Button.defaultProps = {
-  text: \\"default text\\",
-  link: \\"https://builder.io/\\",
-  openLinkInNewTab: false,
-  onClick: () => {
-    console.log(\\"hi\\");
-  },
-};
-
 export default Button;
 "
 `;
@@ -8494,7 +8490,14 @@ export interface ButtonProps {
   onClick: () => void;
 }
 
-function Button(props: ButtonProps) {
+function Button(
+  props: ButtonProps = {
+    text: \\"default text\\",
+    link: \\"https://builder.io/\\",
+    openLinkInNewTab: false,
+    onClick: () => {},
+  }
+) {
   return (
     <View>
       {props.link ? (
@@ -8518,13 +8521,6 @@ function Button(props: ButtonProps) {
   );
 }
 
-Button.defaultProps = {
-  text: \\"default text\\",
-  link: \\"https://builder.io/\\",
-  openLinkInNewTab: false,
-  onClick: () => {},
-};
-
 export default Button;
 "
 `;
@@ -11263,14 +11259,12 @@ import {
 } from \\"react-native\\";
 import { useState } from \\"react\\";
 
-function MyComponent(props) {
+function MyComponent(props = {}) {
   const [focus, setFocus] = useState(() => true);
 
   return <TextInput />;
 }
 
-MyComponent.defaultProps = {};
-
 export default MyComponent;
 "
 `;
@@ -11858,14 +11852,12 @@ import {
 } from \\"react-native\\";
 import { useState } from \\"react\\";
 
-function MyComponent(props: any) {
+function MyComponent(props: any = {}) {
   const [focus, setFocus] = useState(() => true);
 
   return <TextInput />;
 }
 
-MyComponent.defaultProps = {};
-
 export default MyComponent;
 "
 `;
diff --git a/packages/core/src/__tests__/__snapshots__/react-state-builder.test.ts.snap b/packages/core/src/__tests__/__snapshots__/react-state-builder.test.ts.snap
index bbea432570..c2c3dbe167 100644
--- a/packages/core/src/__tests__/__snapshots__/react-state-builder.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/react-state-builder.test.ts.snap
@@ -564,7 +564,9 @@ exports[`React - stateType: builder > jsx > Javascript Test > ContentSlotJSX 1`]
 "\\"use client\\";
 import * as React from \\"react\\";
 
-function ContentSlotJsxCode(props) {
+function ContentSlotJsxCode(
+  props = { content: \\"\\", slotReference: undefined, slotContent: undefined }
+) {
   const state = useBuilderState({
     name: \\"king\\",
     showContent: false,
@@ -601,12 +603,6 @@ function ContentSlotJsxCode(props) {
   );
 }
 
-ContentSlotJsxCode.defaultProps = {
-  content: \\"\\",
-  slotReference: undefined,
-  slotContent: undefined,
-};
-
 export default ContentSlotJsxCode;
 "
 `;
@@ -2122,7 +2118,16 @@ exports[`React - stateType: builder > jsx > Javascript Test > defaultProps 1`] =
 "\\"use client\\";
 import * as React from \\"react\\";
 
-function Button(props) {
+function Button(
+  props = {
+    text: \\"default text\\",
+    link: \\"https://builder.io/\\",
+    openLinkInNewTab: false,
+    onClick: () => {
+      console.log(\\"hi\\");
+    },
+  }
+) {
   const state = useBuilderState({});
 
   return (
@@ -2149,15 +2154,6 @@ function Button(props) {
   );
 }
 
-Button.defaultProps = {
-  text: \\"default text\\",
-  link: \\"https://builder.io/\\",
-  openLinkInNewTab: false,
-  onClick: () => {
-    console.log(\\"hi\\");
-  },
-};
-
 export default Button;
 "
 `;
@@ -2166,7 +2162,14 @@ exports[`React - stateType: builder > jsx > Javascript Test > defaultPropsOutsid
 "\\"use client\\";
 import * as React from \\"react\\";
 
-function Button(props) {
+function Button(
+  props = {
+    text: \\"default text\\",
+    link: \\"https://builder.io/\\",
+    openLinkInNewTab: false,
+    onClick: () => {},
+  }
+) {
   const state = useBuilderState({});
 
   return (
@@ -2193,13 +2196,6 @@ function Button(props) {
   );
 }
 
-Button.defaultProps = {
-  text: \\"default text\\",
-  link: \\"https://builder.io/\\",
-  openLinkInNewTab: false,
-  onClick: () => {},
-};
-
 export default Button;
 "
 `;
@@ -4373,7 +4369,13 @@ type Props = {
 };
 import type { JSX } from \\"../../../../jsx-runtime\\";
 
-function ContentSlotJsxCode(props: Props) {
+function ContentSlotJsxCode(
+  props: Props = {
+    content: \\"\\",
+    slotReference: undefined,
+    slotContent: undefined,
+  }
+) {
   const state = useBuilderState({
     name: \\"king\\",
     showContent: false,
@@ -4410,12 +4412,6 @@ function ContentSlotJsxCode(props: Props) {
   );
 }
 
-ContentSlotJsxCode.defaultProps = {
-  content: \\"\\",
-  slotReference: undefined,
-  slotContent: undefined,
-};
-
 export default ContentSlotJsxCode;
 "
 `;
@@ -6163,7 +6159,16 @@ export interface ButtonProps {
   onClick?: () => void;
 }
 
-function Button(props: ButtonProps) {
+function Button(
+  props: ButtonProps = {
+    text: \\"default text\\",
+    link: \\"https://builder.io/\\",
+    openLinkInNewTab: false,
+    onClick: () => {
+      console.log(\\"hi\\");
+    },
+  }
+) {
   const state = useBuilderState({});
 
   return (
@@ -6190,15 +6195,6 @@ function Button(props: ButtonProps) {
   );
 }
 
-Button.defaultProps = {
-  text: \\"default text\\",
-  link: \\"https://builder.io/\\",
-  openLinkInNewTab: false,
-  onClick: () => {
-    console.log(\\"hi\\");
-  },
-};
-
 export default Button;
 "
 `;
@@ -6215,7 +6211,14 @@ export interface ButtonProps {
   onClick: () => void;
 }
 
-function Button(props: ButtonProps) {
+function Button(
+  props: ButtonProps = {
+    text: \\"default text\\",
+    link: \\"https://builder.io/\\",
+    openLinkInNewTab: false,
+    onClick: () => {},
+  }
+) {
   const state = useBuilderState({});
 
   return (
@@ -6242,13 +6245,6 @@ function Button(props: ButtonProps) {
   );
 }
 
-Button.defaultProps = {
-  text: \\"default text\\",
-  link: \\"https://builder.io/\\",
-  openLinkInNewTab: false,
-  onClick: () => {},
-};
-
 export default Button;
 "
 `;
@@ -8019,7 +8015,7 @@ exports[`React - stateType: builder > svelte > Javascript Test > classDirective
 "\\"use client\\";
 import * as React from \\"react\\";
 
-function MyComponent(props) {
+function MyComponent(props = {}) {
   const state = useBuilderState({ focus: true });
 
   return (
@@ -8031,8 +8027,6 @@ function MyComponent(props) {
   );
 }
 
-MyComponent.defaultProps = {};
-
 export default MyComponent;
 "
 `;
@@ -8419,7 +8413,7 @@ exports[`React - stateType: builder > svelte > Typescript Test > classDirective
 "\\"use client\\";
 import * as React from \\"react\\";
 
-function MyComponent(props: any) {
+function MyComponent(props: any = {}) {
   const state = useBuilderState({ focus: true });
 
   return (
@@ -8431,8 +8425,6 @@ function MyComponent(props: any) {
   );
 }
 
-MyComponent.defaultProps = {};
-
 export default MyComponent;
 "
 `;
diff --git a/packages/core/src/__tests__/__snapshots__/react-state-mobx.test.ts.snap b/packages/core/src/__tests__/__snapshots__/react-state-mobx.test.ts.snap
index e7ddbc2ad6..3e028e0ddb 100644
--- a/packages/core/src/__tests__/__snapshots__/react-state-mobx.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/react-state-mobx.test.ts.snap
@@ -589,7 +589,9 @@ exports[`React - stateType: mobx > jsx > Javascript Test > ContentSlotJSX 1`] =
 import * as React from \\"react\\";
 import { useLocalObservable, observer } from \\"mobx-react-lite\\";
 
-function ContentSlotJsxCode(props) {
+function ContentSlotJsxCode(
+  props = { content: \\"\\", slotReference: undefined, slotContent: undefined }
+) {
   const state = useLocalObservable(() => ({
     name: \\"king\\",
     showContent: false,
@@ -626,12 +628,6 @@ function ContentSlotJsxCode(props) {
   );
 }
 
-ContentSlotJsxCode.defaultProps = {
-  content: \\"\\",
-  slotReference: undefined,
-  slotContent: undefined,
-};
-
 const observedContentSlotJsxCode = observer(ContentSlotJsxCode);
 export default observedContentSlotJsxCode;
 "
@@ -2175,7 +2171,16 @@ exports[`React - stateType: mobx > jsx > Javascript Test > defaultProps 1`] = `
 "\\"use client\\";
 import * as React from \\"react\\";
 
-function Button(props) {
+function Button(
+  props = {
+    text: \\"default text\\",
+    link: \\"https://builder.io/\\",
+    openLinkInNewTab: false,
+    onClick: () => {
+      console.log(\\"hi\\");
+    },
+  }
+) {
   return (
     <div>
       {props.link ? (
@@ -2200,15 +2205,6 @@ function Button(props) {
   );
 }
 
-Button.defaultProps = {
-  text: \\"default text\\",
-  link: \\"https://builder.io/\\",
-  openLinkInNewTab: false,
-  onClick: () => {
-    console.log(\\"hi\\");
-  },
-};
-
 const observedButton = observer(Button);
 export default observedButton;
 "
@@ -2218,7 +2214,14 @@ exports[`React - stateType: mobx > jsx > Javascript Test > defaultPropsOutsideCo
 "\\"use client\\";
 import * as React from \\"react\\";
 
-function Button(props) {
+function Button(
+  props = {
+    text: \\"default text\\",
+    link: \\"https://builder.io/\\",
+    openLinkInNewTab: false,
+    onClick: () => {},
+  }
+) {
   return (
     <div>
       {props.link ? (
@@ -2243,13 +2246,6 @@ function Button(props) {
   );
 }
 
-Button.defaultProps = {
-  text: \\"default text\\",
-  link: \\"https://builder.io/\\",
-  openLinkInNewTab: false,
-  onClick: () => {},
-};
-
 const observedButton = observer(Button);
 export default observedButton;
 "
@@ -4443,7 +4439,13 @@ type Props = {
 };
 import type { JSX } from \\"../../../../jsx-runtime\\";
 
-function ContentSlotJsxCode(props: Props) {
+function ContentSlotJsxCode(
+  props: Props = {
+    content: \\"\\",
+    slotReference: undefined,
+    slotContent: undefined,
+  }
+) {
   const state = useLocalObservable(() => ({
     name: \\"king\\",
     showContent: false,
@@ -4480,12 +4482,6 @@ function ContentSlotJsxCode(props: Props) {
   );
 }
 
-ContentSlotJsxCode.defaultProps = {
-  content: \\"\\",
-  slotReference: undefined,
-  slotContent: undefined,
-};
-
 const observedContentSlotJsxCode = observer(ContentSlotJsxCode);
 export default observedContentSlotJsxCode;
 "
@@ -6250,7 +6246,16 @@ export interface ButtonProps {
   onClick?: () => void;
 }
 
-function Button(props: ButtonProps) {
+function Button(
+  props: ButtonProps = {
+    text: \\"default text\\",
+    link: \\"https://builder.io/\\",
+    openLinkInNewTab: false,
+    onClick: () => {
+      console.log(\\"hi\\");
+    },
+  }
+) {
   return (
     <div>
       {props.link ? (
@@ -6275,15 +6280,6 @@ function Button(props: ButtonProps) {
   );
 }
 
-Button.defaultProps = {
-  text: \\"default text\\",
-  link: \\"https://builder.io/\\",
-  openLinkInNewTab: false,
-  onClick: () => {
-    console.log(\\"hi\\");
-  },
-};
-
 const observedButton = observer(Button);
 export default observedButton;
 "
@@ -6301,7 +6297,14 @@ export interface ButtonProps {
   onClick: () => void;
 }
 
-function Button(props: ButtonProps) {
+function Button(
+  props: ButtonProps = {
+    text: \\"default text\\",
+    link: \\"https://builder.io/\\",
+    openLinkInNewTab: false,
+    onClick: () => {},
+  }
+) {
   return (
     <div>
       {props.link ? (
@@ -6326,13 +6329,6 @@ function Button(props: ButtonProps) {
   );
 }
 
-Button.defaultProps = {
-  text: \\"default text\\",
-  link: \\"https://builder.io/\\",
-  openLinkInNewTab: false,
-  onClick: () => {},
-};
-
 const observedButton = observer(Button);
 export default observedButton;
 "
@@ -8104,7 +8100,7 @@ exports[`React - stateType: mobx > svelte > Javascript Test > classDirective 1`]
 import * as React from \\"react\\";
 import { useLocalObservable, observer } from \\"mobx-react-lite\\";
 
-function MyComponent(props) {
+function MyComponent(props = {}) {
   const state = useLocalObservable(() => ({ focus: true }));
 
   return (
@@ -8116,8 +8112,6 @@ function MyComponent(props) {
   );
 }
 
-MyComponent.defaultProps = {};
-
 const observedMyComponent = observer(MyComponent);
 export default observedMyComponent;
 "
@@ -8527,7 +8521,7 @@ exports[`React - stateType: mobx > svelte > Typescript Test > classDirective 1`]
 import * as React from \\"react\\";
 import { useLocalObservable, observer } from \\"mobx-react-lite\\";
 
-function MyComponent(props: any) {
+function MyComponent(props: any = {}) {
   const state = useLocalObservable(() => ({ focus: true }));
 
   return (
@@ -8539,8 +8533,6 @@ function MyComponent(props: any) {
   );
 }
 
-MyComponent.defaultProps = {};
-
 const observedMyComponent = observer(MyComponent);
 export default observedMyComponent;
 "
diff --git a/packages/core/src/__tests__/__snapshots__/react-state-solid.test.ts.snap b/packages/core/src/__tests__/__snapshots__/react-state-solid.test.ts.snap
index c183b05b58..c72f2be890 100644
--- a/packages/core/src/__tests__/__snapshots__/react-state-solid.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/react-state-solid.test.ts.snap
@@ -569,7 +569,9 @@ exports[`React - stateType: solid > jsx > Javascript Test > ContentSlotJSX 1`] =
 import * as React from \\"react\\";
 import { useMutable } from \\"react-solid-state\\";
 
-function ContentSlotJsxCode(props) {
+function ContentSlotJsxCode(
+  props = { content: \\"\\", slotReference: undefined, slotContent: undefined }
+) {
   const state = useMutable({
     name: \\"king\\",
     showContent: false,
@@ -606,12 +608,6 @@ function ContentSlotJsxCode(props) {
   );
 }
 
-ContentSlotJsxCode.defaultProps = {
-  content: \\"\\",
-  slotReference: undefined,
-  slotContent: undefined,
-};
-
 export default ContentSlotJsxCode;
 "
 `;
@@ -2107,7 +2103,16 @@ exports[`React - stateType: solid > jsx > Javascript Test > defaultProps 1`] = `
 "\\"use client\\";
 import * as React from \\"react\\";
 
-function Button(props) {
+function Button(
+  props = {
+    text: \\"default text\\",
+    link: \\"https://builder.io/\\",
+    openLinkInNewTab: false,
+    onClick: () => {
+      console.log(\\"hi\\");
+    },
+  }
+) {
   return (
     <div>
       {props.link ? (
@@ -2132,15 +2137,6 @@ function Button(props) {
   );
 }
 
-Button.defaultProps = {
-  text: \\"default text\\",
-  link: \\"https://builder.io/\\",
-  openLinkInNewTab: false,
-  onClick: () => {
-    console.log(\\"hi\\");
-  },
-};
-
 export default Button;
 "
 `;
@@ -2149,7 +2145,14 @@ exports[`React - stateType: solid > jsx > Javascript Test > defaultPropsOutsideC
 "\\"use client\\";
 import * as React from \\"react\\";
 
-function Button(props) {
+function Button(
+  props = {
+    text: \\"default text\\",
+    link: \\"https://builder.io/\\",
+    openLinkInNewTab: false,
+    onClick: () => {},
+  }
+) {
   return (
     <div>
       {props.link ? (
@@ -2174,13 +2177,6 @@ function Button(props) {
   );
 }
 
-Button.defaultProps = {
-  text: \\"default text\\",
-  link: \\"https://builder.io/\\",
-  openLinkInNewTab: false,
-  onClick: () => {},
-};
-
 export default Button;
 "
 `;
@@ -4298,7 +4294,13 @@ type Props = {
 };
 import type { JSX } from \\"../../../../jsx-runtime\\";
 
-function ContentSlotJsxCode(props: Props) {
+function ContentSlotJsxCode(
+  props: Props = {
+    content: \\"\\",
+    slotReference: undefined,
+    slotContent: undefined,
+  }
+) {
   const state = useMutable({
     name: \\"king\\",
     showContent: false,
@@ -4335,12 +4337,6 @@ function ContentSlotJsxCode(props: Props) {
   );
 }
 
-ContentSlotJsxCode.defaultProps = {
-  content: \\"\\",
-  slotReference: undefined,
-  slotContent: undefined,
-};
-
 export default ContentSlotJsxCode;
 "
 `;
@@ -6057,7 +6053,16 @@ export interface ButtonProps {
   onClick?: () => void;
 }
 
-function Button(props: ButtonProps) {
+function Button(
+  props: ButtonProps = {
+    text: \\"default text\\",
+    link: \\"https://builder.io/\\",
+    openLinkInNewTab: false,
+    onClick: () => {
+      console.log(\\"hi\\");
+    },
+  }
+) {
   return (
     <div>
       {props.link ? (
@@ -6082,15 +6087,6 @@ function Button(props: ButtonProps) {
   );
 }
 
-Button.defaultProps = {
-  text: \\"default text\\",
-  link: \\"https://builder.io/\\",
-  openLinkInNewTab: false,
-  onClick: () => {
-    console.log(\\"hi\\");
-  },
-};
-
 export default Button;
 "
 `;
@@ -6107,7 +6103,14 @@ export interface ButtonProps {
   onClick: () => void;
 }
 
-function Button(props: ButtonProps) {
+function Button(
+  props: ButtonProps = {
+    text: \\"default text\\",
+    link: \\"https://builder.io/\\",
+    openLinkInNewTab: false,
+    onClick: () => {},
+  }
+) {
   return (
     <div>
       {props.link ? (
@@ -6132,13 +6135,6 @@ function Button(props: ButtonProps) {
   );
 }
 
-Button.defaultProps = {
-  text: \\"default text\\",
-  link: \\"https://builder.io/\\",
-  openLinkInNewTab: false,
-  onClick: () => {},
-};
-
 export default Button;
 "
 `;
@@ -7852,7 +7848,7 @@ exports[`React - stateType: solid > svelte > Javascript Test > classDirective 1`
 import * as React from \\"react\\";
 import { useMutable } from \\"react-solid-state\\";
 
-function MyComponent(props) {
+function MyComponent(props = {}) {
   const state = useMutable({ focus: true });
 
   return (
@@ -7864,8 +7860,6 @@ function MyComponent(props) {
   );
 }
 
-MyComponent.defaultProps = {};
-
 export default MyComponent;
 "
 `;
@@ -8258,7 +8252,7 @@ exports[`React - stateType: solid > svelte > Typescript Test > classDirective 1`
 import * as React from \\"react\\";
 import { useMutable } from \\"react-solid-state\\";
 
-function MyComponent(props: any) {
+function MyComponent(props: any = {}) {
   const state = useMutable({ focus: true });
 
   return (
@@ -8270,8 +8264,6 @@ function MyComponent(props: any) {
   );
 }
 
-MyComponent.defaultProps = {};
-
 export default MyComponent;
 "
 `;
diff --git a/packages/core/src/__tests__/__snapshots__/react-state-valtio.test.ts.snap b/packages/core/src/__tests__/__snapshots__/react-state-valtio.test.ts.snap
index e7c9ed47cf..51e426fe1a 100644
--- a/packages/core/src/__tests__/__snapshots__/react-state-valtio.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/react-state-valtio.test.ts.snap
@@ -569,7 +569,9 @@ exports[`React - stateType: valtio > jsx > Javascript Test > ContentSlotJSX 1`]
 import * as React from \\"react\\";
 import { useLocalProxy } from \\"valtio/utils\\";
 
-function ContentSlotJsxCode(props) {
+function ContentSlotJsxCode(
+  props = { content: \\"\\", slotReference: undefined, slotContent: undefined }
+) {
   const state = useLocalProxy({
     name: \\"king\\",
     showContent: false,
@@ -606,12 +608,6 @@ function ContentSlotJsxCode(props) {
   );
 }
 
-ContentSlotJsxCode.defaultProps = {
-  content: \\"\\",
-  slotReference: undefined,
-  slotContent: undefined,
-};
-
 export default ContentSlotJsxCode;
 "
 `;
@@ -2110,7 +2106,16 @@ exports[`React - stateType: valtio > jsx > Javascript Test > defaultProps 1`] =
 "\\"use client\\";
 import * as React from \\"react\\";
 
-function Button(props) {
+function Button(
+  props = {
+    text: \\"default text\\",
+    link: \\"https://builder.io/\\",
+    openLinkInNewTab: false,
+    onClick: () => {
+      console.log(\\"hi\\");
+    },
+  }
+) {
   return (
     <div>
       {props.link ? (
@@ -2135,15 +2140,6 @@ function Button(props) {
   );
 }
 
-Button.defaultProps = {
-  text: \\"default text\\",
-  link: \\"https://builder.io/\\",
-  openLinkInNewTab: false,
-  onClick: () => {
-    console.log(\\"hi\\");
-  },
-};
-
 export default Button;
 "
 `;
@@ -2152,7 +2148,14 @@ exports[`React - stateType: valtio > jsx > Javascript Test > defaultPropsOutside
 "\\"use client\\";
 import * as React from \\"react\\";
 
-function Button(props) {
+function Button(
+  props = {
+    text: \\"default text\\",
+    link: \\"https://builder.io/\\",
+    openLinkInNewTab: false,
+    onClick: () => {},
+  }
+) {
   return (
     <div>
       {props.link ? (
@@ -2177,13 +2180,6 @@ function Button(props) {
   );
 }
 
-Button.defaultProps = {
-  text: \\"default text\\",
-  link: \\"https://builder.io/\\",
-  openLinkInNewTab: false,
-  onClick: () => {},
-};
-
 export default Button;
 "
 `;
@@ -4301,7 +4297,13 @@ type Props = {
 };
 import type { JSX } from \\"../../../../jsx-runtime\\";
 
-function ContentSlotJsxCode(props: Props) {
+function ContentSlotJsxCode(
+  props: Props = {
+    content: \\"\\",
+    slotReference: undefined,
+    slotContent: undefined,
+  }
+) {
   const state = useLocalProxy({
     name: \\"king\\",
     showContent: false,
@@ -4338,12 +4340,6 @@ function ContentSlotJsxCode(props: Props) {
   );
 }
 
-ContentSlotJsxCode.defaultProps = {
-  content: \\"\\",
-  slotReference: undefined,
-  slotContent: undefined,
-};
-
 export default ContentSlotJsxCode;
 "
 `;
@@ -6063,7 +6059,16 @@ export interface ButtonProps {
   onClick?: () => void;
 }
 
-function Button(props: ButtonProps) {
+function Button(
+  props: ButtonProps = {
+    text: \\"default text\\",
+    link: \\"https://builder.io/\\",
+    openLinkInNewTab: false,
+    onClick: () => {
+      console.log(\\"hi\\");
+    },
+  }
+) {
   return (
     <div>
       {props.link ? (
@@ -6088,15 +6093,6 @@ function Button(props: ButtonProps) {
   );
 }
 
-Button.defaultProps = {
-  text: \\"default text\\",
-  link: \\"https://builder.io/\\",
-  openLinkInNewTab: false,
-  onClick: () => {
-    console.log(\\"hi\\");
-  },
-};
-
 export default Button;
 "
 `;
@@ -6113,7 +6109,14 @@ export interface ButtonProps {
   onClick: () => void;
 }
 
-function Button(props: ButtonProps) {
+function Button(
+  props: ButtonProps = {
+    text: \\"default text\\",
+    link: \\"https://builder.io/\\",
+    openLinkInNewTab: false,
+    onClick: () => {},
+  }
+) {
   return (
     <div>
       {props.link ? (
@@ -6138,13 +6141,6 @@ function Button(props: ButtonProps) {
   );
 }
 
-Button.defaultProps = {
-  text: \\"default text\\",
-  link: \\"https://builder.io/\\",
-  openLinkInNewTab: false,
-  onClick: () => {},
-};
-
 export default Button;
 "
 `;
@@ -7858,7 +7854,7 @@ exports[`React - stateType: valtio > svelte > Javascript Test > classDirective 1
 import * as React from \\"react\\";
 import { useLocalProxy } from \\"valtio/utils\\";
 
-function MyComponent(props) {
+function MyComponent(props = {}) {
   const state = useLocalProxy({ focus: true });
 
   return (
@@ -7870,8 +7866,6 @@ function MyComponent(props) {
   );
 }
 
-MyComponent.defaultProps = {};
-
 export default MyComponent;
 "
 `;
@@ -8264,7 +8258,7 @@ exports[`React - stateType: valtio > svelte > Typescript Test > classDirective 1
 import * as React from \\"react\\";
 import { useLocalProxy } from \\"valtio/utils\\";
 
-function MyComponent(props: any) {
+function MyComponent(props: any = {}) {
   const state = useLocalProxy({ focus: true });
 
   return (
@@ -8276,8 +8270,6 @@ function MyComponent(props: any) {
   );
 }
 
-MyComponent.defaultProps = {};
-
 export default MyComponent;
 "
 `;
diff --git a/packages/core/src/__tests__/__snapshots__/react-state-variables.test.ts.snap b/packages/core/src/__tests__/__snapshots__/react-state-variables.test.ts.snap
index b3f4293bd6..68fd1b9a29 100644
--- a/packages/core/src/__tests__/__snapshots__/react-state-variables.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/react-state-variables.test.ts.snap
@@ -1,63 +1,115 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`React - stateType: variables > jsx > Javascript Test > AdvancedRef 1`] = `
-"'(' expected. (18:34)
-  16 | const inputNoArgRef = useRef(null);
-  17 | const name= 'PatrickJS'
-> 18 | const onBlur = onBlur = function function onBlur() {
-     |                                  ^
-  19 | // Maintain focus
-  20 | inputRef.current.focus();
-  21 | }"
-`;
-
-exports[`React - stateType: variables > jsx > Javascript Test > Basic 1`] = `
 "\\"use client\\";
 import * as React from \\"react\\";
+import { useRef, useEffect } from \\"react\\";
 
-export const DEFAULT_VALUES = {
-  name: \\"Steve\\",
-};
-
-function MyBasicComponent(props) {
-  const name = \\"Steve\\";
-  const underscore_fn_name = function underscore_fn_name() {
-    return \\"bar\\";
+function MyBasicRefComponent(props) {
+  const inputRef = useRef(null);
+  const inputNoArgRef = useRef(null);
+  const name = \\"PatrickJS\\";
+  const onBlur = function onBlur() {
+    // Maintain focus
+    inputRef.current.focus();
+  };
+  const lowerCaseName = function lowerCaseName() {
+    return name.toLowerCase();
   };
-  const age = 1;
-  const sports = [\\"\\"];
+
+  useEffect(() => {
+    console.log(\\"Received an update\\");
+  }, [inputRef.current, inputNoArgRef.current]);
 
   return (
     <>
-      <div className=\\"test div\\">
-        <input
-          value={DEFAULT_VALUES.name || name}
-          onChange={(myEvent) => (name = myEvent.target.value)}
-        />
-        Hello! I can run in React, Vue, Solid, or Liquid! &gt;
+      <div>
+        {props.showInput ? (
+          <>
+            <input
+              className=\\"input\\"
+              ref={inputRef}
+              value={name}
+              onBlur={(event) => onBlur()}
+              onChange={(event) => (name = event.target.value)}
+            />
+            <label htmlFor=\\"cars\\" ref={inputNoArgRef}>
+              Choose a car:
+            </label>
+            <select name=\\"cars\\" id=\\"cars\\">
+              <option value=\\"supra\\">GR Supra</option>
+              <option value=\\"86\\">GR 86</option>
+            </select>
+          </>
+        ) : null}
+        Hello
+        {lowerCaseName()}! I can run in React, Qwik, Vue, Solid, or Web
+        Component!
       </div>
       <style jsx>{\`
-        .div {
-          padding: 10px;
+        .input {
+          color: red;
         }
       \`}</style>
     </>
   );
 }
 
-export default MyBasicComponent;
+export default MyBasicRefComponent;
 "
 `;
 
+exports[`React - stateType: variables > jsx > Javascript Test > Basic 1`] = `
+"'function' is not allowed as a variable declaration name. (18:7)
+  16 |   function MyBasicComponent(props) {
+  17 |   const name= 'Steve'
+> 18 | const function underscore_fn_name() {
+     |       ^
+  19 | return 'bar';
+  20 | }
+  21 | const age= 1"
+`;
+
 exports[`React - stateType: variables > jsx > Javascript Test > Basic Context 1`] = `
-"'(' expected. (16:38)
-  14 |   function MyBasicComponent(props) {
-  15 |   const name= 'PatrickJS'
-> 16 | const onChange = onChange = function function onChange() {
-     |                                      ^
-  17 | const change = myService.method('change');
-  18 | console.log(change);
-  19 | }"
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useContext, useRef, useEffect } from \\"react\\";
+import { Injector, MyService, createInjector } from \\"@dummy/injection-js\\";
+
+function MyBasicComponent(props) {
+  const name = \\"PatrickJS\\";
+  const onChange = function onChange() {
+    const change = myService.method(\\"change\\");
+    console.log(change);
+  };
+
+  const myService = useContext(MyService);
+
+  const hasInitialized = useRef(false);
+  if (!hasInitialized.current) {
+    const hi = myService.method(\\"hi\\");
+    console.log(hi);
+    hasInitialized.current = true;
+  }
+
+  useEffect(() => {
+    const bye = myService.method(\\"hi\\");
+    console.log(bye);
+  }, []);
+
+  return (
+    <Injector.Provider value={createInjector()}>
+      <div>
+        {myService.method(\\"hello\\") + name}
+        Hello! I can run in React, Vue, Solid, or Liquid!
+        <input onChange={(event) => onChange} />
+      </div>
+    </Injector.Provider>
+  );
+}
+
+export default MyBasicComponent;
+"
 `;
 
 exports[`React - stateType: variables > jsx > Javascript Test > Basic OnMount Update 1`] = `
@@ -227,25 +279,82 @@ export default MyBasicForComponent;
 `;
 
 exports[`React - stateType: variables > jsx > Javascript Test > BasicRef 1`] = `
-"'(' expected. (18:34)
-  16 | const inputNoArgRef = useRef(null);
-  17 | const name= 'PatrickJS'
-> 18 | const onBlur = onBlur = function function onBlur() {
-     |                                  ^
-  19 | // Maintain focus
-  20 | inputRef.current?.focus();
-  21 | }"
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useRef } from \\"react\\";
+
+function MyBasicRefComponent(props) {
+  const inputRef = useRef(null);
+  const inputNoArgRef = useRef(null);
+  const name = \\"PatrickJS\\";
+  const onBlur = function onBlur() {
+    // Maintain focus
+    inputRef.current?.focus();
+  };
+  const lowerCaseName = function lowerCaseName() {
+    return name.toLowerCase();
+  };
+
+  return (
+    <>
+      <div>
+        {props.showInput ? (
+          <>
+            <input
+              className=\\"input\\"
+              ref={inputRef}
+              value={name}
+              onBlur={(event) => onBlur()}
+              onChange={(event) => (name = event.target.value)}
+            />
+            <label htmlFor=\\"cars\\" ref={inputNoArgRef}>
+              Choose a car:
+            </label>
+            <select name=\\"cars\\" id=\\"cars\\">
+              <option value=\\"supra\\">GR Supra</option>
+              <option value=\\"86\\">GR 86</option>
+            </select>
+          </>
+        ) : null}
+        Hello
+        {lowerCaseName()}! I can run in React, Qwik, Vue, Solid, or Web
+        Component!
+      </div>
+      <style jsx>{\`
+        .input {
+          color: red;
+        }
+      \`}</style>
+    </>
+  );
+}
+
+export default MyBasicRefComponent;
+"
 `;
 
 exports[`React - stateType: variables > jsx > Javascript Test > BasicRefAssignment 1`] = `
-"'(' expected. (16:46)
-  14 |   function MyBasicRefAssignmentComponent(props) {
-  15 |   const holdValueRef = useRef('Patrick');
-> 16 | const handlerClick = handlerClick = function function handlerClick(event) {
-     |                                              ^
-  17 | event.preventDefault();
-  18 | console.log('current value', holdValueRef.current);
-  19 | holdValueRef.current = holdValueRef.current + 'JS';"
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useRef } from \\"react\\";
+
+function MyBasicRefAssignmentComponent(props) {
+  const holdValueRef = useRef(\\"Patrick\\");
+  const handlerClick = function handlerClick(event) {
+    event.preventDefault();
+    console.log(\\"current value\\", holdValueRef.current);
+    holdValueRef.current = holdValueRef.current + \\"JS\\";
+  };
+
+  return (
+    <div>
+      <button onClick={async (evt) => await handlerClick(evt)}>Click</button>
+    </div>
+  );
+}
+
+export default MyBasicRefAssignmentComponent;
+"
 `;
 
 exports[`React - stateType: variables > jsx > Javascript Test > BasicRefPrevious 1`] = `
@@ -318,63 +427,14 @@ export default Button;
 `;
 
 exports[`React - stateType: variables > jsx > Javascript Test > Columns 1`] = `
-"import * as React from \\"react\\";
-
-function Column(props) {
-  const getColumns = function getColumns() {
-    return props.columns || [];
-  };
-  const getGutterSize = function getGutterSize() {
-    return typeof props.space === \\"number\\" ? props.space || 0 : 20;
-  };
-  const getWidth = function getWidth(index) {
-    const columns = getColumns();
-    return (columns[index] && columns[index].width) || 100 / columns.length;
-  };
-  const getColumnCssWidth = function getColumnCssWidth(index) {
-    const columns = getColumns();
-    const gutterSize = getGutterSize();
-    const subtractWidth = (gutterSize * (columns.length - 1)) / columns.length;
-    return \`calc(\${getWidth(index)}% - \${subtractWidth}px)\`;
-  };
-
-  return (
-    <>
-      <div className=\\"builder-columns div\\">
-        {props.columns?.map((column, index) => (
-          <div className=\\"builder-column div-2\\">
-            {column.content}
-            {index}
-          </div>
-        ))}
-      </div>
-      <style jsx>{\`
-        .div {
-          display: flex;
-          flex-direction: column;
-          align-items: stretch;
-          line-height: normal;
-        }
-        @media (max-width: 999px) {
-          .div {
-            flex-direction: row;
-          }
-        }
-        @media (max-width: 639px) {
-          .div {
-            flex-direction: row-reverse;
-          }
-        }
-        .div-2 {
-          flex-grow: 1;
-        }
-      \`}</style>
-    </>
-  );
-}
-
-export default Column;
-"
+"'function' is not allowed as a variable declaration name. (14:9)
+  12 |
+  13 |   function Column(props) {
+> 14 |   const function getColumns() {
+     |         ^
+  15 | return props.columns || [];
+  16 | }
+  17 | const function getGutterSize() {"
 `;
 
 exports[`React - stateType: variables > jsx > Javascript Test > ContentSlotHtml 1`] = `
@@ -399,214 +459,58 @@ export default ContentSlotCode;
 `;
 
 exports[`React - stateType: variables > jsx > Javascript Test > ContentSlotJSX 1`] = `
-"\\"use client\\";
-import * as React from \\"react\\";
-
-function ContentSlotJsxCode(props) {
-  const name = \\"king\\";
-  const showContent = false;
-  const cls = function cls() {
-    return props.slotContent && props.children ? \`\${name}-content\` : \\"\\";
-  };
-  const show = function show() {
-    props.slotContent ? 1 : \\"\\";
-  };
-
-  return (
-    <>
-      {props.slotReference ? (
-        <>
-          <div
-            name={props.slotContent ? \\"name1\\" : \\"name2\\"}
-            title={props.slotContent ? \\"title1\\" : \\"title2\\"}
-            {...props.attributes}
-            onClick={(event) => show()}
-            className={cls()}
-          >
-            {showContent && props.slotContent ? (
-              <>{props.content || \\"{props.content}\\"}</>
-            ) : null}
-            <div>
-              <hr />
-            </div>
-            <div>{props.children}</div>
-          </div>
-        </>
-      ) : null}
-    </>
-  );
-}
-
-ContentSlotJsxCode.defaultProps = {
-  content: \\"\\",
-  slotReference: undefined,
-  slotContent: undefined,
-};
-
-export default ContentSlotJsxCode;
-"
+"'function' is not allowed as a variable declaration name. (17:7)
+  15 |   const name= 'king'
+  16 | const showContent= false
+> 17 | const function cls() {
+     |       ^
+  18 | return props.slotContent && props.children ? \`\${name}-content\` : '';
+  19 | }
+  20 | const function show() {"
 `;
 
 exports[`React - stateType: variables > jsx > Javascript Test > CustomCode 1`] = `
-"\\"use client\\";
-import * as React from \\"react\\";
-import { useRef, useEffect } from \\"react\\";
-
-function CustomCode(props) {
-  const elem = useRef(null);
-  const scriptsInserted = [];
-  const scriptsRun = [];
-  const findAndRunScripts = function findAndRunScripts() {
-    // TODO: Move this function to standalone one in '@builder.io/utils'
-    if (elem.current && typeof window !== \\"undefined\\") {
-      /** @type {HTMLScriptElement[]} */
-      const scripts = elem.current.getElementsByTagName(\\"script\\");
-
-      for (let i = 0; i < scripts.length; i++) {
-        const script = scripts[i];
-
-        if (script.src) {
-          if (scriptsInserted.includes(script.src)) {
-            continue;
-          }
-
-          scriptsInserted.push(script.src);
-          const newScript = document.createElement(\\"script\\");
-          newScript.async = true;
-          newScript.src = script.src;
-          document.head.appendChild(newScript);
-        } else if (
-          !script.type ||
-          [
-            \\"text/javascript\\",
-            \\"application/javascript\\",
-            \\"application/ecmascript\\",
-          ].includes(script.type)
-        ) {
-          if (scriptsRun.includes(script.innerText)) {
-            continue;
-          }
-
-          try {
-            scriptsRun.push(script.innerText);
-            new Function(script.innerText)();
-          } catch (error) {
-            console.warn(\\"\`CustomCode\`: Error running script:\\", error);
-          }
-        }
-      }
-    }
-  };
-
-  useEffect(() => {
-    findAndRunScripts();
-  }, []);
-
-  return (
-    <div
-      ref={elem}
-      className={
-        \\"builder-custom-code\\" + (props.replaceNodes ? \\" replace-nodes\\" : \\"\\")
-      }
-      dangerouslySetInnerHTML={{ __html: props.code }}
-    />
-  );
-}
-
-export default CustomCode;
-"
+"'function' is not allowed as a variable declaration name. (18:7)
+  16 | const scriptsInserted= []
+  17 | const scriptsRun= []
+> 18 | const function findAndRunScripts() {
+     |       ^
+  19 | // TODO: Move this function to standalone one in '@builder.io/utils'
+  20 | if (elem.current && typeof window !== 'undefined') {
+  21 | /** @type {HTMLScriptElement[]} */"
 `;
 
 exports[`React - stateType: variables > jsx > Javascript Test > Embed 1`] = `
-"\\"use client\\";
-import * as React from \\"react\\";
-import { useRef, useEffect } from \\"react\\";
-
-function CustomCode(props) {
-  const elem = useRef(null);
-  const scriptsInserted = [];
-  const scriptsRun = [];
-  const findAndRunScripts = function findAndRunScripts() {
-    // TODO: Move this function to standalone one in '@builder.io/utils'
-    if (elem.current && typeof window !== \\"undefined\\") {
-      /** @type {HTMLScriptElement[]} */
-      const scripts = elem.current.getElementsByTagName(\\"script\\");
-
-      for (let i = 0; i < scripts.length; i++) {
-        const script = scripts[i];
-
-        if (script.src) {
-          if (scriptsInserted.includes(script.src)) {
-            continue;
-          }
-
-          scriptsInserted.push(script.src);
-          const newScript = document.createElement(\\"script\\");
-          newScript.async = true;
-          newScript.src = script.src;
-          document.head.appendChild(newScript);
-        } else if (
-          !script.type ||
-          [
-            \\"text/javascript\\",
-            \\"application/javascript\\",
-            \\"application/ecmascript\\",
-          ].includes(script.type)
-        ) {
-          if (scriptsRun.includes(script.innerText)) {
-            continue;
-          }
-
-          try {
-            scriptsRun.push(script.innerText);
-            new Function(script.innerText)();
-          } catch (error) {
-            console.warn(\\"\`CustomCode\`: Error running script:\\", error);
-          }
-        }
-      }
-    }
-  };
-
-  useEffect(() => {
-    findAndRunScripts();
-  }, []);
-
-  return (
-    <div
-      ref={elem}
-      className={
-        \\"builder-custom-code\\" + (props.replaceNodes ? \\" replace-nodes\\" : \\"\\")
-      }
-      dangerouslySetInnerHTML={{ __html: props.code }}
-    />
-  );
-}
-
-export default CustomCode;
-"
+"'function' is not allowed as a variable declaration name. (18:7)
+  16 | const scriptsInserted= []
+  17 | const scriptsRun= []
+> 18 | const function findAndRunScripts() {
+     |       ^
+  19 | // TODO: Move this function to standalone one in '@builder.io/utils'
+  20 | if (elem.current && typeof window !== 'undefined') {
+  21 | /** @type {HTMLScriptElement[]} */"
 `;
 
 exports[`React - stateType: variables > jsx > Javascript Test > Form 1`] = `
-"',' expected. (108:2796)
-  106 | if (contentType && contentType !== 'multipart/form-data') {
-  107 |   if (
-> 108 |   /* Zapier doesn't allow content-type header to be sent from browsers */   !(sendWithJs && props.action?.includes('zapier.com'))) {     headers['content-type'] = contentType;   } }  const presubmitEvent = new CustomEvent('presubmit', {   detail: {     body   } });  if (formRef.current) {   formRef.current.dispatchEvent(presubmitEvent);    if (presubmitEvent.defaultPrevented) {     return;   } }  formState = 'sending'; const formUrl = \`\${builder.env === 'dev' ? 'http://localhost:5000' : 'https://builder.io'}/api/v1/form-submit?apiKey=\${builder.apiKey}&to=\${btoa(props.sendSubmissionsToEmail || '')}&name=\${encodeURIComponent(props.name || '')}\`; fetch(props.sendSubmissionsTo === 'email' ? formUrl : props.action /* TODO: throw error if no action URL */ , {   body,   headers,   method: props.method || 'post' }).then(async res => {   let body;   const contentType = res.headers.get('content-type');    if (contentType && contentType.indexOf('application/json') !== -1) {     body = await res.json();   } else {     body = await res.text();   }    if (!res.ok && props.errorMessagePath) {     /* TODO: allow supplying an error formatter function */     let message = get(body, props.errorMessagePath);      if (message) {       if (typeof message !== 'string') {         /* TODO: ideally convert json to yaml so it woul dbe like          error: - email has been taken */         message = JSON.stringify(message);       }        formErrorMessage = message;     }   }    responseData = body;   formState = res.ok ? 'success' : 'error';    if (res.ok) {     const submitSuccessEvent = new CustomEvent('submit:success', {       detail: {         res,         body       }     });      if (formRef.current) {       formRef.current.dispatchEvent(submitSuccessEvent);        if (submitSuccessEvent.defaultPrevented) {         return;       }       /* TODO: option to turn this on/off? */         if (props.resetFormOnSubmit !== false) {         formRef.current.reset();       }     }     /* TODO: client side route event first that can be preventDefaulted */       if (props.successUrl) {       if (formRef.current) {         const event = new CustomEvent('route', {           detail: {             url: props.successUrl           }         });         formRef.current.dispatchEvent(event);          if (!event.defaultPrevented) {           location.href = props.successUrl;         }       } else {         location.href = props.successUrl;       }     }   } }, err => {   const submitErrorEvent = new CustomEvent('submit:error', {     detail: {       error: err     }   });    if (formRef.current) {     formRef.current.dispatchEvent(submitErrorEvent);      if (submitErrorEvent.defaultPrevented) {       return;     }   }    responseData = err;   formState = 'error'; }); } }                 return (   <>   <form  validate={props.validate}  ref={formRef}  action={!props.sendWithJs && props.action}  method={props.method}  name={props.name}  onSubmit={(event) => onSubmit(event) }  {...(props.attributes)}>{props.builderBlock && props.builderBlock.children ? (   <>{props.builderBlock?.children?.map((block, index) => (   <BuilderBlockComponent  key={block.id}  block={block}  index={index}  /> ))}</> ) : null}{submissionState() === 'error' ? (   <BuilderBlocks  dataPath=\\"errorMessage\\"  blocks={props.errorMessage}  /> ) : null}{submissionState() === 'sending' ? (   <BuilderBlocks  dataPath=\\"sendingMessage\\"  blocks={props.sendingMessage}  /> ) : null}{submissionState() === 'error' && responseData ? (   <pre className=\\"builder-form-error-text pre\\">{JSON.stringify(responseData, null, 2)}</pre> ) : null}{submissionState() === 'success' ? (   <BuilderBlocks  dataPath=\\"successMessage\\"  blocks={props.successMessage}  /> ) : null}</form>   <style jsx>{\`.pre {   padding: 10px;   color: red;   text-align: center; }\`}</style>     </> ); }         export default FormComponent;
-      |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            ^
-  109 |
-  110 |
-  111 |"
+"'function' is not allowed as a variable declaration name. (20:7)
+  18 | const responseData= null
+  19 | const formErrorMessage= ''
+> 20 | const function submissionState() {
+     |       ^
+  21 | return Builder.isEditing && props.previewState || formState;
+  22 | }
+  23 | const function onSubmit(event) {"
 `;
 
 exports[`React - stateType: variables > jsx > Javascript Test > Image 1`] = `
-"'(' expected. (25:40)
-  23 | return !!props.lazy && isBrowser();
-  24 | }
-> 25 | const isBrowser = isBrowser = function function isBrowser() {
-     |                                        ^
-  26 | return typeof window !== 'undefined' && window.navigator.product != 'ReactNative';
-  27 | }
-  28 | const load= false"
+"'function' is not allowed as a variable declaration name. (18:7)
+  16 | const scrollListener= null
+  17 | const imageLoaded= false
+> 18 | const function setLoaded() {
+     |       ^
+  19 | imageLoaded = true;
+  20 | }
+  21 | const function useLazyLoading() {"
 `;
 
 exports[`React - stateType: variables > jsx > Javascript Test > Image State 1`] = `
@@ -683,25 +587,14 @@ export default FormInputComponent;
 `;
 
 exports[`React - stateType: variables > jsx > Javascript Test > InputParent 1`] = `
-"import * as React from \\"react\\";
-import FormInputComponent from \\"./input.raw\\";
-
-function Stepper(props) {
-  const handleChange = function handleChange(value) {
-    console.log(value);
-  };
-
-  return (
-    <FormInputComponent
-      name=\\"kingzez\\"
-      type=\\"text\\"
-      onChange={(value) => handleChange(value)}
-    />
-  );
-}
-
-export default Stepper;
-"
+"'function' is not allowed as a variable declaration name. (14:9)
+  12 |
+  13 |   function Stepper(props) {
+> 14 |   const function handleChange(value) {
+     |         ^
+  15 | console.log(value);
+  16 | }
+  17 |"
 `;
 
 exports[`React - stateType: variables > jsx > Javascript Test > NestedStore 1`] = `
@@ -862,150 +755,47 @@ export default SlotCode;
 `;
 
 exports[`React - stateType: variables > jsx > Javascript Test > Stamped.io 1`] = `
-"\\"use client\\";
-import * as React from \\"react\\";
-import { useEffect } from \\"react\\";
-import { kebabCase, snakeCase } from \\"lodash\\";
-
-function SmileReviews(props) {
-  const reviews = [];
-  const name = \\"test\\";
-  const showReviewPrompt = false;
-  const kebabCaseValue = function kebabCaseValue() {
-    return kebabCase(\\"testThat\\");
-  };
-  const snakeCaseValue = function snakeCaseValue() {
-    return snakeCase(\\"testThis\\");
-  };
-
-  useEffect(() => {
-    fetch(
-      \`https://stamped.io/api/widget/reviews?storeUrl=builder-io.myshopify.com&apiKey=\${
-        props.apiKey || \\"pubkey-8bbDq7W6w4sB3OWeM1HUy2s47702hM\\"
-      }&productId=\${props.productId || \\"2410511106127\\"}\`
-    )
-      .then((res) => res.json())
-      .then((data) => {
-        reviews = data.data;
-      });
-  }, []);
-
-  return (
-    <>
-      <div data-user={name}>
-        <button onClick={(event) => (showReviewPrompt = true)}>
-          Write a review
-        </button>
-        {showReviewPrompt || \\"asdf\\" ? (
-          <>
-            <input placeholder=\\"Email\\" />
-            <input placeholder=\\"Title\\" className=\\"input\\" />
-            <textarea
-              placeholder=\\"How was your experience?\\"
-              className=\\"textarea\\"
-            />
-            <button
-              className=\\"button\\"
-              onClick={(ev) => {
-                ev.preventDefault();
-                showReviewPrompt = false;
-              }}
-            >
-              Submit
-            </button>
-          </>
-        ) : null}
-        {reviews?.map((review, index) => (
-          <div className=\\"review\\" key={review.id}>
-            <img className=\\"img\\" src={review.avatar} />
-            <div className={showReviewPrompt ? \\"bg-primary\\" : \\"bg-secondary\\"}>
-              <div>N: {index}</div>
-              <div>{review.author}</div>
-              <div>{review.reviewMessage}</div>
-            </div>
-          </div>
-        ))}
-      </div>
-      <style jsx>{\`
-        .input {
-          display: block;
-        }
-        .textarea {
-          display: block;
-        }
-        .button {
-          display: block;
-        }
-        .review {
-          margin: 10px;
-          padding: 10px;
-          background: white;
-          display: flex;
-          border-radius: 5px;
-          box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
-          -webkit-font-smoothing: antialiased;
-        }
-        .img {
-          height: 30px;
-          width: 30px;
-          margin-right: 10px;
-        }
-      \`}</style>
-    </>
-  );
-}
-
-export default SmileReviews;
-"
+"'function' is not allowed as a variable declaration name. (18:7)
+  16 | const name= 'test'
+  17 | const showReviewPrompt= false
+> 18 | const function kebabCaseValue() {
+     |       ^
+  19 | return kebabCase('testThat');
+  20 | }
+  21 | const function snakeCaseValue() {"
 `;
 
 exports[`React - stateType: variables > jsx > Javascript Test > StoreComment 1`] = `
-"\\"use client\\";
-import * as React from \\"react\\";
-
-function StringLiteralStore(props) {
-  const foo = true;
-  const bar = function bar() {};
-
-  return <>{foo}</>;
-}
-
-export default StringLiteralStore;
-"
+"'function' is not allowed as a variable declaration name. (16:7)
+  14 |   function StringLiteralStore(props) {
+  15 |   const foo= true
+> 16 | const function bar() {}
+     |       ^
+  17 |
+  18 |
+  19 |"
 `;
 
 exports[`React - stateType: variables > jsx > Javascript Test > StoreShadowVars 1`] = `
-"\\"use client\\";
-import * as React from \\"react\\";
-
-function MyComponent(props) {
-  const errors = {};
-  const foo = function foo(errors) {
-    return errors;
-  };
-
-  return <>{foo(errors)}</>;
-}
-
-export default MyComponent;
-"
+"'function' is not allowed as a variable declaration name. (16:7)
+  14 |   function MyComponent(props) {
+  15 |   const errors= {}
+> 16 | const function foo(errors) {
+     |       ^
+  17 | return errors;
+  18 | }
+  19 |"
 `;
-
-exports[`React - stateType: variables > jsx > Javascript Test > StoreWithState 1`] = `
-"\\"use client\\";
-import * as React from \\"react\\";
-
-function MyComponent(props) {
-  const foo = false;
-  const bar = function bar() {
-    return foo;
-  };
-
-  return <>{bar()}</>;
-}
-
-export default MyComponent;
-"
+
+exports[`React - stateType: variables > jsx > Javascript Test > StoreWithState 1`] = `
+"'function' is not allowed as a variable declaration name. (16:7)
+  14 |   function MyComponent(props) {
+  15 |   const foo= false
+> 16 | const function bar() {
+     |       ^
+  17 | return foo;
+  18 | }
+  19 |"
 `;
 
 exports[`React - stateType: variables > jsx > Javascript Test > Submit 1`] = `
@@ -1072,32 +862,14 @@ export default Textarea;
 `;
 
 exports[`React - stateType: variables > jsx > Javascript Test > UseValueAndFnFromStore 1`] = `
-"\\"use client\\";
-import * as React from \\"react\\";
-import { useEffect } from \\"react\\";
-
-function UseValueAndFnFromStore(props) {
-  const _id = \\"abc\\";
-  const _active = false;
-  const _do = function _do(id) {
-    _active = !!id;
-
-    if (props.onChange) {
-      props.onChange(_active);
-    }
-  };
-
-  useEffect(() => {
-    if (_do) {
-      _do(_id);
-    }
-  });
-
-  return <div>Test</div>;
-}
-
-export default UseValueAndFnFromStore;
-"
+"'function' is not allowed as a variable declaration name. (17:7)
+  15 |   const _id= 'abc'
+  16 | const _active= false
+> 17 | const function _do(id) {
+     |       ^
+  18 | _active = !!id;
+  19 |
+  20 | if (props.onChange) {"
 `;
 
 exports[`React - stateType: variables > jsx > Javascript Test > Video 1`] = `
@@ -1133,23 +905,14 @@ export default Video;
 `;
 
 exports[`React - stateType: variables > jsx > Javascript Test > arrowFunctionInUseStore 1`] = `
-"\\"use client\\";
-import * as React from \\"react\\";
-
-function MyComponent(props) {
-  const name = \\"steve\\";
-  const setName = function setName(value) {
-    name = value;
-  };
-  const updateNameWithArrowFn = function updateNameWithArrowFn(value) {
-    name = value;
-  };
-
-  return <div>Hello {name}</div>;
-}
-
-export default MyComponent;
-"
+"'function' is not allowed as a variable declaration name. (16:7)
+  14 |   function MyComponent(props) {
+  15 |   const name= 'steve'
+> 16 | const function setName(value) {
+     |       ^
+  17 | name = value;
+  18 | }
+  19 | const function updateNameWithArrowFn(value) {"
 `;
 
 exports[`React - stateType: variables > jsx > Javascript Test > basicForFragment 1`] = `
@@ -1187,14 +950,14 @@ export default BasicForFragment;
 `;
 
 exports[`React - stateType: variables > jsx > Javascript Test > basicForNoTagReference 1`] = `
-"Identifier expected. (39:17)
-  37 | return (
-  38 |
-> 39 |   <TagNameGetter()>
-     |                 ^
-  40 |   Hello <tag>{name}</tag>{props.actions?.map((action) => (
-  41 |   <TagName><action.icon  /><span>{action.text}</span></TagName>
-  42 | ))}</TagNameGetter()>"
+"'function' is not allowed as a variable declaration name. (18:7)
+  16 | const TagName= 'div'
+  17 | const tag= 'span'
+> 18 | const function TagNameGetter() {
+     |       ^
+  19 | return 'span';
+  20 | }
+  21 |"
 `;
 
 exports[`React - stateType: variables > jsx > Javascript Test > basicForwardRef 1`] = `
@@ -1535,7 +1298,16 @@ exports[`React - stateType: variables > jsx > Javascript Test > defaultProps 1`]
 "\\"use client\\";
 import * as React from \\"react\\";
 
-function Button(props) {
+function Button(
+  props = {
+    text: \\"default text\\",
+    link: \\"https://builder.io/\\",
+    openLinkInNewTab: false,
+    onClick: () => {
+      console.log(\\"hi\\");
+    },
+  }
+) {
   return (
     <div>
       {props.link ? (
@@ -1560,15 +1332,6 @@ function Button(props) {
   );
 }
 
-Button.defaultProps = {
-  text: \\"default text\\",
-  link: \\"https://builder.io/\\",
-  openLinkInNewTab: false,
-  onClick: () => {
-    console.log(\\"hi\\");
-  },
-};
-
 export default Button;
 "
 `;
@@ -1577,7 +1340,14 @@ exports[`React - stateType: variables > jsx > Javascript Test > defaultPropsOuts
 "\\"use client\\";
 import * as React from \\"react\\";
 
-function Button(props) {
+function Button(
+  props = {
+    text: \\"default text\\",
+    link: \\"https://builder.io/\\",
+    openLinkInNewTab: false,
+    onClick: () => {},
+  }
+) {
   return (
     <div>
       {props.link ? (
@@ -1602,13 +1372,6 @@ function Button(props) {
   );
 }
 
-Button.defaultProps = {
-  text: \\"default text\\",
-  link: \\"https://builder.io/\\",
-  openLinkInNewTab: false,
-  onClick: () => {},
-};
-
 export default Button;
 "
 `;
@@ -1701,53 +1464,25 @@ export default FigmaButton;
 `;
 
 exports[`React - stateType: variables > jsx > Javascript Test > getterState 1`] = `
-"import * as React from \\"react\\";
-
-function Button(props) {
-  const foo2 = function foo2() {
-    return props.foo + \\"foo\\";
-  };
-  const bar = function bar() {
-    return \\"bar\\";
-  };
-  const baz = function baz(i) {
-    return i + foo2().length;
-  };
-
-  return (
-    <div>
-      <p>{foo2()}</p>
-      <p>{bar()}</p>
-      <p>{baz(1)}</p>
-    </div>
-  );
-}
-
-export default Button;
-"
+"'function' is not allowed as a variable declaration name. (14:9)
+  12 |
+  13 |   function Button(props) {
+> 14 |   const function foo2() {
+     |         ^
+  15 | return props.foo + 'foo';
+  16 | }
+  17 | const function bar() {"
 `;
 
 exports[`React - stateType: variables > jsx > Javascript Test > import types 1`] = `
-"import * as React from \\"react\\";
-import RenderBlock from \\"./builder-render-block.raw\\";
-
-function RenderContent(props) {
-  const getRenderContentProps = function getRenderContentProps(block, index) {
-    return {
-      block: block,
-      index: index,
-    };
-  };
-
-  return (
-    <RenderBlock
-      {...getRenderContentProps(props.renderContentProps.block, 0)}
-    />
-  );
-}
-
-export default RenderContent;
-"
+"'function' is not allowed as a variable declaration name. (14:9)
+  12 |
+  13 |   function RenderContent(props) {
+> 14 |   const function getRenderContentProps(block, index) {
+     |         ^
+  15 | return {
+  16 | block: block,
+  17 | index: index"
 `;
 
 exports[`React - stateType: variables > jsx > Javascript Test > multipleOnUpdate 1`] = `
@@ -1887,42 +1622,14 @@ export default NestedStyles;
 `;
 
 exports[`React - stateType: variables > jsx > Javascript Test > onEvent 1`] = `
-"\\"use client\\";
-import * as React from \\"react\\";
-import { useRef, useEffect } from \\"react\\";
-
-function Embed(props) {
-  const elem = useRef(null);
-  const foo = function foo(event) {
-    console.log(\\"test2\\");
-  };
-  const elem_onInitEditingBldr = function elem_onInitEditingBldr(event) {
-    console.log(\\"test\\");
-    foo(event);
-  };
-
-  useEffect(() => {
-    elem.current?.addEventListener(\\"initEditingBldr\\", elem_onInitEditingBldr);
-    return () =>
-      elem.current?.removeEventListener(
-        \\"initEditingBldr\\",
-        elem_onInitEditingBldr
-      );
-  }, []);
-
-  useEffect(() => {
-    elem.current.dispatchEvent(new CustomEvent(\\"initEditingBldr\\"));
-  }, []);
-
-  return (
-    <div className=\\"builder-embed\\" ref={elem}>
-      <div>Test</div>
-    </div>
-  );
-}
-
-export default Embed;
-"
+"'function' is not allowed as a variable declaration name. (16:7)
+  14 |   function Embed(props) {
+  15 |   const elem = useRef(null);
+> 16 | const function foo(event) {
+     |       ^
+  17 | console.log('test2');
+  18 | }
+  19 | const function elem_onInitEditingBldr(event) {"
 `;
 
 exports[`React - stateType: variables > jsx > Javascript Test > onInit & onMount 1`] = `
@@ -2152,25 +1859,41 @@ export default MyBasicComponent;
 `;
 
 exports[`React - stateType: variables > jsx > Javascript Test > referencingFunInsideHook 1`] = `
-"'(' expected. (15:30)
-  13 |
-  14 |   function OnUpdate(props) {
-> 15 |   const foo = foo = function function foo(params) {}
-     |                              ^
-  16 | const bar = bar = function function bar() {}
-  17 | const zoo = zoo = function function zoo() {
-  18 | const params = {"
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+
+function OnUpdate(props) {
+  const foo = function foo(params) {};
+  const bar = function bar() {};
+  const zoo = function zoo() {
+    const params = {
+      cb: bar,
+    };
+  };
+
+  useEffect(() => {
+    foo({
+      someOption: bar,
+    });
+  });
+
+  return <div />;
+}
+
+export default OnUpdate;
+"
 `;
 
 exports[`React - stateType: variables > jsx > Javascript Test > renderBlock 1`] = `
-"Identifier expected. (214:8)
-  212 |    {shouldWrap() ? (
-  213 |    <>{isEmptyHtmlElement(tag()) ? (
-> 214 |    <tag()  {...(attributes())}  {...(actions())}  />
-      |        ^
-  215 |  ) : null}
-  216 | {!isEmptyHtmlElement(tag()) && repeatItemData() ? (
-  217 |    <>{repeatItemData()?.map((data, index) => ("
+"'function' is not allowed as a variable declaration name. (28:10)
+  26 |
+  27 |    function RenderBlock(props) {
+> 28 |    const function component() {
+     |          ^
+  29 | const componentName = getProcessedBlock({
+  30 |  block: props.block,
+  31 |  state: props.context.state,"
 `;
 
 exports[`React - stateType: variables > jsx > Javascript Test > renderContentExample 1`] = `
@@ -2312,24 +2035,14 @@ export default MyComponent;
 `;
 
 exports[`React - stateType: variables > jsx > Javascript Test > setState 1`] = `
-"\\"use client\\";
-import * as React from \\"react\\";
-
-function SetState(props) {
-  const n = [\\"123\\"];
-  const someFn = function someFn() {
-    n[0] = \\"123\\";
-  };
-
-  return (
-    <div>
-      <button onClick={(event) => someFn()}>Click me</button>
-    </div>
-  );
-}
-
-export default SetState;
-"
+"'function' is not allowed as a variable declaration name. (16:7)
+  14 |   function SetState(props) {
+  15 |   const n= ['123']
+> 16 | const function someFn() {
+     |       ^
+  17 | n[0] = '123';
+  18 | }
+  19 |"
 `;
 
 exports[`React - stateType: variables > jsx > Javascript Test > showExpressions 1`] = `
@@ -2647,27 +2360,14 @@ export default TypeExternalStore;
 `;
 
 exports[`React - stateType: variables > jsx > Javascript Test > typeGetterStore 1`] = `
-"\\"use client\\";
-import * as React from \\"react\\";
-
-function TypeGetterStore(props) {
-  const name = \\"test\\";
-  const getName = function getName() {
-    if (name === \\"a\\") {
-      return \\"b\\";
-    }
-
-    return name;
-  };
-  const test = function test() {
-    return \\"test\\";
-  };
-
-  return <div>Hello {name}! </div>;
-}
-
-export default TypeGetterStore;
-"
+"'function' is not allowed as a variable declaration name. (16:7)
+  14 |   function TypeGetterStore(props) {
+  15 |   const name= 'test'
+> 16 | const function getName() {
+     |       ^
+  17 | if (name === 'a') {
+  18 | return 'b';
+  19 | }"
 `;
 
 exports[`React - stateType: variables > jsx > Javascript Test > use-style 1`] = `
@@ -2745,32 +2445,14 @@ export default MyComponent;
 `;
 
 exports[`React - stateType: variables > jsx > Javascript Test > useTarget 1`] = `
-"\\"use client\\";
-import * as React from \\"react\\";
-import { useEffect } from \\"react\\";
-
-function UseTargetComponent(props) {
-  const name = function name() {
-    const prefix = 123;
-    return prefix + \\"foo\\";
-  };
-  const lastName = \\"bar\\";
-  const foo = \\"bar\\";
-
-  useEffect(() => {
-    console.log(foo);
-    foo = \\"bar\\";
-    console.log(\\"react\\");
-    lastName = \\"baz\\";
-    console.log(foo);
-    foo = \\"baz\\";
-  }, []);
-
-  return <div>{name()}</div>;
-}
-
-export default UseTargetComponent;
-"
+"'function' is not allowed as a variable declaration name. (15:9)
+  13 |
+  14 |   function UseTargetComponent(props) {
+> 15 |   const function name() {
+     |         ^
+  16 | const prefix = 123;
+  17 | return prefix + 'foo';
+  18 | }"
 `;
 
 exports[`React - stateType: variables > jsx > Javascript Test > webComponent 1`] = `
@@ -2815,67 +2497,119 @@ export default MyBasicComponent;
 `;
 
 exports[`React - stateType: variables > jsx > Typescript Test > AdvancedRef 1`] = `
-"'(' expected. (20:34)
-  18 | const inputNoArgRef = useRef<HTMLLabelElement>(null);
-  19 | const name= 'PatrickJS'
-> 20 | const onBlur = onBlur = function function onBlur() {
-     |                                  ^
-  21 | // Maintain focus
-  22 | inputRef.current.focus();
-  23 | }"
-`;
-
-exports[`React - stateType: variables > jsx > Typescript Test > Basic 1`] = `
 "\\"use client\\";
 import * as React from \\"react\\";
+import { useRef, useEffect } from \\"react\\";
 
-export interface MyBasicComponentProps {
-  id: string;
+export interface Props {
+  showInput: boolean;
 }
 
-export const DEFAULT_VALUES = {
-  name: \\"Steve\\",
-};
-
-function MyBasicComponent(props: MyBasicComponentProps) {
-  const name = \\"Steve\\";
-  const underscore_fn_name = function underscore_fn_name() {
-    return \\"bar\\";
+function MyBasicRefComponent(props: Props) {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const inputNoArgRef = useRef<HTMLLabelElement>(null);
+  const name = \\"PatrickJS\\";
+  const onBlur = function onBlur() {
+    // Maintain focus
+    inputRef.current.focus();
+  };
+  const lowerCaseName = function lowerCaseName() {
+    return name.toLowerCase();
   };
-  const age = 1;
-  const sports = [\\"\\"];
+
+  useEffect(() => {
+    console.log(\\"Received an update\\");
+  }, [inputRef.current, inputNoArgRef.current]);
 
   return (
     <>
-      <div className=\\"test div\\">
-        <input
-          value={DEFAULT_VALUES.name || name}
-          onChange={(myEvent) => (name = myEvent.target.value)}
-        />
-        Hello! I can run in React, Vue, Solid, or Liquid! &gt;
+      <div>
+        {props.showInput ? (
+          <>
+            <input
+              className=\\"input\\"
+              ref={inputRef}
+              value={name}
+              onBlur={(event) => onBlur()}
+              onChange={(event) => (name = event.target.value)}
+            />
+            <label htmlFor=\\"cars\\" ref={inputNoArgRef}>
+              Choose a car:
+            </label>
+            <select name=\\"cars\\" id=\\"cars\\">
+              <option value=\\"supra\\">GR Supra</option>
+              <option value=\\"86\\">GR 86</option>
+            </select>
+          </>
+        ) : null}
+        Hello
+        {lowerCaseName()}! I can run in React, Qwik, Vue, Solid, or Web
+        Component!
       </div>
       <style jsx>{\`
-        .div {
-          padding: 10px;
+        .input {
+          color: red;
         }
       \`}</style>
     </>
   );
 }
 
-export default MyBasicComponent;
+export default MyBasicRefComponent;
 "
 `;
 
+exports[`React - stateType: variables > jsx > Typescript Test > Basic 1`] = `
+"'function' is not allowed as a variable declaration name. (20:7)
+  18 |   function MyBasicComponent(props:MyBasicComponentProps) {
+  19 |   const name= 'Steve'
+> 20 | const function underscore_fn_name() {
+     |       ^
+  21 | return 'bar';
+  22 | }
+  23 | const age= 1"
+`;
+
 exports[`React - stateType: variables > jsx > Typescript Test > Basic Context 1`] = `
-"'(' expected. (16:38)
-  14 |   function MyBasicComponent(props:any) {
-  15 |   const name= 'PatrickJS'
-> 16 | const onChange = onChange = function function onChange() {
-     |                                      ^
-  17 | const change = myService.method('change');
-  18 | console.log(change);
-  19 | }"
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useContext, useRef, useEffect } from \\"react\\";
+import { Injector, MyService, createInjector } from \\"@dummy/injection-js\\";
+
+function MyBasicComponent(props: any) {
+  const name = \\"PatrickJS\\";
+  const onChange = function onChange() {
+    const change = myService.method(\\"change\\");
+    console.log(change);
+  };
+
+  const myService = useContext(MyService);
+
+  const hasInitialized = useRef(false);
+  if (!hasInitialized.current) {
+    const hi = myService.method(\\"hi\\");
+    console.log(hi);
+    hasInitialized.current = true;
+  }
+
+  useEffect(() => {
+    const bye = myService.method(\\"hi\\");
+    console.log(bye);
+  }, []);
+
+  return (
+    <Injector.Provider value={createInjector()}>
+      <div>
+        {myService.method(\\"hello\\") + name}
+        Hello! I can run in React, Vue, Solid, or Liquid!
+        <input onChange={(event) => onChange} />
+      </div>
+    </Injector.Provider>
+  );
+}
+
+export default MyBasicComponent;
+"
 `;
 
 exports[`React - stateType: variables > jsx > Typescript Test > Basic OnMount Update 1`] = `
@@ -3055,25 +2789,90 @@ export default MyBasicForComponent;
 `;
 
 exports[`React - stateType: variables > jsx > Typescript Test > BasicRef 1`] = `
-"'(' expected. (20:34)
-  18 | const inputNoArgRef = useRef<HTMLLabelElement | null>(null);
-  19 | const name= 'PatrickJS'
-> 20 | const onBlur = onBlur = function function onBlur() {
-     |                                  ^
-  21 | // Maintain focus
-  22 | inputRef.current?.focus();
-  23 | }"
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useRef } from \\"react\\";
+
+export interface Props {
+  showInput: boolean;
+}
+
+function MyBasicRefComponent(props: Props) {
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  const inputNoArgRef = useRef<HTMLLabelElement | null>(null);
+  const name = \\"PatrickJS\\";
+  const onBlur = function onBlur() {
+    // Maintain focus
+    inputRef.current?.focus();
+  };
+  const lowerCaseName = function lowerCaseName() {
+    return name.toLowerCase();
+  };
+
+  return (
+    <>
+      <div>
+        {props.showInput ? (
+          <>
+            <input
+              className=\\"input\\"
+              ref={inputRef}
+              value={name}
+              onBlur={(event) => onBlur()}
+              onChange={(event) => (name = event.target.value)}
+            />
+            <label htmlFor=\\"cars\\" ref={inputNoArgRef}>
+              Choose a car:
+            </label>
+            <select name=\\"cars\\" id=\\"cars\\">
+              <option value=\\"supra\\">GR Supra</option>
+              <option value=\\"86\\">GR 86</option>
+            </select>
+          </>
+        ) : null}
+        Hello
+        {lowerCaseName()}! I can run in React, Qwik, Vue, Solid, or Web
+        Component!
+      </div>
+      <style jsx>{\`
+        .input {
+          color: red;
+        }
+      \`}</style>
+    </>
+  );
+}
+
+export default MyBasicRefComponent;
+"
 `;
 
-exports[`React - stateType: variables > jsx > Typescript Test > BasicRefAssignment 1`] = `
-"'(' expected. (18:46)
-  16 |   function MyBasicRefAssignmentComponent(props:Props) {
-  17 |   const holdValueRef = useRef('Patrick');
-> 18 | const handlerClick = handlerClick = function function handlerClick(event: Event) {
-     |                                              ^
-  19 | event.preventDefault();
-  20 | console.log('current value', holdValueRef.current);
-  21 | holdValueRef.current = holdValueRef.current + 'JS';"
+exports[`React - stateType: variables > jsx > Typescript Test > BasicRefAssignment 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useRef } from \\"react\\";
+
+export interface Props {
+  showInput: boolean;
+}
+
+function MyBasicRefAssignmentComponent(props: Props) {
+  const holdValueRef = useRef(\\"Patrick\\");
+  const handlerClick = function handlerClick(event: Event) {
+    event.preventDefault();
+    console.log(\\"current value\\", holdValueRef.current);
+    holdValueRef.current = holdValueRef.current + \\"JS\\";
+  };
+
+  return (
+    <div>
+      <button onClick={async (evt) => await handlerClick(evt)}>Click</button>
+    </div>
+  );
+}
+
+export default MyBasicRefAssignmentComponent;
+"
 `;
 
 exports[`React - stateType: variables > jsx > Typescript Test > BasicRefPrevious 1`] = `
@@ -3157,78 +2956,14 @@ export default Button;
 `;
 
 exports[`React - stateType: variables > jsx > Typescript Test > Columns 1`] = `
-"import * as React from \\"react\\";
-
-type Column = {
-  content: any; // TODO: Implement this when support for dynamic CSS lands
-
-  width?: number;
-};
-export interface ColumnProps {
-  columns?: Column[]; // TODO: Implement this when support for dynamic CSS lands
-
-  space?: number; // TODO: Implement this when support for dynamic CSS lands
-
-  stackColumnsAt?: \\"tablet\\" | \\"mobile\\" | \\"never\\"; // TODO: Implement this when support for dynamic CSS lands
-
-  reverseColumnsWhenStacked?: boolean;
-}
-
-function Column(props: ColumnProps) {
-  const getColumns = function getColumns() {
-    return props.columns || [];
-  };
-  const getGutterSize = function getGutterSize() {
-    return typeof props.space === \\"number\\" ? props.space || 0 : 20;
-  };
-  const getWidth = function getWidth(index: number) {
-    const columns = getColumns();
-    return (columns[index] && columns[index].width) || 100 / columns.length;
-  };
-  const getColumnCssWidth = function getColumnCssWidth(index: number) {
-    const columns = getColumns();
-    const gutterSize = getGutterSize();
-    const subtractWidth = (gutterSize * (columns.length - 1)) / columns.length;
-    return \`calc(\${getWidth(index)}% - \${subtractWidth}px)\`;
-  };
-
-  return (
-    <>
-      <div className=\\"builder-columns div\\">
-        {props.columns?.map((column, index) => (
-          <div className=\\"builder-column div-2\\">
-            {column.content}
-            {index}
-          </div>
-        ))}
-      </div>
-      <style jsx>{\`
-        .div {
-          display: flex;
-          flex-direction: column;
-          align-items: stretch;
-          line-height: normal;
-        }
-        @media (max-width: 999px) {
-          .div {
-            flex-direction: row;
-          }
-        }
-        @media (max-width: 639px) {
-          .div {
-            flex-direction: row-reverse;
-          }
-        }
-        .div-2 {
-          flex-grow: 1;
-        }
-      \`}</style>
-    </>
-  );
-}
-
-export default Column;
-"
+"'function' is not allowed as a variable declaration name. (27:9)
+  25 |
+  26 |   function Column(props:ColumnProps) {
+> 27 |   const function getColumns() {
+     |         ^
+  28 | return props.columns || [];
+  29 | }
+  30 | const function getGutterSize() {"
 `;
 
 exports[`React - stateType: variables > jsx > Typescript Test > ContentSlotHtml 1`] = `
@@ -3259,229 +2994,58 @@ export default ContentSlotCode;
 `;
 
 exports[`React - stateType: variables > jsx > Typescript Test > ContentSlotJSX 1`] = `
-"\\"use client\\";
-import * as React from \\"react\\";
-
-type Props = {
-  [key: string]: string | JSX.Element;
-};
-import type { JSX } from \\"../../../../jsx-runtime\\";
-
-function ContentSlotJsxCode(props: Props) {
-  const name = \\"king\\";
-  const showContent = false;
-  const cls = function cls() {
-    return props.slotContent && props.children ? \`\${name}-content\` : \\"\\";
-  };
-  const show = function show() {
-    props.slotContent ? 1 : \\"\\";
-  };
-
-  return (
-    <>
-      {props.slotReference ? (
-        <>
-          <div
-            name={props.slotContent ? \\"name1\\" : \\"name2\\"}
-            title={props.slotContent ? \\"title1\\" : \\"title2\\"}
-            {...props.attributes}
-            onClick={(event) => show()}
-            className={cls()}
-          >
-            {showContent && props.slotContent ? (
-              <>{props.content || \\"{props.content}\\"}</>
-            ) : null}
-            <div>
-              <hr />
-            </div>
-            <div>{props.children}</div>
-          </div>
-        </>
-      ) : null}
-    </>
-  );
-}
-
-ContentSlotJsxCode.defaultProps = {
-  content: \\"\\",
-  slotReference: undefined,
-  slotContent: undefined,
-};
-
-export default ContentSlotJsxCode;
-"
+"'function' is not allowed as a variable declaration name. (19:7)
+  17 |   const name= 'king'
+  18 | const showContent= false
+> 19 | const function cls() {
+     |       ^
+  20 | return props.slotContent && props.children ? \`\${name}-content\` : '';
+  21 | }
+  22 | const function show() {"
 `;
 
 exports[`React - stateType: variables > jsx > Typescript Test > CustomCode 1`] = `
-"\\"use client\\";
-import * as React from \\"react\\";
-import { useRef, useEffect } from \\"react\\";
-
-export interface CustomCodeProps {
-  code: string;
-  replaceNodes?: boolean;
-}
-
-function CustomCode(props: CustomCodeProps) {
-  const elem = useRef<HTMLDivElement>(null);
-  const scriptsInserted = [];
-  const scriptsRun = [];
-  const findAndRunScripts = function findAndRunScripts() {
-    // TODO: Move this function to standalone one in '@builder.io/utils'
-    if (elem.current && typeof window !== \\"undefined\\") {
-      /** @type {HTMLScriptElement[]} */
-      const scripts = elem.current.getElementsByTagName(\\"script\\");
-
-      for (let i = 0; i < scripts.length; i++) {
-        const script = scripts[i];
-
-        if (script.src) {
-          if (scriptsInserted.includes(script.src)) {
-            continue;
-          }
-
-          scriptsInserted.push(script.src);
-          const newScript = document.createElement(\\"script\\");
-          newScript.async = true;
-          newScript.src = script.src;
-          document.head.appendChild(newScript);
-        } else if (
-          !script.type ||
-          [
-            \\"text/javascript\\",
-            \\"application/javascript\\",
-            \\"application/ecmascript\\",
-          ].includes(script.type)
-        ) {
-          if (scriptsRun.includes(script.innerText)) {
-            continue;
-          }
-
-          try {
-            scriptsRun.push(script.innerText);
-            new Function(script.innerText)();
-          } catch (error) {
-            console.warn(\\"\`CustomCode\`: Error running script:\\", error);
-          }
-        }
-      }
-    }
-  };
-
-  useEffect(() => {
-    findAndRunScripts();
-  }, []);
-
-  return (
-    <div
-      ref={elem}
-      className={
-        \\"builder-custom-code\\" + (props.replaceNodes ? \\" replace-nodes\\" : \\"\\")
-      }
-      dangerouslySetInnerHTML={{ __html: props.code }}
-    />
-  );
-}
-
-export default CustomCode;
-"
+"'function' is not allowed as a variable declaration name. (21:7)
+  19 | const scriptsInserted= []
+  20 | const scriptsRun= []
+> 21 | const function findAndRunScripts() {
+     |       ^
+  22 | // TODO: Move this function to standalone one in '@builder.io/utils'
+  23 | if (elem.current && typeof window !== 'undefined') {
+  24 | /** @type {HTMLScriptElement[]} */"
 `;
 
 exports[`React - stateType: variables > jsx > Typescript Test > Embed 1`] = `
-"\\"use client\\";
-import * as React from \\"react\\";
-import { useRef, useEffect } from \\"react\\";
-
-export interface CustomCodeProps {
-  code: string;
-  replaceNodes?: boolean;
-}
-
-function CustomCode(props: CustomCodeProps) {
-  const elem = useRef<HTMLDivElement>(null);
-  const scriptsInserted = [];
-  const scriptsRun = [];
-  const findAndRunScripts = function findAndRunScripts() {
-    // TODO: Move this function to standalone one in '@builder.io/utils'
-    if (elem.current && typeof window !== \\"undefined\\") {
-      /** @type {HTMLScriptElement[]} */
-      const scripts = elem.current.getElementsByTagName(\\"script\\");
-
-      for (let i = 0; i < scripts.length; i++) {
-        const script = scripts[i];
-
-        if (script.src) {
-          if (scriptsInserted.includes(script.src)) {
-            continue;
-          }
-
-          scriptsInserted.push(script.src);
-          const newScript = document.createElement(\\"script\\");
-          newScript.async = true;
-          newScript.src = script.src;
-          document.head.appendChild(newScript);
-        } else if (
-          !script.type ||
-          [
-            \\"text/javascript\\",
-            \\"application/javascript\\",
-            \\"application/ecmascript\\",
-          ].includes(script.type)
-        ) {
-          if (scriptsRun.includes(script.innerText)) {
-            continue;
-          }
-
-          try {
-            scriptsRun.push(script.innerText);
-            new Function(script.innerText)();
-          } catch (error) {
-            console.warn(\\"\`CustomCode\`: Error running script:\\", error);
-          }
-        }
-      }
-    }
-  };
-
-  useEffect(() => {
-    findAndRunScripts();
-  }, []);
-
-  return (
-    <div
-      ref={elem}
-      className={
-        \\"builder-custom-code\\" + (props.replaceNodes ? \\" replace-nodes\\" : \\"\\")
-      }
-      dangerouslySetInnerHTML={{ __html: props.code }}
-    />
-  );
-}
-
-export default CustomCode;
-"
+"'function' is not allowed as a variable declaration name. (21:7)
+  19 | const scriptsInserted= []
+  20 | const scriptsRun= []
+> 21 | const function findAndRunScripts() {
+     |       ^
+  22 | // TODO: Move this function to standalone one in '@builder.io/utils'
+  23 | if (elem.current && typeof window !== 'undefined') {
+  24 | /** @type {HTMLScriptElement[]} */"
 `;
 
 exports[`React - stateType: variables > jsx > Typescript Test > Form 1`] = `
-"',' expected. (135:2797)
-  133 | if (contentType && contentType !== 'multipart/form-data') {
-  134 |   if (
-> 135 |   /* Zapier doesn't allow content-type header to be sent from browsers */   !(sendWithJs && props.action?.includes('zapier.com'))) {     headers['content-type'] = contentType;   } }  const presubmitEvent = new CustomEvent('presubmit', {   detail: {     body   } });  if (formRef.current) {   formRef.current.dispatchEvent(presubmitEvent);    if (presubmitEvent.defaultPrevented) {     return;   } }  formState = 'sending'; const formUrl = \`\${builder.env === 'dev' ? 'http://localhost:5000' : 'https://builder.io'}/api/v1/form-submit?apiKey=\${builder.apiKey}&to=\${btoa(props.sendSubmissionsToEmail || '')}&name=\${encodeURIComponent(props.name || '')}\`; fetch(props.sendSubmissionsTo === 'email' ? formUrl : props.action! /* TODO: throw error if no action URL */ , {   body,   headers,   method: props.method || 'post' }).then(async res => {   let body;   const contentType = res.headers.get('content-type');    if (contentType && contentType.indexOf('application/json') !== -1) {     body = await res.json();   } else {     body = await res.text();   }    if (!res.ok && props.errorMessagePath) {     /* TODO: allow supplying an error formatter function */     let message = get(body, props.errorMessagePath);      if (message) {       if (typeof message !== 'string') {         /* TODO: ideally convert json to yaml so it woul dbe like          error: - email has been taken */         message = JSON.stringify(message);       }        formErrorMessage = message;     }   }    responseData = body;   formState = res.ok ? 'success' : 'error';    if (res.ok) {     const submitSuccessEvent = new CustomEvent('submit:success', {       detail: {         res,         body       }     });      if (formRef.current) {       formRef.current.dispatchEvent(submitSuccessEvent);        if (submitSuccessEvent.defaultPrevented) {         return;       }       /* TODO: option to turn this on/off? */         if (props.resetFormOnSubmit !== false) {         formRef.current.reset();       }     }     /* TODO: client side route event first that can be preventDefaulted */       if (props.successUrl) {       if (formRef.current) {         const event = new CustomEvent('route', {           detail: {             url: props.successUrl           }         });         formRef.current.dispatchEvent(event);          if (!event.defaultPrevented) {           location.href = props.successUrl;         }       } else {         location.href = props.successUrl;       }     }   } }, err => {   const submitErrorEvent = new CustomEvent('submit:error', {     detail: {       error: err     }   });    if (formRef.current) {     formRef.current.dispatchEvent(submitErrorEvent);      if (submitErrorEvent.defaultPrevented) {       return;     }   }    responseData = err;   formState = 'error'; }); } }                 return (   <>   <form  validate={props.validate}  ref={formRef}  action={!props.sendWithJs && props.action}  method={props.method}  name={props.name}  onSubmit={(event) => onSubmit(event) }  {...(props.attributes)}>{props.builderBlock && props.builderBlock.children ? (   <>{props.builderBlock?.children?.map((block, index) => (   <BuilderBlockComponent  key={block.id}  block={block}  index={index}  /> ))}</> ) : null}{submissionState() === 'error' ? (   <BuilderBlocks  dataPath=\\"errorMessage\\"  blocks={props.errorMessage!}  /> ) : null}{submissionState() === 'sending' ? (   <BuilderBlocks  dataPath=\\"sendingMessage\\"  blocks={props.sendingMessage!}  /> ) : null}{submissionState() === 'error' && responseData ? (   <pre className=\\"builder-form-error-text pre\\">{JSON.stringify(responseData, null, 2)}</pre> ) : null}{submissionState() === 'success' ? (   <BuilderBlocks  dataPath=\\"successMessage\\"  blocks={props.successMessage!}  /> ) : null}</form>   <style jsx>{\`.pre {   padding: 10px;   color: red;   text-align: center; }\`}</style>     </> ); }         export default FormComponent;
-      |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             ^
-  136 |
-  137 |
-  138 |"
+"'function' is not allowed as a variable declaration name. (42:7)
+  40 | const responseData= null
+  41 | const formErrorMessage= ''
+> 42 | const function submissionState() {
+     |       ^
+  43 | return Builder.isEditing && props.previewState || formState;
+  44 | }
+  45 | const function onSubmit(event: Event & {"
 `;
 
 exports[`React - stateType: variables > jsx > Typescript Test > Image 1`] = `
-"'(' expected. (42:40)
-  40 | return !!props.lazy && isBrowser();
-  41 | }
-> 42 | const isBrowser = isBrowser = function function isBrowser() {
-     |                                        ^
-  43 | return typeof window !== 'undefined' && window.navigator.product != 'ReactNative';
-  44 | }
-  45 | const load= false"
+"'function' is not allowed as a variable declaration name. (35:7)
+  33 | const scrollListener= null
+  34 | const imageLoaded= false
+> 35 | const function setLoaded() {
+     |       ^
+  36 | imageLoaded = true;
+  37 | }
+  38 | const function useLazyLoading() {"
 `;
 
 exports[`React - stateType: variables > jsx > Typescript Test > Image State 1`] = `
@@ -3588,25 +3152,14 @@ export default FormInputComponent;
 `;
 
 exports[`React - stateType: variables > jsx > Typescript Test > InputParent 1`] = `
-"import * as React from \\"react\\";
-import FormInputComponent from \\"./input.raw\\";
-
-function Stepper(props: any) {
-  const handleChange = function handleChange(value: string) {
-    console.log(value);
-  };
-
-  return (
-    <FormInputComponent
-      name=\\"kingzez\\"
-      type=\\"text\\"
-      onChange={(value) => handleChange(value)}
-    />
-  );
-}
-
-export default Stepper;
-"
+"'function' is not allowed as a variable declaration name. (14:9)
+  12 |
+  13 |   function Stepper(props:any) {
+> 14 |   const function handleChange(value: string) {
+     |         ^
+  15 | console.log(value);
+  16 | }
+  17 |"
 `;
 
 exports[`React - stateType: variables > jsx > Typescript Test > NestedStore 1`] = `
@@ -3811,155 +3364,47 @@ export default SlotCode;
 `;
 
 exports[`React - stateType: variables > jsx > Typescript Test > Stamped.io 1`] = `
-"\\"use client\\";
-import * as React from \\"react\\";
-import { useEffect } from \\"react\\";
-
-type SmileReviewsProps = {
-  productId: string;
-  apiKey: string;
-};
-import { kebabCase, snakeCase } from \\"lodash\\";
-
-function SmileReviews(props: SmileReviewsProps) {
-  const reviews = [];
-  const name = \\"test\\";
-  const showReviewPrompt = false;
-  const kebabCaseValue = function kebabCaseValue() {
-    return kebabCase(\\"testThat\\");
-  };
-  const snakeCaseValue = function snakeCaseValue() {
-    return snakeCase(\\"testThis\\");
-  };
-
-  useEffect(() => {
-    fetch(
-      \`https://stamped.io/api/widget/reviews?storeUrl=builder-io.myshopify.com&apiKey=\${
-        props.apiKey || \\"pubkey-8bbDq7W6w4sB3OWeM1HUy2s47702hM\\"
-      }&productId=\${props.productId || \\"2410511106127\\"}\`
-    )
-      .then((res) => res.json())
-      .then((data) => {
-        reviews = data.data;
-      });
-  }, []);
-
-  return (
-    <>
-      <div data-user={name}>
-        <button onClick={(event) => (showReviewPrompt = true)}>
-          Write a review
-        </button>
-        {showReviewPrompt || \\"asdf\\" ? (
-          <>
-            <input placeholder=\\"Email\\" />
-            <input placeholder=\\"Title\\" className=\\"input\\" />
-            <textarea
-              placeholder=\\"How was your experience?\\"
-              className=\\"textarea\\"
-            />
-            <button
-              className=\\"button\\"
-              onClick={(ev) => {
-                ev.preventDefault();
-                showReviewPrompt = false;
-              }}
-            >
-              Submit
-            </button>
-          </>
-        ) : null}
-        {reviews?.map((review, index) => (
-          <div className=\\"review\\" key={review.id}>
-            <img className=\\"img\\" src={review.avatar} />
-            <div className={showReviewPrompt ? \\"bg-primary\\" : \\"bg-secondary\\"}>
-              <div>N: {index}</div>
-              <div>{review.author}</div>
-              <div>{review.reviewMessage}</div>
-            </div>
-          </div>
-        ))}
-      </div>
-      <style jsx>{\`
-        .input {
-          display: block;
-        }
-        .textarea {
-          display: block;
-        }
-        .button {
-          display: block;
-        }
-        .review {
-          margin: 10px;
-          padding: 10px;
-          background: white;
-          display: flex;
-          border-radius: 5px;
-          box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
-          -webkit-font-smoothing: antialiased;
-        }
-        .img {
-          height: 30px;
-          width: 30px;
-          margin-right: 10px;
-        }
-      \`}</style>
-    </>
-  );
-}
-
-export default SmileReviews;
-"
+"'function' is not allowed as a variable declaration name. (21:7)
+  19 | const name= 'test'
+  20 | const showReviewPrompt= false
+> 21 | const function kebabCaseValue() {
+     |       ^
+  22 | return kebabCase('testThat');
+  23 | }
+  24 | const function snakeCaseValue() {"
 `;
 
 exports[`React - stateType: variables > jsx > Typescript Test > StoreComment 1`] = `
-"\\"use client\\";
-import * as React from \\"react\\";
-
-function StringLiteralStore(props: any) {
-  const foo = true;
-  const bar = function bar() {};
-
-  return <>{foo}</>;
-}
-
-export default StringLiteralStore;
-"
+"'function' is not allowed as a variable declaration name. (16:7)
+  14 |   function StringLiteralStore(props:any) {
+  15 |   const foo= true
+> 16 | const function bar() {}
+     |       ^
+  17 |
+  18 |
+  19 |"
 `;
 
 exports[`React - stateType: variables > jsx > Typescript Test > StoreShadowVars 1`] = `
-"\\"use client\\";
-import * as React from \\"react\\";
-
-function MyComponent(props: any) {
-  const errors = {};
-  const foo = function foo(errors) {
-    return errors;
-  };
-
-  return <>{foo(errors)}</>;
-}
-
-export default MyComponent;
-"
+"'function' is not allowed as a variable declaration name. (16:7)
+  14 |   function MyComponent(props:any) {
+  15 |   const errors= {}
+> 16 | const function foo(errors) {
+     |       ^
+  17 | return errors;
+  18 | }
+  19 |"
 `;
 
 exports[`React - stateType: variables > jsx > Typescript Test > StoreWithState 1`] = `
-"\\"use client\\";
-import * as React from \\"react\\";
-
-function MyComponent(props: any) {
-  const foo = false;
-  const bar = function bar() {
-    return foo;
-  };
-
-  return <>{bar()}</>;
-}
-
-export default MyComponent;
-"
+"'function' is not allowed as a variable declaration name. (16:7)
+  14 |   function MyComponent(props:any) {
+  15 |   const foo= false
+> 16 | const function bar() {
+     |       ^
+  17 | return foo;
+  18 | }
+  19 |"
 `;
 
 exports[`React - stateType: variables > jsx > Typescript Test > Submit 1`] = `
@@ -4048,41 +3493,14 @@ export default Textarea;
 `;
 
 exports[`React - stateType: variables > jsx > Typescript Test > UseValueAndFnFromStore 1`] = `
-"\\"use client\\";
-import * as React from \\"react\\";
-import { useEffect } from \\"react\\";
-
-type MyProps = {
-  onChange?: (active: boolean) => void;
-};
-type MyStore = {
-  _id?: string;
-  _active?: boolean;
-  _do?: (id?: string) => void;
-};
-
-function UseValueAndFnFromStore(props: MyProps) {
-  const _id = \\"abc\\";
-  const _active = false;
-  const _do = function _do(id?: string) {
-    _active = !!id;
-
-    if (props.onChange) {
-      props.onChange(_active);
-    }
-  };
-
-  useEffect(() => {
-    if (_do) {
-      _do(_id);
-    }
-  });
-
-  return <div>Test</div>;
-}
-
-export default UseValueAndFnFromStore;
-"
+"'function' is not allowed as a variable declaration name. (24:7)
+  22 |   const _id= 'abc'
+  23 | const _active= false
+> 24 | const function _do(id?: string) {
+     |       ^
+  25 | _active = !!id;
+  26 |
+  27 | if (props.onChange) {"
 `;
 
 exports[`React - stateType: variables > jsx > Typescript Test > Video 1`] = `
@@ -4132,37 +3550,28 @@ function Video(props: VideoProps) {
       key={props.video || \\"no-src\\"}
       poster={props.posterImage}
       autoplay={props.autoPlay}
-      muted={props.muted}
-      controls={props.controls}
-      loop={props.loop}
-    />
-  );
-}
-
-export default Video;
-"
-`;
-
-exports[`React - stateType: variables > jsx > Typescript Test > arrowFunctionInUseStore 1`] = `
-"\\"use client\\";
-import * as React from \\"react\\";
-
-function MyComponent(props: any) {
-  const name = \\"steve\\";
-  const setName = function setName(value) {
-    name = value;
-  };
-  const updateNameWithArrowFn = function updateNameWithArrowFn(value) {
-    name = value;
-  };
-
-  return <div>Hello {name}</div>;
+      muted={props.muted}
+      controls={props.controls}
+      loop={props.loop}
+    />
+  );
 }
 
-export default MyComponent;
+export default Video;
 "
 `;
 
+exports[`React - stateType: variables > jsx > Typescript Test > arrowFunctionInUseStore 1`] = `
+"'function' is not allowed as a variable declaration name. (16:7)
+  14 |   function MyComponent(props:any) {
+  15 |   const name= 'steve'
+> 16 | const function setName(value) {
+     |       ^
+  17 | name = value;
+  18 | }
+  19 | const function updateNameWithArrowFn(value) {"
+`;
+
 exports[`React - stateType: variables > jsx > Typescript Test > basicForFragment 1`] = `
 "\\"use client\\";
 import * as React from \\"react\\";
@@ -4198,14 +3607,14 @@ export default BasicForFragment;
 `;
 
 exports[`React - stateType: variables > jsx > Typescript Test > basicForNoTagReference 1`] = `
-"Identifier expected. (39:17)
-  37 | return (
-  38 |
-> 39 |   <TagNameGetter()>
-     |                 ^
-  40 |   Hello <tag>{name}</tag>{props.actions?.map((action) => (
-  41 |   <TagName><action.icon  /><span>{action.text}</span></TagName>
-  42 | ))}</TagNameGetter()>"
+"'function' is not allowed as a variable declaration name. (18:7)
+  16 | const TagName= 'div'
+  17 | const tag= 'span'
+> 18 | const function TagNameGetter() {
+     |       ^
+  19 | return 'span';
+  20 | }
+  21 |"
 `;
 
 exports[`React - stateType: variables > jsx > Typescript Test > basicForwardRef 1`] = `
@@ -4582,7 +3991,16 @@ export interface ButtonProps {
   onClick?: () => void;
 }
 
-function Button(props: ButtonProps) {
+function Button(
+  props: ButtonProps = {
+    text: \\"default text\\",
+    link: \\"https://builder.io/\\",
+    openLinkInNewTab: false,
+    onClick: () => {
+      console.log(\\"hi\\");
+    },
+  }
+) {
   return (
     <div>
       {props.link ? (
@@ -4607,15 +4025,6 @@ function Button(props: ButtonProps) {
   );
 }
 
-Button.defaultProps = {
-  text: \\"default text\\",
-  link: \\"https://builder.io/\\",
-  openLinkInNewTab: false,
-  onClick: () => {
-    console.log(\\"hi\\");
-  },
-};
-
 export default Button;
 "
 `;
@@ -4632,7 +4041,14 @@ export interface ButtonProps {
   onClick: () => void;
 }
 
-function Button(props: ButtonProps) {
+function Button(
+  props: ButtonProps = {
+    text: \\"default text\\",
+    link: \\"https://builder.io/\\",
+    openLinkInNewTab: false,
+    onClick: () => {},
+  }
+) {
   return (
     <div>
       {props.link ? (
@@ -4657,13 +4073,6 @@ function Button(props: ButtonProps) {
   );
 }
 
-Button.defaultProps = {
-  text: \\"default text\\",
-  link: \\"https://builder.io/\\",
-  openLinkInNewTab: false,
-  onClick: () => {},
-};
-
 export default Button;
 "
 `;
@@ -4760,64 +4169,25 @@ export default FigmaButton;
 `;
 
 exports[`React - stateType: variables > 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;
-"
+"'function' is not allowed as a variable declaration name. (16:9)
+  14 |
+  15 |   function Button(props:ButtonProps) {
+> 16 |   const function foo2() {
+     |         ^
+  17 | return props.foo + 'foo';
+  18 | }
+  19 | const function bar() {"
 `;
 
 exports[`React - stateType: variables > jsx > Typescript Test > import types 1`] = `
-"import * as React from \\"react\\";
-
-type RenderContentProps = {
-  options?: GetContentOptions;
-  content: BuilderContent;
-  renderContentProps: RenderBlockProps;
-};
-import { BuilderContent, GetContentOptions } from \\"@builder.io/sdk\\";
-import RenderBlock, { RenderBlockProps } from \\"./builder-render-block.raw\\";
-
-function RenderContent(props: RenderContentProps) {
-  const getRenderContentProps = function getRenderContentProps(block, index) {
-    return {
-      block: block,
-      index: index,
-    };
-  };
-
-  return (
-    <RenderBlock
-      {...getRenderContentProps(props.renderContentProps.block, 0)}
-    />
-  );
-}
-
-export default RenderContent;
-"
+"'function' is not allowed as a variable declaration name. (19:9)
+  17 |
+  18 |   function RenderContent(props:RenderContentProps) {
+> 19 |   const function getRenderContentProps(block, index) {
+     |         ^
+  20 | return {
+  21 | block: block,
+  22 | index: index"
 `;
 
 exports[`React - stateType: variables > jsx > Typescript Test > multipleOnUpdate 1`] = `
@@ -4962,42 +4332,14 @@ export default NestedStyles;
 `;
 
 exports[`React - stateType: variables > jsx > Typescript Test > onEvent 1`] = `
-"\\"use client\\";
-import * as React from \\"react\\";
-import { useRef, useEffect } from \\"react\\";
-
-function Embed(props: any) {
-  const elem = useRef<HTMLDivElement>(null);
-  const foo = function foo(event) {
-    console.log(\\"test2\\");
-  };
-  const elem_onInitEditingBldr = function elem_onInitEditingBldr(event) {
-    console.log(\\"test\\");
-    foo(event);
-  };
-
-  useEffect(() => {
-    elem.current?.addEventListener(\\"initEditingBldr\\", elem_onInitEditingBldr);
-    return () =>
-      elem.current?.removeEventListener(
-        \\"initEditingBldr\\",
-        elem_onInitEditingBldr
-      );
-  }, []);
-
-  useEffect(() => {
-    elem.current.dispatchEvent(new CustomEvent(\\"initEditingBldr\\"));
-  }, []);
-
-  return (
-    <div className=\\"builder-embed\\" ref={elem}>
-      <div>Test</div>
-    </div>
-  );
-}
-
-export default Embed;
-"
+"'function' is not allowed as a variable declaration name. (16:7)
+  14 |   function Embed(props:any) {
+  15 |   const elem = useRef<HTMLDivElement>(null);
+> 16 | const function foo(event) {
+     |       ^
+  17 | console.log('test2');
+  18 | }
+  19 | const function elem_onInitEditingBldr(event) {"
 `;
 
 exports[`React - stateType: variables > jsx > Typescript Test > onInit & onMount 1`] = `
@@ -5273,25 +4615,41 @@ export default MyBasicComponent;
 `;
 
 exports[`React - stateType: variables > jsx > Typescript Test > referencingFunInsideHook 1`] = `
-"'(' expected. (15:30)
-  13 |
-  14 |   function OnUpdate(props:any) {
-> 15 |   const foo = foo = function function foo(params) {}
-     |                              ^
-  16 | const bar = bar = function function bar() {}
-  17 | const zoo = zoo = function function zoo() {
-  18 | const params = {"
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+
+function OnUpdate(props: any) {
+  const foo = function foo(params) {};
+  const bar = function bar() {};
+  const zoo = function zoo() {
+    const params = {
+      cb: bar,
+    };
+  };
+
+  useEffect(() => {
+    foo({
+      someOption: bar,
+    });
+  });
+
+  return <div />;
+}
+
+export default OnUpdate;
+"
 `;
 
 exports[`React - stateType: variables > jsx > Typescript Test > renderBlock 1`] = `
-"Identifier expected. (222:8)
-  220 |    {shouldWrap() ? (
-  221 |    <>{isEmptyHtmlElement(tag()) ? (
-> 222 |    <tag()  {...(attributes())}  {...(actions())}  />
-      |        ^
-  223 |  ) : null}
-  224 | {!isEmptyHtmlElement(tag()) && repeatItemData() ? (
-  225 |    <>{repeatItemData()?.map((data, index) => ("
+"'function' is not allowed as a variable declaration name. (36:10)
+  34 |
+  35 |    function RenderBlock(props:RenderBlockProps) {
+> 36 |    const function component() {
+     |          ^
+  37 | const componentName = getProcessedBlock({
+  38 |  block: props.block,
+  39 |  state: props.context.state,"
 `;
 
 exports[`React - stateType: variables > jsx > Typescript Test > renderContentExample 1`] = `
@@ -5452,24 +4810,14 @@ export default MyComponent;
 `;
 
 exports[`React - stateType: variables > jsx > Typescript Test > setState 1`] = `
-"\\"use client\\";
-import * as React from \\"react\\";
-
-function SetState(props: any) {
-  const n = [\\"123\\"];
-  const someFn = function someFn() {
-    n[0] = \\"123\\";
-  };
-
-  return (
-    <div>
-      <button onClick={(event) => someFn()}>Click me</button>
-    </div>
-  );
-}
-
-export default SetState;
-"
+"'function' is not allowed as a variable declaration name. (16:7)
+  14 |   function SetState(props:any) {
+  15 |   const n= ['123']
+> 16 | const function someFn() {
+     |       ^
+  17 | n[0] = '123';
+  18 | }
+  19 |"
 `;
 
 exports[`React - stateType: variables > jsx > Typescript Test > showExpressions 1`] = `
@@ -5822,33 +5170,14 @@ export default TypeExternalStore;
 `;
 
 exports[`React - stateType: variables > jsx > Typescript Test > typeGetterStore 1`] = `
-"\\"use client\\";
-import * as React from \\"react\\";
-
-type GetterStore = {
-  getName: () => string;
-  name: string;
-  get test(): string;
-};
-
-function TypeGetterStore(props: any) {
-  const name = \\"test\\";
-  const getName = function getName() {
-    if (name === \\"a\\") {
-      return \\"b\\";
-    }
-
-    return name;
-  };
-  const test = function test() {
-    return \\"test\\";
-  };
-
-  return <div>Hello {name}! </div>;
-}
-
-export default TypeGetterStore;
-"
+"'function' is not allowed as a variable declaration name. (20:7)
+  18 |   function TypeGetterStore(props:any) {
+  19 |   const name= 'test'
+> 20 | const function getName() {
+     |       ^
+  21 | if (name === 'a') {
+  22 | return 'b';
+  23 | }"
 `;
 
 exports[`React - stateType: variables > jsx > Typescript Test > use-style 1`] = `
@@ -5926,32 +5255,14 @@ export default MyComponent;
 `;
 
 exports[`React - stateType: variables > jsx > Typescript Test > useTarget 1`] = `
-"\\"use client\\";
-import * as React from \\"react\\";
-import { useEffect } from \\"react\\";
-
-function UseTargetComponent(props: any) {
-  const name = function name() {
-    const prefix = 123;
-    return prefix + \\"foo\\";
-  };
-  const lastName = \\"bar\\";
-  const foo = \\"bar\\";
-
-  useEffect(() => {
-    console.log(foo);
-    foo = \\"bar\\";
-    console.log(\\"react\\");
-    lastName = \\"baz\\";
-    console.log(foo);
-    foo = \\"baz\\";
-  }, []);
-
-  return <div>{name()}</div>;
-}
-
-export default UseTargetComponent;
-"
+"'function' is not allowed as a variable declaration name. (15:9)
+  13 |
+  14 |   function UseTargetComponent(props:any) {
+> 15 |   const function name() {
+     |         ^
+  16 | const prefix = 123;
+  17 | return prefix + 'foo';
+  18 | }"
 `;
 
 exports[`React - stateType: variables > jsx > Typescript Test > webComponent 1`] = `
@@ -6080,7 +5391,7 @@ exports[`React - stateType: variables > svelte > Javascript Test > classDirectiv
 "\\"use client\\";
 import * as React from \\"react\\";
 
-function MyComponent(props) {
+function MyComponent(props = {}) {
   const focus = true;
 
   return (
@@ -6092,8 +5403,6 @@ function MyComponent(props) {
   );
 }
 
-MyComponent.defaultProps = {};
-
 export default MyComponent;
 "
 `;
@@ -6130,14 +5439,25 @@ export default MyComponent;
 `;
 
 exports[`React - stateType: variables > svelte > Javascript Test > eventHandlers 1`] = `
-"'(' expected. (15:30)
-  13 |
-  14 |   function MyComponent(props) {
-> 15 |   const log = log = function function log(msg = 'hello') {
-     |                              ^
-  16 | console.log(msg);
-  17 | }
-  18 |"
+"\\"use client\\";
+import * as React from \\"react\\";
+
+function MyComponent(props) {
+  const log = function log(msg = \\"hello\\") {
+    console.log(msg);
+  };
+
+  return (
+    <div>
+      <button onClick={(a) => log(\\"hi\\")}>Log</button>
+      <button onClick={(event) => log(event)}>Log</button>
+      <button onClick={(event) => log(event)}>Log</button>
+    </div>
+  );
+}
+
+export default MyComponent;
+"
 `;
 
 exports[`React - stateType: variables > svelte > Javascript Test > html 1`] = `
@@ -6155,14 +5475,30 @@ export default MyComponent;
 `;
 
 exports[`React - stateType: variables > svelte > Javascript Test > ifElse 1`] = `
-"'(' expected. (16:34)
-  14 |   function MyComponent(props) {
-  15 |   const show= true
-> 16 | const toggle = toggle = function function toggle() {
-     |                                  ^
-  17 | show = !show;
-  18 | }
-  19 |"
+"\\"use client\\";
+import * as React from \\"react\\";
+
+function MyComponent(props) {
+  const show = true;
+  const toggle = function toggle() {
+    show = !show;
+  };
+
+  return (
+    <>
+      {show ? (
+        <>
+          <button onClick={(event) => toggle(event)}> Hide </button>
+        </>
+      ) : (
+        <button onClick={(event) => toggle(event)}> Show </button>
+      )}
+    </>
+  );
+}
+
+export default MyComponent;
+"
 `;
 
 exports[`React - stateType: variables > svelte > Javascript Test > imports 1`] = `
@@ -6214,19 +5550,46 @@ export default MyComponent;
 `;
 
 exports[`React - stateType: variables > svelte > Javascript Test > reactive 1`] = `
+"'function' is not allowed as a variable declaration name. (16:7)
+  14 |   function MyComponent(props) {
+  15 |   const name= \\"Steve\\"
+> 16 | const function lowercaseName() {
+     |       ^
+  17 | return name.toLowerCase();
+  18 | }
+  19 |"
+`;
+
+exports[`React - stateType: variables > svelte > Javascript Test > reactiveWithFn 1`] = `
 "\\"use client\\";
 import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
 
 function MyComponent(props) {
-  const name = \\"Steve\\";
-  const lowercaseName = function lowercaseName() {
-    return name.toLowerCase();
+  const a = 2;
+  const b = 5;
+  const result = null;
+  const calculateResult = function calculateResult(a_, b_) {
+    result = a_ * b_;
   };
 
+  useEffect(() => {
+    calculateResult(a, b);
+  }, [a, b]);
+
   return (
     <div>
-      <input value={name} />
-      Lowercase: {lowercaseName()}
+      <input
+        type=\\"number\\"
+        onChange={(event) => (a = event.target.value)}
+        value={a}
+      />
+      <input
+        type=\\"number\\"
+        onChange={(event) => (b = event.target.value)}
+        value={b}
+      />
+      Result: {result}
     </div>
   );
 }
@@ -6235,17 +5598,6 @@ export default MyComponent;
 "
 `;
 
-exports[`React - stateType: variables > svelte > Javascript Test > reactiveWithFn 1`] = `
-"'(' expected. (18:52)
-  16 | const b= 5
-  17 | const result= null
-> 18 | const calculateResult = calculateResult = function function calculateResult(a_, b_) {
-     |                                                    ^
-  19 | result = a_ * b_;
-  20 | }
-  21 |"
-`;
-
 exports[`React - stateType: variables > svelte > Javascript Test > slots 1`] = `
 "import * as React from \\"react\\";
 
@@ -6411,7 +5763,7 @@ exports[`React - stateType: variables > svelte > Typescript Test > classDirectiv
 "\\"use client\\";
 import * as React from \\"react\\";
 
-function MyComponent(props: any) {
+function MyComponent(props: any = {}) {
   const focus = true;
 
   return (
@@ -6423,8 +5775,6 @@ function MyComponent(props: any) {
   );
 }
 
-MyComponent.defaultProps = {};
-
 export default MyComponent;
 "
 `;
@@ -6461,14 +5811,25 @@ export default MyComponent;
 `;
 
 exports[`React - stateType: variables > svelte > Typescript Test > eventHandlers 1`] = `
-"'(' expected. (15:30)
-  13 |
-  14 |   function MyComponent(props:any) {
-> 15 |   const log = log = function function log(msg = 'hello') {
-     |                              ^
-  16 | console.log(msg);
-  17 | }
-  18 |"
+"\\"use client\\";
+import * as React from \\"react\\";
+
+function MyComponent(props: any) {
+  const log = function log(msg = \\"hello\\") {
+    console.log(msg);
+  };
+
+  return (
+    <div>
+      <button onClick={(a) => log(\\"hi\\")}>Log</button>
+      <button onClick={(event) => log(event)}>Log</button>
+      <button onClick={(event) => log(event)}>Log</button>
+    </div>
+  );
+}
+
+export default MyComponent;
+"
 `;
 
 exports[`React - stateType: variables > svelte > Typescript Test > html 1`] = `
@@ -6486,14 +5847,30 @@ export default MyComponent;
 `;
 
 exports[`React - stateType: variables > svelte > Typescript Test > ifElse 1`] = `
-"'(' expected. (16:34)
-  14 |   function MyComponent(props:any) {
-  15 |   const show= true
-> 16 | const toggle = toggle = function function toggle() {
-     |                                  ^
-  17 | show = !show;
-  18 | }
-  19 |"
+"\\"use client\\";
+import * as React from \\"react\\";
+
+function MyComponent(props: any) {
+  const show = true;
+  const toggle = function toggle() {
+    show = !show;
+  };
+
+  return (
+    <>
+      {show ? (
+        <>
+          <button onClick={(event) => toggle(event)}> Hide </button>
+        </>
+      ) : (
+        <button onClick={(event) => toggle(event)}> Show </button>
+      )}
+    </>
+  );
+}
+
+export default MyComponent;
+"
 `;
 
 exports[`React - stateType: variables > svelte > Typescript Test > imports 1`] = `
@@ -6545,19 +5922,46 @@ export default MyComponent;
 `;
 
 exports[`React - stateType: variables > svelte > Typescript Test > reactive 1`] = `
+"'function' is not allowed as a variable declaration name. (16:7)
+  14 |   function MyComponent(props:any) {
+  15 |   const name= \\"Steve\\"
+> 16 | const function lowercaseName() {
+     |       ^
+  17 | return name.toLowerCase();
+  18 | }
+  19 |"
+`;
+
+exports[`React - stateType: variables > svelte > Typescript Test > reactiveWithFn 1`] = `
 "\\"use client\\";
 import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
 
 function MyComponent(props: any) {
-  const name = \\"Steve\\";
-  const lowercaseName = function lowercaseName() {
-    return name.toLowerCase();
+  const a = 2;
+  const b = 5;
+  const result = null;
+  const calculateResult = function calculateResult(a_, b_) {
+    result = a_ * b_;
   };
 
+  useEffect(() => {
+    calculateResult(a, b);
+  }, [a, b]);
+
   return (
     <div>
-      <input value={name} />
-      Lowercase: {lowercaseName()}
+      <input
+        type=\\"number\\"
+        onChange={(event) => (a = event.target.value)}
+        value={a}
+      />
+      <input
+        type=\\"number\\"
+        onChange={(event) => (b = event.target.value)}
+        value={b}
+      />
+      Result: {result}
     </div>
   );
 }
@@ -6566,17 +5970,6 @@ export default MyComponent;
 "
 `;
 
-exports[`React - stateType: variables > svelte > Typescript Test > reactiveWithFn 1`] = `
-"'(' expected. (18:52)
-  16 | const b= 5
-  17 | const result= null
-> 18 | const calculateResult = calculateResult = function function calculateResult(a_, b_) {
-     |                                                    ^
-  19 | result = a_ * b_;
-  20 | }
-  21 |"
-`;
-
 exports[`React - stateType: variables > svelte > Typescript Test > slots 1`] = `
 "import * as React from \\"react\\";
 
diff --git a/packages/core/src/__tests__/__snapshots__/react.test.ts.snap b/packages/core/src/__tests__/__snapshots__/react.test.ts.snap
index 98120ce9d2..9d157a1b88 100644
--- a/packages/core/src/__tests__/__snapshots__/react.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/react.test.ts.snap
@@ -555,7 +555,9 @@ exports[`React - stateType: useState > jsx > Javascript Test > ContentSlotJSX 1`
 import * as React from \\"react\\";
 import { useState } from \\"react\\";
 
-function ContentSlotJsxCode(props) {
+function ContentSlotJsxCode(
+  props = { content: \\"\\", slotReference: undefined, slotContent: undefined }
+) {
   const [name, setName] = useState(() => \\"king\\");
 
   const [showContent, setShowContent] = useState(() => false);
@@ -593,12 +595,6 @@ function ContentSlotJsxCode(props) {
   );
 }
 
-ContentSlotJsxCode.defaultProps = {
-  content: \\"\\",
-  slotReference: undefined,
-  slotContent: undefined,
-};
-
 export default ContentSlotJsxCode;
 "
 `;
@@ -2086,7 +2082,16 @@ exports[`React - stateType: useState > jsx > Javascript Test > defaultProps 1`]
 "\\"use client\\";
 import * as React from \\"react\\";
 
-function Button(props) {
+function Button(
+  props = {
+    text: \\"default text\\",
+    link: \\"https://builder.io/\\",
+    openLinkInNewTab: false,
+    onClick: () => {
+      console.log(\\"hi\\");
+    },
+  }
+) {
   return (
     <div>
       {props.link ? (
@@ -2111,15 +2116,6 @@ function Button(props) {
   );
 }
 
-Button.defaultProps = {
-  text: \\"default text\\",
-  link: \\"https://builder.io/\\",
-  openLinkInNewTab: false,
-  onClick: () => {
-    console.log(\\"hi\\");
-  },
-};
-
 export default Button;
 "
 `;
@@ -2128,7 +2124,14 @@ exports[`React - stateType: useState > jsx > Javascript Test > defaultPropsOutsi
 "\\"use client\\";
 import * as React from \\"react\\";
 
-function Button(props) {
+function Button(
+  props = {
+    text: \\"default text\\",
+    link: \\"https://builder.io/\\",
+    openLinkInNewTab: false,
+    onClick: () => {},
+  }
+) {
   return (
     <div>
       {props.link ? (
@@ -2153,13 +2156,6 @@ function Button(props) {
   );
 }
 
-Button.defaultProps = {
-  text: \\"default text\\",
-  link: \\"https://builder.io/\\",
-  openLinkInNewTab: false,
-  onClick: () => {},
-};
-
 export default Button;
 "
 `;
@@ -4274,7 +4270,13 @@ type Props = {
 };
 import type { JSX } from \\"../../../../jsx-runtime\\";
 
-function ContentSlotJsxCode(props: Props) {
+function ContentSlotJsxCode(
+  props: Props = {
+    content: \\"\\",
+    slotReference: undefined,
+    slotContent: undefined,
+  }
+) {
   const [name, setName] = useState(() => \\"king\\");
 
   const [showContent, setShowContent] = useState(() => false);
@@ -4312,12 +4314,6 @@ function ContentSlotJsxCode(props: Props) {
   );
 }
 
-ContentSlotJsxCode.defaultProps = {
-  content: \\"\\",
-  slotReference: undefined,
-  slotContent: undefined,
-};
-
 export default ContentSlotJsxCode;
 "
 `;
@@ -6039,7 +6035,16 @@ export interface ButtonProps {
   onClick?: () => void;
 }
 
-function Button(props: ButtonProps) {
+function Button(
+  props: ButtonProps = {
+    text: \\"default text\\",
+    link: \\"https://builder.io/\\",
+    openLinkInNewTab: false,
+    onClick: () => {
+      console.log(\\"hi\\");
+    },
+  }
+) {
   return (
     <div>
       {props.link ? (
@@ -6064,15 +6069,6 @@ function Button(props: ButtonProps) {
   );
 }
 
-Button.defaultProps = {
-  text: \\"default text\\",
-  link: \\"https://builder.io/\\",
-  openLinkInNewTab: false,
-  onClick: () => {
-    console.log(\\"hi\\");
-  },
-};
-
 export default Button;
 "
 `;
@@ -6089,7 +6085,14 @@ export interface ButtonProps {
   onClick: () => void;
 }
 
-function Button(props: ButtonProps) {
+function Button(
+  props: ButtonProps = {
+    text: \\"default text\\",
+    link: \\"https://builder.io/\\",
+    openLinkInNewTab: false,
+    onClick: () => {},
+  }
+) {
   return (
     <div>
       {props.link ? (
@@ -6114,13 +6117,6 @@ function Button(props: ButtonProps) {
   );
 }
 
-Button.defaultProps = {
-  text: \\"default text\\",
-  link: \\"https://builder.io/\\",
-  openLinkInNewTab: false,
-  onClick: () => {},
-};
-
 export default Button;
 "
 `;
@@ -8041,7 +8037,7 @@ exports[`React - stateType: useState > svelte > Javascript Test > classDirective
 import * as React from \\"react\\";
 import { useState } from \\"react\\";
 
-function MyComponent(props) {
+function MyComponent(props = {}) {
   const [focus, setFocus] = useState(() => true);
 
   return (
@@ -8053,8 +8049,6 @@ function MyComponent(props) {
   );
 }
 
-MyComponent.defaultProps = {};
-
 export default MyComponent;
 "
 `;
@@ -8443,7 +8437,7 @@ exports[`React - stateType: useState > svelte > Typescript Test > classDirective
 import * as React from \\"react\\";
 import { useState } from \\"react\\";
 
-function MyComponent(props: any) {
+function MyComponent(props: any = {}) {
   const [focus, setFocus] = useState(() => true);
 
   return (
@@ -8455,8 +8449,6 @@ function MyComponent(props: any) {
   );
 }
 
-MyComponent.defaultProps = {};
-
 export default MyComponent;
 "
 `;
diff --git a/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap b/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap
index cfd4fdd68a..518bd5a371 100644
--- a/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap
@@ -482,68 +482,14 @@ export default Button;
 `;
 
 exports[`RSC > jsx > Javascript Test > Columns 1`] = `
-"/**
-          useMetadata:
-          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
-          */
-
-import * as React from \\"react\\";
-
-function Column(props) {
-  const getColumns = function getColumns() {
-    return props.columns || [];
-  };
-  const getGutterSize = function getGutterSize() {
-    return typeof props.space === \\"number\\" ? props.space || 0 : 20;
-  };
-  const getWidth = function getWidth(index) {
-    const columns = getColumns();
-    return (columns[index] && columns[index].width) || 100 / columns.length;
-  };
-  const getColumnCssWidth = function getColumnCssWidth(index) {
-    const columns = getColumns();
-    const gutterSize = getGutterSize();
-    const subtractWidth = (gutterSize * (columns.length - 1)) / columns.length;
-    return \`calc(\${getWidth(index)}% - \${subtractWidth}px)\`;
-  };
-
-  return (
-    <>
-      <div className=\\"builder-columns div\\">
-        {props.columns?.map((column, index) => (
-          <div className=\\"builder-column div-2\\">
-            {column.content}
-            {index}
-          </div>
-        ))}
-      </div>
-      <style jsx>{\`
-        .div {
-          display: flex;
-          flex-direction: column;
-          align-items: stretch;
-          line-height: normal;
-        }
-        @media (max-width: 999px) {
-          .div {
-            flex-direction: row;
-          }
-        }
-        @media (max-width: 639px) {
-          .div {
-            flex-direction: row-reverse;
-          }
-        }
-        .div-2 {
-          flex-grow: 1;
-        }
-      \`}</style>
-    </>
-  );
-}
-
-export default Column;
-"
+"'function' is not allowed as a variable declaration name. (20:9)
+  18 |
+  19 |   function Column(props) {
+> 20 |   const function getColumns() {
+     |         ^
+  21 | return props.columns || [];
+  22 | }
+  23 | const function getGutterSize() {"
 `;
 
 exports[`RSC > jsx > Javascript Test > ContentSlotHtml 1`] = `
@@ -577,7 +523,9 @@ exports[`RSC > jsx > Javascript Test > ContentSlotJSX 1`] = `
 import * as React from \\"react\\";
 import { useState } from \\"react\\";
 
-function ContentSlotJsxCode(props) {
+function ContentSlotJsxCode(
+  props = { content: \\"\\", slotReference: undefined, slotContent: undefined }
+) {
   const [name, setName] = useState(() => \\"king\\");
 
   const [showContent, setShowContent] = useState(() => false);
@@ -615,12 +563,6 @@ function ContentSlotJsxCode(props) {
   );
 }
 
-ContentSlotJsxCode.defaultProps = {
-  content: \\"\\",
-  slotReference: undefined,
-  slotContent: undefined,
-};
-
 export default ContentSlotJsxCode;
 "
 `;
@@ -1215,30 +1157,14 @@ export default FormInputComponent;
 `;
 
 exports[`RSC > jsx > Javascript Test > InputParent 1`] = `
-"/**
-          useMetadata:
-          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
-          */
-
-import * as React from \\"react\\";
-import FormInputComponent from \\"./input.raw\\";
-
-function Stepper(props) {
-  const handleChange = function handleChange(value) {
-    console.log(value);
-  };
-
-  return (
-    <FormInputComponent
-      name=\\"kingzez\\"
-      type=\\"text\\"
-      onChange={(value) => handleChange(value)}
-    />
-  );
-}
-
-export default Stepper;
-"
+"'function' is not allowed as a variable declaration name. (20:9)
+  18 |
+  19 |   function Stepper(props) {
+> 20 |   const function handleChange(value) {
+     |         ^
+  21 | console.log(value);
+  22 | }
+  23 |"
 `;
 
 exports[`RSC > jsx > Javascript Test > NestedStore 1`] = `
@@ -2183,7 +2109,16 @@ exports[`RSC > jsx > Javascript Test > defaultProps 1`] = `
 "\\"use client\\";
 import * as React from \\"react\\";
 
-function Button(props) {
+function Button(
+  props = {
+    text: \\"default text\\",
+    link: \\"https://builder.io/\\",
+    openLinkInNewTab: false,
+    onClick: () => {
+      console.log(\\"hi\\");
+    },
+  }
+) {
   return (
     <div>
       {props.link ? (
@@ -2208,15 +2143,6 @@ function Button(props) {
   );
 }
 
-Button.defaultProps = {
-  text: \\"default text\\",
-  link: \\"https://builder.io/\\",
-  openLinkInNewTab: false,
-  onClick: () => {
-    console.log(\\"hi\\");
-  },
-};
-
 export default Button;
 "
 `;
@@ -2225,7 +2151,14 @@ exports[`RSC > jsx > Javascript Test > defaultPropsOutsideComponent 1`] = `
 "\\"use client\\";
 import * as React from \\"react\\";
 
-function Button(props) {
+function Button(
+  props = {
+    text: \\"default text\\",
+    link: \\"https://builder.io/\\",
+    openLinkInNewTab: false,
+    onClick: () => {},
+  }
+) {
   return (
     <div>
       {props.link ? (
@@ -2250,13 +2183,6 @@ function Button(props) {
   );
 }
 
-Button.defaultProps = {
-  text: \\"default text\\",
-  link: \\"https://builder.io/\\",
-  openLinkInNewTab: false,
-  onClick: () => {},
-};
-
 export default Button;
 "
 `;
@@ -2356,63 +2282,25 @@ export default FigmaButton;
 `;
 
 exports[`RSC > jsx > Javascript Test > getterState 1`] = `
-"/**
-          useMetadata:
-          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
-          */
-
-import * as React from \\"react\\";
-
-function Button(props) {
-  const foo2 = function foo2() {
-    return props.foo + \\"foo\\";
-  };
-  const bar = function bar() {
-    return \\"bar\\";
-  };
-  const baz = function baz(i) {
-    return i + foo2().length;
-  };
-
-  return (
-    <div>
-      <p>{foo2()}</p>
-      <p>{bar()}</p>
-      <p>{baz(1)}</p>
-    </div>
-  );
-}
-
-export default Button;
-"
+"'function' is not allowed as a variable declaration name. (20:9)
+  18 |
+  19 |   function Button(props) {
+> 20 |   const function foo2() {
+     |         ^
+  21 | return props.foo + 'foo';
+  22 | }
+  23 | const function bar() {"
 `;
 
 exports[`RSC > jsx > Javascript Test > import types 1`] = `
-"/**
-          useMetadata:
-          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
-          */
-
-import * as React from \\"react\\";
-import RenderBlock from \\"./builder-render-block.raw\\";
-
-function RenderContent(props) {
-  const getRenderContentProps = function getRenderContentProps(block, index) {
-    return {
-      block: block,
-      index: index,
-    };
-  };
-
-  return (
-    <RenderBlock
-      {...getRenderContentProps(props.renderContentProps.block, 0)}
-    />
-  );
-}
-
-export default RenderContent;
-"
+"'function' is not allowed as a variable declaration name. (20:9)
+  18 |
+  19 |   function RenderContent(props) {
+> 20 |   const function getRenderContentProps(block, index) {
+     |         ^
+  21 | return {
+  22 | block: block,
+  23 | index: index"
 `;
 
 exports[`RSC > jsx > Javascript Test > multipleOnUpdate 1`] = `
@@ -2883,14 +2771,14 @@ export default OnUpdate;
 `;
 
 exports[`RSC > jsx > Javascript Test > renderBlock 1`] = `
-"Identifier expected. (219:8)
-  217 |    {shouldWrap() ? (
-  218 |    <>{isEmptyHtmlElement(tag()) ? (
-> 219 |    <tag()  {...(attributes())}  {...(actions())}  />
-      |        ^
-  220 |  ) : null}
-  221 | {!isEmptyHtmlElement(tag()) && repeatItemData() ? (
-  222 |    <>{repeatItemData()?.map((data, index) => ("
+"'function' is not allowed as a variable declaration name. (33:10)
+  31 |
+  32 |    function RenderBlock(props) {
+> 33 |    const function component() {
+     |          ^
+  34 | const componentName = getProcessedBlock({
+  35 |  block: props.block,
+  36 |  state: props.context.state,"
 `;
 
 exports[`RSC > jsx > Javascript Test > renderContentExample 1`] = `
@@ -4159,83 +4047,14 @@ export default Button;
 `;
 
 exports[`RSC > jsx > Typescript Test > Columns 1`] = `
-"/**
-          useMetadata:
-          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
-          */
-
-import * as React from \\"react\\";
-
-type Column = {
-  content: any; // TODO: Implement this when support for dynamic CSS lands
-
-  width?: number;
-};
-export interface ColumnProps {
-  columns?: Column[]; // TODO: Implement this when support for dynamic CSS lands
-
-  space?: number; // TODO: Implement this when support for dynamic CSS lands
-
-  stackColumnsAt?: \\"tablet\\" | \\"mobile\\" | \\"never\\"; // TODO: Implement this when support for dynamic CSS lands
-
-  reverseColumnsWhenStacked?: boolean;
-}
-
-function Column(props: ColumnProps) {
-  const getColumns = function getColumns() {
-    return props.columns || [];
-  };
-  const getGutterSize = function getGutterSize() {
-    return typeof props.space === \\"number\\" ? props.space || 0 : 20;
-  };
-  const getWidth = function getWidth(index: number) {
-    const columns = getColumns();
-    return (columns[index] && columns[index].width) || 100 / columns.length;
-  };
-  const getColumnCssWidth = function getColumnCssWidth(index: number) {
-    const columns = getColumns();
-    const gutterSize = getGutterSize();
-    const subtractWidth = (gutterSize * (columns.length - 1)) / columns.length;
-    return \`calc(\${getWidth(index)}% - \${subtractWidth}px)\`;
-  };
-
-  return (
-    <>
-      <div className=\\"builder-columns div\\">
-        {props.columns?.map((column, index) => (
-          <div className=\\"builder-column div-2\\">
-            {column.content}
-            {index}
-          </div>
-        ))}
-      </div>
-      <style jsx>{\`
-        .div {
-          display: flex;
-          flex-direction: column;
-          align-items: stretch;
-          line-height: normal;
-        }
-        @media (max-width: 999px) {
-          .div {
-            flex-direction: row;
-          }
-        }
-        @media (max-width: 639px) {
-          .div {
-            flex-direction: row-reverse;
-          }
-        }
-        .div-2 {
-          flex-grow: 1;
-        }
-      \`}</style>
-    </>
-  );
-}
-
-export default Column;
-"
+"'function' is not allowed as a variable declaration name. (33:9)
+  31 |
+  32 |   function Column(props:ColumnProps) {
+> 33 |   const function getColumns() {
+     |         ^
+  34 | return props.columns || [];
+  35 | }
+  36 | const function getGutterSize() {"
 `;
 
 exports[`RSC > jsx > Typescript Test > ContentSlotHtml 1`] = `
@@ -4280,7 +4099,13 @@ type Props = {
 };
 import type { JSX } from \\"../../../../jsx-runtime\\";
 
-function ContentSlotJsxCode(props: Props) {
+function ContentSlotJsxCode(
+  props: Props = {
+    content: \\"\\",
+    slotReference: undefined,
+    slotContent: undefined,
+  }
+) {
   const [name, setName] = useState(() => \\"king\\");
 
   const [showContent, setShowContent] = useState(() => false);
@@ -4318,12 +4143,6 @@ function ContentSlotJsxCode(props: Props) {
   );
 }
 
-ContentSlotJsxCode.defaultProps = {
-  content: \\"\\",
-  slotReference: undefined,
-  slotContent: undefined,
-};
-
 export default ContentSlotJsxCode;
 "
 `;
@@ -5008,30 +4827,14 @@ export default FormInputComponent;
 `;
 
 exports[`RSC > jsx > Typescript Test > InputParent 1`] = `
-"/**
-          useMetadata:
-          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
-          */
-
-import * as React from \\"react\\";
-import FormInputComponent from \\"./input.raw\\";
-
-function Stepper(props: any) {
-  const handleChange = function handleChange(value: string) {
-    console.log(value);
-  };
-
-  return (
-    <FormInputComponent
-      name=\\"kingzez\\"
-      type=\\"text\\"
-      onChange={(value) => handleChange(value)}
-    />
-  );
-}
-
-export default Stepper;
-"
+"'function' is not allowed as a variable declaration name. (20:9)
+  18 |
+  19 |   function Stepper(props:any) {
+> 20 |   const function handleChange(value: string) {
+     |         ^
+  21 | console.log(value);
+  22 | }
+  23 |"
 `;
 
 exports[`RSC > jsx > Typescript Test > NestedStore 1`] = `
@@ -6120,7 +5923,16 @@ export interface ButtonProps {
   onClick?: () => void;
 }
 
-function Button(props: ButtonProps) {
+function Button(
+  props: ButtonProps = {
+    text: \\"default text\\",
+    link: \\"https://builder.io/\\",
+    openLinkInNewTab: false,
+    onClick: () => {
+      console.log(\\"hi\\");
+    },
+  }
+) {
   return (
     <div>
       {props.link ? (
@@ -6145,15 +5957,6 @@ function Button(props: ButtonProps) {
   );
 }
 
-Button.defaultProps = {
-  text: \\"default text\\",
-  link: \\"https://builder.io/\\",
-  openLinkInNewTab: false,
-  onClick: () => {
-    console.log(\\"hi\\");
-  },
-};
-
 export default Button;
 "
 `;
@@ -6170,7 +5973,14 @@ export interface ButtonProps {
   onClick: () => void;
 }
 
-function Button(props: ButtonProps) {
+function Button(
+  props: ButtonProps = {
+    text: \\"default text\\",
+    link: \\"https://builder.io/\\",
+    openLinkInNewTab: false,
+    onClick: () => {},
+  }
+) {
   return (
     <div>
       {props.link ? (
@@ -6195,13 +6005,6 @@ function Button(props: ButtonProps) {
   );
 }
 
-Button.defaultProps = {
-  text: \\"default text\\",
-  link: \\"https://builder.io/\\",
-  openLinkInNewTab: false,
-  onClick: () => {},
-};
-
 export default Button;
 "
 `;
@@ -6305,74 +6108,25 @@ export default FigmaButton;
 `;
 
 exports[`RSC > jsx > Typescript Test > getterState 1`] = `
-"/**
-          useMetadata:
-          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
-          */
-
-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;
-"
+"'function' is not allowed as a variable declaration name. (22:9)
+  20 |
+  21 |   function Button(props:ButtonProps) {
+> 22 |   const function foo2() {
+     |         ^
+  23 | return props.foo + 'foo';
+  24 | }
+  25 | const function bar() {"
 `;
 
 exports[`RSC > jsx > Typescript Test > import types 1`] = `
-"/**
-          useMetadata:
-          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
-          */
-
-import * as React from \\"react\\";
-
-type RenderContentProps = {
-  options?: GetContentOptions;
-  content: BuilderContent;
-  renderContentProps: RenderBlockProps;
-};
-import { BuilderContent, GetContentOptions } from \\"@builder.io/sdk\\";
-import RenderBlock, { RenderBlockProps } from \\"./builder-render-block.raw\\";
-
-function RenderContent(props: RenderContentProps) {
-  const getRenderContentProps = function getRenderContentProps(block, index) {
-    return {
-      block: block,
-      index: index,
-    };
-  };
-
-  return (
-    <RenderBlock
-      {...getRenderContentProps(props.renderContentProps.block, 0)}
-    />
-  );
-}
-
-export default RenderContent;
-"
+"'function' is not allowed as a variable declaration name. (25:9)
+  23 |
+  24 |   function RenderContent(props:RenderContentProps) {
+> 25 |   const function getRenderContentProps(block, index) {
+     |         ^
+  26 | return {
+  27 | block: block,
+  28 | index: index"
 `;
 
 exports[`RSC > jsx > Typescript Test > multipleOnUpdate 1`] = `
@@ -6894,14 +6648,14 @@ export default OnUpdate;
 `;
 
 exports[`RSC > jsx > Typescript Test > renderBlock 1`] = `
-"Identifier expected. (227:8)
-  225 |    {shouldWrap() ? (
-  226 |    <>{isEmptyHtmlElement(tag()) ? (
-> 227 |    <tag()  {...(attributes())}  {...(actions())}  />
-      |        ^
-  228 |  ) : null}
-  229 | {!isEmptyHtmlElement(tag()) && repeatItemData() ? (
-  230 |    <>{repeatItemData()?.map((data, index) => ("
+"'function' is not allowed as a variable declaration name. (41:10)
+  39 |
+  40 |    function RenderBlock(props:RenderBlockProps) {
+> 41 |    const function component() {
+     |          ^
+  42 | const componentName = getProcessedBlock({
+  43 |  block: props.block,
+  44 |  state: props.context.state,"
 `;
 
 exports[`RSC > jsx > Typescript Test > renderContentExample 1`] = `
@@ -7800,7 +7554,7 @@ exports[`RSC > svelte > Javascript Test > classDirective 1`] = `
 import * as React from \\"react\\";
 import { useState } from \\"react\\";
 
-function MyComponent(props) {
+function MyComponent(props = {}) {
   const [focus, setFocus] = useState(() => true);
 
   return (
@@ -7812,8 +7566,6 @@ function MyComponent(props) {
   );
 }
 
-MyComponent.defaultProps = {};
-
 export default MyComponent;
 "
 `;
@@ -8212,7 +7964,7 @@ exports[`RSC > svelte > Typescript Test > classDirective 1`] = `
 import * as React from \\"react\\";
 import { useState } from \\"react\\";
 
-function MyComponent(props: any) {
+function MyComponent(props: any = {}) {
   const [focus, setFocus] = useState(() => true);
 
   return (
@@ -8224,8 +7976,6 @@ function MyComponent(props: any) {
   );
 }
 
-MyComponent.defaultProps = {};
-
 export default MyComponent;
 "
 `;
diff --git a/packages/core/src/__tests__/__snapshots__/taro.test.ts.snap b/packages/core/src/__tests__/__snapshots__/taro.test.ts.snap
index 4b6a40dffd..f4b783c039 100644
--- a/packages/core/src/__tests__/__snapshots__/taro.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/taro.test.ts.snap
@@ -570,7 +570,9 @@ import * as React from \\"react\\";
 import { useState } from \\"react\\";
 import { View, Text } from \\"@tarojs/components\\";
 
-function ContentSlotJsxCode(props) {
+function ContentSlotJsxCode(
+  props = { content: \\"\\", slotReference: undefined, slotContent: undefined }
+) {
   const [name, setName] = useState(() => \\"king\\");
 
   const [showContent, setShowContent] = useState(() => false);
@@ -607,12 +609,6 @@ function ContentSlotJsxCode(props) {
   );
 }
 
-ContentSlotJsxCode.defaultProps = {
-  content: \\"\\",
-  slotReference: undefined,
-  slotContent: undefined,
-};
-
 export default ContentSlotJsxCode;
 "
 `;
@@ -2108,7 +2104,16 @@ exports[`Taro > jsx > Javascript Test > defaultProps 1`] = `
 "import * as React from \\"react\\";
 import { View, Text, Button } from \\"@tarojs/components\\";
 
-function Button(props) {
+function Button(
+  props = {
+    text: \\"default text\\",
+    link: \\"https://builder.io/\\",
+    openLinkInNewTab: false,
+    onClick: () => {
+      console.log(\\"hi\\");
+    },
+  }
+) {
   return (
     <View>
       {props.link ? (
@@ -2133,15 +2138,6 @@ function Button(props) {
   );
 }
 
-Button.defaultProps = {
-  text: \\"default text\\",
-  link: \\"https://builder.io/\\",
-  openLinkInNewTab: false,
-  onClick: () => {
-    console.log(\\"hi\\");
-  },
-};
-
 export default Button;
 "
 `;
@@ -2150,7 +2146,14 @@ exports[`Taro > jsx > Javascript Test > defaultPropsOutsideComponent 1`] = `
 "import * as React from \\"react\\";
 import { View, Text, Button } from \\"@tarojs/components\\";
 
-function Button(props) {
+function Button(
+  props = {
+    text: \\"default text\\",
+    link: \\"https://builder.io/\\",
+    openLinkInNewTab: false,
+    onClick: () => {},
+  }
+) {
   return (
     <View>
       {props.link ? (
@@ -2175,13 +2178,6 @@ function Button(props) {
   );
 }
 
-Button.defaultProps = {
-  text: \\"default text\\",
-  link: \\"https://builder.io/\\",
-  openLinkInNewTab: false,
-  onClick: () => {},
-};
-
 export default Button;
 "
 `;
@@ -4370,7 +4366,13 @@ type Props = {
 import type { JSX } from \\"../../../../jsx-runtime\\";
 import { View, Text } from \\"@tarojs/components\\";
 
-function ContentSlotJsxCode(props: Props) {
+function ContentSlotJsxCode(
+  props: Props = {
+    content: \\"\\",
+    slotReference: undefined,
+    slotContent: undefined,
+  }
+) {
   const [name, setName] = useState(() => \\"king\\");
 
   const [showContent, setShowContent] = useState(() => false);
@@ -4407,12 +4409,6 @@ function ContentSlotJsxCode(props: Props) {
   );
 }
 
-ContentSlotJsxCode.defaultProps = {
-  content: \\"\\",
-  slotReference: undefined,
-  slotContent: undefined,
-};
-
 export default ContentSlotJsxCode;
 "
 `;
@@ -6153,7 +6149,16 @@ export interface ButtonProps {
 
 import { View, Text, Button } from \\"@tarojs/components\\";
 
-function Button(props: ButtonProps) {
+function Button(
+  props: ButtonProps = {
+    text: \\"default text\\",
+    link: \\"https://builder.io/\\",
+    openLinkInNewTab: false,
+    onClick: () => {
+      console.log(\\"hi\\");
+    },
+  }
+) {
   return (
     <View>
       {props.link ? (
@@ -6178,15 +6183,6 @@ function Button(props: ButtonProps) {
   );
 }
 
-Button.defaultProps = {
-  text: \\"default text\\",
-  link: \\"https://builder.io/\\",
-  openLinkInNewTab: false,
-  onClick: () => {
-    console.log(\\"hi\\");
-  },
-};
-
 export default Button;
 "
 `;
@@ -6204,7 +6200,14 @@ export interface ButtonProps {
 
 import { View, Text, Button } from \\"@tarojs/components\\";
 
-function Button(props: ButtonProps) {
+function Button(
+  props: ButtonProps = {
+    text: \\"default text\\",
+    link: \\"https://builder.io/\\",
+    openLinkInNewTab: false,
+    onClick: () => {},
+  }
+) {
   return (
     <View>
       {props.link ? (
@@ -6229,13 +6232,6 @@ function Button(props: ButtonProps) {
   );
 }
 
-Button.defaultProps = {
-  text: \\"default text\\",
-  link: \\"https://builder.io/\\",
-  openLinkInNewTab: false,
-  onClick: () => {},
-};
-
 export default Button;
 "
 `;
@@ -8025,14 +8021,12 @@ import * as React from \\"react\\";
 import { useState } from \\"react\\";
 import { Input } from \\"@tarojs/components\\";
 
-function MyComponent(props) {
+function MyComponent(props = {}) {
   const [focus, setFocus] = useState(() => true);
 
   return <Input />;
 }
 
-MyComponent.defaultProps = {};
-
 export default MyComponent;
 "
 `;
@@ -8435,14 +8429,12 @@ import * as React from \\"react\\";
 import { useState } from \\"react\\";
 import { Input } from \\"@tarojs/components\\";
 
-function MyComponent(props: any) {
+function MyComponent(props: any = {}) {
   const [focus, setFocus] = useState(() => true);
 
   return <Input />;
 }
 
-MyComponent.defaultProps = {};
-
 export default MyComponent;
 "
 `;
diff --git a/packages/core/src/__tests__/react.test.ts b/packages/core/src/__tests__/react.test.ts
index 6aa214b422..f296802077 100644
--- a/packages/core/src/__tests__/react.test.ts
+++ b/packages/core/src/__tests__/react.test.ts
@@ -30,3 +30,15 @@ describe('React - stateType: useState', () => {
     expect(output).toMatchSnapshot();
   });
 });
+
+/*describe('React - test', () => {
+  runTestsForTarget({
+    options: {
+      stateType: 'useState',
+    },
+    target: 'react',
+    generator: componentToReact,
+    only: ['defaultProps'],
+    logOutput: true,
+  });
+});*/
diff --git a/packages/core/src/generators/react/blocks.ts b/packages/core/src/generators/react/blocks.ts
index 40dc24b97d..26dfb85c42 100644
--- a/packages/core/src/generators/react/blocks.ts
+++ b/packages/core/src/generators/react/blocks.ts
@@ -16,7 +16,7 @@ import {
   processBinding,
   wrapInFragment,
 } from './helpers';
-import { updateStateSettersInCode } from './state';
+import { updateStateSettersInCode } from './helpers/state';
 import { ToReactOptions } from './types';
 
 const NODE_MAPPERS: {
diff --git a/packages/core/src/generators/react/generator.ts b/packages/core/src/generators/react/generator.ts
index b4ea1a5065..7ef026e861 100644
--- a/packages/core/src/generators/react/generator.ts
+++ b/packages/core/src/generators/react/generator.ts
@@ -1,20 +1,25 @@
+import { getDefaultProps } from '@/generators/react/helpers/default-props';
+import {
+  getOnEventHookComponentBody,
+  getOnInitHookComponentBody,
+  getOnMountComponentBody,
+  getOnUnMountComponentBody,
+  getOnUpdateComponentBody,
+} from '@/generators/react/helpers/hooks';
 import { createSingleBinding } from '@/helpers/bindings';
 import { createMitosisNode } from '@/helpers/create-mitosis-node';
 import { dedent } from '@/helpers/dedent';
 import { fastClone } from '@/helpers/fast-clone';
 import { getPropsRef } from '@/helpers/get-props-ref';
 import { getRefs } from '@/helpers/get-refs';
-import {
-  getStateObjectStringFromComponent,
-  stringifyContextValue,
-} from '@/helpers/get-state-object-string';
+import { stringifyContextValue } from '@/helpers/get-state-object-string';
 import { gettersToFunctions } from '@/helpers/getters-to-functions';
 import { handleMissingState } from '@/helpers/handle-missing-state';
 import { isRootTextNode } from '@/helpers/is-root-text-node';
 import { mapRefs } from '@/helpers/map-refs';
 import { initializeOptions } from '@/helpers/merge-options';
 import { checkIsDefined } from '@/helpers/nullable';
-import { getOnEventHandlerName, processOnEventHooksPlugin } from '@/helpers/on-event';
+import { processOnEventHooksPlugin } from '@/helpers/on-event';
 import { CODE_PROCESSOR_PLUGIN } from '@/helpers/plugins/process-code';
 import { processHttpRequests } from '@/helpers/process-http-requests';
 import { renderPreComponent } from '@/helpers/render-imports';
@@ -25,24 +30,37 @@ import { stripMetaProperties } from '@/helpers/strip-meta-properties';
 import { collectCss } from '@/helpers/styles/collect-css';
 import { collectStyledComponents } from '@/helpers/styles/collect-styled-components';
 import { hasCss } from '@/helpers/styles/helpers';
+import {
+  runPostCodePlugins,
+  runPostJsonPlugins,
+  runPreCodePlugins,
+  runPreJsonPlugins,
+} from '@/modules/plugins';
 import { MitosisComponent } from '@/types/mitosis-component';
 import { TranspilerGenerator } from '@/types/transpiler';
 import { types } from '@babel/core';
 import hash from 'hash-sum';
 import json5 from 'json5';
 import { format } from 'prettier/standalone';
-import {
-  runPostCodePlugins,
-  runPostJsonPlugins,
-  runPreCodePlugins,
-  runPreJsonPlugins,
-} from '../../modules/plugins';
 import { hasContext } from '../helpers/context';
 import { checkIfIsClientComponent } from '../helpers/rsc';
 import { collectReactNativeStyles } from '../react-native';
 import { blockToReact } from './blocks';
-import { closeFrag, openFrag, processTagReferences, wrapInFragment } from './helpers';
-import { getUseStateCode, processHookCode, updateStateSetters } from './state';
+import {
+  closeFrag,
+  isReactForwardRef,
+  openFrag,
+  processTagReferences,
+  wrapInFragment,
+} from './helpers';
+import {
+  getDefaultImport,
+  getReactVariantStateImportString,
+  getReactVariantStateString,
+  getUseStateCode,
+  processHookCode,
+  updateStateSetters,
+} from './helpers/state';
 import { ToReactOptions } from './types';
 
 export const contextPropDrillingKey = '_context';
@@ -254,43 +272,6 @@ export const componentToReact: TranspilerGenerator<Partial<ToReactOptions>> =
     return str;
   };
 
-// TODO: import target components when they are required
-const getDefaultImport = (json: MitosisComponent, options: ToReactOptions): string => {
-  const { preact, type } = options;
-  if (preact) {
-    return `
-    /** @jsx h */
-    import { h, Fragment } from 'preact';
-    `;
-  }
-  if (type === 'native') {
-    return `
-    import * as React from 'react';
-    import { FlatList, ScrollView, View, StyleSheet, Image, Text, Pressable, TextInput, TouchableOpacity, Button, Linking } from 'react-native';
-    `;
-  }
-  if (type === 'taro') {
-    return `
-    import * as React from 'react';
-    `;
-  }
-
-  return "import * as React from 'react';";
-};
-
-const getPropsDefinition = ({ json }: { json: MitosisComponent }) => {
-  if (!json.defaultProps) return '';
-  const defaultPropsString = Object.keys(json.defaultProps)
-    .map((prop) => {
-      const value = json.defaultProps!.hasOwnProperty(prop)
-        ? json.defaultProps![prop]?.code
-        : 'undefined';
-      return `${prop}: ${value}`;
-    })
-    .join(',');
-  return `${json.name}.defaultProps = {${defaultPropsString}};`;
-};
-
 const isRSC = (json: MitosisComponent, options: ToReactOptions) => {
   // When using RSC generator, we check `componentType` field in metadata to determine if it's a server component
   const componentType = json.meta.useMetadata?.rsc?.componentType;
@@ -335,14 +316,9 @@ const _componentToReact = (
   const hasState = options.stateType === 'builder' || checkHasState(json);
 
   const [forwardRef, hasPropRef] = getPropsRef(json);
-  const isForwardRef =
-    !options.preact &&
-    Boolean(
-      json.meta.useMetadata?.forwardRef || json.meta.useMetadata?.react?.forwardRef || hasPropRef,
-    );
+  const isForwardRef = !options.preact && Boolean(isReactForwardRef(json) || hasPropRef);
   if (isForwardRef) {
-    const meta = (json.meta.useMetadata?.forwardRef ||
-      json.meta.useMetadata?.react?.forwardRef) as string;
+    const meta = isReactForwardRef(json) as string;
     options.forwardRef = meta || forwardRef;
   }
   const forwardRefType =
@@ -431,100 +407,17 @@ const _componentToReact = (
         : ''
     }
     ${hasStateArgument ? '' : refsString}
-    ${
-      hasState
-        ? options.stateType === 'mobx'
-          ? `const state = useLocalObservable(() => (${getStateObjectStringFromComponent(json)}));`
-          : options.stateType === 'useState'
-          ? useStateCode
-          : options.stateType === 'solid'
-          ? `const state = useMutable(${getStateObjectStringFromComponent(json)});`
-          : options.stateType === 'builder'
-          ? `const state = useBuilderState(${getStateObjectStringFromComponent(json)});`
-          : options.stateType === 'variables'
-          ? getStateObjectStringFromComponent(json, {
-              format: 'variables',
-              keyPrefix: 'const',
-              valueMapper: (code, type, _, key) => {
-                if (type === 'getter') return `${key} = function ${code.replace('get ', '')}`;
-                if (type === 'function')
-                  return code.startsWith('async') ? code : `${key} = function ${code}`;
-                return code;
-              },
-            })
-          : `const state = useLocalProxy(${getStateObjectStringFromComponent(json)});`
-        : ''
-    }
+    ${getReactVariantStateString({ hasState, useStateCode, json, options })}
     ${hasStateArgument ? refsString : ''}
     ${getContextString(json, options)}
     ${json.hooks.init?.code ? processHookCode({ str: json.hooks.init?.code, options }) : ''}
     ${contextStr || ''}
 
-    ${
-      json.hooks.onInit?.code
-        ? shouldInlineOnInitHook
-          ? processHookCode({ str: json.hooks.onInit.code, options })
-          : `
-        const hasInitialized = useRef(false);
-        if (!hasInitialized.current) {
-          ${processHookCode({
-            str: json.hooks.onInit.code,
-            options,
-          })}
-          hasInitialized.current = true;
-        }
-        `
-        : ''
-    }
-
-    ${json.hooks.onEvent
-      .map((hook) => {
-        const eventName = `"${hook.eventName}"`;
-        const handlerName = getOnEventHandlerName(hook);
-        return `
-      useEffect(() => {
-        ${hook.refName}.current?.addEventListener(${eventName}, ${handlerName});
-        return () => ${hook.refName}.current?.removeEventListener(${eventName}, ${handlerName});
-      }, []);
-      `;
-      })
-      .join('\n')}
-
-    ${json.hooks.onMount
-      .map(
-        (hook) =>
-          `useEffect(() => {
-          ${processHookCode({
-            str: hook.code,
-            options,
-          })}
-        }, [])`,
-      )
-      .join('\n')}
-
-    ${
-      json.hooks.onUpdate
-        ?.map(
-          (hook) => `useEffect(() => {
-          ${processHookCode({ str: hook.code, options })}
-        },
-        ${hook.deps ? processHookCode({ str: hook.deps, options }) : ''})`,
-        )
-        .join(';') ?? ''
-    }
-
-    ${
-      json.hooks.onUnMount?.code
-        ? `useEffect(() => {
-          return () => {
-            ${processHookCode({
-              str: json.hooks.onUnMount.code,
-              options,
-            })}
-          }
-        }, [])`
-        : ''
-    }
+    ${getOnInitHookComponentBody({ shouldInlineOnInitHook, json, options })}
+    ${getOnEventHookComponentBody(json)}
+    ${getOnMountComponentBody({ json, options })}
+    ${getOnUpdateComponentBody({ json, options })}
+    ${getOnUnMountComponentBody({ json, options })}
 
     return (
       ${wrap ? openFrag(options) : ''}
@@ -546,7 +439,7 @@ const _componentToReact = (
 
   const str = dedent`
   ${shouldAddUseClientDirective ? `'use client';` : ''}
-  ${getDefaultImport(json, options)}
+  ${getDefaultImport(options)}
   ${styledComponentsCode ? `import styled from 'styled-components';\n` : ''}
   ${
     reactLibImports.size
@@ -562,17 +455,7 @@ const _componentToReact = (
     import { jsx } from '@emotion/react'`.trim()
       : ''
   }
-    ${
-      !hasState
-        ? ''
-        : options.stateType === 'valtio'
-        ? `import { useLocalProxy } from 'valtio/utils';`
-        : options.stateType === 'solid'
-        ? `import { useMutable } from 'react-solid-state';`
-        : options.stateType === 'mobx'
-        ? `import { useLocalObservable, observer } from 'mobx-react-lite';`
-        : ''
-    }
+    ${getReactVariantStateImportString(hasState, options)}
     ${json.types && options.typescript ? json.types.join('\n') : ''}
     ${renderPreComponent({
       explicitImportFileExtension: options.explicitImportFileExtension,
@@ -581,12 +464,10 @@ const _componentToReact = (
     })}
     ${isForwardRef ? `const ${json.name} = forwardRef${forwardRefType}(` : ''}function ${
     json.name
-  }(${componentArgs}) {
+  }(${componentArgs}${getDefaultProps(json)}) {
     ${componentBody}
   }${isForwardRef ? ')' : ''}
 
-    ${getPropsDefinition({ json })}
-
     ${
       reactNativeStyles
         ? `const styles = StyleSheet.create(${json5.stringify(reactNativeStyles)});`
diff --git a/packages/core/src/generators/react/helpers/default-props.ts b/packages/core/src/generators/react/helpers/default-props.ts
new file mode 100644
index 0000000000..93159135da
--- /dev/null
+++ b/packages/core/src/generators/react/helpers/default-props.ts
@@ -0,0 +1,14 @@
+import { MitosisComponent } from '@/types/mitosis-component';
+
+export const getDefaultProps = (json: MitosisComponent) => {
+  if (!json.defaultProps) return '';
+  const defaultPropsString = Object.keys(json.defaultProps)
+    .map((prop) => {
+      const value = json.defaultProps!.hasOwnProperty(prop)
+        ? json.defaultProps![prop]?.code
+        : 'undefined';
+      return `${prop}: ${value}`;
+    })
+    .join(',');
+  return ` = {${defaultPropsString}}`;
+};
diff --git a/packages/core/src/generators/react/helpers/hooks.ts b/packages/core/src/generators/react/helpers/hooks.ts
new file mode 100644
index 0000000000..ca6a0242c9
--- /dev/null
+++ b/packages/core/src/generators/react/helpers/hooks.ts
@@ -0,0 +1,95 @@
+import { ToReactOptions } from '@/generators/react';
+import { processHookCode } from '@/generators/react/helpers/state';
+import { getOnEventHandlerName } from '@/helpers/on-event';
+import { MitosisComponent } from '@/types/mitosis-component';
+
+export const getOnInitHookComponentBody = ({
+  shouldInlineOnInitHook,
+  options,
+  json,
+}: {
+  json: MitosisComponent;
+  options: ToReactOptions;
+  shouldInlineOnInitHook?: boolean;
+}) =>
+  json.hooks.onInit?.code
+    ? shouldInlineOnInitHook
+      ? processHookCode({ str: json.hooks.onInit.code, options })
+      : `
+        const hasInitialized = useRef(false);
+        if (!hasInitialized.current) {
+          ${processHookCode({
+            str: json.hooks.onInit.code,
+            options,
+          })}
+          hasInitialized.current = true;
+        }
+        `
+    : '';
+
+export const getOnEventHookComponentBody = (json: MitosisComponent) =>
+  json.hooks.onEvent
+    .map((hook) => {
+      const eventName = `"${hook.eventName}"`;
+      const handlerName = getOnEventHandlerName(hook);
+      return `
+      useEffect(() => {
+        ${hook.refName}.current?.addEventListener(${eventName}, ${handlerName});
+        return () => ${hook.refName}.current?.removeEventListener(${eventName}, ${handlerName});
+      }, []);
+      `;
+    })
+    .join('\n');
+
+export const getOnMountComponentBody = ({
+  options,
+  json,
+}: {
+  json: MitosisComponent;
+  options: ToReactOptions;
+}) =>
+  json.hooks.onMount
+    .map(
+      (hook) =>
+        `useEffect(() => {
+          ${processHookCode({
+            str: hook.code,
+            options,
+          })}
+        }, [])`,
+    )
+    .join('\n');
+
+export const getOnUpdateComponentBody = ({
+  options,
+  json,
+}: {
+  json: MitosisComponent;
+  options: ToReactOptions;
+}) =>
+  json.hooks.onUpdate
+    ?.map(
+      (hook) => `useEffect(() => {
+          ${processHookCode({ str: hook.code, options })}
+        },
+        ${hook.deps ? processHookCode({ str: hook.deps, options }) : ''})`,
+    )
+    .join(';') ?? '';
+
+export const getOnUnMountComponentBody = ({
+  options,
+  json,
+}: {
+  json: MitosisComponent;
+  options: ToReactOptions;
+}) =>
+  json.hooks.onUnMount?.code
+    ? `useEffect(() => {
+          return () => {
+            ${processHookCode({
+              str: json.hooks.onUnMount.code,
+              options,
+            })}
+          }
+        }, [])`
+    : '';
diff --git a/packages/core/src/generators/react/helpers.ts b/packages/core/src/generators/react/helpers/index.ts
similarity index 93%
rename from packages/core/src/generators/react/helpers.ts
rename to packages/core/src/generators/react/helpers/index.ts
index b4ba8e9292..062baac243 100644
--- a/packages/core/src/generators/react/helpers.ts
+++ b/packages/core/src/generators/react/helpers/index.ts
@@ -5,7 +5,7 @@ import { MitosisNode } from '@/types/mitosis-node';
 import { upperFirst } from 'lodash';
 import traverse from 'neotraverse/legacy';
 
-import { ToReactOptions } from './types';
+import { ToReactOptions } from '../types';
 
 export const processBinding = (str: string, options: ToReactOptions) => {
   // fix web-component tag transform issue with dashes by not transforming it
@@ -94,3 +94,6 @@ export function processTagReferences(json: MitosisComponent, options: ToReactOpt
     }
   });
 }
+
+export const isReactForwardRef = (json: MitosisComponent): string | undefined =>
+  json.meta.useMetadata?.forwardRef || json.meta.useMetadata?.react?.forwardRef;
diff --git a/packages/core/src/generators/react/state.ts b/packages/core/src/generators/react/helpers/state.ts
similarity index 57%
rename from packages/core/src/generators/react/state.ts
rename to packages/core/src/generators/react/helpers/state.ts
index a3866bff65..363972a75b 100644
--- a/packages/core/src/generators/react/state.ts
+++ b/packages/core/src/generators/react/helpers/state.ts
@@ -1,4 +1,6 @@
 import { capitalize } from '@/helpers/capitalize';
+import { getFunctionString } from '@/helpers/get-function-string';
+import { getStateObjectStringFromComponent } from '@/helpers/get-state-object-string';
 import { getTypedFunction } from '@/helpers/get-typed-function';
 import { isMitosisNode } from '@/helpers/is-mitosis-node';
 import { prefixWithFunction, replaceGetterWithFunction } from '@/helpers/patterns';
@@ -7,8 +9,8 @@ import { MitosisComponent, StateValue } from '@/types/mitosis-component';
 import { types } from '@babel/core';
 import { pipe } from 'fp-ts/lib/function';
 import traverse from 'neotraverse/legacy';
-import { processBinding } from './helpers';
-import { ToReactOptions } from './types';
+import { processBinding } from '../helpers';
+import { ToReactOptions } from '../types';
 
 /**
  * Removes all `this.` references.
@@ -98,3 +100,74 @@ export const updateStateSettersInCode = (value: string, options: ToReactOptions)
       types.callExpression(types.identifier(getSetStateFnName(propertyName)), [path.node.right]),
   });
 };
+
+export const getReactVariantStateImportString = (hasState: boolean, options: ToReactOptions) => {
+  return !hasState
+    ? ''
+    : options.stateType === 'valtio'
+    ? `import { useLocalProxy } from 'valtio/utils';`
+    : options.stateType === 'solid'
+    ? `import { useMutable } from 'react-solid-state';`
+    : options.stateType === 'mobx'
+    ? `import { useLocalObservable, observer } from 'mobx-react-lite';`
+    : '';
+};
+
+export const getReactVariantStateString = ({
+  hasState,
+  options,
+  json,
+  useStateCode,
+}: {
+  useStateCode: string;
+  hasState: boolean;
+  json: MitosisComponent;
+  options: ToReactOptions;
+}) =>
+  hasState
+    ? options.stateType === 'mobx'
+      ? `const state = useLocalObservable(() => (${getStateObjectStringFromComponent(json)}));`
+      : options.stateType === 'useState'
+      ? useStateCode
+      : options.stateType === 'solid'
+      ? `const state = useMutable(${getStateObjectStringFromComponent(json)});`
+      : options.stateType === 'builder'
+      ? `const state = useBuilderState(${getStateObjectStringFromComponent(json)});`
+      : options.stateType === 'variables'
+      ? getStateObjectStringFromComponent(json, {
+          format: 'variables',
+          keyPrefix: 'const',
+          valueMapper: (code, type, _, key) => {
+            if (key) {
+              if (type === 'getter') return getFunctionString(code.replace('get ', ''));
+              if (type === 'function')
+                return code.startsWith('async') ? code : getFunctionString(code);
+            }
+            return code;
+          },
+        })
+      : `const state = useLocalProxy(${getStateObjectStringFromComponent(json)});`
+    : '';
+
+export const getDefaultImport = (options: ToReactOptions): string => {
+  const { preact, type } = options;
+  if (preact) {
+    return `
+    /** @jsx h */
+    import { h, Fragment } from 'preact';
+    `;
+  }
+  if (type === 'native') {
+    return `
+    import * as React from 'react';
+    import { FlatList, ScrollView, View, StyleSheet, Image, Text, Pressable, TextInput, TouchableOpacity, Button, Linking } from 'react-native';
+    `;
+  }
+  if (type === 'taro') {
+    return `
+    import * as React from 'react';
+    `;
+  }
+
+  return "import * as React from 'react';";
+};
\ No newline at end of file
diff --git a/packages/core/src/helpers/get-function-string.ts b/packages/core/src/helpers/get-function-string.ts
new file mode 100644
index 0000000000..58814870fb
--- /dev/null
+++ b/packages/core/src/helpers/get-function-string.ts
@@ -0,0 +1,2 @@
+export const getFunctionString = (code: string): string =>
+  code.startsWith('function') ? code : `function ${code}`;
\ No newline at end of file

From 89fa706d22ae67e4c89197c001dbba91676a8f38 Mon Sep 17 00:00:00 2001
From: Nicolas Merget <nicolas.merget@deutschebahn.com>
Date: Wed, 15 Jan 2025 11:18:59 +0100
Subject: [PATCH 02/20] chore: update snapshots

---
 .../__snapshots__/mitosis.test.ts.snap        | 34 ++++++++-----------
 .../__snapshots__/preact.test.ts.snap         | 34 ++++++++-----------
 .../__snapshots__/react-native.test.ts.snap   | 34 ++++++++-----------
 .../react-state-builder.test.ts.snap          | 34 ++++++++-----------
 .../react-state-mobx.test.ts.snap             | 34 ++++++++-----------
 .../react-state-solid.test.ts.snap            | 34 ++++++++-----------
 .../react-state-valtio.test.ts.snap           | 34 ++++++++-----------
 .../react-state-variables.test.ts.snap        | 34 ++++++++-----------
 .../__snapshots__/react.test.ts.snap          | 34 ++++++++-----------
 .../__tests__/__snapshots__/rsc.test.ts.snap  | 34 ++++++++-----------
 .../__tests__/__snapshots__/taro.test.ts.snap | 34 ++++++++-----------
 .../src/generators/react/helpers/state.ts     |  2 +-
 .../core/src/helpers/get-function-string.ts   |  2 +-
 13 files changed, 156 insertions(+), 222 deletions(-)

diff --git a/packages/core/src/__tests__/__snapshots__/mitosis.test.ts.snap b/packages/core/src/__tests__/__snapshots__/mitosis.test.ts.snap
index 6aade9ad5b..a1fbed0642 100644
--- a/packages/core/src/__tests__/__snapshots__/mitosis.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/mitosis.test.ts.snap
@@ -17853,7 +17853,6 @@ function RenderContent(props) {
   useEffect(() => {
     sendComponentsToVisualEditor(props.customComponents);
   }, []);
-
   useEffect(() => {
     dispatchNewContentToVisualEditor(props.content);
   }, [props.content]);
@@ -21574,7 +21573,6 @@ function RenderContent(props) {
   useEffect(() => {
     sendComponentsToVisualEditor(props.customComponents);
   }, []);
-
   useEffect(() => {
     dispatchNewContentToVisualEditor(props.content);
   }, [props.content]);
@@ -22312,14 +22310,14 @@ export default MyComponent;
 `;
 
 exports[`Mitosis, format: react > svelte > Javascript Test > context 1`] = `
-"'>' expected. (35:13)
-  33 | return (
-  34 |
-> 35 | <'activeTab'.Provider  value={activeTab}><div>{activeTab}</div></'activeTab'.Provider>
+"'>' expected. (31:13)
+  29 | return (
+  30 |
+> 31 | <'activeTab'.Provider  value={activeTab}><div>{activeTab}</div></'activeTab'.Provider>
      |             ^
-  36 |
-  37 |
-  38 |"
+  32 |
+  33 |
+  34 |"
 `;
 
 exports[`Mitosis, format: react > svelte > Javascript Test > each 1`] = `
@@ -22440,11 +22438,9 @@ function MyComponent(props) {
   useEffect(() => {
     console.log(\\"onMount\\");
   }, []);
-
   useEffect(() => {
     console.log(\\"onAfterUpdate\\");
   });
-
   useEffect(() => {
     return () => {
       console.log(\\"onDestroy\\");
@@ -22713,14 +22709,14 @@ export default MyComponent;
 `;
 
 exports[`Mitosis, format: react > svelte > Typescript Test > context 1`] = `
-"'>' expected. (35:13)
-  33 | return (
-  34 |
-> 35 | <'activeTab'.Provider  value={activeTab}><div>{activeTab}</div></'activeTab'.Provider>
+"'>' expected. (31:13)
+  29 | return (
+  30 |
+> 31 | <'activeTab'.Provider  value={activeTab}><div>{activeTab}</div></'activeTab'.Provider>
      |             ^
-  36 |
-  37 |
-  38 |"
+  32 |
+  33 |
+  34 |"
 `;
 
 exports[`Mitosis, format: react > svelte > Typescript Test > each 1`] = `
@@ -22841,11 +22837,9 @@ function MyComponent(props) {
   useEffect(() => {
     console.log(\\"onMount\\");
   }, []);
-
   useEffect(() => {
     console.log(\\"onAfterUpdate\\");
   });
-
   useEffect(() => {
     return () => {
       console.log(\\"onDestroy\\");
diff --git a/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap b/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap
index 1c48c8a76a..747a466716 100644
--- a/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap
@@ -3043,7 +3043,6 @@ function RenderContent(props) {
   useEffect(() => {
     sendComponentsToVisualEditor(props.customComponents);
   }, []);
-
   useEffect(() => {
     dispatchNewContentToVisualEditor(props.content);
   }, [props.content]);
@@ -7196,7 +7195,6 @@ function RenderContent(props: Props) {
   useEffect(() => {
     sendComponentsToVisualEditor(props.customComponents);
   }, []);
-
   useEffect(() => {
     dispatchNewContentToVisualEditor(props.content);
   }, [props.content]);
@@ -8068,14 +8066,14 @@ export default MyComponent;
 `;
 
 exports[`Preact > svelte > Javascript Test > context 1`] = `
-"'>' expected. (36:13)
-  34 | return (
-  35 |
-> 36 | <'activeTab'.Provider  value={activeTab}><div>{activeTab}</div></'activeTab'.Provider>
+"'>' expected. (32:13)
+  30 | return (
+  31 |
+> 32 | <'activeTab'.Provider  value={activeTab}><div>{activeTab}</div></'activeTab'.Provider>
      |             ^
-  37 |
-  38 |
-  39 |"
+  33 |
+  34 |
+  35 |"
 `;
 
 exports[`Preact > svelte > Javascript Test > each 1`] = `
@@ -8196,11 +8194,9 @@ function MyComponent(props) {
   useEffect(() => {
     console.log(\\"onMount\\");
   }, []);
-
   useEffect(() => {
     console.log(\\"onAfterUpdate\\");
   });
-
   useEffect(() => {
     return () => {
       console.log(\\"onDestroy\\");
@@ -8470,14 +8466,14 @@ export default MyComponent;
 `;
 
 exports[`Preact > svelte > Typescript Test > context 1`] = `
-"'>' expected. (36:13)
-  34 | return (
-  35 |
-> 36 | <'activeTab'.Provider  value={activeTab}><div>{activeTab}</div></'activeTab'.Provider>
+"'>' expected. (32:13)
+  30 | return (
+  31 |
+> 32 | <'activeTab'.Provider  value={activeTab}><div>{activeTab}</div></'activeTab'.Provider>
      |             ^
-  37 |
-  38 |
-  39 |"
+  33 |
+  34 |
+  35 |"
 `;
 
 exports[`Preact > svelte > Typescript Test > each 1`] = `
@@ -8598,11 +8594,9 @@ function MyComponent(props: any) {
   useEffect(() => {
     console.log(\\"onMount\\");
   }, []);
-
   useEffect(() => {
     console.log(\\"onAfterUpdate\\");
   });
-
   useEffect(() => {
     return () => {
       console.log(\\"onDestroy\\");
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 18b0eb23fc..1f0e4cd777 100644
--- a/packages/core/src/__tests__/__snapshots__/react-native.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/react-native.test.ts.snap
@@ -4202,7 +4202,6 @@ function RenderContent(props) {
   useEffect(() => {
     sendComponentsToVisualEditor(props.customComponents);
   }, []);
-
   useEffect(() => {
     dispatchNewContentToVisualEditor(props.content);
   }, [props.content]);
@@ -9888,7 +9887,6 @@ function RenderContent(props: Props) {
   useEffect(() => {
     sendComponentsToVisualEditor(props.customComponents);
   }, []);
-
   useEffect(() => {
     dispatchNewContentToVisualEditor(props.content);
   }, [props.content]);
@@ -11270,14 +11268,14 @@ export default MyComponent;
 `;
 
 exports[`React Native > svelte > Javascript Test > context 1`] = `
-"'>' expected. (36:13)
-  34 | return (
-  35 |
-> 36 | <'activeTab'.Provider  value={activeTab}><View><Text>{activeTab}</Text></View></'activeTab'.Provider>
+"'>' expected. (32:13)
+  30 | return (
+  31 |
+> 32 | <'activeTab'.Provider  value={activeTab}><View><Text>{activeTab}</Text></View></'activeTab'.Provider>
      |             ^
-  37 |
-  38 |
-  39 |"
+  33 |
+  34 |
+  35 |"
 `;
 
 exports[`React Native > svelte > Javascript Test > each 1`] = `
@@ -11482,11 +11480,9 @@ function MyComponent(props) {
   useEffect(() => {
     console.log(\\"onMount\\");
   }, []);
-
   useEffect(() => {
     console.log(\\"onAfterUpdate\\");
   });
-
   useEffect(() => {
     return () => {
       console.log(\\"onDestroy\\");
@@ -11863,14 +11859,14 @@ export default MyComponent;
 `;
 
 exports[`React Native > svelte > Typescript Test > context 1`] = `
-"'>' expected. (36:13)
-  34 | return (
-  35 |
-> 36 | <'activeTab'.Provider  value={activeTab}><View><Text>{activeTab}</Text></View></'activeTab'.Provider>
+"'>' expected. (32:13)
+  30 | return (
+  31 |
+> 32 | <'activeTab'.Provider  value={activeTab}><View><Text>{activeTab}</Text></View></'activeTab'.Provider>
      |             ^
-  37 |
-  38 |
-  39 |"
+  33 |
+  34 |
+  35 |"
 `;
 
 exports[`React Native > svelte > Typescript Test > each 1`] = `
@@ -12075,11 +12071,9 @@ function MyComponent(props: any) {
   useEffect(() => {
     console.log(\\"onMount\\");
   }, []);
-
   useEffect(() => {
     console.log(\\"onAfterUpdate\\");
   });
-
   useEffect(() => {
     return () => {
       console.log(\\"onDestroy\\");
diff --git a/packages/core/src/__tests__/__snapshots__/react-state-builder.test.ts.snap b/packages/core/src/__tests__/__snapshots__/react-state-builder.test.ts.snap
index c2c3dbe167..14c4ef6ddf 100644
--- a/packages/core/src/__tests__/__snapshots__/react-state-builder.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/react-state-builder.test.ts.snap
@@ -3065,7 +3065,6 @@ function RenderContent(props) {
   useEffect(() => {
     sendComponentsToVisualEditor(props.customComponents);
   }, []);
-
   useEffect(() => {
     dispatchNewContentToVisualEditor(props.content);
   }, [props.content]);
@@ -7201,7 +7200,6 @@ function RenderContent(props: Props) {
   useEffect(() => {
     sendComponentsToVisualEditor(props.customComponents);
   }, []);
-
   useEffect(() => {
     dispatchNewContentToVisualEditor(props.content);
   }, [props.content]);
@@ -8032,14 +8030,14 @@ export default MyComponent;
 `;
 
 exports[`React - stateType: builder > svelte > Javascript Test > context 1`] = `
-"'>' expected. (35:13)
-  33 | return (
-  34 |
-> 35 | <'activeTab'.Provider  value={state.activeTab}><div>{state.activeTab}</div></'activeTab'.Provider>
+"'>' expected. (31:13)
+  29 | return (
+  30 |
+> 31 | <'activeTab'.Provider  value={state.activeTab}><div>{state.activeTab}</div></'activeTab'.Provider>
      |             ^
-  36 |
-  37 |
-  38 |"
+  32 |
+  33 |
+  34 |"
 `;
 
 exports[`React - stateType: builder > svelte > Javascript Test > each 1`] = `
@@ -8161,11 +8159,9 @@ function MyComponent(props) {
   useEffect(() => {
     console.log(\\"onMount\\");
   }, []);
-
   useEffect(() => {
     console.log(\\"onAfterUpdate\\");
   });
-
   useEffect(() => {
     return () => {
       console.log(\\"onDestroy\\");
@@ -8430,14 +8426,14 @@ export default MyComponent;
 `;
 
 exports[`React - stateType: builder > svelte > Typescript Test > context 1`] = `
-"'>' expected. (35:13)
-  33 | return (
-  34 |
-> 35 | <'activeTab'.Provider  value={state.activeTab}><div>{state.activeTab}</div></'activeTab'.Provider>
+"'>' expected. (31:13)
+  29 | return (
+  30 |
+> 31 | <'activeTab'.Provider  value={state.activeTab}><div>{state.activeTab}</div></'activeTab'.Provider>
      |             ^
-  36 |
-  37 |
-  38 |"
+  32 |
+  33 |
+  34 |"
 `;
 
 exports[`React - stateType: builder > svelte > Typescript Test > each 1`] = `
@@ -8559,11 +8555,9 @@ function MyComponent(props: any) {
   useEffect(() => {
     console.log(\\"onMount\\");
   }, []);
-
   useEffect(() => {
     console.log(\\"onAfterUpdate\\");
   });
-
   useEffect(() => {
     return () => {
       console.log(\\"onDestroy\\");
diff --git a/packages/core/src/__tests__/__snapshots__/react-state-mobx.test.ts.snap b/packages/core/src/__tests__/__snapshots__/react-state-mobx.test.ts.snap
index 3e028e0ddb..0f9db9d7ac 100644
--- a/packages/core/src/__tests__/__snapshots__/react-state-mobx.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/react-state-mobx.test.ts.snap
@@ -3124,7 +3124,6 @@ function RenderContent(props) {
   useEffect(() => {
     sendComponentsToVisualEditor(props.customComponents);
   }, []);
-
   useEffect(() => {
     dispatchNewContentToVisualEditor(props.content);
   }, [props.content]);
@@ -7288,7 +7287,6 @@ function RenderContent(props: Props) {
   useEffect(() => {
     sendComponentsToVisualEditor(props.customComponents);
   }, []);
-
   useEffect(() => {
     dispatchNewContentToVisualEditor(props.content);
   }, [props.content]);
@@ -8118,14 +8116,14 @@ export default observedMyComponent;
 `;
 
 exports[`React - stateType: mobx > svelte > Javascript Test > context 1`] = `
-"'>' expected. (35:13)
-  33 | return (
-  34 |
-> 35 | <'activeTab'.Provider  value={state.activeTab}><div>{state.activeTab}</div></'activeTab'.Provider>
+"'>' expected. (31:13)
+  29 | return (
+  30 |
+> 31 | <'activeTab'.Provider  value={state.activeTab}><div>{state.activeTab}</div></'activeTab'.Provider>
      |             ^
-  36 |
-  37 |
-  38 |"
+  32 |
+  33 |
+  34 |"
 `;
 
 exports[`React - stateType: mobx > svelte > Javascript Test > each 1`] = `
@@ -8257,11 +8255,9 @@ function MyComponent(props) {
   useEffect(() => {
     console.log(\\"onMount\\");
   }, []);
-
   useEffect(() => {
     console.log(\\"onAfterUpdate\\");
   });
-
   useEffect(() => {
     return () => {
       console.log(\\"onDestroy\\");
@@ -8539,14 +8535,14 @@ export default observedMyComponent;
 `;
 
 exports[`React - stateType: mobx > svelte > Typescript Test > context 1`] = `
-"'>' expected. (35:13)
-  33 | return (
-  34 |
-> 35 | <'activeTab'.Provider  value={state.activeTab}><div>{state.activeTab}</div></'activeTab'.Provider>
+"'>' expected. (31:13)
+  29 | return (
+  30 |
+> 31 | <'activeTab'.Provider  value={state.activeTab}><div>{state.activeTab}</div></'activeTab'.Provider>
      |             ^
-  36 |
-  37 |
-  38 |"
+  32 |
+  33 |
+  34 |"
 `;
 
 exports[`React - stateType: mobx > svelte > Typescript Test > each 1`] = `
@@ -8678,11 +8674,9 @@ function MyComponent(props: any) {
   useEffect(() => {
     console.log(\\"onMount\\");
   }, []);
-
   useEffect(() => {
     console.log(\\"onAfterUpdate\\");
   });
-
   useEffect(() => {
     return () => {
       console.log(\\"onDestroy\\");
diff --git a/packages/core/src/__tests__/__snapshots__/react-state-solid.test.ts.snap b/packages/core/src/__tests__/__snapshots__/react-state-solid.test.ts.snap
index c72f2be890..74a33cee21 100644
--- a/packages/core/src/__tests__/__snapshots__/react-state-solid.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/react-state-solid.test.ts.snap
@@ -3028,7 +3028,6 @@ function RenderContent(props) {
   useEffect(() => {
     sendComponentsToVisualEditor(props.customComponents);
   }, []);
-
   useEffect(() => {
     dispatchNewContentToVisualEditor(props.content);
   }, [props.content]);
@@ -7067,7 +7066,6 @@ function RenderContent(props: Props) {
   useEffect(() => {
     sendComponentsToVisualEditor(props.customComponents);
   }, []);
-
   useEffect(() => {
     dispatchNewContentToVisualEditor(props.content);
   }, [props.content]);
@@ -7865,14 +7863,14 @@ export default MyComponent;
 `;
 
 exports[`React - stateType: solid > svelte > Javascript Test > context 1`] = `
-"'>' expected. (35:13)
-  33 | return (
-  34 |
-> 35 | <'activeTab'.Provider  value={state.activeTab}><div>{state.activeTab}</div></'activeTab'.Provider>
+"'>' expected. (31:13)
+  29 | return (
+  30 |
+> 31 | <'activeTab'.Provider  value={state.activeTab}><div>{state.activeTab}</div></'activeTab'.Provider>
      |             ^
-  36 |
-  37 |
-  38 |"
+  32 |
+  33 |
+  34 |"
 `;
 
 exports[`React - stateType: solid > svelte > Javascript Test > each 1`] = `
@@ -7997,11 +7995,9 @@ function MyComponent(props) {
   useEffect(() => {
     console.log(\\"onMount\\");
   }, []);
-
   useEffect(() => {
     console.log(\\"onAfterUpdate\\");
   });
-
   useEffect(() => {
     return () => {
       console.log(\\"onDestroy\\");
@@ -8269,14 +8265,14 @@ export default MyComponent;
 `;
 
 exports[`React - stateType: solid > svelte > Typescript Test > context 1`] = `
-"'>' expected. (35:13)
-  33 | return (
-  34 |
-> 35 | <'activeTab'.Provider  value={state.activeTab}><div>{state.activeTab}</div></'activeTab'.Provider>
+"'>' expected. (31:13)
+  29 | return (
+  30 |
+> 31 | <'activeTab'.Provider  value={state.activeTab}><div>{state.activeTab}</div></'activeTab'.Provider>
      |             ^
-  36 |
-  37 |
-  38 |"
+  32 |
+  33 |
+  34 |"
 `;
 
 exports[`React - stateType: solid > svelte > Typescript Test > each 1`] = `
@@ -8401,11 +8397,9 @@ function MyComponent(props: any) {
   useEffect(() => {
     console.log(\\"onMount\\");
   }, []);
-
   useEffect(() => {
     console.log(\\"onAfterUpdate\\");
   });
-
   useEffect(() => {
     return () => {
       console.log(\\"onDestroy\\");
diff --git a/packages/core/src/__tests__/__snapshots__/react-state-valtio.test.ts.snap b/packages/core/src/__tests__/__snapshots__/react-state-valtio.test.ts.snap
index 51e426fe1a..7e9356fdb7 100644
--- a/packages/core/src/__tests__/__snapshots__/react-state-valtio.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/react-state-valtio.test.ts.snap
@@ -3031,7 +3031,6 @@ function RenderContent(props) {
   useEffect(() => {
     sendComponentsToVisualEditor(props.customComponents);
   }, []);
-
   useEffect(() => {
     dispatchNewContentToVisualEditor(props.content);
   }, [props.content]);
@@ -7073,7 +7072,6 @@ function RenderContent(props: Props) {
   useEffect(() => {
     sendComponentsToVisualEditor(props.customComponents);
   }, []);
-
   useEffect(() => {
     dispatchNewContentToVisualEditor(props.content);
   }, [props.content]);
@@ -7871,14 +7869,14 @@ export default MyComponent;
 `;
 
 exports[`React - stateType: valtio > svelte > Javascript Test > context 1`] = `
-"'>' expected. (35:13)
-  33 | return (
-  34 |
-> 35 | <'activeTab'.Provider  value={state.activeTab}><div>{state.activeTab}</div></'activeTab'.Provider>
+"'>' expected. (31:13)
+  29 | return (
+  30 |
+> 31 | <'activeTab'.Provider  value={state.activeTab}><div>{state.activeTab}</div></'activeTab'.Provider>
      |             ^
-  36 |
-  37 |
-  38 |"
+  32 |
+  33 |
+  34 |"
 `;
 
 exports[`React - stateType: valtio > svelte > Javascript Test > each 1`] = `
@@ -8003,11 +8001,9 @@ function MyComponent(props) {
   useEffect(() => {
     console.log(\\"onMount\\");
   }, []);
-
   useEffect(() => {
     console.log(\\"onAfterUpdate\\");
   });
-
   useEffect(() => {
     return () => {
       console.log(\\"onDestroy\\");
@@ -8275,14 +8271,14 @@ export default MyComponent;
 `;
 
 exports[`React - stateType: valtio > svelte > Typescript Test > context 1`] = `
-"'>' expected. (35:13)
-  33 | return (
-  34 |
-> 35 | <'activeTab'.Provider  value={state.activeTab}><div>{state.activeTab}</div></'activeTab'.Provider>
+"'>' expected. (31:13)
+  29 | return (
+  30 |
+> 31 | <'activeTab'.Provider  value={state.activeTab}><div>{state.activeTab}</div></'activeTab'.Provider>
      |             ^
-  36 |
-  37 |
-  38 |"
+  32 |
+  33 |
+  34 |"
 `;
 
 exports[`React - stateType: valtio > svelte > Typescript Test > each 1`] = `
@@ -8407,11 +8403,9 @@ function MyComponent(props: any) {
   useEffect(() => {
     console.log(\\"onMount\\");
   }, []);
-
   useEffect(() => {
     console.log(\\"onAfterUpdate\\");
   });
-
   useEffect(() => {
     return () => {
       console.log(\\"onDestroy\\");
diff --git a/packages/core/src/__tests__/__snapshots__/react-state-variables.test.ts.snap b/packages/core/src/__tests__/__snapshots__/react-state-variables.test.ts.snap
index 68fd1b9a29..688c7507b1 100644
--- a/packages/core/src/__tests__/__snapshots__/react-state-variables.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/react-state-variables.test.ts.snap
@@ -1912,7 +1912,6 @@ function RenderContent(props) {
   useEffect(() => {
     sendComponentsToVisualEditor(props.customComponents);
   }, []);
-
   useEffect(() => {
     dispatchNewContentToVisualEditor(props.content);
   }, [props.content]);
@@ -4676,7 +4675,6 @@ function RenderContent(props: Props) {
   useEffect(() => {
     sendComponentsToVisualEditor(props.customComponents);
   }, []);
-
   useEffect(() => {
     dispatchNewContentToVisualEditor(props.content);
   }, [props.content]);
@@ -5408,14 +5406,14 @@ export default MyComponent;
 `;
 
 exports[`React - stateType: variables > svelte > Javascript Test > context 1`] = `
-"'>' expected. (36:13)
-  34 | return (
-  35 |
-> 36 | <'activeTab'.Provider  value={activeTab}><div>{activeTab}</div></'activeTab'.Provider>
+"'>' expected. (32:13)
+  30 | return (
+  31 |
+> 32 | <'activeTab'.Provider  value={activeTab}><div>{activeTab}</div></'activeTab'.Provider>
      |             ^
-  37 |
-  38 |
-  39 |"
+  33 |
+  34 |
+  35 |"
 `;
 
 exports[`React - stateType: variables > svelte > Javascript Test > each 1`] = `
@@ -5531,11 +5529,9 @@ function MyComponent(props) {
   useEffect(() => {
     console.log(\\"onMount\\");
   }, []);
-
   useEffect(() => {
     console.log(\\"onAfterUpdate\\");
   });
-
   useEffect(() => {
     return () => {
       console.log(\\"onDestroy\\");
@@ -5780,14 +5776,14 @@ export default MyComponent;
 `;
 
 exports[`React - stateType: variables > svelte > Typescript Test > context 1`] = `
-"'>' expected. (36:13)
-  34 | return (
-  35 |
-> 36 | <'activeTab'.Provider  value={activeTab}><div>{activeTab}</div></'activeTab'.Provider>
+"'>' expected. (32:13)
+  30 | return (
+  31 |
+> 32 | <'activeTab'.Provider  value={activeTab}><div>{activeTab}</div></'activeTab'.Provider>
      |             ^
-  37 |
-  38 |
-  39 |"
+  33 |
+  34 |
+  35 |"
 `;
 
 exports[`React - stateType: variables > svelte > Typescript Test > each 1`] = `
@@ -5903,11 +5899,9 @@ function MyComponent(props: any) {
   useEffect(() => {
     console.log(\\"onMount\\");
   }, []);
-
   useEffect(() => {
     console.log(\\"onAfterUpdate\\");
   });
-
   useEffect(() => {
     return () => {
       console.log(\\"onDestroy\\");
diff --git a/packages/core/src/__tests__/__snapshots__/react.test.ts.snap b/packages/core/src/__tests__/__snapshots__/react.test.ts.snap
index 9d157a1b88..9fcecc9a0a 100644
--- a/packages/core/src/__tests__/__snapshots__/react.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/react.test.ts.snap
@@ -3015,7 +3015,6 @@ function RenderContent(props) {
   useEffect(() => {
     sendComponentsToVisualEditor(props.customComponents);
   }, []);
-
   useEffect(() => {
     dispatchNewContentToVisualEditor(props.content);
   }, [props.content]);
@@ -7063,7 +7062,6 @@ function RenderContent(props: Props) {
   useEffect(() => {
     sendComponentsToVisualEditor(props.customComponents);
   }, []);
-
   useEffect(() => {
     dispatchNewContentToVisualEditor(props.content);
   }, [props.content]);
@@ -8054,14 +8052,14 @@ export default MyComponent;
 `;
 
 exports[`React - stateType: useState > svelte > Javascript Test > context 1`] = `
-"'>' expected. (35:13)
-  33 | return (
-  34 |
-> 35 | <'activeTab'.Provider  value={activeTab}><div>{activeTab}</div></'activeTab'.Provider>
+"'>' expected. (31:13)
+  29 | return (
+  30 |
+> 31 | <'activeTab'.Provider  value={activeTab}><div>{activeTab}</div></'activeTab'.Provider>
      |             ^
-  36 |
-  37 |
-  38 |"
+  32 |
+  33 |
+  34 |"
 `;
 
 exports[`React - stateType: useState > svelte > Javascript Test > each 1`] = `
@@ -8182,11 +8180,9 @@ function MyComponent(props) {
   useEffect(() => {
     console.log(\\"onMount\\");
   }, []);
-
   useEffect(() => {
     console.log(\\"onAfterUpdate\\");
   });
-
   useEffect(() => {
     return () => {
       console.log(\\"onDestroy\\");
@@ -8454,14 +8450,14 @@ export default MyComponent;
 `;
 
 exports[`React - stateType: useState > svelte > Typescript Test > context 1`] = `
-"'>' expected. (35:13)
-  33 | return (
-  34 |
-> 35 | <'activeTab'.Provider  value={activeTab}><div>{activeTab}</div></'activeTab'.Provider>
+"'>' expected. (31:13)
+  29 | return (
+  30 |
+> 31 | <'activeTab'.Provider  value={activeTab}><div>{activeTab}</div></'activeTab'.Provider>
      |             ^
-  36 |
-  37 |
-  38 |"
+  32 |
+  33 |
+  34 |"
 `;
 
 exports[`React - stateType: useState > svelte > Typescript Test > each 1`] = `
@@ -8582,11 +8578,9 @@ function MyComponent(props: any) {
   useEffect(() => {
     console.log(\\"onMount\\");
   }, []);
-
   useEffect(() => {
     console.log(\\"onAfterUpdate\\");
   });
-
   useEffect(() => {
     return () => {
       console.log(\\"onDestroy\\");
diff --git a/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap b/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap
index 518bd5a371..75ef40235d 100644
--- a/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap
@@ -2797,7 +2797,6 @@ function RenderContent(props) {
   useEffect(() => {
     sendComponentsToVisualEditor(props.customComponents);
   }, []);
-
   useEffect(() => {
     dispatchNewContentToVisualEditor(props.content);
   }, [props.content]);
@@ -6682,7 +6681,6 @@ function RenderContent(props: Props) {
   useEffect(() => {
     sendComponentsToVisualEditor(props.customComponents);
   }, []);
-
   useEffect(() => {
     dispatchNewContentToVisualEditor(props.content);
   }, [props.content]);
@@ -7571,14 +7569,14 @@ export default MyComponent;
 `;
 
 exports[`RSC > svelte > Javascript Test > context 1`] = `
-"'>' expected. (35:13)
-  33 | return (
-  34 |
-> 35 | <'activeTab'.Provider  value={activeTab}><div>{activeTab}</div></'activeTab'.Provider>
+"'>' expected. (31:13)
+  29 | return (
+  30 |
+> 31 | <'activeTab'.Provider  value={activeTab}><div>{activeTab}</div></'activeTab'.Provider>
      |             ^
-  36 |
-  37 |
-  38 |"
+  32 |
+  33 |
+  34 |"
 `;
 
 exports[`RSC > svelte > Javascript Test > each 1`] = `
@@ -7699,11 +7697,9 @@ function MyComponent(props) {
   useEffect(() => {
     console.log(\\"onMount\\");
   }, []);
-
   useEffect(() => {
     console.log(\\"onAfterUpdate\\");
   });
-
   useEffect(() => {
     return () => {
       console.log(\\"onDestroy\\");
@@ -7981,14 +7977,14 @@ export default MyComponent;
 `;
 
 exports[`RSC > svelte > Typescript Test > context 1`] = `
-"'>' expected. (35:13)
-  33 | return (
-  34 |
-> 35 | <'activeTab'.Provider  value={activeTab}><div>{activeTab}</div></'activeTab'.Provider>
+"'>' expected. (31:13)
+  29 | return (
+  30 |
+> 31 | <'activeTab'.Provider  value={activeTab}><div>{activeTab}</div></'activeTab'.Provider>
      |             ^
-  36 |
-  37 |
-  38 |"
+  32 |
+  33 |
+  34 |"
 `;
 
 exports[`RSC > svelte > Typescript Test > each 1`] = `
@@ -8109,11 +8105,9 @@ function MyComponent(props: any) {
   useEffect(() => {
     console.log(\\"onMount\\");
   }, []);
-
   useEffect(() => {
     console.log(\\"onAfterUpdate\\");
   });
-
   useEffect(() => {
     return () => {
       console.log(\\"onDestroy\\");
diff --git a/packages/core/src/__tests__/__snapshots__/taro.test.ts.snap b/packages/core/src/__tests__/__snapshots__/taro.test.ts.snap
index f4b783c039..1b70fc4a96 100644
--- a/packages/core/src/__tests__/__snapshots__/taro.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/taro.test.ts.snap
@@ -3060,7 +3060,6 @@ function RenderContent(props) {
   useEffect(() => {
     sendComponentsToVisualEditor(props.customComponents);
   }, []);
-
   useEffect(() => {
     dispatchNewContentToVisualEditor(props.content);
   }, [props.content]);
@@ -7206,7 +7205,6 @@ function RenderContent(props: Props) {
   useEffect(() => {
     sendComponentsToVisualEditor(props.customComponents);
   }, []);
-
   useEffect(() => {
     dispatchNewContentToVisualEditor(props.content);
   }, [props.content]);
@@ -8032,14 +8030,14 @@ export default MyComponent;
 `;
 
 exports[`Taro > svelte > Javascript Test > context 1`] = `
-"'>' expected. (37:13)
-  35 | return (
-  36 |
-> 37 | <'activeTab'.Provider  value={activeTab}><View>{activeTab}</View></'activeTab'.Provider>
+"'>' expected. (33:13)
+  31 | return (
+  32 |
+> 33 | <'activeTab'.Provider  value={activeTab}><View>{activeTab}</View></'activeTab'.Provider>
      |             ^
-  38 |
-  39 |
-  40 |"
+  34 |
+  35 |
+  36 |"
 `;
 
 exports[`Taro > svelte > Javascript Test > each 1`] = `
@@ -8165,11 +8163,9 @@ function MyComponent(props) {
   useEffect(() => {
     console.log(\\"onMount\\");
   }, []);
-
   useEffect(() => {
     console.log(\\"onAfterUpdate\\");
   });
-
   useEffect(() => {
     return () => {
       console.log(\\"onDestroy\\");
@@ -8440,14 +8436,14 @@ export default MyComponent;
 `;
 
 exports[`Taro > svelte > Typescript Test > context 1`] = `
-"'>' expected. (37:13)
-  35 | return (
-  36 |
-> 37 | <'activeTab'.Provider  value={activeTab}><View>{activeTab}</View></'activeTab'.Provider>
+"'>' expected. (33:13)
+  31 | return (
+  32 |
+> 33 | <'activeTab'.Provider  value={activeTab}><View>{activeTab}</View></'activeTab'.Provider>
      |             ^
-  38 |
-  39 |
-  40 |"
+  34 |
+  35 |
+  36 |"
 `;
 
 exports[`Taro > svelte > Typescript Test > each 1`] = `
@@ -8573,11 +8569,9 @@ function MyComponent(props: any) {
   useEffect(() => {
     console.log(\\"onMount\\");
   }, []);
-
   useEffect(() => {
     console.log(\\"onAfterUpdate\\");
   });
-
   useEffect(() => {
     return () => {
       console.log(\\"onDestroy\\");
diff --git a/packages/core/src/generators/react/helpers/state.ts b/packages/core/src/generators/react/helpers/state.ts
index 363972a75b..f7522fbd5c 100644
--- a/packages/core/src/generators/react/helpers/state.ts
+++ b/packages/core/src/generators/react/helpers/state.ts
@@ -170,4 +170,4 @@ export const getDefaultImport = (options: ToReactOptions): string => {
   }
 
   return "import * as React from 'react';";
-};
\ No newline at end of file
+};
diff --git a/packages/core/src/helpers/get-function-string.ts b/packages/core/src/helpers/get-function-string.ts
index 58814870fb..6e72f1320e 100644
--- a/packages/core/src/helpers/get-function-string.ts
+++ b/packages/core/src/helpers/get-function-string.ts
@@ -1,2 +1,2 @@
 export const getFunctionString = (code: string): string =>
-  code.startsWith('function') ? code : `function ${code}`;
\ No newline at end of file
+  code.startsWith('function') ? code : `function ${code}`;

From fb0f16977fb2f98211d9e43c562ffe909ceee836 Mon Sep 17 00:00:00 2001
From: Nicolas Merget <nicolas.merget@deutschebahn.com>
Date: Thu, 16 Jan 2025 09:13:01 +0100
Subject: [PATCH 03/20] refactor: default props passing for react

---
 e2e/e2e-app/src/component-paths.ts            |   1 +
 .../src/components/default-props.lite.tsx     |  22 +
 e2e/e2e-app/src/homepage.lite.tsx             |   5 +
 e2e/e2e-app/tests/main.spec.ts                |   7 +
 .../__snapshots__/mitosis.test.ts.snap        |  74 +-
 .../__snapshots__/preact.test.ts.snap         |  76 +-
 .../__snapshots__/react-native.test.ts.snap   |  76 +-
 .../react-state-builder.test.ts.snap          |  76 +-
 .../react-state-mobx.test.ts.snap             |  76 +-
 .../react-state-solid.test.ts.snap            |  76 +-
 .../react-state-valtio.test.ts.snap           |  76 +-
 .../react-state-variables.test.ts.snap        | 674 +++++++++---------
 .../__snapshots__/react.test.ts.snap          | 170 ++++-
 .../__tests__/__snapshots__/rsc.test.ts.snap  | 196 ++---
 .../__tests__/__snapshots__/taro.test.ts.snap |  76 +-
 packages/core/src/__tests__/react.test.ts     |   4 +-
 .../core/src/generators/react/generator.ts    |   3 +-
 .../generators/react/helpers/default-props.ts |   5 +-
 18 files changed, 946 insertions(+), 747 deletions(-)
 create mode 100644 e2e/e2e-app/src/components/default-props.lite.tsx

diff --git a/e2e/e2e-app/src/component-paths.ts b/e2e/e2e-app/src/component-paths.ts
index 11a06ff467..b5c68f7ede 100644
--- a/e2e/e2e-app/src/component-paths.ts
+++ b/e2e/e2e-app/src/component-paths.ts
@@ -1,4 +1,5 @@
 export const COMPONENT_PATHS = [
+  '/default-props/',
   '/one-component/',
   '/two-components/',
   '/types/',
diff --git a/e2e/e2e-app/src/components/default-props.lite.tsx b/e2e/e2e-app/src/components/default-props.lite.tsx
new file mode 100644
index 0000000000..9e9c31d58e
--- /dev/null
+++ b/e2e/e2e-app/src/components/default-props.lite.tsx
@@ -0,0 +1,22 @@
+import { useDefaultProps, useStore } from '@builder.io/mitosis';
+
+type Props = {
+  foo?: string;
+  bar?: string;
+};
+
+type State = {
+  getProps: () => string;
+};
+
+useDefaultProps<Props>({ foo: 'abc', bar: 'foo' });
+
+export default function DefaultProps(props: Props) {
+  const state = useStore<State>({
+    getProps: () => {
+      return JSON.stringify({ foo: props.foo, bar: props.bar });
+    },
+  });
+
+  return <div data-testid="default-props">{state.getProps()}</div>;
+}
diff --git a/e2e/e2e-app/src/homepage.lite.tsx b/e2e/e2e-app/src/homepage.lite.tsx
index 854dc7669b..633073447f 100644
--- a/e2e/e2e-app/src/homepage.lite.tsx
+++ b/e2e/e2e-app/src/homepage.lite.tsx
@@ -1,6 +1,7 @@
 import { For, onMount, Show, useStore } from '@builder.io/mitosis';
 import { COMPONENT_PATHS } from './component-paths';
 import ComponentWithTypes from './components/component-with-types.lite';
+import DefaultProps from './components/default-props.lite';
 import DisabledInput from './components/disabled-input/disabled-input.lite';
 import NestedParent from './components/nested/nested-parent.lite';
 import OneComponent from './components/one-component.lite';
@@ -42,6 +43,10 @@ export default function Homepage(props: { pathname?: string }) {
         <NestedParent />
       </Show>
 
+      <Show when={state.pathToUse.startsWith('/default-props')}>
+        <DefaultProps bar="xyz" />
+      </Show>
+
       <Show when={state.pathToUse.startsWith('/types')}>
         <ComponentWithTypes name="Lorem ipsum" />
       </Show>
diff --git a/e2e/e2e-app/tests/main.spec.ts b/e2e/e2e-app/tests/main.spec.ts
index 2e11318a14..189c9b040b 100644
--- a/e2e/e2e-app/tests/main.spec.ts
+++ b/e2e/e2e-app/tests/main.spec.ts
@@ -7,6 +7,13 @@ const test = playwrightTest.extend<{ packageName: PackageName | 'DEFAULT' }>({
 });
 
 test.describe('e2e', () => {
+  test('default props', async ({ page }) => {
+    await page.goto('/default-props/');
+    const text = await page.getByTestId('default-props').allTextContents();
+
+    expect(text.includes('abc')).toBeTruthy();
+    expect(text.includes('xyz')).toBeTruthy();
+  });
   test('todo list add', async ({ page }) => {
     await page.goto('/one-component/');
 
diff --git a/packages/core/src/__tests__/__snapshots__/mitosis.test.ts.snap b/packages/core/src/__tests__/__snapshots__/mitosis.test.ts.snap
index a1fbed0642..0055bcf090 100644
--- a/packages/core/src/__tests__/__snapshots__/mitosis.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/mitosis.test.ts.snap
@@ -15416,9 +15416,13 @@ exports[`Mitosis, format: react > jsx > Javascript Test > ContentSlotJSX 1`] = `
 import * as React from \\"react\\";
 import { useState } from \\"react\\";
 
-function ContentSlotJsxCode(
-  props = { content: \\"\\", slotReference: undefined, slotContent: undefined }
-) {
+function ContentSlotJsxCode(props) {
+  props = {
+    ...props,
+    content: \\"\\",
+    slotReference: undefined,
+    slotContent: undefined,
+  };
   const [name, setName] = useState(() => \\"king\\");
 
   const [showContent, setShowContent] = useState(() => false);
@@ -16933,16 +16937,16 @@ exports[`Mitosis, format: react > jsx > Javascript Test > defaultProps 1`] = `
 "\\"use client\\";
 import * as React from \\"react\\";
 
-function Button(
+function Button(props) {
   props = {
+    ...props,
     text: \\"default text\\",
     link: \\"https://builder.io/\\",
     openLinkInNewTab: false,
     onClick: () => {
       console.log(\\"hi\\");
     },
-  }
-) {
+  };
   return (
     <div>
       {props.link ? (
@@ -16975,14 +16979,14 @@ exports[`Mitosis, format: react > jsx > Javascript Test > defaultPropsOutsideCom
 "\\"use client\\";
 import * as React from \\"react\\";
 
-function Button(
+function Button(props) {
   props = {
+    ...props,
     text: \\"default text\\",
     link: \\"https://builder.io/\\",
     openLinkInNewTab: false,
     onClick: () => {},
-  }
-) {
+  };
   return (
     <div>
       {props.link ? (
@@ -19119,9 +19123,13 @@ import * as React from \\"react\\";
 import { useState } from \\"react\\";
 import type { JSX } from \\"../../../../jsx-runtime\\";
 
-function ContentSlotJsxCode(
-  props = { content: \\"\\", slotReference: undefined, slotContent: undefined }
-) {
+function ContentSlotJsxCode(props) {
+  props = {
+    ...props,
+    content: \\"\\",
+    slotReference: undefined,
+    slotContent: undefined,
+  };
   const [name, setName] = useState(() => \\"king\\");
 
   const [showContent, setShowContent] = useState(() => false);
@@ -20644,16 +20652,16 @@ exports[`Mitosis, format: react > jsx > Typescript Test > defaultProps 1`] = `
 "\\"use client\\";
 import * as React from \\"react\\";
 
-function Button(
+function Button(props) {
   props = {
+    ...props,
     text: \\"default text\\",
     link: \\"https://builder.io/\\",
     openLinkInNewTab: false,
     onClick: () => {
       console.log(\\"hi\\");
     },
-  }
-) {
+  };
   return (
     <div>
       {props.link ? (
@@ -20686,14 +20694,14 @@ exports[`Mitosis, format: react > jsx > Typescript Test > defaultPropsOutsideCom
 "\\"use client\\";
 import * as React from \\"react\\";
 
-function Button(
+function Button(props) {
   props = {
+    ...props,
     text: \\"default text\\",
     link: \\"https://builder.io/\\",
     openLinkInNewTab: false,
     onClick: () => {},
-  }
-) {
+  };
   return (
     <div>
       {props.link ? (
@@ -22293,7 +22301,8 @@ exports[`Mitosis, format: react > svelte > Javascript Test > classDirective 1`]
 import * as React from \\"react\\";
 import { useState } from \\"react\\";
 
-function MyComponent(props = {}) {
+function MyComponent(props) {
+  props = { ...props };
   const [focus, setFocus] = useState(() => true);
 
   return (
@@ -22310,14 +22319,14 @@ export default MyComponent;
 `;
 
 exports[`Mitosis, format: react > svelte > Javascript Test > context 1`] = `
-"'>' expected. (31:13)
-  29 | return (
-  30 |
-> 31 | <'activeTab'.Provider  value={activeTab}><div>{activeTab}</div></'activeTab'.Provider>
+"'>' expected. (32:13)
+  30 | return (
+  31 |
+> 32 | <'activeTab'.Provider  value={activeTab}><div>{activeTab}</div></'activeTab'.Provider>
      |             ^
-  32 |
   33 |
-  34 |"
+  34 |
+  35 |"
 `;
 
 exports[`Mitosis, format: react > svelte > Javascript Test > each 1`] = `
@@ -22692,7 +22701,8 @@ exports[`Mitosis, format: react > svelte > Typescript Test > classDirective 1`]
 import * as React from \\"react\\";
 import { useState } from \\"react\\";
 
-function MyComponent(props = {}) {
+function MyComponent(props) {
+  props = { ...props };
   const [focus, setFocus] = useState(() => true);
 
   return (
@@ -22709,14 +22719,14 @@ export default MyComponent;
 `;
 
 exports[`Mitosis, format: react > svelte > Typescript Test > context 1`] = `
-"'>' expected. (31:13)
-  29 | return (
-  30 |
-> 31 | <'activeTab'.Provider  value={activeTab}><div>{activeTab}</div></'activeTab'.Provider>
+"'>' expected. (32:13)
+  30 | return (
+  31 |
+> 32 | <'activeTab'.Provider  value={activeTab}><div>{activeTab}</div></'activeTab'.Provider>
      |             ^
-  32 |
   33 |
-  34 |"
+  34 |
+  35 |"
 `;
 
 exports[`Mitosis, format: react > svelte > Typescript Test > each 1`] = `
diff --git a/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap b/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap
index 747a466716..b7542d8ba7 100644
--- a/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap
@@ -560,9 +560,13 @@ exports[`Preact > jsx > Javascript Test > ContentSlotJSX 1`] = `
 import { h, Fragment } from \\"preact\\";
 import { useState } from \\"preact/hooks\\";
 
-function ContentSlotJsxCode(
-  props = { content: \\"\\", slotReference: undefined, slotContent: undefined }
-) {
+function ContentSlotJsxCode(props) {
+  props = {
+    ...props,
+    content: \\"\\",
+    slotReference: undefined,
+    slotContent: undefined,
+  };
   const [name, setName] = useState(() => \\"king\\");
 
   const [showContent, setShowContent] = useState(() => false);
@@ -2099,16 +2103,16 @@ exports[`Preact > jsx > Javascript Test > defaultProps 1`] = `
 "/** @jsx h */
 import { h, Fragment } from \\"preact\\";
 
-function Button(
+function Button(props) {
   props = {
+    ...props,
     text: \\"default text\\",
     link: \\"https://builder.io/\\",
     openLinkInNewTab: false,
     onClick: () => {
       console.log(\\"hi\\");
     },
-  }
-) {
+  };
   return (
     <div>
       {props.link ? (
@@ -2141,14 +2145,14 @@ exports[`Preact > jsx > Javascript Test > defaultPropsOutsideComponent 1`] = `
 "/** @jsx h */
 import { h, Fragment } from \\"preact\\";
 
-function Button(
+function Button(props) {
   props = {
+    ...props,
     text: \\"default text\\",
     link: \\"https://builder.io/\\",
     openLinkInNewTab: false,
     onClick: () => {},
-  }
-) {
+  };
   return (
     <div>
       {props.link ? (
@@ -4379,13 +4383,13 @@ type Props = {
 };
 import type { JSX } from \\"../../../../jsx-runtime\\";
 
-function ContentSlotJsxCode(
-  props: Props = {
+function ContentSlotJsxCode(props: Props) {
+  props = {
+    ...props,
     content: \\"\\",
     slotReference: undefined,
     slotContent: undefined,
-  }
-) {
+  };
   const [name, setName] = useState(() => \\"king\\");
 
   const [showContent, setShowContent] = useState(() => false);
@@ -6156,16 +6160,16 @@ export interface ButtonProps {
   onClick?: () => void;
 }
 
-function Button(
-  props: ButtonProps = {
+function Button(props: ButtonProps) {
+  props = {
+    ...props,
     text: \\"default text\\",
     link: \\"https://builder.io/\\",
     openLinkInNewTab: false,
     onClick: () => {
       console.log(\\"hi\\");
     },
-  }
-) {
+  };
   return (
     <div>
       {props.link ? (
@@ -6206,14 +6210,14 @@ export interface ButtonProps {
   onClick: () => void;
 }
 
-function Button(
-  props: ButtonProps = {
+function Button(props: ButtonProps) {
+  props = {
+    ...props,
     text: \\"default text\\",
     link: \\"https://builder.io/\\",
     openLinkInNewTab: false,
     onClick: () => {},
-  }
-) {
+  };
   return (
     <div>
       {props.link ? (
@@ -8049,7 +8053,8 @@ exports[`Preact > svelte > Javascript Test > classDirective 1`] = `
 import { h, Fragment } from \\"preact\\";
 import { useState } from \\"preact/hooks\\";
 
-function MyComponent(props = {}) {
+function MyComponent(props) {
+  props = { ...props };
   const [focus, setFocus] = useState(() => true);
 
   return (
@@ -8066,14 +8071,14 @@ export default MyComponent;
 `;
 
 exports[`Preact > svelte > Javascript Test > context 1`] = `
-"'>' expected. (32:13)
-  30 | return (
-  31 |
-> 32 | <'activeTab'.Provider  value={activeTab}><div>{activeTab}</div></'activeTab'.Provider>
+"'>' expected. (33:13)
+  31 | return (
+  32 |
+> 33 | <'activeTab'.Provider  value={activeTab}><div>{activeTab}</div></'activeTab'.Provider>
      |             ^
-  33 |
   34 |
-  35 |"
+  35 |
+  36 |"
 `;
 
 exports[`Preact > svelte > Javascript Test > each 1`] = `
@@ -8449,7 +8454,8 @@ exports[`Preact > svelte > Typescript Test > classDirective 1`] = `
 import { h, Fragment } from \\"preact\\";
 import { useState } from \\"preact/hooks\\";
 
-function MyComponent(props: any = {}) {
+function MyComponent(props: any) {
+  props = { ...props };
   const [focus, setFocus] = useState(() => true);
 
   return (
@@ -8466,14 +8472,14 @@ export default MyComponent;
 `;
 
 exports[`Preact > svelte > Typescript Test > context 1`] = `
-"'>' expected. (32:13)
-  30 | return (
-  31 |
-> 32 | <'activeTab'.Provider  value={activeTab}><div>{activeTab}</div></'activeTab'.Provider>
+"'>' expected. (33:13)
+  31 | return (
+  32 |
+> 33 | <'activeTab'.Provider  value={activeTab}><div>{activeTab}</div></'activeTab'.Provider>
      |             ^
-  33 |
   34 |
-  35 |"
+  35 |
+  36 |"
 `;
 
 exports[`Preact > svelte > Typescript Test > each 1`] = `
diff --git a/packages/core/src/__tests__/__snapshots__/react-native.test.ts.snap b/packages/core/src/__tests__/__snapshots__/react-native.test.ts.snap
index 1f0e4cd777..d70c10478a 100644
--- a/packages/core/src/__tests__/__snapshots__/react-native.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/react-native.test.ts.snap
@@ -823,9 +823,13 @@ import {
 } from \\"react-native\\";
 import { useState } from \\"react\\";
 
-function ContentSlotJsxCode(
-  props = { content: \\"\\", slotReference: undefined, slotContent: undefined }
-) {
+function ContentSlotJsxCode(props) {
+  props = {
+    ...props,
+    content: \\"\\",
+    slotReference: undefined,
+    slotContent: undefined,
+  };
   const [name, setName] = useState(() => \\"king\\");
 
   const [showContent, setShowContent] = useState(() => false);
@@ -2838,16 +2842,16 @@ import {
   Linking,
 } from \\"react-native\\";
 
-function Button(
+function Button(props) {
   props = {
+    ...props,
     text: \\"default text\\",
     link: \\"https://builder.io/\\",
     openLinkInNewTab: false,
     onClick: () => {
       console.log(\\"hi\\");
     },
-  }
-) {
+  };
   return (
     <View>
       {props.link ? (
@@ -2891,14 +2895,14 @@ import {
   Linking,
 } from \\"react-native\\";
 
-function Button(
+function Button(props) {
   props = {
+    ...props,
     text: \\"default text\\",
     link: \\"https://builder.io/\\",
     openLinkInNewTab: false,
     onClick: () => {},
-  }
-) {
+  };
   return (
     <View>
       {props.link ? (
@@ -6175,13 +6179,13 @@ type Props = {
 };
 import type { JSX } from \\"../../../../jsx-runtime\\";
 
-function ContentSlotJsxCode(
-  props: Props = {
+function ContentSlotJsxCode(props: Props) {
+  props = {
+    ...props,
     content: \\"\\",
     slotReference: undefined,
     slotContent: undefined,
-  }
-) {
+  };
   const [name, setName] = useState(() => \\"king\\");
 
   const [showContent, setShowContent] = useState(() => false);
@@ -8428,16 +8432,16 @@ export interface ButtonProps {
   onClick?: () => void;
 }
 
-function Button(
-  props: ButtonProps = {
+function Button(props: ButtonProps) {
+  props = {
+    ...props,
     text: \\"default text\\",
     link: \\"https://builder.io/\\",
     openLinkInNewTab: false,
     onClick: () => {
       console.log(\\"hi\\");
     },
-  }
-) {
+  };
   return (
     <View>
       {props.link ? (
@@ -8489,14 +8493,14 @@ export interface ButtonProps {
   onClick: () => void;
 }
 
-function Button(
-  props: ButtonProps = {
+function Button(props: ButtonProps) {
+  props = {
+    ...props,
     text: \\"default text\\",
     link: \\"https://builder.io/\\",
     openLinkInNewTab: false,
     onClick: () => {},
-  }
-) {
+  };
   return (
     <View>
       {props.link ? (
@@ -11257,7 +11261,8 @@ import {
 } from \\"react-native\\";
 import { useState } from \\"react\\";
 
-function MyComponent(props = {}) {
+function MyComponent(props) {
+  props = { ...props };
   const [focus, setFocus] = useState(() => true);
 
   return <TextInput />;
@@ -11268,14 +11273,14 @@ export default MyComponent;
 `;
 
 exports[`React Native > svelte > Javascript Test > context 1`] = `
-"'>' expected. (32:13)
-  30 | return (
-  31 |
-> 32 | <'activeTab'.Provider  value={activeTab}><View><Text>{activeTab}</Text></View></'activeTab'.Provider>
+"'>' expected. (33:13)
+  31 | return (
+  32 |
+> 33 | <'activeTab'.Provider  value={activeTab}><View><Text>{activeTab}</Text></View></'activeTab'.Provider>
      |             ^
-  33 |
   34 |
-  35 |"
+  35 |
+  36 |"
 `;
 
 exports[`React Native > svelte > Javascript Test > each 1`] = `
@@ -11848,7 +11853,8 @@ import {
 } from \\"react-native\\";
 import { useState } from \\"react\\";
 
-function MyComponent(props: any = {}) {
+function MyComponent(props: any) {
+  props = { ...props };
   const [focus, setFocus] = useState(() => true);
 
   return <TextInput />;
@@ -11859,14 +11865,14 @@ export default MyComponent;
 `;
 
 exports[`React Native > svelte > Typescript Test > context 1`] = `
-"'>' expected. (32:13)
-  30 | return (
-  31 |
-> 32 | <'activeTab'.Provider  value={activeTab}><View><Text>{activeTab}</Text></View></'activeTab'.Provider>
+"'>' expected. (33:13)
+  31 | return (
+  32 |
+> 33 | <'activeTab'.Provider  value={activeTab}><View><Text>{activeTab}</Text></View></'activeTab'.Provider>
      |             ^
-  33 |
   34 |
-  35 |"
+  35 |
+  36 |"
 `;
 
 exports[`React Native > svelte > Typescript Test > each 1`] = `
diff --git a/packages/core/src/__tests__/__snapshots__/react-state-builder.test.ts.snap b/packages/core/src/__tests__/__snapshots__/react-state-builder.test.ts.snap
index 14c4ef6ddf..a1c1dbf6ee 100644
--- a/packages/core/src/__tests__/__snapshots__/react-state-builder.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/react-state-builder.test.ts.snap
@@ -564,9 +564,13 @@ exports[`React - stateType: builder > jsx > Javascript Test > ContentSlotJSX 1`]
 "\\"use client\\";
 import * as React from \\"react\\";
 
-function ContentSlotJsxCode(
-  props = { content: \\"\\", slotReference: undefined, slotContent: undefined }
-) {
+function ContentSlotJsxCode(props) {
+  props = {
+    ...props,
+    content: \\"\\",
+    slotReference: undefined,
+    slotContent: undefined,
+  };
   const state = useBuilderState({
     name: \\"king\\",
     showContent: false,
@@ -2118,16 +2122,16 @@ exports[`React - stateType: builder > jsx > Javascript Test > defaultProps 1`] =
 "\\"use client\\";
 import * as React from \\"react\\";
 
-function Button(
+function Button(props) {
   props = {
+    ...props,
     text: \\"default text\\",
     link: \\"https://builder.io/\\",
     openLinkInNewTab: false,
     onClick: () => {
       console.log(\\"hi\\");
     },
-  }
-) {
+  };
   const state = useBuilderState({});
 
   return (
@@ -2162,14 +2166,14 @@ exports[`React - stateType: builder > jsx > Javascript Test > defaultPropsOutsid
 "\\"use client\\";
 import * as React from \\"react\\";
 
-function Button(
+function Button(props) {
   props = {
+    ...props,
     text: \\"default text\\",
     link: \\"https://builder.io/\\",
     openLinkInNewTab: false,
     onClick: () => {},
-  }
-) {
+  };
   const state = useBuilderState({});
 
   return (
@@ -4368,13 +4372,13 @@ type Props = {
 };
 import type { JSX } from \\"../../../../jsx-runtime\\";
 
-function ContentSlotJsxCode(
-  props: Props = {
+function ContentSlotJsxCode(props: Props) {
+  props = {
+    ...props,
     content: \\"\\",
     slotReference: undefined,
     slotContent: undefined,
-  }
-) {
+  };
   const state = useBuilderState({
     name: \\"king\\",
     showContent: false,
@@ -6158,16 +6162,16 @@ export interface ButtonProps {
   onClick?: () => void;
 }
 
-function Button(
-  props: ButtonProps = {
+function Button(props: ButtonProps) {
+  props = {
+    ...props,
     text: \\"default text\\",
     link: \\"https://builder.io/\\",
     openLinkInNewTab: false,
     onClick: () => {
       console.log(\\"hi\\");
     },
-  }
-) {
+  };
   const state = useBuilderState({});
 
   return (
@@ -6210,14 +6214,14 @@ export interface ButtonProps {
   onClick: () => void;
 }
 
-function Button(
-  props: ButtonProps = {
+function Button(props: ButtonProps) {
+  props = {
+    ...props,
     text: \\"default text\\",
     link: \\"https://builder.io/\\",
     openLinkInNewTab: false,
     onClick: () => {},
-  }
-) {
+  };
   const state = useBuilderState({});
 
   return (
@@ -8013,7 +8017,8 @@ exports[`React - stateType: builder > svelte > Javascript Test > classDirective
 "\\"use client\\";
 import * as React from \\"react\\";
 
-function MyComponent(props = {}) {
+function MyComponent(props) {
+  props = { ...props };
   const state = useBuilderState({ focus: true });
 
   return (
@@ -8030,14 +8035,14 @@ export default MyComponent;
 `;
 
 exports[`React - stateType: builder > svelte > Javascript Test > context 1`] = `
-"'>' expected. (31:13)
-  29 | return (
-  30 |
-> 31 | <'activeTab'.Provider  value={state.activeTab}><div>{state.activeTab}</div></'activeTab'.Provider>
+"'>' expected. (32:13)
+  30 | return (
+  31 |
+> 32 | <'activeTab'.Provider  value={state.activeTab}><div>{state.activeTab}</div></'activeTab'.Provider>
      |             ^
-  32 |
   33 |
-  34 |"
+  34 |
+  35 |"
 `;
 
 exports[`React - stateType: builder > svelte > Javascript Test > each 1`] = `
@@ -8409,7 +8414,8 @@ exports[`React - stateType: builder > svelte > Typescript Test > classDirective
 "\\"use client\\";
 import * as React from \\"react\\";
 
-function MyComponent(props: any = {}) {
+function MyComponent(props: any) {
+  props = { ...props };
   const state = useBuilderState({ focus: true });
 
   return (
@@ -8426,14 +8432,14 @@ export default MyComponent;
 `;
 
 exports[`React - stateType: builder > svelte > Typescript Test > context 1`] = `
-"'>' expected. (31:13)
-  29 | return (
-  30 |
-> 31 | <'activeTab'.Provider  value={state.activeTab}><div>{state.activeTab}</div></'activeTab'.Provider>
+"'>' expected. (32:13)
+  30 | return (
+  31 |
+> 32 | <'activeTab'.Provider  value={state.activeTab}><div>{state.activeTab}</div></'activeTab'.Provider>
      |             ^
-  32 |
   33 |
-  34 |"
+  34 |
+  35 |"
 `;
 
 exports[`React - stateType: builder > svelte > Typescript Test > each 1`] = `
diff --git a/packages/core/src/__tests__/__snapshots__/react-state-mobx.test.ts.snap b/packages/core/src/__tests__/__snapshots__/react-state-mobx.test.ts.snap
index 0f9db9d7ac..f1a0b430a7 100644
--- a/packages/core/src/__tests__/__snapshots__/react-state-mobx.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/react-state-mobx.test.ts.snap
@@ -589,9 +589,13 @@ exports[`React - stateType: mobx > jsx > Javascript Test > ContentSlotJSX 1`] =
 import * as React from \\"react\\";
 import { useLocalObservable, observer } from \\"mobx-react-lite\\";
 
-function ContentSlotJsxCode(
-  props = { content: \\"\\", slotReference: undefined, slotContent: undefined }
-) {
+function ContentSlotJsxCode(props) {
+  props = {
+    ...props,
+    content: \\"\\",
+    slotReference: undefined,
+    slotContent: undefined,
+  };
   const state = useLocalObservable(() => ({
     name: \\"king\\",
     showContent: false,
@@ -2171,16 +2175,16 @@ exports[`React - stateType: mobx > jsx > Javascript Test > defaultProps 1`] = `
 "\\"use client\\";
 import * as React from \\"react\\";
 
-function Button(
+function Button(props) {
   props = {
+    ...props,
     text: \\"default text\\",
     link: \\"https://builder.io/\\",
     openLinkInNewTab: false,
     onClick: () => {
       console.log(\\"hi\\");
     },
-  }
-) {
+  };
   return (
     <div>
       {props.link ? (
@@ -2214,14 +2218,14 @@ exports[`React - stateType: mobx > jsx > Javascript Test > defaultPropsOutsideCo
 "\\"use client\\";
 import * as React from \\"react\\";
 
-function Button(
+function Button(props) {
   props = {
+    ...props,
     text: \\"default text\\",
     link: \\"https://builder.io/\\",
     openLinkInNewTab: false,
     onClick: () => {},
-  }
-) {
+  };
   return (
     <div>
       {props.link ? (
@@ -4438,13 +4442,13 @@ type Props = {
 };
 import type { JSX } from \\"../../../../jsx-runtime\\";
 
-function ContentSlotJsxCode(
-  props: Props = {
+function ContentSlotJsxCode(props: Props) {
+  props = {
+    ...props,
     content: \\"\\",
     slotReference: undefined,
     slotContent: undefined,
-  }
-) {
+  };
   const state = useLocalObservable(() => ({
     name: \\"king\\",
     showContent: false,
@@ -6245,16 +6249,16 @@ export interface ButtonProps {
   onClick?: () => void;
 }
 
-function Button(
-  props: ButtonProps = {
+function Button(props: ButtonProps) {
+  props = {
+    ...props,
     text: \\"default text\\",
     link: \\"https://builder.io/\\",
     openLinkInNewTab: false,
     onClick: () => {
       console.log(\\"hi\\");
     },
-  }
-) {
+  };
   return (
     <div>
       {props.link ? (
@@ -6296,14 +6300,14 @@ export interface ButtonProps {
   onClick: () => void;
 }
 
-function Button(
-  props: ButtonProps = {
+function Button(props: ButtonProps) {
+  props = {
+    ...props,
     text: \\"default text\\",
     link: \\"https://builder.io/\\",
     openLinkInNewTab: false,
     onClick: () => {},
-  }
-) {
+  };
   return (
     <div>
       {props.link ? (
@@ -8098,7 +8102,8 @@ exports[`React - stateType: mobx > svelte > Javascript Test > classDirective 1`]
 import * as React from \\"react\\";
 import { useLocalObservable, observer } from \\"mobx-react-lite\\";
 
-function MyComponent(props = {}) {
+function MyComponent(props) {
+  props = { ...props };
   const state = useLocalObservable(() => ({ focus: true }));
 
   return (
@@ -8116,14 +8121,14 @@ export default observedMyComponent;
 `;
 
 exports[`React - stateType: mobx > svelte > Javascript Test > context 1`] = `
-"'>' expected. (31:13)
-  29 | return (
-  30 |
-> 31 | <'activeTab'.Provider  value={state.activeTab}><div>{state.activeTab}</div></'activeTab'.Provider>
+"'>' expected. (32:13)
+  30 | return (
+  31 |
+> 32 | <'activeTab'.Provider  value={state.activeTab}><div>{state.activeTab}</div></'activeTab'.Provider>
      |             ^
-  32 |
   33 |
-  34 |"
+  34 |
+  35 |"
 `;
 
 exports[`React - stateType: mobx > svelte > Javascript Test > each 1`] = `
@@ -8517,7 +8522,8 @@ exports[`React - stateType: mobx > svelte > Typescript Test > classDirective 1`]
 import * as React from \\"react\\";
 import { useLocalObservable, observer } from \\"mobx-react-lite\\";
 
-function MyComponent(props: any = {}) {
+function MyComponent(props: any) {
+  props = { ...props };
   const state = useLocalObservable(() => ({ focus: true }));
 
   return (
@@ -8535,14 +8541,14 @@ export default observedMyComponent;
 `;
 
 exports[`React - stateType: mobx > svelte > Typescript Test > context 1`] = `
-"'>' expected. (31:13)
-  29 | return (
-  30 |
-> 31 | <'activeTab'.Provider  value={state.activeTab}><div>{state.activeTab}</div></'activeTab'.Provider>
+"'>' expected. (32:13)
+  30 | return (
+  31 |
+> 32 | <'activeTab'.Provider  value={state.activeTab}><div>{state.activeTab}</div></'activeTab'.Provider>
      |             ^
-  32 |
   33 |
-  34 |"
+  34 |
+  35 |"
 `;
 
 exports[`React - stateType: mobx > svelte > Typescript Test > each 1`] = `
diff --git a/packages/core/src/__tests__/__snapshots__/react-state-solid.test.ts.snap b/packages/core/src/__tests__/__snapshots__/react-state-solid.test.ts.snap
index 74a33cee21..e74d7aa586 100644
--- a/packages/core/src/__tests__/__snapshots__/react-state-solid.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/react-state-solid.test.ts.snap
@@ -569,9 +569,13 @@ exports[`React - stateType: solid > jsx > Javascript Test > ContentSlotJSX 1`] =
 import * as React from \\"react\\";
 import { useMutable } from \\"react-solid-state\\";
 
-function ContentSlotJsxCode(
-  props = { content: \\"\\", slotReference: undefined, slotContent: undefined }
-) {
+function ContentSlotJsxCode(props) {
+  props = {
+    ...props,
+    content: \\"\\",
+    slotReference: undefined,
+    slotContent: undefined,
+  };
   const state = useMutable({
     name: \\"king\\",
     showContent: false,
@@ -2103,16 +2107,16 @@ exports[`React - stateType: solid > jsx > Javascript Test > defaultProps 1`] = `
 "\\"use client\\";
 import * as React from \\"react\\";
 
-function Button(
+function Button(props) {
   props = {
+    ...props,
     text: \\"default text\\",
     link: \\"https://builder.io/\\",
     openLinkInNewTab: false,
     onClick: () => {
       console.log(\\"hi\\");
     },
-  }
-) {
+  };
   return (
     <div>
       {props.link ? (
@@ -2145,14 +2149,14 @@ exports[`React - stateType: solid > jsx > Javascript Test > defaultPropsOutsideC
 "\\"use client\\";
 import * as React from \\"react\\";
 
-function Button(
+function Button(props) {
   props = {
+    ...props,
     text: \\"default text\\",
     link: \\"https://builder.io/\\",
     openLinkInNewTab: false,
     onClick: () => {},
-  }
-) {
+  };
   return (
     <div>
       {props.link ? (
@@ -4293,13 +4297,13 @@ type Props = {
 };
 import type { JSX } from \\"../../../../jsx-runtime\\";
 
-function ContentSlotJsxCode(
-  props: Props = {
+function ContentSlotJsxCode(props: Props) {
+  props = {
+    ...props,
     content: \\"\\",
     slotReference: undefined,
     slotContent: undefined,
-  }
-) {
+  };
   const state = useMutable({
     name: \\"king\\",
     showContent: false,
@@ -6052,16 +6056,16 @@ export interface ButtonProps {
   onClick?: () => void;
 }
 
-function Button(
-  props: ButtonProps = {
+function Button(props: ButtonProps) {
+  props = {
+    ...props,
     text: \\"default text\\",
     link: \\"https://builder.io/\\",
     openLinkInNewTab: false,
     onClick: () => {
       console.log(\\"hi\\");
     },
-  }
-) {
+  };
   return (
     <div>
       {props.link ? (
@@ -6102,14 +6106,14 @@ export interface ButtonProps {
   onClick: () => void;
 }
 
-function Button(
-  props: ButtonProps = {
+function Button(props: ButtonProps) {
+  props = {
+    ...props,
     text: \\"default text\\",
     link: \\"https://builder.io/\\",
     openLinkInNewTab: false,
     onClick: () => {},
-  }
-) {
+  };
   return (
     <div>
       {props.link ? (
@@ -7846,7 +7850,8 @@ exports[`React - stateType: solid > svelte > Javascript Test > classDirective 1`
 import * as React from \\"react\\";
 import { useMutable } from \\"react-solid-state\\";
 
-function MyComponent(props = {}) {
+function MyComponent(props) {
+  props = { ...props };
   const state = useMutable({ focus: true });
 
   return (
@@ -7863,14 +7868,14 @@ export default MyComponent;
 `;
 
 exports[`React - stateType: solid > svelte > Javascript Test > context 1`] = `
-"'>' expected. (31:13)
-  29 | return (
-  30 |
-> 31 | <'activeTab'.Provider  value={state.activeTab}><div>{state.activeTab}</div></'activeTab'.Provider>
+"'>' expected. (32:13)
+  30 | return (
+  31 |
+> 32 | <'activeTab'.Provider  value={state.activeTab}><div>{state.activeTab}</div></'activeTab'.Provider>
      |             ^
-  32 |
   33 |
-  34 |"
+  34 |
+  35 |"
 `;
 
 exports[`React - stateType: solid > svelte > Javascript Test > each 1`] = `
@@ -8248,7 +8253,8 @@ exports[`React - stateType: solid > svelte > Typescript Test > classDirective 1`
 import * as React from \\"react\\";
 import { useMutable } from \\"react-solid-state\\";
 
-function MyComponent(props: any = {}) {
+function MyComponent(props: any) {
+  props = { ...props };
   const state = useMutable({ focus: true });
 
   return (
@@ -8265,14 +8271,14 @@ export default MyComponent;
 `;
 
 exports[`React - stateType: solid > svelte > Typescript Test > context 1`] = `
-"'>' expected. (31:13)
-  29 | return (
-  30 |
-> 31 | <'activeTab'.Provider  value={state.activeTab}><div>{state.activeTab}</div></'activeTab'.Provider>
+"'>' expected. (32:13)
+  30 | return (
+  31 |
+> 32 | <'activeTab'.Provider  value={state.activeTab}><div>{state.activeTab}</div></'activeTab'.Provider>
      |             ^
-  32 |
   33 |
-  34 |"
+  34 |
+  35 |"
 `;
 
 exports[`React - stateType: solid > svelte > Typescript Test > each 1`] = `
diff --git a/packages/core/src/__tests__/__snapshots__/react-state-valtio.test.ts.snap b/packages/core/src/__tests__/__snapshots__/react-state-valtio.test.ts.snap
index 7e9356fdb7..412c03567a 100644
--- a/packages/core/src/__tests__/__snapshots__/react-state-valtio.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/react-state-valtio.test.ts.snap
@@ -569,9 +569,13 @@ exports[`React - stateType: valtio > jsx > Javascript Test > ContentSlotJSX 1`]
 import * as React from \\"react\\";
 import { useLocalProxy } from \\"valtio/utils\\";
 
-function ContentSlotJsxCode(
-  props = { content: \\"\\", slotReference: undefined, slotContent: undefined }
-) {
+function ContentSlotJsxCode(props) {
+  props = {
+    ...props,
+    content: \\"\\",
+    slotReference: undefined,
+    slotContent: undefined,
+  };
   const state = useLocalProxy({
     name: \\"king\\",
     showContent: false,
@@ -2106,16 +2110,16 @@ exports[`React - stateType: valtio > jsx > Javascript Test > defaultProps 1`] =
 "\\"use client\\";
 import * as React from \\"react\\";
 
-function Button(
+function Button(props) {
   props = {
+    ...props,
     text: \\"default text\\",
     link: \\"https://builder.io/\\",
     openLinkInNewTab: false,
     onClick: () => {
       console.log(\\"hi\\");
     },
-  }
-) {
+  };
   return (
     <div>
       {props.link ? (
@@ -2148,14 +2152,14 @@ exports[`React - stateType: valtio > jsx > Javascript Test > defaultPropsOutside
 "\\"use client\\";
 import * as React from \\"react\\";
 
-function Button(
+function Button(props) {
   props = {
+    ...props,
     text: \\"default text\\",
     link: \\"https://builder.io/\\",
     openLinkInNewTab: false,
     onClick: () => {},
-  }
-) {
+  };
   return (
     <div>
       {props.link ? (
@@ -4296,13 +4300,13 @@ type Props = {
 };
 import type { JSX } from \\"../../../../jsx-runtime\\";
 
-function ContentSlotJsxCode(
-  props: Props = {
+function ContentSlotJsxCode(props: Props) {
+  props = {
+    ...props,
     content: \\"\\",
     slotReference: undefined,
     slotContent: undefined,
-  }
-) {
+  };
   const state = useLocalProxy({
     name: \\"king\\",
     showContent: false,
@@ -6058,16 +6062,16 @@ export interface ButtonProps {
   onClick?: () => void;
 }
 
-function Button(
-  props: ButtonProps = {
+function Button(props: ButtonProps) {
+  props = {
+    ...props,
     text: \\"default text\\",
     link: \\"https://builder.io/\\",
     openLinkInNewTab: false,
     onClick: () => {
       console.log(\\"hi\\");
     },
-  }
-) {
+  };
   return (
     <div>
       {props.link ? (
@@ -6108,14 +6112,14 @@ export interface ButtonProps {
   onClick: () => void;
 }
 
-function Button(
-  props: ButtonProps = {
+function Button(props: ButtonProps) {
+  props = {
+    ...props,
     text: \\"default text\\",
     link: \\"https://builder.io/\\",
     openLinkInNewTab: false,
     onClick: () => {},
-  }
-) {
+  };
   return (
     <div>
       {props.link ? (
@@ -7852,7 +7856,8 @@ exports[`React - stateType: valtio > svelte > Javascript Test > classDirective 1
 import * as React from \\"react\\";
 import { useLocalProxy } from \\"valtio/utils\\";
 
-function MyComponent(props = {}) {
+function MyComponent(props) {
+  props = { ...props };
   const state = useLocalProxy({ focus: true });
 
   return (
@@ -7869,14 +7874,14 @@ export default MyComponent;
 `;
 
 exports[`React - stateType: valtio > svelte > Javascript Test > context 1`] = `
-"'>' expected. (31:13)
-  29 | return (
-  30 |
-> 31 | <'activeTab'.Provider  value={state.activeTab}><div>{state.activeTab}</div></'activeTab'.Provider>
+"'>' expected. (32:13)
+  30 | return (
+  31 |
+> 32 | <'activeTab'.Provider  value={state.activeTab}><div>{state.activeTab}</div></'activeTab'.Provider>
      |             ^
-  32 |
   33 |
-  34 |"
+  34 |
+  35 |"
 `;
 
 exports[`React - stateType: valtio > svelte > Javascript Test > each 1`] = `
@@ -8254,7 +8259,8 @@ exports[`React - stateType: valtio > svelte > Typescript Test > classDirective 1
 import * as React from \\"react\\";
 import { useLocalProxy } from \\"valtio/utils\\";
 
-function MyComponent(props: any = {}) {
+function MyComponent(props: any) {
+  props = { ...props };
   const state = useLocalProxy({ focus: true });
 
   return (
@@ -8271,14 +8277,14 @@ export default MyComponent;
 `;
 
 exports[`React - stateType: valtio > svelte > Typescript Test > context 1`] = `
-"'>' expected. (31:13)
-  29 | return (
-  30 |
-> 31 | <'activeTab'.Provider  value={state.activeTab}><div>{state.activeTab}</div></'activeTab'.Provider>
+"'>' expected. (32:13)
+  30 | return (
+  31 |
+> 32 | <'activeTab'.Provider  value={state.activeTab}><div>{state.activeTab}</div></'activeTab'.Provider>
      |             ^
-  32 |
   33 |
-  34 |"
+  34 |
+  35 |"
 `;
 
 exports[`React - stateType: valtio > svelte > Typescript Test > each 1`] = `
diff --git a/packages/core/src/__tests__/__snapshots__/react-state-variables.test.ts.snap b/packages/core/src/__tests__/__snapshots__/react-state-variables.test.ts.snap
index 688c7507b1..0d43b091cb 100644
--- a/packages/core/src/__tests__/__snapshots__/react-state-variables.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/react-state-variables.test.ts.snap
@@ -60,14 +60,14 @@ export default MyBasicRefComponent;
 `;
 
 exports[`React - stateType: variables > jsx > Javascript Test > Basic 1`] = `
-"'function' is not allowed as a variable declaration name. (18:7)
-  16 |   function MyBasicComponent(props) {
-  17 |   const name= 'Steve'
-> 18 | const function underscore_fn_name() {
+"'function' is not allowed as a variable declaration name. (19:7)
+  17 |
+  18 |   const name= 'Steve'
+> 19 | const function underscore_fn_name() {
      |       ^
-  19 | return 'bar';
-  20 | }
-  21 | const age= 1"
+  20 | return 'bar';
+  21 | }
+  22 | const age= 1"
 `;
 
 exports[`React - stateType: variables > jsx > Javascript Test > Basic Context 1`] = `
@@ -427,14 +427,14 @@ export default Button;
 `;
 
 exports[`React - stateType: variables > jsx > Javascript Test > Columns 1`] = `
-"'function' is not allowed as a variable declaration name. (14:9)
-  12 |
+"'function' is not allowed as a variable declaration name. (15:9)
   13 |   function Column(props) {
-> 14 |   const function getColumns() {
+  14 |
+> 15 |   const function getColumns() {
      |         ^
-  15 | return props.columns || [];
-  16 | }
-  17 | const function getGutterSize() {"
+  16 | return props.columns || [];
+  17 | }
+  18 | const function getGutterSize() {"
 `;
 
 exports[`React - stateType: variables > jsx > Javascript Test > ContentSlotHtml 1`] = `
@@ -459,58 +459,58 @@ export default ContentSlotCode;
 `;
 
 exports[`React - stateType: variables > jsx > Javascript Test > ContentSlotJSX 1`] = `
-"'function' is not allowed as a variable declaration name. (17:7)
-  15 |   const name= 'king'
-  16 | const showContent= false
-> 17 | const function cls() {
+"'function' is not allowed as a variable declaration name. (18:7)
+  16 |   const name= 'king'
+  17 | const showContent= false
+> 18 | const function cls() {
      |       ^
-  18 | return props.slotContent && props.children ? \`\${name}-content\` : '';
-  19 | }
-  20 | const function show() {"
+  19 | return props.slotContent && props.children ? \`\${name}-content\` : '';
+  20 | }
+  21 | const function show() {"
 `;
 
 exports[`React - stateType: variables > jsx > Javascript Test > CustomCode 1`] = `
-"'function' is not allowed as a variable declaration name. (18:7)
-  16 | const scriptsInserted= []
-  17 | const scriptsRun= []
-> 18 | const function findAndRunScripts() {
+"'function' is not allowed as a variable declaration name. (19:7)
+  17 | const scriptsInserted= []
+  18 | const scriptsRun= []
+> 19 | const function findAndRunScripts() {
      |       ^
-  19 | // TODO: Move this function to standalone one in '@builder.io/utils'
-  20 | if (elem.current && typeof window !== 'undefined') {
-  21 | /** @type {HTMLScriptElement[]} */"
+  20 | // TODO: Move this function to standalone one in '@builder.io/utils'
+  21 | if (elem.current && typeof window !== 'undefined') {
+  22 | /** @type {HTMLScriptElement[]} */"
 `;
 
 exports[`React - stateType: variables > jsx > Javascript Test > Embed 1`] = `
-"'function' is not allowed as a variable declaration name. (18:7)
-  16 | const scriptsInserted= []
-  17 | const scriptsRun= []
-> 18 | const function findAndRunScripts() {
+"'function' is not allowed as a variable declaration name. (19:7)
+  17 | const scriptsInserted= []
+  18 | const scriptsRun= []
+> 19 | const function findAndRunScripts() {
      |       ^
-  19 | // TODO: Move this function to standalone one in '@builder.io/utils'
-  20 | if (elem.current && typeof window !== 'undefined') {
-  21 | /** @type {HTMLScriptElement[]} */"
+  20 | // TODO: Move this function to standalone one in '@builder.io/utils'
+  21 | if (elem.current && typeof window !== 'undefined') {
+  22 | /** @type {HTMLScriptElement[]} */"
 `;
 
 exports[`React - stateType: variables > jsx > Javascript Test > Form 1`] = `
-"'function' is not allowed as a variable declaration name. (20:7)
-  18 | const responseData= null
-  19 | const formErrorMessage= ''
-> 20 | const function submissionState() {
+"'function' is not allowed as a variable declaration name. (21:7)
+  19 | const responseData= null
+  20 | const formErrorMessage= ''
+> 21 | const function submissionState() {
      |       ^
-  21 | return Builder.isEditing && props.previewState || formState;
-  22 | }
-  23 | const function onSubmit(event) {"
+  22 | return Builder.isEditing && props.previewState || formState;
+  23 | }
+  24 | const function onSubmit(event) {"
 `;
 
 exports[`React - stateType: variables > jsx > Javascript Test > Image 1`] = `
-"'function' is not allowed as a variable declaration name. (18:7)
-  16 | const scrollListener= null
-  17 | const imageLoaded= false
-> 18 | const function setLoaded() {
+"'function' is not allowed as a variable declaration name. (19:7)
+  17 | const scrollListener= null
+  18 | const imageLoaded= false
+> 19 | const function setLoaded() {
      |       ^
-  19 | imageLoaded = true;
-  20 | }
-  21 | const function useLazyLoading() {"
+  20 | imageLoaded = true;
+  21 | }
+  22 | const function useLazyLoading() {"
 `;
 
 exports[`React - stateType: variables > jsx > Javascript Test > Image State 1`] = `
@@ -587,14 +587,14 @@ export default FormInputComponent;
 `;
 
 exports[`React - stateType: variables > jsx > Javascript Test > InputParent 1`] = `
-"'function' is not allowed as a variable declaration name. (14:9)
-  12 |
+"'function' is not allowed as a variable declaration name. (15:9)
   13 |   function Stepper(props) {
-> 14 |   const function handleChange(value) {
+  14 |
+> 15 |   const function handleChange(value) {
      |         ^
-  15 | console.log(value);
-  16 | }
-  17 |"
+  16 | console.log(value);
+  17 | }
+  18 |"
 `;
 
 exports[`React - stateType: variables > jsx > Javascript Test > NestedStore 1`] = `
@@ -755,47 +755,47 @@ export default SlotCode;
 `;
 
 exports[`React - stateType: variables > jsx > Javascript Test > Stamped.io 1`] = `
-"'function' is not allowed as a variable declaration name. (18:7)
-  16 | const name= 'test'
-  17 | const showReviewPrompt= false
-> 18 | const function kebabCaseValue() {
+"'function' is not allowed as a variable declaration name. (19:7)
+  17 | const name= 'test'
+  18 | const showReviewPrompt= false
+> 19 | const function kebabCaseValue() {
      |       ^
-  19 | return kebabCase('testThat');
-  20 | }
-  21 | const function snakeCaseValue() {"
+  20 | return kebabCase('testThat');
+  21 | }
+  22 | const function snakeCaseValue() {"
 `;
 
 exports[`React - stateType: variables > jsx > Javascript Test > StoreComment 1`] = `
-"'function' is not allowed as a variable declaration name. (16:7)
-  14 |   function StringLiteralStore(props) {
-  15 |   const foo= true
-> 16 | const function bar() {}
+"'function' is not allowed as a variable declaration name. (17:7)
+  15 |
+  16 |   const foo= true
+> 17 | const function bar() {}
      |       ^
-  17 |
   18 |
-  19 |"
+  19 |
+  20 |"
 `;
 
 exports[`React - stateType: variables > jsx > Javascript Test > StoreShadowVars 1`] = `
-"'function' is not allowed as a variable declaration name. (16:7)
-  14 |   function MyComponent(props) {
-  15 |   const errors= {}
-> 16 | const function foo(errors) {
+"'function' is not allowed as a variable declaration name. (17:7)
+  15 |
+  16 |   const errors= {}
+> 17 | const function foo(errors) {
      |       ^
-  17 | return errors;
-  18 | }
-  19 |"
+  18 | return errors;
+  19 | }
+  20 |"
 `;
 
 exports[`React - stateType: variables > jsx > Javascript Test > StoreWithState 1`] = `
-"'function' is not allowed as a variable declaration name. (16:7)
-  14 |   function MyComponent(props) {
-  15 |   const foo= false
-> 16 | const function bar() {
+"'function' is not allowed as a variable declaration name. (17:7)
+  15 |
+  16 |   const foo= false
+> 17 | const function bar() {
      |       ^
-  17 | return foo;
-  18 | }
-  19 |"
+  18 | return foo;
+  19 | }
+  20 |"
 `;
 
 exports[`React - stateType: variables > jsx > Javascript Test > Submit 1`] = `
@@ -862,14 +862,14 @@ export default Textarea;
 `;
 
 exports[`React - stateType: variables > jsx > Javascript Test > UseValueAndFnFromStore 1`] = `
-"'function' is not allowed as a variable declaration name. (17:7)
-  15 |   const _id= 'abc'
-  16 | const _active= false
-> 17 | const function _do(id) {
+"'function' is not allowed as a variable declaration name. (18:7)
+  16 |   const _id= 'abc'
+  17 | const _active= false
+> 18 | const function _do(id) {
      |       ^
-  18 | _active = !!id;
-  19 |
-  20 | if (props.onChange) {"
+  19 | _active = !!id;
+  20 |
+  21 | if (props.onChange) {"
 `;
 
 exports[`React - stateType: variables > jsx > Javascript Test > Video 1`] = `
@@ -905,14 +905,14 @@ export default Video;
 `;
 
 exports[`React - stateType: variables > jsx > Javascript Test > arrowFunctionInUseStore 1`] = `
-"'function' is not allowed as a variable declaration name. (16:7)
-  14 |   function MyComponent(props) {
-  15 |   const name= 'steve'
-> 16 | const function setName(value) {
+"'function' is not allowed as a variable declaration name. (17:7)
+  15 |
+  16 |   const name= 'steve'
+> 17 | const function setName(value) {
      |       ^
-  17 | name = value;
-  18 | }
-  19 | const function updateNameWithArrowFn(value) {"
+  18 | name = value;
+  19 | }
+  20 | const function updateNameWithArrowFn(value) {"
 `;
 
 exports[`React - stateType: variables > jsx > Javascript Test > basicForFragment 1`] = `
@@ -950,14 +950,14 @@ export default BasicForFragment;
 `;
 
 exports[`React - stateType: variables > jsx > Javascript Test > basicForNoTagReference 1`] = `
-"'function' is not allowed as a variable declaration name. (18:7)
-  16 | const TagName= 'div'
-  17 | const tag= 'span'
-> 18 | const function TagNameGetter() {
+"'function' is not allowed as a variable declaration name. (19:7)
+  17 | const TagName= 'div'
+  18 | const tag= 'span'
+> 19 | const function TagNameGetter() {
      |       ^
-  19 | return 'span';
-  20 | }
-  21 |"
+  20 | return 'span';
+  21 | }
+  22 |"
 `;
 
 exports[`React - stateType: variables > jsx > Javascript Test > basicForwardRef 1`] = `
@@ -1298,16 +1298,16 @@ exports[`React - stateType: variables > jsx > Javascript Test > defaultProps 1`]
 "\\"use client\\";
 import * as React from \\"react\\";
 
-function Button(
+function Button(props) {
   props = {
+    ...props,
     text: \\"default text\\",
     link: \\"https://builder.io/\\",
     openLinkInNewTab: false,
     onClick: () => {
       console.log(\\"hi\\");
     },
-  }
-) {
+  };
   return (
     <div>
       {props.link ? (
@@ -1340,14 +1340,14 @@ exports[`React - stateType: variables > jsx > Javascript Test > defaultPropsOuts
 "\\"use client\\";
 import * as React from \\"react\\";
 
-function Button(
+function Button(props) {
   props = {
+    ...props,
     text: \\"default text\\",
     link: \\"https://builder.io/\\",
     openLinkInNewTab: false,
     onClick: () => {},
-  }
-) {
+  };
   return (
     <div>
       {props.link ? (
@@ -1464,25 +1464,25 @@ export default FigmaButton;
 `;
 
 exports[`React - stateType: variables > jsx > Javascript Test > getterState 1`] = `
-"'function' is not allowed as a variable declaration name. (14:9)
-  12 |
+"'function' is not allowed as a variable declaration name. (15:9)
   13 |   function Button(props) {
-> 14 |   const function foo2() {
+  14 |
+> 15 |   const function foo2() {
      |         ^
-  15 | return props.foo + 'foo';
-  16 | }
-  17 | const function bar() {"
+  16 | return props.foo + 'foo';
+  17 | }
+  18 | const function bar() {"
 `;
 
 exports[`React - stateType: variables > jsx > Javascript Test > import types 1`] = `
-"'function' is not allowed as a variable declaration name. (14:9)
-  12 |
+"'function' is not allowed as a variable declaration name. (15:9)
   13 |   function RenderContent(props) {
-> 14 |   const function getRenderContentProps(block, index) {
+  14 |
+> 15 |   const function getRenderContentProps(block, index) {
      |         ^
-  15 | return {
-  16 | block: block,
-  17 | index: index"
+  16 | return {
+  17 | block: block,
+  18 | index: index"
 `;
 
 exports[`React - stateType: variables > jsx > Javascript Test > multipleOnUpdate 1`] = `
@@ -1622,14 +1622,14 @@ export default NestedStyles;
 `;
 
 exports[`React - stateType: variables > jsx > Javascript Test > onEvent 1`] = `
-"'function' is not allowed as a variable declaration name. (16:7)
-  14 |   function Embed(props) {
-  15 |   const elem = useRef(null);
-> 16 | const function foo(event) {
+"'function' is not allowed as a variable declaration name. (17:7)
+  15 |
+  16 |   const elem = useRef(null);
+> 17 | const function foo(event) {
      |       ^
-  17 | console.log('test2');
-  18 | }
-  19 | const function elem_onInitEditingBldr(event) {"
+  18 | console.log('test2');
+  19 | }
+  20 | const function elem_onInitEditingBldr(event) {"
 `;
 
 exports[`React - stateType: variables > jsx > Javascript Test > onInit & onMount 1`] = `
@@ -1886,14 +1886,14 @@ export default OnUpdate;
 `;
 
 exports[`React - stateType: variables > jsx > Javascript Test > renderBlock 1`] = `
-"'function' is not allowed as a variable declaration name. (28:10)
-  26 |
+"'function' is not allowed as a variable declaration name. (29:10)
   27 |    function RenderBlock(props) {
-> 28 |    const function component() {
+  28 |
+> 29 |    const function component() {
      |          ^
-  29 | const componentName = getProcessedBlock({
-  30 |  block: props.block,
-  31 |  state: props.context.state,"
+  30 | const componentName = getProcessedBlock({
+  31 |  block: props.block,
+  32 |  state: props.context.state,"
 `;
 
 exports[`React - stateType: variables > jsx > Javascript Test > renderContentExample 1`] = `
@@ -2034,14 +2034,14 @@ export default MyComponent;
 `;
 
 exports[`React - stateType: variables > jsx > Javascript Test > setState 1`] = `
-"'function' is not allowed as a variable declaration name. (16:7)
-  14 |   function SetState(props) {
-  15 |   const n= ['123']
-> 16 | const function someFn() {
+"'function' is not allowed as a variable declaration name. (17:7)
+  15 |
+  16 |   const n= ['123']
+> 17 | const function someFn() {
      |       ^
-  17 | n[0] = '123';
-  18 | }
-  19 |"
+  18 | n[0] = '123';
+  19 | }
+  20 |"
 `;
 
 exports[`React - stateType: variables > jsx > Javascript Test > showExpressions 1`] = `
@@ -2359,14 +2359,14 @@ export default TypeExternalStore;
 `;
 
 exports[`React - stateType: variables > jsx > Javascript Test > typeGetterStore 1`] = `
-"'function' is not allowed as a variable declaration name. (16:7)
-  14 |   function TypeGetterStore(props) {
-  15 |   const name= 'test'
-> 16 | const function getName() {
+"'function' is not allowed as a variable declaration name. (17:7)
+  15 |
+  16 |   const name= 'test'
+> 17 | const function getName() {
      |       ^
-  17 | if (name === 'a') {
-  18 | return 'b';
-  19 | }"
+  18 | if (name === 'a') {
+  19 | return 'b';
+  20 | }"
 `;
 
 exports[`React - stateType: variables > jsx > Javascript Test > use-style 1`] = `
@@ -2444,14 +2444,14 @@ export default MyComponent;
 `;
 
 exports[`React - stateType: variables > jsx > Javascript Test > useTarget 1`] = `
-"'function' is not allowed as a variable declaration name. (15:9)
-  13 |
+"'function' is not allowed as a variable declaration name. (16:9)
   14 |   function UseTargetComponent(props) {
-> 15 |   const function name() {
+  15 |
+> 16 |   const function name() {
      |         ^
-  16 | const prefix = 123;
-  17 | return prefix + 'foo';
-  18 | }"
+  17 | const prefix = 123;
+  18 | return prefix + 'foo';
+  19 | }"
 `;
 
 exports[`React - stateType: variables > jsx > Javascript Test > webComponent 1`] = `
@@ -2559,14 +2559,14 @@ export default MyBasicRefComponent;
 `;
 
 exports[`React - stateType: variables > jsx > Typescript Test > Basic 1`] = `
-"'function' is not allowed as a variable declaration name. (20:7)
-  18 |   function MyBasicComponent(props:MyBasicComponentProps) {
-  19 |   const name= 'Steve'
-> 20 | const function underscore_fn_name() {
+"'function' is not allowed as a variable declaration name. (21:7)
+  19 |
+  20 |   const name= 'Steve'
+> 21 | const function underscore_fn_name() {
      |       ^
-  21 | return 'bar';
-  22 | }
-  23 | const age= 1"
+  22 | return 'bar';
+  23 | }
+  24 | const age= 1"
 `;
 
 exports[`React - stateType: variables > jsx > Typescript Test > Basic Context 1`] = `
@@ -2955,14 +2955,14 @@ export default Button;
 `;
 
 exports[`React - stateType: variables > jsx > Typescript Test > Columns 1`] = `
-"'function' is not allowed as a variable declaration name. (27:9)
-  25 |
+"'function' is not allowed as a variable declaration name. (28:9)
   26 |   function Column(props:ColumnProps) {
-> 27 |   const function getColumns() {
+  27 |
+> 28 |   const function getColumns() {
      |         ^
-  28 | return props.columns || [];
-  29 | }
-  30 | const function getGutterSize() {"
+  29 | return props.columns || [];
+  30 | }
+  31 | const function getGutterSize() {"
 `;
 
 exports[`React - stateType: variables > jsx > Typescript Test > ContentSlotHtml 1`] = `
@@ -2993,58 +2993,58 @@ export default ContentSlotCode;
 `;
 
 exports[`React - stateType: variables > jsx > Typescript Test > ContentSlotJSX 1`] = `
-"'function' is not allowed as a variable declaration name. (19:7)
-  17 |   const name= 'king'
-  18 | const showContent= false
-> 19 | const function cls() {
+"'function' is not allowed as a variable declaration name. (20:7)
+  18 |   const name= 'king'
+  19 | const showContent= false
+> 20 | const function cls() {
      |       ^
-  20 | return props.slotContent && props.children ? \`\${name}-content\` : '';
-  21 | }
-  22 | const function show() {"
+  21 | return props.slotContent && props.children ? \`\${name}-content\` : '';
+  22 | }
+  23 | const function show() {"
 `;
 
 exports[`React - stateType: variables > jsx > Typescript Test > CustomCode 1`] = `
-"'function' is not allowed as a variable declaration name. (21:7)
-  19 | const scriptsInserted= []
-  20 | const scriptsRun= []
-> 21 | const function findAndRunScripts() {
+"'function' is not allowed as a variable declaration name. (22:7)
+  20 | const scriptsInserted= []
+  21 | const scriptsRun= []
+> 22 | const function findAndRunScripts() {
      |       ^
-  22 | // TODO: Move this function to standalone one in '@builder.io/utils'
-  23 | if (elem.current && typeof window !== 'undefined') {
-  24 | /** @type {HTMLScriptElement[]} */"
+  23 | // TODO: Move this function to standalone one in '@builder.io/utils'
+  24 | if (elem.current && typeof window !== 'undefined') {
+  25 | /** @type {HTMLScriptElement[]} */"
 `;
 
 exports[`React - stateType: variables > jsx > Typescript Test > Embed 1`] = `
-"'function' is not allowed as a variable declaration name. (21:7)
-  19 | const scriptsInserted= []
-  20 | const scriptsRun= []
-> 21 | const function findAndRunScripts() {
+"'function' is not allowed as a variable declaration name. (22:7)
+  20 | const scriptsInserted= []
+  21 | const scriptsRun= []
+> 22 | const function findAndRunScripts() {
      |       ^
-  22 | // TODO: Move this function to standalone one in '@builder.io/utils'
-  23 | if (elem.current && typeof window !== 'undefined') {
-  24 | /** @type {HTMLScriptElement[]} */"
+  23 | // TODO: Move this function to standalone one in '@builder.io/utils'
+  24 | if (elem.current && typeof window !== 'undefined') {
+  25 | /** @type {HTMLScriptElement[]} */"
 `;
 
 exports[`React - stateType: variables > jsx > Typescript Test > Form 1`] = `
-"'function' is not allowed as a variable declaration name. (42:7)
-  40 | const responseData= null
-  41 | const formErrorMessage= ''
-> 42 | const function submissionState() {
+"'function' is not allowed as a variable declaration name. (43:7)
+  41 | const responseData= null
+  42 | const formErrorMessage= ''
+> 43 | const function submissionState() {
      |       ^
-  43 | return Builder.isEditing && props.previewState || formState;
-  44 | }
-  45 | const function onSubmit(event: Event & {"
+  44 | return Builder.isEditing && props.previewState || formState;
+  45 | }
+  46 | const function onSubmit(event: Event & {"
 `;
 
 exports[`React - stateType: variables > jsx > Typescript Test > Image 1`] = `
-"'function' is not allowed as a variable declaration name. (35:7)
-  33 | const scrollListener= null
-  34 | const imageLoaded= false
-> 35 | const function setLoaded() {
+"'function' is not allowed as a variable declaration name. (36:7)
+  34 | const scrollListener= null
+  35 | const imageLoaded= false
+> 36 | const function setLoaded() {
      |       ^
-  36 | imageLoaded = true;
-  37 | }
-  38 | const function useLazyLoading() {"
+  37 | imageLoaded = true;
+  38 | }
+  39 | const function useLazyLoading() {"
 `;
 
 exports[`React - stateType: variables > jsx > Typescript Test > Image State 1`] = `
@@ -3151,14 +3151,14 @@ export default FormInputComponent;
 `;
 
 exports[`React - stateType: variables > jsx > Typescript Test > InputParent 1`] = `
-"'function' is not allowed as a variable declaration name. (14:9)
-  12 |
+"'function' is not allowed as a variable declaration name. (15:9)
   13 |   function Stepper(props:any) {
-> 14 |   const function handleChange(value: string) {
+  14 |
+> 15 |   const function handleChange(value: string) {
      |         ^
-  15 | console.log(value);
-  16 | }
-  17 |"
+  16 | console.log(value);
+  17 | }
+  18 |"
 `;
 
 exports[`React - stateType: variables > jsx > Typescript Test > NestedStore 1`] = `
@@ -3363,47 +3363,47 @@ export default SlotCode;
 `;
 
 exports[`React - stateType: variables > jsx > Typescript Test > Stamped.io 1`] = `
-"'function' is not allowed as a variable declaration name. (21:7)
-  19 | const name= 'test'
-  20 | const showReviewPrompt= false
-> 21 | const function kebabCaseValue() {
+"'function' is not allowed as a variable declaration name. (22:7)
+  20 | const name= 'test'
+  21 | const showReviewPrompt= false
+> 22 | const function kebabCaseValue() {
      |       ^
-  22 | return kebabCase('testThat');
-  23 | }
-  24 | const function snakeCaseValue() {"
+  23 | return kebabCase('testThat');
+  24 | }
+  25 | const function snakeCaseValue() {"
 `;
 
 exports[`React - stateType: variables > jsx > Typescript Test > StoreComment 1`] = `
-"'function' is not allowed as a variable declaration name. (16:7)
-  14 |   function StringLiteralStore(props:any) {
-  15 |   const foo= true
-> 16 | const function bar() {}
+"'function' is not allowed as a variable declaration name. (17:7)
+  15 |
+  16 |   const foo= true
+> 17 | const function bar() {}
      |       ^
-  17 |
   18 |
-  19 |"
+  19 |
+  20 |"
 `;
 
 exports[`React - stateType: variables > jsx > Typescript Test > StoreShadowVars 1`] = `
-"'function' is not allowed as a variable declaration name. (16:7)
-  14 |   function MyComponent(props:any) {
-  15 |   const errors= {}
-> 16 | const function foo(errors) {
+"'function' is not allowed as a variable declaration name. (17:7)
+  15 |
+  16 |   const errors= {}
+> 17 | const function foo(errors) {
      |       ^
-  17 | return errors;
-  18 | }
-  19 |"
+  18 | return errors;
+  19 | }
+  20 |"
 `;
 
 exports[`React - stateType: variables > jsx > Typescript Test > StoreWithState 1`] = `
-"'function' is not allowed as a variable declaration name. (16:7)
-  14 |   function MyComponent(props:any) {
-  15 |   const foo= false
-> 16 | const function bar() {
+"'function' is not allowed as a variable declaration name. (17:7)
+  15 |
+  16 |   const foo= false
+> 17 | const function bar() {
      |       ^
-  17 | return foo;
-  18 | }
-  19 |"
+  18 | return foo;
+  19 | }
+  20 |"
 `;
 
 exports[`React - stateType: variables > jsx > Typescript Test > Submit 1`] = `
@@ -3492,14 +3492,14 @@ export default Textarea;
 `;
 
 exports[`React - stateType: variables > jsx > Typescript Test > UseValueAndFnFromStore 1`] = `
-"'function' is not allowed as a variable declaration name. (24:7)
-  22 |   const _id= 'abc'
-  23 | const _active= false
-> 24 | const function _do(id?: string) {
+"'function' is not allowed as a variable declaration name. (25:7)
+  23 |   const _id= 'abc'
+  24 | const _active= false
+> 25 | const function _do(id?: string) {
      |       ^
-  25 | _active = !!id;
-  26 |
-  27 | if (props.onChange) {"
+  26 | _active = !!id;
+  27 |
+  28 | if (props.onChange) {"
 `;
 
 exports[`React - stateType: variables > jsx > Typescript Test > Video 1`] = `
@@ -3561,14 +3561,14 @@ export default Video;
 `;
 
 exports[`React - stateType: variables > jsx > Typescript Test > arrowFunctionInUseStore 1`] = `
-"'function' is not allowed as a variable declaration name. (16:7)
-  14 |   function MyComponent(props:any) {
-  15 |   const name= 'steve'
-> 16 | const function setName(value) {
+"'function' is not allowed as a variable declaration name. (17:7)
+  15 |
+  16 |   const name= 'steve'
+> 17 | const function setName(value) {
      |       ^
-  17 | name = value;
-  18 | }
-  19 | const function updateNameWithArrowFn(value) {"
+  18 | name = value;
+  19 | }
+  20 | const function updateNameWithArrowFn(value) {"
 `;
 
 exports[`React - stateType: variables > jsx > Typescript Test > basicForFragment 1`] = `
@@ -3606,14 +3606,14 @@ export default BasicForFragment;
 `;
 
 exports[`React - stateType: variables > jsx > Typescript Test > basicForNoTagReference 1`] = `
-"'function' is not allowed as a variable declaration name. (18:7)
-  16 | const TagName= 'div'
-  17 | const tag= 'span'
-> 18 | const function TagNameGetter() {
+"'function' is not allowed as a variable declaration name. (19:7)
+  17 | const TagName= 'div'
+  18 | const tag= 'span'
+> 19 | const function TagNameGetter() {
      |       ^
-  19 | return 'span';
-  20 | }
-  21 |"
+  20 | return 'span';
+  21 | }
+  22 |"
 `;
 
 exports[`React - stateType: variables > jsx > Typescript Test > basicForwardRef 1`] = `
@@ -3990,16 +3990,16 @@ export interface ButtonProps {
   onClick?: () => void;
 }
 
-function Button(
-  props: ButtonProps = {
+function Button(props: ButtonProps) {
+  props = {
+    ...props,
     text: \\"default text\\",
     link: \\"https://builder.io/\\",
     openLinkInNewTab: false,
     onClick: () => {
       console.log(\\"hi\\");
     },
-  }
-) {
+  };
   return (
     <div>
       {props.link ? (
@@ -4040,14 +4040,14 @@ export interface ButtonProps {
   onClick: () => void;
 }
 
-function Button(
-  props: ButtonProps = {
+function Button(props: ButtonProps) {
+  props = {
+    ...props,
     text: \\"default text\\",
     link: \\"https://builder.io/\\",
     openLinkInNewTab: false,
     onClick: () => {},
-  }
-) {
+  };
   return (
     <div>
       {props.link ? (
@@ -4168,25 +4168,25 @@ export default FigmaButton;
 `;
 
 exports[`React - stateType: variables > jsx > Typescript Test > getterState 1`] = `
-"'function' is not allowed as a variable declaration name. (16:9)
-  14 |
+"'function' is not allowed as a variable declaration name. (17:9)
   15 |   function Button(props:ButtonProps) {
-> 16 |   const function foo2() {
+  16 |
+> 17 |   const function foo2() {
      |         ^
-  17 | return props.foo + 'foo';
-  18 | }
-  19 | const function bar() {"
+  18 | return props.foo + 'foo';
+  19 | }
+  20 | const function bar() {"
 `;
 
 exports[`React - stateType: variables > jsx > Typescript Test > import types 1`] = `
-"'function' is not allowed as a variable declaration name. (19:9)
-  17 |
+"'function' is not allowed as a variable declaration name. (20:9)
   18 |   function RenderContent(props:RenderContentProps) {
-> 19 |   const function getRenderContentProps(block, index) {
+  19 |
+> 20 |   const function getRenderContentProps(block, index) {
      |         ^
-  20 | return {
-  21 | block: block,
-  22 | index: index"
+  21 | return {
+  22 | block: block,
+  23 | index: index"
 `;
 
 exports[`React - stateType: variables > jsx > Typescript Test > multipleOnUpdate 1`] = `
@@ -4331,14 +4331,14 @@ export default NestedStyles;
 `;
 
 exports[`React - stateType: variables > jsx > Typescript Test > onEvent 1`] = `
-"'function' is not allowed as a variable declaration name. (16:7)
-  14 |   function Embed(props:any) {
-  15 |   const elem = useRef<HTMLDivElement>(null);
-> 16 | const function foo(event) {
+"'function' is not allowed as a variable declaration name. (17:7)
+  15 |
+  16 |   const elem = useRef<HTMLDivElement>(null);
+> 17 | const function foo(event) {
      |       ^
-  17 | console.log('test2');
-  18 | }
-  19 | const function elem_onInitEditingBldr(event) {"
+  18 | console.log('test2');
+  19 | }
+  20 | const function elem_onInitEditingBldr(event) {"
 `;
 
 exports[`React - stateType: variables > jsx > Typescript Test > onInit & onMount 1`] = `
@@ -4641,14 +4641,14 @@ export default OnUpdate;
 `;
 
 exports[`React - stateType: variables > jsx > Typescript Test > renderBlock 1`] = `
-"'function' is not allowed as a variable declaration name. (36:10)
-  34 |
+"'function' is not allowed as a variable declaration name. (37:10)
   35 |    function RenderBlock(props:RenderBlockProps) {
-> 36 |    const function component() {
+  36 |
+> 37 |    const function component() {
      |          ^
-  37 | const componentName = getProcessedBlock({
-  38 |  block: props.block,
-  39 |  state: props.context.state,"
+  38 | const componentName = getProcessedBlock({
+  39 |  block: props.block,
+  40 |  state: props.context.state,"
 `;
 
 exports[`React - stateType: variables > jsx > Typescript Test > renderContentExample 1`] = `
@@ -4808,14 +4808,14 @@ export default MyComponent;
 `;
 
 exports[`React - stateType: variables > jsx > Typescript Test > setState 1`] = `
-"'function' is not allowed as a variable declaration name. (16:7)
-  14 |   function SetState(props:any) {
-  15 |   const n= ['123']
-> 16 | const function someFn() {
+"'function' is not allowed as a variable declaration name. (17:7)
+  15 |
+  16 |   const n= ['123']
+> 17 | const function someFn() {
      |       ^
-  17 | n[0] = '123';
-  18 | }
-  19 |"
+  18 | n[0] = '123';
+  19 | }
+  20 |"
 `;
 
 exports[`React - stateType: variables > jsx > Typescript Test > showExpressions 1`] = `
@@ -5168,14 +5168,14 @@ export default TypeExternalStore;
 `;
 
 exports[`React - stateType: variables > jsx > Typescript Test > typeGetterStore 1`] = `
-"'function' is not allowed as a variable declaration name. (20:7)
-  18 |   function TypeGetterStore(props:any) {
-  19 |   const name= 'test'
-> 20 | const function getName() {
+"'function' is not allowed as a variable declaration name. (21:7)
+  19 |
+  20 |   const name= 'test'
+> 21 | const function getName() {
      |       ^
-  21 | if (name === 'a') {
-  22 | return 'b';
-  23 | }"
+  22 | if (name === 'a') {
+  23 | return 'b';
+  24 | }"
 `;
 
 exports[`React - stateType: variables > jsx > Typescript Test > use-style 1`] = `
@@ -5253,14 +5253,14 @@ export default MyComponent;
 `;
 
 exports[`React - stateType: variables > jsx > Typescript Test > useTarget 1`] = `
-"'function' is not allowed as a variable declaration name. (15:9)
-  13 |
+"'function' is not allowed as a variable declaration name. (16:9)
   14 |   function UseTargetComponent(props:any) {
-> 15 |   const function name() {
+  15 |
+> 16 |   const function name() {
      |         ^
-  16 | const prefix = 123;
-  17 | return prefix + 'foo';
-  18 | }"
+  17 | const prefix = 123;
+  18 | return prefix + 'foo';
+  19 | }"
 `;
 
 exports[`React - stateType: variables > jsx > Typescript Test > webComponent 1`] = `
@@ -5389,7 +5389,8 @@ exports[`React - stateType: variables > svelte > Javascript Test > classDirectiv
 "\\"use client\\";
 import * as React from \\"react\\";
 
-function MyComponent(props = {}) {
+function MyComponent(props) {
+  props = { ...props };
   const focus = true;
 
   return (
@@ -5406,14 +5407,14 @@ export default MyComponent;
 `;
 
 exports[`React - stateType: variables > svelte > Javascript Test > context 1`] = `
-"'>' expected. (32:13)
-  30 | return (
-  31 |
-> 32 | <'activeTab'.Provider  value={activeTab}><div>{activeTab}</div></'activeTab'.Provider>
+"'>' expected. (33:13)
+  31 | return (
+  32 |
+> 33 | <'activeTab'.Provider  value={activeTab}><div>{activeTab}</div></'activeTab'.Provider>
      |             ^
-  33 |
   34 |
-  35 |"
+  35 |
+  36 |"
 `;
 
 exports[`React - stateType: variables > svelte > Javascript Test > each 1`] = `
@@ -5546,14 +5547,14 @@ export default MyComponent;
 `;
 
 exports[`React - stateType: variables > svelte > Javascript Test > reactive 1`] = `
-"'function' is not allowed as a variable declaration name. (16:7)
-  14 |   function MyComponent(props) {
-  15 |   const name= \\"Steve\\"
-> 16 | const function lowercaseName() {
+"'function' is not allowed as a variable declaration name. (17:7)
+  15 |
+  16 |   const name= \\"Steve\\"
+> 17 | const function lowercaseName() {
      |       ^
-  17 | return name.toLowerCase();
-  18 | }
-  19 |"
+  18 | return name.toLowerCase();
+  19 | }
+  20 |"
 `;
 
 exports[`React - stateType: variables > svelte > Javascript Test > reactiveWithFn 1`] = `
@@ -5759,7 +5760,8 @@ exports[`React - stateType: variables > svelte > Typescript Test > classDirectiv
 "\\"use client\\";
 import * as React from \\"react\\";
 
-function MyComponent(props: any = {}) {
+function MyComponent(props: any) {
+  props = { ...props };
   const focus = true;
 
   return (
@@ -5776,14 +5778,14 @@ export default MyComponent;
 `;
 
 exports[`React - stateType: variables > svelte > Typescript Test > context 1`] = `
-"'>' expected. (32:13)
-  30 | return (
-  31 |
-> 32 | <'activeTab'.Provider  value={activeTab}><div>{activeTab}</div></'activeTab'.Provider>
+"'>' expected. (33:13)
+  31 | return (
+  32 |
+> 33 | <'activeTab'.Provider  value={activeTab}><div>{activeTab}</div></'activeTab'.Provider>
      |             ^
-  33 |
   34 |
-  35 |"
+  35 |
+  36 |"
 `;
 
 exports[`React - stateType: variables > svelte > Typescript Test > each 1`] = `
@@ -5916,14 +5918,14 @@ export default MyComponent;
 `;
 
 exports[`React - stateType: variables > svelte > Typescript Test > reactive 1`] = `
-"'function' is not allowed as a variable declaration name. (16:7)
-  14 |   function MyComponent(props:any) {
-  15 |   const name= \\"Steve\\"
-> 16 | const function lowercaseName() {
+"'function' is not allowed as a variable declaration name. (17:7)
+  15 |
+  16 |   const name= \\"Steve\\"
+> 17 | const function lowercaseName() {
      |       ^
-  17 | return name.toLowerCase();
-  18 | }
-  19 |"
+  18 | return name.toLowerCase();
+  19 | }
+  20 |"
 `;
 
 exports[`React - stateType: variables > svelte > Typescript Test > reactiveWithFn 1`] = `
diff --git a/packages/core/src/__tests__/__snapshots__/react.test.ts.snap b/packages/core/src/__tests__/__snapshots__/react.test.ts.snap
index 9fcecc9a0a..85d2b55a70 100644
--- a/packages/core/src/__tests__/__snapshots__/react.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/react.test.ts.snap
@@ -555,9 +555,13 @@ exports[`React - stateType: useState > jsx > Javascript Test > ContentSlotJSX 1`
 import * as React from \\"react\\";
 import { useState } from \\"react\\";
 
-function ContentSlotJsxCode(
-  props = { content: \\"\\", slotReference: undefined, slotContent: undefined }
-) {
+function ContentSlotJsxCode(props) {
+  props = {
+    ...props,
+    content: \\"\\",
+    slotReference: undefined,
+    slotContent: undefined,
+  };
   const [name, setName] = useState(() => \\"king\\");
 
   const [showContent, setShowContent] = useState(() => false);
@@ -2082,16 +2086,16 @@ exports[`React - stateType: useState > jsx > Javascript Test > defaultProps 1`]
 "\\"use client\\";
 import * as React from \\"react\\";
 
-function Button(
+function Button(props) {
   props = {
+    ...props,
     text: \\"default text\\",
     link: \\"https://builder.io/\\",
     openLinkInNewTab: false,
     onClick: () => {
       console.log(\\"hi\\");
     },
-  }
-) {
+  };
   return (
     <div>
       {props.link ? (
@@ -2124,14 +2128,14 @@ exports[`React - stateType: useState > jsx > Javascript Test > defaultPropsOutsi
 "\\"use client\\";
 import * as React from \\"react\\";
 
-function Button(
+function Button(props) {
   props = {
+    ...props,
     text: \\"default text\\",
     link: \\"https://builder.io/\\",
     openLinkInNewTab: false,
     onClick: () => {},
-  }
-) {
+  };
   return (
     <div>
       {props.link ? (
@@ -4269,13 +4273,13 @@ type Props = {
 };
 import type { JSX } from \\"../../../../jsx-runtime\\";
 
-function ContentSlotJsxCode(
-  props: Props = {
+function ContentSlotJsxCode(props: Props) {
+  props = {
+    ...props,
     content: \\"\\",
     slotReference: undefined,
     slotContent: undefined,
-  }
-) {
+  };
   const [name, setName] = useState(() => \\"king\\");
 
   const [showContent, setShowContent] = useState(() => false);
@@ -6034,16 +6038,16 @@ export interface ButtonProps {
   onClick?: () => void;
 }
 
-function Button(
-  props: ButtonProps = {
+function Button(props: ButtonProps) {
+  props = {
+    ...props,
     text: \\"default text\\",
     link: \\"https://builder.io/\\",
     openLinkInNewTab: false,
     onClick: () => {
       console.log(\\"hi\\");
     },
-  }
-) {
+  };
   return (
     <div>
       {props.link ? (
@@ -6084,14 +6088,14 @@ export interface ButtonProps {
   onClick: () => void;
 }
 
-function Button(
-  props: ButtonProps = {
+function Button(props: ButtonProps) {
+  props = {
+    ...props,
     text: \\"default text\\",
     link: \\"https://builder.io/\\",
     openLinkInNewTab: false,
     onClick: () => {},
-  }
-) {
+  };
   return (
     <div>
       {props.link ? (
@@ -8035,7 +8039,8 @@ exports[`React - stateType: useState > svelte > Javascript Test > classDirective
 import * as React from \\"react\\";
 import { useState } from \\"react\\";
 
-function MyComponent(props = {}) {
+function MyComponent(props) {
+  props = { ...props };
   const [focus, setFocus] = useState(() => true);
 
   return (
@@ -8052,14 +8057,14 @@ export default MyComponent;
 `;
 
 exports[`React - stateType: useState > svelte > Javascript Test > context 1`] = `
-"'>' expected. (31:13)
-  29 | return (
-  30 |
-> 31 | <'activeTab'.Provider  value={activeTab}><div>{activeTab}</div></'activeTab'.Provider>
+"'>' expected. (32:13)
+  30 | return (
+  31 |
+> 32 | <'activeTab'.Provider  value={activeTab}><div>{activeTab}</div></'activeTab'.Provider>
      |             ^
-  32 |
   33 |
-  34 |"
+  34 |
+  35 |"
 `;
 
 exports[`React - stateType: useState > svelte > Javascript Test > each 1`] = `
@@ -8433,7 +8438,8 @@ exports[`React - stateType: useState > svelte > Typescript Test > classDirective
 import * as React from \\"react\\";
 import { useState } from \\"react\\";
 
-function MyComponent(props: any = {}) {
+function MyComponent(props: any) {
+  props = { ...props };
   const [focus, setFocus] = useState(() => true);
 
   return (
@@ -8450,14 +8456,14 @@ export default MyComponent;
 `;
 
 exports[`React - stateType: useState > svelte > Typescript Test > context 1`] = `
-"'>' expected. (31:13)
-  29 | return (
-  30 |
-> 31 | <'activeTab'.Provider  value={activeTab}><div>{activeTab}</div></'activeTab'.Provider>
+"'>' expected. (32:13)
+  30 | return (
+  31 |
+> 32 | <'activeTab'.Provider  value={activeTab}><div>{activeTab}</div></'activeTab'.Provider>
      |             ^
-  32 |
   33 |
-  34 |"
+  34 |
+  35 |"
 `;
 
 exports[`React - stateType: useState > svelte > Typescript Test > each 1`] = `
@@ -8724,3 +8730,97 @@ function MyComponent(props: any) {
 export default MyComponent;
 "
 `;
+
+exports[`React - test > jsx > Javascript Test > defaultProps 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+
+function Button(props) {
+  props = {
+    ...props,
+    text: \\"default text\\",
+    link: \\"https://builder.io/\\",
+    openLinkInNewTab: false,
+    onClick: () => {
+      console.log(\\"hi\\");
+    },
+  };
+  return (
+    <div>
+      {props.link ? (
+        <a
+          {...props.attributes}
+          href={props.link}
+          target={props.openLinkInNewTab ? \\"_blank\\" : undefined}
+        >
+          {props.text}
+        </a>
+      ) : null}
+      {!props.link ? (
+        <button
+          type=\\"button\\"
+          {...props.attributes}
+          onClick={(event) => props.onClick()}
+        >
+          {props.buttonText}
+        </button>
+      ) : null}
+    </div>
+  );
+}
+
+export default Button;
+"
+`;
+
+exports[`React - test > jsx > Typescript Test > defaultProps 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+
+export interface ButtonProps {
+  attributes?: any;
+  text?: string;
+  buttonText?: string; // no default value
+
+  link?: string;
+  openLinkInNewTab?: boolean;
+  onClick?: () => void;
+}
+
+function Button(props: ButtonProps) {
+  props = {
+    ...props,
+    text: \\"default text\\",
+    link: \\"https://builder.io/\\",
+    openLinkInNewTab: false,
+    onClick: () => {
+      console.log(\\"hi\\");
+    },
+  };
+  return (
+    <div>
+      {props.link ? (
+        <a
+          {...props.attributes}
+          href={props.link}
+          target={props.openLinkInNewTab ? \\"_blank\\" : undefined}
+        >
+          {props.text}
+        </a>
+      ) : null}
+      {!props.link ? (
+        <button
+          type=\\"button\\"
+          {...props.attributes}
+          onClick={(event) => props.onClick()}
+        >
+          {props.buttonText}
+        </button>
+      ) : null}
+    </div>
+  );
+}
+
+export default Button;
+"
+`;
diff --git a/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap b/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap
index 75ef40235d..a159854126 100644
--- a/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap
@@ -482,14 +482,14 @@ export default Button;
 `;
 
 exports[`RSC > jsx > Javascript Test > Columns 1`] = `
-"'function' is not allowed as a variable declaration name. (20:9)
-  18 |
+"'function' is not allowed as a variable declaration name. (21:9)
   19 |   function Column(props) {
-> 20 |   const function getColumns() {
+  20 |
+> 21 |   const function getColumns() {
      |         ^
-  21 | return props.columns || [];
-  22 | }
-  23 | const function getGutterSize() {"
+  22 | return props.columns || [];
+  23 | }
+  24 | const function getGutterSize() {"
 `;
 
 exports[`RSC > jsx > Javascript Test > ContentSlotHtml 1`] = `
@@ -523,9 +523,13 @@ exports[`RSC > jsx > Javascript Test > ContentSlotJSX 1`] = `
 import * as React from \\"react\\";
 import { useState } from \\"react\\";
 
-function ContentSlotJsxCode(
-  props = { content: \\"\\", slotReference: undefined, slotContent: undefined }
-) {
+function ContentSlotJsxCode(props) {
+  props = {
+    ...props,
+    content: \\"\\",
+    slotReference: undefined,
+    slotContent: undefined,
+  };
   const [name, setName] = useState(() => \\"king\\");
 
   const [showContent, setShowContent] = useState(() => false);
@@ -1157,14 +1161,14 @@ export default FormInputComponent;
 `;
 
 exports[`RSC > jsx > Javascript Test > InputParent 1`] = `
-"'function' is not allowed as a variable declaration name. (20:9)
-  18 |
+"'function' is not allowed as a variable declaration name. (21:9)
   19 |   function Stepper(props) {
-> 20 |   const function handleChange(value) {
+  20 |
+> 21 |   const function handleChange(value) {
      |         ^
-  21 | console.log(value);
-  22 | }
-  23 |"
+  22 | console.log(value);
+  23 | }
+  24 |"
 `;
 
 exports[`RSC > jsx > Javascript Test > NestedStore 1`] = `
@@ -2109,16 +2113,16 @@ exports[`RSC > jsx > Javascript Test > defaultProps 1`] = `
 "\\"use client\\";
 import * as React from \\"react\\";
 
-function Button(
+function Button(props) {
   props = {
+    ...props,
     text: \\"default text\\",
     link: \\"https://builder.io/\\",
     openLinkInNewTab: false,
     onClick: () => {
       console.log(\\"hi\\");
     },
-  }
-) {
+  };
   return (
     <div>
       {props.link ? (
@@ -2151,14 +2155,14 @@ exports[`RSC > jsx > Javascript Test > defaultPropsOutsideComponent 1`] = `
 "\\"use client\\";
 import * as React from \\"react\\";
 
-function Button(
+function Button(props) {
   props = {
+    ...props,
     text: \\"default text\\",
     link: \\"https://builder.io/\\",
     openLinkInNewTab: false,
     onClick: () => {},
-  }
-) {
+  };
   return (
     <div>
       {props.link ? (
@@ -2282,25 +2286,25 @@ export default FigmaButton;
 `;
 
 exports[`RSC > jsx > Javascript Test > getterState 1`] = `
-"'function' is not allowed as a variable declaration name. (20:9)
-  18 |
+"'function' is not allowed as a variable declaration name. (21:9)
   19 |   function Button(props) {
-> 20 |   const function foo2() {
+  20 |
+> 21 |   const function foo2() {
      |         ^
-  21 | return props.foo + 'foo';
-  22 | }
-  23 | const function bar() {"
+  22 | return props.foo + 'foo';
+  23 | }
+  24 | const function bar() {"
 `;
 
 exports[`RSC > jsx > Javascript Test > import types 1`] = `
-"'function' is not allowed as a variable declaration name. (20:9)
-  18 |
+"'function' is not allowed as a variable declaration name. (21:9)
   19 |   function RenderContent(props) {
-> 20 |   const function getRenderContentProps(block, index) {
+  20 |
+> 21 |   const function getRenderContentProps(block, index) {
      |         ^
-  21 | return {
-  22 | block: block,
-  23 | index: index"
+  22 | return {
+  23 | block: block,
+  24 | index: index"
 `;
 
 exports[`RSC > jsx > Javascript Test > multipleOnUpdate 1`] = `
@@ -2771,14 +2775,14 @@ export default OnUpdate;
 `;
 
 exports[`RSC > jsx > Javascript Test > renderBlock 1`] = `
-"'function' is not allowed as a variable declaration name. (33:10)
-  31 |
+"'function' is not allowed as a variable declaration name. (34:10)
   32 |    function RenderBlock(props) {
-> 33 |    const function component() {
+  33 |
+> 34 |    const function component() {
      |          ^
-  34 | const componentName = getProcessedBlock({
-  35 |  block: props.block,
-  36 |  state: props.context.state,"
+  35 | const componentName = getProcessedBlock({
+  36 |  block: props.block,
+  37 |  state: props.context.state,"
 `;
 
 exports[`RSC > jsx > Javascript Test > renderContentExample 1`] = `
@@ -4046,14 +4050,14 @@ export default Button;
 `;
 
 exports[`RSC > jsx > Typescript Test > Columns 1`] = `
-"'function' is not allowed as a variable declaration name. (33:9)
-  31 |
+"'function' is not allowed as a variable declaration name. (34:9)
   32 |   function Column(props:ColumnProps) {
-> 33 |   const function getColumns() {
+  33 |
+> 34 |   const function getColumns() {
      |         ^
-  34 | return props.columns || [];
-  35 | }
-  36 | const function getGutterSize() {"
+  35 | return props.columns || [];
+  36 | }
+  37 | const function getGutterSize() {"
 `;
 
 exports[`RSC > jsx > Typescript Test > ContentSlotHtml 1`] = `
@@ -4098,13 +4102,13 @@ type Props = {
 };
 import type { JSX } from \\"../../../../jsx-runtime\\";
 
-function ContentSlotJsxCode(
-  props: Props = {
+function ContentSlotJsxCode(props: Props) {
+  props = {
+    ...props,
     content: \\"\\",
     slotReference: undefined,
     slotContent: undefined,
-  }
-) {
+  };
   const [name, setName] = useState(() => \\"king\\");
 
   const [showContent, setShowContent] = useState(() => false);
@@ -4826,14 +4830,14 @@ export default FormInputComponent;
 `;
 
 exports[`RSC > jsx > Typescript Test > InputParent 1`] = `
-"'function' is not allowed as a variable declaration name. (20:9)
-  18 |
+"'function' is not allowed as a variable declaration name. (21:9)
   19 |   function Stepper(props:any) {
-> 20 |   const function handleChange(value: string) {
+  20 |
+> 21 |   const function handleChange(value: string) {
      |         ^
-  21 | console.log(value);
-  22 | }
-  23 |"
+  22 | console.log(value);
+  23 | }
+  24 |"
 `;
 
 exports[`RSC > jsx > Typescript Test > NestedStore 1`] = `
@@ -5922,16 +5926,16 @@ export interface ButtonProps {
   onClick?: () => void;
 }
 
-function Button(
-  props: ButtonProps = {
+function Button(props: ButtonProps) {
+  props = {
+    ...props,
     text: \\"default text\\",
     link: \\"https://builder.io/\\",
     openLinkInNewTab: false,
     onClick: () => {
       console.log(\\"hi\\");
     },
-  }
-) {
+  };
   return (
     <div>
       {props.link ? (
@@ -5972,14 +5976,14 @@ export interface ButtonProps {
   onClick: () => void;
 }
 
-function Button(
-  props: ButtonProps = {
+function Button(props: ButtonProps) {
+  props = {
+    ...props,
     text: \\"default text\\",
     link: \\"https://builder.io/\\",
     openLinkInNewTab: false,
     onClick: () => {},
-  }
-) {
+  };
   return (
     <div>
       {props.link ? (
@@ -6107,25 +6111,25 @@ export default FigmaButton;
 `;
 
 exports[`RSC > jsx > Typescript Test > getterState 1`] = `
-"'function' is not allowed as a variable declaration name. (22:9)
-  20 |
+"'function' is not allowed as a variable declaration name. (23:9)
   21 |   function Button(props:ButtonProps) {
-> 22 |   const function foo2() {
+  22 |
+> 23 |   const function foo2() {
      |         ^
-  23 | return props.foo + 'foo';
-  24 | }
-  25 | const function bar() {"
+  24 | return props.foo + 'foo';
+  25 | }
+  26 | const function bar() {"
 `;
 
 exports[`RSC > jsx > Typescript Test > import types 1`] = `
-"'function' is not allowed as a variable declaration name. (25:9)
-  23 |
+"'function' is not allowed as a variable declaration name. (26:9)
   24 |   function RenderContent(props:RenderContentProps) {
-> 25 |   const function getRenderContentProps(block, index) {
+  25 |
+> 26 |   const function getRenderContentProps(block, index) {
      |         ^
-  26 | return {
-  27 | block: block,
-  28 | index: index"
+  27 | return {
+  28 | block: block,
+  29 | index: index"
 `;
 
 exports[`RSC > jsx > Typescript Test > multipleOnUpdate 1`] = `
@@ -6647,14 +6651,14 @@ export default OnUpdate;
 `;
 
 exports[`RSC > jsx > Typescript Test > renderBlock 1`] = `
-"'function' is not allowed as a variable declaration name. (41:10)
-  39 |
+"'function' is not allowed as a variable declaration name. (42:10)
   40 |    function RenderBlock(props:RenderBlockProps) {
-> 41 |    const function component() {
+  41 |
+> 42 |    const function component() {
      |          ^
-  42 | const componentName = getProcessedBlock({
-  43 |  block: props.block,
-  44 |  state: props.context.state,"
+  43 | const componentName = getProcessedBlock({
+  44 |  block: props.block,
+  45 |  state: props.context.state,"
 `;
 
 exports[`RSC > jsx > Typescript Test > renderContentExample 1`] = `
@@ -7552,7 +7556,8 @@ exports[`RSC > svelte > Javascript Test > classDirective 1`] = `
 import * as React from \\"react\\";
 import { useState } from \\"react\\";
 
-function MyComponent(props = {}) {
+function MyComponent(props) {
+  props = { ...props };
   const [focus, setFocus] = useState(() => true);
 
   return (
@@ -7569,14 +7574,14 @@ export default MyComponent;
 `;
 
 exports[`RSC > svelte > Javascript Test > context 1`] = `
-"'>' expected. (31:13)
-  29 | return (
-  30 |
-> 31 | <'activeTab'.Provider  value={activeTab}><div>{activeTab}</div></'activeTab'.Provider>
+"'>' expected. (32:13)
+  30 | return (
+  31 |
+> 32 | <'activeTab'.Provider  value={activeTab}><div>{activeTab}</div></'activeTab'.Provider>
      |             ^
-  32 |
   33 |
-  34 |"
+  34 |
+  35 |"
 `;
 
 exports[`RSC > svelte > Javascript Test > each 1`] = `
@@ -7960,7 +7965,8 @@ exports[`RSC > svelte > Typescript Test > classDirective 1`] = `
 import * as React from \\"react\\";
 import { useState } from \\"react\\";
 
-function MyComponent(props: any = {}) {
+function MyComponent(props: any) {
+  props = { ...props };
   const [focus, setFocus] = useState(() => true);
 
   return (
@@ -7977,14 +7983,14 @@ export default MyComponent;
 `;
 
 exports[`RSC > svelte > Typescript Test > context 1`] = `
-"'>' expected. (31:13)
-  29 | return (
-  30 |
-> 31 | <'activeTab'.Provider  value={activeTab}><div>{activeTab}</div></'activeTab'.Provider>
+"'>' expected. (32:13)
+  30 | return (
+  31 |
+> 32 | <'activeTab'.Provider  value={activeTab}><div>{activeTab}</div></'activeTab'.Provider>
      |             ^
-  32 |
   33 |
-  34 |"
+  34 |
+  35 |"
 `;
 
 exports[`RSC > svelte > Typescript Test > each 1`] = `
diff --git a/packages/core/src/__tests__/__snapshots__/taro.test.ts.snap b/packages/core/src/__tests__/__snapshots__/taro.test.ts.snap
index 1b70fc4a96..2dda268559 100644
--- a/packages/core/src/__tests__/__snapshots__/taro.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/taro.test.ts.snap
@@ -570,9 +570,13 @@ import * as React from \\"react\\";
 import { useState } from \\"react\\";
 import { View, Text } from \\"@tarojs/components\\";
 
-function ContentSlotJsxCode(
-  props = { content: \\"\\", slotReference: undefined, slotContent: undefined }
-) {
+function ContentSlotJsxCode(props) {
+  props = {
+    ...props,
+    content: \\"\\",
+    slotReference: undefined,
+    slotContent: undefined,
+  };
   const [name, setName] = useState(() => \\"king\\");
 
   const [showContent, setShowContent] = useState(() => false);
@@ -2104,16 +2108,16 @@ exports[`Taro > jsx > Javascript Test > defaultProps 1`] = `
 "import * as React from \\"react\\";
 import { View, Text, Button } from \\"@tarojs/components\\";
 
-function Button(
+function Button(props) {
   props = {
+    ...props,
     text: \\"default text\\",
     link: \\"https://builder.io/\\",
     openLinkInNewTab: false,
     onClick: () => {
       console.log(\\"hi\\");
     },
-  }
-) {
+  };
   return (
     <View>
       {props.link ? (
@@ -2146,14 +2150,14 @@ exports[`Taro > jsx > Javascript Test > defaultPropsOutsideComponent 1`] = `
 "import * as React from \\"react\\";
 import { View, Text, Button } from \\"@tarojs/components\\";
 
-function Button(
+function Button(props) {
   props = {
+    ...props,
     text: \\"default text\\",
     link: \\"https://builder.io/\\",
     openLinkInNewTab: false,
     onClick: () => {},
-  }
-) {
+  };
   return (
     <View>
       {props.link ? (
@@ -4365,13 +4369,13 @@ type Props = {
 import type { JSX } from \\"../../../../jsx-runtime\\";
 import { View, Text } from \\"@tarojs/components\\";
 
-function ContentSlotJsxCode(
-  props: Props = {
+function ContentSlotJsxCode(props: Props) {
+  props = {
+    ...props,
     content: \\"\\",
     slotReference: undefined,
     slotContent: undefined,
-  }
-) {
+  };
   const [name, setName] = useState(() => \\"king\\");
 
   const [showContent, setShowContent] = useState(() => false);
@@ -6148,16 +6152,16 @@ export interface ButtonProps {
 
 import { View, Text, Button } from \\"@tarojs/components\\";
 
-function Button(
-  props: ButtonProps = {
+function Button(props: ButtonProps) {
+  props = {
+    ...props,
     text: \\"default text\\",
     link: \\"https://builder.io/\\",
     openLinkInNewTab: false,
     onClick: () => {
       console.log(\\"hi\\");
     },
-  }
-) {
+  };
   return (
     <View>
       {props.link ? (
@@ -6199,14 +6203,14 @@ export interface ButtonProps {
 
 import { View, Text, Button } from \\"@tarojs/components\\";
 
-function Button(
-  props: ButtonProps = {
+function Button(props: ButtonProps) {
+  props = {
+    ...props,
     text: \\"default text\\",
     link: \\"https://builder.io/\\",
     openLinkInNewTab: false,
     onClick: () => {},
-  }
-) {
+  };
   return (
     <View>
       {props.link ? (
@@ -8019,7 +8023,8 @@ import * as React from \\"react\\";
 import { useState } from \\"react\\";
 import { Input } from \\"@tarojs/components\\";
 
-function MyComponent(props = {}) {
+function MyComponent(props) {
+  props = { ...props };
   const [focus, setFocus] = useState(() => true);
 
   return <Input />;
@@ -8030,14 +8035,14 @@ export default MyComponent;
 `;
 
 exports[`Taro > svelte > Javascript Test > context 1`] = `
-"'>' expected. (33:13)
-  31 | return (
-  32 |
-> 33 | <'activeTab'.Provider  value={activeTab}><View>{activeTab}</View></'activeTab'.Provider>
+"'>' expected. (34:13)
+  32 | return (
+  33 |
+> 34 | <'activeTab'.Provider  value={activeTab}><View>{activeTab}</View></'activeTab'.Provider>
      |             ^
-  34 |
   35 |
-  36 |"
+  36 |
+  37 |"
 `;
 
 exports[`Taro > svelte > Javascript Test > each 1`] = `
@@ -8425,7 +8430,8 @@ import * as React from \\"react\\";
 import { useState } from \\"react\\";
 import { Input } from \\"@tarojs/components\\";
 
-function MyComponent(props: any = {}) {
+function MyComponent(props: any) {
+  props = { ...props };
   const [focus, setFocus] = useState(() => true);
 
   return <Input />;
@@ -8436,14 +8442,14 @@ export default MyComponent;
 `;
 
 exports[`Taro > svelte > Typescript Test > context 1`] = `
-"'>' expected. (33:13)
-  31 | return (
-  32 |
-> 33 | <'activeTab'.Provider  value={activeTab}><View>{activeTab}</View></'activeTab'.Provider>
+"'>' expected. (34:13)
+  32 | return (
+  33 |
+> 34 | <'activeTab'.Provider  value={activeTab}><View>{activeTab}</View></'activeTab'.Provider>
      |             ^
-  34 |
   35 |
-  36 |"
+  36 |
+  37 |"
 `;
 
 exports[`Taro > svelte > Typescript Test > each 1`] = `
diff --git a/packages/core/src/__tests__/react.test.ts b/packages/core/src/__tests__/react.test.ts
index f296802077..864acabe65 100644
--- a/packages/core/src/__tests__/react.test.ts
+++ b/packages/core/src/__tests__/react.test.ts
@@ -31,7 +31,7 @@ describe('React - stateType: useState', () => {
   });
 });
 
-/*describe('React - test', () => {
+describe('React - test', () => {
   runTestsForTarget({
     options: {
       stateType: 'useState',
@@ -41,4 +41,4 @@ describe('React - stateType: useState', () => {
     only: ['defaultProps'],
     logOutput: true,
   });
-});*/
+});
diff --git a/packages/core/src/generators/react/generator.ts b/packages/core/src/generators/react/generator.ts
index 7ef026e861..1b24840562 100644
--- a/packages/core/src/generators/react/generator.ts
+++ b/packages/core/src/generators/react/generator.ts
@@ -464,7 +464,8 @@ const _componentToReact = (
     })}
     ${isForwardRef ? `const ${json.name} = forwardRef${forwardRefType}(` : ''}function ${
     json.name
-  }(${componentArgs}${getDefaultProps(json)}) {
+  }(${componentArgs}) {
+  ${getDefaultProps(json)}
     ${componentBody}
   }${isForwardRef ? ')' : ''}
 
diff --git a/packages/core/src/generators/react/helpers/default-props.ts b/packages/core/src/generators/react/helpers/default-props.ts
index 93159135da..20ece596e9 100644
--- a/packages/core/src/generators/react/helpers/default-props.ts
+++ b/packages/core/src/generators/react/helpers/default-props.ts
@@ -10,5 +10,8 @@ export const getDefaultProps = (json: MitosisComponent) => {
       return `${prop}: ${value}`;
     })
     .join(',');
-  return ` = {${defaultPropsString}}`;
+  if (defaultPropsString) {
+    return `props = {${defaultPropsString}, ...props}`;
+  }
+  return '';
 };

From ea0a5133664fe20bd62bab46dab29d78fd270487 Mon Sep 17 00:00:00 2001
From: Nicolas Merget <nicolas.merget@deutschebahn.com>
Date: Thu, 16 Jan 2025 10:35:52 +0100
Subject: [PATCH 04/20] fix: issues with e2e tests

---
 e2e/e2e-app/tests/main.spec.ts                |  13 ++-
 .../__snapshots__/mitosis.test.ts.snap        |  14 +--
 .../__snapshots__/preact.test.ts.snap         |  14 +--
 .../__snapshots__/react-native.test.ts.snap   |  14 +--
 .../react-state-builder.test.ts.snap          |  14 +--
 .../react-state-mobx.test.ts.snap             |  14 +--
 .../react-state-solid.test.ts.snap            |  14 +--
 .../react-state-valtio.test.ts.snap           |  14 +--
 .../react-state-variables.test.ts.snap        |  10 +-
 .../__snapshots__/react.test.ts.snap          | 108 +-----------------
 .../__tests__/__snapshots__/rsc.test.ts.snap  |  14 +--
 .../__snapshots__/svelte.test.ts.snap         |  18 ++-
 .../__tests__/__snapshots__/taro.test.ts.snap |  14 +--
 packages/core/src/__tests__/react.test.ts     |   4 +-
 packages/core/src/generators/svelte/svelte.ts |   6 +-
 15 files changed, 85 insertions(+), 200 deletions(-)

diff --git a/e2e/e2e-app/tests/main.spec.ts b/e2e/e2e-app/tests/main.spec.ts
index 189c9b040b..a40683081f 100644
--- a/e2e/e2e-app/tests/main.spec.ts
+++ b/e2e/e2e-app/tests/main.spec.ts
@@ -7,12 +7,17 @@ const test = playwrightTest.extend<{ packageName: PackageName | 'DEFAULT' }>({
 });
 
 test.describe('e2e', () => {
-  test('default props', async ({ page }) => {
+  test('default props', async ({ page, packageName }) => {
+    // TODO: Some targets don't support `defaultProps` :(
+    if (['e2e-qwik', 'e2e-solid'].includes(packageName)) {
+      test.skip();
+    }
+
     await page.goto('/default-props/');
-    const text = await page.getByTestId('default-props').allTextContents();
+    const text = await page.getByTestId('default-props').textContent();
 
-    expect(text.includes('abc')).toBeTruthy();
-    expect(text.includes('xyz')).toBeTruthy();
+    expect(text?.includes('abc')).toBeTruthy();
+    expect(text?.includes('xyz')).toBeTruthy();
   });
   test('todo list add', async ({ page }) => {
     await page.goto('/one-component/');
diff --git a/packages/core/src/__tests__/__snapshots__/mitosis.test.ts.snap b/packages/core/src/__tests__/__snapshots__/mitosis.test.ts.snap
index 0055bcf090..b28be3154a 100644
--- a/packages/core/src/__tests__/__snapshots__/mitosis.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/mitosis.test.ts.snap
@@ -15418,10 +15418,10 @@ import { useState } from \\"react\\";
 
 function ContentSlotJsxCode(props) {
   props = {
-    ...props,
     content: \\"\\",
     slotReference: undefined,
     slotContent: undefined,
+    ...props,
   };
   const [name, setName] = useState(() => \\"king\\");
 
@@ -16939,13 +16939,13 @@ import * as React from \\"react\\";
 
 function Button(props) {
   props = {
-    ...props,
     text: \\"default text\\",
     link: \\"https://builder.io/\\",
     openLinkInNewTab: false,
     onClick: () => {
       console.log(\\"hi\\");
     },
+    ...props,
   };
   return (
     <div>
@@ -16981,11 +16981,11 @@ import * as React from \\"react\\";
 
 function Button(props) {
   props = {
-    ...props,
     text: \\"default text\\",
     link: \\"https://builder.io/\\",
     openLinkInNewTab: false,
     onClick: () => {},
+    ...props,
   };
   return (
     <div>
@@ -19125,10 +19125,10 @@ import type { JSX } from \\"../../../../jsx-runtime\\";
 
 function ContentSlotJsxCode(props) {
   props = {
-    ...props,
     content: \\"\\",
     slotReference: undefined,
     slotContent: undefined,
+    ...props,
   };
   const [name, setName] = useState(() => \\"king\\");
 
@@ -20654,13 +20654,13 @@ import * as React from \\"react\\";
 
 function Button(props) {
   props = {
-    ...props,
     text: \\"default text\\",
     link: \\"https://builder.io/\\",
     openLinkInNewTab: false,
     onClick: () => {
       console.log(\\"hi\\");
     },
+    ...props,
   };
   return (
     <div>
@@ -20696,11 +20696,11 @@ import * as React from \\"react\\";
 
 function Button(props) {
   props = {
-    ...props,
     text: \\"default text\\",
     link: \\"https://builder.io/\\",
     openLinkInNewTab: false,
     onClick: () => {},
+    ...props,
   };
   return (
     <div>
@@ -22302,7 +22302,6 @@ import * as React from \\"react\\";
 import { useState } from \\"react\\";
 
 function MyComponent(props) {
-  props = { ...props };
   const [focus, setFocus] = useState(() => true);
 
   return (
@@ -22702,7 +22701,6 @@ import * as React from \\"react\\";
 import { useState } from \\"react\\";
 
 function MyComponent(props) {
-  props = { ...props };
   const [focus, setFocus] = useState(() => true);
 
   return (
diff --git a/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap b/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap
index b7542d8ba7..2a32cd1a63 100644
--- a/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap
@@ -562,10 +562,10 @@ import { useState } from \\"preact/hooks\\";
 
 function ContentSlotJsxCode(props) {
   props = {
-    ...props,
     content: \\"\\",
     slotReference: undefined,
     slotContent: undefined,
+    ...props,
   };
   const [name, setName] = useState(() => \\"king\\");
 
@@ -2105,13 +2105,13 @@ import { h, Fragment } from \\"preact\\";
 
 function Button(props) {
   props = {
-    ...props,
     text: \\"default text\\",
     link: \\"https://builder.io/\\",
     openLinkInNewTab: false,
     onClick: () => {
       console.log(\\"hi\\");
     },
+    ...props,
   };
   return (
     <div>
@@ -2147,11 +2147,11 @@ import { h, Fragment } from \\"preact\\";
 
 function Button(props) {
   props = {
-    ...props,
     text: \\"default text\\",
     link: \\"https://builder.io/\\",
     openLinkInNewTab: false,
     onClick: () => {},
+    ...props,
   };
   return (
     <div>
@@ -4385,10 +4385,10 @@ import type { JSX } from \\"../../../../jsx-runtime\\";
 
 function ContentSlotJsxCode(props: Props) {
   props = {
-    ...props,
     content: \\"\\",
     slotReference: undefined,
     slotContent: undefined,
+    ...props,
   };
   const [name, setName] = useState(() => \\"king\\");
 
@@ -6162,13 +6162,13 @@ export interface ButtonProps {
 
 function Button(props: ButtonProps) {
   props = {
-    ...props,
     text: \\"default text\\",
     link: \\"https://builder.io/\\",
     openLinkInNewTab: false,
     onClick: () => {
       console.log(\\"hi\\");
     },
+    ...props,
   };
   return (
     <div>
@@ -6212,11 +6212,11 @@ export interface ButtonProps {
 
 function Button(props: ButtonProps) {
   props = {
-    ...props,
     text: \\"default text\\",
     link: \\"https://builder.io/\\",
     openLinkInNewTab: false,
     onClick: () => {},
+    ...props,
   };
   return (
     <div>
@@ -8054,7 +8054,6 @@ import { h, Fragment } from \\"preact\\";
 import { useState } from \\"preact/hooks\\";
 
 function MyComponent(props) {
-  props = { ...props };
   const [focus, setFocus] = useState(() => true);
 
   return (
@@ -8455,7 +8454,6 @@ import { h, Fragment } from \\"preact\\";
 import { useState } from \\"preact/hooks\\";
 
 function MyComponent(props: any) {
-  props = { ...props };
   const [focus, setFocus] = useState(() => true);
 
   return (
diff --git a/packages/core/src/__tests__/__snapshots__/react-native.test.ts.snap b/packages/core/src/__tests__/__snapshots__/react-native.test.ts.snap
index d70c10478a..29c3327d13 100644
--- a/packages/core/src/__tests__/__snapshots__/react-native.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/react-native.test.ts.snap
@@ -825,10 +825,10 @@ import { useState } from \\"react\\";
 
 function ContentSlotJsxCode(props) {
   props = {
-    ...props,
     content: \\"\\",
     slotReference: undefined,
     slotContent: undefined,
+    ...props,
   };
   const [name, setName] = useState(() => \\"king\\");
 
@@ -2844,13 +2844,13 @@ import {
 
 function Button(props) {
   props = {
-    ...props,
     text: \\"default text\\",
     link: \\"https://builder.io/\\",
     openLinkInNewTab: false,
     onClick: () => {
       console.log(\\"hi\\");
     },
+    ...props,
   };
   return (
     <View>
@@ -2897,11 +2897,11 @@ import {
 
 function Button(props) {
   props = {
-    ...props,
     text: \\"default text\\",
     link: \\"https://builder.io/\\",
     openLinkInNewTab: false,
     onClick: () => {},
+    ...props,
   };
   return (
     <View>
@@ -6181,10 +6181,10 @@ import type { JSX } from \\"../../../../jsx-runtime\\";
 
 function ContentSlotJsxCode(props: Props) {
   props = {
-    ...props,
     content: \\"\\",
     slotReference: undefined,
     slotContent: undefined,
+    ...props,
   };
   const [name, setName] = useState(() => \\"king\\");
 
@@ -8434,13 +8434,13 @@ export interface ButtonProps {
 
 function Button(props: ButtonProps) {
   props = {
-    ...props,
     text: \\"default text\\",
     link: \\"https://builder.io/\\",
     openLinkInNewTab: false,
     onClick: () => {
       console.log(\\"hi\\");
     },
+    ...props,
   };
   return (
     <View>
@@ -8495,11 +8495,11 @@ export interface ButtonProps {
 
 function Button(props: ButtonProps) {
   props = {
-    ...props,
     text: \\"default text\\",
     link: \\"https://builder.io/\\",
     openLinkInNewTab: false,
     onClick: () => {},
+    ...props,
   };
   return (
     <View>
@@ -11262,7 +11262,6 @@ import {
 import { useState } from \\"react\\";
 
 function MyComponent(props) {
-  props = { ...props };
   const [focus, setFocus] = useState(() => true);
 
   return <TextInput />;
@@ -11854,7 +11853,6 @@ import {
 import { useState } from \\"react\\";
 
 function MyComponent(props: any) {
-  props = { ...props };
   const [focus, setFocus] = useState(() => true);
 
   return <TextInput />;
diff --git a/packages/core/src/__tests__/__snapshots__/react-state-builder.test.ts.snap b/packages/core/src/__tests__/__snapshots__/react-state-builder.test.ts.snap
index a1c1dbf6ee..8c2f9c510f 100644
--- a/packages/core/src/__tests__/__snapshots__/react-state-builder.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/react-state-builder.test.ts.snap
@@ -566,10 +566,10 @@ import * as React from \\"react\\";
 
 function ContentSlotJsxCode(props) {
   props = {
-    ...props,
     content: \\"\\",
     slotReference: undefined,
     slotContent: undefined,
+    ...props,
   };
   const state = useBuilderState({
     name: \\"king\\",
@@ -2124,13 +2124,13 @@ import * as React from \\"react\\";
 
 function Button(props) {
   props = {
-    ...props,
     text: \\"default text\\",
     link: \\"https://builder.io/\\",
     openLinkInNewTab: false,
     onClick: () => {
       console.log(\\"hi\\");
     },
+    ...props,
   };
   const state = useBuilderState({});
 
@@ -2168,11 +2168,11 @@ import * as React from \\"react\\";
 
 function Button(props) {
   props = {
-    ...props,
     text: \\"default text\\",
     link: \\"https://builder.io/\\",
     openLinkInNewTab: false,
     onClick: () => {},
+    ...props,
   };
   const state = useBuilderState({});
 
@@ -4374,10 +4374,10 @@ import type { JSX } from \\"../../../../jsx-runtime\\";
 
 function ContentSlotJsxCode(props: Props) {
   props = {
-    ...props,
     content: \\"\\",
     slotReference: undefined,
     slotContent: undefined,
+    ...props,
   };
   const state = useBuilderState({
     name: \\"king\\",
@@ -6164,13 +6164,13 @@ export interface ButtonProps {
 
 function Button(props: ButtonProps) {
   props = {
-    ...props,
     text: \\"default text\\",
     link: \\"https://builder.io/\\",
     openLinkInNewTab: false,
     onClick: () => {
       console.log(\\"hi\\");
     },
+    ...props,
   };
   const state = useBuilderState({});
 
@@ -6216,11 +6216,11 @@ export interface ButtonProps {
 
 function Button(props: ButtonProps) {
   props = {
-    ...props,
     text: \\"default text\\",
     link: \\"https://builder.io/\\",
     openLinkInNewTab: false,
     onClick: () => {},
+    ...props,
   };
   const state = useBuilderState({});
 
@@ -8018,7 +8018,6 @@ exports[`React - stateType: builder > svelte > Javascript Test > classDirective
 import * as React from \\"react\\";
 
 function MyComponent(props) {
-  props = { ...props };
   const state = useBuilderState({ focus: true });
 
   return (
@@ -8415,7 +8414,6 @@ exports[`React - stateType: builder > svelte > Typescript Test > classDirective
 import * as React from \\"react\\";
 
 function MyComponent(props: any) {
-  props = { ...props };
   const state = useBuilderState({ focus: true });
 
   return (
diff --git a/packages/core/src/__tests__/__snapshots__/react-state-mobx.test.ts.snap b/packages/core/src/__tests__/__snapshots__/react-state-mobx.test.ts.snap
index f1a0b430a7..e054368c62 100644
--- a/packages/core/src/__tests__/__snapshots__/react-state-mobx.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/react-state-mobx.test.ts.snap
@@ -591,10 +591,10 @@ import { useLocalObservable, observer } from \\"mobx-react-lite\\";
 
 function ContentSlotJsxCode(props) {
   props = {
-    ...props,
     content: \\"\\",
     slotReference: undefined,
     slotContent: undefined,
+    ...props,
   };
   const state = useLocalObservable(() => ({
     name: \\"king\\",
@@ -2177,13 +2177,13 @@ import * as React from \\"react\\";
 
 function Button(props) {
   props = {
-    ...props,
     text: \\"default text\\",
     link: \\"https://builder.io/\\",
     openLinkInNewTab: false,
     onClick: () => {
       console.log(\\"hi\\");
     },
+    ...props,
   };
   return (
     <div>
@@ -2220,11 +2220,11 @@ import * as React from \\"react\\";
 
 function Button(props) {
   props = {
-    ...props,
     text: \\"default text\\",
     link: \\"https://builder.io/\\",
     openLinkInNewTab: false,
     onClick: () => {},
+    ...props,
   };
   return (
     <div>
@@ -4444,10 +4444,10 @@ import type { JSX } from \\"../../../../jsx-runtime\\";
 
 function ContentSlotJsxCode(props: Props) {
   props = {
-    ...props,
     content: \\"\\",
     slotReference: undefined,
     slotContent: undefined,
+    ...props,
   };
   const state = useLocalObservable(() => ({
     name: \\"king\\",
@@ -6251,13 +6251,13 @@ export interface ButtonProps {
 
 function Button(props: ButtonProps) {
   props = {
-    ...props,
     text: \\"default text\\",
     link: \\"https://builder.io/\\",
     openLinkInNewTab: false,
     onClick: () => {
       console.log(\\"hi\\");
     },
+    ...props,
   };
   return (
     <div>
@@ -6302,11 +6302,11 @@ export interface ButtonProps {
 
 function Button(props: ButtonProps) {
   props = {
-    ...props,
     text: \\"default text\\",
     link: \\"https://builder.io/\\",
     openLinkInNewTab: false,
     onClick: () => {},
+    ...props,
   };
   return (
     <div>
@@ -8103,7 +8103,6 @@ import * as React from \\"react\\";
 import { useLocalObservable, observer } from \\"mobx-react-lite\\";
 
 function MyComponent(props) {
-  props = { ...props };
   const state = useLocalObservable(() => ({ focus: true }));
 
   return (
@@ -8523,7 +8522,6 @@ import * as React from \\"react\\";
 import { useLocalObservable, observer } from \\"mobx-react-lite\\";
 
 function MyComponent(props: any) {
-  props = { ...props };
   const state = useLocalObservable(() => ({ focus: true }));
 
   return (
diff --git a/packages/core/src/__tests__/__snapshots__/react-state-solid.test.ts.snap b/packages/core/src/__tests__/__snapshots__/react-state-solid.test.ts.snap
index e74d7aa586..cf5e853f93 100644
--- a/packages/core/src/__tests__/__snapshots__/react-state-solid.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/react-state-solid.test.ts.snap
@@ -571,10 +571,10 @@ import { useMutable } from \\"react-solid-state\\";
 
 function ContentSlotJsxCode(props) {
   props = {
-    ...props,
     content: \\"\\",
     slotReference: undefined,
     slotContent: undefined,
+    ...props,
   };
   const state = useMutable({
     name: \\"king\\",
@@ -2109,13 +2109,13 @@ import * as React from \\"react\\";
 
 function Button(props) {
   props = {
-    ...props,
     text: \\"default text\\",
     link: \\"https://builder.io/\\",
     openLinkInNewTab: false,
     onClick: () => {
       console.log(\\"hi\\");
     },
+    ...props,
   };
   return (
     <div>
@@ -2151,11 +2151,11 @@ import * as React from \\"react\\";
 
 function Button(props) {
   props = {
-    ...props,
     text: \\"default text\\",
     link: \\"https://builder.io/\\",
     openLinkInNewTab: false,
     onClick: () => {},
+    ...props,
   };
   return (
     <div>
@@ -4299,10 +4299,10 @@ import type { JSX } from \\"../../../../jsx-runtime\\";
 
 function ContentSlotJsxCode(props: Props) {
   props = {
-    ...props,
     content: \\"\\",
     slotReference: undefined,
     slotContent: undefined,
+    ...props,
   };
   const state = useMutable({
     name: \\"king\\",
@@ -6058,13 +6058,13 @@ export interface ButtonProps {
 
 function Button(props: ButtonProps) {
   props = {
-    ...props,
     text: \\"default text\\",
     link: \\"https://builder.io/\\",
     openLinkInNewTab: false,
     onClick: () => {
       console.log(\\"hi\\");
     },
+    ...props,
   };
   return (
     <div>
@@ -6108,11 +6108,11 @@ export interface ButtonProps {
 
 function Button(props: ButtonProps) {
   props = {
-    ...props,
     text: \\"default text\\",
     link: \\"https://builder.io/\\",
     openLinkInNewTab: false,
     onClick: () => {},
+    ...props,
   };
   return (
     <div>
@@ -7851,7 +7851,6 @@ import * as React from \\"react\\";
 import { useMutable } from \\"react-solid-state\\";
 
 function MyComponent(props) {
-  props = { ...props };
   const state = useMutable({ focus: true });
 
   return (
@@ -8254,7 +8253,6 @@ import * as React from \\"react\\";
 import { useMutable } from \\"react-solid-state\\";
 
 function MyComponent(props: any) {
-  props = { ...props };
   const state = useMutable({ focus: true });
 
   return (
diff --git a/packages/core/src/__tests__/__snapshots__/react-state-valtio.test.ts.snap b/packages/core/src/__tests__/__snapshots__/react-state-valtio.test.ts.snap
index 412c03567a..1e1bb5a820 100644
--- a/packages/core/src/__tests__/__snapshots__/react-state-valtio.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/react-state-valtio.test.ts.snap
@@ -571,10 +571,10 @@ import { useLocalProxy } from \\"valtio/utils\\";
 
 function ContentSlotJsxCode(props) {
   props = {
-    ...props,
     content: \\"\\",
     slotReference: undefined,
     slotContent: undefined,
+    ...props,
   };
   const state = useLocalProxy({
     name: \\"king\\",
@@ -2112,13 +2112,13 @@ import * as React from \\"react\\";
 
 function Button(props) {
   props = {
-    ...props,
     text: \\"default text\\",
     link: \\"https://builder.io/\\",
     openLinkInNewTab: false,
     onClick: () => {
       console.log(\\"hi\\");
     },
+    ...props,
   };
   return (
     <div>
@@ -2154,11 +2154,11 @@ import * as React from \\"react\\";
 
 function Button(props) {
   props = {
-    ...props,
     text: \\"default text\\",
     link: \\"https://builder.io/\\",
     openLinkInNewTab: false,
     onClick: () => {},
+    ...props,
   };
   return (
     <div>
@@ -4302,10 +4302,10 @@ import type { JSX } from \\"../../../../jsx-runtime\\";
 
 function ContentSlotJsxCode(props: Props) {
   props = {
-    ...props,
     content: \\"\\",
     slotReference: undefined,
     slotContent: undefined,
+    ...props,
   };
   const state = useLocalProxy({
     name: \\"king\\",
@@ -6064,13 +6064,13 @@ export interface ButtonProps {
 
 function Button(props: ButtonProps) {
   props = {
-    ...props,
     text: \\"default text\\",
     link: \\"https://builder.io/\\",
     openLinkInNewTab: false,
     onClick: () => {
       console.log(\\"hi\\");
     },
+    ...props,
   };
   return (
     <div>
@@ -6114,11 +6114,11 @@ export interface ButtonProps {
 
 function Button(props: ButtonProps) {
   props = {
-    ...props,
     text: \\"default text\\",
     link: \\"https://builder.io/\\",
     openLinkInNewTab: false,
     onClick: () => {},
+    ...props,
   };
   return (
     <div>
@@ -7857,7 +7857,6 @@ import * as React from \\"react\\";
 import { useLocalProxy } from \\"valtio/utils\\";
 
 function MyComponent(props) {
-  props = { ...props };
   const state = useLocalProxy({ focus: true });
 
   return (
@@ -8260,7 +8259,6 @@ import * as React from \\"react\\";
 import { useLocalProxy } from \\"valtio/utils\\";
 
 function MyComponent(props: any) {
-  props = { ...props };
   const state = useLocalProxy({ focus: true });
 
   return (
diff --git a/packages/core/src/__tests__/__snapshots__/react-state-variables.test.ts.snap b/packages/core/src/__tests__/__snapshots__/react-state-variables.test.ts.snap
index 0d43b091cb..db2d4ee867 100644
--- a/packages/core/src/__tests__/__snapshots__/react-state-variables.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/react-state-variables.test.ts.snap
@@ -1300,13 +1300,13 @@ import * as React from \\"react\\";
 
 function Button(props) {
   props = {
-    ...props,
     text: \\"default text\\",
     link: \\"https://builder.io/\\",
     openLinkInNewTab: false,
     onClick: () => {
       console.log(\\"hi\\");
     },
+    ...props,
   };
   return (
     <div>
@@ -1342,11 +1342,11 @@ import * as React from \\"react\\";
 
 function Button(props) {
   props = {
-    ...props,
     text: \\"default text\\",
     link: \\"https://builder.io/\\",
     openLinkInNewTab: false,
     onClick: () => {},
+    ...props,
   };
   return (
     <div>
@@ -3992,13 +3992,13 @@ export interface ButtonProps {
 
 function Button(props: ButtonProps) {
   props = {
-    ...props,
     text: \\"default text\\",
     link: \\"https://builder.io/\\",
     openLinkInNewTab: false,
     onClick: () => {
       console.log(\\"hi\\");
     },
+    ...props,
   };
   return (
     <div>
@@ -4042,11 +4042,11 @@ export interface ButtonProps {
 
 function Button(props: ButtonProps) {
   props = {
-    ...props,
     text: \\"default text\\",
     link: \\"https://builder.io/\\",
     openLinkInNewTab: false,
     onClick: () => {},
+    ...props,
   };
   return (
     <div>
@@ -5390,7 +5390,6 @@ exports[`React - stateType: variables > svelte > Javascript Test > classDirectiv
 import * as React from \\"react\\";
 
 function MyComponent(props) {
-  props = { ...props };
   const focus = true;
 
   return (
@@ -5761,7 +5760,6 @@ exports[`React - stateType: variables > svelte > Typescript Test > classDirectiv
 import * as React from \\"react\\";
 
 function MyComponent(props: any) {
-  props = { ...props };
   const focus = true;
 
   return (
diff --git a/packages/core/src/__tests__/__snapshots__/react.test.ts.snap b/packages/core/src/__tests__/__snapshots__/react.test.ts.snap
index 85d2b55a70..8c02e09a49 100644
--- a/packages/core/src/__tests__/__snapshots__/react.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/react.test.ts.snap
@@ -557,10 +557,10 @@ import { useState } from \\"react\\";
 
 function ContentSlotJsxCode(props) {
   props = {
-    ...props,
     content: \\"\\",
     slotReference: undefined,
     slotContent: undefined,
+    ...props,
   };
   const [name, setName] = useState(() => \\"king\\");
 
@@ -2088,13 +2088,13 @@ import * as React from \\"react\\";
 
 function Button(props) {
   props = {
-    ...props,
     text: \\"default text\\",
     link: \\"https://builder.io/\\",
     openLinkInNewTab: false,
     onClick: () => {
       console.log(\\"hi\\");
     },
+    ...props,
   };
   return (
     <div>
@@ -2130,11 +2130,11 @@ import * as React from \\"react\\";
 
 function Button(props) {
   props = {
-    ...props,
     text: \\"default text\\",
     link: \\"https://builder.io/\\",
     openLinkInNewTab: false,
     onClick: () => {},
+    ...props,
   };
   return (
     <div>
@@ -4275,10 +4275,10 @@ import type { JSX } from \\"../../../../jsx-runtime\\";
 
 function ContentSlotJsxCode(props: Props) {
   props = {
-    ...props,
     content: \\"\\",
     slotReference: undefined,
     slotContent: undefined,
+    ...props,
   };
   const [name, setName] = useState(() => \\"king\\");
 
@@ -6040,13 +6040,13 @@ export interface ButtonProps {
 
 function Button(props: ButtonProps) {
   props = {
-    ...props,
     text: \\"default text\\",
     link: \\"https://builder.io/\\",
     openLinkInNewTab: false,
     onClick: () => {
       console.log(\\"hi\\");
     },
+    ...props,
   };
   return (
     <div>
@@ -6090,11 +6090,11 @@ export interface ButtonProps {
 
 function Button(props: ButtonProps) {
   props = {
-    ...props,
     text: \\"default text\\",
     link: \\"https://builder.io/\\",
     openLinkInNewTab: false,
     onClick: () => {},
+    ...props,
   };
   return (
     <div>
@@ -8040,7 +8040,6 @@ import * as React from \\"react\\";
 import { useState } from \\"react\\";
 
 function MyComponent(props) {
-  props = { ...props };
   const [focus, setFocus] = useState(() => true);
 
   return (
@@ -8439,7 +8438,6 @@ import * as React from \\"react\\";
 import { useState } from \\"react\\";
 
 function MyComponent(props: any) {
-  props = { ...props };
   const [focus, setFocus] = useState(() => true);
 
   return (
@@ -8730,97 +8728,3 @@ function MyComponent(props: any) {
 export default MyComponent;
 "
 `;
-
-exports[`React - test > jsx > Javascript Test > defaultProps 1`] = `
-"\\"use client\\";
-import * as React from \\"react\\";
-
-function Button(props) {
-  props = {
-    ...props,
-    text: \\"default text\\",
-    link: \\"https://builder.io/\\",
-    openLinkInNewTab: false,
-    onClick: () => {
-      console.log(\\"hi\\");
-    },
-  };
-  return (
-    <div>
-      {props.link ? (
-        <a
-          {...props.attributes}
-          href={props.link}
-          target={props.openLinkInNewTab ? \\"_blank\\" : undefined}
-        >
-          {props.text}
-        </a>
-      ) : null}
-      {!props.link ? (
-        <button
-          type=\\"button\\"
-          {...props.attributes}
-          onClick={(event) => props.onClick()}
-        >
-          {props.buttonText}
-        </button>
-      ) : null}
-    </div>
-  );
-}
-
-export default Button;
-"
-`;
-
-exports[`React - test > jsx > Typescript Test > defaultProps 1`] = `
-"\\"use client\\";
-import * as React from \\"react\\";
-
-export interface ButtonProps {
-  attributes?: any;
-  text?: string;
-  buttonText?: string; // no default value
-
-  link?: string;
-  openLinkInNewTab?: boolean;
-  onClick?: () => void;
-}
-
-function Button(props: ButtonProps) {
-  props = {
-    ...props,
-    text: \\"default text\\",
-    link: \\"https://builder.io/\\",
-    openLinkInNewTab: false,
-    onClick: () => {
-      console.log(\\"hi\\");
-    },
-  };
-  return (
-    <div>
-      {props.link ? (
-        <a
-          {...props.attributes}
-          href={props.link}
-          target={props.openLinkInNewTab ? \\"_blank\\" : undefined}
-        >
-          {props.text}
-        </a>
-      ) : null}
-      {!props.link ? (
-        <button
-          type=\\"button\\"
-          {...props.attributes}
-          onClick={(event) => props.onClick()}
-        >
-          {props.buttonText}
-        </button>
-      ) : null}
-    </div>
-  );
-}
-
-export default Button;
-"
-`;
diff --git a/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap b/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap
index a159854126..6df6c8d2a5 100644
--- a/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap
@@ -525,10 +525,10 @@ import { useState } from \\"react\\";
 
 function ContentSlotJsxCode(props) {
   props = {
-    ...props,
     content: \\"\\",
     slotReference: undefined,
     slotContent: undefined,
+    ...props,
   };
   const [name, setName] = useState(() => \\"king\\");
 
@@ -2115,13 +2115,13 @@ import * as React from \\"react\\";
 
 function Button(props) {
   props = {
-    ...props,
     text: \\"default text\\",
     link: \\"https://builder.io/\\",
     openLinkInNewTab: false,
     onClick: () => {
       console.log(\\"hi\\");
     },
+    ...props,
   };
   return (
     <div>
@@ -2157,11 +2157,11 @@ import * as React from \\"react\\";
 
 function Button(props) {
   props = {
-    ...props,
     text: \\"default text\\",
     link: \\"https://builder.io/\\",
     openLinkInNewTab: false,
     onClick: () => {},
+    ...props,
   };
   return (
     <div>
@@ -4104,10 +4104,10 @@ import type { JSX } from \\"../../../../jsx-runtime\\";
 
 function ContentSlotJsxCode(props: Props) {
   props = {
-    ...props,
     content: \\"\\",
     slotReference: undefined,
     slotContent: undefined,
+    ...props,
   };
   const [name, setName] = useState(() => \\"king\\");
 
@@ -5928,13 +5928,13 @@ export interface ButtonProps {
 
 function Button(props: ButtonProps) {
   props = {
-    ...props,
     text: \\"default text\\",
     link: \\"https://builder.io/\\",
     openLinkInNewTab: false,
     onClick: () => {
       console.log(\\"hi\\");
     },
+    ...props,
   };
   return (
     <div>
@@ -5978,11 +5978,11 @@ export interface ButtonProps {
 
 function Button(props: ButtonProps) {
   props = {
-    ...props,
     text: \\"default text\\",
     link: \\"https://builder.io/\\",
     openLinkInNewTab: false,
     onClick: () => {},
+    ...props,
   };
   return (
     <div>
@@ -7557,7 +7557,6 @@ import * as React from \\"react\\";
 import { useState } from \\"react\\";
 
 function MyComponent(props) {
-  props = { ...props };
   const [focus, setFocus] = useState(() => true);
 
   return (
@@ -7966,7 +7965,6 @@ import * as React from \\"react\\";
 import { useState } from \\"react\\";
 
 function MyComponent(props: any) {
-  props = { ...props };
   const [focus, setFocus] = useState(() => true);
 
   return (
diff --git a/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap b/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap
index b9aa7e2401..28bec618de 100644
--- a/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap
@@ -5546,14 +5546,13 @@ exports[`Svelte > jsx > Typescript Test > defaultProps 1`] = `
 </script>
 
 <script lang=\\"ts\\">
-  export let link: ButtonProps[\\"link\\"] = (undefined = \\"https://builder.io/\\");
+  export let link: ButtonProps[\\"link\\"] = \\"https://builder.io/\\";
   export let attributes: ButtonProps[\\"attributes\\"] = undefined;
-  export let openLinkInNewTab: ButtonProps[\\"openLinkInNewTab\\"] = (undefined =
-    false);
-  export let text: ButtonProps[\\"text\\"] = (undefined = \\"default text\\");
-  export let onClick: ButtonProps[\\"onClick\\"] = (undefined = () => {
+  export let openLinkInNewTab: ButtonProps[\\"openLinkInNewTab\\"] = false;
+  export let text: ButtonProps[\\"text\\"] = \\"default text\\";
+  export let onClick: ButtonProps[\\"onClick\\"] = () => {
     console.log(\\"hi\\");
-  });
+  };
   export let buttonText: ButtonProps[\\"buttonText\\"] = undefined;
 </script>
 
@@ -5589,11 +5588,10 @@ exports[`Svelte > jsx > Typescript Test > defaultPropsOutsideComponent 1`] = `
 </script>
 
 <script lang=\\"ts\\">
-  export let link: ButtonProps[\\"link\\"] = (undefined = \\"https://builder.io/\\");
+  export let link: ButtonProps[\\"link\\"] = \\"https://builder.io/\\";
   export let attributes: ButtonProps[\\"attributes\\"] = undefined;
-  export let openLinkInNewTab: ButtonProps[\\"openLinkInNewTab\\"] = (undefined =
-    false);
-  export let text: ButtonProps[\\"text\\"] = (undefined = \\"default text\\");
+  export let openLinkInNewTab: ButtonProps[\\"openLinkInNewTab\\"] = false;
+  export let text: ButtonProps[\\"text\\"] = \\"default text\\";
   export let onClick: ButtonProps[\\"onClick\\"] = () => {};
 </script>
 
diff --git a/packages/core/src/__tests__/__snapshots__/taro.test.ts.snap b/packages/core/src/__tests__/__snapshots__/taro.test.ts.snap
index 2dda268559..8126b532fe 100644
--- a/packages/core/src/__tests__/__snapshots__/taro.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/taro.test.ts.snap
@@ -572,10 +572,10 @@ import { View, Text } from \\"@tarojs/components\\";
 
 function ContentSlotJsxCode(props) {
   props = {
-    ...props,
     content: \\"\\",
     slotReference: undefined,
     slotContent: undefined,
+    ...props,
   };
   const [name, setName] = useState(() => \\"king\\");
 
@@ -2110,13 +2110,13 @@ import { View, Text, Button } from \\"@tarojs/components\\";
 
 function Button(props) {
   props = {
-    ...props,
     text: \\"default text\\",
     link: \\"https://builder.io/\\",
     openLinkInNewTab: false,
     onClick: () => {
       console.log(\\"hi\\");
     },
+    ...props,
   };
   return (
     <View>
@@ -2152,11 +2152,11 @@ import { View, Text, Button } from \\"@tarojs/components\\";
 
 function Button(props) {
   props = {
-    ...props,
     text: \\"default text\\",
     link: \\"https://builder.io/\\",
     openLinkInNewTab: false,
     onClick: () => {},
+    ...props,
   };
   return (
     <View>
@@ -4371,10 +4371,10 @@ import { View, Text } from \\"@tarojs/components\\";
 
 function ContentSlotJsxCode(props: Props) {
   props = {
-    ...props,
     content: \\"\\",
     slotReference: undefined,
     slotContent: undefined,
+    ...props,
   };
   const [name, setName] = useState(() => \\"king\\");
 
@@ -6154,13 +6154,13 @@ import { View, Text, Button } from \\"@tarojs/components\\";
 
 function Button(props: ButtonProps) {
   props = {
-    ...props,
     text: \\"default text\\",
     link: \\"https://builder.io/\\",
     openLinkInNewTab: false,
     onClick: () => {
       console.log(\\"hi\\");
     },
+    ...props,
   };
   return (
     <View>
@@ -6205,11 +6205,11 @@ import { View, Text, Button } from \\"@tarojs/components\\";
 
 function Button(props: ButtonProps) {
   props = {
-    ...props,
     text: \\"default text\\",
     link: \\"https://builder.io/\\",
     openLinkInNewTab: false,
     onClick: () => {},
+    ...props,
   };
   return (
     <View>
@@ -8024,7 +8024,6 @@ import { useState } from \\"react\\";
 import { Input } from \\"@tarojs/components\\";
 
 function MyComponent(props) {
-  props = { ...props };
   const [focus, setFocus] = useState(() => true);
 
   return <Input />;
@@ -8431,7 +8430,6 @@ import { useState } from \\"react\\";
 import { Input } from \\"@tarojs/components\\";
 
 function MyComponent(props: any) {
-  props = { ...props };
   const [focus, setFocus] = useState(() => true);
 
   return <Input />;
diff --git a/packages/core/src/__tests__/react.test.ts b/packages/core/src/__tests__/react.test.ts
index 864acabe65..f296802077 100644
--- a/packages/core/src/__tests__/react.test.ts
+++ b/packages/core/src/__tests__/react.test.ts
@@ -31,7 +31,7 @@ describe('React - stateType: useState', () => {
   });
 });
 
-describe('React - test', () => {
+/*describe('React - test', () => {
   runTestsForTarget({
     options: {
       stateType: 'useState',
@@ -41,4 +41,4 @@ describe('React - test', () => {
     only: ['defaultProps'],
     logOutput: true,
   });
-});
+});*/
diff --git a/packages/core/src/generators/svelte/svelte.ts b/packages/core/src/generators/svelte/svelte.ts
index 4afeeb6fb0..b2b846eab5 100644
--- a/packages/core/src/generators/svelte/svelte.ts
+++ b/packages/core/src/generators/svelte/svelte.ts
@@ -324,12 +324,10 @@ export const componentToSvelte: TranspilerGenerator<ToSvelteOptions> =
             propDeclaration += `: ${json.propsTypeRef.split(' |')[0]}['${name}']`;
           }
 
-          if (json.props?.[name]?.optional) {
-            propDeclaration += `= undefined`;
-          }
-
           if (json.defaultProps && json.defaultProps.hasOwnProperty(name)) {
             propDeclaration += `=${json.defaultProps[name]?.code}`;
+          } else if (json.props?.[name]?.optional) {
+            propDeclaration += `= undefined`;
           }
 
           propDeclaration += ';';

From ae011cb59dfcabc0633815b68b783a1e622a4b8a Mon Sep 17 00:00:00 2001
From: Nicolas Merget <nicolas.merget@deutschebahn.com>
Date: Thu, 16 Jan 2025 10:57:03 +0100
Subject: [PATCH 05/20] fix: issue with e2e for stencil

---
 .../{ => default-props}/default-props.lite.tsx   | 16 ++++------------
 .../src/components/default-props/types.ts        |  8 ++++++++
 e2e/e2e-app/src/homepage.lite.tsx                |  2 +-
 3 files changed, 13 insertions(+), 13 deletions(-)
 rename e2e/e2e-app/src/components/{ => default-props}/default-props.lite.tsx (50%)
 create mode 100644 e2e/e2e-app/src/components/default-props/types.ts

diff --git a/e2e/e2e-app/src/components/default-props.lite.tsx b/e2e/e2e-app/src/components/default-props/default-props.lite.tsx
similarity index 50%
rename from e2e/e2e-app/src/components/default-props.lite.tsx
rename to e2e/e2e-app/src/components/default-props/default-props.lite.tsx
index 9e9c31d58e..7861e1064c 100644
--- a/e2e/e2e-app/src/components/default-props.lite.tsx
+++ b/e2e/e2e-app/src/components/default-props/default-props.lite.tsx
@@ -1,18 +1,10 @@
 import { useDefaultProps, useStore } from '@builder.io/mitosis';
+import { DefaultPropsState, DefaultPropsType } from './types';
 
-type Props = {
-  foo?: string;
-  bar?: string;
-};
+useDefaultProps<DefaultPropsType>({ foo: 'abc', bar: 'foo' });
 
-type State = {
-  getProps: () => string;
-};
-
-useDefaultProps<Props>({ foo: 'abc', bar: 'foo' });
-
-export default function DefaultProps(props: Props) {
-  const state = useStore<State>({
+export default function DefaultProps(props: DefaultPropsType) {
+  const state = useStore<DefaultPropsState>({
     getProps: () => {
       return JSON.stringify({ foo: props.foo, bar: props.bar });
     },
diff --git a/e2e/e2e-app/src/components/default-props/types.ts b/e2e/e2e-app/src/components/default-props/types.ts
new file mode 100644
index 0000000000..805250655a
--- /dev/null
+++ b/e2e/e2e-app/src/components/default-props/types.ts
@@ -0,0 +1,8 @@
+export type DefaultPropsType = {
+    foo?: string;
+    bar?: string;
+};
+
+export type DefaultPropsState = {
+    getProps: () => string;
+};
\ No newline at end of file
diff --git a/e2e/e2e-app/src/homepage.lite.tsx b/e2e/e2e-app/src/homepage.lite.tsx
index 633073447f..163b93d582 100644
--- a/e2e/e2e-app/src/homepage.lite.tsx
+++ b/e2e/e2e-app/src/homepage.lite.tsx
@@ -1,7 +1,7 @@
 import { For, onMount, Show, useStore } from '@builder.io/mitosis';
 import { COMPONENT_PATHS } from './component-paths';
 import ComponentWithTypes from './components/component-with-types.lite';
-import DefaultProps from './components/default-props.lite';
+import DefaultProps from './components/default-props/default-props.lite';
 import DisabledInput from './components/disabled-input/disabled-input.lite';
 import NestedParent from './components/nested/nested-parent.lite';
 import OneComponent from './components/one-component.lite';

From af767e27b43a1b20e4b620306b374d72ecf07fad Mon Sep 17 00:00:00 2001
From: Nicolas Merget <nicolas.merget@deutschebahn.com>
Date: Thu, 16 Jan 2025 10:59:45 +0100
Subject: [PATCH 06/20] chore: run fmt

---
 e2e/e2e-app/src/components/default-props/types.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/e2e/e2e-app/src/components/default-props/types.ts b/e2e/e2e-app/src/components/default-props/types.ts
index 805250655a..7dd9ff630c 100644
--- a/e2e/e2e-app/src/components/default-props/types.ts
+++ b/e2e/e2e-app/src/components/default-props/types.ts
@@ -1,8 +1,8 @@
 export type DefaultPropsType = {
-    foo?: string;
-    bar?: string;
+  foo?: string;
+  bar?: string;
 };
 
 export type DefaultPropsState = {
-    getProps: () => string;
-};
\ No newline at end of file
+  getProps: () => string;
+};

From d976239340550cc0196c21a6637ceaf39638a5c7 Mon Sep 17 00:00:00 2001
From: Nicolas Merget <nicolas.merget@deutschebahn.com>
Date: Thu, 16 Jan 2025 13:23:37 +0100
Subject: [PATCH 07/20] fix: issue with vue default props

---
 .../src/components/default-props/default-props.lite.tsx   | 7 +++----
 e2e/e2e-app/src/components/default-props/types.ts         | 8 --------
 packages/core/src/generators/vue/compositionApi.ts        | 2 +-
 3 files changed, 4 insertions(+), 13 deletions(-)
 delete mode 100644 e2e/e2e-app/src/components/default-props/types.ts

diff --git a/e2e/e2e-app/src/components/default-props/default-props.lite.tsx b/e2e/e2e-app/src/components/default-props/default-props.lite.tsx
index 7861e1064c..d894f7d930 100644
--- a/e2e/e2e-app/src/components/default-props/default-props.lite.tsx
+++ b/e2e/e2e-app/src/components/default-props/default-props.lite.tsx
@@ -1,10 +1,9 @@
 import { useDefaultProps, useStore } from '@builder.io/mitosis';
-import { DefaultPropsState, DefaultPropsType } from './types';
 
-useDefaultProps<DefaultPropsType>({ foo: 'abc', bar: 'foo' });
+useDefaultProps({ foo: 'abc', bar: 'foo' });
 
-export default function DefaultProps(props: DefaultPropsType) {
-  const state = useStore<DefaultPropsState>({
+export default function DefaultProps(props: any) {
+  const state = useStore({
     getProps: () => {
       return JSON.stringify({ foo: props.foo, bar: props.bar });
     },
diff --git a/e2e/e2e-app/src/components/default-props/types.ts b/e2e/e2e-app/src/components/default-props/types.ts
deleted file mode 100644
index 7dd9ff630c..0000000000
--- a/e2e/e2e-app/src/components/default-props/types.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-export type DefaultPropsType = {
-  foo?: string;
-  bar?: string;
-};
-
-export type DefaultPropsState = {
-  getProps: () => string;
-};
diff --git a/packages/core/src/generators/vue/compositionApi.ts b/packages/core/src/generators/vue/compositionApi.ts
index 26dbc97d6e..5c784d1750 100644
--- a/packages/core/src/generators/vue/compositionApi.ts
+++ b/packages/core/src/generators/vue/compositionApi.ts
@@ -20,7 +20,7 @@ const getCompositionPropDefinition = ({
   let str = 'const props = ';
 
   if (component.defaultProps) {
-    const generic = isTs ? `<${component.propsTypeRef}>` : '';
+    const generic = isTs && component.propsTypeRef !== 'any' ? `<${component.propsTypeRef}>` : '';
     const defalutPropsString = props
       .map((prop) => {
         const value = component.defaultProps!.hasOwnProperty(prop)

From c979fce31a4dd98331bf4882a1185f1e92340835 Mon Sep 17 00:00:00 2001
From: Nicolas Merget <nicolas.merget@deutschebahn.com>
Date: Thu, 16 Jan 2025 14:06:04 +0100
Subject: [PATCH 08/20] fix: issue with default props for e2e tests

---
 .../src/components/default-props/default-props.lite.tsx    | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/e2e/e2e-app/src/components/default-props/default-props.lite.tsx b/e2e/e2e-app/src/components/default-props/default-props.lite.tsx
index d894f7d930..b016673802 100644
--- a/e2e/e2e-app/src/components/default-props/default-props.lite.tsx
+++ b/e2e/e2e-app/src/components/default-props/default-props.lite.tsx
@@ -2,7 +2,12 @@ import { useDefaultProps, useStore } from '@builder.io/mitosis';
 
 useDefaultProps({ foo: 'abc', bar: 'foo' });
 
-export default function DefaultProps(props: any) {
+type Props = {
+  foo?: string;
+  bar?: string;
+};
+
+export default function DefaultProps(props: Props) {
   const state = useStore({
     getProps: () => {
       return JSON.stringify({ foo: props.foo, bar: props.bar });

From 45dcee4bc2e8f373e493f859fb1f5dbe141742a6 Mon Sep 17 00:00:00 2001
From: Nicolas Merget <nicolas.merget@deutschebahn.com>
Date: Thu, 16 Jan 2025 14:58:24 +0100
Subject: [PATCH 09/20] fix: issue with stencil e2e test for default props

---
 .../__snapshots__/alpine.test.ts.snap         |  28 ++
 .../__snapshots__/angular.import.test.ts.snap |  66 +++
 .../__snapshots__/angular.mapper.test.ts.snap |  68 +++
 .../__snapshots__/angular.state.test.ts.snap  |  66 +++
 .../__snapshots__/angular.styles.test.ts.snap |  52 +++
 .../__snapshots__/angular.test.ts.snap        | 118 +++++
 .../__tests__/__snapshots__/html.test.ts.snap | 116 +++++
 .../__snapshots__/liquid.test.ts.snap         |  10 +
 .../__tests__/__snapshots__/lit.test.ts.snap  |  48 ++
 .../__snapshots__/marko.test.ts.snap          |  14 +
 .../__snapshots__/mitosis.test.ts.snap        |  75 +++
 .../__snapshots__/parse-jsx.test.ts.snap      | 151 ++++++
 .../__snapshots__/preact.test.ts.snap         |  25 +
 .../__tests__/__snapshots__/qwik.test.ts.snap |  24 +
 .../__snapshots__/react-native.test.ts.snap   |  61 +++
 .../react-state-builder.test.ts.snap          |  27 ++
 .../react-state-mobx.test.ts.snap             |  25 +
 .../react-state-solid.test.ts.snap            |  23 +
 .../react-state-valtio.test.ts.snap           |  23 +
 .../react-state-variables.test.ts.snap        |  23 +
 .../__snapshots__/react.test.ts.snap          |  23 +
 .../__tests__/__snapshots__/rsc.test.ts.snap  |  33 ++
 .../__snapshots__/solid.test.ts.snap          |  68 +++
 .../__snapshots__/stencil.test.ts.snap        | 437 ++----------------
 .../__snapshots__/svelte.test.ts.snap         |  18 +
 .../__tests__/__snapshots__/taro.test.ts.snap |  25 +
 .../vue-composition.test.ts.snap              |  22 +
 .../__tests__/__snapshots__/vue.test.ts.snap  |  34 ++
 .../__snapshots__/webcomponent.test.ts.snap   | 228 +++++++++
 .../src/__tests__/data/types/foo-props.ts     |   1 +
 .../data/types/type-external-props.raw.tsx    |   5 +
 packages/core/src/__tests__/test-generator.ts |   2 +
 .../core/src/generators/stencil/component.ts  |   4 +-
 .../src/generators/stencil/helpers/index.ts   |   8 +-
 34 files changed, 1553 insertions(+), 398 deletions(-)
 create mode 100644 packages/core/src/__tests__/data/types/foo-props.ts
 create mode 100644 packages/core/src/__tests__/data/types/type-external-props.raw.tsx

diff --git a/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap b/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap
index 09c985ebb8..296eaffb75 100644
--- a/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap
@@ -2967,6 +2967,20 @@ exports[`Alpine.js > jsx > Javascript Test > typeDependency 1`] = `
 "
 `;
 
+exports[`Alpine.js > jsx > Javascript Test > typeExternalProps 1`] = `
+"<div x-data=\\"typeExternalProps()\\">
+  Hello
+  <span x-html=\\"name\\"></span>
+  !
+</div>
+<script>
+  document.addEventListener(\\"alpine:init\\", () => {
+    Alpine.data(\\"typeExternalProps\\", () => ({}));
+  });
+</script>
+"
+`;
+
 exports[`Alpine.js > jsx > Javascript Test > typeExternalStore 1`] = `
 "<div x-data=\\"typeExternalStore()\\">
   Hello
@@ -6085,6 +6099,20 @@ exports[`Alpine.js > jsx > Typescript Test > typeDependency 1`] = `
 "
 `;
 
+exports[`Alpine.js > jsx > Typescript Test > typeExternalProps 1`] = `
+"<div x-data=\\"typeExternalProps()\\">
+  Hello
+  <span x-html=\\"name\\"></span>
+  !
+</div>
+<script>
+  document.addEventListener(\\"alpine:init\\", () => {
+    Alpine.data(\\"typeExternalProps\\", () => ({}));
+  });
+</script>
+"
+`;
+
 exports[`Alpine.js > jsx > Typescript Test > typeExternalStore 1`] = `
 "<div x-data=\\"typeExternalStore()\\">
   Hello
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 fd29d4e5e0..b5a14b03dd 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap
@@ -7140,6 +7140,38 @@ export class TypeDependencyModule {}
 "
 `;
 
+exports[`Angular with Preserve Imports and File Extensions > jsx > Javascript Test > typeExternalProps 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component, Input } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"type-external-props\\",
+  template: \`
+    <div>Hello {{name}} !</div>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class TypeExternalProps {
+  @Input() name;
+}
+
+@NgModule({
+  declarations: [TypeExternalProps],
+  imports: [CommonModule],
+  exports: [TypeExternalProps],
+})
+export class TypeExternalPropsModule {}
+"
+`;
+
 exports[`Angular with Preserve Imports and File Extensions > jsx > Javascript Test > typeExternalStore 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -15133,6 +15165,40 @@ export class TypeDependencyModule {}
 "
 `;
 
+exports[`Angular with Preserve Imports and File Extensions > jsx > Typescript Test > typeExternalProps 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component, Input } from \\"@angular/core\\";
+
+import { FooProps } from \\"./foo-props\\";
+
+@Component({
+  selector: \\"type-external-props\\",
+  template: \`
+    <div>Hello {{name}} !</div>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class TypeExternalProps {
+  @Input() name!: FooProps[\\"name\\"];
+}
+
+@NgModule({
+  declarations: [TypeExternalProps],
+  imports: [CommonModule],
+  exports: [TypeExternalProps],
+})
+export class TypeExternalPropsModule {}
+"
+`;
+
 exports[`Angular with Preserve Imports and File Extensions > jsx > Typescript Test > typeExternalStore 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 678825f373..35aedeeab1 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.mapper.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.mapper.test.ts.snap
@@ -7259,6 +7259,39 @@ export class TypeDependencyModule {}
 "
 `;
 
+exports[`Angular with Import Mapper Tests > jsx > Javascript Test > typeExternalProps 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component, Input } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"type-external-props\\",
+  template: \`
+    <div>Hello {{name}} !</div>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class TypeExternalProps {
+  @Input() name;
+}
+
+@NgModule({
+  declarations: [TypeExternalProps],
+  imports: [CommonModule],
+  exports: [TypeExternalProps],
+  bootstrap: [SomeOtherComponent],
+})
+export class TypeExternalPropsModule {}
+"
+`;
+
 exports[`Angular with Import Mapper Tests > jsx > Javascript Test > typeExternalStore 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -15382,6 +15415,41 @@ export class TypeDependencyModule {}
 "
 `;
 
+exports[`Angular with Import Mapper Tests > jsx > Typescript Test > typeExternalProps 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component, Input } from \\"@angular/core\\";
+
+import { FooProps } from \\"./foo-props\\";
+
+@Component({
+  selector: \\"type-external-props\\",
+  template: \`
+    <div>Hello {{name}} !</div>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class TypeExternalProps {
+  @Input() name!: FooProps[\\"name\\"];
+}
+
+@NgModule({
+  declarations: [TypeExternalProps],
+  imports: [CommonModule],
+  exports: [TypeExternalProps],
+  bootstrap: [SomeOtherComponent],
+})
+export class TypeExternalPropsModule {}
+"
+`;
+
 exports[`Angular with Import Mapper Tests > jsx > Typescript Test > typeExternalStore 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
diff --git a/packages/core/src/__tests__/__snapshots__/angular.state.test.ts.snap b/packages/core/src/__tests__/__snapshots__/angular.state.test.ts.snap
index df0e55ee93..d2343e27fc 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.state.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.state.test.ts.snap
@@ -7357,6 +7357,38 @@ export class TypeDependencyModule {}
 "
 `;
 
+exports[`Angular with manually creating and handling class properties as bindings (more stable) > jsx > Javascript Test > typeExternalProps 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component, Input } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"type-external-props\\",
+  template: \`
+    <div>Hello {{name}} !</div>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class TypeExternalProps {
+  @Input() name;
+}
+
+@NgModule({
+  declarations: [TypeExternalProps],
+  imports: [CommonModule],
+  exports: [TypeExternalProps],
+})
+export class TypeExternalPropsModule {}
+"
+`;
+
 exports[`Angular with manually creating and handling class properties as bindings (more stable) > jsx > Javascript Test > typeExternalStore 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -15626,6 +15658,40 @@ export class TypeDependencyModule {}
 "
 `;
 
+exports[`Angular with manually creating and handling class properties as bindings (more stable) > jsx > Typescript Test > typeExternalProps 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component, Input } from \\"@angular/core\\";
+
+import { FooProps } from \\"./foo-props\\";
+
+@Component({
+  selector: \\"type-external-props\\",
+  template: \`
+    <div>Hello {{name}} !</div>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class TypeExternalProps {
+  @Input() name!: FooProps[\\"name\\"];
+}
+
+@NgModule({
+  declarations: [TypeExternalProps],
+  imports: [CommonModule],
+  exports: [TypeExternalProps],
+})
+export class TypeExternalPropsModule {}
+"
+`;
+
 exports[`Angular with manually creating and handling class properties as bindings (more stable) > jsx > Typescript Test > typeExternalStore 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
diff --git a/packages/core/src/__tests__/__snapshots__/angular.styles.test.ts.snap b/packages/core/src/__tests__/__snapshots__/angular.styles.test.ts.snap
index dfef1606d6..3383a69abc 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.styles.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.styles.test.ts.snap
@@ -6371,6 +6371,31 @@ export class TypeDependencyModule {}
 "
 `;
 
+exports[`Angular with visuallyIgnoreHostElement = false > jsx > Javascript Test > typeExternalProps 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component, Input } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"type-external-props\\",
+  template: \`
+    <div>Hello {{name}} !</div>
+  \`,
+})
+export default class TypeExternalProps {
+  @Input() name;
+}
+
+@NgModule({
+  declarations: [TypeExternalProps],
+  imports: [CommonModule],
+  exports: [TypeExternalProps],
+})
+export class TypeExternalPropsModule {}
+"
+`;
+
 exports[`Angular with visuallyIgnoreHostElement = false > jsx > Javascript Test > typeExternalStore 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -13542,6 +13567,33 @@ export class TypeDependencyModule {}
 "
 `;
 
+exports[`Angular with visuallyIgnoreHostElement = false > jsx > Typescript Test > typeExternalProps 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component, Input } from \\"@angular/core\\";
+
+import { FooProps } from \\"./foo-props\\";
+
+@Component({
+  selector: \\"type-external-props\\",
+  template: \`
+    <div>Hello {{name}} !</div>
+  \`,
+})
+export default class TypeExternalProps {
+  @Input() name!: FooProps[\\"name\\"];
+}
+
+@NgModule({
+  declarations: [TypeExternalProps],
+  imports: [CommonModule],
+  exports: [TypeExternalProps],
+})
+export class TypeExternalPropsModule {}
+"
+`;
+
 exports[`Angular with visuallyIgnoreHostElement = false > jsx > Typescript Test > typeExternalStore 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 7da64dcada..35a9c9694e 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.test.ts.snap
@@ -13415,6 +13415,63 @@ export default class TypeDependency {
 "
 `;
 
+exports[`Angular > jsx > Javascript Test > typeExternalProps 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component, Input } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"type-external-props\\",
+  template: \`
+    <div>Hello {{name}} !</div>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class TypeExternalProps {
+  @Input() name;
+}
+
+@NgModule({
+  declarations: [TypeExternalProps],
+  imports: [CommonModule],
+  exports: [TypeExternalProps],
+})
+export class TypeExternalPropsModule {}
+"
+`;
+
+exports[`Angular > jsx > Javascript Test > typeExternalProps 2`] = `
+"import { Component, Input } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+@Component({
+  selector: \\"type-external-props\\",
+  template: \`
+    <div>Hello {{name}} !</div>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+  standalone: true,
+  imports: [CommonModule],
+})
+export default class TypeExternalProps {
+  @Input() name;
+}
+"
+`;
+
 exports[`Angular > jsx > Javascript Test > typeExternalStore 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -28471,6 +28528,67 @@ export default class TypeDependency {
 "
 `;
 
+exports[`Angular > jsx > Typescript Test > typeExternalProps 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component, Input } from \\"@angular/core\\";
+
+import { FooProps } from \\"./foo-props\\";
+
+@Component({
+  selector: \\"type-external-props\\",
+  template: \`
+    <div>Hello {{name}} !</div>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class TypeExternalProps {
+  @Input() name!: FooProps[\\"name\\"];
+}
+
+@NgModule({
+  declarations: [TypeExternalProps],
+  imports: [CommonModule],
+  exports: [TypeExternalProps],
+})
+export class TypeExternalPropsModule {}
+"
+`;
+
+exports[`Angular > jsx > Typescript Test > typeExternalProps 2`] = `
+"import { Component, Input } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { FooProps } from \\"./foo-props\\";
+
+@Component({
+  selector: \\"type-external-props\\",
+  template: \`
+    <div>Hello {{name}} !</div>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+  standalone: true,
+  imports: [CommonModule],
+})
+export default class TypeExternalProps {
+  @Input() name!: FooProps[\\"name\\"];
+}
+"
+`;
+
 exports[`Angular > jsx > Typescript Test > typeExternalStore 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 8d57f9a86c..077c1bb386 100644
--- a/packages/core/src/__tests__/__snapshots__/html.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/html.test.ts.snap
@@ -7540,6 +7540,64 @@ exports[`Html > jsx > Javascript Test > typeDependency 1`] = `
 "
 `;
 
+exports[`Html > jsx > Javascript Test > typeExternalProps 1`] = `
+"<div>
+  Hello
+  <template data-el=\\"div-1\\"><!-- props.name --></template>
+  !
+</div>
+<script>
+  (() => {
+    const state = {};
+    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, props.name);
+      });
+
+      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 > typeExternalStore 1`] = `
 "<div>
   Hello
@@ -15388,6 +15446,64 @@ exports[`Html > jsx > Typescript Test > typeDependency 1`] = `
 "
 `;
 
+exports[`Html > jsx > Typescript Test > typeExternalProps 1`] = `
+"<div>
+  Hello
+  <template data-el=\\"div-1\\"><!-- props.name --></template>
+  !
+</div>
+<script>
+  (() => {
+    const state = {};
+    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, props.name);
+      });
+
+      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 > typeExternalStore 1`] = `
 "<div>
   Hello
diff --git a/packages/core/src/__tests__/__snapshots__/liquid.test.ts.snap b/packages/core/src/__tests__/__snapshots__/liquid.test.ts.snap
index a34f841bd7..0e4bd98731 100644
--- a/packages/core/src/__tests__/__snapshots__/liquid.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/liquid.test.ts.snap
@@ -943,6 +943,11 @@ exports[`Liquid > jsx > Javascript Test > typeDependency 1`] = `
 "
 `;
 
+exports[`Liquid > jsx > Javascript Test > typeExternalProps 1`] = `
+"<div>Hello {{name}} !</div>
+"
+`;
+
 exports[`Liquid > jsx > Javascript Test > typeExternalStore 1`] = `
 "<div>Hello {{_name}} !</div>
 "
@@ -1957,6 +1962,11 @@ exports[`Liquid > jsx > Typescript Test > typeDependency 1`] = `
 "
 `;
 
+exports[`Liquid > jsx > Typescript Test > typeExternalProps 1`] = `
+"<div>Hello {{name}} !</div>
+"
+`;
+
 exports[`Liquid > jsx > Typescript Test > typeExternalStore 1`] = `
 "<div>Hello {{_name}} !</div>
 "
diff --git a/packages/core/src/__tests__/__snapshots__/lit.test.ts.snap b/packages/core/src/__tests__/__snapshots__/lit.test.ts.snap
index c7b341db53..119bbd88df 100644
--- a/packages/core/src/__tests__/__snapshots__/lit.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/lit.test.ts.snap
@@ -4448,6 +4448,29 @@ export default class TypeDependency extends LitElement {
 "
 `;
 
+exports[`Lit > jsx > Javascript Test > typeExternalProps 1`] = `
+"import { LitElement, html, css } from \\"lit\\";
+import { customElement, property, state, query } from \\"lit/decorators.js\\";
+
+@customElement(\\"type-external-props\\")
+export default class TypeExternalProps extends LitElement {
+  createRenderRoot() {
+    return this;
+  }
+
+  @property() name: any;
+
+  render() {
+    return html\`
+
+          <div>Hello \${this.name} !</div>
+
+        \`;
+  }
+}
+"
+`;
+
 exports[`Lit > jsx > Javascript Test > typeExternalStore 1`] = `
 "import { LitElement, html, css } from \\"lit\\";
 import { customElement, property, state, query } from \\"lit/decorators.js\\";
@@ -9563,6 +9586,31 @@ export default class TypeDependency extends LitElement {
 "
 `;
 
+exports[`Lit > jsx > Typescript Test > typeExternalProps 1`] = `
+"import { FooProps } from \\"./foo-props\\";
+
+import { LitElement, html, css } from \\"lit\\";
+import { customElement, property, state, query } from \\"lit/decorators.js\\";
+
+@customElement(\\"type-external-props\\")
+export default class TypeExternalProps extends LitElement {
+  createRenderRoot() {
+    return this;
+  }
+
+  @property() name: any;
+
+  render() {
+    return html\`
+
+          <div>Hello \${this.name} !</div>
+
+        \`;
+  }
+}
+"
+`;
+
 exports[`Lit > jsx > Typescript Test > typeExternalStore 1`] = `
 "import { FooStore } from \\"./foo-store\\";
 
diff --git a/packages/core/src/__tests__/__snapshots__/marko.test.ts.snap b/packages/core/src/__tests__/__snapshots__/marko.test.ts.snap
index 2a786b2d27..644897dbf9 100644
--- a/packages/core/src/__tests__/__snapshots__/marko.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/marko.test.ts.snap
@@ -2678,6 +2678,12 @@ exports[`Marko > jsx > Javascript Test > typeDependency 1`] = `
 <div>\${input.foo}</div>"
 `;
 
+exports[`Marko > jsx > Javascript Test > typeExternalProps 1`] = `
+"class {}
+
+<div>Hello \${input.name} !</div>"
+`;
+
 exports[`Marko > jsx > Javascript Test > typeExternalStore 1`] = `
 "class {
   onCreate() {
@@ -5440,6 +5446,14 @@ class {}
 <div>\${input.foo}</div>"
 `;
 
+exports[`Marko > jsx > Typescript Test > typeExternalProps 1`] = `
+"import { FooProps } from \\"./foo-props\\";
+
+class {}
+
+<div>Hello \${input.name} !</div>"
+`;
+
 exports[`Marko > jsx > Typescript Test > typeExternalStore 1`] = `
 "import { FooStore } from \\"./foo-store\\";
 
diff --git a/packages/core/src/__tests__/__snapshots__/mitosis.test.ts.snap b/packages/core/src/__tests__/__snapshots__/mitosis.test.ts.snap
index b28be3154a..3b825855cf 100644
--- a/packages/core/src/__tests__/__snapshots__/mitosis.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/mitosis.test.ts.snap
@@ -2979,6 +2979,18 @@ exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Javascr
 "
 `;
 
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Javascript Test > typeExternalProps 1`] = `
+"export default function TypeExternalProps(props) {
+  return [
+    <div>
+      Hello
+      {props.name}!{\\" \\"}
+    </div>,
+  ];
+}
+"
+`;
+
 exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Javascript Test > typeExternalStore 1`] = `
 "import { useStore } from \\"@builder.io/mitosis\\";
 
@@ -6504,6 +6516,20 @@ export default function TypeDependency(props) {
 "
 `;
 
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Typescript Test > typeExternalProps 1`] = `
+"import { FooProps } from \\"./foo-props\\";
+
+export default function TypeExternalProps(props) {
+  return [
+    <div>
+      Hello
+      {props.name}!{\\" \\"}
+    </div>,
+  ];
+}
+"
+`;
+
 exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Typescript Test > typeExternalStore 1`] = `
 "import { useStore } from \\"@builder.io/mitosis\\";
 
@@ -10365,6 +10391,18 @@ exports[`Mitosis, format: legacy > jsx > Javascript Test > typeDependency 1`] =
 "
 `;
 
+exports[`Mitosis, format: legacy > jsx > Javascript Test > typeExternalProps 1`] = `
+"export default function TypeExternalProps(props) {
+  return (
+    <div>
+      Hello
+      {props.name}!{\\" \\"}
+    </div>
+  );
+}
+"
+`;
+
 exports[`Mitosis, format: legacy > jsx > Javascript Test > typeExternalStore 1`] = `
 "import { useStore } from \\"@builder.io/mitosis\\";
 
@@ -13959,6 +13997,20 @@ export default function TypeDependency(props) {
 "
 `;
 
+exports[`Mitosis, format: legacy > jsx > Typescript Test > typeExternalProps 1`] = `
+"import { FooProps } from \\"./foo-props\\";
+
+export default function TypeExternalProps(props) {
+  return (
+    <div>
+      Hello
+      {props.name}!{\\" \\"}
+    </div>
+  );
+}
+"
+`;
+
 exports[`Mitosis, format: legacy > jsx > Typescript Test > typeExternalStore 1`] = `
 "import { useStore } from \\"@builder.io/mitosis\\";
 
@@ -18292,6 +18344,17 @@ export default TypeDependency;
 "
 `;
 
+exports[`Mitosis, format: react > jsx > Javascript Test > typeExternalProps 1`] = `
+"import * as React from \\"react\\";
+
+function TypeExternalProps(props) {
+  return <div>Hello {props.name}! </div>;
+}
+
+export default TypeExternalProps;
+"
+`;
+
 exports[`Mitosis, format: react > jsx > Javascript Test > typeExternalStore 1`] = `
 "\\"use client\\";
 import * as React from \\"react\\";
@@ -22018,6 +22081,18 @@ export default TypeDependency;
 "
 `;
 
+exports[`Mitosis, format: react > jsx > Typescript Test > typeExternalProps 1`] = `
+"import * as React from \\"react\\";
+import { FooProps } from \\"./foo-props\\";
+
+function TypeExternalProps(props) {
+  return <div>Hello {props.name}! </div>;
+}
+
+export default TypeExternalProps;
+"
+`;
+
 exports[`Mitosis, format: react > jsx > Typescript Test > typeExternalStore 1`] = `
 "\\"use client\\";
 import * as React from \\"react\\";
diff --git a/packages/core/src/__tests__/__snapshots__/parse-jsx.test.ts.snap b/packages/core/src/__tests__/__snapshots__/parse-jsx.test.ts.snap
index 57e1f1b0a7..97b2f26fe0 100644
--- a/packages/core/src/__tests__/__snapshots__/parse-jsx.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/parse-jsx.test.ts.snap
@@ -12288,6 +12288,77 @@ exports[`Parse JSX > Javascript > typeDependency 1`] = `
 }
 `;
 
+exports[`Parse JSX > Javascript > typeExternalProps 1`] = `
+{
+  "@type": "@builder.io/mitosis/component",
+  "children": [
+    {
+      "@type": "@builder.io/mitosis/node",
+      "bindings": {},
+      "children": [
+        {
+          "@type": "@builder.io/mitosis/node",
+          "bindings": {},
+          "children": [],
+          "meta": {},
+          "name": "div",
+          "properties": {
+            "_text": "Hello ",
+          },
+          "scope": {},
+        },
+        {
+          "@type": "@builder.io/mitosis/node",
+          "bindings": {
+            "_text": {
+              "bindingType": "expression",
+              "code": "props.name",
+              "type": "single",
+            },
+          },
+          "children": [],
+          "meta": {},
+          "name": "div",
+          "properties": {},
+          "scope": {},
+        },
+        {
+          "@type": "@builder.io/mitosis/node",
+          "bindings": {},
+          "children": [],
+          "meta": {},
+          "name": "div",
+          "properties": {
+            "_text": "! ",
+          },
+          "scope": {},
+        },
+      ],
+      "meta": {},
+      "name": "div",
+      "properties": {},
+      "scope": {},
+    },
+  ],
+  "context": {
+    "get": {},
+    "set": {},
+  },
+  "exports": {},
+  "hooks": {
+    "onEvent": [],
+    "onMount": [],
+  },
+  "imports": [],
+  "inputs": [],
+  "meta": {},
+  "name": "TypeExternalProps",
+  "refs": {},
+  "state": {},
+  "subComponents": [],
+}
+`;
+
 exports[`Parse JSX > Javascript > typeExternalStore 1`] = `
 {
   "@type": "@builder.io/mitosis/component",
@@ -25904,6 +25975,86 @@ exports[`Parse JSX > Typescript > typeDependency 1`] = `
 }
 `;
 
+exports[`Parse JSX > Typescript > typeExternalProps 1`] = `
+{
+  "@type": "@builder.io/mitosis/component",
+  "children": [
+    {
+      "@type": "@builder.io/mitosis/node",
+      "bindings": {},
+      "children": [
+        {
+          "@type": "@builder.io/mitosis/node",
+          "bindings": {},
+          "children": [],
+          "meta": {},
+          "name": "div",
+          "properties": {
+            "_text": "Hello ",
+          },
+          "scope": {},
+        },
+        {
+          "@type": "@builder.io/mitosis/node",
+          "bindings": {
+            "_text": {
+              "bindingType": "expression",
+              "code": "props.name",
+              "type": "single",
+            },
+          },
+          "children": [],
+          "meta": {},
+          "name": "div",
+          "properties": {},
+          "scope": {},
+        },
+        {
+          "@type": "@builder.io/mitosis/node",
+          "bindings": {},
+          "children": [],
+          "meta": {},
+          "name": "div",
+          "properties": {
+            "_text": "! ",
+          },
+          "scope": {},
+        },
+      ],
+      "meta": {},
+      "name": "div",
+      "properties": {},
+      "scope": {},
+    },
+  ],
+  "context": {
+    "get": {},
+    "set": {},
+  },
+  "exports": {},
+  "hooks": {
+    "onEvent": [],
+    "onMount": [],
+  },
+  "imports": [
+    {
+      "importKind": "value",
+      "imports": {
+        "FooProps": "FooProps",
+      },
+      "path": "./foo-props",
+    },
+  ],
+  "inputs": [],
+  "meta": {},
+  "name": "TypeExternalProps",
+  "propsTypeRef": "FooProps",
+  "refs": {},
+  "state": {},
+  "subComponents": [],
+}
+`;
+
 exports[`Parse JSX > Typescript > typeExternalStore 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 2a32cd1a63..804db2d1eb 100644
--- a/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap
@@ -3571,6 +3571,18 @@ export default TypeDependency;
 "
 `;
 
+exports[`Preact > jsx > Javascript Test > typeExternalProps 1`] = `
+"/** @jsx h */
+import { h, Fragment } from \\"preact\\";
+
+function TypeExternalProps(props) {
+  return <div>Hello {props.name}! </div>;
+}
+
+export default TypeExternalProps;
+"
+`;
+
 exports[`Preact > jsx > Javascript Test > typeExternalStore 1`] = `
 "/** @jsx h */
 import { h, Fragment } from \\"preact\\";
@@ -7768,6 +7780,19 @@ export default TypeDependency;
 "
 `;
 
+exports[`Preact > jsx > Typescript Test > typeExternalProps 1`] = `
+"/** @jsx h */
+import { h, Fragment } from \\"preact\\";
+import { FooProps } from \\"./foo-props\\";
+
+function TypeExternalProps(props: FooProps) {
+  return <div>Hello {props.name}! </div>;
+}
+
+export default TypeExternalProps;
+"
+`;
+
 exports[`Preact > jsx > Typescript Test > typeExternalStore 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 4d49a89339..3acf9bf294 100644
--- a/packages/core/src/__tests__/__snapshots__/qwik.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/qwik.test.ts.snap
@@ -5266,6 +5266,17 @@ export default TypeDependency;
 "
 `;
 
+exports[`qwik > jsx > Javascript Test > typeExternalProps 1`] = `
+"import { Fragment, component$, h } from \\"@builder.io/qwik\\";
+
+export const TypeExternalProps = component$((props) => {
+  return <div>Hello {props.name}! </div>;
+});
+
+export default TypeExternalProps;
+"
+`;
+
 exports[`qwik > jsx > Javascript Test > typeExternalStore 1`] = `
 "import { Fragment, component$, h, useStore } from \\"@builder.io/qwik\\";
 
@@ -9383,6 +9394,19 @@ export default TypeDependency;
 "
 `;
 
+exports[`qwik > jsx > Typescript Test > typeExternalProps 1`] = `
+"import { FooProps } from \\"./foo-props\\";
+
+import { Fragment, component$, h } from \\"@builder.io/qwik\\";
+
+export const TypeExternalProps = component$((props: FooProps) => {
+  return <div>Hello {props.name}! </div>;
+});
+
+export default TypeExternalProps;
+"
+`;
+
 exports[`qwik > jsx > Typescript Test > typeExternalStore 1`] = `
 "import { FooStore } from \\"./foo-store\\";
 
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 29c3327d13..48fb395a75 100644
--- a/packages/core/src/__tests__/__snapshots__/react-native.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/react-native.test.ts.snap
@@ -5074,6 +5074,36 @@ export default TypeDependency;
 "
 `;
 
+exports[`React Native > jsx > Javascript Test > typeExternalProps 1`] = `
+"import * as React from \\"react\\";
+import {
+  FlatList,
+  ScrollView,
+  View,
+  StyleSheet,
+  Image,
+  Text,
+  Pressable,
+  TextInput,
+  TouchableOpacity,
+  Button,
+  Linking,
+} from \\"react-native\\";
+
+function TypeExternalProps(props) {
+  return (
+    <View>
+      <Text>Hello </Text>
+      <Text>{props.name}</Text>
+      <Text>! </Text>
+    </View>
+  );
+}
+
+export default TypeExternalProps;
+"
+`;
+
 exports[`React Native > jsx > Javascript Test > typeExternalStore 1`] = `
 "import * as React from \\"react\\";
 import {
@@ -10804,6 +10834,37 @@ export default TypeDependency;
 "
 `;
 
+exports[`React Native > jsx > Typescript Test > typeExternalProps 1`] = `
+"import * as React from \\"react\\";
+import {
+  FlatList,
+  ScrollView,
+  View,
+  StyleSheet,
+  Image,
+  Text,
+  Pressable,
+  TextInput,
+  TouchableOpacity,
+  Button,
+  Linking,
+} from \\"react-native\\";
+import { FooProps } from \\"./foo-props\\";
+
+function TypeExternalProps(props: FooProps) {
+  return (
+    <View>
+      <Text>Hello </Text>
+      <Text>{props.name}</Text>
+      <Text>! </Text>
+    </View>
+  );
+}
+
+export default TypeExternalProps;
+"
+`;
+
 exports[`React Native > jsx > Typescript Test > typeExternalStore 1`] = `
 "import * as React from \\"react\\";
 import {
diff --git a/packages/core/src/__tests__/__snapshots__/react-state-builder.test.ts.snap b/packages/core/src/__tests__/__snapshots__/react-state-builder.test.ts.snap
index 8c2f9c510f..1f9a051339 100644
--- a/packages/core/src/__tests__/__snapshots__/react-state-builder.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/react-state-builder.test.ts.snap
@@ -3549,6 +3549,19 @@ export default TypeDependency;
 "
 `;
 
+exports[`React - stateType: builder > jsx > Javascript Test > typeExternalProps 1`] = `
+"import * as React from \\"react\\";
+
+function TypeExternalProps(props) {
+  const state = useBuilderState({});
+
+  return <div>Hello {props.name}! </div>;
+}
+
+export default TypeExternalProps;
+"
+`;
+
 exports[`React - stateType: builder > jsx > Javascript Test > typeExternalStore 1`] = `
 "\\"use client\\";
 import * as React from \\"react\\";
@@ -7729,6 +7742,20 @@ export default TypeDependency;
 "
 `;
 
+exports[`React - stateType: builder > jsx > Typescript Test > typeExternalProps 1`] = `
+"import * as React from \\"react\\";
+import { FooProps } from \\"./foo-props\\";
+
+function TypeExternalProps(props: FooProps) {
+  const state = useBuilderState({});
+
+  return <div>Hello {props.name}! </div>;
+}
+
+export default TypeExternalProps;
+"
+`;
+
 exports[`React - stateType: builder > jsx > Typescript Test > typeExternalStore 1`] = `
 "\\"use client\\";
 import * as React from \\"react\\";
diff --git a/packages/core/src/__tests__/__snapshots__/react-state-mobx.test.ts.snap b/packages/core/src/__tests__/__snapshots__/react-state-mobx.test.ts.snap
index e054368c62..359c297ab9 100644
--- a/packages/core/src/__tests__/__snapshots__/react-state-mobx.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/react-state-mobx.test.ts.snap
@@ -3598,6 +3598,18 @@ export default observedTypeDependency;
 "
 `;
 
+exports[`React - stateType: mobx > jsx > Javascript Test > typeExternalProps 1`] = `
+"import * as React from \\"react\\";
+
+function TypeExternalProps(props) {
+  return <div>Hello {props.name}! </div>;
+}
+
+const observedTypeExternalProps = observer(TypeExternalProps);
+export default observedTypeExternalProps;
+"
+`;
+
 exports[`React - stateType: mobx > jsx > Javascript Test > typeExternalStore 1`] = `
 "\\"use client\\";
 import * as React from \\"react\\";
@@ -7806,6 +7818,19 @@ export default observedTypeDependency;
 "
 `;
 
+exports[`React - stateType: mobx > jsx > Typescript Test > typeExternalProps 1`] = `
+"import * as React from \\"react\\";
+import { FooProps } from \\"./foo-props\\";
+
+function TypeExternalProps(props: FooProps) {
+  return <div>Hello {props.name}! </div>;
+}
+
+const observedTypeExternalProps = observer(TypeExternalProps);
+export default observedTypeExternalProps;
+"
+`;
+
 exports[`React - stateType: mobx > jsx > Typescript Test > typeExternalStore 1`] = `
 "\\"use client\\";
 import * as React from \\"react\\";
diff --git a/packages/core/src/__tests__/__snapshots__/react-state-solid.test.ts.snap b/packages/core/src/__tests__/__snapshots__/react-state-solid.test.ts.snap
index cf5e853f93..bc0ea33ded 100644
--- a/packages/core/src/__tests__/__snapshots__/react-state-solid.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/react-state-solid.test.ts.snap
@@ -3481,6 +3481,17 @@ export default TypeDependency;
 "
 `;
 
+exports[`React - stateType: solid > jsx > Javascript Test > typeExternalProps 1`] = `
+"import * as React from \\"react\\";
+
+function TypeExternalProps(props) {
+  return <div>Hello {props.name}! </div>;
+}
+
+export default TypeExternalProps;
+"
+`;
+
 exports[`React - stateType: solid > jsx > Javascript Test > typeExternalStore 1`] = `
 "\\"use client\\";
 import * as React from \\"react\\";
@@ -7564,6 +7575,18 @@ export default TypeDependency;
 "
 `;
 
+exports[`React - stateType: solid > jsx > Typescript Test > typeExternalProps 1`] = `
+"import * as React from \\"react\\";
+import { FooProps } from \\"./foo-props\\";
+
+function TypeExternalProps(props: FooProps) {
+  return <div>Hello {props.name}! </div>;
+}
+
+export default TypeExternalProps;
+"
+`;
+
 exports[`React - stateType: solid > jsx > Typescript Test > typeExternalStore 1`] = `
 "\\"use client\\";
 import * as React from \\"react\\";
diff --git a/packages/core/src/__tests__/__snapshots__/react-state-valtio.test.ts.snap b/packages/core/src/__tests__/__snapshots__/react-state-valtio.test.ts.snap
index 1e1bb5a820..83ce3c332e 100644
--- a/packages/core/src/__tests__/__snapshots__/react-state-valtio.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/react-state-valtio.test.ts.snap
@@ -3484,6 +3484,17 @@ export default TypeDependency;
 "
 `;
 
+exports[`React - stateType: valtio > jsx > Javascript Test > typeExternalProps 1`] = `
+"import * as React from \\"react\\";
+
+function TypeExternalProps(props) {
+  return <div>Hello {props.name}! </div>;
+}
+
+export default TypeExternalProps;
+"
+`;
+
 exports[`React - stateType: valtio > jsx > Javascript Test > typeExternalStore 1`] = `
 "\\"use client\\";
 import * as React from \\"react\\";
@@ -7570,6 +7581,18 @@ export default TypeDependency;
 "
 `;
 
+exports[`React - stateType: valtio > jsx > Typescript Test > typeExternalProps 1`] = `
+"import * as React from \\"react\\";
+import { FooProps } from \\"./foo-props\\";
+
+function TypeExternalProps(props: FooProps) {
+  return <div>Hello {props.name}! </div>;
+}
+
+export default TypeExternalProps;
+"
+`;
+
 exports[`React - stateType: valtio > jsx > Typescript Test > typeExternalStore 1`] = `
 "\\"use client\\";
 import * as React from \\"react\\";
diff --git a/packages/core/src/__tests__/__snapshots__/react-state-variables.test.ts.snap b/packages/core/src/__tests__/__snapshots__/react-state-variables.test.ts.snap
index db2d4ee867..95dac71280 100644
--- a/packages/core/src/__tests__/__snapshots__/react-state-variables.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/react-state-variables.test.ts.snap
@@ -2344,6 +2344,17 @@ export default TypeDependency;
 "
 `;
 
+exports[`React - stateType: variables > jsx > Javascript Test > typeExternalProps 1`] = `
+"import * as React from \\"react\\";
+
+function TypeExternalProps(props) {
+  return <div>Hello {props.name}! </div>;
+}
+
+export default TypeExternalProps;
+"
+`;
+
 exports[`React - stateType: variables > jsx > Javascript Test > typeExternalStore 1`] = `
 "\\"use client\\";
 import * as React from \\"react\\";
@@ -5152,6 +5163,18 @@ export default TypeDependency;
 "
 `;
 
+exports[`React - stateType: variables > jsx > Typescript Test > typeExternalProps 1`] = `
+"import * as React from \\"react\\";
+import { FooProps } from \\"./foo-props\\";
+
+function TypeExternalProps(props: FooProps) {
+  return <div>Hello {props.name}! </div>;
+}
+
+export default TypeExternalProps;
+"
+`;
+
 exports[`React - stateType: variables > jsx > Typescript Test > typeExternalStore 1`] = `
 "\\"use client\\";
 import * as React from \\"react\\";
diff --git a/packages/core/src/__tests__/__snapshots__/react.test.ts.snap b/packages/core/src/__tests__/__snapshots__/react.test.ts.snap
index 8c02e09a49..e9d00eaa2b 100644
--- a/packages/core/src/__tests__/__snapshots__/react.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/react.test.ts.snap
@@ -3466,6 +3466,17 @@ export default TypeDependency;
 "
 `;
 
+exports[`React - stateType: useState > jsx > Javascript Test > typeExternalProps 1`] = `
+"import * as React from \\"react\\";
+
+function TypeExternalProps(props) {
+  return <div>Hello {props.name}! </div>;
+}
+
+export default TypeExternalProps;
+"
+`;
+
 exports[`React - stateType: useState > jsx > Javascript Test > typeExternalStore 1`] = `
 "\\"use client\\";
 import * as React from \\"react\\";
@@ -7558,6 +7569,18 @@ export default TypeDependency;
 "
 `;
 
+exports[`React - stateType: useState > jsx > Typescript Test > typeExternalProps 1`] = `
+"import * as React from \\"react\\";
+import { FooProps } from \\"./foo-props\\";
+
+function TypeExternalProps(props: FooProps) {
+  return <div>Hello {props.name}! </div>;
+}
+
+export default TypeExternalProps;
+"
+`;
+
 exports[`React - stateType: useState > jsx > Typescript Test > typeExternalStore 1`] = `
 "\\"use client\\";
 import * as React from \\"react\\";
diff --git a/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap b/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap
index 6df6c8d2a5..9bc84bdc36 100644
--- a/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap
@@ -3331,6 +3331,22 @@ export default TypeDependency;
 "
 `;
 
+exports[`RSC > jsx > Javascript Test > typeExternalProps 1`] = `
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
+
+function TypeExternalProps(props) {
+  return <div>Hello {props.name}! </div>;
+}
+
+export default TypeExternalProps;
+"
+`;
+
 exports[`RSC > jsx > Javascript Test > typeExternalStore 1`] = `
 "\\"use client\\";
 import * as React from \\"react\\";
@@ -7260,6 +7276,23 @@ export default TypeDependency;
 "
 `;
 
+exports[`RSC > jsx > Typescript Test > typeExternalProps 1`] = `
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
+import { FooProps } from \\"./foo-props\\";
+
+function TypeExternalProps(props: FooProps) {
+  return <div>Hello {props.name}! </div>;
+}
+
+export default TypeExternalProps;
+"
+`;
+
 exports[`RSC > jsx > Typescript Test > typeExternalStore 1`] = `
 "\\"use client\\";
 import * as React from \\"react\\";
diff --git a/packages/core/src/__tests__/__snapshots__/solid.test.ts.snap b/packages/core/src/__tests__/__snapshots__/solid.test.ts.snap
index cf97f5963c..b6b12106b4 100644
--- a/packages/core/src/__tests__/__snapshots__/solid.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/solid.test.ts.snap
@@ -7574,6 +7574,38 @@ export default TypeDependency;
 "
 `;
 
+exports[`Solid > jsx > Javascript Test > typeExternalProps 1`] = `
+"function TypeExternalProps(props) {
+  return (
+    <>
+      <div>
+        Hello
+        {props.name}!{\\" \\"}
+      </div>
+    </>
+  );
+}
+
+export default TypeExternalProps;
+"
+`;
+
+exports[`Solid > jsx > Javascript Test > typeExternalProps 2`] = `
+"function TypeExternalProps(props) {
+  return (
+    <>
+      <div>
+        Hello
+        {props.name}!{\\" \\"}
+      </div>
+    </>
+  );
+}
+
+export default TypeExternalProps;
+"
+`;
+
 exports[`Solid > jsx > Javascript Test > typeExternalStore 1`] = `
 "import { createSignal, createMemo } from \\"solid-js\\";
 
@@ -16404,6 +16436,42 @@ export default TypeDependency;
 "
 `;
 
+exports[`Solid > jsx > Typescript Test > typeExternalProps 1`] = `
+"import { FooProps } from \\"./foo-props\\";
+
+function TypeExternalProps(props: FooProps) {
+  return (
+    <>
+      <div>
+        Hello
+        {props.name}!{\\" \\"}
+      </div>
+    </>
+  );
+}
+
+export default TypeExternalProps;
+"
+`;
+
+exports[`Solid > jsx > Typescript Test > typeExternalProps 2`] = `
+"import { FooProps } from \\"./foo-props\\";
+
+function TypeExternalProps(props: FooProps) {
+  return (
+    <>
+      <div>
+        Hello
+        {props.name}!{\\" \\"}
+      </div>
+    </>
+  );
+}
+
+export default TypeExternalProps;
+"
+`;
+
 exports[`Solid > jsx > Typescript Test > typeExternalStore 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 7958c9a80c..fe8fe13b0b 100644
--- a/packages/core/src/__tests__/__snapshots__/stencil.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/stencil.test.ts.snap
@@ -3730,6 +3730,27 @@ export class TypeDependency {
 "
 `;
 
+exports[`Stencil > jsx > Javascript Test > typeExternalProps 1`] = `
+"import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
+
+@Component({
+  tag: \\"type-external-props\\",
+})
+export class TypeExternalProps {
+  @Prop() name: any;
+
+  render() {
+    return (
+      <div>
+        Hello
+        {this.name}!{\\" \\"}
+      </div>
+    );
+  }
+}
+"
+`;
+
 exports[`Stencil > jsx > Javascript Test > typeExternalStore 1`] = `
 "import { Component, h, Fragment, State } from \\"@stencil/core\\";
 
@@ -4001,10 +4022,6 @@ export class MyBasicForShowComponent {
 exports[`Stencil > jsx > Typescript Test > AdvancedRef 1`] = `
 "import { Component, h, Fragment, Prop, State } from \\"@stencil/core\\";
 
-export interface Props {
-  showInput: boolean;
-}
-
 @Component({
   tag: \\"my-basic-ref-component\\",
 
@@ -4070,10 +4087,6 @@ exports[`Stencil > jsx > Typescript Test > Basic 1`] = `
 
 import { Component, h, Fragment, State } from \\"@stencil/core\\";
 
-export interface MyBasicComponentProps {
-  id: string;
-}
-
 @Component({
   tag: \\"my-basic-component\\",
 
@@ -4179,11 +4192,6 @@ export class MyBasicComponent {
 exports[`Stencil > jsx > Typescript Test > Basic OnMount Update 1`] = `
 "import { Component, h, Fragment, Prop, State } from \\"@stencil/core\\";
 
-export interface Props {
-  hi: string;
-  bye: string;
-}
-
 @Component({
   tag: \\"my-basic-on-mount-update-component\\",
 })
@@ -4281,11 +4289,6 @@ exports[`Stencil > jsx > Typescript Test > BasicBooleanAttribute 1`] = `
 
 import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
 
-type Props = {
-  children: any;
-  type: string;
-};
-
 @Component({
   tag: \\"my-boolean-attribute\\",
 })
@@ -4388,10 +4391,6 @@ export class MyBasicForComponent {
 exports[`Stencil > jsx > Typescript Test > BasicRef 1`] = `
 "import { Component, h, Fragment, Prop, State } from \\"@stencil/core\\";
 
-export interface Props {
-  showInput: boolean;
-}
-
 @Component({
   tag: \\"my-basic-ref-component\\",
 
@@ -4449,10 +4448,6 @@ export class MyBasicRefComponent {
 exports[`Stencil > jsx > Typescript Test > BasicRefAssignment 1`] = `
 "import { Component, h, Fragment } from \\"@stencil/core\\";
 
-export interface Props {
-  showInput: boolean;
-}
-
 @Component({
   tag: \\"my-basic-ref-assignment-component\\",
 })
@@ -4494,10 +4489,6 @@ exports[`Stencil > jsx > Typescript Test > BasicRefPrevious 1`] = `
 
 import { Component, h, Fragment, State } from \\"@stencil/core\\";
 
-export interface Props {
-  showInput: boolean;
-}
-
 @Component({
   tag: \\"my-previous-component\\",
 })
@@ -4529,13 +4520,6 @@ export class MyPreviousComponent {
 exports[`Stencil > jsx > Typescript Test > Button 1`] = `
 "import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
 
-export interface ButtonProps {
-  attributes?: any;
-  text?: string;
-  link?: string;
-  openLinkInNewTab?: boolean;
-}
-
 @Component({
   tag: \\"button\\",
 })
@@ -4572,21 +4556,6 @@ export class Button {
 exports[`Stencil > jsx > Typescript Test > Columns 1`] = `
 "import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
 
-type Column = {
-  content: any; // TODO: Implement this when support for dynamic CSS lands
-
-  width?: number;
-};
-export interface ColumnProps {
-  columns?: Column[]; // TODO: Implement this when support for dynamic CSS lands
-
-  space?: number; // TODO: Implement this when support for dynamic CSS lands
-
-  stackColumnsAt?: \\"tablet\\" | \\"mobile\\" | \\"never\\"; // TODO: Implement this when support for dynamic CSS lands
-
-  reverseColumnsWhenStacked?: boolean;
-}
-
 @Component({
   tag: \\"column\\",
 
@@ -4654,11 +4623,6 @@ exports[`Stencil > jsx > Typescript Test > ContentSlotHtml 1`] = `
 
 import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
 
-type Props = {
-  [key: string]: string | JSX.Element;
-  slotTesting: JSX.Element;
-};
-
 @Component({
   tag: \\"content-slot-code\\",
 })
@@ -4687,10 +4651,6 @@ exports[`Stencil > jsx > Typescript Test > ContentSlotJSX 1`] = `
 
 import { Component, h, Fragment, Host, Prop, State } from \\"@stencil/core\\";
 
-type Props = {
-  [key: string]: string | JSX.Element;
-};
-
 @Component({
   tag: \\"content-slot-jsx-code\\",
 })
@@ -4742,11 +4702,6 @@ export class ContentSlotJsxCode {
 exports[`Stencil > jsx > Typescript Test > CustomCode 1`] = `
 "import { Component, h, Fragment, Prop, State } from \\"@stencil/core\\";
 
-export interface CustomCodeProps {
-  code: string;
-  replaceNodes?: boolean;
-}
-
 @Component({
   tag: \\"custom-code\\",
 })
@@ -4821,11 +4776,6 @@ export class CustomCode {
 exports[`Stencil > jsx > Typescript Test > Embed 1`] = `
 "import { Component, h, Fragment, Prop, State } from \\"@stencil/core\\";
 
-export interface CustomCodeProps {
-  code: string;
-  replaceNodes?: boolean;
-}
-
 @Component({
   tag: \\"custom-code\\",
 })
@@ -4908,30 +4858,6 @@ import {
 
 import { Component, h, Fragment, Prop, State } from \\"@stencil/core\\";
 
-export interface FormProps {
-  attributes?: any;
-  name?: string;
-  action?: string;
-  validate?: boolean;
-  method?: string;
-  builderBlock?: BuilderElement;
-  sendSubmissionsTo?: string;
-  sendSubmissionsToEmail?: string;
-  sendWithJs?: boolean;
-  contentType?: string;
-  customHeaders?: {
-    [key: string]: string;
-  };
-  successUrl?: string;
-  previewState?: FormState;
-  successMessage?: BuilderElement[];
-  errorMessage?: BuilderElement[];
-  sendingMessage?: BuilderElement[];
-  resetFormOnSubmit?: boolean;
-  errorMessagePath?: string;
-}
-export type FormState = \\"unsubmitted\\" | \\"sending\\" | \\"success\\" | \\"error\\";
-
 @Component({
   tag: \\"form-component\\",
 
@@ -5244,25 +5170,6 @@ export class FormComponent {
 exports[`Stencil > jsx > Typescript Test > Image 1`] = `
 "import { Component, h, Fragment, Prop, State } from \\"@stencil/core\\";
 
-// TODO: AMP Support?
-export interface ImageProps {
-  _class?: string;
-  image: string;
-  sizes?: string;
-  lazy?: boolean;
-  height?: number;
-  width?: number;
-  altText?: string;
-  backgroundSize?: string;
-  backgroundPosition?: string; // TODO: Support generating Builder.io and or Shopify \`srcset\`s when needed
-
-  srcset?: string; // TODO: Implement support for custom aspect ratios
-
-  aspectRatio?: number; // TODO: This might not work as expected in terms of positioning
-
-  children?: any;
-}
-
 @Component({
   tag: \\"image\\",
 
@@ -5390,23 +5297,6 @@ exports[`Stencil > jsx > Typescript Test > Img 1`] = `
 
 import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
 
-export interface ImgProps {
-  attributes?: any;
-  imgSrc?: string;
-  altText?: string;
-  backgroundSize?: \\"cover\\" | \\"contain\\";
-  backgroundPosition?:
-    | \\"center\\"
-    | \\"top\\"
-    | \\"left\\"
-    | \\"right\\"
-    | \\"bottom\\"
-    | \\"top left\\"
-    | \\"top right\\"
-    | \\"bottom left\\"
-    | \\"bottom right\\";
-}
-
 @Component({
   tag: \\"img-component\\",
 })
@@ -5440,17 +5330,6 @@ exports[`Stencil > jsx > Typescript Test > Input 1`] = `
 
 import { Component, h, Fragment, Event, Prop } from \\"@stencil/core\\";
 
-export interface FormInputProps {
-  type?: string;
-  attributes?: any;
-  name?: string;
-  value?: string;
-  placeholder?: string;
-  defaultValue?: string;
-  required?: boolean;
-  onChange?: (value: string) => void;
-}
-
 @Component({
   tag: \\"form-input-component\\",
 })
@@ -5516,11 +5395,6 @@ export class Stepper {
 exports[`Stencil > jsx > Typescript Test > NestedStore 1`] = `
 "import { Component, h, Fragment, State } from \\"@stencil/core\\";
 
-type MyStore = {
-  _id?: string;
-  _messageId?: string;
-};
-
 @Component({
   tag: \\"nested-store\\",
 })
@@ -5543,11 +5417,6 @@ export class NestedStore {
 exports[`Stencil > jsx > Typescript Test > RawText 1`] = `
 "import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
 
-export interface RawTextProps {
-  attributes?: any;
-  text?: string; // builderBlock?: any;
-}
-
 @Component({
   tag: \\"raw-text\\",
 })
@@ -5570,12 +5439,6 @@ export class RawText {
 exports[`Stencil > jsx > Typescript Test > Section 1`] = `
 "import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
 
-export interface SectionProps {
-  maxWidth?: number;
-  attributes?: any;
-  children?: any;
-}
-
 @Component({
   tag: \\"section-component\\",
 })
@@ -5607,12 +5470,6 @@ export class SectionComponent {
 exports[`Stencil > jsx > Typescript Test > Section 2`] = `
 "import { Component, h, Fragment, Host, Prop, State } from \\"@stencil/core\\";
 
-export interface SectionProps {
-  maxWidth?: number;
-  attributes?: any;
-  children?: any;
-}
-
 @Component({
   tag: \\"section-state-component\\",
 })
@@ -5649,17 +5506,6 @@ exports[`Stencil > jsx > Typescript Test > Select 1`] = `
 
 import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
 
-export interface FormSelectProps {
-  options?: {
-    name?: string;
-    value: string;
-  }[];
-  attributes?: any;
-  name?: string;
-  value?: string;
-  defaultValue?: string;
-}
-
 @Component({
   tag: \\"select-component\\",
 })
@@ -5698,10 +5544,6 @@ export class SelectComponent {
 exports[`Stencil > jsx > Typescript Test > SlotDefault 1`] = `
 "import { Component, h, Fragment } from \\"@stencil/core\\";
 
-type Props = {
-  [key: string]: string;
-};
-
 @Component({
   tag: \\"slot-code\\",
 })
@@ -5724,10 +5566,6 @@ exports[`Stencil > jsx > Typescript Test > SlotHtml 1`] = `
 
 import { Component, h, Fragment } from \\"@stencil/core\\";
 
-type Props = {
-  [key: string]: string;
-};
-
 @Component({
   tag: \\"slot-code\\",
 })
@@ -5750,10 +5588,6 @@ exports[`Stencil > jsx > Typescript Test > SlotJsx 1`] = `
 
 import { Component, h, Fragment } from \\"@stencil/core\\";
 
-type Props = {
-  [key: string]: string;
-};
-
 @Component({
   tag: \\"slot-code\\",
 })
@@ -5772,10 +5606,6 @@ export class SlotCode {
 exports[`Stencil > jsx > Typescript Test > SlotNamed 1`] = `
 "import { Component, h, Fragment } from \\"@stencil/core\\";
 
-type Props = {
-  [key: string]: string;
-};
-
 @Component({
   tag: \\"slot-code\\",
 })
@@ -5799,11 +5629,6 @@ exports[`Stencil > jsx > Typescript Test > Stamped.io 1`] = `
 
 import { Component, h, Fragment, Prop, State } from \\"@stencil/core\\";
 
-type SmileReviewsProps = {
-  productId: string;
-  apiKey: string;
-};
-
 @Component({
   tag: \\"smile-reviews\\",
 
@@ -5965,11 +5790,6 @@ export class MyComponent {
 exports[`Stencil > jsx > Typescript Test > Submit 1`] = `
 "import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
 
-export interface ButtonProps {
-  attributes?: any;
-  text?: string;
-}
-
 @Component({
   tag: \\"submit-button\\",
 })
@@ -5993,14 +5813,6 @@ exports[`Stencil > jsx > Typescript Test > Text 1`] = `
 
 import { Component, h, Fragment, Prop, State } from \\"@stencil/core\\";
 
-export interface TextProps {
-  attributes?: any;
-  rtlMode: boolean;
-  text?: string;
-  content?: string;
-  builderBlock?: any;
-}
-
 @Component({
   tag: \\"text\\",
 })
@@ -6032,14 +5844,6 @@ export class Text {
 exports[`Stencil > jsx > Typescript Test > Textarea 1`] = `
 "import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
 
-export interface TextareaProps {
-  attributes?: any;
-  name?: string;
-  value?: string;
-  defaultValue?: string;
-  placeholder?: string;
-}
-
 @Component({
   tag: \\"textarea\\",
 })
@@ -6068,15 +5872,6 @@ export class Textarea {
 exports[`Stencil > jsx > Typescript Test > UseValueAndFnFromStore 1`] = `
 "import { Component, h, Fragment, Event, Prop, State } from \\"@stencil/core\\";
 
-type MyProps = {
-  onChange?: (active: boolean) => void;
-};
-type MyStore = {
-  _id?: string;
-  _active?: boolean;
-  _do?: (id?: string) => void;
-};
-
 @Component({
   tag: \\"use-value-and-fn-from-store\\",
 })
@@ -6109,32 +5904,6 @@ export class UseValueAndFnFromStore {
 exports[`Stencil > jsx > Typescript Test > Video 1`] = `
 "import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
 
-export interface VideoProps {
-  attributes?: any;
-  video?: string;
-  autoPlay?: boolean;
-  controls?: boolean;
-  muted?: boolean;
-  loop?: boolean;
-  playsInline?: boolean;
-  aspectRatio?: number;
-  width?: number;
-  height?: number;
-  fit?: \\"contain\\" | \\"cover\\" | \\"fill\\";
-  position?:
-    | \\"center\\"
-    | \\"top\\"
-    | \\"left\\"
-    | \\"right\\"
-    | \\"bottom\\"
-    | \\"top left\\"
-    | \\"top right\\"
-    | \\"bottom left\\"
-    | \\"bottom right\\";
-  posterImage?: string;
-  lazyLoad?: boolean;
-}
-
 @Component({
   tag: \\"video\\",
 })
@@ -6278,11 +6047,6 @@ export class MyBasicForNoTagRefComponent {
 exports[`Stencil > jsx > Typescript Test > basicForwardRef 1`] = `
 "import { Component, h, Fragment, Prop, State } from \\"@stencil/core\\";
 
-export interface Props {
-  showInput: boolean;
-  inputRef: HTMLInputElement;
-}
-
 @Component({
   tag: \\"my-basic-forward-ref-component\\",
 
@@ -6320,11 +6084,6 @@ exports[`Stencil > jsx > Typescript Test > basicForwardRefMetadata 1`] = `
 
 import { Component, h, Fragment, Prop, State } from \\"@stencil/core\\";
 
-export interface Props {
-  showInput: boolean;
-  inputRef: HTMLInputElement;
-}
-
 @Component({
   tag: \\"my-basic-forward-ref-component\\",
 
@@ -6476,11 +6235,6 @@ exports[`Stencil > jsx > Typescript Test > className 1`] = `
 
 import { Component, h, Fragment, State } from \\"@stencil/core\\";
 
-type Props = {
-  [key: string]: string | JSX.Element;
-  slotTesting: JSX.Element;
-};
-
 @Component({
   tag: \\"class-name-code\\",
 })
@@ -6553,10 +6307,6 @@ import Context2 from \\"@dummy/2\\";
 
 import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
 
-export interface ComponentWithContextProps {
-  content: string;
-}
-
 @Component({
   tag: \\"component-with-context\\",
 })
@@ -6580,10 +6330,6 @@ import Context2 from \\"@dummy/2\\";
 
 import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
 
-export interface ComponentWithContextProps {
-  content: string;
-}
-
 @Component({
   tag: \\"component-with-context\\",
 })
@@ -6624,16 +6370,6 @@ export class RenderContent {
 exports[`Stencil > jsx > Typescript Test > defaultProps 1`] = `
 "import { Component, h, Fragment, Event, Prop } from \\"@stencil/core\\";
 
-export interface ButtonProps {
-  attributes?: any;
-  text?: string;
-  buttonText?: string; // no default value
-
-  link?: string;
-  openLinkInNewTab?: boolean;
-  onClick?: () => void;
-}
-
 @Component({
   tag: \\"button\\",
 })
@@ -6678,14 +6414,6 @@ export class Button {
 exports[`Stencil > jsx > Typescript Test > defaultPropsOutsideComponent 1`] = `
 "import { Component, h, Fragment, Event, Prop } from \\"@stencil/core\\";
 
-export interface ButtonProps {
-  attributes?: any;
-  text?: string;
-  link?: string;
-  openLinkInNewTab?: boolean;
-  onClick: () => void;
-}
-
 @Component({
   tag: \\"button\\",
 })
@@ -6731,10 +6459,6 @@ exports[`Stencil > jsx > Typescript Test > defaultValsWithTypes 1`] = `
 
 import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
 
-type Props = {
-  name: string;
-};
-
 @Component({
   tag: \\"component-with-types\\",
 })
@@ -6842,10 +6566,6 @@ export class FigmaButton {
 exports[`Stencil > jsx > Typescript Test > getterState 1`] = `
 "import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
 
-export interface ButtonProps {
-  foo: string;
-}
-
 @Component({
   tag: \\"button\\",
 })
@@ -6881,12 +6601,6 @@ import { RenderBlock } from \\"./builder-render-block.raw\\";
 
 import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
 
-type RenderContentProps = {
-  options?: GetContentOptions;
-  content: BuilderContent;
-  renderContentProps: RenderBlockProps;
-};
-
 @Component({
   tag: \\"render-content\\",
 })
@@ -7075,10 +6789,6 @@ exports[`Stencil > jsx > Typescript Test > onInit 1`] = `
 
 import { Component, h, Fragment, Prop, State } from \\"@stencil/core\\";
 
-type Props = {
-  name: string;
-};
-
 @Component({
   tag: \\"on-init\\",
 })
@@ -7183,10 +6893,6 @@ export class OnUpdate {
 exports[`Stencil > jsx > Typescript Test > onUpdateWithDeps 1`] = `
 "import { Component, h, Fragment, Prop, State } from \\"@stencil/core\\";
 
-type Props = {
-  size: string;
-};
-
 @Component({
   tag: \\"on-update-with-deps\\",
 })
@@ -7215,16 +6921,6 @@ export function run<T>(value: T) {}
 
 import { Component, h, Fragment } from \\"@stencil/core\\";
 
-type Types = {
-  s: any[];
-};
-interface IPost {
-  len: number;
-}
-export interface MyBasicComponentProps {
-  id: string;
-}
-
 @Component({
   tag: \\"my-basic-component\\",
 })
@@ -7239,19 +6935,6 @@ export class MyBasicComponent {
 exports[`Stencil > jsx > Typescript Test > preserveTyping 1`] = `
 "import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
 
-export type A = \\"test\\";
-export interface C {
-  n: \\"test\\";
-}
-type B = \\"test2\\";
-interface D {
-  n: \\"test\\";
-}
-export interface MyBasicComponentProps {
-  name: string;
-  age?: number;
-}
-
 @Component({
   tag: \\"my-basic-component\\",
 })
@@ -7273,11 +6956,6 @@ export class MyBasicComponent {
 exports[`Stencil > jsx > Typescript Test > propsDestructure 1`] = `
 "import { Component, h, Fragment, Prop, State } from \\"@stencil/core\\";
 
-type Props = {
-  children: any;
-  type: string;
-};
-
 @Component({
   tag: \\"my-basic-component\\",
 })
@@ -7302,11 +6980,6 @@ export class MyBasicComponent {
 exports[`Stencil > jsx > Typescript Test > propsInterface 1`] = `
 "import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
 
-interface Person {
-  name: string;
-  age?: number;
-}
-
 @Component({
   tag: \\"my-basic-component\\",
 })
@@ -7328,11 +7001,6 @@ export class MyBasicComponent {
 exports[`Stencil > jsx > Typescript Test > propsType 1`] = `
 "import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
 
-type Person = {
-  name: string;
-  age?: number;
-};
-
 @Component({
   tag: \\"my-basic-component\\",
 })
@@ -7405,11 +7073,6 @@ import type { RepeatData } from \\"./types.js\\";
 
 import { Component, h, Fragment, Host, Prop } from \\"@stencil/core\\";
 
-export type RenderBlockProps = {
-  block: BuilderBlock;
-  context: BuilderContextInterface;
-};
-
 @Component({
   tag: \\"render-block\\",
 })
@@ -7652,14 +7315,6 @@ import { RenderBlocks } from \\"@dummy/RenderBlocks.lite.tsx\\";
 
 import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
 
-type Props = {
-  customComponents: string[];
-  content: {
-    blocks: any[];
-    id: string;
-  };
-};
-
 @Component({
   tag: \\"render-content\\",
 
@@ -7696,13 +7351,6 @@ export class RenderContent {
 exports[`Stencil > jsx > Typescript Test > rootFragmentMultiNode 1`] = `
 "import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
 
-export interface ButtonProps {
-  attributes?: any;
-  text?: string;
-  link?: string;
-  openLinkInNewTab?: boolean;
-}
-
 @Component({
   tag: \\"button\\",
 })
@@ -7813,15 +7461,6 @@ export class SetState {
 exports[`Stencil > jsx > Typescript Test > signalsOnUpdate 1`] = `
 "import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
 
-type Props = {
-  id: string;
-  foo: {
-    bar: {
-      baz: number;
-    };
-  };
-};
-
 @Component({
   tag: \\"my-basic-component\\",
 
@@ -8053,11 +7692,6 @@ import type { Foo as Foo2 } from \\"./type-export\\";
 
 import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
 
-export type TypeDependencyProps = {
-  foo: Foo;
-  foo2: Foo2;
-};
-
 @Component({
   tag: \\"type-dependency\\",
 })
@@ -8071,6 +7705,29 @@ export class TypeDependency {
 "
 `;
 
+exports[`Stencil > jsx > Typescript Test > typeExternalProps 1`] = `
+"import { FooProps } from \\"./foo-props\\";
+
+import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
+
+@Component({
+  tag: \\"type-external-props\\",
+})
+export class TypeExternalProps {
+  @Prop() name: FooProps[\\"name\\"];
+
+  render() {
+    return (
+      <div>
+        Hello
+        {this.name}!{\\" \\"}
+      </div>
+    );
+  }
+}
+"
+`;
+
 exports[`Stencil > jsx > Typescript Test > typeExternalStore 1`] = `
 "import { FooStore } from \\"./foo-store\\";
 
@@ -8097,12 +7754,6 @@ export class TypeExternalStore {
 exports[`Stencil > jsx > Typescript Test > typeGetterStore 1`] = `
 "import { Component, h, Fragment, State } from \\"@stencil/core\\";
 
-type GetterStore = {
-  getName: () => string;
-  name: string;
-  get test(): string;
-};
-
 @Component({
   tag: \\"type-getter-store\\",
 })
diff --git a/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap b/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap
index 28bec618de..c362e35d4e 100644
--- a/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap
@@ -3101,6 +3101,14 @@ exports[`Svelte > jsx > Javascript Test > typeDependency 1`] = `
 <div>{foo}</div>"
 `;
 
+exports[`Svelte > jsx > Javascript Test > typeExternalProps 1`] = `
+"<script>
+  export let name;
+</script>
+
+<div>Hello {name}!</div>"
+`;
+
 exports[`Svelte > jsx > Javascript Test > typeExternalStore 1`] = `
 "<script>
   let _name = \\"test\\";
@@ -6933,6 +6941,16 @@ exports[`Svelte > jsx > Typescript Test > typeDependency 1`] = `
 <div>{foo}</div>"
 `;
 
+exports[`Svelte > jsx > Typescript Test > typeExternalProps 1`] = `
+"<script lang=\\"ts\\">
+  import { FooProps } from \\"./foo-props\\";
+
+  export let name: FooProps[\\"name\\"] = undefined;
+</script>
+
+<div>Hello {name}!</div>"
+`;
+
 exports[`Svelte > jsx > Typescript Test > typeExternalStore 1`] = `
 "<script lang=\\"ts\\">
   import { FooStore } from \\"./foo-store\\";
diff --git a/packages/core/src/__tests__/__snapshots__/taro.test.ts.snap b/packages/core/src/__tests__/__snapshots__/taro.test.ts.snap
index 8126b532fe..55623674a0 100644
--- a/packages/core/src/__tests__/__snapshots__/taro.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/taro.test.ts.snap
@@ -3535,6 +3535,18 @@ export default TypeDependency;
 "
 `;
 
+exports[`Taro > jsx > Javascript Test > typeExternalProps 1`] = `
+"import * as React from \\"react\\";
+import { View, Text } from \\"@tarojs/components\\";
+
+function TypeExternalProps(props) {
+  return <View>Hello {props.name}! </View>;
+}
+
+export default TypeExternalProps;
+"
+`;
+
 exports[`Taro > jsx > Javascript Test > typeExternalStore 1`] = `
 "\\"use client\\";
 import * as React from \\"react\\";
@@ -7731,6 +7743,19 @@ export default TypeDependency;
 "
 `;
 
+exports[`Taro > jsx > Typescript Test > typeExternalProps 1`] = `
+"import * as React from \\"react\\";
+import { FooProps } from \\"./foo-props\\";
+import { View, Text } from \\"@tarojs/components\\";
+
+function TypeExternalProps(props: FooProps) {
+  return <View>Hello {props.name}! </View>;
+}
+
+export default TypeExternalProps;
+"
+`;
+
 exports[`Taro > jsx > Typescript Test > typeExternalStore 1`] = `
 "\\"use client\\";
 import * as React from \\"react\\";
diff --git a/packages/core/src/__tests__/__snapshots__/vue-composition.test.ts.snap b/packages/core/src/__tests__/__snapshots__/vue-composition.test.ts.snap
index 8e001ee85b..11533182ad 100644
--- a/packages/core/src/__tests__/__snapshots__/vue-composition.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/vue-composition.test.ts.snap
@@ -3269,6 +3269,16 @@ const props = defineProps([\\"foo\\"]);
 </script>"
 `;
 
+exports[`Vue > jsx > Javascript Test > typeExternalProps 1`] = `
+"<template>
+  <div>Hello {{ name }}!</div>
+</template>
+
+<script setup>
+const props = defineProps([\\"name\\"]);
+</script>"
+`;
+
 exports[`Vue > jsx > Javascript Test > typeExternalStore 1`] = `
 "<template>
   <div>Hello {{ _name }}!</div>
@@ -7057,6 +7067,18 @@ const props = defineProps<TypeDependencyProps>();
 </script>"
 `;
 
+exports[`Vue > jsx > Typescript Test > typeExternalProps 1`] = `
+"<template>
+  <div>Hello {{ name }}!</div>
+</template>
+
+<script setup lang=\\"ts\\">
+import { FooProps } from \\"./foo-props\\";
+
+const props = defineProps<FooProps>();
+</script>"
+`;
+
 exports[`Vue > jsx > Typescript Test > typeExternalStore 1`] = `
 "<template>
   <div>Hello {{ _name }}!</div>
diff --git a/packages/core/src/__tests__/__snapshots__/vue.test.ts.snap b/packages/core/src/__tests__/__snapshots__/vue.test.ts.snap
index 05c3a9c3ca..ae57c55487 100644
--- a/packages/core/src/__tests__/__snapshots__/vue.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/vue.test.ts.snap
@@ -4071,6 +4071,22 @@ export default defineComponent({
 </script>"
 `;
 
+exports[`Vue > jsx > Javascript Test > typeExternalProps 1`] = `
+"<template>
+  <div>Hello {{ name }}!</div>
+</template>
+
+<script>
+import { defineComponent } from \\"vue\\";
+
+export default defineComponent({
+  name: \\"type-external-props\\",
+
+  props: [\\"name\\"],
+});
+</script>"
+`;
+
 exports[`Vue > jsx > Javascript Test > typeExternalStore 1`] = `
 "<template>
   <div>Hello {{ _name }}!</div>
@@ -8776,6 +8792,24 @@ export default defineComponent({
 </script>"
 `;
 
+exports[`Vue > jsx > Typescript Test > typeExternalProps 1`] = `
+"<template>
+  <div>Hello {{ name }}!</div>
+</template>
+
+<script lang=\\"ts\\">
+import { defineComponent } from \\"vue\\";
+
+import { FooProps } from \\"./foo-props\\";
+
+export default defineComponent({
+  name: \\"type-external-props\\",
+
+  props: [\\"name\\"],
+});
+</script>"
+`;
+
 exports[`Vue > jsx > Typescript Test > typeExternalStore 1`] = `
 "<template>
   <div>Hello {{ _name }}!</div>
diff --git a/packages/core/src/__tests__/__snapshots__/webcomponent.test.ts.snap b/packages/core/src/__tests__/__snapshots__/webcomponent.test.ts.snap
index 1e28e23eff..98b9be17a3 100644
--- a/packages/core/src/__tests__/__snapshots__/webcomponent.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/webcomponent.test.ts.snap
@@ -16338,6 +16338,119 @@ customElements.define(\\"type-dependency\\", TypeDependency);
 "
 `;
 
+exports[`webcomponent > jsx > Javascript Test > typeExternalProps 1`] = `
+"/**
+ * Usage:
+ *
+ *  <type-external-props></type-external-props>
+ *
+ */
+class TypeExternalProps extends HTMLElement {
+  get _root() {
+    return this.shadowRoot || this;
+  }
+
+  constructor() {
+    super();
+    const self = this;
+
+    this.state = {};
+    if (!this.props) {
+      this.props = {};
+    }
+
+    this.componentProps = [\\"name\\"];
+
+    // 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>
+        Hello
+        <template data-el=\\"div-type-external-props-1\\"><!-- props.name --></template>
+        !
+      </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-type-external-props-1']\\")
+      .forEach((el) => {
+        this.renderTextNode(el, this.props.name);
+      });
+  }
+
+  // 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(\\"type-external-props\\", TypeExternalProps);
+"
+`;
+
 exports[`webcomponent > jsx > Javascript Test > typeExternalStore 1`] = `
 "/**
  * Usage:
@@ -33505,6 +33618,121 @@ customElements.define(\\"type-dependency\\", TypeDependency);
 "
 `;
 
+exports[`webcomponent > jsx > Typescript Test > typeExternalProps 1`] = `
+"import { FooProps } from \\"./foo-props\\";
+
+/**
+ * Usage:
+ *
+ *  <type-external-props></type-external-props>
+ *
+ */
+class TypeExternalProps extends HTMLElement {
+  get _root() {
+    return this.shadowRoot || this;
+  }
+
+  constructor() {
+    super();
+    const self = this;
+
+    this.state = {};
+    if (!this.props) {
+      this.props = {};
+    }
+
+    this.componentProps = [\\"name\\"];
+
+    // 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>
+        Hello
+        <template data-el=\\"div-type-external-props-1\\"><!-- props.name --></template>
+        !
+      </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-type-external-props-1']\\")
+      .forEach((el) => {
+        this.renderTextNode(el, this.props.name);
+      });
+  }
+
+  // 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(\\"type-external-props\\", TypeExternalProps);
+"
+`;
+
 exports[`webcomponent > jsx > Typescript Test > typeExternalStore 1`] = `
 "import { FooStore } from \\"./foo-store\\";
 
diff --git a/packages/core/src/__tests__/data/types/foo-props.ts b/packages/core/src/__tests__/data/types/foo-props.ts
new file mode 100644
index 0000000000..b86124e556
--- /dev/null
+++ b/packages/core/src/__tests__/data/types/foo-props.ts
@@ -0,0 +1 @@
+export type FooProps = { name?: string };
diff --git a/packages/core/src/__tests__/data/types/type-external-props.raw.tsx b/packages/core/src/__tests__/data/types/type-external-props.raw.tsx
new file mode 100644
index 0000000000..8b62a50ad1
--- /dev/null
+++ b/packages/core/src/__tests__/data/types/type-external-props.raw.tsx
@@ -0,0 +1,5 @@
+import { FooProps } from './foo-props';
+
+export default function TypeExternalProps(props: FooProps) {
+  return <div>Hello {props.name}! </div>;
+}
diff --git a/packages/core/src/__tests__/test-generator.ts b/packages/core/src/__tests__/test-generator.ts
index d3b759a6fe..9afd12cb16 100644
--- a/packages/core/src/__tests__/test-generator.ts
+++ b/packages/core/src/__tests__/test-generator.ts
@@ -53,6 +53,7 @@ const propsInterface = getRawFile('./data/types/component-props-interface.raw.ts
 const preserveTyping = getRawFile('./data/types/preserve-typing.raw.tsx');
 const typeDependency = getRawFile('./data/types/type-dependency.raw.tsx');
 const typeExternalStore = getRawFile('./data/types/type-external-store.raw.tsx');
+const typeExternalProps = getRawFile('./data/types/type-external-props.raw.tsx');
 const typeGetterStore = getRawFile('./data/types/type-getter-store.raw.tsx');
 
 const defaultProps = getRawFile('./data/default-props/default-props.raw.tsx');
@@ -220,6 +221,7 @@ const BASIC_TESTS: Tests = {
   preserveTyping: preserveTyping,
   typeDependency,
   typeExternalStore,
+  typeExternalProps,
   typeGetterStore,
   defaultValsWithTypes: getRawFile('./data/types/component-with-default-values-types.raw.tsx'),
   'import types': builderRenderContent,
diff --git a/packages/core/src/generators/stencil/component.ts b/packages/core/src/generators/stencil/component.ts
index e9609de63e..ed31890430 100644
--- a/packages/core/src/generators/stencil/component.ts
+++ b/packages/core/src/generators/stencil/component.ts
@@ -112,8 +112,6 @@ export const componentToStencil: TranspilerGenerator<ToStencilOptions> =
     ${getImports(json, options, childComponents)}
     
     import { ${coreImports} } from '@stencil/core';
-        
-    ${json.types ? json.types.join('\n') : ''}
     
     @Component({
       tag: '${tagName}',
@@ -127,7 +125,7 @@ export const componentToStencil: TranspilerGenerator<ToStencilOptions> =
     })
     export class ${json.name} {
         ${refs}
-        ${getPropsAsCode(props, defaultProps, json.propsTypeRef)}
+        ${getPropsAsCode(props, json, defaultProps)}
         ${dataString}
         ${methodsString}
 
diff --git a/packages/core/src/generators/stencil/helpers/index.ts b/packages/core/src/generators/stencil/helpers/index.ts
index f4dd441239..ff03bdf4fc 100644
--- a/packages/core/src/generators/stencil/helpers/index.ts
+++ b/packages/core/src/generators/stencil/helpers/index.ts
@@ -42,9 +42,12 @@ export const getTagName = (name: string, { prefix }: ToStencilOptions): string =
 
 export const getPropsAsCode = (
   props: string[],
+  json: MitosisComponent,
   defaultProps?: MitosisState | undefined,
-  propsTypeRef?: string,
 ): string => {
+  const propsTypeRef: string | undefined = json.propsTypeRef;
+  const internalTypes: string[] | undefined = json.types;
+
   return props
     .map((item: string) => {
       const defaultProp: string | undefined = defaultProps ? defaultProps[item]?.code : undefined;
@@ -58,7 +61,8 @@ export const getPropsAsCode = (
         propsTypeRef &&
         propsTypeRef !== 'any' &&
         propsTypeRef !== 'unknown' &&
-        propsTypeRef !== 'never'
+        propsTypeRef !== 'never' &&
+        (!internalTypes || !internalTypes.includes(propsTypeRef))
           ? `${propsTypeRef}["${item}"]`
           : 'any';
       return `@Prop() ${item}: ${type}${defaultPropString}`;

From 37d430e10ac35de524721e58d1e7a41771fa10d9 Mon Sep 17 00:00:00 2001
From: Nicolas Merget <nicolas.merget@deutschebahn.com>
Date: Thu, 16 Jan 2025 16:58:24 +0100
Subject: [PATCH 10/20] fix: issue with stencil types for e2e

---
 .../__snapshots__/stencil.test.ts.snap        | 248 +++++++++---------
 packages/core/src/__tests__/stencil.test.ts   |   5 +-
 .../src/generators/stencil/helpers/index.ts   |   4 +-
 3 files changed, 129 insertions(+), 128 deletions(-)

diff --git a/packages/core/src/__tests__/__snapshots__/stencil.test.ts.snap b/packages/core/src/__tests__/__snapshots__/stencil.test.ts.snap
index fe8fe13b0b..80c4651d23 100644
--- a/packages/core/src/__tests__/__snapshots__/stencil.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/stencil.test.ts.snap
@@ -4034,7 +4034,7 @@ exports[`Stencil > jsx > Typescript Test > AdvancedRef 1`] = `
 export class MyBasicRefComponent {
   private inputRef!: HTMLInputElement;
   private inputNoArgRef!: HTMLLabelElement;
-  @Prop() showInput: Props[\\"showInput\\"];
+  @Prop() showInput: any;
   @State() name = \\"PatrickJS\\";
 
   onBlur = function onBlur() {
@@ -4196,8 +4196,8 @@ exports[`Stencil > jsx > Typescript Test > Basic OnMount Update 1`] = `
   tag: \\"my-basic-on-mount-update-component\\",
 })
 export class MyBasicOnMountUpdateComponent {
-  @Prop() bye: Props[\\"bye\\"];
-  @Prop() hi: Props[\\"hi\\"];
+  @Prop() bye: any;
+  @Prop() hi: any;
   @State() name = \\"PatrickJS\\";
   @State() names = [\\"Steve\\", \\"PatrickJS\\"];
 
@@ -4293,8 +4293,8 @@ import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
   tag: \\"my-boolean-attribute\\",
 })
 export class MyBooleanAttribute {
-  @Prop() children: Props[\\"children\\"];
-  @Prop() type: Props[\\"type\\"];
+  @Prop() children: any;
+  @Prop() type: any;
 
   render() {
     return (
@@ -4403,7 +4403,7 @@ exports[`Stencil > jsx > Typescript Test > BasicRef 1`] = `
 export class MyBasicRefComponent {
   private inputRef!: HTMLInputElement | null;
   private inputNoArgRef!: HTMLLabelElement | null;
-  @Prop() showInput: Props[\\"showInput\\"];
+  @Prop() showInput: any;
   @State() name = \\"PatrickJS\\";
 
   onBlur = function onBlur() {
@@ -4524,10 +4524,10 @@ exports[`Stencil > jsx > Typescript Test > Button 1`] = `
   tag: \\"button\\",
 })
 export class Button {
-  @Prop() link: ButtonProps[\\"link\\"];
-  @Prop() attributes: ButtonProps[\\"attributes\\"];
-  @Prop() openLinkInNewTab: ButtonProps[\\"openLinkInNewTab\\"];
-  @Prop() text: ButtonProps[\\"text\\"];
+  @Prop() link: any;
+  @Prop() attributes: any;
+  @Prop() openLinkInNewTab: any;
+  @Prop() text: any;
 
   render() {
     return (
@@ -4582,8 +4582,8 @@ exports[`Stencil > jsx > Typescript Test > Columns 1`] = `
 \`,
 })
 export class Column {
-  @Prop() columns: ColumnProps[\\"columns\\"];
-  @Prop() space: ColumnProps[\\"space\\"];
+  @Prop() columns: any;
+  @Prop() space: any;
 
   getColumns() {
     return this.columns || [];
@@ -4627,7 +4627,7 @@ import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
   tag: \\"content-slot-code\\",
 })
 export class ContentSlotCode {
-  @Prop() slotTesting: Props[\\"slotTesting\\"];
+  @Prop() slotTesting: any;
 
   render() {
     return (
@@ -4655,11 +4655,11 @@ import { Component, h, Fragment, Host, Prop, State } from \\"@stencil/core\\";
   tag: \\"content-slot-jsx-code\\",
 })
 export class ContentSlotJsxCode {
-  @Prop() slotContent: Props[\\"slotContent\\"] = undefined;
-  @Prop() children: Props[\\"children\\"];
-  @Prop() slotReference: Props[\\"slotReference\\"] = undefined;
-  @Prop() attributes: Props[\\"attributes\\"];
-  @Prop() content: Props[\\"content\\"] = \\"\\";
+  @Prop() slotContent: any = undefined;
+  @Prop() children: any;
+  @Prop() slotReference: any = undefined;
+  @Prop() attributes: any;
+  @Prop() content: any = \\"\\";
   @State() name = \\"king\\";
   @State() showContent = false;
 
@@ -4707,8 +4707,8 @@ exports[`Stencil > jsx > Typescript Test > CustomCode 1`] = `
 })
 export class CustomCode {
   private elem!: HTMLDivElement;
-  @Prop() replaceNodes: CustomCodeProps[\\"replaceNodes\\"];
-  @Prop() code: CustomCodeProps[\\"code\\"];
+  @Prop() replaceNodes: any;
+  @Prop() code: any;
   @State() scriptsInserted = [];
   @State() scriptsRun = [];
 
@@ -4781,8 +4781,8 @@ exports[`Stencil > jsx > Typescript Test > Embed 1`] = `
 })
 export class CustomCode {
   private elem!: HTMLDivElement;
-  @Prop() replaceNodes: CustomCodeProps[\\"replaceNodes\\"];
-  @Prop() code: CustomCodeProps[\\"code\\"];
+  @Prop() replaceNodes: any;
+  @Prop() code: any;
   @State() scriptsInserted = [];
   @State() scriptsRun = [];
 
@@ -4871,24 +4871,24 @@ import { Component, h, Fragment, Prop, State } from \\"@stencil/core\\";
 })
 export class FormComponent {
   private formRef!: HTMLFormElement;
-  @Prop() previewState: FormProps[\\"previewState\\"];
-  @Prop() sendWithJs: FormProps[\\"sendWithJs\\"];
-  @Prop() sendSubmissionsTo: FormProps[\\"sendSubmissionsTo\\"];
-  @Prop() action: FormProps[\\"action\\"];
-  @Prop() customHeaders: FormProps[\\"customHeaders\\"];
-  @Prop() contentType: FormProps[\\"contentType\\"];
-  @Prop() sendSubmissionsToEmail: FormProps[\\"sendSubmissionsToEmail\\"];
-  @Prop() name: FormProps[\\"name\\"];
-  @Prop() method: FormProps[\\"method\\"];
-  @Prop() errorMessagePath: FormProps[\\"errorMessagePath\\"];
-  @Prop() resetFormOnSubmit: FormProps[\\"resetFormOnSubmit\\"];
-  @Prop() successUrl: FormProps[\\"successUrl\\"];
-  @Prop() validate: FormProps[\\"validate\\"];
-  @Prop() attributes: FormProps[\\"attributes\\"];
-  @Prop() builderBlock: FormProps[\\"builderBlock\\"];
-  @Prop() errorMessage: FormProps[\\"errorMessage\\"];
-  @Prop() sendingMessage: FormProps[\\"sendingMessage\\"];
-  @Prop() successMessage: FormProps[\\"successMessage\\"];
+  @Prop() previewState: any;
+  @Prop() sendWithJs: any;
+  @Prop() sendSubmissionsTo: any;
+  @Prop() action: any;
+  @Prop() customHeaders: any;
+  @Prop() contentType: any;
+  @Prop() sendSubmissionsToEmail: any;
+  @Prop() name: any;
+  @Prop() method: any;
+  @Prop() errorMessagePath: any;
+  @Prop() resetFormOnSubmit: any;
+  @Prop() successUrl: any;
+  @Prop() validate: any;
+  @Prop() attributes: any;
+  @Prop() builderBlock: any;
+  @Prop() errorMessage: any;
+  @Prop() sendingMessage: any;
+  @Prop() successMessage: any;
   @State() formState = \\"unsubmitted\\";
   @State() responseData = null;
   @State() formErrorMessage = \\"\\";
@@ -5184,13 +5184,13 @@ exports[`Stencil > jsx > Typescript Test > Image 1`] = `
 })
 export class Image {
   private pictureRef!: HTMLElement;
-  @Prop() lazy: ImageProps[\\"lazy\\"];
-  @Prop() altText: ImageProps[\\"altText\\"];
-  @Prop() _class: ImageProps[\\"_class\\"];
-  @Prop() image: ImageProps[\\"image\\"];
-  @Prop() srcset: ImageProps[\\"srcset\\"];
-  @Prop() sizes: ImageProps[\\"sizes\\"];
-  @Prop() children: ImageProps[\\"children\\"];
+  @Prop() lazy: any;
+  @Prop() altText: any;
+  @Prop() _class: any;
+  @Prop() image: any;
+  @Prop() srcset: any;
+  @Prop() sizes: any;
+  @Prop() children: any;
   @State() scrollListener = null;
   @State() imageLoaded = false;
   @State() load = false;
@@ -5301,11 +5301,11 @@ import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
   tag: \\"img-component\\",
 })
 export class ImgComponent {
-  @Prop() backgroundSize: ImgProps[\\"backgroundSize\\"];
-  @Prop() backgroundPosition: ImgProps[\\"backgroundPosition\\"];
-  @Prop() attributes: ImgProps[\\"attributes\\"];
-  @Prop() imgSrc: ImgProps[\\"imgSrc\\"];
-  @Prop() altText: ImgProps[\\"altText\\"];
+  @Prop() backgroundSize: any;
+  @Prop() backgroundPosition: any;
+  @Prop() attributes: any;
+  @Prop() imgSrc: any;
+  @Prop() altText: any;
 
   render() {
     return (
@@ -5334,13 +5334,13 @@ import { Component, h, Fragment, Event, Prop } from \\"@stencil/core\\";
   tag: \\"form-input-component\\",
 })
 export class FormInputComponent {
-  @Prop() attributes: FormInputProps[\\"attributes\\"];
-  @Prop() defaultValue: FormInputProps[\\"defaultValue\\"];
-  @Prop() placeholder: FormInputProps[\\"placeholder\\"];
-  @Prop() type: FormInputProps[\\"type\\"];
-  @Prop() name: FormInputProps[\\"name\\"];
-  @Prop() value: FormInputProps[\\"value\\"];
-  @Prop() required: FormInputProps[\\"required\\"];
+  @Prop() attributes: any;
+  @Prop() defaultValue: any;
+  @Prop() placeholder: any;
+  @Prop() type: any;
+  @Prop() name: any;
+  @Prop() value: any;
+  @Prop() required: any;
   @Event() onChange: any;
 
   render() {
@@ -5421,8 +5421,8 @@ exports[`Stencil > jsx > Typescript Test > RawText 1`] = `
   tag: \\"raw-text\\",
 })
 export class RawText {
-  @Prop() attributes: RawTextProps[\\"attributes\\"];
-  @Prop() text: RawTextProps[\\"text\\"];
+  @Prop() attributes: any;
+  @Prop() text: any;
 
   render() {
     return (
@@ -5443,9 +5443,9 @@ exports[`Stencil > jsx > Typescript Test > Section 1`] = `
   tag: \\"section-component\\",
 })
 export class SectionComponent {
-  @Prop() attributes: SectionProps[\\"attributes\\"];
-  @Prop() maxWidth: SectionProps[\\"maxWidth\\"];
-  @Prop() children: SectionProps[\\"children\\"];
+  @Prop() attributes: any;
+  @Prop() maxWidth: any;
+  @Prop() children: any;
 
   render() {
     return (
@@ -5474,8 +5474,8 @@ exports[`Stencil > jsx > Typescript Test > Section 2`] = `
   tag: \\"section-state-component\\",
 })
 export class SectionStateComponent {
-  @Prop() attributes: SectionProps[\\"attributes\\"];
-  @Prop() children: SectionProps[\\"children\\"];
+  @Prop() attributes: any;
+  @Prop() children: any;
   @State() max = 42;
   @State() items = [42];
 
@@ -5510,11 +5510,11 @@ import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
   tag: \\"select-component\\",
 })
 export class SelectComponent {
-  @Prop() attributes: FormSelectProps[\\"attributes\\"];
-  @Prop() value: FormSelectProps[\\"value\\"];
-  @Prop() defaultValue: FormSelectProps[\\"defaultValue\\"];
-  @Prop() name: FormSelectProps[\\"name\\"];
-  @Prop() options: FormSelectProps[\\"options\\"];
+  @Prop() attributes: any;
+  @Prop() value: any;
+  @Prop() defaultValue: any;
+  @Prop() name: any;
+  @Prop() options: any;
 
   render() {
     return (
@@ -5659,8 +5659,8 @@ import { Component, h, Fragment, Prop, State } from \\"@stencil/core\\";
 \`,
 })
 export class SmileReviews {
-  @Prop() apiKey: SmileReviewsProps[\\"apiKey\\"];
-  @Prop() productId: SmileReviewsProps[\\"productId\\"];
+  @Prop() apiKey: any;
+  @Prop() productId: any;
   @State() reviews = [];
   @State() name = \\"test\\";
   @State() showReviewPrompt = false;
@@ -5794,8 +5794,8 @@ exports[`Stencil > jsx > Typescript Test > Submit 1`] = `
   tag: \\"submit-button\\",
 })
 export class SubmitButton {
-  @Prop() attributes: ButtonProps[\\"attributes\\"];
-  @Prop() text: ButtonProps[\\"text\\"];
+  @Prop() attributes: any;
+  @Prop() text: any;
 
   render() {
     return (
@@ -5817,8 +5817,8 @@ import { Component, h, Fragment, Prop, State } from \\"@stencil/core\\";
   tag: \\"text\\",
 })
 export class Text {
-  @Prop() text: TextProps[\\"text\\"];
-  @Prop() content: TextProps[\\"content\\"];
+  @Prop() text: any;
+  @Prop() content: any;
   @State() name = \\"Decadef20\\";
 
   render() {
@@ -5848,11 +5848,11 @@ exports[`Stencil > jsx > Typescript Test > Textarea 1`] = `
   tag: \\"textarea\\",
 })
 export class Textarea {
-  @Prop() attributes: TextareaProps[\\"attributes\\"];
-  @Prop() placeholder: TextareaProps[\\"placeholder\\"];
-  @Prop() name: TextareaProps[\\"name\\"];
-  @Prop() value: TextareaProps[\\"value\\"];
-  @Prop() defaultValue: TextareaProps[\\"defaultValue\\"];
+  @Prop() attributes: any;
+  @Prop() placeholder: any;
+  @Prop() name: any;
+  @Prop() value: any;
+  @Prop() defaultValue: any;
 
   render() {
     return (
@@ -5908,15 +5908,15 @@ exports[`Stencil > jsx > Typescript Test > Video 1`] = `
   tag: \\"video\\",
 })
 export class Video {
-  @Prop() attributes: VideoProps[\\"attributes\\"];
-  @Prop() fit: VideoProps[\\"fit\\"];
-  @Prop() position: VideoProps[\\"position\\"];
-  @Prop() video: VideoProps[\\"video\\"];
-  @Prop() posterImage: VideoProps[\\"posterImage\\"];
-  @Prop() autoPlay: VideoProps[\\"autoPlay\\"];
-  @Prop() muted: VideoProps[\\"muted\\"];
-  @Prop() controls: VideoProps[\\"controls\\"];
-  @Prop() loop: VideoProps[\\"loop\\"];
+  @Prop() attributes: any;
+  @Prop() fit: any;
+  @Prop() position: any;
+  @Prop() video: any;
+  @Prop() posterImage: any;
+  @Prop() autoPlay: any;
+  @Prop() muted: any;
+  @Prop() controls: any;
+  @Prop() loop: any;
 
   render() {
     return (
@@ -6057,7 +6057,7 @@ exports[`Stencil > jsx > Typescript Test > basicForwardRef 1`] = `
 \`,
 })
 export class MyBasicForwardRefComponent {
-  @Prop() inputRef: Props[\\"inputRef\\"];
+  @Prop() inputRef: any;
   @State() name = \\"PatrickJS\\";
 
   render() {
@@ -6094,7 +6094,7 @@ import { Component, h, Fragment, Prop, State } from \\"@stencil/core\\";
 \`,
 })
 export class MyBasicForwardRefComponent {
-  @Prop() inputRef: Props[\\"inputRef\\"];
+  @Prop() inputRef: any;
   @State() name = \\"PatrickJS\\";
 
   render() {
@@ -6311,7 +6311,7 @@ import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
   tag: \\"component-with-context\\",
 })
 export class ComponentWithContext {
-  @Prop() content: ComponentWithContextProps[\\"content\\"];
+  @Prop() content: any;
 
   render() {
     return (
@@ -6334,7 +6334,7 @@ import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
   tag: \\"component-with-context\\",
 })
 export class ComponentWithContext {
-  @Prop() content: ComponentWithContextProps[\\"content\\"];
+  @Prop() content: any;
 
   render() {
     return (
@@ -6374,14 +6374,14 @@ exports[`Stencil > jsx > Typescript Test > defaultProps 1`] = `
   tag: \\"button\\",
 })
 export class Button {
-  @Prop() link: ButtonProps[\\"link\\"] = \\"https://builder.io/\\";
-  @Prop() attributes: ButtonProps[\\"attributes\\"];
-  @Prop() openLinkInNewTab: ButtonProps[\\"openLinkInNewTab\\"] = false;
-  @Prop() text: ButtonProps[\\"text\\"] = \\"default text\\";
+  @Prop() link: any = \\"https://builder.io/\\";
+  @Prop() attributes: any;
+  @Prop() openLinkInNewTab: any = false;
+  @Prop() text: any = \\"default text\\";
   @Event() onClick: any = () => {
     console.log(\\"hi\\");
   };
-  @Prop() buttonText: ButtonProps[\\"buttonText\\"];
+  @Prop() buttonText: any;
 
   render() {
     return (
@@ -6418,10 +6418,10 @@ exports[`Stencil > jsx > Typescript Test > defaultPropsOutsideComponent 1`] = `
   tag: \\"button\\",
 })
 export class Button {
-  @Prop() link: ButtonProps[\\"link\\"] = \\"https://builder.io/\\";
-  @Prop() attributes: ButtonProps[\\"attributes\\"];
-  @Prop() openLinkInNewTab: ButtonProps[\\"openLinkInNewTab\\"] = false;
-  @Prop() text: ButtonProps[\\"text\\"] = \\"default text\\";
+  @Prop() link: any = \\"https://builder.io/\\";
+  @Prop() attributes: any;
+  @Prop() openLinkInNewTab: any = false;
+  @Prop() text: any = \\"default text\\";
   @Event() onClick: any = () => {};
 
   render() {
@@ -6463,7 +6463,7 @@ import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
   tag: \\"component-with-types\\",
 })
 export class ComponentWithTypes {
-  @Prop() name: Props[\\"name\\"];
+  @Prop() name: any;
 
   render() {
     return (
@@ -6570,7 +6570,7 @@ exports[`Stencil > jsx > Typescript Test > getterState 1`] = `
   tag: \\"button\\",
 })
 export class Button {
-  @Prop() foo: ButtonProps[\\"foo\\"];
+  @Prop() foo: any;
 
   get foo2() {
     return this.foo + \\"foo\\";
@@ -6605,7 +6605,7 @@ import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
   tag: \\"render-content\\",
 })
 export class RenderContent {
-  @Prop() renderContentProps: RenderContentProps[\\"renderContentProps\\"];
+  @Prop() renderContentProps: any;
 
   getRenderContentProps(block, index) {
     return {
@@ -6793,7 +6793,7 @@ import { Component, h, Fragment, Prop, State } from \\"@stencil/core\\";
   tag: \\"on-init\\",
 })
 export class OnInit {
-  @Prop() name: Props[\\"name\\"];
+  @Prop() name: any;
   @State() name = \\"\\";
 
   render() {
@@ -6897,7 +6897,7 @@ exports[`Stencil > jsx > Typescript Test > onUpdateWithDeps 1`] = `
   tag: \\"on-update-with-deps\\",
 })
 export class OnUpdateWithDeps {
-  @Prop() size: Props[\\"size\\"];
+  @Prop() size: any;
   @State() a = \\"a\\";
   @State() b = \\"b\\";
 
@@ -6939,7 +6939,7 @@ exports[`Stencil > jsx > Typescript Test > preserveTyping 1`] = `
   tag: \\"my-basic-component\\",
 })
 export class MyBasicComponent {
-  @Prop() name: MyBasicComponentProps[\\"name\\"];
+  @Prop() name: any;
 
   render() {
     return (
@@ -6960,8 +6960,8 @@ exports[`Stencil > jsx > Typescript Test > propsDestructure 1`] = `
   tag: \\"my-basic-component\\",
 })
 export class MyBasicComponent {
-  @Prop() children: Props[\\"children\\"];
-  @Prop() type: Props[\\"type\\"];
+  @Prop() children: any;
+  @Prop() type: any;
   @State() name = \\"Decadef20\\";
 
   render() {
@@ -7005,7 +7005,7 @@ exports[`Stencil > jsx > Typescript Test > propsType 1`] = `
   tag: \\"my-basic-component\\",
 })
 export class MyBasicComponent {
-  @Prop() name: Person[\\"name\\"];
+  @Prop() name: any;
 
   render() {
     return (
@@ -7077,8 +7077,8 @@ import { Component, h, Fragment, Host, Prop } from \\"@stencil/core\\";
   tag: \\"render-block\\",
 })
 export class RenderBlock {
-  @Prop() block: RenderBlockProps[\\"block\\"];
-  @Prop() context: RenderBlockProps[\\"context\\"];
+  @Prop() block: any;
+  @Prop() context: any;
 
   get component() {
     const componentName = getProcessedBlock({
@@ -7326,8 +7326,8 @@ import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
 \`,
 })
 export class RenderContent {
-  @Prop() customComponents: Props[\\"customComponents\\"];
-  @Prop() content: Props[\\"content\\"];
+  @Prop() customComponents: any;
+  @Prop() content: any;
 
   componentDidLoad() {
     sendComponentsToVisualEditor(this.customComponents);
@@ -7355,10 +7355,10 @@ exports[`Stencil > jsx > Typescript Test > rootFragmentMultiNode 1`] = `
   tag: \\"button\\",
 })
 export class Button {
-  @Prop() link: ButtonProps[\\"link\\"];
-  @Prop() attributes: ButtonProps[\\"attributes\\"];
-  @Prop() openLinkInNewTab: ButtonProps[\\"openLinkInNewTab\\"];
-  @Prop() text: ButtonProps[\\"text\\"];
+  @Prop() link: any;
+  @Prop() attributes: any;
+  @Prop() openLinkInNewTab: any;
+  @Prop() text: any;
 
   render() {
     return (
@@ -7471,8 +7471,8 @@ exports[`Stencil > jsx > Typescript Test > signalsOnUpdate 1`] = `
 \`,
 })
 export class MyBasicComponent {
-  @Prop() id: Props[\\"id\\"];
-  @Prop() foo: Props[\\"foo\\"];
+  @Prop() id: any;
+  @Prop() foo: any;
 
   componentDidUpdate() {
     console.log(\\"props.id changed\\", this.id);
@@ -7696,7 +7696,7 @@ import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
   tag: \\"type-dependency\\",
 })
 export class TypeDependency {
-  @Prop() foo: TypeDependencyProps[\\"foo\\"];
+  @Prop() foo: any;
 
   render() {
     return <div>{this.foo}</div>;
diff --git a/packages/core/src/__tests__/stencil.test.ts b/packages/core/src/__tests__/stencil.test.ts
index bdd6e36ca6..104547e739 100644
--- a/packages/core/src/__tests__/stencil.test.ts
+++ b/packages/core/src/__tests__/stencil.test.ts
@@ -8,13 +8,12 @@ describe('Stencil', () => {
     options: {},
   });
 });
-/*
-describe('Stencil local', () => {
+/*describe('Stencil local', () => {
   runTestsForTarget({
     target: 'stencil',
     generator: componentToStencil,
     options: {},
     logOutput: true,
-    only: ['subComponent'],
+    only: ['typeDependency'],
   });
 });*/
diff --git a/packages/core/src/generators/stencil/helpers/index.ts b/packages/core/src/generators/stencil/helpers/index.ts
index ff03bdf4fc..0dee01d40e 100644
--- a/packages/core/src/generators/stencil/helpers/index.ts
+++ b/packages/core/src/generators/stencil/helpers/index.ts
@@ -47,6 +47,8 @@ export const getPropsAsCode = (
 ): string => {
   const propsTypeRef: string | undefined = json.propsTypeRef;
   const internalTypes: string[] | undefined = json.types;
+  const isInternalType =
+    propsTypeRef && internalTypes && internalTypes.find((iType) => iType.includes(propsTypeRef));
 
   return props
     .map((item: string) => {
@@ -62,7 +64,7 @@ export const getPropsAsCode = (
         propsTypeRef !== 'any' &&
         propsTypeRef !== 'unknown' &&
         propsTypeRef !== 'never' &&
-        (!internalTypes || !internalTypes.includes(propsTypeRef))
+        !isInternalType
           ? `${propsTypeRef}["${item}"]`
           : 'any';
       return `@Prop() ${item}: ${type}${defaultPropString}`;

From e79fc037f9eb8d105c5cdd88180b22cbc3c45870 Mon Sep 17 00:00:00 2001
From: Nicolas Merget <nicolas.merget@deutschebahn.com>
Date: Fri, 17 Jan 2025 09:57:33 +0100
Subject: [PATCH 11/20] fix: issue with stencil local exports

---
 .../__snapshots__/stencil.test.ts.snap        | 106 +++++-------------
 packages/core/src/__tests__/stencil.test.ts   |   2 +-
 packages/core/src/__tests__/test-generator.ts |   2 +-
 .../core/src/generators/stencil/component.ts  |   5 +-
 .../src/generators/stencil/helpers/index.ts   |  30 ++++-
 .../plugins/get-code-processor-plugins.ts     |   4 +-
 packages/core/src/helpers/render-imports.ts   |   4 +-
 7 files changed, 70 insertions(+), 83 deletions(-)

diff --git a/packages/core/src/__tests__/__snapshots__/stencil.test.ts.snap b/packages/core/src/__tests__/__snapshots__/stencil.test.ts.snap
index 80c4651d23..1285c09e5c 100644
--- a/packages/core/src/__tests__/__snapshots__/stencil.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/stencil.test.ts.snap
@@ -131,11 +131,7 @@ export class MyBasicRefComponent {
 `;
 
 exports[`Stencil > jsx > Javascript Test > Basic 1`] = `
-"export const DEFAULT_VALUES = {
-  name: \\"Steve\\",
-};
-
-import { Component, h, Fragment, State } from \\"@stencil/core\\";
+"import { Component, h, Fragment, State } from \\"@stencil/core\\";
 
 @Component({
   tag: \\"my-basic-component\\",
@@ -155,11 +151,15 @@ export class MyBasicComponent {
     return \\"bar\\";
   }
 
+  DEFAULT_VALUES = {
+    name: \\"Steve\\",
+  };
+
   render() {
     return (
       <div class=\\"test div\\">
         <input
-          value={DEFAULT_VALUES.name || this.name}
+          value={this.DEFAULT_VALUES.name || this.name}
           onChange={(myEvent) => (this.name = myEvent.target.value)}
         />
         Hello! I can run in React, Vue, Solid, or Liquid! &gt;
@@ -524,20 +524,7 @@ export class MyBasicRefAssignmentComponent {
 `;
 
 exports[`Stencil > jsx > Javascript Test > BasicRefPrevious 1`] = `
-"export function usePrevious(value) {
-  // The ref object is a generic container whose current property is mutable ...
-  // ... and can hold any value, similar to an instance property on a class
-  let ref = useRef(null); // Store current value in ref
-
-  onUpdate(() => {
-    ref = value;
-  }, [value]); // Only re-run if value changes
-  // Return previous value (happens before update in useEffect above)
-
-  return ref;
-}
-
-import { Component, h, Fragment, State } from \\"@stencil/core\\";
+"import { Component, h, Fragment, State } from \\"@stencil/core\\";
 
 @Component({
   tag: \\"my-previous-component\\",
@@ -2490,11 +2477,7 @@ export class Button {
 `;
 
 exports[`Stencil > jsx > Javascript Test > defaultValsWithTypes 1`] = `
-"const DEFAULT_VALUES = {
-  name: \\"Sami\\",
-};
-
-import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
+"import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
 
 @Component({
   tag: \\"component-with-types\\",
@@ -2502,12 +2485,16 @@ import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
 export class ComponentWithTypes {
   @Prop() name: any;
 
+  DEFAULT_VALUES = {
+    name: \\"Sami\\",
+  };
+
   render() {
     return (
       <div>
         {\\" \\"}
         Hello
-        {this.name || DEFAULT_VALUES.name}
+        {this.name || this.DEFAULT_VALUES.name}
       </div>
     );
   }
@@ -2819,11 +2806,7 @@ export class OnInit {
 `;
 
 exports[`Stencil > jsx > Javascript Test > onInit 1`] = `
-"export const defaultValues = {
-  name: \\"PatrickJS\\",
-};
-
-import { Component, h, Fragment, Prop, State } from \\"@stencil/core\\";
+"import { Component, h, Fragment, Prop, State } from \\"@stencil/core\\";
 
 @Component({
   tag: \\"on-init\\",
@@ -2949,13 +2932,7 @@ export class OnUpdateWithDeps {
 `;
 
 exports[`Stencil > jsx > Javascript Test > preserveExportOrLocalStatement 1`] = `
-"const b = 3;
-const foo = () => {};
-export const a = 3;
-export const bar = () => {};
-export function run(value) {}
-
-import { Component, h, Fragment } from \\"@stencil/core\\";
+"import { Component, h, Fragment } from \\"@stencil/core\\";
 
 @Component({
   tag: \\"my-basic-component\\",
@@ -4081,11 +4058,7 @@ export class MyBasicRefComponent {
 `;
 
 exports[`Stencil > jsx > Typescript Test > Basic 1`] = `
-"export const DEFAULT_VALUES = {
-  name: \\"Steve\\",
-};
-
-import { Component, h, Fragment, State } from \\"@stencil/core\\";
+"import { Component, h, Fragment, State } from \\"@stencil/core\\";
 
 @Component({
   tag: \\"my-basic-component\\",
@@ -4105,11 +4078,15 @@ export class MyBasicComponent {
     return \\"bar\\";
   }
 
+  DEFAULT_VALUES = {
+    name: \\"Steve\\",
+  };
+
   render() {
     return (
       <div class=\\"test div\\">
         <input
-          value={DEFAULT_VALUES.name || this.name}
+          value={this.DEFAULT_VALUES.name || this.name}
           onChange={(myEvent) => (this.name = myEvent.target.value)}
         />
         Hello! I can run in React, Vue, Solid, or Liquid! &gt;
@@ -4474,20 +4451,7 @@ export class MyBasicRefAssignmentComponent {
 `;
 
 exports[`Stencil > jsx > Typescript Test > BasicRefPrevious 1`] = `
-"export function usePrevious<T>(value: T) {
-  // The ref object is a generic container whose current property is mutable ...
-  // ... and can hold any value, similar to an instance property on a class
-  let ref = useRef<T>(null); // Store current value in ref
-
-  onUpdate(() => {
-    ref = value;
-  }, [value]); // Only re-run if value changes
-  // Return previous value (happens before update in useEffect above)
-
-  return ref;
-}
-
-import { Component, h, Fragment, State } from \\"@stencil/core\\";
+"import { Component, h, Fragment, State } from \\"@stencil/core\\";
 
 @Component({
   tag: \\"my-previous-component\\",
@@ -6453,11 +6417,7 @@ export class Button {
 `;
 
 exports[`Stencil > jsx > Typescript Test > defaultValsWithTypes 1`] = `
-"const DEFAULT_VALUES: Props = {
-  name: \\"Sami\\",
-};
-
-import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
+"import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
 
 @Component({
   tag: \\"component-with-types\\",
@@ -6465,12 +6425,16 @@ import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
 export class ComponentWithTypes {
   @Prop() name: any;
 
+  DEFAULT_VALUES = {
+    name: \\"Sami\\",
+  };
+
   render() {
     return (
       <div>
         {\\" \\"}
         Hello
-        {this.name || DEFAULT_VALUES.name}
+        {this.name || this.DEFAULT_VALUES.name}
       </div>
     );
   }
@@ -6783,11 +6747,7 @@ export class OnInit {
 `;
 
 exports[`Stencil > jsx > Typescript Test > onInit 1`] = `
-"export const defaultValues = {
-  name: \\"PatrickJS\\",
-};
-
-import { Component, h, Fragment, Prop, State } from \\"@stencil/core\\";
+"import { Component, h, Fragment, Prop, State } from \\"@stencil/core\\";
 
 @Component({
   tag: \\"on-init\\",
@@ -6913,13 +6873,7 @@ export class OnUpdateWithDeps {
 `;
 
 exports[`Stencil > jsx > Typescript Test > preserveExportOrLocalStatement 1`] = `
-"const b = 3;
-const foo = () => {};
-export const a = 3;
-export const bar = () => {};
-export function run<T>(value: T) {}
-
-import { Component, h, Fragment } from \\"@stencil/core\\";
+"import { Component, h, Fragment } from \\"@stencil/core\\";
 
 @Component({
   tag: \\"my-basic-component\\",
diff --git a/packages/core/src/__tests__/stencil.test.ts b/packages/core/src/__tests__/stencil.test.ts
index 104547e739..d96130d6b9 100644
--- a/packages/core/src/__tests__/stencil.test.ts
+++ b/packages/core/src/__tests__/stencil.test.ts
@@ -14,6 +14,6 @@ describe('Stencil', () => {
     generator: componentToStencil,
     options: {},
     logOutput: true,
-    only: ['typeDependency'],
+    only: ['defaultValsWithTypes'],
   });
 });*/
diff --git a/packages/core/src/__tests__/test-generator.ts b/packages/core/src/__tests__/test-generator.ts
index 9afd12cb16..f37a5cd074 100644
--- a/packages/core/src/__tests__/test-generator.ts
+++ b/packages/core/src/__tests__/test-generator.ts
@@ -218,7 +218,7 @@ const BASIC_TESTS: Tests = {
   propsInterface: propsInterface,
   defaultProps: defaultProps,
   defaultPropsOutsideComponent,
-  preserveTyping: preserveTyping,
+  preserveTyping,
   typeDependency,
   typeExternalStore,
   typeExternalProps,
diff --git a/packages/core/src/generators/stencil/component.ts b/packages/core/src/generators/stencil/component.ts
index ed31890430..66206bce61 100644
--- a/packages/core/src/generators/stencil/component.ts
+++ b/packages/core/src/generators/stencil/component.ts
@@ -1,6 +1,7 @@
 import { stringifySingleScopeOnMount } from '@/generators/helpers/on-mount';
 import { blockToStencil } from '@/generators/stencil/blocks';
 import {
+  getExportsAndLocal,
   getImports,
   getPropsAsCode,
   getStencilCoreImportsAsString,
@@ -57,7 +58,7 @@ export const componentToStencil: TranspilerGenerator<ToStencilOptions> =
     const childComponents: string[] = getChildComponents(json);
     const processBindingOptions: ProcessBindingOptions = { events };
 
-    options.plugins = getCodeProcessorPlugins(options, processBindingOptions);
+    options.plugins = getCodeProcessorPlugins(json, options, processBindingOptions);
 
     if (options.plugins) {
       json = runPostJsonPlugins({ json, plugins: options.plugins });
@@ -128,6 +129,8 @@ export const componentToStencil: TranspilerGenerator<ToStencilOptions> =
         ${getPropsAsCode(props, json, defaultProps)}
         ${dataString}
         ${methodsString}
+        
+        ${getExportsAndLocal(json)}
 
         ${
           !json.hooks.onMount.length
diff --git a/packages/core/src/generators/stencil/helpers/index.ts b/packages/core/src/generators/stencil/helpers/index.ts
index 0dee01d40e..f13607dc5d 100644
--- a/packages/core/src/generators/stencil/helpers/index.ts
+++ b/packages/core/src/generators/stencil/helpers/index.ts
@@ -23,8 +23,21 @@ const appendEmits = (str: string, events: string[]): string => {
 
 export type ProcessBindingOptions = { events: string[] };
 
-export const processBinding = (code: string, { events }: ProcessBindingOptions) => {
-  return stripStateAndPropsRefs(appendEmits(code, events), { replaceWith: 'this.' });
+export const processBinding = (
+  json: MitosisComponent,
+  code: string,
+  { events }: ProcessBindingOptions,
+) => {
+  let resolvedCode = stripStateAndPropsRefs(appendEmits(code, events), { replaceWith: 'this.' });
+  if (json.exports) {
+    // We need to use local exports with `this.` in stencil
+    Object.entries(json.exports)
+      .filter(([, value]) => value.usedInLocal)
+      .forEach(([key]) => {
+        resolvedCode = resolvedCode.replaceAll(key, `this.${key}`);
+      });
+  }
+  return resolvedCode;
 };
 
 export const getTagName = (name: string, { prefix }: ToStencilOptions): string => {
@@ -126,6 +139,7 @@ export const getImports = (
     explicitImportFileExtension: options.explicitImportFileExtension,
     component: json,
     target: 'stencil',
+    excludeExportAndLocal: true,
     importMapper: (_: any, theImport: any, importedValues: any) => {
       const childImport = importedValues.defaultImport;
       if (childImport && childComponents.includes(childImport)) {
@@ -136,3 +150,15 @@ export const getImports = (
     },
   });
 };
+
+export const getExportsAndLocal = (json: MitosisComponent) => {
+  return Object.entries(json.exports || {})
+    .map(([key, { usedInLocal, code }]) => {
+      if (usedInLocal) {
+        return `${key} = ${code.substring(code.indexOf('=') + 1)}`;
+      }
+
+      return '';
+    })
+    .join('\n');
+};
diff --git a/packages/core/src/generators/stencil/plugins/get-code-processor-plugins.ts b/packages/core/src/generators/stencil/plugins/get-code-processor-plugins.ts
index 6ac1d2233d..37df7b91c8 100644
--- a/packages/core/src/generators/stencil/plugins/get-code-processor-plugins.ts
+++ b/packages/core/src/generators/stencil/plugins/get-code-processor-plugins.ts
@@ -1,8 +1,10 @@
 import { processBinding, ProcessBindingOptions } from '@/generators/stencil/helpers/index';
 import { ToStencilOptions } from '@/generators/stencil/types';
 import { CODE_PROCESSOR_PLUGIN } from '@/helpers/plugins/process-code';
+import { MitosisComponent } from '@/types/mitosis-component';
 
 export const getCodeProcessorPlugins = (
+  json: MitosisComponent,
   options: ToStencilOptions,
   processBindingOptions: ProcessBindingOptions,
 ) => {
@@ -18,7 +20,7 @@ export const getCodeProcessorPlugins = (
         case 'context-set':
         case 'dynamic-jsx-elements':
         case 'types':
-          return (code) => processBinding(code, processBindingOptions);
+          return (code) => processBinding(json, code, processBindingOptions);
       }
     }),
   ];
diff --git a/packages/core/src/helpers/render-imports.ts b/packages/core/src/helpers/render-imports.ts
index 66e4a6afc6..599769d0a9 100644
--- a/packages/core/src/helpers/render-imports.ts
+++ b/packages/core/src/helpers/render-imports.ts
@@ -237,11 +237,13 @@ export const renderPreComponent = ({
   componentsUsed = [],
   importMapper,
   explicitImportFileExtension = false,
+  excludeExportAndLocal = false,
 }: Omit<ImportArgs, 'explicitImportFileExtension' | 'asyncComponentImports'> &
   Partial<Pick<ImportArgs, 'explicitImportFileExtension' | 'asyncComponentImports'>> & {
     component: MitosisComponent;
     target: Target;
     excludeMitosisComponents?: boolean;
+    excludeExportAndLocal?: boolean;
   }): string => `
     ${renderImports({
       imports: component.imports,
@@ -254,7 +256,7 @@ export const renderPreComponent = ({
       importMapper,
       explicitImportFileExtension,
     })}
-    ${renderExportAndLocal(component)}
+    ${excludeExportAndLocal ? '' : renderExportAndLocal(component)}
     ${component.hooks.preComponent?.code || ''}
   `;
 

From 4019365a493e7485a463e5fa8b9f713469a7e6d3 Mon Sep 17 00:00:00 2001
From: Nicolas Merget <nicolas.merget@deutschebahn.com>
Date: Fri, 17 Jan 2025 10:15:00 +0100
Subject: [PATCH 12/20] chore: add test results upload to find issues with e2e
 tests

---
 .github/workflows/checks.yml | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/.github/workflows/checks.yml b/.github/workflows/checks.yml
index 3c6efb9149..e62853e841 100644
--- a/.github/workflows/checks.yml
+++ b/.github/workflows/checks.yml
@@ -145,3 +145,11 @@ jobs:
 
       - name: Run E2E tests
         run: yarn ci:e2e
+
+      - name: 🆙 Upload test results
+        if: failure()
+        uses: actions/upload-artifact@v4
+        with:
+          name: playwright-results
+          path: ./e2e/e2e-app/test-results
+          retention-days: 14
\ No newline at end of file

From 3a280dca0eb23f75b36f905c147a34ac105e1532 Mon Sep 17 00:00:00 2001
From: Nicolas Merget <nicolas.merget@deutschebahn.com>
Date: Fri, 17 Jan 2025 10:55:48 +0100
Subject: [PATCH 13/20] chore: rename default-props.lite.tsx to fix issue with
 react e2e

---
 .../{default-props.lite.tsx => use-default-props.lite.tsx}    | 4 ++--
 e2e/e2e-app/src/homepage.lite.tsx                             | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)
 rename e2e/e2e-app/src/components/default-props/{default-props.lite.tsx => use-default-props.lite.tsx} (79%)

diff --git a/e2e/e2e-app/src/components/default-props/default-props.lite.tsx b/e2e/e2e-app/src/components/default-props/use-default-props.lite.tsx
similarity index 79%
rename from e2e/e2e-app/src/components/default-props/default-props.lite.tsx
rename to e2e/e2e-app/src/components/default-props/use-default-props.lite.tsx
index b016673802..828d588a90 100644
--- a/e2e/e2e-app/src/components/default-props/default-props.lite.tsx
+++ b/e2e/e2e-app/src/components/default-props/use-default-props.lite.tsx
@@ -2,12 +2,12 @@ import { useDefaultProps, useStore } from '@builder.io/mitosis';
 
 useDefaultProps({ foo: 'abc', bar: 'foo' });
 
-type Props = {
+type DefaultPropsType = {
   foo?: string;
   bar?: string;
 };
 
-export default function DefaultProps(props: Props) {
+export default function DefaultProps(props: DefaultPropsType) {
   const state = useStore({
     getProps: () => {
       return JSON.stringify({ foo: props.foo, bar: props.bar });
diff --git a/e2e/e2e-app/src/homepage.lite.tsx b/e2e/e2e-app/src/homepage.lite.tsx
index 163b93d582..5550027eed 100644
--- a/e2e/e2e-app/src/homepage.lite.tsx
+++ b/e2e/e2e-app/src/homepage.lite.tsx
@@ -1,13 +1,13 @@
 import { For, onMount, Show, useStore } from '@builder.io/mitosis';
 import { COMPONENT_PATHS } from './component-paths';
 import ComponentWithTypes from './components/component-with-types.lite';
-import DefaultProps from './components/default-props/default-props.lite';
 import DisabledInput from './components/disabled-input/disabled-input.lite';
 import NestedParent from './components/nested/nested-parent.lite';
 import OneComponent from './components/one-component.lite';
 import ShowForComponent from './components/show-for-component.lite';
 import SignalParent from './components/signals/signal-parent.lite';
 import SpecialTags from './components/special-tags.lite';
+import DefaultProps from './components/default-props/use-default-props.lite';
 
 export default function Homepage(props: { pathname?: string }) {
   const state = useStore({

From d319ea561fd0da5a43ecef5fad2ffeac168ad368 Mon Sep 17 00:00:00 2001
From: Nicolas Merget <nicolas.merget@deutschebahn.com>
Date: Fri, 17 Jan 2025 11:12:56 +0100
Subject: [PATCH 14/20] chore: provide e2e builds on failure

---
 .github/workflows/checks.yml      | 10 +++++++++-
 e2e/e2e-app/src/homepage.lite.tsx |  2 +-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/.github/workflows/checks.yml b/.github/workflows/checks.yml
index e62853e841..808fc04bfc 100644
--- a/.github/workflows/checks.yml
+++ b/.github/workflows/checks.yml
@@ -152,4 +152,12 @@ jobs:
         with:
           name: playwright-results
           path: ./e2e/e2e-app/test-results
-          retention-days: 14
\ No newline at end of file
+          retention-days: 14
+
+      - name: 🆙 Upload e2e builds
+        if: failure()
+        uses: actions/upload-artifact@v4
+        with:
+          name: e2e-builds
+          path: ./e2e/**/dist
+          retention-days: 14
diff --git a/e2e/e2e-app/src/homepage.lite.tsx b/e2e/e2e-app/src/homepage.lite.tsx
index 5550027eed..7f6939aa4f 100644
--- a/e2e/e2e-app/src/homepage.lite.tsx
+++ b/e2e/e2e-app/src/homepage.lite.tsx
@@ -1,13 +1,13 @@
 import { For, onMount, Show, useStore } from '@builder.io/mitosis';
 import { COMPONENT_PATHS } from './component-paths';
 import ComponentWithTypes from './components/component-with-types.lite';
+import DefaultProps from './components/default-props/use-default-props.lite';
 import DisabledInput from './components/disabled-input/disabled-input.lite';
 import NestedParent from './components/nested/nested-parent.lite';
 import OneComponent from './components/one-component.lite';
 import ShowForComponent from './components/show-for-component.lite';
 import SignalParent from './components/signals/signal-parent.lite';
 import SpecialTags from './components/special-tags.lite';
-import DefaultProps from './components/default-props/use-default-props.lite';
 
 export default function Homepage(props: { pathname?: string }) {
   const state = useStore({

From d5fd05ac3a14b7b065a880646bc5f2205721ae76 Mon Sep 17 00:00:00 2001
From: Nicolas Merget <nicolas.merget@deutschebahn.com>
Date: Fri, 17 Jan 2025 12:05:18 +0100
Subject: [PATCH 15/20] chore: exclude node_modules

---
 .github/workflows/checks.yml | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/.github/workflows/checks.yml b/.github/workflows/checks.yml
index 808fc04bfc..8add094731 100644
--- a/.github/workflows/checks.yml
+++ b/.github/workflows/checks.yml
@@ -159,5 +159,7 @@ jobs:
         uses: actions/upload-artifact@v4
         with:
           name: e2e-builds
-          path: ./e2e/**/dist
+          path: |
+            ./e2e/**/dist
+            !**/node_modules/**
           retention-days: 14

From 95b5378c21d1f774f5ebaa17a033849bec30bdee Mon Sep 17 00:00:00 2001
From: Nicolas Merget <nicolas.merget@deutschebahn.com>
Date: Fri, 17 Jan 2025 12:14:01 +0100
Subject: [PATCH 16/20] test: trigger avoiding nx remote cache

---
 e2e/e2e-react/src/App.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/e2e/e2e-react/src/App.tsx b/e2e/e2e-react/src/App.tsx
index baa8978e4e..3e301d8b82 100644
--- a/e2e/e2e-react/src/App.tsx
+++ b/e2e/e2e-react/src/App.tsx
@@ -1,4 +1,5 @@
 // Mitosis output for not yet include .d.ts, so ignore the types when importing.
+// Trigger nx remote cache: 1
 // @ts-ignore
 import { E2eApp } from '@builder.io/e2e-app/react';
 

From d1bd12e2a0db2ad5c7421aedc20599ec53455ff3 Mon Sep 17 00:00:00 2001
From: Nicolas Merget <nicolas.merget@deutschebahn.com>
Date: Tue, 25 Feb 2025 12:22:24 +0100
Subject: [PATCH 17/20] fix: issue with rsc functions

---
 .../__snapshots__/angular.test.ts.snap        |   2 +
 .../__snapshots__/marko.test.ts.snap          |  64 +-
 .../__snapshots__/react.test.ts.snap          | 298 ++++---
 .../__tests__/__snapshots__/rsc.test.ts.snap  | 424 +++++++--
 .../__snapshots__/solid.test.ts.snap          | 128 +--
 .../__snapshots__/stencil.test.ts.snap        | 803 +++++-------------
 .../src/generators/react/helpers/state.ts     |   7 +-
 7 files changed, 811 insertions(+), 915 deletions(-)

diff --git a/packages/core/src/__tests__/__snapshots__/angular.test.ts.snap b/packages/core/src/__tests__/__snapshots__/angular.test.ts.snap
index 32e185d19d..1a350bf266 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.test.ts.snap
@@ -14324,6 +14324,7 @@ export class TypeExternalPropsModule {}
 
 exports[`Angular > jsx > Javascript Test > typeExternalProps 2`] = `
 "import { Component, Input } from \\"@angular/core\\";
+
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
@@ -30351,6 +30352,7 @@ export class TypeExternalPropsModule {}
 
 exports[`Angular > jsx > Typescript Test > typeExternalProps 2`] = `
 "import { Component, Input } from \\"@angular/core\\";
+
 import { CommonModule } from \\"@angular/common\\";
 
 import { FooProps } from \\"./foo-props\\";
diff --git a/packages/core/src/__tests__/__snapshots__/marko.test.ts.snap b/packages/core/src/__tests__/__snapshots__/marko.test.ts.snap
index 621ca7da55..123e97316e 100644
--- a/packages/core/src/__tests__/__snapshots__/marko.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/marko.test.ts.snap
@@ -376,14 +376,14 @@ exports[`Marko > jsx > Javascript Test > BasicRef 1`] = `
 }
 
 style {
-  .input-6a578c15 {
+  .input-4f3fd0c6 {
     color: red;
   }
 }
 <div>
   <if(input.showInput)>
     <input
-      class=\\"input-6a578c15\\"
+      class=\\"input-4f3fd0c6\\"
       key=\\"inputRef\\"
       value=(state.name)
       on-blur((event) => component.onBlur())
@@ -1919,12 +1919,12 @@ exports[`Marko > jsx > Javascript Test > layerName 1`] = `
 "class {}
 
 style {
-  .layer-name-27ceea4e {
+  .layer-name-c6feba5e {
     padding: 10px;
   }
 }
 <section>
-  <div class=\\"layer-name-27ceea4e\\">
+  <div class=\\"layer-name-c6feba5e\\">
     Hello! I can run in React, Vue, Solid, or Liquid!
   </div>
 </section>"
@@ -2026,22 +2026,22 @@ exports[`Marko > jsx > Javascript Test > normalizeLayerNames 1`] = `
 "class {}
 
 style {
-  .css-0-31098cf6 {
+  .css-0-45fac926 {
     margin: 10px;
   }
-  .css-123-31098cf6 {
+  .css-123-45fac926 {
     padding: 10px;
   }
-  .name-123-31098cf6 {
+  .name-123-45fac926 {
     border: 1px solid;
   }
-  .name-31098cf6 {
+  .name-45fac926 {
     color: red;
   }
-  .name-789-31098cf6 {
+  .name-789-45fac926 {
     background: blue;
   }
-  .div-31098cf6 {
+  .div-45fac926 {
     background: blue;
   }
 }
@@ -2051,13 +2051,13 @@ style {
   <div>CamelCase</div>
   <div>Special chars</div>
   <div>Special chars with dashes</div>
-  <div class=\\"css-0-31098cf6\\">Single Number</div>
-  <div class=\\"css-123-31098cf6\\">Multiple Numbers</div>
-  <div class=\\"name-123-31098cf6\\">Chars with numbers at end</div>
-  <div class=\\"name-31098cf6\\">Chars with numbers at start</div>
-  <div class=\\"name-789-31098cf6\\">Numnbers separated by dash</div>
+  <div class=\\"css-0-45fac926\\">Single Number</div>
+  <div class=\\"css-123-45fac926\\">Multiple Numbers</div>
+  <div class=\\"name-123-45fac926\\">Chars with numbers at end</div>
+  <div class=\\"name-45fac926\\">Chars with numbers at start</div>
+  <div class=\\"name-789-45fac926\\">Numnbers separated by dash</div>
   <div>Emoji</div>
-  <div data-name=\\"1\\" class=\\"div-31098cf6\\">Number</div>
+  <div data-name=\\"1\\" class=\\"div-45fac926\\">Number</div>
 </section>"
 `;
 
@@ -3231,14 +3231,14 @@ exports[`Marko > jsx > Typescript Test > BasicRef 1`] = `
 }
 
 style {
-  .input-e2a52cdc {
+  .input-18a64ed0 {
     color: red;
   }
 }
 <div>
   <if(input.showInput)>
     <input
-      class=\\"input-e2a52cdc\\"
+      class=\\"input-18a64ed0\\"
       key=\\"inputRef\\"
       value=(state.name)
       on-blur((event) => component.onBlur())
@@ -4788,12 +4788,12 @@ exports[`Marko > jsx > Typescript Test > layerName 1`] = `
 "class {}
 
 style {
-  .layer-name-27ceea4e {
+  .layer-name-c6feba5e {
     padding: 10px;
   }
 }
 <section>
-  <div class=\\"layer-name-27ceea4e\\">
+  <div class=\\"layer-name-c6feba5e\\">
     Hello! I can run in React, Vue, Solid, or Liquid!
   </div>
 </section>"
@@ -4895,22 +4895,22 @@ exports[`Marko > jsx > Typescript Test > normalizeLayerNames 1`] = `
 "class {}
 
 style {
-  .css-0-038fc384 {
+  .css-0-00b60ad4 {
     margin: 10px;
   }
-  .css-123-038fc384 {
+  .css-123-00b60ad4 {
     padding: 10px;
   }
-  .name-123-038fc384 {
+  .name-123-00b60ad4 {
     border: 1px solid;
   }
-  .name-038fc384 {
+  .name-00b60ad4 {
     color: red;
   }
-  .name-789-038fc384 {
+  .name-789-00b60ad4 {
     background: blue;
   }
-  .div-038fc384 {
+  .div-00b60ad4 {
     background: blue;
   }
 }
@@ -4920,13 +4920,13 @@ style {
   <div>CamelCase</div>
   <div>Special chars</div>
   <div>Special chars with dashes</div>
-  <div class=\\"css-0-038fc384\\">Single Number</div>
-  <div class=\\"css-123-038fc384\\">Multiple Numbers</div>
-  <div class=\\"name-123-038fc384\\">Chars with numbers at end</div>
-  <div class=\\"name-038fc384\\">Chars with numbers at start</div>
-  <div class=\\"name-789-038fc384\\">Numnbers separated by dash</div>
+  <div class=\\"css-0-00b60ad4\\">Single Number</div>
+  <div class=\\"css-123-00b60ad4\\">Multiple Numbers</div>
+  <div class=\\"name-123-00b60ad4\\">Chars with numbers at end</div>
+  <div class=\\"name-00b60ad4\\">Chars with numbers at start</div>
+  <div class=\\"name-789-00b60ad4\\">Numnbers separated by dash</div>
   <div>Emoji</div>
-  <div data-name=\\"1\\" class=\\"div-038fc384\\">Number</div>
+  <div data-name=\\"1\\" class=\\"div-00b60ad4\\">Number</div>
 </section>"
 `;
 
diff --git a/packages/core/src/__tests__/__snapshots__/react.test.ts.snap b/packages/core/src/__tests__/__snapshots__/react.test.ts.snap
index a7b3ce285d..eafd2732b6 100644
--- a/packages/core/src/__tests__/__snapshots__/react.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/react.test.ts.snap
@@ -1091,6 +1091,12 @@ import * as React from \\"react\\";
 import { useState } from \\"react\\";
 
 function ContentSlotJsxCode(props) {
+  props = {
+    content: \\"\\",
+    slotReference: undefined,
+    slotContent: undefined,
+    ...props,
+  };
   const [name, setName] = useState(() => \\"king\\");
 
   const [showContent, setShowContent] = useState(() => false);
@@ -1128,12 +1134,6 @@ function ContentSlotJsxCode(props) {
   );
 }
 
-ContentSlotJsxCode.defaultProps = {
-  content: \\"\\",
-  slotReference: undefined,
-  slotContent: undefined,
-};
-
 export default ContentSlotJsxCode;
 "
 `;
@@ -1144,6 +1144,12 @@ import * as React from \\"react\\";
 import { useState } from \\"react\\";
 
 function ContentSlotJsxCode(props) {
+  props = {
+    content: \\"\\",
+    slotReference: undefined,
+    slotContent: undefined,
+    ...props,
+  };
   const [name, setName] = useState(() => \\"king\\");
 
   const [showContent, setShowContent] = useState(() => false);
@@ -1181,12 +1187,6 @@ function ContentSlotJsxCode(props) {
   );
 }
 
-ContentSlotJsxCode.defaultProps = {
-  content: \\"\\",
-  slotReference: undefined,
-  slotContent: undefined,
-};
-
 export default ContentSlotJsxCode;
 "
 `;
@@ -4214,6 +4214,15 @@ exports[`React - stateType: useState > jsx > Javascript Test > defaultProps 1`]
 import * as React from \\"react\\";
 
 function Button(props) {
+  props = {
+    text: \\"default text\\",
+    link: \\"https://builder.io/\\",
+    openLinkInNewTab: false,
+    onClick: () => {
+      console.log(\\"hi\\");
+    },
+    ...props,
+  };
   return (
     <div>
       {props.link ? (
@@ -4238,15 +4247,6 @@ function Button(props) {
   );
 }
 
-Button.defaultProps = {
-  text: \\"default text\\",
-  link: \\"https://builder.io/\\",
-  openLinkInNewTab: false,
-  onClick: () => {
-    console.log(\\"hi\\");
-  },
-};
-
 export default Button;
 "
 `;
@@ -4256,6 +4256,15 @@ exports[`React - stateType: useState > jsx > Javascript Test > defaultProps 2`]
 import * as React from \\"react\\";
 
 function Button(props) {
+  props = {
+    text: \\"default text\\",
+    link: \\"https://builder.io/\\",
+    openLinkInNewTab: false,
+    onClick: () => {
+      console.log(\\"hi\\");
+    },
+    ...props,
+  };
   return (
     <div>
       {props.link ? (
@@ -4280,15 +4289,6 @@ function Button(props) {
   );
 }
 
-Button.defaultProps = {
-  text: \\"default text\\",
-  link: \\"https://builder.io/\\",
-  openLinkInNewTab: false,
-  onClick: () => {
-    console.log(\\"hi\\");
-  },
-};
-
 export default Button;
 "
 `;
@@ -4298,6 +4298,13 @@ exports[`React - stateType: useState > jsx > Javascript Test > defaultPropsOutsi
 import * as React from \\"react\\";
 
 function Button(props) {
+  props = {
+    text: \\"default text\\",
+    link: \\"https://builder.io/\\",
+    openLinkInNewTab: false,
+    onClick: () => {},
+    ...props,
+  };
   return (
     <div>
       {props.link ? (
@@ -4322,13 +4329,6 @@ function Button(props) {
   );
 }
 
-Button.defaultProps = {
-  text: \\"default text\\",
-  link: \\"https://builder.io/\\",
-  openLinkInNewTab: false,
-  onClick: () => {},
-};
-
 export default Button;
 "
 `;
@@ -4338,6 +4338,13 @@ exports[`React - stateType: useState > jsx > Javascript Test > defaultPropsOutsi
 import * as React from \\"react\\";
 
 function Button(props) {
+  props = {
+    text: \\"default text\\",
+    link: \\"https://builder.io/\\",
+    openLinkInNewTab: false,
+    onClick: () => {},
+    ...props,
+  };
   return (
     <div>
       {props.link ? (
@@ -4362,13 +4369,6 @@ function Button(props) {
   );
 }
 
-Button.defaultProps = {
-  text: \\"default text\\",
-  link: \\"https://builder.io/\\",
-  openLinkInNewTab: false,
-  onClick: () => {},
-};
-
 export default Button;
 "
 `;
@@ -6263,7 +6263,6 @@ function RenderContent(props) {
   useEffect(() => {
     sendComponentsToVisualEditor(props.customComponents);
   }, []);
-
   useEffect(() => {
     dispatchNewContentToVisualEditor(props.content);
   }, [props.content]);
@@ -6316,7 +6315,6 @@ function RenderContent(props) {
   useEffect(() => {
     sendComponentsToVisualEditor(props.customComponents);
   }, []);
-
   useEffect(() => {
     dispatchNewContentToVisualEditor(props.content);
   }, [props.content]);
@@ -7164,6 +7162,28 @@ export default TypeDependency;
 "
 `;
 
+exports[`React - stateType: useState > jsx > Javascript Test > typeExternalProps 1`] = `
+"import * as React from \\"react\\";
+
+function TypeExternalProps(props) {
+  return <div>Hello {props.name}! </div>;
+}
+
+export default TypeExternalProps;
+"
+`;
+
+exports[`React - stateType: useState > jsx > Javascript Test > typeExternalProps 2`] = `
+"import * as React from \\"react\\";
+
+function TypeExternalProps(props) {
+  return <div>Hello {props.name}! </div>;
+}
+
+export default TypeExternalProps;
+"
+`;
+
 exports[`React - stateType: useState > jsx > Javascript Test > typeExternalStore 1`] = `
 "\\"use client\\";
 import * as React from \\"react\\";
@@ -8756,6 +8776,12 @@ type Props = {
 import type { JSX } from \\"../../../../jsx-runtime\\";
 
 function ContentSlotJsxCode(props: Props) {
+  props = {
+    content: \\"\\",
+    slotReference: undefined,
+    slotContent: undefined,
+    ...props,
+  };
   const [name, setName] = useState(() => \\"king\\");
 
   const [showContent, setShowContent] = useState(() => false);
@@ -8793,12 +8819,6 @@ function ContentSlotJsxCode(props: Props) {
   );
 }
 
-ContentSlotJsxCode.defaultProps = {
-  content: \\"\\",
-  slotReference: undefined,
-  slotContent: undefined,
-};
-
 export default ContentSlotJsxCode;
 "
 `;
@@ -8814,6 +8834,12 @@ type Props = {
 import type { JSX } from \\"../../../../jsx-runtime\\";
 
 function ContentSlotJsxCode(props: Props) {
+  props = {
+    content: \\"\\",
+    slotReference: undefined,
+    slotContent: undefined,
+    ...props,
+  };
   const [name, setName] = useState(() => \\"king\\");
 
   const [showContent, setShowContent] = useState(() => false);
@@ -8851,12 +8877,6 @@ function ContentSlotJsxCode(props: Props) {
   );
 }
 
-ContentSlotJsxCode.defaultProps = {
-  content: \\"\\",
-  slotReference: undefined,
-  slotContent: undefined,
-};
-
 export default ContentSlotJsxCode;
 "
 `;
@@ -12342,6 +12362,15 @@ export interface ButtonProps {
 }
 
 function Button(props: ButtonProps) {
+  props = {
+    text: \\"default text\\",
+    link: \\"https://builder.io/\\",
+    openLinkInNewTab: false,
+    onClick: () => {
+      console.log(\\"hi\\");
+    },
+    ...props,
+  };
   return (
     <div>
       {props.link ? (
@@ -12366,15 +12395,6 @@ function Button(props: ButtonProps) {
   );
 }
 
-Button.defaultProps = {
-  text: \\"default text\\",
-  link: \\"https://builder.io/\\",
-  openLinkInNewTab: false,
-  onClick: () => {
-    console.log(\\"hi\\");
-  },
-};
-
 export default Button;
 "
 `;
@@ -12394,6 +12414,15 @@ export interface ButtonProps {
 }
 
 function Button(props: ButtonProps) {
+  props = {
+    text: \\"default text\\",
+    link: \\"https://builder.io/\\",
+    openLinkInNewTab: false,
+    onClick: () => {
+      console.log(\\"hi\\");
+    },
+    ...props,
+  };
   return (
     <div>
       {props.link ? (
@@ -12418,15 +12447,6 @@ function Button(props: ButtonProps) {
   );
 }
 
-Button.defaultProps = {
-  text: \\"default text\\",
-  link: \\"https://builder.io/\\",
-  openLinkInNewTab: false,
-  onClick: () => {
-    console.log(\\"hi\\");
-  },
-};
-
 export default Button;
 "
 `;
@@ -12444,6 +12464,13 @@ export interface ButtonProps {
 }
 
 function Button(props: ButtonProps) {
+  props = {
+    text: \\"default text\\",
+    link: \\"https://builder.io/\\",
+    openLinkInNewTab: false,
+    onClick: () => {},
+    ...props,
+  };
   return (
     <div>
       {props.link ? (
@@ -12468,13 +12495,6 @@ function Button(props: ButtonProps) {
   );
 }
 
-Button.defaultProps = {
-  text: \\"default text\\",
-  link: \\"https://builder.io/\\",
-  openLinkInNewTab: false,
-  onClick: () => {},
-};
-
 export default Button;
 "
 `;
@@ -12492,6 +12512,13 @@ export interface ButtonProps {
 }
 
 function Button(props: ButtonProps) {
+  props = {
+    text: \\"default text\\",
+    link: \\"https://builder.io/\\",
+    openLinkInNewTab: false,
+    onClick: () => {},
+    ...props,
+  };
   return (
     <div>
       {props.link ? (
@@ -12516,13 +12543,6 @@ function Button(props: ButtonProps) {
   );
 }
 
-Button.defaultProps = {
-  text: \\"default text\\",
-  link: \\"https://builder.io/\\",
-  openLinkInNewTab: false,
-  onClick: () => {},
-};
-
 export default Button;
 "
 `;
@@ -14603,7 +14623,6 @@ function RenderContent(props: Props) {
   useEffect(() => {
     sendComponentsToVisualEditor(props.customComponents);
   }, []);
-
   useEffect(() => {
     dispatchNewContentToVisualEditor(props.content);
   }, [props.content]);
@@ -14664,7 +14683,6 @@ function RenderContent(props: Props) {
   useEffect(() => {
     sendComponentsToVisualEditor(props.customComponents);
   }, []);
-
   useEffect(() => {
     dispatchNewContentToVisualEditor(props.content);
   }, [props.content]);
@@ -15602,6 +15620,30 @@ export default TypeDependency;
 "
 `;
 
+exports[`React - stateType: useState > jsx > Typescript Test > typeExternalProps 1`] = `
+"import * as React from \\"react\\";
+import { FooProps } from \\"./foo-props\\";
+
+function TypeExternalProps(props: FooProps) {
+  return <div>Hello {props.name}! </div>;
+}
+
+export default TypeExternalProps;
+"
+`;
+
+exports[`React - stateType: useState > jsx > Typescript Test > typeExternalProps 2`] = `
+"import * as React from \\"react\\";
+import { FooProps } from \\"./foo-props\\";
+
+function TypeExternalProps(props: FooProps) {
+  return <div>Hello {props.name}! </div>;
+}
+
+export default TypeExternalProps;
+"
+`;
+
 exports[`React - stateType: useState > jsx > Typescript Test > typeExternalStore 1`] = `
 "\\"use client\\";
 import * as React from \\"react\\";
@@ -16377,8 +16419,6 @@ function MyComponent(props) {
   );
 }
 
-MyComponent.defaultProps = {};
-
 export default MyComponent;
 "
 `;
@@ -16400,32 +16440,30 @@ function MyComponent(props) {
   );
 }
 
-MyComponent.defaultProps = {};
-
 export default MyComponent;
 "
 `;
 
 exports[`React - stateType: useState > svelte > Javascript Test > context 1`] = `
-"'>' expected. (35:13)
-  33 | return (
-  34 |
-> 35 | <'activeTab'.Provider  value={activeTab}><div>{activeTab}</div></'activeTab'.Provider>
+"'>' expected. (32:13)
+  30 | return (
+  31 |
+> 32 | <'activeTab'.Provider  value={activeTab}><div>{activeTab}</div></'activeTab'.Provider>
      |             ^
-  36 |
-  37 |
-  38 |"
+  33 |
+  34 |
+  35 |"
 `;
 
 exports[`React - stateType: useState > svelte > Javascript Test > context 2`] = `
-"'>' expected. (35:13)
-  33 | return (
-  34 |
-> 35 | <'activeTab'.Provider  value={activeTab}><div>{activeTab}</div></'activeTab'.Provider>
+"'>' expected. (32:13)
+  30 | return (
+  31 |
+> 32 | <'activeTab'.Provider  value={activeTab}><div>{activeTab}</div></'activeTab'.Provider>
      |             ^
-  36 |
-  37 |
-  38 |"
+  33 |
+  34 |
+  35 |"
 `;
 
 exports[`React - stateType: useState > svelte > Javascript Test > each 1`] = `
@@ -16655,11 +16693,9 @@ function MyComponent(props) {
   useEffect(() => {
     console.log(\\"onMount\\");
   }, []);
-
   useEffect(() => {
     console.log(\\"onAfterUpdate\\");
   });
-
   useEffect(() => {
     return () => {
       console.log(\\"onDestroy\\");
@@ -16682,11 +16718,9 @@ function MyComponent(props) {
   useEffect(() => {
     console.log(\\"onMount\\");
   }, []);
-
   useEffect(() => {
     console.log(\\"onAfterUpdate\\");
   });
-
   useEffect(() => {
     return () => {
       console.log(\\"onDestroy\\");
@@ -17182,8 +17216,6 @@ function MyComponent(props: any) {
   );
 }
 
-MyComponent.defaultProps = {};
-
 export default MyComponent;
 "
 `;
@@ -17205,32 +17237,30 @@ function MyComponent(props: any) {
   );
 }
 
-MyComponent.defaultProps = {};
-
 export default MyComponent;
 "
 `;
 
 exports[`React - stateType: useState > svelte > Typescript Test > context 1`] = `
-"'>' expected. (35:13)
-  33 | return (
-  34 |
-> 35 | <'activeTab'.Provider  value={activeTab}><div>{activeTab}</div></'activeTab'.Provider>
+"'>' expected. (32:13)
+  30 | return (
+  31 |
+> 32 | <'activeTab'.Provider  value={activeTab}><div>{activeTab}</div></'activeTab'.Provider>
      |             ^
-  36 |
-  37 |
-  38 |"
+  33 |
+  34 |
+  35 |"
 `;
 
 exports[`React - stateType: useState > svelte > Typescript Test > context 2`] = `
-"'>' expected. (35:13)
-  33 | return (
-  34 |
-> 35 | <'activeTab'.Provider  value={activeTab}><div>{activeTab}</div></'activeTab'.Provider>
+"'>' expected. (32:13)
+  30 | return (
+  31 |
+> 32 | <'activeTab'.Provider  value={activeTab}><div>{activeTab}</div></'activeTab'.Provider>
      |             ^
-  36 |
-  37 |
-  38 |"
+  33 |
+  34 |
+  35 |"
 `;
 
 exports[`React - stateType: useState > svelte > Typescript Test > each 1`] = `
@@ -17460,11 +17490,9 @@ function MyComponent(props: any) {
   useEffect(() => {
     console.log(\\"onMount\\");
   }, []);
-
   useEffect(() => {
     console.log(\\"onAfterUpdate\\");
   });
-
   useEffect(() => {
     return () => {
       console.log(\\"onDestroy\\");
@@ -17487,11 +17515,9 @@ function MyComponent(props: any) {
   useEffect(() => {
     console.log(\\"onMount\\");
   }, []);
-
   useEffect(() => {
     console.log(\\"onAfterUpdate\\");
   });
-
   useEffect(() => {
     return () => {
       console.log(\\"onDestroy\\");
diff --git a/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap b/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap
index 3a3c30eac1..184c3baeba 100644
--- a/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap
@@ -482,14 +482,68 @@ export default Button;
 `;
 
 exports[`RSC > jsx > Javascript Test > Columns 1`] = `
-"'function' is not allowed as a variable declaration name. (21:9)
-  19 |   function Column(props) {
-  20 |
-> 21 |   const function getColumns() {
-     |         ^
-  22 | return props.columns || [];
-  23 | }
-  24 | const function getGutterSize() {"
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
+
+function Column(props) {
+  const getColumns = function getColumns() {
+    return props.columns || [];
+  };
+  const getGutterSize = function getGutterSize() {
+    return typeof props.space === \\"number\\" ? props.space || 0 : 20;
+  };
+  const getWidth = function getWidth(index) {
+    const columns = getColumns();
+    return (columns[index] && columns[index].width) || 100 / columns.length;
+  };
+  const getColumnCssWidth = function getColumnCssWidth(index) {
+    const columns = getColumns();
+    const gutterSize = getGutterSize();
+    const subtractWidth = (gutterSize * (columns.length - 1)) / columns.length;
+    return \`calc(\${getWidth(index)}% - \${subtractWidth}px)\`;
+  };
+
+  return (
+    <>
+      <div className=\\"builder-columns div\\">
+        {props.columns?.map((column, index) => (
+          <div className=\\"builder-column div-2\\">
+            {column.content}
+            {index}
+          </div>
+        ))}
+      </div>
+      <style jsx>{\`
+        .div {
+          display: flex;
+          flex-direction: column;
+          align-items: stretch;
+          line-height: normal;
+        }
+        @media (max-width: 999px) {
+          .div {
+            flex-direction: row;
+          }
+        }
+        @media (max-width: 639px) {
+          .div {
+            flex-direction: row-reverse;
+          }
+        }
+        .div-2 {
+          flex-grow: 1;
+        }
+      \`}</style>
+    </>
+  );
+}
+
+export default Column;
+"
 `;
 
 exports[`RSC > jsx > Javascript Test > ContentSlotHtml 1`] = `
@@ -1161,14 +1215,30 @@ export default FormInputComponent;
 `;
 
 exports[`RSC > jsx > Javascript Test > InputParent 1`] = `
-"'function' is not allowed as a variable declaration name. (21:9)
-  19 |   function Stepper(props) {
-  20 |
-> 21 |   const function handleChange(value) {
-     |         ^
-  22 | console.log(value);
-  23 | }
-  24 |"
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
+import FormInputComponent from \\"./input.raw\\";
+
+function Stepper(props) {
+  const handleChange = function handleChange(value) {
+    console.log(value);
+  };
+
+  return (
+    <FormInputComponent
+      name=\\"kingzez\\"
+      type=\\"text\\"
+      onChange={(value) => handleChange(value)}
+    />
+  );
+}
+
+export default Stepper;
+"
 `;
 
 exports[`RSC > jsx > Javascript Test > NestedStore 1`] = `
@@ -2365,25 +2435,63 @@ export default MyBasicComponent;
 `;
 
 exports[`RSC > jsx > Javascript Test > getterState 1`] = `
-"'function' is not allowed as a variable declaration name. (21:9)
-  19 |   function Button(props) {
-  20 |
-> 21 |   const function foo2() {
-     |         ^
-  22 | return props.foo + 'foo';
-  23 | }
-  24 | const function bar() {"
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
+
+function Button(props) {
+  const foo2 = function foo2() {
+    return props.foo + \\"foo\\";
+  };
+  const bar = function bar() {
+    return \\"bar\\";
+  };
+  const baz = function baz(i) {
+    return i + foo2().length;
+  };
+
+  return (
+    <div>
+      <p>{foo2()}</p>
+      <p>{bar()}</p>
+      <p>{baz(1)}</p>
+    </div>
+  );
+}
+
+export default Button;
+"
 `;
 
 exports[`RSC > jsx > Javascript Test > import types 1`] = `
-"'function' is not allowed as a variable declaration name. (21:9)
-  19 |   function RenderContent(props) {
-  20 |
-> 21 |   const function getRenderContentProps(block, index) {
-     |         ^
-  22 | return {
-  23 | block: block,
-  24 | index: index"
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
+import RenderBlock from \\"./builder-render-block.raw\\";
+
+function RenderContent(props) {
+  const getRenderContentProps = function getRenderContentProps(block, index) {
+    return {
+      block: block,
+      index: index,
+    };
+  };
+
+  return (
+    <RenderBlock
+      {...getRenderContentProps(props.renderContentProps.block, 0)}
+    />
+  );
+}
+
+export default RenderContent;
+"
 `;
 
 exports[`RSC > jsx > Javascript Test > layerName 1`] = `
@@ -2938,14 +3046,14 @@ export default OnUpdate;
 `;
 
 exports[`RSC > jsx > Javascript Test > renderBlock 1`] = `
-"'function' is not allowed as a variable declaration name. (34:10)
-  32 |    function RenderBlock(props) {
-  33 |
-> 34 |    const function component() {
-     |          ^
-  35 | const componentName = getProcessedBlock({
-  36 |  block: props.block,
-  37 |  state: props.context.state,"
+"Identifier expected. (216:8)
+  214 |    {shouldWrap() ? (
+  215 |    <>{isEmptyHtmlElement(tag()) ? (
+> 216 |    <tag()  {...(attributes())}  {...(actions())}  />
+      |        ^
+  217 |  ) : null}
+  218 | {!isEmptyHtmlElement(tag()) && repeatItemData() ? (
+  219 |    <>{repeatItemData()?.map((data, index) => ("
 `;
 
 exports[`RSC > jsx > Javascript Test > renderContentExample 1`] = `
@@ -4229,14 +4337,83 @@ export default Button;
 `;
 
 exports[`RSC > jsx > Typescript Test > Columns 1`] = `
-"'function' is not allowed as a variable declaration name. (34:9)
-  32 |   function Column(props:ColumnProps) {
-  33 |
-> 34 |   const function getColumns() {
-     |         ^
-  35 | return props.columns || [];
-  36 | }
-  37 | const function getGutterSize() {"
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
+
+type Column = {
+  content: any; // TODO: Implement this when support for dynamic CSS lands
+
+  width?: number;
+};
+export interface ColumnProps {
+  columns?: Column[]; // TODO: Implement this when support for dynamic CSS lands
+
+  space?: number; // TODO: Implement this when support for dynamic CSS lands
+
+  stackColumnsAt?: \\"tablet\\" | \\"mobile\\" | \\"never\\"; // TODO: Implement this when support for dynamic CSS lands
+
+  reverseColumnsWhenStacked?: boolean;
+}
+
+function Column(props: ColumnProps) {
+  const getColumns = function getColumns() {
+    return props.columns || [];
+  };
+  const getGutterSize = function getGutterSize() {
+    return typeof props.space === \\"number\\" ? props.space || 0 : 20;
+  };
+  const getWidth = function getWidth(index: number) {
+    const columns = getColumns();
+    return (columns[index] && columns[index].width) || 100 / columns.length;
+  };
+  const getColumnCssWidth = function getColumnCssWidth(index: number) {
+    const columns = getColumns();
+    const gutterSize = getGutterSize();
+    const subtractWidth = (gutterSize * (columns.length - 1)) / columns.length;
+    return \`calc(\${getWidth(index)}% - \${subtractWidth}px)\`;
+  };
+
+  return (
+    <>
+      <div className=\\"builder-columns div\\">
+        {props.columns?.map((column, index) => (
+          <div className=\\"builder-column div-2\\">
+            {column.content}
+            {index}
+          </div>
+        ))}
+      </div>
+      <style jsx>{\`
+        .div {
+          display: flex;
+          flex-direction: column;
+          align-items: stretch;
+          line-height: normal;
+        }
+        @media (max-width: 999px) {
+          .div {
+            flex-direction: row;
+          }
+        }
+        @media (max-width: 639px) {
+          .div {
+            flex-direction: row-reverse;
+          }
+        }
+        .div-2 {
+          flex-grow: 1;
+        }
+      \`}</style>
+    </>
+  );
+}
+
+export default Column;
+"
 `;
 
 exports[`RSC > jsx > Typescript Test > ContentSlotHtml 1`] = `
@@ -5009,14 +5186,30 @@ export default FormInputComponent;
 `;
 
 exports[`RSC > jsx > Typescript Test > InputParent 1`] = `
-"'function' is not allowed as a variable declaration name. (21:9)
-  19 |   function Stepper(props:any) {
-  20 |
-> 21 |   const function handleChange(value: string) {
-     |         ^
-  22 | console.log(value);
-  23 | }
-  24 |"
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
+import FormInputComponent from \\"./input.raw\\";
+
+function Stepper(props: any) {
+  const handleChange = function handleChange(value: string) {
+    console.log(value);
+  };
+
+  return (
+    <FormInputComponent
+      name=\\"kingzez\\"
+      type=\\"text\\"
+      onChange={(value) => handleChange(value)}
+    />
+  );
+}
+
+export default Stepper;
+"
 `;
 
 exports[`RSC > jsx > Typescript Test > NestedStore 1`] = `
@@ -6373,25 +6566,74 @@ export default MyBasicComponent;
 `;
 
 exports[`RSC > jsx > Typescript Test > getterState 1`] = `
-"'function' is not allowed as a variable declaration name. (23:9)
-  21 |   function Button(props:ButtonProps) {
-  22 |
-> 23 |   const function foo2() {
-     |         ^
-  24 | return props.foo + 'foo';
-  25 | }
-  26 | const function bar() {"
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+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`] = `
-"'function' is not allowed as a variable declaration name. (26:9)
-  24 |   function RenderContent(props:RenderContentProps) {
-  25 |
-> 26 |   const function getRenderContentProps(block, index) {
-     |         ^
-  27 | return {
-  28 | block: block,
-  29 | index: index"
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
+
+type RenderContentProps = {
+  options?: GetContentOptions;
+  content: BuilderContent;
+  renderContentProps: RenderBlockProps;
+};
+import { BuilderContent, GetContentOptions } from \\"@builder.io/sdk\\";
+import RenderBlock, { RenderBlockProps } from \\"./builder-render-block.raw\\";
+
+function RenderContent(props: RenderContentProps) {
+  const getRenderContentProps = function getRenderContentProps(block, index) {
+    return {
+      block: block,
+      index: index,
+    };
+  };
+
+  return (
+    <RenderBlock
+      {...getRenderContentProps(props.renderContentProps.block, 0)}
+    />
+  );
+}
+
+export default RenderContent;
+"
 `;
 
 exports[`RSC > jsx > Typescript Test > layerName 1`] = `
@@ -7003,14 +7245,14 @@ export default OnUpdate;
 `;
 
 exports[`RSC > jsx > Typescript Test > renderBlock 1`] = `
-"'function' is not allowed as a variable declaration name. (42:10)
-  40 |    function RenderBlock(props:RenderBlockProps) {
-  41 |
-> 42 |    const function component() {
-     |          ^
-  43 | const componentName = getProcessedBlock({
-  44 |  block: props.block,
-  45 |  state: props.context.state,"
+"Identifier expected. (224:8)
+  222 |    {shouldWrap() ? (
+  223 |    <>{isEmptyHtmlElement(tag()) ? (
+> 224 |    <tag()  {...(attributes())}  {...(actions())}  />
+      |        ^
+  225 |  ) : null}
+  226 | {!isEmptyHtmlElement(tag()) && repeatItemData() ? (
+  227 |    <>{repeatItemData()?.map((data, index) => ("
 `;
 
 exports[`RSC > jsx > Typescript Test > renderContentExample 1`] = `
@@ -8634,3 +8876,25 @@ function MyComponent(props: any) {
 export default MyComponent;
 "
 `;
+
+exports[`RSC local > jsx > Javascript Test > renderBlock 1`] = `
+"Identifier expected. (216:8)
+  214 |    {shouldWrap() ? (
+  215 |    <>{isEmptyHtmlElement(tag()) ? (
+> 216 |    <tag()  {...(attributes())}  {...(actions())}  />
+      |        ^
+  217 |  ) : null}
+  218 | {!isEmptyHtmlElement(tag()) && repeatItemData() ? (
+  219 |    <>{repeatItemData()?.map((data, index) => ("
+`;
+
+exports[`RSC local > jsx > Typescript Test > renderBlock 1`] = `
+"Identifier expected. (224:8)
+  222 |    {shouldWrap() ? (
+  223 |    <>{isEmptyHtmlElement(tag()) ? (
+> 224 |    <tag()  {...(attributes())}  {...(actions())}  />
+      |        ^
+  225 |  ) : null}
+  226 | {!isEmptyHtmlElement(tag()) && repeatItemData() ? (
+  227 |    <>{repeatItemData()?.map((data, index) => ("
+`;
diff --git a/packages/core/src/__tests__/__snapshots__/solid.test.ts.snap b/packages/core/src/__tests__/__snapshots__/solid.test.ts.snap
index 30aec18103..74a1d8642b 100644
--- a/packages/core/src/__tests__/__snapshots__/solid.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/solid.test.ts.snap
@@ -998,7 +998,7 @@ function MyBasicRefComponent(props) {
         <Show when={props.showInput}>
           <>
             <input
-              class=\\"input-6e0f3c16\\"
+              class=\\"input-68f6f18b\\"
               ref={inputRef}
               value={name()}
               onBlur={(event) => onBlur()}
@@ -1017,7 +1017,7 @@ function MyBasicRefComponent(props) {
         {lowerCaseName()}! I can run in React, Qwik, Vue, Solid, or Web
         Component!
       </div>
-      <style>{\`.input-6e0f3c16 {
+      <style>{\`.input-68f6f18b {
   color: red;
 }\`}</style>
     </>
@@ -1052,7 +1052,7 @@ function MyBasicRefComponent(props) {
         <Show when={props.showInput}>
           <>
             <input
-              class=\\"input-6e0f3c16\\"
+              class=\\"input-68f6f18b\\"
               ref={inputRef}
               value={name()}
               onBlur={(event) => onBlur()}
@@ -1071,7 +1071,7 @@ function MyBasicRefComponent(props) {
         {lowerCaseName()}! I can run in React, Qwik, Vue, Solid, or Web
         Component!
       </div>
-      <style>{\`.input-6e0f3c16 {
+      <style>{\`.input-68f6f18b {
   color: red;
 }\`}</style>
     </>
@@ -5245,11 +5245,11 @@ exports[`Solid > jsx > Javascript Test > layerName 1`] = `
   return (
     <>
       <section>
-        <div class=\\"div-033af2fa\\">
+        <div class=\\"div-5e6f7a74\\">
           Hello! I can run in React, Vue, Solid, or Liquid!
         </div>
       </section>
-      <style>{\`.div-033af2fa {
+      <style>{\`.div-5e6f7a74 {
   padding: 10px;
 }\`}</style>
     </>
@@ -5265,11 +5265,11 @@ exports[`Solid > jsx > Javascript Test > layerName 2`] = `
   return (
     <>
       <section>
-        <div class=\\"div-033af2fa\\">
+        <div class=\\"div-5e6f7a74\\">
           Hello! I can run in React, Vue, Solid, or Liquid!
         </div>
       </section>
-      <style>{\`.div-033af2fa {
+      <style>{\`.div-5e6f7a74 {
   padding: 10px;
 }\`}</style>
     </>
@@ -5550,27 +5550,27 @@ exports[`Solid > jsx > Javascript Test > normalizeLayerNames 1`] = `
         <div>CamelCase</div>
         <div>Special chars</div>
         <div>Special chars with dashes</div>
-        <div class=\\"div-130cf56c\\">Single Number</div>
-        <div class=\\"div-130cf56c-2\\">Multiple Numbers</div>
-        <div class=\\"div-130cf56c-3\\">Chars with numbers at end</div>
-        <div class=\\"div-130cf56c-4\\">Chars with numbers at start</div>
-        <div class=\\"div-130cf56c-5\\">Numnbers separated by dash</div>
+        <div class=\\"div-fe198616\\">Single Number</div>
+        <div class=\\"div-fe198616-2\\">Multiple Numbers</div>
+        <div class=\\"div-fe198616-3\\">Chars with numbers at end</div>
+        <div class=\\"div-fe198616-4\\">Chars with numbers at start</div>
+        <div class=\\"div-fe198616-5\\">Numnbers separated by dash</div>
         <div>Emoji</div>
-        <div class=\\"div-130cf56c-6\\" data-name=\\"1\\">
+        <div class=\\"div-fe198616-6\\" data-name=\\"1\\">
           Number
         </div>
       </section>
-      <style>{\`.div-130cf56c {
+      <style>{\`.div-fe198616 {
   margin: 10px;
-}.div-130cf56c-2 {
+}.div-fe198616-2 {
   padding: 10px;
-}.div-130cf56c-3 {
+}.div-fe198616-3 {
   border: 1px solid;
-}.div-130cf56c-4 {
+}.div-fe198616-4 {
   color: red;
-}.div-130cf56c-5 {
+}.div-fe198616-5 {
   background: blue;
-}.div-130cf56c-6 {
+}.div-fe198616-6 {
   background: blue;
 }\`}</style>
     </>
@@ -5591,27 +5591,27 @@ exports[`Solid > jsx > Javascript Test > normalizeLayerNames 2`] = `
         <div>CamelCase</div>
         <div>Special chars</div>
         <div>Special chars with dashes</div>
-        <div class=\\"div-130cf56c\\">Single Number</div>
-        <div class=\\"div-130cf56c-2\\">Multiple Numbers</div>
-        <div class=\\"div-130cf56c-3\\">Chars with numbers at end</div>
-        <div class=\\"div-130cf56c-4\\">Chars with numbers at start</div>
-        <div class=\\"div-130cf56c-5\\">Numnbers separated by dash</div>
+        <div class=\\"div-fe198616\\">Single Number</div>
+        <div class=\\"div-fe198616-2\\">Multiple Numbers</div>
+        <div class=\\"div-fe198616-3\\">Chars with numbers at end</div>
+        <div class=\\"div-fe198616-4\\">Chars with numbers at start</div>
+        <div class=\\"div-fe198616-5\\">Numnbers separated by dash</div>
         <div>Emoji</div>
-        <div class=\\"div-130cf56c-6\\" data-name=\\"1\\">
+        <div class=\\"div-fe198616-6\\" data-name=\\"1\\">
           Number
         </div>
       </section>
-      <style>{\`.div-130cf56c {
+      <style>{\`.div-fe198616 {
   margin: 10px;
-}.div-130cf56c-2 {
+}.div-fe198616-2 {
   padding: 10px;
-}.div-130cf56c-3 {
+}.div-fe198616-3 {
   border: 1px solid;
-}.div-130cf56c-4 {
+}.div-fe198616-4 {
   color: red;
-}.div-130cf56c-5 {
+}.div-fe198616-5 {
   background: blue;
-}.div-130cf56c-6 {
+}.div-fe198616-6 {
   background: blue;
 }\`}</style>
     </>
@@ -9292,7 +9292,7 @@ function MyBasicRefComponent(props: Props) {
         <Show when={props.showInput}>
           <>
             <input
-              class=\\"input-7e4ae779\\"
+              class=\\"input-252c2efd\\"
               ref={inputRef!}
               value={name()}
               onBlur={(event) => onBlur()}
@@ -9311,7 +9311,7 @@ function MyBasicRefComponent(props: Props) {
         {lowerCaseName()}! I can run in React, Qwik, Vue, Solid, or Web
         Component!
       </div>
-      <style>{\`.input-7e4ae779 {
+      <style>{\`.input-252c2efd {
   color: red;
 }\`}</style>
     </>
@@ -9350,7 +9350,7 @@ function MyBasicRefComponent(props: Props) {
         <Show when={props.showInput}>
           <>
             <input
-              class=\\"input-7e4ae779\\"
+              class=\\"input-252c2efd\\"
               ref={inputRef!}
               value={name()}
               onBlur={(event) => onBlur()}
@@ -9369,7 +9369,7 @@ function MyBasicRefComponent(props: Props) {
         {lowerCaseName()}! I can run in React, Qwik, Vue, Solid, or Web
         Component!
       </div>
-      <style>{\`.input-7e4ae779 {
+      <style>{\`.input-252c2efd {
   color: red;
 }\`}</style>
     </>
@@ -14149,11 +14149,11 @@ exports[`Solid > jsx > Typescript Test > layerName 1`] = `
   return (
     <>
       <section>
-        <div class=\\"div-033af2fa\\">
+        <div class=\\"div-5e6f7a74\\">
           Hello! I can run in React, Vue, Solid, or Liquid!
         </div>
       </section>
-      <style>{\`.div-033af2fa {
+      <style>{\`.div-5e6f7a74 {
   padding: 10px;
 }\`}</style>
     </>
@@ -14169,11 +14169,11 @@ exports[`Solid > jsx > Typescript Test > layerName 2`] = `
   return (
     <>
       <section>
-        <div class=\\"div-033af2fa\\">
+        <div class=\\"div-5e6f7a74\\">
           Hello! I can run in React, Vue, Solid, or Liquid!
         </div>
       </section>
-      <style>{\`.div-033af2fa {
+      <style>{\`.div-5e6f7a74 {
   padding: 10px;
 }\`}</style>
     </>
@@ -14470,27 +14470,27 @@ function MyNormalizedLayerNamesComponent(
         <div>CamelCase</div>
         <div>Special chars</div>
         <div>Special chars with dashes</div>
-        <div class=\\"div-e49cb49c\\">Single Number</div>
-        <div class=\\"div-e49cb49c-2\\">Multiple Numbers</div>
-        <div class=\\"div-e49cb49c-3\\">Chars with numbers at end</div>
-        <div class=\\"div-e49cb49c-4\\">Chars with numbers at start</div>
-        <div class=\\"div-e49cb49c-5\\">Numnbers separated by dash</div>
+        <div class=\\"div-f8d7c8bc\\">Single Number</div>
+        <div class=\\"div-f8d7c8bc-2\\">Multiple Numbers</div>
+        <div class=\\"div-f8d7c8bc-3\\">Chars with numbers at end</div>
+        <div class=\\"div-f8d7c8bc-4\\">Chars with numbers at start</div>
+        <div class=\\"div-f8d7c8bc-5\\">Numnbers separated by dash</div>
         <div>Emoji</div>
-        <div class=\\"div-e49cb49c-6\\" data-name=\\"1\\">
+        <div class=\\"div-f8d7c8bc-6\\" data-name=\\"1\\">
           Number
         </div>
       </section>
-      <style>{\`.div-e49cb49c {
+      <style>{\`.div-f8d7c8bc {
   margin: 10px;
-}.div-e49cb49c-2 {
+}.div-f8d7c8bc-2 {
   padding: 10px;
-}.div-e49cb49c-3 {
+}.div-f8d7c8bc-3 {
   border: 1px solid;
-}.div-e49cb49c-4 {
+}.div-f8d7c8bc-4 {
   color: red;
-}.div-e49cb49c-5 {
+}.div-f8d7c8bc-5 {
   background: blue;
-}.div-e49cb49c-6 {
+}.div-f8d7c8bc-6 {
   background: blue;
 }\`}</style>
     </>
@@ -14517,27 +14517,27 @@ function MyNormalizedLayerNamesComponent(
         <div>CamelCase</div>
         <div>Special chars</div>
         <div>Special chars with dashes</div>
-        <div class=\\"div-e49cb49c\\">Single Number</div>
-        <div class=\\"div-e49cb49c-2\\">Multiple Numbers</div>
-        <div class=\\"div-e49cb49c-3\\">Chars with numbers at end</div>
-        <div class=\\"div-e49cb49c-4\\">Chars with numbers at start</div>
-        <div class=\\"div-e49cb49c-5\\">Numnbers separated by dash</div>
+        <div class=\\"div-f8d7c8bc\\">Single Number</div>
+        <div class=\\"div-f8d7c8bc-2\\">Multiple Numbers</div>
+        <div class=\\"div-f8d7c8bc-3\\">Chars with numbers at end</div>
+        <div class=\\"div-f8d7c8bc-4\\">Chars with numbers at start</div>
+        <div class=\\"div-f8d7c8bc-5\\">Numnbers separated by dash</div>
         <div>Emoji</div>
-        <div class=\\"div-e49cb49c-6\\" data-name=\\"1\\">
+        <div class=\\"div-f8d7c8bc-6\\" data-name=\\"1\\">
           Number
         </div>
       </section>
-      <style>{\`.div-e49cb49c {
+      <style>{\`.div-f8d7c8bc {
   margin: 10px;
-}.div-e49cb49c-2 {
+}.div-f8d7c8bc-2 {
   padding: 10px;
-}.div-e49cb49c-3 {
+}.div-f8d7c8bc-3 {
   border: 1px solid;
-}.div-e49cb49c-4 {
+}.div-f8d7c8bc-4 {
   color: red;
-}.div-e49cb49c-5 {
+}.div-f8d7c8bc-5 {
   background: blue;
-}.div-e49cb49c-6 {
+}.div-f8d7c8bc-6 {
   background: blue;
 }\`}</style>
     </>
diff --git a/packages/core/src/__tests__/__snapshots__/stencil.test.ts.snap b/packages/core/src/__tests__/__snapshots__/stencil.test.ts.snap
index a9013190c4..af787674db 100644
--- a/packages/core/src/__tests__/__snapshots__/stencil.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/stencil.test.ts.snap
@@ -142,11 +142,7 @@ export class MyBasicRefComponent {
 `;
 
 exports[`Stencil > jsx > Javascript Test > Basic 1`] = `
-"export const DEFAULT_VALUES = {
-  name: \\"Steve\\",
-};
-
-import { Component, h, Fragment, State } from \\"@stencil/core\\";
+"import { Component, h, Fragment, State } from \\"@stencil/core\\";
 
 @Component({
   tag: \\"my-basic-component\\",
@@ -166,13 +162,17 @@ export class MyBasicComponent {
     return \\"bar\\";
   }
 
+  DEFAULT_VALUES = {
+    name: \\"Steve\\",
+  };
+
   componentDidLoad() {}
 
   render() {
     return (
       <div class=\\"test div\\">
         <input
-          value={DEFAULT_VALUES.name || this.name}
+          value={this.DEFAULT_VALUES.name || this.name}
           onChange={(myEvent) => (this.name = myEvent.target.value)}
         />
         Hello! I can run in React, Vue, Solid, or Liquid! &gt;
@@ -556,20 +556,7 @@ export class MyBasicRefAssignmentComponent {
 `;
 
 exports[`Stencil > jsx > Javascript Test > BasicRefPrevious 1`] = `
-"export function usePrevious(value) {
-  // The ref object is a generic container whose current property is mutable ...
-  // ... and can hold any value, similar to an instance property on a class
-  let ref = useRef(null); // Store current value in ref
-
-  onUpdate(() => {
-    ref = value;
-  }, [value]); // Only re-run if value changes
-  // Return previous value (happens before update in useEffect above)
-
-  return ref;
-}
-
-import { Component, h, Fragment, State } from \\"@stencil/core\\";
+"import { Component, h, Fragment, State } from \\"@stencil/core\\";
 
 @Component({
   tag: \\"my-previous-component\\",
@@ -2780,11 +2767,7 @@ export class Button {
 `;
 
 exports[`Stencil > jsx > Javascript Test > defaultValsWithTypes 1`] = `
-"const DEFAULT_VALUES = {
-  name: \\"Sami\\",
-};
-
-import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
+"import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
 
 @Component({
   tag: \\"component-with-types\\",
@@ -2792,6 +2775,10 @@ import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
 export class ComponentWithTypes {
   @Prop() name: any;
 
+  DEFAULT_VALUES = {
+    name: \\"Sami\\",
+  };
+
   componentDidLoad() {}
 
   render() {
@@ -2799,7 +2786,7 @@ export class ComponentWithTypes {
       <div>
         {\\" \\"}
         Hello
-        {this.name || DEFAULT_VALUES.name}
+        {this.name || this.DEFAULT_VALUES.name}
       </div>
     );
   }
@@ -3251,11 +3238,7 @@ export class OnInit {
 `;
 
 exports[`Stencil > jsx > Javascript Test > onInit 1`] = `
-"export const defaultValues = {
-  name: \\"PatrickJS\\",
-};
-
-import { Component, h, Fragment, Prop, State } from \\"@stencil/core\\";
+"import { Component, h, Fragment, Prop, State } from \\"@stencil/core\\";
 
 @Component({
   tag: \\"on-init\\",
@@ -3389,13 +3372,7 @@ export class OnUpdateWithDeps {
 `;
 
 exports[`Stencil > jsx > Javascript Test > preserveExportOrLocalStatement 1`] = `
-"const b = 3;
-const foo = () => {};
-export const a = 3;
-export const bar = () => {};
-export function run(value) {}
-
-import { Component, h, Fragment } from \\"@stencil/core\\";
+"import { Component, h, Fragment } from \\"@stencil/core\\";
 
 @Component({
   tag: \\"my-basic-component\\",
@@ -4214,6 +4191,29 @@ export class TypeDependency {
 "
 `;
 
+exports[`Stencil > jsx > Javascript Test > typeExternalProps 1`] = `
+"import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
+
+@Component({
+  tag: \\"type-external-props\\",
+})
+export class TypeExternalProps {
+  @Prop() name: any;
+
+  componentDidLoad() {}
+
+  render() {
+    return (
+      <div>
+        Hello
+        {this.name}!{\\" \\"}
+      </div>
+    );
+  }
+}
+"
+`;
+
 exports[`Stencil > jsx > Javascript Test > typeExternalStore 1`] = `
 "import { Component, h, Fragment, State } from \\"@stencil/core\\";
 
@@ -4501,10 +4501,6 @@ export class MyBasicForShowComponent {
 exports[`Stencil > jsx > Typescript Test > AdvancedRef 1`] = `
 "import { Component, h, Fragment, Prop, State } from \\"@stencil/core\\";
 
-export interface Props {
-  showInput: boolean;
-}
-
 @Component({
   tag: \\"my-basic-ref-component\\",
 
@@ -4517,7 +4513,7 @@ export interface Props {
 export class MyBasicRefComponent {
   private inputRef!: HTMLInputElement;
   private inputNoArgRef!: HTMLLabelElement;
-  @Prop() showInput: Props[\\"showInput\\"];
+  @Prop() showInput: any;
   @State() name = \\"PatrickJS\\";
 
   onBlur = function onBlur() {
@@ -4573,15 +4569,7 @@ export class MyBasicRefComponent {
 `;
 
 exports[`Stencil > jsx > Typescript Test > Basic 1`] = `
-"export const DEFAULT_VALUES = {
-  name: \\"Steve\\",
-};
-
-import { Component, h, Fragment, State } from \\"@stencil/core\\";
-
-export interface MyBasicComponentProps {
-  id: string;
-}
+"import { Component, h, Fragment, State } from \\"@stencil/core\\";
 
 @Component({
   tag: \\"my-basic-component\\",
@@ -4601,13 +4589,17 @@ export class MyBasicComponent {
     return \\"bar\\";
   }
 
+  DEFAULT_VALUES = {
+    name: \\"Steve\\",
+  };
+
   componentDidLoad() {}
 
   render() {
     return (
       <div class=\\"test div\\">
         <input
-          value={DEFAULT_VALUES.name || this.name}
+          value={this.DEFAULT_VALUES.name || this.name}
           onChange={(myEvent) => (this.name = myEvent.target.value)}
         />
         Hello! I can run in React, Vue, Solid, or Liquid! &gt;
@@ -4692,17 +4684,12 @@ export class MyBasicComponent {
 exports[`Stencil > jsx > Typescript Test > Basic OnMount Update 1`] = `
 "import { Component, h, Fragment, Prop, State } from \\"@stencil/core\\";
 
-export interface Props {
-  hi: string;
-  bye: string;
-}
-
 @Component({
   tag: \\"my-basic-on-mount-update-component\\",
 })
 export class MyBasicOnMountUpdateComponent {
-  @Prop() bye: Props[\\"bye\\"];
-  @Prop() hi: Props[\\"hi\\"];
+  @Prop() bye: any;
+  @Prop() hi: any;
   @State() name = \\"PatrickJS\\";
   @State() names = [\\"Steve\\", \\"PatrickJS\\"];
 
@@ -4796,17 +4783,12 @@ exports[`Stencil > jsx > Typescript Test > BasicBooleanAttribute 1`] = `
 
 import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
 
-type Props = {
-  children: any;
-  type: string;
-};
-
 @Component({
   tag: \\"my-boolean-attribute\\",
 })
 export class MyBooleanAttribute {
-  @Prop() children: Props[\\"children\\"];
-  @Prop() type: Props[\\"type\\"];
+  @Prop() children: any;
+  @Prop() type: any;
 
   componentDidLoad() {}
 
@@ -4907,10 +4889,6 @@ export class MyBasicForComponent {
 exports[`Stencil > jsx > Typescript Test > BasicRef 1`] = `
 "import { Component, h, Fragment, Prop, State } from \\"@stencil/core\\";
 
-export interface Props {
-  showInput: boolean;
-}
-
 @Component({
   tag: \\"my-basic-ref-component\\",
 
@@ -4923,7 +4901,7 @@ export interface Props {
 export class MyBasicRefComponent {
   private inputRef!: HTMLInputElement | null;
   private inputNoArgRef!: HTMLLabelElement | null;
-  @Prop() showInput: Props[\\"showInput\\"];
+  @Prop() showInput: any;
   @State() name = \\"PatrickJS\\";
 
   onBlur = function onBlur() {
@@ -4977,10 +4955,6 @@ export class MyBasicRefComponent {
 exports[`Stencil > jsx > Typescript Test > BasicRefAssignment 1`] = `
 "import { Component, h, Fragment } from \\"@stencil/core\\";
 
-export interface Props {
-  showInput: boolean;
-}
-
 @Component({
   tag: \\"my-basic-ref-assignment-component\\",
 })
@@ -5009,24 +4983,7 @@ export class MyBasicRefAssignmentComponent {
 `;
 
 exports[`Stencil > jsx > Typescript Test > BasicRefPrevious 1`] = `
-"export function usePrevious<T>(value: T) {
-  // The ref object is a generic container whose current property is mutable ...
-  // ... and can hold any value, similar to an instance property on a class
-  let ref = useRef<T>(null); // Store current value in ref
-
-  onUpdate(() => {
-    ref = value;
-  }, [value]); // Only re-run if value changes
-  // Return previous value (happens before update in useEffect above)
-
-  return ref;
-}
-
-import { Component, h, Fragment, State } from \\"@stencil/core\\";
-
-export interface Props {
-  showInput: boolean;
-}
+"import { Component, h, Fragment, State } from \\"@stencil/core\\";
 
 @Component({
   tag: \\"my-previous-component\\",
@@ -5061,21 +5018,14 @@ export class MyPreviousComponent {
 exports[`Stencil > jsx > Typescript Test > Button 1`] = `
 "import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
 
-export interface ButtonProps {
-  attributes?: any;
-  text?: string;
-  link?: string;
-  openLinkInNewTab?: boolean;
-}
-
 @Component({
   tag: \\"button\\",
 })
 export class Button {
-  @Prop() link: ButtonProps[\\"link\\"];
-  @Prop() attributes: ButtonProps[\\"attributes\\"];
-  @Prop() openLinkInNewTab: ButtonProps[\\"openLinkInNewTab\\"];
-  @Prop() text: ButtonProps[\\"text\\"];
+  @Prop() link: any;
+  @Prop() attributes: any;
+  @Prop() openLinkInNewTab: any;
+  @Prop() text: any;
 
   componentDidLoad() {}
 
@@ -5106,21 +5056,6 @@ export class Button {
 exports[`Stencil > jsx > Typescript Test > Columns 1`] = `
 "import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
 
-type Column = {
-  content: any; // TODO: Implement this when support for dynamic CSS lands
-
-  width?: number;
-};
-export interface ColumnProps {
-  columns?: Column[]; // TODO: Implement this when support for dynamic CSS lands
-
-  space?: number; // TODO: Implement this when support for dynamic CSS lands
-
-  stackColumnsAt?: \\"tablet\\" | \\"mobile\\" | \\"never\\"; // TODO: Implement this when support for dynamic CSS lands
-
-  reverseColumnsWhenStacked?: boolean;
-}
-
 @Component({
   tag: \\"column\\",
 
@@ -5147,8 +5082,8 @@ export interface ColumnProps {
 \`,
 })
 export class Column {
-  @Prop() columns: ColumnProps[\\"columns\\"];
-  @Prop() space: ColumnProps[\\"space\\"];
+  @Prop() columns: any;
+  @Prop() space: any;
 
   getColumns() {
     return this.columns || [];
@@ -5190,16 +5125,11 @@ exports[`Stencil > jsx > Typescript Test > ContentSlotHtml 1`] = `
 
 import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
 
-type Props = {
-  [key: string]: string | JSX.Element;
-  slotTesting: JSX.Element;
-};
-
 @Component({
   tag: \\"content-slot-code\\",
 })
 export class ContentSlotCode {
-  @Prop() slotTesting: Props[\\"slotTesting\\"];
+  @Prop() slotTesting: any;
 
   componentDidLoad() {}
 
@@ -5225,19 +5155,15 @@ exports[`Stencil > jsx > Typescript Test > ContentSlotJSX 1`] = `
 
 import { Component, h, Fragment, Host, Prop, State } from \\"@stencil/core\\";
 
-type Props = {
-  [key: string]: string | JSX.Element;
-};
-
 @Component({
   tag: \\"content-slot-jsx-code\\",
 })
 export class ContentSlotJsxCode {
-  @Prop() slotContent: Props[\\"slotContent\\"] = undefined;
-  @Prop() children: Props[\\"children\\"];
-  @Prop() slotReference: Props[\\"slotReference\\"] = undefined;
-  @Prop() attributes: Props[\\"attributes\\"];
-  @Prop() content: Props[\\"content\\"] = \\"\\";
+  @Prop() slotContent: any = undefined;
+  @Prop() children: any;
+  @Prop() slotReference: any = undefined;
+  @Prop() attributes: any;
+  @Prop() content: any = \\"\\";
   @State() name = \\"king\\";
   @State() showContent = false;
 
@@ -5282,18 +5208,13 @@ export class ContentSlotJsxCode {
 exports[`Stencil > jsx > Typescript Test > CustomCode 1`] = `
 "import { Component, h, Fragment, Prop, State } from \\"@stencil/core\\";
 
-export interface CustomCodeProps {
-  code: string;
-  replaceNodes?: boolean;
-}
-
 @Component({
   tag: \\"custom-code\\",
 })
 export class CustomCode {
   private elem!: HTMLDivElement;
-  @Prop() replaceNodes: CustomCodeProps[\\"replaceNodes\\"];
-  @Prop() code: CustomCodeProps[\\"code\\"];
+  @Prop() replaceNodes: any;
+  @Prop() code: any;
   @State() scriptsInserted = [];
   @State() scriptsRun = [];
 
@@ -5363,18 +5284,13 @@ export class CustomCode {
 exports[`Stencil > jsx > Typescript Test > Embed 1`] = `
 "import { Component, h, Fragment, Prop, State } from \\"@stencil/core\\";
 
-export interface CustomCodeProps {
-  code: string;
-  replaceNodes?: boolean;
-}
-
 @Component({
   tag: \\"custom-code\\",
 })
 export class CustomCode {
   private elem!: HTMLDivElement;
-  @Prop() replaceNodes: CustomCodeProps[\\"replaceNodes\\"];
-  @Prop() code: CustomCodeProps[\\"code\\"];
+  @Prop() replaceNodes: any;
+  @Prop() code: any;
   @State() scriptsInserted = [];
   @State() scriptsRun = [];
 
@@ -5452,30 +5368,6 @@ import {
 
 import { Component, h, Fragment, Prop, State } from \\"@stencil/core\\";
 
-export interface FormProps {
-  attributes?: any;
-  name?: string;
-  action?: string;
-  validate?: boolean;
-  method?: string;
-  builderBlock?: BuilderElement;
-  sendSubmissionsTo?: string;
-  sendSubmissionsToEmail?: string;
-  sendWithJs?: boolean;
-  contentType?: string;
-  customHeaders?: {
-    [key: string]: string;
-  };
-  successUrl?: string;
-  previewState?: FormState;
-  successMessage?: BuilderElement[];
-  errorMessage?: BuilderElement[];
-  sendingMessage?: BuilderElement[];
-  resetFormOnSubmit?: boolean;
-  errorMessagePath?: string;
-}
-export type FormState = \\"unsubmitted\\" | \\"sending\\" | \\"success\\" | \\"error\\";
-
 @Component({
   tag: \\"form-component\\",
 
@@ -5489,24 +5381,24 @@ export type FormState = \\"unsubmitted\\" | \\"sending\\" | \\"success\\" | \\"e
 })
 export class FormComponent {
   private formRef!: HTMLFormElement;
-  @Prop() previewState: FormProps[\\"previewState\\"];
-  @Prop() sendWithJs: FormProps[\\"sendWithJs\\"];
-  @Prop() sendSubmissionsTo: FormProps[\\"sendSubmissionsTo\\"];
-  @Prop() action: FormProps[\\"action\\"];
-  @Prop() customHeaders: FormProps[\\"customHeaders\\"];
-  @Prop() contentType: FormProps[\\"contentType\\"];
-  @Prop() sendSubmissionsToEmail: FormProps[\\"sendSubmissionsToEmail\\"];
-  @Prop() name: FormProps[\\"name\\"];
-  @Prop() method: FormProps[\\"method\\"];
-  @Prop() errorMessagePath: FormProps[\\"errorMessagePath\\"];
-  @Prop() resetFormOnSubmit: FormProps[\\"resetFormOnSubmit\\"];
-  @Prop() successUrl: FormProps[\\"successUrl\\"];
-  @Prop() validate: FormProps[\\"validate\\"];
-  @Prop() attributes: FormProps[\\"attributes\\"];
-  @Prop() builderBlock: FormProps[\\"builderBlock\\"];
-  @Prop() errorMessage: FormProps[\\"errorMessage\\"];
-  @Prop() sendingMessage: FormProps[\\"sendingMessage\\"];
-  @Prop() successMessage: FormProps[\\"successMessage\\"];
+  @Prop() previewState: any;
+  @Prop() sendWithJs: any;
+  @Prop() sendSubmissionsTo: any;
+  @Prop() action: any;
+  @Prop() customHeaders: any;
+  @Prop() contentType: any;
+  @Prop() sendSubmissionsToEmail: any;
+  @Prop() name: any;
+  @Prop() method: any;
+  @Prop() errorMessagePath: any;
+  @Prop() resetFormOnSubmit: any;
+  @Prop() successUrl: any;
+  @Prop() validate: any;
+  @Prop() attributes: any;
+  @Prop() builderBlock: any;
+  @Prop() errorMessage: any;
+  @Prop() sendingMessage: any;
+  @Prop() successMessage: any;
   @State() formState = \\"unsubmitted\\";
   @State() responseData = null;
   @State() formErrorMessage = \\"\\";
@@ -5792,25 +5684,6 @@ export class FormComponent {
 exports[`Stencil > jsx > Typescript Test > Image 1`] = `
 "import { Component, h, Fragment, Prop, State } from \\"@stencil/core\\";
 
-// TODO: AMP Support?
-export interface ImageProps {
-  _class?: string;
-  image: string;
-  sizes?: string;
-  lazy?: boolean;
-  height?: number;
-  width?: number;
-  altText?: string;
-  backgroundSize?: string;
-  backgroundPosition?: string; // TODO: Support generating Builder.io and or Shopify \`srcset\`s when needed
-
-  srcset?: string; // TODO: Implement support for custom aspect ratios
-
-  aspectRatio?: number; // TODO: This might not work as expected in terms of positioning
-
-  children?: any;
-}
-
 @Component({
   tag: \\"image\\",
 
@@ -5825,13 +5698,13 @@ export interface ImageProps {
 })
 export class Image {
   private pictureRef!: HTMLElement;
-  @Prop() lazy: ImageProps[\\"lazy\\"];
-  @Prop() altText: ImageProps[\\"altText\\"];
-  @Prop() _class: ImageProps[\\"_class\\"];
-  @Prop() image: ImageProps[\\"image\\"];
-  @Prop() srcset: ImageProps[\\"srcset\\"];
-  @Prop() sizes: ImageProps[\\"sizes\\"];
-  @Prop() children: ImageProps[\\"children\\"];
+  @Prop() lazy: any;
+  @Prop() altText: any;
+  @Prop() _class: any;
+  @Prop() image: any;
+  @Prop() srcset: any;
+  @Prop() sizes: any;
+  @Prop() children: any;
   @State() scrollListener = null;
   @State() imageLoaded = false;
   @State() load = false;
@@ -5944,32 +5817,15 @@ exports[`Stencil > jsx > Typescript Test > Img 1`] = `
 
 import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
 
-export interface ImgProps {
-  attributes?: any;
-  imgSrc?: string;
-  altText?: string;
-  backgroundSize?: \\"cover\\" | \\"contain\\";
-  backgroundPosition?:
-    | \\"center\\"
-    | \\"top\\"
-    | \\"left\\"
-    | \\"right\\"
-    | \\"bottom\\"
-    | \\"top left\\"
-    | \\"top right\\"
-    | \\"bottom left\\"
-    | \\"bottom right\\";
-}
-
 @Component({
   tag: \\"img-component\\",
 })
 export class ImgComponent {
-  @Prop() backgroundSize: ImgProps[\\"backgroundSize\\"];
-  @Prop() backgroundPosition: ImgProps[\\"backgroundPosition\\"];
-  @Prop() attributes: ImgProps[\\"attributes\\"];
-  @Prop() imgSrc: ImgProps[\\"imgSrc\\"];
-  @Prop() altText: ImgProps[\\"altText\\"];
+  @Prop() backgroundSize: any;
+  @Prop() backgroundPosition: any;
+  @Prop() attributes: any;
+  @Prop() imgSrc: any;
+  @Prop() altText: any;
 
   componentDidLoad() {}
 
@@ -5996,28 +5852,17 @@ exports[`Stencil > jsx > Typescript Test > Input 1`] = `
 
 import { Component, h, Fragment, Event, Prop } from \\"@stencil/core\\";
 
-export interface FormInputProps {
-  type?: string;
-  attributes?: any;
-  name?: string;
-  value?: string;
-  placeholder?: string;
-  defaultValue?: string;
-  required?: boolean;
-  onChange?: (value: string) => void;
-}
-
 @Component({
   tag: \\"form-input-component\\",
 })
 export class FormInputComponent {
-  @Prop() attributes: FormInputProps[\\"attributes\\"];
-  @Prop() defaultValue: FormInputProps[\\"defaultValue\\"];
-  @Prop() placeholder: FormInputProps[\\"placeholder\\"];
-  @Prop() type: FormInputProps[\\"type\\"];
-  @Prop() name: FormInputProps[\\"name\\"];
-  @Prop() value: FormInputProps[\\"value\\"];
-  @Prop() required: FormInputProps[\\"required\\"];
+  @Prop() attributes: any;
+  @Prop() defaultValue: any;
+  @Prop() placeholder: any;
+  @Prop() type: any;
+  @Prop() name: any;
+  @Prop() value: any;
+  @Prop() required: any;
   @Event() onChange: any;
 
   componentDidLoad() {}
@@ -6076,11 +5921,6 @@ export class Stepper {
 exports[`Stencil > jsx > Typescript Test > NestedStore 1`] = `
 "import { Component, h, Fragment, State } from \\"@stencil/core\\";
 
-type MyStore = {
-  _id?: string;
-  _messageId?: string;
-};
-
 @Component({
   tag: \\"nested-store\\",
 })
@@ -6105,17 +5945,12 @@ export class NestedStore {
 exports[`Stencil > jsx > Typescript Test > RawText 1`] = `
 "import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
 
-export interface RawTextProps {
-  attributes?: any;
-  text?: string; // builderBlock?: any;
-}
-
 @Component({
   tag: \\"raw-text\\",
 })
 export class RawText {
-  @Prop() attributes: RawTextProps[\\"attributes\\"];
-  @Prop() text: RawTextProps[\\"text\\"];
+  @Prop() attributes: any;
+  @Prop() text: any;
 
   componentDidLoad() {}
 
@@ -6134,19 +5969,13 @@ export class RawText {
 exports[`Stencil > jsx > Typescript Test > Section 1`] = `
 "import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
 
-export interface SectionProps {
-  maxWidth?: number;
-  attributes?: any;
-  children?: any;
-}
-
 @Component({
   tag: \\"section-component\\",
 })
 export class SectionComponent {
-  @Prop() attributes: SectionProps[\\"attributes\\"];
-  @Prop() maxWidth: SectionProps[\\"maxWidth\\"];
-  @Prop() children: SectionProps[\\"children\\"];
+  @Prop() attributes: any;
+  @Prop() maxWidth: any;
+  @Prop() children: any;
 
   componentDidLoad() {}
 
@@ -6173,18 +6002,12 @@ export class SectionComponent {
 exports[`Stencil > jsx > Typescript Test > Section 2`] = `
 "import { Component, h, Fragment, Host, Prop, State } from \\"@stencil/core\\";
 
-export interface SectionProps {
-  maxWidth?: number;
-  attributes?: any;
-  children?: any;
-}
-
 @Component({
   tag: \\"section-state-component\\",
 })
 export class SectionStateComponent {
-  @Prop() attributes: SectionProps[\\"attributes\\"];
-  @Prop() children: SectionProps[\\"children\\"];
+  @Prop() attributes: any;
+  @Prop() children: any;
   @State() max = 42;
   @State() items = [42];
 
@@ -6217,26 +6040,15 @@ exports[`Stencil > jsx > Typescript Test > Select 1`] = `
 
 import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
 
-export interface FormSelectProps {
-  options?: {
-    name?: string;
-    value: string;
-  }[];
-  attributes?: any;
-  name?: string;
-  value?: string;
-  defaultValue?: string;
-}
-
 @Component({
   tag: \\"select-component\\",
 })
 export class SelectComponent {
-  @Prop() attributes: FormSelectProps[\\"attributes\\"];
-  @Prop() value: FormSelectProps[\\"value\\"];
-  @Prop() defaultValue: FormSelectProps[\\"defaultValue\\"];
-  @Prop() name: FormSelectProps[\\"name\\"];
-  @Prop() options: FormSelectProps[\\"options\\"];
+  @Prop() attributes: any;
+  @Prop() value: any;
+  @Prop() defaultValue: any;
+  @Prop() name: any;
+  @Prop() options: any;
 
   componentDidLoad() {}
 
@@ -6268,10 +6080,6 @@ export class SelectComponent {
 exports[`Stencil > jsx > Typescript Test > SlotDefault 1`] = `
 "import { Component, h, Fragment } from \\"@stencil/core\\";
 
-type Props = {
-  [key: string]: string;
-};
-
 @Component({
   tag: \\"slot-code\\",
 })
@@ -6296,10 +6104,6 @@ exports[`Stencil > jsx > Typescript Test > SlotHtml 1`] = `
 
 import { Component, h, Fragment } from \\"@stencil/core\\";
 
-type Props = {
-  [key: string]: string;
-};
-
 @Component({
   tag: \\"slot-code\\",
 })
@@ -6324,10 +6128,6 @@ exports[`Stencil > jsx > Typescript Test > SlotJsx 1`] = `
 
 import { Component, h, Fragment } from \\"@stencil/core\\";
 
-type Props = {
-  [key: string]: string;
-};
-
 @Component({
   tag: \\"slot-code\\",
 })
@@ -6348,10 +6148,6 @@ export class SlotCode {
 exports[`Stencil > jsx > Typescript Test > SlotNamed 1`] = `
 "import { Component, h, Fragment } from \\"@stencil/core\\";
 
-type Props = {
-  [key: string]: string;
-};
-
 @Component({
   tag: \\"slot-code\\",
 })
@@ -6377,11 +6173,6 @@ exports[`Stencil > jsx > Typescript Test > Stamped.io 1`] = `
 
 import { Component, h, Fragment, Prop, State } from \\"@stencil/core\\";
 
-type SmileReviewsProps = {
-  productId: string;
-  apiKey: string;
-};
-
 @Component({
   tag: \\"smile-reviews\\",
 
@@ -6412,8 +6203,8 @@ type SmileReviewsProps = {
 \`,
 })
 export class SmileReviews {
-  @Prop() apiKey: SmileReviewsProps[\\"apiKey\\"];
-  @Prop() productId: SmileReviewsProps[\\"productId\\"];
+  @Prop() apiKey: any;
+  @Prop() productId: any;
   @State() reviews = [];
   @State() name = \\"test\\";
   @State() showReviewPrompt = false;
@@ -6549,17 +6340,12 @@ export class MyComponent {
 exports[`Stencil > jsx > Typescript Test > Submit 1`] = `
 "import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
 
-export interface ButtonProps {
-  attributes?: any;
-  text?: string;
-}
-
 @Component({
   tag: \\"submit-button\\",
 })
 export class SubmitButton {
-  @Prop() attributes: ButtonProps[\\"attributes\\"];
-  @Prop() text: ButtonProps[\\"text\\"];
+  @Prop() attributes: any;
+  @Prop() text: any;
 
   componentDidLoad() {}
 
@@ -6579,20 +6365,12 @@ exports[`Stencil > jsx > Typescript Test > Text 1`] = `
 
 import { Component, h, Fragment, Prop, State } from \\"@stencil/core\\";
 
-export interface TextProps {
-  attributes?: any;
-  rtlMode: boolean;
-  text?: string;
-  content?: string;
-  builderBlock?: any;
-}
-
 @Component({
   tag: \\"text\\",
 })
 export class Text {
-  @Prop() text: TextProps[\\"text\\"];
-  @Prop() content: TextProps[\\"content\\"];
+  @Prop() text: any;
+  @Prop() content: any;
   @State() name = \\"Decadef20\\";
 
   componentDidLoad() {}
@@ -6620,23 +6398,15 @@ export class Text {
 exports[`Stencil > jsx > Typescript Test > Textarea 1`] = `
 "import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
 
-export interface TextareaProps {
-  attributes?: any;
-  name?: string;
-  value?: string;
-  defaultValue?: string;
-  placeholder?: string;
-}
-
 @Component({
   tag: \\"textarea\\",
 })
 export class Textarea {
-  @Prop() attributes: TextareaProps[\\"attributes\\"];
-  @Prop() placeholder: TextareaProps[\\"placeholder\\"];
-  @Prop() name: TextareaProps[\\"name\\"];
-  @Prop() value: TextareaProps[\\"value\\"];
-  @Prop() defaultValue: TextareaProps[\\"defaultValue\\"];
+  @Prop() attributes: any;
+  @Prop() placeholder: any;
+  @Prop() name: any;
+  @Prop() value: any;
+  @Prop() defaultValue: any;
 
   componentDidLoad() {}
 
@@ -6658,15 +6428,6 @@ export class Textarea {
 exports[`Stencil > jsx > Typescript Test > UseValueAndFnFromStore 1`] = `
 "import { Component, h, Fragment, Event, Prop, State } from \\"@stencil/core\\";
 
-type MyProps = {
-  onChange?: (active: boolean) => void;
-};
-type MyStore = {
-  _id?: string;
-  _active?: boolean;
-  _do?: (id?: string) => void;
-};
-
 @Component({
   tag: \\"use-value-and-fn-from-store\\",
 })
@@ -6701,45 +6462,19 @@ export class UseValueAndFnFromStore {
 exports[`Stencil > jsx > Typescript Test > Video 1`] = `
 "import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
 
-export interface VideoProps {
-  attributes?: any;
-  video?: string;
-  autoPlay?: boolean;
-  controls?: boolean;
-  muted?: boolean;
-  loop?: boolean;
-  playsInline?: boolean;
-  aspectRatio?: number;
-  width?: number;
-  height?: number;
-  fit?: \\"contain\\" | \\"cover\\" | \\"fill\\";
-  position?:
-    | \\"center\\"
-    | \\"top\\"
-    | \\"left\\"
-    | \\"right\\"
-    | \\"bottom\\"
-    | \\"top left\\"
-    | \\"top right\\"
-    | \\"bottom left\\"
-    | \\"bottom right\\";
-  posterImage?: string;
-  lazyLoad?: boolean;
-}
-
 @Component({
   tag: \\"video\\",
 })
 export class Video {
-  @Prop() attributes: VideoProps[\\"attributes\\"];
-  @Prop() fit: VideoProps[\\"fit\\"];
-  @Prop() position: VideoProps[\\"position\\"];
-  @Prop() video: VideoProps[\\"video\\"];
-  @Prop() posterImage: VideoProps[\\"posterImage\\"];
-  @Prop() autoPlay: VideoProps[\\"autoPlay\\"];
-  @Prop() muted: VideoProps[\\"muted\\"];
-  @Prop() controls: VideoProps[\\"controls\\"];
-  @Prop() loop: VideoProps[\\"loop\\"];
+  @Prop() attributes: any;
+  @Prop() fit: any;
+  @Prop() position: any;
+  @Prop() video: any;
+  @Prop() posterImage: any;
+  @Prop() autoPlay: any;
+  @Prop() muted: any;
+  @Prop() controls: any;
+  @Prop() loop: any;
 
   componentDidLoad() {}
 
@@ -6878,11 +6613,6 @@ export class MyBasicForNoTagRefComponent {
 exports[`Stencil > jsx > Typescript Test > basicForwardRef 1`] = `
 "import { Component, h, Fragment, Prop, State } from \\"@stencil/core\\";
 
-export interface Props {
-  showInput: boolean;
-  inputRef: HTMLInputElement;
-}
-
 @Component({
   tag: \\"my-basic-forward-ref-component\\",
 
@@ -6893,7 +6623,7 @@ export interface Props {
 \`,
 })
 export class MyBasicForwardRefComponent {
-  @Prop() inputRef: Props[\\"inputRef\\"];
+  @Prop() inputRef: any;
   @State() name = \\"PatrickJS\\";
 
   componentDidLoad() {}
@@ -6924,11 +6654,6 @@ exports[`Stencil > jsx > Typescript Test > basicForwardRefMetadata 1`] = `
 
 import { Component, h, Fragment, Prop, State } from \\"@stencil/core\\";
 
-export interface Props {
-  showInput: boolean;
-  inputRef: HTMLInputElement;
-}
-
 @Component({
   tag: \\"my-basic-forward-ref-component\\",
 
@@ -6939,7 +6664,7 @@ export interface Props {
 \`,
 })
 export class MyBasicForwardRefComponent {
-  @Prop() inputRef: Props[\\"inputRef\\"];
+  @Prop() inputRef: any;
   @State() name = \\"PatrickJS\\";
 
   componentDidLoad() {}
@@ -7248,11 +6973,6 @@ exports[`Stencil > jsx > Typescript Test > className 1`] = `
 
 import { Component, h, Fragment, State } from \\"@stencil/core\\";
 
-type Props = {
-  [key: string]: string | JSX.Element;
-  slotTesting: JSX.Element;
-};
-
 @Component({
   tag: \\"class-name-code\\",
 })
@@ -7331,15 +7051,11 @@ import Context2 from \\"@dummy/2\\";
 
 import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
 
-export interface ComponentWithContextProps {
-  content: string;
-}
-
 @Component({
   tag: \\"component-with-context\\",
 })
 export class ComponentWithContext {
-  @Prop() content: ComponentWithContextProps[\\"content\\"];
+  @Prop() content: any;
 
   componentDidLoad() {}
 
@@ -7360,15 +7076,11 @@ import Context2 from \\"@dummy/2\\";
 
 import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
 
-export interface ComponentWithContextProps {
-  content: string;
-}
-
 @Component({
   tag: \\"component-with-context\\",
 })
 export class ComponentWithContext {
-  @Prop() content: ComponentWithContextProps[\\"content\\"];
+  @Prop() content: any;
 
   componentDidLoad() {}
 
@@ -7408,28 +7120,18 @@ export class RenderContent {
 exports[`Stencil > jsx > Typescript Test > defaultProps 1`] = `
 "import { Component, h, Fragment, Event, Prop } from \\"@stencil/core\\";
 
-export interface ButtonProps {
-  attributes?: any;
-  text?: string;
-  buttonText?: string; // no default value
-
-  link?: string;
-  openLinkInNewTab?: boolean;
-  onClick?: () => void;
-}
-
 @Component({
   tag: \\"button\\",
 })
 export class Button {
-  @Prop() link: ButtonProps[\\"link\\"] = \\"https://builder.io/\\";
-  @Prop() attributes: ButtonProps[\\"attributes\\"];
-  @Prop() openLinkInNewTab: ButtonProps[\\"openLinkInNewTab\\"] = false;
-  @Prop() text: ButtonProps[\\"text\\"] = \\"default text\\";
+  @Prop() link: any = \\"https://builder.io/\\";
+  @Prop() attributes: any;
+  @Prop() openLinkInNewTab: any = false;
+  @Prop() text: any = \\"default text\\";
   @Event() onClick: any = () => {
     console.log(\\"hi\\");
   };
-  @Prop() buttonText: ButtonProps[\\"buttonText\\"];
+  @Prop() buttonText: any;
 
   componentDidLoad() {}
 
@@ -7464,22 +7166,14 @@ export class Button {
 exports[`Stencil > jsx > Typescript Test > defaultPropsOutsideComponent 1`] = `
 "import { Component, h, Fragment, Event, Prop } from \\"@stencil/core\\";
 
-export interface ButtonProps {
-  attributes?: any;
-  text?: string;
-  link?: string;
-  openLinkInNewTab?: boolean;
-  onClick: () => void;
-}
-
 @Component({
   tag: \\"button\\",
 })
 export class Button {
-  @Prop() link: ButtonProps[\\"link\\"] = \\"https://builder.io/\\";
-  @Prop() attributes: ButtonProps[\\"attributes\\"];
-  @Prop() openLinkInNewTab: ButtonProps[\\"openLinkInNewTab\\"] = false;
-  @Prop() text: ButtonProps[\\"text\\"] = \\"default text\\";
+  @Prop() link: any = \\"https://builder.io/\\";
+  @Prop() attributes: any;
+  @Prop() openLinkInNewTab: any = false;
+  @Prop() text: any = \\"default text\\";
   @Event() onClick: any = () => {};
 
   componentDidLoad() {}
@@ -7513,21 +7207,17 @@ export class Button {
 `;
 
 exports[`Stencil > jsx > Typescript Test > defaultValsWithTypes 1`] = `
-"const DEFAULT_VALUES: Props = {
-  name: \\"Sami\\",
-};
-
-import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
-
-type Props = {
-  name: string;
-};
+"import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
 
 @Component({
   tag: \\"component-with-types\\",
 })
 export class ComponentWithTypes {
-  @Prop() name: Props[\\"name\\"];
+  @Prop() name: any;
+
+  DEFAULT_VALUES = {
+    name: \\"Sami\\",
+  };
 
   componentDidLoad() {}
 
@@ -7536,7 +7226,7 @@ export class ComponentWithTypes {
       <div>
         {\\" \\"}
         Hello
-        {this.name || DEFAULT_VALUES.name}
+        {this.name || this.DEFAULT_VALUES.name}
       </div>
     );
   }
@@ -7638,10 +7328,6 @@ export class FigmaButton {
 exports[`Stencil > jsx > Typescript Test > functionProps 1`] = `
 "import { Component, h, Fragment } from \\"@stencil/core\\";
 
-export interface MyBasicComponentProps {
-  id: string;
-}
-
 @Component({
   tag: \\"my-basic-component\\",
 })
@@ -7677,15 +7363,11 @@ export class MyBasicComponent {
 exports[`Stencil > jsx > Typescript Test > getterState 1`] = `
 "import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
 
-export interface ButtonProps {
-  foo: string;
-}
-
 @Component({
   tag: \\"button\\",
 })
 export class Button {
-  @Prop() foo: ButtonProps[\\"foo\\"];
+  @Prop() foo: any;
 
   get foo2() {
     return this.foo + \\"foo\\";
@@ -7718,17 +7400,11 @@ import { RenderBlock } from \\"./builder-render-block.raw\\";
 
 import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
 
-type RenderContentProps = {
-  options?: GetContentOptions;
-  content: BuilderContent;
-  renderContentProps: RenderBlockProps;
-};
-
 @Component({
   tag: \\"render-content\\",
 })
 export class RenderContent {
-  @Prop() renderContentProps: RenderContentProps[\\"renderContentProps\\"];
+  @Prop() renderContentProps: any;
 
   getRenderContentProps(block, index) {
     return {
@@ -7900,10 +7576,6 @@ export class NestedStyles {
 exports[`Stencil > jsx > Typescript Test > normalizeLayerNames 1`] = `
 "import { Component, h, Fragment } from \\"@stencil/core\\";
 
-export interface MyNormalizedLayerNamesComponentProps {
-  id: string;
-}
-
 @Component({
   tag: \\"my-normalized-layer-names-component\\",
 
@@ -8007,21 +7679,13 @@ export class OnInit {
 `;
 
 exports[`Stencil > jsx > Typescript Test > onInit 1`] = `
-"export const defaultValues = {
-  name: \\"PatrickJS\\",
-};
-
-import { Component, h, Fragment, Prop, State } from \\"@stencil/core\\";
-
-type Props = {
-  name: string;
-};
+"import { Component, h, Fragment, Prop, State } from \\"@stencil/core\\";
 
 @Component({
   tag: \\"on-init\\",
 })
 export class OnInit {
-  @Prop() name: Props[\\"name\\"];
+  @Prop() name: any;
   @State() name = \\"\\";
 
   componentDidLoad() {}
@@ -8127,15 +7791,11 @@ export class OnUpdate {
 exports[`Stencil > jsx > Typescript Test > onUpdateWithDeps 1`] = `
 "import { Component, h, Fragment, Prop, State } from \\"@stencil/core\\";
 
-type Props = {
-  size: string;
-};
-
 @Component({
   tag: \\"on-update-with-deps\\",
 })
 export class OnUpdateWithDeps {
-  @Prop() size: Props[\\"size\\"];
+  @Prop() size: any;
   @State() a = \\"a\\";
   @State() b = \\"b\\";
 
@@ -8153,23 +7813,7 @@ export class OnUpdateWithDeps {
 `;
 
 exports[`Stencil > jsx > Typescript Test > preserveExportOrLocalStatement 1`] = `
-"const b = 3;
-const foo = () => {};
-export const a = 3;
-export const bar = () => {};
-export function run<T>(value: T) {}
-
-import { Component, h, Fragment } from \\"@stencil/core\\";
-
-type Types = {
-  s: any[];
-};
-interface IPost {
-  len: number;
-}
-export interface MyBasicComponentProps {
-  id: string;
-}
+"import { Component, h, Fragment } from \\"@stencil/core\\";
 
 @Component({
   tag: \\"my-basic-component\\",
@@ -8187,24 +7831,11 @@ export class MyBasicComponent {
 exports[`Stencil > jsx > Typescript Test > preserveTyping 1`] = `
 "import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
 
-export type A = \\"test\\";
-export interface C {
-  n: \\"test\\";
-}
-type B = \\"test2\\";
-interface D {
-  n: \\"test\\";
-}
-export interface MyBasicComponentProps {
-  name: string;
-  age?: number;
-}
-
 @Component({
   tag: \\"my-basic-component\\",
 })
 export class MyBasicComponent {
-  @Prop() name: MyBasicComponentProps[\\"name\\"];
+  @Prop() name: any;
 
   componentDidLoad() {}
 
@@ -8223,17 +7854,12 @@ export class MyBasicComponent {
 exports[`Stencil > jsx > Typescript Test > propsDestructure 1`] = `
 "import { Component, h, Fragment, Prop, State } from \\"@stencil/core\\";
 
-type Props = {
-  children: any;
-  type: string;
-};
-
 @Component({
   tag: \\"my-basic-component\\",
 })
 export class MyBasicComponent {
-  @Prop() children: Props[\\"children\\"];
-  @Prop() type: Props[\\"type\\"];
+  @Prop() children: any;
+  @Prop() type: any;
   @State() name = \\"Decadef20\\";
 
   componentDidLoad() {}
@@ -8254,11 +7880,6 @@ export class MyBasicComponent {
 exports[`Stencil > jsx > Typescript Test > propsInterface 1`] = `
 "import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
 
-interface Person {
-  name: string;
-  age?: number;
-}
-
 @Component({
   tag: \\"my-basic-component\\",
 })
@@ -8282,16 +7903,11 @@ export class MyBasicComponent {
 exports[`Stencil > jsx > Typescript Test > propsType 1`] = `
 "import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
 
-type Person = {
-  name: string;
-  age?: number;
-};
-
 @Component({
   tag: \\"my-basic-component\\",
 })
 export class MyBasicComponent {
-  @Prop() name: Person[\\"name\\"];
+  @Prop() name: any;
 
   componentDidLoad() {}
 
@@ -8363,17 +7979,12 @@ import type { RepeatData } from \\"./types.js\\";
 
 import { Component, h, Fragment, Host, Prop } from \\"@stencil/core\\";
 
-export type RenderBlockProps = {
-  block: BuilderBlock;
-  context: BuilderContextInterface;
-};
-
 @Component({
   tag: \\"render-block\\",
 })
 export class RenderBlock {
-  @Prop() block: RenderBlockProps[\\"block\\"];
-  @Prop() context: RenderBlockProps[\\"context\\"];
+  @Prop() block: any;
+  @Prop() context: any;
 
   get component() {
     const componentName = getProcessedBlock({
@@ -8612,14 +8223,6 @@ import { RenderBlocks } from \\"@dummy/RenderBlocks.lite.tsx\\";
 
 import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
 
-type Props = {
-  customComponents: string[];
-  content: {
-    blocks: any[];
-    id: string;
-  };
-};
-
 @Component({
   tag: \\"render-content\\",
 
@@ -8631,8 +8234,8 @@ type Props = {
 \`,
 })
 export class RenderContent {
-  @Prop() customComponents: Props[\\"customComponents\\"];
-  @Prop() content: Props[\\"content\\"];
+  @Prop() customComponents: any;
+  @Prop() content: any;
 
   componentDidLoad() {
     sendComponentsToVisualEditor(this.customComponents);
@@ -8656,21 +8259,14 @@ export class RenderContent {
 exports[`Stencil > jsx > Typescript Test > rootFragmentMultiNode 1`] = `
 "import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
 
-export interface ButtonProps {
-  attributes?: any;
-  text?: string;
-  link?: string;
-  openLinkInNewTab?: boolean;
-}
-
 @Component({
   tag: \\"button\\",
 })
 export class Button {
-  @Prop() link: ButtonProps[\\"link\\"];
-  @Prop() attributes: ButtonProps[\\"attributes\\"];
-  @Prop() openLinkInNewTab: ButtonProps[\\"openLinkInNewTab\\"];
-  @Prop() text: ButtonProps[\\"text\\"];
+  @Prop() link: any;
+  @Prop() attributes: any;
+  @Prop() openLinkInNewTab: any;
+  @Prop() text: any;
 
   componentDidLoad() {}
 
@@ -8781,15 +8377,6 @@ export class SetState {
 exports[`Stencil > jsx > Typescript Test > signalsOnUpdate 1`] = `
 "import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
 
-type Props = {
-  id: string;
-  foo: {
-    bar: {
-      baz: number;
-    };
-  };
-};
-
 @Component({
   tag: \\"my-basic-component\\",
 
@@ -8800,8 +8387,8 @@ type Props = {
 \`,
 })
 export class MyBasicComponent {
-  @Prop() id: Props[\\"id\\"];
-  @Prop() foo: Props[\\"foo\\"];
+  @Prop() id: any;
+  @Prop() foo: any;
 
   componentDidLoad() {}
 
@@ -9041,16 +8628,11 @@ import type { Foo as Foo2 } from \\"./type-export\\";
 
 import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
 
-export type TypeDependencyProps = {
-  foo: Foo;
-  foo2: Foo2;
-};
-
 @Component({
   tag: \\"type-dependency\\",
 })
 export class TypeDependency {
-  @Prop() foo: TypeDependencyProps[\\"foo\\"];
+  @Prop() foo: any;
 
   componentDidLoad() {}
 
@@ -9061,6 +8643,31 @@ export class TypeDependency {
 "
 `;
 
+exports[`Stencil > jsx > Typescript Test > typeExternalProps 1`] = `
+"import { FooProps } from \\"./foo-props\\";
+
+import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
+
+@Component({
+  tag: \\"type-external-props\\",
+})
+export class TypeExternalProps {
+  @Prop() name: FooProps[\\"name\\"];
+
+  componentDidLoad() {}
+
+  render() {
+    return (
+      <div>
+        Hello
+        {this.name}!{\\" \\"}
+      </div>
+    );
+  }
+}
+"
+`;
+
 exports[`Stencil > jsx > Typescript Test > typeExternalStore 1`] = `
 "import { FooStore } from \\"./foo-store\\";
 
@@ -9089,12 +8696,6 @@ export class TypeExternalStore {
 exports[`Stencil > jsx > Typescript Test > typeGetterStore 1`] = `
 "import { Component, h, Fragment, State } from \\"@stencil/core\\";
 
-type GetterStore = {
-  getName: () => string;
-  name: string;
-  get test(): string;
-};
-
 @Component({
   tag: \\"type-getter-store\\",
 })
diff --git a/packages/core/src/generators/react/helpers/state.ts b/packages/core/src/generators/react/helpers/state.ts
index f7522fbd5c..71afe1b943 100644
--- a/packages/core/src/generators/react/helpers/state.ts
+++ b/packages/core/src/generators/react/helpers/state.ts
@@ -139,9 +139,12 @@ export const getReactVariantStateString = ({
           keyPrefix: 'const',
           valueMapper: (code, type, _, key) => {
             if (key) {
-              if (type === 'getter') return getFunctionString(code.replace('get ', ''));
+              const rscPrefix = options.rsc ? `${key} = ` : '';
+
+              if (type === 'getter')
+                return `${rscPrefix}${getFunctionString(code.replace('get ', ''))}`;
               if (type === 'function')
-                return code.startsWith('async') ? code : getFunctionString(code);
+                return code.startsWith('async') ? code : `${rscPrefix}${getFunctionString(code)}`;
             }
             return code;
           },

From f0909e428a75af8976ba6e92e791baa6ad801127 Mon Sep 17 00:00:00 2001
From: Nicolas Merget <nicolas.merget@deutschebahn.com>
Date: Wed, 26 Feb 2025 07:54:43 +0100
Subject: [PATCH 18/20] chore: update snapshots

---
 .../__snapshots__/marko.test.ts.snap          |  64 ++++-----
 .../__tests__/__snapshots__/rsc.test.ts.snap  |  22 ---
 .../__snapshots__/solid.test.ts.snap          | 128 +++++++++---------
 3 files changed, 96 insertions(+), 118 deletions(-)

diff --git a/packages/core/src/__tests__/__snapshots__/marko.test.ts.snap b/packages/core/src/__tests__/__snapshots__/marko.test.ts.snap
index 123e97316e..621ca7da55 100644
--- a/packages/core/src/__tests__/__snapshots__/marko.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/marko.test.ts.snap
@@ -376,14 +376,14 @@ exports[`Marko > jsx > Javascript Test > BasicRef 1`] = `
 }
 
 style {
-  .input-4f3fd0c6 {
+  .input-6a578c15 {
     color: red;
   }
 }
 <div>
   <if(input.showInput)>
     <input
-      class=\\"input-4f3fd0c6\\"
+      class=\\"input-6a578c15\\"
       key=\\"inputRef\\"
       value=(state.name)
       on-blur((event) => component.onBlur())
@@ -1919,12 +1919,12 @@ exports[`Marko > jsx > Javascript Test > layerName 1`] = `
 "class {}
 
 style {
-  .layer-name-c6feba5e {
+  .layer-name-27ceea4e {
     padding: 10px;
   }
 }
 <section>
-  <div class=\\"layer-name-c6feba5e\\">
+  <div class=\\"layer-name-27ceea4e\\">
     Hello! I can run in React, Vue, Solid, or Liquid!
   </div>
 </section>"
@@ -2026,22 +2026,22 @@ exports[`Marko > jsx > Javascript Test > normalizeLayerNames 1`] = `
 "class {}
 
 style {
-  .css-0-45fac926 {
+  .css-0-31098cf6 {
     margin: 10px;
   }
-  .css-123-45fac926 {
+  .css-123-31098cf6 {
     padding: 10px;
   }
-  .name-123-45fac926 {
+  .name-123-31098cf6 {
     border: 1px solid;
   }
-  .name-45fac926 {
+  .name-31098cf6 {
     color: red;
   }
-  .name-789-45fac926 {
+  .name-789-31098cf6 {
     background: blue;
   }
-  .div-45fac926 {
+  .div-31098cf6 {
     background: blue;
   }
 }
@@ -2051,13 +2051,13 @@ style {
   <div>CamelCase</div>
   <div>Special chars</div>
   <div>Special chars with dashes</div>
-  <div class=\\"css-0-45fac926\\">Single Number</div>
-  <div class=\\"css-123-45fac926\\">Multiple Numbers</div>
-  <div class=\\"name-123-45fac926\\">Chars with numbers at end</div>
-  <div class=\\"name-45fac926\\">Chars with numbers at start</div>
-  <div class=\\"name-789-45fac926\\">Numnbers separated by dash</div>
+  <div class=\\"css-0-31098cf6\\">Single Number</div>
+  <div class=\\"css-123-31098cf6\\">Multiple Numbers</div>
+  <div class=\\"name-123-31098cf6\\">Chars with numbers at end</div>
+  <div class=\\"name-31098cf6\\">Chars with numbers at start</div>
+  <div class=\\"name-789-31098cf6\\">Numnbers separated by dash</div>
   <div>Emoji</div>
-  <div data-name=\\"1\\" class=\\"div-45fac926\\">Number</div>
+  <div data-name=\\"1\\" class=\\"div-31098cf6\\">Number</div>
 </section>"
 `;
 
@@ -3231,14 +3231,14 @@ exports[`Marko > jsx > Typescript Test > BasicRef 1`] = `
 }
 
 style {
-  .input-18a64ed0 {
+  .input-e2a52cdc {
     color: red;
   }
 }
 <div>
   <if(input.showInput)>
     <input
-      class=\\"input-18a64ed0\\"
+      class=\\"input-e2a52cdc\\"
       key=\\"inputRef\\"
       value=(state.name)
       on-blur((event) => component.onBlur())
@@ -4788,12 +4788,12 @@ exports[`Marko > jsx > Typescript Test > layerName 1`] = `
 "class {}
 
 style {
-  .layer-name-c6feba5e {
+  .layer-name-27ceea4e {
     padding: 10px;
   }
 }
 <section>
-  <div class=\\"layer-name-c6feba5e\\">
+  <div class=\\"layer-name-27ceea4e\\">
     Hello! I can run in React, Vue, Solid, or Liquid!
   </div>
 </section>"
@@ -4895,22 +4895,22 @@ exports[`Marko > jsx > Typescript Test > normalizeLayerNames 1`] = `
 "class {}
 
 style {
-  .css-0-00b60ad4 {
+  .css-0-038fc384 {
     margin: 10px;
   }
-  .css-123-00b60ad4 {
+  .css-123-038fc384 {
     padding: 10px;
   }
-  .name-123-00b60ad4 {
+  .name-123-038fc384 {
     border: 1px solid;
   }
-  .name-00b60ad4 {
+  .name-038fc384 {
     color: red;
   }
-  .name-789-00b60ad4 {
+  .name-789-038fc384 {
     background: blue;
   }
-  .div-00b60ad4 {
+  .div-038fc384 {
     background: blue;
   }
 }
@@ -4920,13 +4920,13 @@ style {
   <div>CamelCase</div>
   <div>Special chars</div>
   <div>Special chars with dashes</div>
-  <div class=\\"css-0-00b60ad4\\">Single Number</div>
-  <div class=\\"css-123-00b60ad4\\">Multiple Numbers</div>
-  <div class=\\"name-123-00b60ad4\\">Chars with numbers at end</div>
-  <div class=\\"name-00b60ad4\\">Chars with numbers at start</div>
-  <div class=\\"name-789-00b60ad4\\">Numnbers separated by dash</div>
+  <div class=\\"css-0-038fc384\\">Single Number</div>
+  <div class=\\"css-123-038fc384\\">Multiple Numbers</div>
+  <div class=\\"name-123-038fc384\\">Chars with numbers at end</div>
+  <div class=\\"name-038fc384\\">Chars with numbers at start</div>
+  <div class=\\"name-789-038fc384\\">Numnbers separated by dash</div>
   <div>Emoji</div>
-  <div data-name=\\"1\\" class=\\"div-00b60ad4\\">Number</div>
+  <div data-name=\\"1\\" class=\\"div-038fc384\\">Number</div>
 </section>"
 `;
 
diff --git a/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap b/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap
index 184c3baeba..5eb400addf 100644
--- a/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap
@@ -8876,25 +8876,3 @@ function MyComponent(props: any) {
 export default MyComponent;
 "
 `;
-
-exports[`RSC local > jsx > Javascript Test > renderBlock 1`] = `
-"Identifier expected. (216:8)
-  214 |    {shouldWrap() ? (
-  215 |    <>{isEmptyHtmlElement(tag()) ? (
-> 216 |    <tag()  {...(attributes())}  {...(actions())}  />
-      |        ^
-  217 |  ) : null}
-  218 | {!isEmptyHtmlElement(tag()) && repeatItemData() ? (
-  219 |    <>{repeatItemData()?.map((data, index) => ("
-`;
-
-exports[`RSC local > jsx > Typescript Test > renderBlock 1`] = `
-"Identifier expected. (224:8)
-  222 |    {shouldWrap() ? (
-  223 |    <>{isEmptyHtmlElement(tag()) ? (
-> 224 |    <tag()  {...(attributes())}  {...(actions())}  />
-      |        ^
-  225 |  ) : null}
-  226 | {!isEmptyHtmlElement(tag()) && repeatItemData() ? (
-  227 |    <>{repeatItemData()?.map((data, index) => ("
-`;
diff --git a/packages/core/src/__tests__/__snapshots__/solid.test.ts.snap b/packages/core/src/__tests__/__snapshots__/solid.test.ts.snap
index 74a1d8642b..30aec18103 100644
--- a/packages/core/src/__tests__/__snapshots__/solid.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/solid.test.ts.snap
@@ -998,7 +998,7 @@ function MyBasicRefComponent(props) {
         <Show when={props.showInput}>
           <>
             <input
-              class=\\"input-68f6f18b\\"
+              class=\\"input-6e0f3c16\\"
               ref={inputRef}
               value={name()}
               onBlur={(event) => onBlur()}
@@ -1017,7 +1017,7 @@ function MyBasicRefComponent(props) {
         {lowerCaseName()}! I can run in React, Qwik, Vue, Solid, or Web
         Component!
       </div>
-      <style>{\`.input-68f6f18b {
+      <style>{\`.input-6e0f3c16 {
   color: red;
 }\`}</style>
     </>
@@ -1052,7 +1052,7 @@ function MyBasicRefComponent(props) {
         <Show when={props.showInput}>
           <>
             <input
-              class=\\"input-68f6f18b\\"
+              class=\\"input-6e0f3c16\\"
               ref={inputRef}
               value={name()}
               onBlur={(event) => onBlur()}
@@ -1071,7 +1071,7 @@ function MyBasicRefComponent(props) {
         {lowerCaseName()}! I can run in React, Qwik, Vue, Solid, or Web
         Component!
       </div>
-      <style>{\`.input-68f6f18b {
+      <style>{\`.input-6e0f3c16 {
   color: red;
 }\`}</style>
     </>
@@ -5245,11 +5245,11 @@ exports[`Solid > jsx > Javascript Test > layerName 1`] = `
   return (
     <>
       <section>
-        <div class=\\"div-5e6f7a74\\">
+        <div class=\\"div-033af2fa\\">
           Hello! I can run in React, Vue, Solid, or Liquid!
         </div>
       </section>
-      <style>{\`.div-5e6f7a74 {
+      <style>{\`.div-033af2fa {
   padding: 10px;
 }\`}</style>
     </>
@@ -5265,11 +5265,11 @@ exports[`Solid > jsx > Javascript Test > layerName 2`] = `
   return (
     <>
       <section>
-        <div class=\\"div-5e6f7a74\\">
+        <div class=\\"div-033af2fa\\">
           Hello! I can run in React, Vue, Solid, or Liquid!
         </div>
       </section>
-      <style>{\`.div-5e6f7a74 {
+      <style>{\`.div-033af2fa {
   padding: 10px;
 }\`}</style>
     </>
@@ -5550,27 +5550,27 @@ exports[`Solid > jsx > Javascript Test > normalizeLayerNames 1`] = `
         <div>CamelCase</div>
         <div>Special chars</div>
         <div>Special chars with dashes</div>
-        <div class=\\"div-fe198616\\">Single Number</div>
-        <div class=\\"div-fe198616-2\\">Multiple Numbers</div>
-        <div class=\\"div-fe198616-3\\">Chars with numbers at end</div>
-        <div class=\\"div-fe198616-4\\">Chars with numbers at start</div>
-        <div class=\\"div-fe198616-5\\">Numnbers separated by dash</div>
+        <div class=\\"div-130cf56c\\">Single Number</div>
+        <div class=\\"div-130cf56c-2\\">Multiple Numbers</div>
+        <div class=\\"div-130cf56c-3\\">Chars with numbers at end</div>
+        <div class=\\"div-130cf56c-4\\">Chars with numbers at start</div>
+        <div class=\\"div-130cf56c-5\\">Numnbers separated by dash</div>
         <div>Emoji</div>
-        <div class=\\"div-fe198616-6\\" data-name=\\"1\\">
+        <div class=\\"div-130cf56c-6\\" data-name=\\"1\\">
           Number
         </div>
       </section>
-      <style>{\`.div-fe198616 {
+      <style>{\`.div-130cf56c {
   margin: 10px;
-}.div-fe198616-2 {
+}.div-130cf56c-2 {
   padding: 10px;
-}.div-fe198616-3 {
+}.div-130cf56c-3 {
   border: 1px solid;
-}.div-fe198616-4 {
+}.div-130cf56c-4 {
   color: red;
-}.div-fe198616-5 {
+}.div-130cf56c-5 {
   background: blue;
-}.div-fe198616-6 {
+}.div-130cf56c-6 {
   background: blue;
 }\`}</style>
     </>
@@ -5591,27 +5591,27 @@ exports[`Solid > jsx > Javascript Test > normalizeLayerNames 2`] = `
         <div>CamelCase</div>
         <div>Special chars</div>
         <div>Special chars with dashes</div>
-        <div class=\\"div-fe198616\\">Single Number</div>
-        <div class=\\"div-fe198616-2\\">Multiple Numbers</div>
-        <div class=\\"div-fe198616-3\\">Chars with numbers at end</div>
-        <div class=\\"div-fe198616-4\\">Chars with numbers at start</div>
-        <div class=\\"div-fe198616-5\\">Numnbers separated by dash</div>
+        <div class=\\"div-130cf56c\\">Single Number</div>
+        <div class=\\"div-130cf56c-2\\">Multiple Numbers</div>
+        <div class=\\"div-130cf56c-3\\">Chars with numbers at end</div>
+        <div class=\\"div-130cf56c-4\\">Chars with numbers at start</div>
+        <div class=\\"div-130cf56c-5\\">Numnbers separated by dash</div>
         <div>Emoji</div>
-        <div class=\\"div-fe198616-6\\" data-name=\\"1\\">
+        <div class=\\"div-130cf56c-6\\" data-name=\\"1\\">
           Number
         </div>
       </section>
-      <style>{\`.div-fe198616 {
+      <style>{\`.div-130cf56c {
   margin: 10px;
-}.div-fe198616-2 {
+}.div-130cf56c-2 {
   padding: 10px;
-}.div-fe198616-3 {
+}.div-130cf56c-3 {
   border: 1px solid;
-}.div-fe198616-4 {
+}.div-130cf56c-4 {
   color: red;
-}.div-fe198616-5 {
+}.div-130cf56c-5 {
   background: blue;
-}.div-fe198616-6 {
+}.div-130cf56c-6 {
   background: blue;
 }\`}</style>
     </>
@@ -9292,7 +9292,7 @@ function MyBasicRefComponent(props: Props) {
         <Show when={props.showInput}>
           <>
             <input
-              class=\\"input-252c2efd\\"
+              class=\\"input-7e4ae779\\"
               ref={inputRef!}
               value={name()}
               onBlur={(event) => onBlur()}
@@ -9311,7 +9311,7 @@ function MyBasicRefComponent(props: Props) {
         {lowerCaseName()}! I can run in React, Qwik, Vue, Solid, or Web
         Component!
       </div>
-      <style>{\`.input-252c2efd {
+      <style>{\`.input-7e4ae779 {
   color: red;
 }\`}</style>
     </>
@@ -9350,7 +9350,7 @@ function MyBasicRefComponent(props: Props) {
         <Show when={props.showInput}>
           <>
             <input
-              class=\\"input-252c2efd\\"
+              class=\\"input-7e4ae779\\"
               ref={inputRef!}
               value={name()}
               onBlur={(event) => onBlur()}
@@ -9369,7 +9369,7 @@ function MyBasicRefComponent(props: Props) {
         {lowerCaseName()}! I can run in React, Qwik, Vue, Solid, or Web
         Component!
       </div>
-      <style>{\`.input-252c2efd {
+      <style>{\`.input-7e4ae779 {
   color: red;
 }\`}</style>
     </>
@@ -14149,11 +14149,11 @@ exports[`Solid > jsx > Typescript Test > layerName 1`] = `
   return (
     <>
       <section>
-        <div class=\\"div-5e6f7a74\\">
+        <div class=\\"div-033af2fa\\">
           Hello! I can run in React, Vue, Solid, or Liquid!
         </div>
       </section>
-      <style>{\`.div-5e6f7a74 {
+      <style>{\`.div-033af2fa {
   padding: 10px;
 }\`}</style>
     </>
@@ -14169,11 +14169,11 @@ exports[`Solid > jsx > Typescript Test > layerName 2`] = `
   return (
     <>
       <section>
-        <div class=\\"div-5e6f7a74\\">
+        <div class=\\"div-033af2fa\\">
           Hello! I can run in React, Vue, Solid, or Liquid!
         </div>
       </section>
-      <style>{\`.div-5e6f7a74 {
+      <style>{\`.div-033af2fa {
   padding: 10px;
 }\`}</style>
     </>
@@ -14470,27 +14470,27 @@ function MyNormalizedLayerNamesComponent(
         <div>CamelCase</div>
         <div>Special chars</div>
         <div>Special chars with dashes</div>
-        <div class=\\"div-f8d7c8bc\\">Single Number</div>
-        <div class=\\"div-f8d7c8bc-2\\">Multiple Numbers</div>
-        <div class=\\"div-f8d7c8bc-3\\">Chars with numbers at end</div>
-        <div class=\\"div-f8d7c8bc-4\\">Chars with numbers at start</div>
-        <div class=\\"div-f8d7c8bc-5\\">Numnbers separated by dash</div>
+        <div class=\\"div-e49cb49c\\">Single Number</div>
+        <div class=\\"div-e49cb49c-2\\">Multiple Numbers</div>
+        <div class=\\"div-e49cb49c-3\\">Chars with numbers at end</div>
+        <div class=\\"div-e49cb49c-4\\">Chars with numbers at start</div>
+        <div class=\\"div-e49cb49c-5\\">Numnbers separated by dash</div>
         <div>Emoji</div>
-        <div class=\\"div-f8d7c8bc-6\\" data-name=\\"1\\">
+        <div class=\\"div-e49cb49c-6\\" data-name=\\"1\\">
           Number
         </div>
       </section>
-      <style>{\`.div-f8d7c8bc {
+      <style>{\`.div-e49cb49c {
   margin: 10px;
-}.div-f8d7c8bc-2 {
+}.div-e49cb49c-2 {
   padding: 10px;
-}.div-f8d7c8bc-3 {
+}.div-e49cb49c-3 {
   border: 1px solid;
-}.div-f8d7c8bc-4 {
+}.div-e49cb49c-4 {
   color: red;
-}.div-f8d7c8bc-5 {
+}.div-e49cb49c-5 {
   background: blue;
-}.div-f8d7c8bc-6 {
+}.div-e49cb49c-6 {
   background: blue;
 }\`}</style>
     </>
@@ -14517,27 +14517,27 @@ function MyNormalizedLayerNamesComponent(
         <div>CamelCase</div>
         <div>Special chars</div>
         <div>Special chars with dashes</div>
-        <div class=\\"div-f8d7c8bc\\">Single Number</div>
-        <div class=\\"div-f8d7c8bc-2\\">Multiple Numbers</div>
-        <div class=\\"div-f8d7c8bc-3\\">Chars with numbers at end</div>
-        <div class=\\"div-f8d7c8bc-4\\">Chars with numbers at start</div>
-        <div class=\\"div-f8d7c8bc-5\\">Numnbers separated by dash</div>
+        <div class=\\"div-e49cb49c\\">Single Number</div>
+        <div class=\\"div-e49cb49c-2\\">Multiple Numbers</div>
+        <div class=\\"div-e49cb49c-3\\">Chars with numbers at end</div>
+        <div class=\\"div-e49cb49c-4\\">Chars with numbers at start</div>
+        <div class=\\"div-e49cb49c-5\\">Numnbers separated by dash</div>
         <div>Emoji</div>
-        <div class=\\"div-f8d7c8bc-6\\" data-name=\\"1\\">
+        <div class=\\"div-e49cb49c-6\\" data-name=\\"1\\">
           Number
         </div>
       </section>
-      <style>{\`.div-f8d7c8bc {
+      <style>{\`.div-e49cb49c {
   margin: 10px;
-}.div-f8d7c8bc-2 {
+}.div-e49cb49c-2 {
   padding: 10px;
-}.div-f8d7c8bc-3 {
+}.div-e49cb49c-3 {
   border: 1px solid;
-}.div-f8d7c8bc-4 {
+}.div-e49cb49c-4 {
   color: red;
-}.div-f8d7c8bc-5 {
+}.div-e49cb49c-5 {
   background: blue;
-}.div-f8d7c8bc-6 {
+}.div-e49cb49c-6 {
   background: blue;
 }\`}</style>
     </>

From 18fd01843e0fad1bb109d681c6f520ed5525630e Mon Sep 17 00:00:00 2001
From: Nicolas Merget <nicolas.merget@deutschebahn.com>
Date: Fri, 28 Feb 2025 08:48:13 +0100
Subject: [PATCH 19/20] fix: issue with doubled variable name

---
 .../react-state-variables.test.ts.snap        | 2208 +++++++++++++----
 .../__snapshots__/stencil.test.ts.snap        |  803 ++----
 .../src/generators/react/helpers/state.ts     |    6 +-
 3 files changed, 1999 insertions(+), 1018 deletions(-)

diff --git a/packages/core/src/__tests__/__snapshots__/react-state-variables.test.ts.snap b/packages/core/src/__tests__/__snapshots__/react-state-variables.test.ts.snap
index ad96bf99da..ca23d6be0e 100644
--- a/packages/core/src/__tests__/__snapshots__/react-state-variables.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/react-state-variables.test.ts.snap
@@ -1,6 +1,6 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`React - stateType: variables > jsx > Javascript Test > AdvancedRef 1`] = `
+exports[`React - only > jsx > Javascript Test > AdvancedRef 1`] = `
 "\\"use client\\";
 import * as React from \\"react\\";
 import { useRef, useEffect } from \\"react\\";
@@ -59,15 +59,208 @@ export default MyBasicRefComponent;
 "
 `;
 
+exports[`React - only > jsx > Javascript Test > InputParent 1`] = `
+"import * as React from \\"react\\";
+import FormInputComponent from \\"./input.raw\\";
+
+function Stepper(props) {
+  const handleChange = function handleChange(value) {
+    console.log(value);
+  };
+
+  return (
+    <FormInputComponent
+      name=\\"kingzez\\"
+      type=\\"text\\"
+      onChange={(value) => handleChange(value)}
+    />
+  );
+}
+
+export default Stepper;
+"
+`;
+
+exports[`React - only > jsx > Typescript Test > AdvancedRef 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useRef, useEffect } from \\"react\\";
+
+export interface Props {
+  showInput: boolean;
+}
+
+function MyBasicRefComponent(props: Props) {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const inputNoArgRef = useRef<HTMLLabelElement>(null);
+  const name = \\"PatrickJS\\";
+  const onBlur = function onBlur() {
+    // Maintain focus
+    inputRef.current.focus();
+  };
+  const lowerCaseName = function lowerCaseName() {
+    return name.toLowerCase();
+  };
+
+  useEffect(() => {
+    console.log(\\"Received an update\\");
+  }, [inputRef.current, inputNoArgRef.current]);
+
+  return (
+    <>
+      <div>
+        {props.showInput ? (
+          <>
+            <input
+              className=\\"input\\"
+              ref={inputRef}
+              value={name}
+              onBlur={(event) => onBlur()}
+              onChange={(event) => (name = event.target.value)}
+            />
+            <label htmlFor=\\"cars\\" ref={inputNoArgRef}>
+              Choose a car:
+            </label>
+            <select name=\\"cars\\" id=\\"cars\\">
+              <option value=\\"supra\\">GR Supra</option>
+              <option value=\\"86\\">GR 86</option>
+            </select>
+          </>
+        ) : null}
+        Hello
+        {lowerCaseName()}! I can run in React, Qwik, Vue, Solid, or Web
+        Component!
+      </div>
+      <style jsx>{\`
+        .input {
+          color: red;
+        }
+      \`}</style>
+    </>
+  );
+}
+
+export default MyBasicRefComponent;
+"
+`;
+
+exports[`React - only > jsx > Typescript Test > InputParent 1`] = `
+"import * as React from \\"react\\";
+import FormInputComponent from \\"./input.raw\\";
+
+function Stepper(props: any) {
+  const handleChange = function handleChange(value: string) {
+    console.log(value);
+  };
+
+  return (
+    <FormInputComponent
+      name=\\"kingzez\\"
+      type=\\"text\\"
+      onChange={(value) => handleChange(value)}
+    />
+  );
+}
+
+export default Stepper;
+"
+`;
+
+exports[`React - stateType: variables > jsx > Javascript Test > AdvancedRef 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useRef, useEffect } from \\"react\\";
+
+function MyBasicRefComponent(props) {
+  const inputRef = useRef(null);
+  const inputNoArgRef = useRef(null);
+  const name = \\"PatrickJS\\";
+  const onBlur = (onBlur = function onBlur() {
+    // Maintain focus
+    inputRef.current.focus();
+  });
+  const lowerCaseName = (lowerCaseName = function lowerCaseName() {
+    return name.toLowerCase();
+  });
+
+  useEffect(() => {
+    console.log(\\"Received an update\\");
+  }, [inputRef.current, inputNoArgRef.current]);
+
+  return (
+    <>
+      <div>
+        {props.showInput ? (
+          <>
+            <input
+              className=\\"input\\"
+              ref={inputRef}
+              value={name}
+              onBlur={(event) => onBlur()}
+              onChange={(event) => (name = event.target.value)}
+            />
+            <label htmlFor=\\"cars\\" ref={inputNoArgRef}>
+              Choose a car:
+            </label>
+            <select name=\\"cars\\" id=\\"cars\\">
+              <option value=\\"supra\\">GR Supra</option>
+              <option value=\\"86\\">GR 86</option>
+            </select>
+          </>
+        ) : null}
+        Hello
+        {lowerCaseName()}! I can run in React, Qwik, Vue, Solid, or Web
+        Component!
+      </div>
+      <style jsx>{\`
+        .input {
+          color: red;
+        }
+      \`}</style>
+    </>
+  );
+}
+
+export default MyBasicRefComponent;
+"
+`;
+
 exports[`React - stateType: variables > jsx > Javascript Test > Basic 1`] = `
-"'function' is not allowed as a variable declaration name. (19:7)
-  17 |
-  18 |   const name= 'Steve'
-> 19 | const function underscore_fn_name() {
-     |       ^
-  20 | return 'bar';
-  21 | }
-  22 | const age= 1"
+"\\"use client\\";
+import * as React from \\"react\\";
+
+export const DEFAULT_VALUES = {
+  name: \\"Steve\\",
+};
+
+function MyBasicComponent(props) {
+  const name = \\"Steve\\";
+  const underscore_fn_name = function underscore_fn_name() {
+    return \\"bar\\";
+  };
+  const age = 1;
+  const sports = [\\"\\"];
+
+  return (
+    <>
+      <div className=\\"test div\\">
+        <input
+          value={DEFAULT_VALUES.name || name}
+          onChange={(myEvent) => (name = myEvent.target.value)}
+        />
+        Hello! I can run in React, Vue, Solid, or Liquid! &gt;
+      </div>
+      <style jsx>{\`
+        .div {
+          padding: 10px;
+        }
+      \`}</style>
+    </>
+  );
+}
+
+export default MyBasicComponent;
+"
 `;
 
 exports[`React - stateType: variables > jsx > Javascript Test > Basic Context 1`] = `
@@ -78,10 +271,10 @@ import { Injector, MyService, createInjector } from \\"@dummy/injection-js\\";
 
 function MyBasicComponent(props) {
   const name = \\"PatrickJS\\";
-  const onChange = function onChange() {
+  const onChange = (onChange = function onChange() {
     const change = myService.method(\\"change\\");
     console.log(change);
-  };
+  });
 
   const myService = useContext(MyService);
 
@@ -287,13 +480,13 @@ function MyBasicRefComponent(props) {
   const inputRef = useRef(null);
   const inputNoArgRef = useRef(null);
   const name = \\"PatrickJS\\";
-  const onBlur = function onBlur() {
+  const onBlur = (onBlur = function onBlur() {
     // Maintain focus
     inputRef.current?.focus();
-  };
-  const lowerCaseName = function lowerCaseName() {
+  });
+  const lowerCaseName = (lowerCaseName = function lowerCaseName() {
     return name.toLowerCase();
-  };
+  });
 
   return (
     <>
@@ -340,11 +533,11 @@ import { useRef } from \\"react\\";
 
 function MyBasicRefAssignmentComponent(props) {
   const holdValueRef = useRef(\\"Patrick\\");
-  const handlerClick = function handlerClick(event) {
+  const handlerClick = (handlerClick = function handlerClick(event) {
     event.preventDefault();
     console.log(\\"current value\\", holdValueRef.current);
     holdValueRef.current = holdValueRef.current + \\"JS\\";
-  };
+  });
 
   return (
     <div>
@@ -427,14 +620,63 @@ export default Button;
 `;
 
 exports[`React - stateType: variables > jsx > Javascript Test > Columns 1`] = `
-"'function' is not allowed as a variable declaration name. (15:9)
-  13 |   function Column(props) {
-  14 |
-> 15 |   const function getColumns() {
-     |         ^
-  16 | return props.columns || [];
-  17 | }
-  18 | const function getGutterSize() {"
+"import * as React from \\"react\\";
+
+function Column(props) {
+  const getColumns = function getColumns() {
+    return props.columns || [];
+  };
+  const getGutterSize = function getGutterSize() {
+    return typeof props.space === \\"number\\" ? props.space || 0 : 20;
+  };
+  const getWidth = function getWidth(index) {
+    const columns = getColumns();
+    return (columns[index] && columns[index].width) || 100 / columns.length;
+  };
+  const getColumnCssWidth = function getColumnCssWidth(index) {
+    const columns = getColumns();
+    const gutterSize = getGutterSize();
+    const subtractWidth = (gutterSize * (columns.length - 1)) / columns.length;
+    return \`calc(\${getWidth(index)}% - \${subtractWidth}px)\`;
+  };
+
+  return (
+    <>
+      <div className=\\"builder-columns div\\">
+        {props.columns?.map((column, index) => (
+          <div className=\\"builder-column div-2\\">
+            {column.content}
+            {index}
+          </div>
+        ))}
+      </div>
+      <style jsx>{\`
+        .div {
+          display: flex;
+          flex-direction: column;
+          align-items: stretch;
+          line-height: normal;
+        }
+        @media (max-width: 999px) {
+          .div {
+            flex-direction: row;
+          }
+        }
+        @media (max-width: 639px) {
+          .div {
+            flex-direction: row-reverse;
+          }
+        }
+        .div-2 {
+          flex-grow: 1;
+        }
+      \`}</style>
+    </>
+  );
+}
+
+export default Column;
+"
 `;
 
 exports[`React - stateType: variables > jsx > Javascript Test > ContentSlotHtml 1`] = `
@@ -459,58 +701,298 @@ export default ContentSlotCode;
 `;
 
 exports[`React - stateType: variables > jsx > Javascript Test > ContentSlotJSX 1`] = `
-"'function' is not allowed as a variable declaration name. (18:7)
-  16 |   const name= 'king'
-  17 | const showContent= false
-> 18 | const function cls() {
-     |       ^
-  19 | return props.slotContent && props.children ? \`\${name}-content\` : '';
-  20 | }
-  21 | const function show() {"
+"\\"use client\\";
+import * as React from \\"react\\";
+
+function ContentSlotJsxCode(props) {
+  props = {
+    content: \\"\\",
+    slotReference: undefined,
+    slotContent: undefined,
+    ...props,
+  };
+  const name = \\"king\\";
+  const showContent = false;
+  const cls = function cls() {
+    return props.slotContent && props.children ? \`\${name}-content\` : \\"\\";
+  };
+  const show = function show() {
+    props.slotContent ? 1 : \\"\\";
+  };
+
+  return (
+    <>
+      {props.slotReference ? (
+        <>
+          <div
+            name={props.slotContent ? \\"name1\\" : \\"name2\\"}
+            title={props.slotContent ? \\"title1\\" : \\"title2\\"}
+            {...props.attributes}
+            onClick={(event) => show()}
+            className={cls()}
+          >
+            {showContent && props.slotContent ? (
+              <>{props.content || \\"{props.content}\\"}</>
+            ) : null}
+            <div>
+              <hr />
+            </div>
+            <div>{props.children}</div>
+          </div>
+        </>
+      ) : null}
+    </>
+  );
+}
+
+export default ContentSlotJsxCode;
+"
 `;
 
 exports[`React - stateType: variables > jsx > Javascript Test > CustomCode 1`] = `
-"'function' is not allowed as a variable declaration name. (19:7)
-  17 | const scriptsInserted= []
-  18 | const scriptsRun= []
-> 19 | const function findAndRunScripts() {
-     |       ^
-  20 | // TODO: Move this function to standalone one in '@builder.io/utils'
-  21 | if (elem.current && typeof window !== 'undefined') {
-  22 | /** @type {HTMLScriptElement[]} */"
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useRef, useEffect } from \\"react\\";
+
+function CustomCode(props) {
+  const elem = useRef(null);
+  const scriptsInserted = [];
+  const scriptsRun = [];
+  const findAndRunScripts = function findAndRunScripts() {
+    // TODO: Move this function to standalone one in '@builder.io/utils'
+    if (elem.current && typeof window !== \\"undefined\\") {
+      /** @type {HTMLScriptElement[]} */
+      const scripts = elem.current.getElementsByTagName(\\"script\\");
+
+      for (let i = 0; i < scripts.length; i++) {
+        const script = scripts[i];
+
+        if (script.src) {
+          if (scriptsInserted.includes(script.src)) {
+            continue;
+          }
+
+          scriptsInserted.push(script.src);
+          const newScript = document.createElement(\\"script\\");
+          newScript.async = true;
+          newScript.src = script.src;
+          document.head.appendChild(newScript);
+        } else if (
+          !script.type ||
+          [
+            \\"text/javascript\\",
+            \\"application/javascript\\",
+            \\"application/ecmascript\\",
+          ].includes(script.type)
+        ) {
+          if (scriptsRun.includes(script.innerText)) {
+            continue;
+          }
+
+          try {
+            scriptsRun.push(script.innerText);
+            new Function(script.innerText)();
+          } catch (error) {
+            console.warn(\\"\`CustomCode\`: Error running script:\\", error);
+          }
+        }
+      }
+    }
+  };
+
+  useEffect(() => {
+    findAndRunScripts();
+  }, []);
+
+  return (
+    <div
+      ref={elem}
+      className={
+        \\"builder-custom-code\\" + (props.replaceNodes ? \\" replace-nodes\\" : \\"\\")
+      }
+      dangerouslySetInnerHTML={{ __html: props.code }}
+    />
+  );
+}
+
+export default CustomCode;
+"
 `;
 
 exports[`React - stateType: variables > jsx > Javascript Test > Embed 1`] = `
-"'function' is not allowed as a variable declaration name. (19:7)
-  17 | const scriptsInserted= []
-  18 | const scriptsRun= []
-> 19 | const function findAndRunScripts() {
-     |       ^
-  20 | // TODO: Move this function to standalone one in '@builder.io/utils'
-  21 | if (elem.current && typeof window !== 'undefined') {
-  22 | /** @type {HTMLScriptElement[]} */"
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useRef, useEffect } from \\"react\\";
+
+function CustomCode(props) {
+  const elem = useRef(null);
+  const scriptsInserted = [];
+  const scriptsRun = [];
+  const findAndRunScripts = function findAndRunScripts() {
+    // TODO: Move this function to standalone one in '@builder.io/utils'
+    if (elem.current && typeof window !== \\"undefined\\") {
+      /** @type {HTMLScriptElement[]} */
+      const scripts = elem.current.getElementsByTagName(\\"script\\");
+
+      for (let i = 0; i < scripts.length; i++) {
+        const script = scripts[i];
+
+        if (script.src) {
+          if (scriptsInserted.includes(script.src)) {
+            continue;
+          }
+
+          scriptsInserted.push(script.src);
+          const newScript = document.createElement(\\"script\\");
+          newScript.async = true;
+          newScript.src = script.src;
+          document.head.appendChild(newScript);
+        } else if (
+          !script.type ||
+          [
+            \\"text/javascript\\",
+            \\"application/javascript\\",
+            \\"application/ecmascript\\",
+          ].includes(script.type)
+        ) {
+          if (scriptsRun.includes(script.innerText)) {
+            continue;
+          }
+
+          try {
+            scriptsRun.push(script.innerText);
+            new Function(script.innerText)();
+          } catch (error) {
+            console.warn(\\"\`CustomCode\`: Error running script:\\", error);
+          }
+        }
+      }
+    }
+  };
+
+  useEffect(() => {
+    findAndRunScripts();
+  }, []);
+
+  return (
+    <div
+      ref={elem}
+      className={
+        \\"builder-custom-code\\" + (props.replaceNodes ? \\" replace-nodes\\" : \\"\\")
+      }
+      dangerouslySetInnerHTML={{ __html: props.code }}
+    />
+  );
+}
+
+export default CustomCode;
+"
 `;
 
 exports[`React - stateType: variables > jsx > Javascript Test > Form 1`] = `
-"'function' is not allowed as a variable declaration name. (21:7)
-  19 | const responseData= null
-  20 | const formErrorMessage= ''
-> 21 | const function submissionState() {
-     |       ^
-  22 | return Builder.isEditing && props.previewState || formState;
-  23 | }
-  24 | const function onSubmit(event) {"
+"',' expected. (109:2792)
+  107 | if (contentType && contentType !== 'multipart/form-data') {
+  108 |   if (
+> 109 |   /* Zapier doesn't allow content-type header to be sent from browsers */   !(sendWithJs && props.action?.includes('zapier.com'))) {     headers['content-type'] = contentType;   } }  const presubmitEvent = new CustomEvent('presubmit', {   detail: {     body   } });  if (formRef.current) {   formRef.current.dispatchEvent(presubmitEvent);    if (presubmitEvent.defaultPrevented) {     return;   } }  formState = 'sending'; const formUrl = \`\${builder.env === 'dev' ? 'http://localhost:5000' : 'https://builder.io'}/api/v1/form-submit?apiKey=\${builder.apiKey}&to=\${btoa(props.sendSubmissionsToEmail || '')}&name=\${encodeURIComponent(props.name || '')}\`; fetch(props.sendSubmissionsTo === 'email' ? formUrl : props.action /* TODO: throw error if no action URL */ , {   body,   headers,   method: props.method || 'post' }).then(async res => {   let body;   const contentType = res.headers.get('content-type');    if (contentType && contentType.indexOf('application/json') !== -1) {     body = await res.json();   } else {     body = await res.text();   }    if (!res.ok && props.errorMessagePath) {     /* TODO: allow supplying an error formatter function */     let message = get(body, props.errorMessagePath);      if (message) {       if (typeof message !== 'string') {         /* TODO: ideally convert json to yaml so it woul dbe like          error: - email has been taken */         message = JSON.stringify(message);       }        formErrorMessage = message;     }   }    responseData = body;   formState = res.ok ? 'success' : 'error';    if (res.ok) {     const submitSuccessEvent = new CustomEvent('submit:success', {       detail: {         res,         body       }     });      if (formRef.current) {       formRef.current.dispatchEvent(submitSuccessEvent);        if (submitSuccessEvent.defaultPrevented) {         return;       }       /* TODO: option to turn this on/off? */         if (props.resetFormOnSubmit !== false) {         formRef.current.reset();       }     }     /* TODO: client side route event first that can be preventDefaulted */       if (props.successUrl) {       if (formRef.current) {         const event = new CustomEvent('route', {           detail: {             url: props.successUrl           }         });         formRef.current.dispatchEvent(event);          if (!event.defaultPrevented) {           location.href = props.successUrl;         }       } else {         location.href = props.successUrl;       }     }   } }, err => {   const submitErrorEvent = new CustomEvent('submit:error', {     detail: {       error: err     }   });    if (formRef.current) {     formRef.current.dispatchEvent(submitErrorEvent);      if (submitErrorEvent.defaultPrevented) {       return;     }   }    responseData = err;   formState = 'error'; }); } }             return (   <>   <form  validate={props.validate}  ref={formRef}  action={!props.sendWithJs && props.action}  method={props.method}  name={props.name}  onSubmit={(event) => onSubmit(event) }  {...(props.attributes)}>{props.builderBlock && props.builderBlock.children ? (   <>{props.builderBlock?.children?.map((block, index) => (   <BuilderBlockComponent  key={block.id}  block={block}  index={index}  /> ))}</> ) : null}{submissionState() === 'error' ? (   <BuilderBlocks  dataPath=\\"errorMessage\\"  blocks={props.errorMessage}  /> ) : null}{submissionState() === 'sending' ? (   <BuilderBlocks  dataPath=\\"sendingMessage\\"  blocks={props.sendingMessage}  /> ) : null}{submissionState() === 'error' && responseData ? (   <pre className=\\"builder-form-error-text pre\\">{JSON.stringify(responseData, null, 2)}</pre> ) : null}{submissionState() === 'success' ? (   <BuilderBlocks  dataPath=\\"successMessage\\"  blocks={props.successMessage}  /> ) : null}</form>   <style jsx>{\`.pre {   padding: 10px;   color: red;   text-align: center; }\`}</style>     </> ); }       export default FormComponent;
+      |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        ^
+  110 |
+  111 |
+  112 |"
 `;
 
 exports[`React - stateType: variables > jsx > Javascript Test > Image 1`] = `
-"'function' is not allowed as a variable declaration name. (19:7)
-  17 | const scrollListener= null
-  18 | const imageLoaded= false
-> 19 | const function setLoaded() {
-     |       ^
-  20 | imageLoaded = true;
-  21 | }
-  22 | const function useLazyLoading() {"
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useRef, useEffect } from \\"react\\";
+
+function Image(props) {
+  const pictureRef = useRef(null);
+  const scrollListener = null;
+  const imageLoaded = false;
+  const setLoaded = function setLoaded() {
+    imageLoaded = true;
+  };
+  const useLazyLoading = function useLazyLoading() {
+    // TODO: Add more checks here, like testing for real web browsers
+    return !!props.lazy && isBrowser();
+  };
+  const isBrowser = (isBrowser = function isBrowser() {
+    return (
+      typeof window !== \\"undefined\\" && window.navigator.product != \\"ReactNative\\"
+    );
+  });
+  const load = false;
+
+  useEffect(() => {
+    if (useLazyLoading()) {
+      // throttled scroll capture listener
+      const listener = () => {
+        if (pictureRef.current) {
+          const rect = pictureRef.current.getBoundingClientRect();
+          const buffer = window.innerHeight / 2;
+
+          if (rect.top < window.innerHeight + buffer) {
+            load = true;
+            scrollListener = null;
+            window.removeEventListener(\\"scroll\\", listener);
+          }
+        }
+      };
+
+      scrollListener = listener;
+      window.addEventListener(\\"scroll\\", listener, {
+        capture: true,
+        passive: true,
+      });
+      listener();
+    }
+  }, []);
+
+  useEffect(() => {
+    return () => {
+      if (scrollListener) {
+        window.removeEventListener(\\"scroll\\", scrollListener);
+      }
+    };
+  }, []);
+
+  return (
+    <>
+      <div>
+        <picture ref={pictureRef}>
+          {!useLazyLoading() || load ? (
+            <img
+              alt={props.altText}
+              aria-role={props.altText ? \\"presentation\\" : undefined}
+              className={
+                \\"builder-image\\" +
+                (props._class ? \\" \\" + props._class : \\"\\") +
+                \\" img\\"
+              }
+              src={props.image}
+              onLoad={(event) => setLoaded()}
+              srcset={props.srcset}
+              sizes={props.sizes}
+            />
+          ) : null}
+          <source srcset={props.srcset} />
+        </picture>
+        {props.children}
+      </div>
+      <style jsx>{\`
+        .img {
+          opacity: 1;
+          transition: opacity 0.2s ease-in-out;
+          object-fit: cover;
+          object-position: center;
+        }
+      \`}</style>
+    </>
+  );
+}
+
+export default Image;
+"
 `;
 
 exports[`React - stateType: variables > jsx > Javascript Test > Image State 1`] = `
@@ -587,14 +1069,25 @@ export default FormInputComponent;
 `;
 
 exports[`React - stateType: variables > jsx > Javascript Test > InputParent 1`] = `
-"'function' is not allowed as a variable declaration name. (15:9)
-  13 |   function Stepper(props) {
-  14 |
-> 15 |   const function handleChange(value) {
-     |         ^
-  16 | console.log(value);
-  17 | }
-  18 |"
+"import * as React from \\"react\\";
+import FormInputComponent from \\"./input.raw\\";
+
+function Stepper(props) {
+  const handleChange = function handleChange(value) {
+    console.log(value);
+  };
+
+  return (
+    <FormInputComponent
+      name=\\"kingzez\\"
+      type=\\"text\\"
+      onChange={(value) => handleChange(value)}
+    />
+  );
+}
+
+export default Stepper;
+"
 `;
 
 exports[`React - stateType: variables > jsx > Javascript Test > NestedStore 1`] = `
@@ -755,47 +1248,150 @@ export default SlotCode;
 `;
 
 exports[`React - stateType: variables > jsx > Javascript Test > Stamped.io 1`] = `
-"'function' is not allowed as a variable declaration name. (19:7)
-  17 | const name= 'test'
-  18 | const showReviewPrompt= false
-> 19 | const function kebabCaseValue() {
-     |       ^
-  20 | return kebabCase('testThat');
-  21 | }
-  22 | const function snakeCaseValue() {"
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+import { kebabCase, snakeCase } from \\"lodash\\";
+
+function SmileReviews(props) {
+  const reviews = [];
+  const name = \\"test\\";
+  const showReviewPrompt = false;
+  const kebabCaseValue = function kebabCaseValue() {
+    return kebabCase(\\"testThat\\");
+  };
+  const snakeCaseValue = function snakeCaseValue() {
+    return snakeCase(\\"testThis\\");
+  };
+
+  useEffect(() => {
+    fetch(
+      \`https://stamped.io/api/widget/reviews?storeUrl=builder-io.myshopify.com&apiKey=\${
+        props.apiKey || \\"pubkey-8bbDq7W6w4sB3OWeM1HUy2s47702hM\\"
+      }&productId=\${props.productId || \\"2410511106127\\"}\`
+    )
+      .then((res) => res.json())
+      .then((data) => {
+        reviews = data.data;
+      });
+  }, []);
+
+  return (
+    <>
+      <div data-user={name}>
+        <button onClick={(event) => (showReviewPrompt = true)}>
+          Write a review
+        </button>
+        {showReviewPrompt || \\"asdf\\" ? (
+          <>
+            <input placeholder=\\"Email\\" />
+            <input placeholder=\\"Title\\" className=\\"input\\" />
+            <textarea
+              placeholder=\\"How was your experience?\\"
+              className=\\"textarea\\"
+            />
+            <button
+              className=\\"button\\"
+              onClick={(ev) => {
+                ev.preventDefault();
+                showReviewPrompt = false;
+              }}
+            >
+              Submit
+            </button>
+          </>
+        ) : null}
+        {reviews?.map((review, index) => (
+          <div className=\\"review\\" key={review.id}>
+            <img className=\\"img\\" src={review.avatar} />
+            <div className={showReviewPrompt ? \\"bg-primary\\" : \\"bg-secondary\\"}>
+              <div>N: {index}</div>
+              <div>{review.author}</div>
+              <div>{review.reviewMessage}</div>
+            </div>
+          </div>
+        ))}
+      </div>
+      <style jsx>{\`
+        .input {
+          display: block;
+        }
+        .textarea {
+          display: block;
+        }
+        .button {
+          display: block;
+        }
+        .review {
+          margin: 10px;
+          padding: 10px;
+          background: white;
+          display: flex;
+          border-radius: 5px;
+          box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+          -webkit-font-smoothing: antialiased;
+        }
+        .img {
+          height: 30px;
+          width: 30px;
+          margin-right: 10px;
+        }
+      \`}</style>
+    </>
+  );
+}
+
+export default SmileReviews;
+"
 `;
 
 exports[`React - stateType: variables > jsx > Javascript Test > StoreComment 1`] = `
-"'function' is not allowed as a variable declaration name. (17:7)
-  15 |
-  16 |   const foo= true
-> 17 | const function bar() {}
-     |       ^
-  18 |
-  19 |
-  20 |"
+"\\"use client\\";
+import * as React from \\"react\\";
+
+function StringLiteralStore(props) {
+  const foo = true;
+  const bar = function bar() {};
+
+  return <>{foo}</>;
+}
+
+export default StringLiteralStore;
+"
 `;
 
 exports[`React - stateType: variables > jsx > Javascript Test > StoreShadowVars 1`] = `
-"'function' is not allowed as a variable declaration name. (17:7)
-  15 |
-  16 |   const errors= {}
-> 17 | const function foo(errors) {
-     |       ^
-  18 | return errors;
-  19 | }
-  20 |"
+"\\"use client\\";
+import * as React from \\"react\\";
+
+function MyComponent(props) {
+  const errors = {};
+  const foo = function foo(errors) {
+    return errors;
+  };
+
+  return <>{foo(errors)}</>;
+}
+
+export default MyComponent;
+"
 `;
 
 exports[`React - stateType: variables > jsx > Javascript Test > StoreWithState 1`] = `
-"'function' is not allowed as a variable declaration name. (17:7)
-  15 |
-  16 |   const foo= false
-> 17 | const function bar() {
-     |       ^
-  18 | return foo;
-  19 | }
-  20 |"
+"\\"use client\\";
+import * as React from \\"react\\";
+
+function MyComponent(props) {
+  const foo = false;
+  const bar = function bar() {
+    return foo;
+  };
+
+  return <>{bar()}</>;
+}
+
+export default MyComponent;
+"
 `;
 
 exports[`React - stateType: variables > jsx > Javascript Test > Submit 1`] = `
@@ -862,14 +1458,32 @@ export default Textarea;
 `;
 
 exports[`React - stateType: variables > jsx > Javascript Test > UseValueAndFnFromStore 1`] = `
-"'function' is not allowed as a variable declaration name. (18:7)
-  16 |   const _id= 'abc'
-  17 | const _active= false
-> 18 | const function _do(id) {
-     |       ^
-  19 | _active = !!id;
-  20 |
-  21 | if (props.onChange) {"
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+
+function UseValueAndFnFromStore(props) {
+  const _id = \\"abc\\";
+  const _active = false;
+  const _do = function _do(id) {
+    _active = !!id;
+
+    if (props.onChange) {
+      props.onChange(_active);
+    }
+  };
+
+  useEffect(() => {
+    if (_do) {
+      _do(_id);
+    }
+  });
+
+  return <div>Test</div>;
+}
+
+export default UseValueAndFnFromStore;
+"
 `;
 
 exports[`React - stateType: variables > jsx > Javascript Test > Video 1`] = `
@@ -905,14 +1519,23 @@ export default Video;
 `;
 
 exports[`React - stateType: variables > jsx > Javascript Test > arrowFunctionInUseStore 1`] = `
-"'function' is not allowed as a variable declaration name. (17:7)
-  15 |
-  16 |   const name= 'steve'
-> 17 | const function setName(value) {
-     |       ^
-  18 | name = value;
-  19 | }
-  20 | const function updateNameWithArrowFn(value) {"
+"\\"use client\\";
+import * as React from \\"react\\";
+
+function MyComponent(props) {
+  const name = \\"steve\\";
+  const setName = function setName(value) {
+    name = value;
+  };
+  const updateNameWithArrowFn = function updateNameWithArrowFn(value) {
+    name = value;
+  };
+
+  return <div>Hello {name}</div>;
+}
+
+export default MyComponent;
+"
 `;
 
 exports[`React - stateType: variables > jsx > Javascript Test > basicForFragment 1`] = `
@@ -950,14 +1573,14 @@ export default BasicForFragment;
 `;
 
 exports[`React - stateType: variables > jsx > Javascript Test > basicForNoTagReference 1`] = `
-"'function' is not allowed as a variable declaration name. (19:7)
-  17 | const TagName= 'div'
-  18 | const tag= 'span'
-> 19 | const function TagNameGetter() {
-     |       ^
-  20 | return 'span';
-  21 | }
-  22 |"
+"Identifier expected. (36:17)
+  34 | return (
+  35 |
+> 36 |   <TagNameGetter()>
+     |                 ^
+  37 |   Hello <tag>{name}</tag>{props.actions?.map((action) => (
+  38 |   <TagName><action.icon  /><span>{action.text}</span></TagName>
+  39 | ))}</TagNameGetter()>"
 `;
 
 exports[`React - stateType: variables > jsx > Javascript Test > basicForwardRef 1`] = `
@@ -1538,25 +2161,53 @@ export default MyBasicComponent;
 `;
 
 exports[`React - stateType: variables > jsx > Javascript Test > getterState 1`] = `
-"'function' is not allowed as a variable declaration name. (15:9)
-  13 |   function Button(props) {
-  14 |
-> 15 |   const function foo2() {
-     |         ^
-  16 | return props.foo + 'foo';
-  17 | }
-  18 | const function bar() {"
+"import * as React from \\"react\\";
+
+function Button(props) {
+  const foo2 = function foo2() {
+    return props.foo + \\"foo\\";
+  };
+  const bar = function bar() {
+    return \\"bar\\";
+  };
+  const baz = function baz(i) {
+    return i + foo2().length;
+  };
+
+  return (
+    <div>
+      <p>{foo2()}</p>
+      <p>{bar()}</p>
+      <p>{baz(1)}</p>
+    </div>
+  );
+}
+
+export default Button;
+"
 `;
 
 exports[`React - stateType: variables > jsx > Javascript Test > import types 1`] = `
-"'function' is not allowed as a variable declaration name. (15:9)
-  13 |   function RenderContent(props) {
-  14 |
-> 15 |   const function getRenderContentProps(block, index) {
-     |         ^
-  16 | return {
-  17 | block: block,
-  18 | index: index"
+"import * as React from \\"react\\";
+import RenderBlock from \\"./builder-render-block.raw\\";
+
+function RenderContent(props) {
+  const getRenderContentProps = function getRenderContentProps(block, index) {
+    return {
+      block: block,
+      index: index,
+    };
+  };
+
+  return (
+    <RenderBlock
+      {...getRenderContentProps(props.renderContentProps.block, 0)}
+    />
+  );
+}
+
+export default RenderContent;
+"
 `;
 
 exports[`React - stateType: variables > jsx > Javascript Test > layerName 1`] = `
@@ -1765,21 +2416,49 @@ function MyNormalizedLayerNamesComponent(props) {
   );
 }
 
-export default MyNormalizedLayerNamesComponent;
+export default MyNormalizedLayerNamesComponent;
+"
+`;
+
+exports[`React - stateType: variables > jsx > Javascript Test > onEvent 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useRef, useEffect } from \\"react\\";
+
+function Embed(props) {
+  const elem = useRef(null);
+  const foo = function foo(event) {
+    console.log(\\"test2\\");
+  };
+  const elem_onInitEditingBldr = function elem_onInitEditingBldr(event) {
+    console.log(\\"test\\");
+    foo(event);
+  };
+
+  useEffect(() => {
+    elem.current?.addEventListener(\\"initEditingBldr\\", elem_onInitEditingBldr);
+    return () =>
+      elem.current?.removeEventListener(
+        \\"initEditingBldr\\",
+        elem_onInitEditingBldr
+      );
+  }, []);
+
+  useEffect(() => {
+    elem.current.dispatchEvent(new CustomEvent(\\"initEditingBldr\\"));
+  }, []);
+
+  return (
+    <div className=\\"builder-embed\\" ref={elem}>
+      <div>Test</div>
+    </div>
+  );
+}
+
+export default Embed;
 "
 `;
 
-exports[`React - stateType: variables > jsx > Javascript Test > onEvent 1`] = `
-"'function' is not allowed as a variable declaration name. (17:7)
-  15 |
-  16 |   const elem = useRef(null);
-> 17 | const function foo(event) {
-     |       ^
-  18 | console.log('test2');
-  19 | }
-  20 | const function elem_onInitEditingBldr(event) {"
-`;
-
 exports[`React - stateType: variables > jsx > Javascript Test > onInit & onMount 1`] = `
 "\\"use client\\";
 import * as React from \\"react\\";
@@ -2012,13 +2691,13 @@ import * as React from \\"react\\";
 import { useEffect } from \\"react\\";
 
 function OnUpdate(props) {
-  const foo = function foo(params) {};
-  const bar = function bar() {};
-  const zoo = function zoo() {
+  const foo = (foo = function foo(params) {});
+  const bar = (bar = function bar() {});
+  const zoo = (zoo = function zoo() {
     const params = {
       cb: bar,
     };
-  };
+  });
 
   useEffect(() => {
     foo({
@@ -2034,14 +2713,14 @@ export default OnUpdate;
 `;
 
 exports[`React - stateType: variables > jsx > Javascript Test > renderBlock 1`] = `
-"'function' is not allowed as a variable declaration name. (29:10)
-  27 |    function RenderBlock(props) {
-  28 |
-> 29 |    const function component() {
-     |          ^
-  30 | const componentName = getProcessedBlock({
-  31 |  block: props.block,
-  32 |  state: props.context.state,"
+"Identifier expected. (211:8)
+  209 |    {shouldWrap() ? (
+  210 |    <>{isEmptyHtmlElement(tag()) ? (
+> 211 |    <tag()  {...(attributes())}  {...(actions())}  />
+      |        ^
+  212 |  ) : null}
+  213 | {!isEmptyHtmlElement(tag()) && repeatItemData() ? (
+  214 |    <>{repeatItemData()?.map((data, index) => ("
 `;
 
 exports[`React - stateType: variables > jsx > Javascript Test > renderContentExample 1`] = `
@@ -2182,14 +2861,24 @@ export default MyComponent;
 `;
 
 exports[`React - stateType: variables > jsx > Javascript Test > setState 1`] = `
-"'function' is not allowed as a variable declaration name. (17:7)
-  15 |
-  16 |   const n= ['123']
-> 17 | const function someFn() {
-     |       ^
-  18 | n[0] = '123';
-  19 | }
-  20 |"
+"\\"use client\\";
+import * as React from \\"react\\";
+
+function SetState(props) {
+  const n = [\\"123\\"];
+  const someFn = function someFn() {
+    n[0] = \\"123\\";
+  };
+
+  return (
+    <div>
+      <button onClick={(event) => someFn()}>Click me</button>
+    </div>
+  );
+}
+
+export default SetState;
+"
 `;
 
 exports[`React - stateType: variables > jsx > Javascript Test > showExpressions 1`] = `
@@ -2518,14 +3207,27 @@ export default TypeExternalStore;
 `;
 
 exports[`React - stateType: variables > jsx > Javascript Test > typeGetterStore 1`] = `
-"'function' is not allowed as a variable declaration name. (17:7)
-  15 |
-  16 |   const name= 'test'
-> 17 | const function getName() {
-     |       ^
-  18 | if (name === 'a') {
-  19 | return 'b';
-  20 | }"
+"\\"use client\\";
+import * as React from \\"react\\";
+
+function TypeGetterStore(props) {
+  const name = \\"test\\";
+  const getName = function getName() {
+    if (name === \\"a\\") {
+      return \\"b\\";
+    }
+
+    return name;
+  };
+  const test = function test() {
+    return \\"test\\";
+  };
+
+  return <div>Hello {name}! </div>;
+}
+
+export default TypeGetterStore;
+"
 `;
 
 exports[`React - stateType: variables > jsx > Javascript Test > use-style 1`] = `
@@ -2603,14 +3305,32 @@ export default MyComponent;
 `;
 
 exports[`React - stateType: variables > jsx > Javascript Test > useTarget 1`] = `
-"'function' is not allowed as a variable declaration name. (16:9)
-  14 |   function UseTargetComponent(props) {
-  15 |
-> 16 |   const function name() {
-     |         ^
-  17 | const prefix = 123;
-  18 | return prefix + 'foo';
-  19 | }"
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+
+function UseTargetComponent(props) {
+  const name = function name() {
+    const prefix = 123;
+    return prefix + \\"foo\\";
+  };
+  const lastName = \\"bar\\";
+  const foo = \\"bar\\";
+
+  useEffect(() => {
+    console.log(foo);
+    foo = \\"bar\\";
+    console.log(\\"react\\");
+    lastName = \\"baz\\";
+    console.log(foo);
+    foo = \\"baz\\";
+  }, []);
+
+  return <div>{name()}</div>;
+}
+
+export default UseTargetComponent;
+"
 `;
 
 exports[`React - stateType: variables > jsx > Javascript Test > webComponent 1`] = `
@@ -2667,13 +3387,13 @@ function MyBasicRefComponent(props: Props) {
   const inputRef = useRef<HTMLInputElement>(null);
   const inputNoArgRef = useRef<HTMLLabelElement>(null);
   const name = \\"PatrickJS\\";
-  const onBlur = function onBlur() {
+  const onBlur = (onBlur = function onBlur() {
     // Maintain focus
     inputRef.current.focus();
-  };
-  const lowerCaseName = function lowerCaseName() {
+  });
+  const lowerCaseName = (lowerCaseName = function lowerCaseName() {
     return name.toLowerCase();
-  };
+  });
 
   useEffect(() => {
     console.log(\\"Received an update\\");
@@ -2718,14 +3438,45 @@ export default MyBasicRefComponent;
 `;
 
 exports[`React - stateType: variables > jsx > Typescript Test > Basic 1`] = `
-"'function' is not allowed as a variable declaration name. (21:7)
-  19 |
-  20 |   const name= 'Steve'
-> 21 | const function underscore_fn_name() {
-     |       ^
-  22 | return 'bar';
-  23 | }
-  24 | const age= 1"
+"\\"use client\\";
+import * as React from \\"react\\";
+
+export interface MyBasicComponentProps {
+  id: string;
+}
+
+export const DEFAULT_VALUES = {
+  name: \\"Steve\\",
+};
+
+function MyBasicComponent(props: MyBasicComponentProps) {
+  const name = \\"Steve\\";
+  const underscore_fn_name = function underscore_fn_name() {
+    return \\"bar\\";
+  };
+  const age = 1;
+  const sports = [\\"\\"];
+
+  return (
+    <>
+      <div className=\\"test div\\">
+        <input
+          value={DEFAULT_VALUES.name || name}
+          onChange={(myEvent) => (name = myEvent.target.value)}
+        />
+        Hello! I can run in React, Vue, Solid, or Liquid! &gt;
+      </div>
+      <style jsx>{\`
+        .div {
+          padding: 10px;
+        }
+      \`}</style>
+    </>
+  );
+}
+
+export default MyBasicComponent;
+"
 `;
 
 exports[`React - stateType: variables > jsx > Typescript Test > Basic Context 1`] = `
@@ -2736,10 +3487,10 @@ import { Injector, MyService, createInjector } from \\"@dummy/injection-js\\";
 
 function MyBasicComponent(props: any) {
   const name = \\"PatrickJS\\";
-  const onChange = function onChange() {
+  const onChange = (onChange = function onChange() {
     const change = myService.method(\\"change\\");
     console.log(change);
-  };
+  });
 
   const myService = useContext(MyService);
 
@@ -2959,13 +3710,13 @@ function MyBasicRefComponent(props: Props) {
   const inputRef = useRef<HTMLInputElement | null>(null);
   const inputNoArgRef = useRef<HTMLLabelElement | null>(null);
   const name = \\"PatrickJS\\";
-  const onBlur = function onBlur() {
+  const onBlur = (onBlur = function onBlur() {
     // Maintain focus
     inputRef.current?.focus();
-  };
-  const lowerCaseName = function lowerCaseName() {
+  });
+  const lowerCaseName = (lowerCaseName = function lowerCaseName() {
     return name.toLowerCase();
-  };
+  });
 
   return (
     <>
@@ -3016,11 +3767,11 @@ export interface Props {
 
 function MyBasicRefAssignmentComponent(props: Props) {
   const holdValueRef = useRef(\\"Patrick\\");
-  const handlerClick = function handlerClick(event: Event) {
+  const handlerClick = (handlerClick = function handlerClick(event: Event) {
     event.preventDefault();
     console.log(\\"current value\\", holdValueRef.current);
     holdValueRef.current = holdValueRef.current + \\"JS\\";
-  };
+  });
 
   return (
     <div>
@@ -3114,14 +3865,78 @@ export default Button;
 `;
 
 exports[`React - stateType: variables > jsx > Typescript Test > Columns 1`] = `
-"'function' is not allowed as a variable declaration name. (28:9)
-  26 |   function Column(props:ColumnProps) {
-  27 |
-> 28 |   const function getColumns() {
-     |         ^
-  29 | return props.columns || [];
-  30 | }
-  31 | const function getGutterSize() {"
+"import * as React from \\"react\\";
+
+type Column = {
+  content: any; // TODO: Implement this when support for dynamic CSS lands
+
+  width?: number;
+};
+export interface ColumnProps {
+  columns?: Column[]; // TODO: Implement this when support for dynamic CSS lands
+
+  space?: number; // TODO: Implement this when support for dynamic CSS lands
+
+  stackColumnsAt?: \\"tablet\\" | \\"mobile\\" | \\"never\\"; // TODO: Implement this when support for dynamic CSS lands
+
+  reverseColumnsWhenStacked?: boolean;
+}
+
+function Column(props: ColumnProps) {
+  const getColumns = function getColumns() {
+    return props.columns || [];
+  };
+  const getGutterSize = function getGutterSize() {
+    return typeof props.space === \\"number\\" ? props.space || 0 : 20;
+  };
+  const getWidth = function getWidth(index: number) {
+    const columns = getColumns();
+    return (columns[index] && columns[index].width) || 100 / columns.length;
+  };
+  const getColumnCssWidth = function getColumnCssWidth(index: number) {
+    const columns = getColumns();
+    const gutterSize = getGutterSize();
+    const subtractWidth = (gutterSize * (columns.length - 1)) / columns.length;
+    return \`calc(\${getWidth(index)}% - \${subtractWidth}px)\`;
+  };
+
+  return (
+    <>
+      <div className=\\"builder-columns div\\">
+        {props.columns?.map((column, index) => (
+          <div className=\\"builder-column div-2\\">
+            {column.content}
+            {index}
+          </div>
+        ))}
+      </div>
+      <style jsx>{\`
+        .div {
+          display: flex;
+          flex-direction: column;
+          align-items: stretch;
+          line-height: normal;
+        }
+        @media (max-width: 999px) {
+          .div {
+            flex-direction: row;
+          }
+        }
+        @media (max-width: 639px) {
+          .div {
+            flex-direction: row-reverse;
+          }
+        }
+        .div-2 {
+          flex-grow: 1;
+        }
+      \`}</style>
+    </>
+  );
+}
+
+export default Column;
+"
 `;
 
 exports[`React - stateType: variables > jsx > Typescript Test > ContentSlotHtml 1`] = `
@@ -3152,58 +3967,332 @@ export default ContentSlotCode;
 `;
 
 exports[`React - stateType: variables > jsx > Typescript Test > ContentSlotJSX 1`] = `
-"'function' is not allowed as a variable declaration name. (20:7)
-  18 |   const name= 'king'
-  19 | const showContent= false
-> 20 | const function cls() {
-     |       ^
-  21 | return props.slotContent && props.children ? \`\${name}-content\` : '';
-  22 | }
-  23 | const function show() {"
+"\\"use client\\";
+import * as React from \\"react\\";
+
+type Props = {
+  [key: string]: string | JSX.Element;
+};
+import type { JSX } from \\"../../../../jsx-runtime\\";
+
+function ContentSlotJsxCode(props: Props) {
+  props = {
+    content: \\"\\",
+    slotReference: undefined,
+    slotContent: undefined,
+    ...props,
+  };
+  const name = \\"king\\";
+  const showContent = false;
+  const cls = function cls() {
+    return props.slotContent && props.children ? \`\${name}-content\` : \\"\\";
+  };
+  const show = function show() {
+    props.slotContent ? 1 : \\"\\";
+  };
+
+  return (
+    <>
+      {props.slotReference ? (
+        <>
+          <div
+            name={props.slotContent ? \\"name1\\" : \\"name2\\"}
+            title={props.slotContent ? \\"title1\\" : \\"title2\\"}
+            {...props.attributes}
+            onClick={(event) => show()}
+            className={cls()}
+          >
+            {showContent && props.slotContent ? (
+              <>{props.content || \\"{props.content}\\"}</>
+            ) : null}
+            <div>
+              <hr />
+            </div>
+            <div>{props.children}</div>
+          </div>
+        </>
+      ) : null}
+    </>
+  );
+}
+
+export default ContentSlotJsxCode;
+"
 `;
 
 exports[`React - stateType: variables > jsx > Typescript Test > CustomCode 1`] = `
-"'function' is not allowed as a variable declaration name. (22:7)
-  20 | const scriptsInserted= []
-  21 | const scriptsRun= []
-> 22 | const function findAndRunScripts() {
-     |       ^
-  23 | // TODO: Move this function to standalone one in '@builder.io/utils'
-  24 | if (elem.current && typeof window !== 'undefined') {
-  25 | /** @type {HTMLScriptElement[]} */"
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useRef, useEffect } from \\"react\\";
+
+export interface CustomCodeProps {
+  code: string;
+  replaceNodes?: boolean;
+}
+
+function CustomCode(props: CustomCodeProps) {
+  const elem = useRef<HTMLDivElement>(null);
+  const scriptsInserted = [];
+  const scriptsRun = [];
+  const findAndRunScripts = function findAndRunScripts() {
+    // TODO: Move this function to standalone one in '@builder.io/utils'
+    if (elem.current && typeof window !== \\"undefined\\") {
+      /** @type {HTMLScriptElement[]} */
+      const scripts = elem.current.getElementsByTagName(\\"script\\");
+
+      for (let i = 0; i < scripts.length; i++) {
+        const script = scripts[i];
+
+        if (script.src) {
+          if (scriptsInserted.includes(script.src)) {
+            continue;
+          }
+
+          scriptsInserted.push(script.src);
+          const newScript = document.createElement(\\"script\\");
+          newScript.async = true;
+          newScript.src = script.src;
+          document.head.appendChild(newScript);
+        } else if (
+          !script.type ||
+          [
+            \\"text/javascript\\",
+            \\"application/javascript\\",
+            \\"application/ecmascript\\",
+          ].includes(script.type)
+        ) {
+          if (scriptsRun.includes(script.innerText)) {
+            continue;
+          }
+
+          try {
+            scriptsRun.push(script.innerText);
+            new Function(script.innerText)();
+          } catch (error) {
+            console.warn(\\"\`CustomCode\`: Error running script:\\", error);
+          }
+        }
+      }
+    }
+  };
+
+  useEffect(() => {
+    findAndRunScripts();
+  }, []);
+
+  return (
+    <div
+      ref={elem}
+      className={
+        \\"builder-custom-code\\" + (props.replaceNodes ? \\" replace-nodes\\" : \\"\\")
+      }
+      dangerouslySetInnerHTML={{ __html: props.code }}
+    />
+  );
+}
+
+export default CustomCode;
+"
 `;
 
 exports[`React - stateType: variables > jsx > Typescript Test > Embed 1`] = `
-"'function' is not allowed as a variable declaration name. (22:7)
-  20 | const scriptsInserted= []
-  21 | const scriptsRun= []
-> 22 | const function findAndRunScripts() {
-     |       ^
-  23 | // TODO: Move this function to standalone one in '@builder.io/utils'
-  24 | if (elem.current && typeof window !== 'undefined') {
-  25 | /** @type {HTMLScriptElement[]} */"
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useRef, useEffect } from \\"react\\";
+
+export interface CustomCodeProps {
+  code: string;
+  replaceNodes?: boolean;
+}
+
+function CustomCode(props: CustomCodeProps) {
+  const elem = useRef<HTMLDivElement>(null);
+  const scriptsInserted = [];
+  const scriptsRun = [];
+  const findAndRunScripts = function findAndRunScripts() {
+    // TODO: Move this function to standalone one in '@builder.io/utils'
+    if (elem.current && typeof window !== \\"undefined\\") {
+      /** @type {HTMLScriptElement[]} */
+      const scripts = elem.current.getElementsByTagName(\\"script\\");
+
+      for (let i = 0; i < scripts.length; i++) {
+        const script = scripts[i];
+
+        if (script.src) {
+          if (scriptsInserted.includes(script.src)) {
+            continue;
+          }
+
+          scriptsInserted.push(script.src);
+          const newScript = document.createElement(\\"script\\");
+          newScript.async = true;
+          newScript.src = script.src;
+          document.head.appendChild(newScript);
+        } else if (
+          !script.type ||
+          [
+            \\"text/javascript\\",
+            \\"application/javascript\\",
+            \\"application/ecmascript\\",
+          ].includes(script.type)
+        ) {
+          if (scriptsRun.includes(script.innerText)) {
+            continue;
+          }
+
+          try {
+            scriptsRun.push(script.innerText);
+            new Function(script.innerText)();
+          } catch (error) {
+            console.warn(\\"\`CustomCode\`: Error running script:\\", error);
+          }
+        }
+      }
+    }
+  };
+
+  useEffect(() => {
+    findAndRunScripts();
+  }, []);
+
+  return (
+    <div
+      ref={elem}
+      className={
+        \\"builder-custom-code\\" + (props.replaceNodes ? \\" replace-nodes\\" : \\"\\")
+      }
+      dangerouslySetInnerHTML={{ __html: props.code }}
+    />
+  );
+}
+
+export default CustomCode;
+"
 `;
 
 exports[`React - stateType: variables > jsx > Typescript Test > Form 1`] = `
-"'function' is not allowed as a variable declaration name. (43:7)
-  41 | const responseData= null
-  42 | const formErrorMessage= ''
-> 43 | const function submissionState() {
-     |       ^
-  44 | return Builder.isEditing && props.previewState || formState;
-  45 | }
-  46 | const function onSubmit(event: Event & {"
+"',' expected. (136:2793)
+  134 | if (contentType && contentType !== 'multipart/form-data') {
+  135 |   if (
+> 136 |   /* Zapier doesn't allow content-type header to be sent from browsers */   !(sendWithJs && props.action?.includes('zapier.com'))) {     headers['content-type'] = contentType;   } }  const presubmitEvent = new CustomEvent('presubmit', {   detail: {     body   } });  if (formRef.current) {   formRef.current.dispatchEvent(presubmitEvent);    if (presubmitEvent.defaultPrevented) {     return;   } }  formState = 'sending'; const formUrl = \`\${builder.env === 'dev' ? 'http://localhost:5000' : 'https://builder.io'}/api/v1/form-submit?apiKey=\${builder.apiKey}&to=\${btoa(props.sendSubmissionsToEmail || '')}&name=\${encodeURIComponent(props.name || '')}\`; fetch(props.sendSubmissionsTo === 'email' ? formUrl : props.action! /* TODO: throw error if no action URL */ , {   body,   headers,   method: props.method || 'post' }).then(async res => {   let body;   const contentType = res.headers.get('content-type');    if (contentType && contentType.indexOf('application/json') !== -1) {     body = await res.json();   } else {     body = await res.text();   }    if (!res.ok && props.errorMessagePath) {     /* TODO: allow supplying an error formatter function */     let message = get(body, props.errorMessagePath);      if (message) {       if (typeof message !== 'string') {         /* TODO: ideally convert json to yaml so it woul dbe like          error: - email has been taken */         message = JSON.stringify(message);       }        formErrorMessage = message;     }   }    responseData = body;   formState = res.ok ? 'success' : 'error';    if (res.ok) {     const submitSuccessEvent = new CustomEvent('submit:success', {       detail: {         res,         body       }     });      if (formRef.current) {       formRef.current.dispatchEvent(submitSuccessEvent);        if (submitSuccessEvent.defaultPrevented) {         return;       }       /* TODO: option to turn this on/off? */         if (props.resetFormOnSubmit !== false) {         formRef.current.reset();       }     }     /* TODO: client side route event first that can be preventDefaulted */       if (props.successUrl) {       if (formRef.current) {         const event = new CustomEvent('route', {           detail: {             url: props.successUrl           }         });         formRef.current.dispatchEvent(event);          if (!event.defaultPrevented) {           location.href = props.successUrl;         }       } else {         location.href = props.successUrl;       }     }   } }, err => {   const submitErrorEvent = new CustomEvent('submit:error', {     detail: {       error: err     }   });    if (formRef.current) {     formRef.current.dispatchEvent(submitErrorEvent);      if (submitErrorEvent.defaultPrevented) {       return;     }   }    responseData = err;   formState = 'error'; }); } }             return (   <>   <form  validate={props.validate}  ref={formRef}  action={!props.sendWithJs && props.action}  method={props.method}  name={props.name}  onSubmit={(event) => onSubmit(event) }  {...(props.attributes)}>{props.builderBlock && props.builderBlock.children ? (   <>{props.builderBlock?.children?.map((block, index) => (   <BuilderBlockComponent  key={block.id}  block={block}  index={index}  /> ))}</> ) : null}{submissionState() === 'error' ? (   <BuilderBlocks  dataPath=\\"errorMessage\\"  blocks={props.errorMessage!}  /> ) : null}{submissionState() === 'sending' ? (   <BuilderBlocks  dataPath=\\"sendingMessage\\"  blocks={props.sendingMessage!}  /> ) : null}{submissionState() === 'error' && responseData ? (   <pre className=\\"builder-form-error-text pre\\">{JSON.stringify(responseData, null, 2)}</pre> ) : null}{submissionState() === 'success' ? (   <BuilderBlocks  dataPath=\\"successMessage\\"  blocks={props.successMessage!}  /> ) : null}</form>   <style jsx>{\`.pre {   padding: 10px;   color: red;   text-align: center; }\`}</style>     </> ); }       export default FormComponent;
+      |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         ^
+  137 |
+  138 |
+  139 |"
 `;
 
-exports[`React - stateType: variables > jsx > Typescript Test > Image 1`] = `
-"'function' is not allowed as a variable declaration name. (36:7)
-  34 | const scrollListener= null
-  35 | const imageLoaded= false
-> 36 | const function setLoaded() {
-     |       ^
-  37 | imageLoaded = true;
-  38 | }
-  39 | const function useLazyLoading() {"
+exports[`React - stateType: variables > jsx > Typescript Test > Image 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useRef, useEffect } from \\"react\\";
+
+// TODO: AMP Support?
+export interface ImageProps {
+  _class?: string;
+  image: string;
+  sizes?: string;
+  lazy?: boolean;
+  height?: number;
+  width?: number;
+  altText?: string;
+  backgroundSize?: string;
+  backgroundPosition?: string; // TODO: Support generating Builder.io and or Shopify \`srcset\`s when needed
+
+  srcset?: string; // TODO: Implement support for custom aspect ratios
+
+  aspectRatio?: number; // TODO: This might not work as expected in terms of positioning
+
+  children?: any;
+}
+
+function Image(props: ImageProps) {
+  const pictureRef = useRef<HTMLElement>(null);
+  const scrollListener = null;
+  const imageLoaded = false;
+  const setLoaded = function setLoaded() {
+    imageLoaded = true;
+  };
+  const useLazyLoading = function useLazyLoading() {
+    // TODO: Add more checks here, like testing for real web browsers
+    return !!props.lazy && isBrowser();
+  };
+  const isBrowser = (isBrowser = function isBrowser() {
+    return (
+      typeof window !== \\"undefined\\" && window.navigator.product != \\"ReactNative\\"
+    );
+  });
+  const load = false;
+
+  useEffect(() => {
+    if (useLazyLoading()) {
+      // throttled scroll capture listener
+      const listener = () => {
+        if (pictureRef.current) {
+          const rect = pictureRef.current.getBoundingClientRect();
+          const buffer = window.innerHeight / 2;
+
+          if (rect.top < window.innerHeight + buffer) {
+            load = true;
+            scrollListener = null;
+            window.removeEventListener(\\"scroll\\", listener);
+          }
+        }
+      };
+
+      scrollListener = listener;
+      window.addEventListener(\\"scroll\\", listener, {
+        capture: true,
+        passive: true,
+      });
+      listener();
+    }
+  }, []);
+
+  useEffect(() => {
+    return () => {
+      if (scrollListener) {
+        window.removeEventListener(\\"scroll\\", scrollListener);
+      }
+    };
+  }, []);
+
+  return (
+    <>
+      <div>
+        <picture ref={pictureRef}>
+          {!useLazyLoading() || load ? (
+            <img
+              alt={props.altText}
+              aria-role={props.altText ? \\"presentation\\" : undefined}
+              className={
+                \\"builder-image\\" +
+                (props._class ? \\" \\" + props._class : \\"\\") +
+                \\" img\\"
+              }
+              src={props.image}
+              onLoad={(event) => setLoaded()}
+              srcset={props.srcset}
+              sizes={props.sizes}
+            />
+          ) : null}
+          <source srcset={props.srcset} />
+        </picture>
+        {props.children}
+      </div>
+      <style jsx>{\`
+        .img {
+          opacity: 1;
+          transition: opacity 0.2s ease-in-out;
+          object-fit: cover;
+          object-position: center;
+        }
+      \`}</style>
+    </>
+  );
+}
+
+export default Image;
+"
 `;
 
 exports[`React - stateType: variables > jsx > Typescript Test > Image State 1`] = `
@@ -3310,14 +4399,25 @@ export default FormInputComponent;
 `;
 
 exports[`React - stateType: variables > jsx > Typescript Test > InputParent 1`] = `
-"'function' is not allowed as a variable declaration name. (15:9)
-  13 |   function Stepper(props:any) {
-  14 |
-> 15 |   const function handleChange(value: string) {
-     |         ^
-  16 | console.log(value);
-  17 | }
-  18 |"
+"import * as React from \\"react\\";
+import FormInputComponent from \\"./input.raw\\";
+
+function Stepper(props: any) {
+  const handleChange = function handleChange(value: string) {
+    console.log(value);
+  };
+
+  return (
+    <FormInputComponent
+      name=\\"kingzez\\"
+      type=\\"text\\"
+      onChange={(value) => handleChange(value)}
+    />
+  );
+}
+
+export default Stepper;
+"
 `;
 
 exports[`React - stateType: variables > jsx > Typescript Test > NestedStore 1`] = `
@@ -3522,47 +4622,155 @@ export default SlotCode;
 `;
 
 exports[`React - stateType: variables > jsx > Typescript Test > Stamped.io 1`] = `
-"'function' is not allowed as a variable declaration name. (22:7)
-  20 | const name= 'test'
-  21 | const showReviewPrompt= false
-> 22 | const function kebabCaseValue() {
-     |       ^
-  23 | return kebabCase('testThat');
-  24 | }
-  25 | const function snakeCaseValue() {"
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+
+type SmileReviewsProps = {
+  productId: string;
+  apiKey: string;
+};
+import { kebabCase, snakeCase } from \\"lodash\\";
+
+function SmileReviews(props: SmileReviewsProps) {
+  const reviews = [];
+  const name = \\"test\\";
+  const showReviewPrompt = false;
+  const kebabCaseValue = function kebabCaseValue() {
+    return kebabCase(\\"testThat\\");
+  };
+  const snakeCaseValue = function snakeCaseValue() {
+    return snakeCase(\\"testThis\\");
+  };
+
+  useEffect(() => {
+    fetch(
+      \`https://stamped.io/api/widget/reviews?storeUrl=builder-io.myshopify.com&apiKey=\${
+        props.apiKey || \\"pubkey-8bbDq7W6w4sB3OWeM1HUy2s47702hM\\"
+      }&productId=\${props.productId || \\"2410511106127\\"}\`
+    )
+      .then((res) => res.json())
+      .then((data) => {
+        reviews = data.data;
+      });
+  }, []);
+
+  return (
+    <>
+      <div data-user={name}>
+        <button onClick={(event) => (showReviewPrompt = true)}>
+          Write a review
+        </button>
+        {showReviewPrompt || \\"asdf\\" ? (
+          <>
+            <input placeholder=\\"Email\\" />
+            <input placeholder=\\"Title\\" className=\\"input\\" />
+            <textarea
+              placeholder=\\"How was your experience?\\"
+              className=\\"textarea\\"
+            />
+            <button
+              className=\\"button\\"
+              onClick={(ev) => {
+                ev.preventDefault();
+                showReviewPrompt = false;
+              }}
+            >
+              Submit
+            </button>
+          </>
+        ) : null}
+        {reviews?.map((review, index) => (
+          <div className=\\"review\\" key={review.id}>
+            <img className=\\"img\\" src={review.avatar} />
+            <div className={showReviewPrompt ? \\"bg-primary\\" : \\"bg-secondary\\"}>
+              <div>N: {index}</div>
+              <div>{review.author}</div>
+              <div>{review.reviewMessage}</div>
+            </div>
+          </div>
+        ))}
+      </div>
+      <style jsx>{\`
+        .input {
+          display: block;
+        }
+        .textarea {
+          display: block;
+        }
+        .button {
+          display: block;
+        }
+        .review {
+          margin: 10px;
+          padding: 10px;
+          background: white;
+          display: flex;
+          border-radius: 5px;
+          box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+          -webkit-font-smoothing: antialiased;
+        }
+        .img {
+          height: 30px;
+          width: 30px;
+          margin-right: 10px;
+        }
+      \`}</style>
+    </>
+  );
+}
+
+export default SmileReviews;
+"
 `;
 
 exports[`React - stateType: variables > jsx > Typescript Test > StoreComment 1`] = `
-"'function' is not allowed as a variable declaration name. (17:7)
-  15 |
-  16 |   const foo= true
-> 17 | const function bar() {}
-     |       ^
-  18 |
-  19 |
-  20 |"
+"\\"use client\\";
+import * as React from \\"react\\";
+
+function StringLiteralStore(props: any) {
+  const foo = true;
+  const bar = function bar() {};
+
+  return <>{foo}</>;
+}
+
+export default StringLiteralStore;
+"
 `;
 
 exports[`React - stateType: variables > jsx > Typescript Test > StoreShadowVars 1`] = `
-"'function' is not allowed as a variable declaration name. (17:7)
-  15 |
-  16 |   const errors= {}
-> 17 | const function foo(errors) {
-     |       ^
-  18 | return errors;
-  19 | }
-  20 |"
+"\\"use client\\";
+import * as React from \\"react\\";
+
+function MyComponent(props: any) {
+  const errors = {};
+  const foo = function foo(errors) {
+    return errors;
+  };
+
+  return <>{foo(errors)}</>;
+}
+
+export default MyComponent;
+"
 `;
 
 exports[`React - stateType: variables > jsx > Typescript Test > StoreWithState 1`] = `
-"'function' is not allowed as a variable declaration name. (17:7)
-  15 |
-  16 |   const foo= false
-> 17 | const function bar() {
-     |       ^
-  18 | return foo;
-  19 | }
-  20 |"
+"\\"use client\\";
+import * as React from \\"react\\";
+
+function MyComponent(props: any) {
+  const foo = false;
+  const bar = function bar() {
+    return foo;
+  };
+
+  return <>{bar()}</>;
+}
+
+export default MyComponent;
+"
 `;
 
 exports[`React - stateType: variables > jsx > Typescript Test > Submit 1`] = `
@@ -3651,14 +4859,41 @@ export default Textarea;
 `;
 
 exports[`React - stateType: variables > jsx > Typescript Test > UseValueAndFnFromStore 1`] = `
-"'function' is not allowed as a variable declaration name. (25:7)
-  23 |   const _id= 'abc'
-  24 | const _active= false
-> 25 | const function _do(id?: string) {
-     |       ^
-  26 | _active = !!id;
-  27 |
-  28 | if (props.onChange) {"
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+
+type MyProps = {
+  onChange?: (active: boolean) => void;
+};
+type MyStore = {
+  _id?: string;
+  _active?: boolean;
+  _do?: (id?: string) => void;
+};
+
+function UseValueAndFnFromStore(props: MyProps) {
+  const _id = \\"abc\\";
+  const _active = false;
+  const _do = function _do(id?: string) {
+    _active = !!id;
+
+    if (props.onChange) {
+      props.onChange(_active);
+    }
+  };
+
+  useEffect(() => {
+    if (_do) {
+      _do(_id);
+    }
+  });
+
+  return <div>Test</div>;
+}
+
+export default UseValueAndFnFromStore;
+"
 `;
 
 exports[`React - stateType: variables > jsx > Typescript Test > Video 1`] = `
@@ -3720,14 +4955,23 @@ export default Video;
 `;
 
 exports[`React - stateType: variables > jsx > Typescript Test > arrowFunctionInUseStore 1`] = `
-"'function' is not allowed as a variable declaration name. (17:7)
-  15 |
-  16 |   const name= 'steve'
-> 17 | const function setName(value) {
-     |       ^
-  18 | name = value;
-  19 | }
-  20 | const function updateNameWithArrowFn(value) {"
+"\\"use client\\";
+import * as React from \\"react\\";
+
+function MyComponent(props: any) {
+  const name = \\"steve\\";
+  const setName = function setName(value) {
+    name = value;
+  };
+  const updateNameWithArrowFn = function updateNameWithArrowFn(value) {
+    name = value;
+  };
+
+  return <div>Hello {name}</div>;
+}
+
+export default MyComponent;
+"
 `;
 
 exports[`React - stateType: variables > jsx > Typescript Test > basicForFragment 1`] = `
@@ -3765,14 +5009,14 @@ export default BasicForFragment;
 `;
 
 exports[`React - stateType: variables > jsx > Typescript Test > basicForNoTagReference 1`] = `
-"'function' is not allowed as a variable declaration name. (19:7)
-  17 | const TagName= 'div'
-  18 | const tag= 'span'
-> 19 | const function TagNameGetter() {
-     |       ^
-  20 | return 'span';
-  21 | }
-  22 |"
+"Identifier expected. (36:17)
+  34 | return (
+  35 |
+> 36 |   <TagNameGetter()>
+     |                 ^
+  37 |   Hello <tag>{name}</tag>{props.actions?.map((action) => (
+  38 |   <TagName><action.icon  /><span>{action.text}</span></TagName>
+  39 | ))}</TagNameGetter()>"
 `;
 
 exports[`React - stateType: variables > jsx > Typescript Test > basicForwardRef 1`] = `
@@ -4405,25 +5649,64 @@ export default MyBasicComponent;
 `;
 
 exports[`React - stateType: variables > jsx > Typescript Test > getterState 1`] = `
-"'function' is not allowed as a variable declaration name. (17:9)
-  15 |   function Button(props:ButtonProps) {
-  16 |
-> 17 |   const function foo2() {
-     |         ^
-  18 | return props.foo + 'foo';
-  19 | }
-  20 | const function bar() {"
+"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[`React - stateType: variables > jsx > Typescript Test > import types 1`] = `
-"'function' is not allowed as a variable declaration name. (20:9)
-  18 |   function RenderContent(props:RenderContentProps) {
-  19 |
-> 20 |   const function getRenderContentProps(block, index) {
-     |         ^
-  21 | return {
-  22 | block: block,
-  23 | index: index"
+"import * as React from \\"react\\";
+
+type RenderContentProps = {
+  options?: GetContentOptions;
+  content: BuilderContent;
+  renderContentProps: RenderBlockProps;
+};
+import { BuilderContent, GetContentOptions } from \\"@builder.io/sdk\\";
+import RenderBlock, { RenderBlockProps } from \\"./builder-render-block.raw\\";
+
+function RenderContent(props: RenderContentProps) {
+  const getRenderContentProps = function getRenderContentProps(block, index) {
+    return {
+      block: block,
+      index: index,
+    };
+  };
+
+  return (
+    <RenderBlock
+      {...getRenderContentProps(props.renderContentProps.block, 0)}
+    />
+  );
+}
+
+export default RenderContent;
+"
 `;
 
 exports[`React - stateType: variables > jsx > Typescript Test > layerName 1`] = `
@@ -4648,14 +5931,42 @@ export default MyNormalizedLayerNamesComponent;
 `;
 
 exports[`React - stateType: variables > jsx > Typescript Test > onEvent 1`] = `
-"'function' is not allowed as a variable declaration name. (17:7)
-  15 |
-  16 |   const elem = useRef<HTMLDivElement>(null);
-> 17 | const function foo(event) {
-     |       ^
-  18 | console.log('test2');
-  19 | }
-  20 | const function elem_onInitEditingBldr(event) {"
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useRef, useEffect } from \\"react\\";
+
+function Embed(props: any) {
+  const elem = useRef<HTMLDivElement>(null);
+  const foo = function foo(event) {
+    console.log(\\"test2\\");
+  };
+  const elem_onInitEditingBldr = function elem_onInitEditingBldr(event) {
+    console.log(\\"test\\");
+    foo(event);
+  };
+
+  useEffect(() => {
+    elem.current?.addEventListener(\\"initEditingBldr\\", elem_onInitEditingBldr);
+    return () =>
+      elem.current?.removeEventListener(
+        \\"initEditingBldr\\",
+        elem_onInitEditingBldr
+      );
+  }, []);
+
+  useEffect(() => {
+    elem.current.dispatchEvent(new CustomEvent(\\"initEditingBldr\\"));
+  }, []);
+
+  return (
+    <div className=\\"builder-embed\\" ref={elem}>
+      <div>Test</div>
+    </div>
+  );
+}
+
+export default Embed;
+"
 `;
 
 exports[`React - stateType: variables > jsx > Typescript Test > onInit & onMount 1`] = `
@@ -4936,13 +6247,13 @@ import * as React from \\"react\\";
 import { useEffect } from \\"react\\";
 
 function OnUpdate(props: any) {
-  const foo = function foo(params) {};
-  const bar = function bar() {};
-  const zoo = function zoo() {
+  const foo = (foo = function foo(params) {});
+  const bar = (bar = function bar() {});
+  const zoo = (zoo = function zoo() {
     const params = {
       cb: bar,
     };
-  };
+  });
 
   useEffect(() => {
     foo({
@@ -4958,14 +6269,14 @@ export default OnUpdate;
 `;
 
 exports[`React - stateType: variables > jsx > Typescript Test > renderBlock 1`] = `
-"'function' is not allowed as a variable declaration name. (37:10)
-  35 |    function RenderBlock(props:RenderBlockProps) {
-  36 |
-> 37 |    const function component() {
-     |          ^
-  38 | const componentName = getProcessedBlock({
-  39 |  block: props.block,
-  40 |  state: props.context.state,"
+"Identifier expected. (219:8)
+  217 |    {shouldWrap() ? (
+  218 |    <>{isEmptyHtmlElement(tag()) ? (
+> 219 |    <tag()  {...(attributes())}  {...(actions())}  />
+      |        ^
+  220 |  ) : null}
+  221 | {!isEmptyHtmlElement(tag()) && repeatItemData() ? (
+  222 |    <>{repeatItemData()?.map((data, index) => ("
 `;
 
 exports[`React - stateType: variables > jsx > Typescript Test > renderContentExample 1`] = `
@@ -5125,14 +6436,24 @@ export default MyComponent;
 `;
 
 exports[`React - stateType: variables > jsx > Typescript Test > setState 1`] = `
-"'function' is not allowed as a variable declaration name. (17:7)
-  15 |
-  16 |   const n= ['123']
-> 17 | const function someFn() {
-     |       ^
-  18 | n[0] = '123';
-  19 | }
-  20 |"
+"\\"use client\\";
+import * as React from \\"react\\";
+
+function SetState(props: any) {
+  const n = [\\"123\\"];
+  const someFn = function someFn() {
+    n[0] = \\"123\\";
+  };
+
+  return (
+    <div>
+      <button onClick={(event) => someFn()}>Click me</button>
+    </div>
+  );
+}
+
+export default SetState;
+"
 `;
 
 exports[`React - stateType: variables > jsx > Typescript Test > showExpressions 1`] = `
@@ -5497,14 +6818,33 @@ export default TypeExternalStore;
 `;
 
 exports[`React - stateType: variables > jsx > Typescript Test > typeGetterStore 1`] = `
-"'function' is not allowed as a variable declaration name. (21:7)
-  19 |
-  20 |   const name= 'test'
-> 21 | const function getName() {
-     |       ^
-  22 | if (name === 'a') {
-  23 | return 'b';
-  24 | }"
+"\\"use client\\";
+import * as React from \\"react\\";
+
+type GetterStore = {
+  getName: () => string;
+  name: string;
+  get test(): string;
+};
+
+function TypeGetterStore(props: any) {
+  const name = \\"test\\";
+  const getName = function getName() {
+    if (name === \\"a\\") {
+      return \\"b\\";
+    }
+
+    return name;
+  };
+  const test = function test() {
+    return \\"test\\";
+  };
+
+  return <div>Hello {name}! </div>;
+}
+
+export default TypeGetterStore;
+"
 `;
 
 exports[`React - stateType: variables > jsx > Typescript Test > use-style 1`] = `
@@ -5582,14 +6922,32 @@ export default MyComponent;
 `;
 
 exports[`React - stateType: variables > jsx > Typescript Test > useTarget 1`] = `
-"'function' is not allowed as a variable declaration name. (16:9)
-  14 |   function UseTargetComponent(props:any) {
-  15 |
-> 16 |   const function name() {
-     |         ^
-  17 | const prefix = 123;
-  18 | return prefix + 'foo';
-  19 | }"
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+
+function UseTargetComponent(props: any) {
+  const name = function name() {
+    const prefix = 123;
+    return prefix + \\"foo\\";
+  };
+  const lastName = \\"bar\\";
+  const foo = \\"bar\\";
+
+  useEffect(() => {
+    console.log(foo);
+    foo = \\"bar\\";
+    console.log(\\"react\\");
+    lastName = \\"baz\\";
+    console.log(foo);
+    foo = \\"baz\\";
+  }, []);
+
+  return <div>{name()}</div>;
+}
+
+export default UseTargetComponent;
+"
 `;
 
 exports[`React - stateType: variables > jsx > Typescript Test > webComponent 1`] = `
@@ -5770,9 +7128,9 @@ exports[`React - stateType: variables > svelte > Javascript Test > eventHandlers
 import * as React from \\"react\\";
 
 function MyComponent(props) {
-  const log = function log(msg = \\"hello\\") {
+  const log = (log = function log(msg = \\"hello\\") {
     console.log(msg);
-  };
+  });
 
   return (
     <div>
@@ -5807,9 +7165,9 @@ import * as React from \\"react\\";
 
 function MyComponent(props) {
   const show = true;
-  const toggle = function toggle() {
+  const toggle = (toggle = function toggle() {
     show = !show;
-  };
+  });
 
   return (
     <>
@@ -5875,14 +7233,25 @@ export default MyComponent;
 `;
 
 exports[`React - stateType: variables > svelte > Javascript Test > reactive 1`] = `
-"'function' is not allowed as a variable declaration name. (17:7)
-  15 |
-  16 |   const name= \\"Steve\\"
-> 17 | const function lowercaseName() {
-     |       ^
-  18 | return name.toLowerCase();
-  19 | }
-  20 |"
+"\\"use client\\";
+import * as React from \\"react\\";
+
+function MyComponent(props) {
+  const name = \\"Steve\\";
+  const lowercaseName = function lowercaseName() {
+    return name.toLowerCase();
+  };
+
+  return (
+    <div>
+      <input value={name} />
+      Lowercase: {lowercaseName()}
+    </div>
+  );
+}
+
+export default MyComponent;
+"
 `;
 
 exports[`React - stateType: variables > svelte > Javascript Test > reactiveWithFn 1`] = `
@@ -5894,9 +7263,9 @@ function MyComponent(props) {
   const a = 2;
   const b = 5;
   const result = null;
-  const calculateResult = function calculateResult(a_, b_) {
+  const calculateResult = (calculateResult = function calculateResult(a_, b_) {
     result = a_ * b_;
-  };
+  });
 
   useEffect(() => {
     calculateResult(a, b);
@@ -6140,9 +7509,9 @@ exports[`React - stateType: variables > svelte > Typescript Test > eventHandlers
 import * as React from \\"react\\";
 
 function MyComponent(props: any) {
-  const log = function log(msg = \\"hello\\") {
+  const log = (log = function log(msg = \\"hello\\") {
     console.log(msg);
-  };
+  });
 
   return (
     <div>
@@ -6177,9 +7546,9 @@ import * as React from \\"react\\";
 
 function MyComponent(props: any) {
   const show = true;
-  const toggle = function toggle() {
+  const toggle = (toggle = function toggle() {
     show = !show;
-  };
+  });
 
   return (
     <>
@@ -6245,14 +7614,25 @@ export default MyComponent;
 `;
 
 exports[`React - stateType: variables > svelte > Typescript Test > reactive 1`] = `
-"'function' is not allowed as a variable declaration name. (17:7)
-  15 |
-  16 |   const name= \\"Steve\\"
-> 17 | const function lowercaseName() {
-     |       ^
-  18 | return name.toLowerCase();
-  19 | }
-  20 |"
+"\\"use client\\";
+import * as React from \\"react\\";
+
+function MyComponent(props: any) {
+  const name = \\"Steve\\";
+  const lowercaseName = function lowercaseName() {
+    return name.toLowerCase();
+  };
+
+  return (
+    <div>
+      <input value={name} />
+      Lowercase: {lowercaseName()}
+    </div>
+  );
+}
+
+export default MyComponent;
+"
 `;
 
 exports[`React - stateType: variables > svelte > Typescript Test > reactiveWithFn 1`] = `
@@ -6264,9 +7644,9 @@ function MyComponent(props: any) {
   const a = 2;
   const b = 5;
   const result = null;
-  const calculateResult = function calculateResult(a_, b_) {
+  const calculateResult = (calculateResult = function calculateResult(a_, b_) {
     result = a_ * b_;
-  };
+  });
 
   useEffect(() => {
     calculateResult(a, b);
diff --git a/packages/core/src/__tests__/__snapshots__/stencil.test.ts.snap b/packages/core/src/__tests__/__snapshots__/stencil.test.ts.snap
index 463e5f9952..6a0ecb0ba3 100644
--- a/packages/core/src/__tests__/__snapshots__/stencil.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/stencil.test.ts.snap
@@ -150,11 +150,7 @@ export class MyBasicRefComponent {
 `;
 
 exports[`Stencil > jsx > Javascript Test > Basic 1`] = `
-"export const DEFAULT_VALUES = {
-  name: \\"Steve\\",
-};
-
-import { Component, h, Fragment, State } from \\"@stencil/core\\";
+"import { Component, h, Fragment, State } from \\"@stencil/core\\";
 
 @Component({
   tag: \\"my-basic-component\\",
@@ -174,13 +170,17 @@ export class MyBasicComponent {
     return \\"bar\\";
   }
 
+  DEFAULT_VALUES = {
+    name: \\"Steve\\",
+  };
+
   componentDidLoad() {}
 
   render() {
     return (
       <div class=\\"test div\\">
         <input
-          value={DEFAULT_VALUES.name || this.name}
+          value={this.DEFAULT_VALUES.name || this.name}
           onChange={(myEvent) => (this.name = myEvent.target.value)}
         />
         Hello! I can run in React, Vue, Solid, or Liquid! &gt;
@@ -564,20 +564,7 @@ export class MyBasicRefAssignmentComponent {
 `;
 
 exports[`Stencil > jsx > Javascript Test > BasicRefPrevious 1`] = `
-"export function usePrevious(value) {
-  // The ref object is a generic container whose current property is mutable ...
-  // ... and can hold any value, similar to an instance property on a class
-  let ref = useRef(null); // Store current value in ref
-
-  onUpdate(() => {
-    ref = value;
-  }, [value]); // Only re-run if value changes
-  // Return previous value (happens before update in useEffect above)
-
-  return ref;
-}
-
-import { Component, h, Fragment, Watch, State } from \\"@stencil/core\\";
+"import { Component, h, Fragment, Watch, State } from \\"@stencil/core\\";
 
 @Component({
   tag: \\"my-previous-component\\",
@@ -2802,11 +2789,7 @@ export class Button {
 `;
 
 exports[`Stencil > jsx > Javascript Test > defaultValsWithTypes 1`] = `
-"const DEFAULT_VALUES = {
-  name: \\"Sami\\",
-};
-
-import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
+"import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
 
 @Component({
   tag: \\"component-with-types\\",
@@ -2814,6 +2797,10 @@ import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
 export class ComponentWithTypes {
   @Prop() name: any;
 
+  DEFAULT_VALUES = {
+    name: \\"Sami\\",
+  };
+
   componentDidLoad() {}
 
   render() {
@@ -2821,7 +2808,7 @@ export class ComponentWithTypes {
       <div>
         {\\" \\"}
         Hello
-        {this.name || DEFAULT_VALUES.name}
+        {this.name || this.DEFAULT_VALUES.name}
       </div>
     );
   }
@@ -3291,11 +3278,7 @@ export class OnInit {
 `;
 
 exports[`Stencil > jsx > Javascript Test > onInit 1`] = `
-"export const defaultValues = {
-  name: \\"PatrickJS\\",
-};
-
-import { Component, h, Fragment, Prop, State } from \\"@stencil/core\\";
+"import { Component, h, Fragment, Prop, State } from \\"@stencil/core\\";
 
 @Component({
   tag: \\"on-init\\",
@@ -3438,13 +3421,7 @@ export class OnUpdateWithDeps {
 `;
 
 exports[`Stencil > jsx > Javascript Test > preserveExportOrLocalStatement 1`] = `
-"const b = 3;
-const foo = () => {};
-export const a = 3;
-export const bar = () => {};
-export function run(value) {}
-
-import { Component, h, Fragment } from \\"@stencil/core\\";
+"import { Component, h, Fragment } from \\"@stencil/core\\";
 
 @Component({
   tag: \\"my-basic-component\\",
@@ -4277,6 +4254,29 @@ export class TypeDependency {
 "
 `;
 
+exports[`Stencil > jsx > Javascript Test > typeExternalProps 1`] = `
+"import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
+
+@Component({
+  tag: \\"type-external-props\\",
+})
+export class TypeExternalProps {
+  @Prop() name: any;
+
+  componentDidLoad() {}
+
+  render() {
+    return (
+      <div>
+        Hello
+        {this.name}!{\\" \\"}
+      </div>
+    );
+  }
+}
+"
+`;
+
 exports[`Stencil > jsx > Javascript Test > typeExternalStore 1`] = `
 "import { Component, h, Fragment, State } from \\"@stencil/core\\";
 
@@ -4564,10 +4564,6 @@ export class MyBasicForShowComponent {
 exports[`Stencil > jsx > Typescript Test > AdvancedRef 1`] = `
 "import { Component, h, Fragment, Watch, Prop, State } from \\"@stencil/core\\";
 
-export interface Props {
-  showInput: boolean;
-}
-
 @Component({
   tag: \\"my-basic-ref-component\\",
 
@@ -4580,7 +4576,7 @@ export interface Props {
 export class MyBasicRefComponent {
   private inputRef!: HTMLInputElement;
   private inputNoArgRef!: HTMLLabelElement;
-  @Prop() showInput: Props[\\"showInput\\"];
+  @Prop() showInput: any;
   @State() name = \\"PatrickJS\\";
 
   onBlur = function onBlur() {
@@ -4644,15 +4640,7 @@ export class MyBasicRefComponent {
 `;
 
 exports[`Stencil > jsx > Typescript Test > Basic 1`] = `
-"export const DEFAULT_VALUES = {
-  name: \\"Steve\\",
-};
-
-import { Component, h, Fragment, State } from \\"@stencil/core\\";
-
-export interface MyBasicComponentProps {
-  id: string;
-}
+"import { Component, h, Fragment, State } from \\"@stencil/core\\";
 
 @Component({
   tag: \\"my-basic-component\\",
@@ -4672,13 +4660,17 @@ export class MyBasicComponent {
     return \\"bar\\";
   }
 
+  DEFAULT_VALUES = {
+    name: \\"Steve\\",
+  };
+
   componentDidLoad() {}
 
   render() {
     return (
       <div class=\\"test div\\">
         <input
-          value={DEFAULT_VALUES.name || this.name}
+          value={this.DEFAULT_VALUES.name || this.name}
           onChange={(myEvent) => (this.name = myEvent.target.value)}
         />
         Hello! I can run in React, Vue, Solid, or Liquid! &gt;
@@ -4763,17 +4755,12 @@ export class MyBasicComponent {
 exports[`Stencil > jsx > Typescript Test > Basic OnMount Update 1`] = `
 "import { Component, h, Fragment, Prop, State } from \\"@stencil/core\\";
 
-export interface Props {
-  hi: string;
-  bye: string;
-}
-
 @Component({
   tag: \\"my-basic-on-mount-update-component\\",
 })
 export class MyBasicOnMountUpdateComponent {
-  @Prop() bye: Props[\\"bye\\"];
-  @Prop() hi: Props[\\"hi\\"];
+  @Prop() bye: any;
+  @Prop() hi: any;
   @State() name = \\"PatrickJS\\";
   @State() names = [\\"Steve\\", \\"PatrickJS\\"];
 
@@ -4867,17 +4854,12 @@ exports[`Stencil > jsx > Typescript Test > BasicBooleanAttribute 1`] = `
 
 import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
 
-type Props = {
-  children: any;
-  type: string;
-};
-
 @Component({
   tag: \\"my-boolean-attribute\\",
 })
 export class MyBooleanAttribute {
-  @Prop() children: Props[\\"children\\"];
-  @Prop() type: Props[\\"type\\"];
+  @Prop() children: any;
+  @Prop() type: any;
 
   componentDidLoad() {}
 
@@ -4978,10 +4960,6 @@ export class MyBasicForComponent {
 exports[`Stencil > jsx > Typescript Test > BasicRef 1`] = `
 "import { Component, h, Fragment, Prop, State } from \\"@stencil/core\\";
 
-export interface Props {
-  showInput: boolean;
-}
-
 @Component({
   tag: \\"my-basic-ref-component\\",
 
@@ -4994,7 +4972,7 @@ export interface Props {
 export class MyBasicRefComponent {
   private inputRef!: HTMLInputElement | null;
   private inputNoArgRef!: HTMLLabelElement | null;
-  @Prop() showInput: Props[\\"showInput\\"];
+  @Prop() showInput: any;
   @State() name = \\"PatrickJS\\";
 
   onBlur = function onBlur() {
@@ -5048,10 +5026,6 @@ export class MyBasicRefComponent {
 exports[`Stencil > jsx > Typescript Test > BasicRefAssignment 1`] = `
 "import { Component, h, Fragment } from \\"@stencil/core\\";
 
-export interface Props {
-  showInput: boolean;
-}
-
 @Component({
   tag: \\"my-basic-ref-assignment-component\\",
 })
@@ -5080,24 +5054,7 @@ export class MyBasicRefAssignmentComponent {
 `;
 
 exports[`Stencil > jsx > Typescript Test > BasicRefPrevious 1`] = `
-"export function usePrevious<T>(value: T) {
-  // The ref object is a generic container whose current property is mutable ...
-  // ... and can hold any value, similar to an instance property on a class
-  let ref = useRef<T>(null); // Store current value in ref
-
-  onUpdate(() => {
-    ref = value;
-  }, [value]); // Only re-run if value changes
-  // Return previous value (happens before update in useEffect above)
-
-  return ref;
-}
-
-import { Component, h, Fragment, Watch, State } from \\"@stencil/core\\";
-
-export interface Props {
-  showInput: boolean;
-}
+"import { Component, h, Fragment, Watch, State } from \\"@stencil/core\\";
 
 @Component({
   tag: \\"my-previous-component\\",
@@ -5139,21 +5096,14 @@ export class MyPreviousComponent {
 exports[`Stencil > jsx > Typescript Test > Button 1`] = `
 "import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
 
-export interface ButtonProps {
-  attributes?: any;
-  text?: string;
-  link?: string;
-  openLinkInNewTab?: boolean;
-}
-
 @Component({
   tag: \\"button\\",
 })
 export class Button {
-  @Prop() link: ButtonProps[\\"link\\"];
-  @Prop() attributes: ButtonProps[\\"attributes\\"];
-  @Prop() openLinkInNewTab: ButtonProps[\\"openLinkInNewTab\\"];
-  @Prop() text: ButtonProps[\\"text\\"];
+  @Prop() link: any;
+  @Prop() attributes: any;
+  @Prop() openLinkInNewTab: any;
+  @Prop() text: any;
 
   componentDidLoad() {}
 
@@ -5184,21 +5134,6 @@ export class Button {
 exports[`Stencil > jsx > Typescript Test > Columns 1`] = `
 "import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
 
-type Column = {
-  content: any; // TODO: Implement this when support for dynamic CSS lands
-
-  width?: number;
-};
-export interface ColumnProps {
-  columns?: Column[]; // TODO: Implement this when support for dynamic CSS lands
-
-  space?: number; // TODO: Implement this when support for dynamic CSS lands
-
-  stackColumnsAt?: \\"tablet\\" | \\"mobile\\" | \\"never\\"; // TODO: Implement this when support for dynamic CSS lands
-
-  reverseColumnsWhenStacked?: boolean;
-}
-
 @Component({
   tag: \\"column\\",
 
@@ -5225,8 +5160,8 @@ export interface ColumnProps {
 \`,
 })
 export class Column {
-  @Prop() columns: ColumnProps[\\"columns\\"];
-  @Prop() space: ColumnProps[\\"space\\"];
+  @Prop() columns: any;
+  @Prop() space: any;
 
   getColumns() {
     return this.columns || [];
@@ -5268,16 +5203,11 @@ exports[`Stencil > jsx > Typescript Test > ContentSlotHtml 1`] = `
 
 import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
 
-type Props = {
-  [key: string]: string | JSX.Element;
-  slotTesting: JSX.Element;
-};
-
 @Component({
   tag: \\"content-slot-code\\",
 })
 export class ContentSlotCode {
-  @Prop() slotTesting: Props[\\"slotTesting\\"];
+  @Prop() slotTesting: any;
 
   componentDidLoad() {}
 
@@ -5303,19 +5233,15 @@ exports[`Stencil > jsx > Typescript Test > ContentSlotJSX 1`] = `
 
 import { Component, h, Fragment, Host, Prop, State } from \\"@stencil/core\\";
 
-type Props = {
-  [key: string]: string | JSX.Element;
-};
-
 @Component({
   tag: \\"content-slot-jsx-code\\",
 })
 export class ContentSlotJsxCode {
-  @Prop() slotContent: Props[\\"slotContent\\"] = undefined;
-  @Prop() children: Props[\\"children\\"];
-  @Prop() slotReference: Props[\\"slotReference\\"] = undefined;
-  @Prop() attributes: Props[\\"attributes\\"];
-  @Prop() content: Props[\\"content\\"] = \\"\\";
+  @Prop() slotContent: any = undefined;
+  @Prop() children: any;
+  @Prop() slotReference: any = undefined;
+  @Prop() attributes: any;
+  @Prop() content: any = \\"\\";
   @State() name = \\"king\\";
   @State() showContent = false;
 
@@ -5360,18 +5286,13 @@ export class ContentSlotJsxCode {
 exports[`Stencil > jsx > Typescript Test > CustomCode 1`] = `
 "import { Component, h, Fragment, Prop, State } from \\"@stencil/core\\";
 
-export interface CustomCodeProps {
-  code: string;
-  replaceNodes?: boolean;
-}
-
 @Component({
   tag: \\"custom-code\\",
 })
 export class CustomCode {
   private elem!: HTMLDivElement;
-  @Prop() replaceNodes: CustomCodeProps[\\"replaceNodes\\"];
-  @Prop() code: CustomCodeProps[\\"code\\"];
+  @Prop() replaceNodes: any;
+  @Prop() code: any;
   @State() scriptsInserted = [];
   @State() scriptsRun = [];
 
@@ -5441,18 +5362,13 @@ export class CustomCode {
 exports[`Stencil > jsx > Typescript Test > Embed 1`] = `
 "import { Component, h, Fragment, Prop, State } from \\"@stencil/core\\";
 
-export interface CustomCodeProps {
-  code: string;
-  replaceNodes?: boolean;
-}
-
 @Component({
   tag: \\"custom-code\\",
 })
 export class CustomCode {
   private elem!: HTMLDivElement;
-  @Prop() replaceNodes: CustomCodeProps[\\"replaceNodes\\"];
-  @Prop() code: CustomCodeProps[\\"code\\"];
+  @Prop() replaceNodes: any;
+  @Prop() code: any;
   @State() scriptsInserted = [];
   @State() scriptsRun = [];
 
@@ -5530,30 +5446,6 @@ import {
 
 import { Component, h, Fragment, Prop, State } from \\"@stencil/core\\";
 
-export interface FormProps {
-  attributes?: any;
-  name?: string;
-  action?: string;
-  validate?: boolean;
-  method?: string;
-  builderBlock?: BuilderElement;
-  sendSubmissionsTo?: string;
-  sendSubmissionsToEmail?: string;
-  sendWithJs?: boolean;
-  contentType?: string;
-  customHeaders?: {
-    [key: string]: string;
-  };
-  successUrl?: string;
-  previewState?: FormState;
-  successMessage?: BuilderElement[];
-  errorMessage?: BuilderElement[];
-  sendingMessage?: BuilderElement[];
-  resetFormOnSubmit?: boolean;
-  errorMessagePath?: string;
-}
-export type FormState = \\"unsubmitted\\" | \\"sending\\" | \\"success\\" | \\"error\\";
-
 @Component({
   tag: \\"form-component\\",
 
@@ -5567,24 +5459,24 @@ export type FormState = \\"unsubmitted\\" | \\"sending\\" | \\"success\\" | \\"e
 })
 export class FormComponent {
   private formRef!: HTMLFormElement;
-  @Prop() previewState: FormProps[\\"previewState\\"];
-  @Prop() sendWithJs: FormProps[\\"sendWithJs\\"];
-  @Prop() sendSubmissionsTo: FormProps[\\"sendSubmissionsTo\\"];
-  @Prop() action: FormProps[\\"action\\"];
-  @Prop() customHeaders: FormProps[\\"customHeaders\\"];
-  @Prop() contentType: FormProps[\\"contentType\\"];
-  @Prop() sendSubmissionsToEmail: FormProps[\\"sendSubmissionsToEmail\\"];
-  @Prop() name: FormProps[\\"name\\"];
-  @Prop() method: FormProps[\\"method\\"];
-  @Prop() errorMessagePath: FormProps[\\"errorMessagePath\\"];
-  @Prop() resetFormOnSubmit: FormProps[\\"resetFormOnSubmit\\"];
-  @Prop() successUrl: FormProps[\\"successUrl\\"];
-  @Prop() validate: FormProps[\\"validate\\"];
-  @Prop() attributes: FormProps[\\"attributes\\"];
-  @Prop() builderBlock: FormProps[\\"builderBlock\\"];
-  @Prop() errorMessage: FormProps[\\"errorMessage\\"];
-  @Prop() sendingMessage: FormProps[\\"sendingMessage\\"];
-  @Prop() successMessage: FormProps[\\"successMessage\\"];
+  @Prop() previewState: any;
+  @Prop() sendWithJs: any;
+  @Prop() sendSubmissionsTo: any;
+  @Prop() action: any;
+  @Prop() customHeaders: any;
+  @Prop() contentType: any;
+  @Prop() sendSubmissionsToEmail: any;
+  @Prop() name: any;
+  @Prop() method: any;
+  @Prop() errorMessagePath: any;
+  @Prop() resetFormOnSubmit: any;
+  @Prop() successUrl: any;
+  @Prop() validate: any;
+  @Prop() attributes: any;
+  @Prop() builderBlock: any;
+  @Prop() errorMessage: any;
+  @Prop() sendingMessage: any;
+  @Prop() successMessage: any;
   @State() formState = \\"unsubmitted\\";
   @State() responseData = null;
   @State() formErrorMessage = \\"\\";
@@ -5870,25 +5762,6 @@ export class FormComponent {
 exports[`Stencil > jsx > Typescript Test > Image 1`] = `
 "import { Component, h, Fragment, Prop, State } from \\"@stencil/core\\";
 
-// TODO: AMP Support?
-export interface ImageProps {
-  _class?: string;
-  image: string;
-  sizes?: string;
-  lazy?: boolean;
-  height?: number;
-  width?: number;
-  altText?: string;
-  backgroundSize?: string;
-  backgroundPosition?: string; // TODO: Support generating Builder.io and or Shopify \`srcset\`s when needed
-
-  srcset?: string; // TODO: Implement support for custom aspect ratios
-
-  aspectRatio?: number; // TODO: This might not work as expected in terms of positioning
-
-  children?: any;
-}
-
 @Component({
   tag: \\"image\\",
 
@@ -5903,13 +5776,13 @@ export interface ImageProps {
 })
 export class Image {
   private pictureRef!: HTMLElement;
-  @Prop() lazy: ImageProps[\\"lazy\\"];
-  @Prop() altText: ImageProps[\\"altText\\"];
-  @Prop() _class: ImageProps[\\"_class\\"];
-  @Prop() image: ImageProps[\\"image\\"];
-  @Prop() srcset: ImageProps[\\"srcset\\"];
-  @Prop() sizes: ImageProps[\\"sizes\\"];
-  @Prop() children: ImageProps[\\"children\\"];
+  @Prop() lazy: any;
+  @Prop() altText: any;
+  @Prop() _class: any;
+  @Prop() image: any;
+  @Prop() srcset: any;
+  @Prop() sizes: any;
+  @Prop() children: any;
   @State() scrollListener = null;
   @State() imageLoaded = false;
   @State() load = false;
@@ -6022,32 +5895,15 @@ exports[`Stencil > jsx > Typescript Test > Img 1`] = `
 
 import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
 
-export interface ImgProps {
-  attributes?: any;
-  imgSrc?: string;
-  altText?: string;
-  backgroundSize?: \\"cover\\" | \\"contain\\";
-  backgroundPosition?:
-    | \\"center\\"
-    | \\"top\\"
-    | \\"left\\"
-    | \\"right\\"
-    | \\"bottom\\"
-    | \\"top left\\"
-    | \\"top right\\"
-    | \\"bottom left\\"
-    | \\"bottom right\\";
-}
-
 @Component({
   tag: \\"img-component\\",
 })
 export class ImgComponent {
-  @Prop() backgroundSize: ImgProps[\\"backgroundSize\\"];
-  @Prop() backgroundPosition: ImgProps[\\"backgroundPosition\\"];
-  @Prop() attributes: ImgProps[\\"attributes\\"];
-  @Prop() imgSrc: ImgProps[\\"imgSrc\\"];
-  @Prop() altText: ImgProps[\\"altText\\"];
+  @Prop() backgroundSize: any;
+  @Prop() backgroundPosition: any;
+  @Prop() attributes: any;
+  @Prop() imgSrc: any;
+  @Prop() altText: any;
 
   componentDidLoad() {}
 
@@ -6074,28 +5930,17 @@ exports[`Stencil > jsx > Typescript Test > Input 1`] = `
 
 import { Component, h, Fragment, Event, Prop } from \\"@stencil/core\\";
 
-export interface FormInputProps {
-  type?: string;
-  attributes?: any;
-  name?: string;
-  value?: string;
-  placeholder?: string;
-  defaultValue?: string;
-  required?: boolean;
-  onChange?: (value: string) => void;
-}
-
 @Component({
   tag: \\"form-input-component\\",
 })
 export class FormInputComponent {
-  @Prop() attributes: FormInputProps[\\"attributes\\"];
-  @Prop() defaultValue: FormInputProps[\\"defaultValue\\"];
-  @Prop() placeholder: FormInputProps[\\"placeholder\\"];
-  @Prop() type: FormInputProps[\\"type\\"];
-  @Prop() name: FormInputProps[\\"name\\"];
-  @Prop() value: FormInputProps[\\"value\\"];
-  @Prop() required: FormInputProps[\\"required\\"];
+  @Prop() attributes: any;
+  @Prop() defaultValue: any;
+  @Prop() placeholder: any;
+  @Prop() type: any;
+  @Prop() name: any;
+  @Prop() value: any;
+  @Prop() required: any;
   @Event() onChange: any;
 
   componentDidLoad() {}
@@ -6154,11 +5999,6 @@ export class Stepper {
 exports[`Stencil > jsx > Typescript Test > NestedStore 1`] = `
 "import { Component, h, Fragment, State } from \\"@stencil/core\\";
 
-type MyStore = {
-  _id?: string;
-  _messageId?: string;
-};
-
 @Component({
   tag: \\"nested-store\\",
 })
@@ -6183,17 +6023,12 @@ export class NestedStore {
 exports[`Stencil > jsx > Typescript Test > RawText 1`] = `
 "import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
 
-export interface RawTextProps {
-  attributes?: any;
-  text?: string; // builderBlock?: any;
-}
-
 @Component({
   tag: \\"raw-text\\",
 })
 export class RawText {
-  @Prop() attributes: RawTextProps[\\"attributes\\"];
-  @Prop() text: RawTextProps[\\"text\\"];
+  @Prop() attributes: any;
+  @Prop() text: any;
 
   componentDidLoad() {}
 
@@ -6212,19 +6047,13 @@ export class RawText {
 exports[`Stencil > jsx > Typescript Test > Section 1`] = `
 "import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
 
-export interface SectionProps {
-  maxWidth?: number;
-  attributes?: any;
-  children?: any;
-}
-
 @Component({
   tag: \\"section-component\\",
 })
 export class SectionComponent {
-  @Prop() attributes: SectionProps[\\"attributes\\"];
-  @Prop() maxWidth: SectionProps[\\"maxWidth\\"];
-  @Prop() children: SectionProps[\\"children\\"];
+  @Prop() attributes: any;
+  @Prop() maxWidth: any;
+  @Prop() children: any;
 
   componentDidLoad() {}
 
@@ -6251,18 +6080,12 @@ export class SectionComponent {
 exports[`Stencil > jsx > Typescript Test > Section 2`] = `
 "import { Component, h, Fragment, Host, Prop, State } from \\"@stencil/core\\";
 
-export interface SectionProps {
-  maxWidth?: number;
-  attributes?: any;
-  children?: any;
-}
-
 @Component({
   tag: \\"section-state-component\\",
 })
 export class SectionStateComponent {
-  @Prop() attributes: SectionProps[\\"attributes\\"];
-  @Prop() children: SectionProps[\\"children\\"];
+  @Prop() attributes: any;
+  @Prop() children: any;
   @State() max = 42;
   @State() items = [42];
 
@@ -6295,26 +6118,15 @@ exports[`Stencil > jsx > Typescript Test > Select 1`] = `
 
 import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
 
-export interface FormSelectProps {
-  options?: {
-    name?: string;
-    value: string;
-  }[];
-  attributes?: any;
-  name?: string;
-  value?: string;
-  defaultValue?: string;
-}
-
 @Component({
   tag: \\"select-component\\",
 })
 export class SelectComponent {
-  @Prop() attributes: FormSelectProps[\\"attributes\\"];
-  @Prop() value: FormSelectProps[\\"value\\"];
-  @Prop() defaultValue: FormSelectProps[\\"defaultValue\\"];
-  @Prop() name: FormSelectProps[\\"name\\"];
-  @Prop() options: FormSelectProps[\\"options\\"];
+  @Prop() attributes: any;
+  @Prop() value: any;
+  @Prop() defaultValue: any;
+  @Prop() name: any;
+  @Prop() options: any;
 
   componentDidLoad() {}
 
@@ -6346,10 +6158,6 @@ export class SelectComponent {
 exports[`Stencil > jsx > Typescript Test > SlotDefault 1`] = `
 "import { Component, h, Fragment } from \\"@stencil/core\\";
 
-type Props = {
-  [key: string]: string;
-};
-
 @Component({
   tag: \\"slot-code\\",
 })
@@ -6374,10 +6182,6 @@ exports[`Stencil > jsx > Typescript Test > SlotHtml 1`] = `
 
 import { Component, h, Fragment } from \\"@stencil/core\\";
 
-type Props = {
-  [key: string]: string;
-};
-
 @Component({
   tag: \\"slot-code\\",
 })
@@ -6402,10 +6206,6 @@ exports[`Stencil > jsx > Typescript Test > SlotJsx 1`] = `
 
 import { Component, h, Fragment } from \\"@stencil/core\\";
 
-type Props = {
-  [key: string]: string;
-};
-
 @Component({
   tag: \\"slot-code\\",
 })
@@ -6426,10 +6226,6 @@ export class SlotCode {
 exports[`Stencil > jsx > Typescript Test > SlotNamed 1`] = `
 "import { Component, h, Fragment } from \\"@stencil/core\\";
 
-type Props = {
-  [key: string]: string;
-};
-
 @Component({
   tag: \\"slot-code\\",
 })
@@ -6455,11 +6251,6 @@ exports[`Stencil > jsx > Typescript Test > Stamped.io 1`] = `
 
 import { Component, h, Fragment, Prop, State } from \\"@stencil/core\\";
 
-type SmileReviewsProps = {
-  productId: string;
-  apiKey: string;
-};
-
 @Component({
   tag: \\"smile-reviews\\",
 
@@ -6490,8 +6281,8 @@ type SmileReviewsProps = {
 \`,
 })
 export class SmileReviews {
-  @Prop() apiKey: SmileReviewsProps[\\"apiKey\\"];
-  @Prop() productId: SmileReviewsProps[\\"productId\\"];
+  @Prop() apiKey: any;
+  @Prop() productId: any;
   @State() reviews = [];
   @State() name = \\"test\\";
   @State() showReviewPrompt = false;
@@ -6627,17 +6418,12 @@ export class MyComponent {
 exports[`Stencil > jsx > Typescript Test > Submit 1`] = `
 "import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
 
-export interface ButtonProps {
-  attributes?: any;
-  text?: string;
-}
-
 @Component({
   tag: \\"submit-button\\",
 })
 export class SubmitButton {
-  @Prop() attributes: ButtonProps[\\"attributes\\"];
-  @Prop() text: ButtonProps[\\"text\\"];
+  @Prop() attributes: any;
+  @Prop() text: any;
 
   componentDidLoad() {}
 
@@ -6657,20 +6443,12 @@ exports[`Stencil > jsx > Typescript Test > Text 1`] = `
 
 import { Component, h, Fragment, Prop, State } from \\"@stencil/core\\";
 
-export interface TextProps {
-  attributes?: any;
-  rtlMode: boolean;
-  text?: string;
-  content?: string;
-  builderBlock?: any;
-}
-
 @Component({
   tag: \\"text\\",
 })
 export class Text {
-  @Prop() text: TextProps[\\"text\\"];
-  @Prop() content: TextProps[\\"content\\"];
+  @Prop() text: any;
+  @Prop() content: any;
   @State() name = \\"Decadef20\\";
 
   componentDidLoad() {}
@@ -6698,23 +6476,15 @@ export class Text {
 exports[`Stencil > jsx > Typescript Test > Textarea 1`] = `
 "import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
 
-export interface TextareaProps {
-  attributes?: any;
-  name?: string;
-  value?: string;
-  defaultValue?: string;
-  placeholder?: string;
-}
-
 @Component({
   tag: \\"textarea\\",
 })
 export class Textarea {
-  @Prop() attributes: TextareaProps[\\"attributes\\"];
-  @Prop() placeholder: TextareaProps[\\"placeholder\\"];
-  @Prop() name: TextareaProps[\\"name\\"];
-  @Prop() value: TextareaProps[\\"value\\"];
-  @Prop() defaultValue: TextareaProps[\\"defaultValue\\"];
+  @Prop() attributes: any;
+  @Prop() placeholder: any;
+  @Prop() name: any;
+  @Prop() value: any;
+  @Prop() defaultValue: any;
 
   componentDidLoad() {}
 
@@ -6736,15 +6506,6 @@ export class Textarea {
 exports[`Stencil > jsx > Typescript Test > UseValueAndFnFromStore 1`] = `
 "import { Component, h, Fragment, Event, Prop, State } from \\"@stencil/core\\";
 
-type MyProps = {
-  onChange?: (active: boolean) => void;
-};
-type MyStore = {
-  _id?: string;
-  _active?: boolean;
-  _do?: (id?: string) => void;
-};
-
 @Component({
   tag: \\"use-value-and-fn-from-store\\",
 })
@@ -6779,45 +6540,19 @@ export class UseValueAndFnFromStore {
 exports[`Stencil > jsx > Typescript Test > Video 1`] = `
 "import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
 
-export interface VideoProps {
-  attributes?: any;
-  video?: string;
-  autoPlay?: boolean;
-  controls?: boolean;
-  muted?: boolean;
-  loop?: boolean;
-  playsInline?: boolean;
-  aspectRatio?: number;
-  width?: number;
-  height?: number;
-  fit?: \\"contain\\" | \\"cover\\" | \\"fill\\";
-  position?:
-    | \\"center\\"
-    | \\"top\\"
-    | \\"left\\"
-    | \\"right\\"
-    | \\"bottom\\"
-    | \\"top left\\"
-    | \\"top right\\"
-    | \\"bottom left\\"
-    | \\"bottom right\\";
-  posterImage?: string;
-  lazyLoad?: boolean;
-}
-
 @Component({
   tag: \\"video\\",
 })
 export class Video {
-  @Prop() attributes: VideoProps[\\"attributes\\"];
-  @Prop() fit: VideoProps[\\"fit\\"];
-  @Prop() position: VideoProps[\\"position\\"];
-  @Prop() video: VideoProps[\\"video\\"];
-  @Prop() posterImage: VideoProps[\\"posterImage\\"];
-  @Prop() autoPlay: VideoProps[\\"autoPlay\\"];
-  @Prop() muted: VideoProps[\\"muted\\"];
-  @Prop() controls: VideoProps[\\"controls\\"];
-  @Prop() loop: VideoProps[\\"loop\\"];
+  @Prop() attributes: any;
+  @Prop() fit: any;
+  @Prop() position: any;
+  @Prop() video: any;
+  @Prop() posterImage: any;
+  @Prop() autoPlay: any;
+  @Prop() muted: any;
+  @Prop() controls: any;
+  @Prop() loop: any;
 
   componentDidLoad() {}
 
@@ -6956,11 +6691,6 @@ export class MyBasicForNoTagRefComponent {
 exports[`Stencil > jsx > Typescript Test > basicForwardRef 1`] = `
 "import { Component, h, Fragment, Prop, State } from \\"@stencil/core\\";
 
-export interface Props {
-  showInput: boolean;
-  inputRef: HTMLInputElement;
-}
-
 @Component({
   tag: \\"my-basic-forward-ref-component\\",
 
@@ -6971,7 +6701,7 @@ export interface Props {
 \`,
 })
 export class MyBasicForwardRefComponent {
-  @Prop() inputRef: Props[\\"inputRef\\"];
+  @Prop() inputRef: any;
   @State() name = \\"PatrickJS\\";
 
   componentDidLoad() {}
@@ -7002,11 +6732,6 @@ exports[`Stencil > jsx > Typescript Test > basicForwardRefMetadata 1`] = `
 
 import { Component, h, Fragment, Prop, State } from \\"@stencil/core\\";
 
-export interface Props {
-  showInput: boolean;
-  inputRef: HTMLInputElement;
-}
-
 @Component({
   tag: \\"my-basic-forward-ref-component\\",
 
@@ -7017,7 +6742,7 @@ export interface Props {
 \`,
 })
 export class MyBasicForwardRefComponent {
-  @Prop() inputRef: Props[\\"inputRef\\"];
+  @Prop() inputRef: any;
   @State() name = \\"PatrickJS\\";
 
   componentDidLoad() {}
@@ -7333,11 +7058,6 @@ exports[`Stencil > jsx > Typescript Test > className 1`] = `
 
 import { Component, h, Fragment, State } from \\"@stencil/core\\";
 
-type Props = {
-  [key: string]: string | JSX.Element;
-  slotTesting: JSX.Element;
-};
-
 @Component({
   tag: \\"class-name-code\\",
 })
@@ -7416,15 +7136,11 @@ import Context2 from \\"@dummy/2\\";
 
 import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
 
-export interface ComponentWithContextProps {
-  content: string;
-}
-
 @Component({
   tag: \\"component-with-context\\",
 })
 export class ComponentWithContext {
-  @Prop() content: ComponentWithContextProps[\\"content\\"];
+  @Prop() content: any;
 
   componentDidLoad() {}
 
@@ -7445,15 +7161,11 @@ import Context2 from \\"@dummy/2\\";
 
 import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
 
-export interface ComponentWithContextProps {
-  content: string;
-}
-
 @Component({
   tag: \\"component-with-context\\",
 })
 export class ComponentWithContext {
-  @Prop() content: ComponentWithContextProps[\\"content\\"];
+  @Prop() content: any;
 
   componentDidLoad() {}
 
@@ -7493,28 +7205,18 @@ export class RenderContent {
 exports[`Stencil > jsx > Typescript Test > defaultProps 1`] = `
 "import { Component, h, Fragment, Event, Prop } from \\"@stencil/core\\";
 
-export interface ButtonProps {
-  attributes?: any;
-  text?: string;
-  buttonText?: string; // no default value
-
-  link?: string;
-  openLinkInNewTab?: boolean;
-  onClick?: () => void;
-}
-
 @Component({
   tag: \\"button\\",
 })
 export class Button {
-  @Prop() link: ButtonProps[\\"link\\"] = \\"https://builder.io/\\";
-  @Prop() attributes: ButtonProps[\\"attributes\\"];
-  @Prop() openLinkInNewTab: ButtonProps[\\"openLinkInNewTab\\"] = false;
-  @Prop() text: ButtonProps[\\"text\\"] = \\"default text\\";
+  @Prop() link: any = \\"https://builder.io/\\";
+  @Prop() attributes: any;
+  @Prop() openLinkInNewTab: any = false;
+  @Prop() text: any = \\"default text\\";
   @Event() onClick: any = () => {
     console.log(\\"hi\\");
   };
-  @Prop() buttonText: ButtonProps[\\"buttonText\\"];
+  @Prop() buttonText: any;
 
   componentDidLoad() {}
 
@@ -7549,22 +7251,14 @@ export class Button {
 exports[`Stencil > jsx > Typescript Test > defaultPropsOutsideComponent 1`] = `
 "import { Component, h, Fragment, Event, Prop } from \\"@stencil/core\\";
 
-export interface ButtonProps {
-  attributes?: any;
-  text?: string;
-  link?: string;
-  openLinkInNewTab?: boolean;
-  onClick: () => void;
-}
-
 @Component({
   tag: \\"button\\",
 })
 export class Button {
-  @Prop() link: ButtonProps[\\"link\\"] = \\"https://builder.io/\\";
-  @Prop() attributes: ButtonProps[\\"attributes\\"];
-  @Prop() openLinkInNewTab: ButtonProps[\\"openLinkInNewTab\\"] = false;
-  @Prop() text: ButtonProps[\\"text\\"] = \\"default text\\";
+  @Prop() link: any = \\"https://builder.io/\\";
+  @Prop() attributes: any;
+  @Prop() openLinkInNewTab: any = false;
+  @Prop() text: any = \\"default text\\";
   @Event() onClick: any = () => {};
 
   componentDidLoad() {}
@@ -7598,21 +7292,17 @@ export class Button {
 `;
 
 exports[`Stencil > jsx > Typescript Test > defaultValsWithTypes 1`] = `
-"const DEFAULT_VALUES: Props = {
-  name: \\"Sami\\",
-};
-
-import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
-
-type Props = {
-  name: string;
-};
+"import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
 
 @Component({
   tag: \\"component-with-types\\",
 })
 export class ComponentWithTypes {
-  @Prop() name: Props[\\"name\\"];
+  @Prop() name: any;
+
+  DEFAULT_VALUES = {
+    name: \\"Sami\\",
+  };
 
   componentDidLoad() {}
 
@@ -7621,7 +7311,7 @@ export class ComponentWithTypes {
       <div>
         {\\" \\"}
         Hello
-        {this.name || DEFAULT_VALUES.name}
+        {this.name || this.DEFAULT_VALUES.name}
       </div>
     );
   }
@@ -7723,10 +7413,6 @@ export class FigmaButton {
 exports[`Stencil > jsx > Typescript Test > functionProps 1`] = `
 "import { Component, h, Fragment } from \\"@stencil/core\\";
 
-export interface MyBasicComponentProps {
-  id: string;
-}
-
 @Component({
   tag: \\"my-basic-component\\",
 })
@@ -7762,15 +7448,11 @@ export class MyBasicComponent {
 exports[`Stencil > jsx > Typescript Test > getterState 1`] = `
 "import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
 
-export interface ButtonProps {
-  foo: string;
-}
-
 @Component({
   tag: \\"button\\",
 })
 export class Button {
-  @Prop() foo: ButtonProps[\\"foo\\"];
+  @Prop() foo: any;
 
   get foo2() {
     return this.foo + \\"foo\\";
@@ -7803,17 +7485,11 @@ import { RenderBlock } from \\"./builder-render-block.raw\\";
 
 import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
 
-type RenderContentProps = {
-  options?: GetContentOptions;
-  content: BuilderContent;
-  renderContentProps: RenderBlockProps;
-};
-
 @Component({
   tag: \\"render-content\\",
 })
 export class RenderContent {
-  @Prop() renderContentProps: RenderContentProps[\\"renderContentProps\\"];
+  @Prop() renderContentProps: any;
 
   getRenderContentProps(block, index) {
     return {
@@ -8003,10 +7679,6 @@ export class NestedStyles {
 exports[`Stencil > jsx > Typescript Test > normalizeLayerNames 1`] = `
 "import { Component, h, Fragment } from \\"@stencil/core\\";
 
-export interface MyNormalizedLayerNamesComponentProps {
-  id: string;
-}
-
 @Component({
   tag: \\"my-normalized-layer-names-component\\",
 
@@ -8110,21 +7782,13 @@ export class OnInit {
 `;
 
 exports[`Stencil > jsx > Typescript Test > onInit 1`] = `
-"export const defaultValues = {
-  name: \\"PatrickJS\\",
-};
-
-import { Component, h, Fragment, Prop, State } from \\"@stencil/core\\";
-
-type Props = {
-  name: string;
-};
+"import { Component, h, Fragment, Prop, State } from \\"@stencil/core\\";
 
 @Component({
   tag: \\"on-init\\",
 })
 export class OnInit {
-  @Prop() name: Props[\\"name\\"];
+  @Prop() name: any;
   @State() name = \\"\\";
 
   componentDidLoad() {}
@@ -8230,15 +7894,11 @@ export class OnUpdate {
 exports[`Stencil > jsx > Typescript Test > onUpdateWithDeps 1`] = `
 "import { Component, h, Fragment, Watch, Prop, State } from \\"@stencil/core\\";
 
-type Props = {
-  size: string;
-};
-
 @Component({
   tag: \\"on-update-with-deps\\",
 })
 export class OnUpdateWithDeps {
-  @Prop() size: Props[\\"size\\"];
+  @Prop() size: any;
   @State() a = \\"a\\";
   @State() b = \\"b\\";
 
@@ -8265,23 +7925,7 @@ export class OnUpdateWithDeps {
 `;
 
 exports[`Stencil > jsx > Typescript Test > preserveExportOrLocalStatement 1`] = `
-"const b = 3;
-const foo = () => {};
-export const a = 3;
-export const bar = () => {};
-export function run<T>(value: T) {}
-
-import { Component, h, Fragment } from \\"@stencil/core\\";
-
-type Types = {
-  s: any[];
-};
-interface IPost {
-  len: number;
-}
-export interface MyBasicComponentProps {
-  id: string;
-}
+"import { Component, h, Fragment } from \\"@stencil/core\\";
 
 @Component({
   tag: \\"my-basic-component\\",
@@ -8299,24 +7943,11 @@ export class MyBasicComponent {
 exports[`Stencil > jsx > Typescript Test > preserveTyping 1`] = `
 "import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
 
-export type A = \\"test\\";
-export interface C {
-  n: \\"test\\";
-}
-type B = \\"test2\\";
-interface D {
-  n: \\"test\\";
-}
-export interface MyBasicComponentProps {
-  name: string;
-  age?: number;
-}
-
 @Component({
   tag: \\"my-basic-component\\",
 })
 export class MyBasicComponent {
-  @Prop() name: MyBasicComponentProps[\\"name\\"];
+  @Prop() name: any;
 
   componentDidLoad() {}
 
@@ -8335,17 +7966,12 @@ export class MyBasicComponent {
 exports[`Stencil > jsx > Typescript Test > propsDestructure 1`] = `
 "import { Component, h, Fragment, Prop, State } from \\"@stencil/core\\";
 
-type Props = {
-  children: any;
-  type: string;
-};
-
 @Component({
   tag: \\"my-basic-component\\",
 })
 export class MyBasicComponent {
-  @Prop() children: Props[\\"children\\"];
-  @Prop() type: Props[\\"type\\"];
+  @Prop() children: any;
+  @Prop() type: any;
   @State() name = \\"Decadef20\\";
 
   componentDidLoad() {}
@@ -8366,11 +7992,6 @@ export class MyBasicComponent {
 exports[`Stencil > jsx > Typescript Test > propsInterface 1`] = `
 "import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
 
-interface Person {
-  name: string;
-  age?: number;
-}
-
 @Component({
   tag: \\"my-basic-component\\",
 })
@@ -8394,16 +8015,11 @@ export class MyBasicComponent {
 exports[`Stencil > jsx > Typescript Test > propsType 1`] = `
 "import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
 
-type Person = {
-  name: string;
-  age?: number;
-};
-
 @Component({
   tag: \\"my-basic-component\\",
 })
 export class MyBasicComponent {
-  @Prop() name: Person[\\"name\\"];
+  @Prop() name: any;
 
   componentDidLoad() {}
 
@@ -8475,17 +8091,12 @@ import type { RepeatData } from \\"./types.js\\";
 
 import { Component, h, Fragment, Host, Prop } from \\"@stencil/core\\";
 
-export type RenderBlockProps = {
-  block: BuilderBlock;
-  context: BuilderContextInterface;
-};
-
 @Component({
   tag: \\"render-block\\",
 })
 export class RenderBlock {
-  @Prop() block: RenderBlockProps[\\"block\\"];
-  @Prop() context: RenderBlockProps[\\"context\\"];
+  @Prop() block: any;
+  @Prop() context: any;
 
   get component() {
     const componentName = getProcessedBlock({
@@ -8724,14 +8335,6 @@ import { RenderBlocks } from \\"@dummy/RenderBlocks.lite.tsx\\";
 
 import { Component, h, Fragment, Watch, Prop } from \\"@stencil/core\\";
 
-type Props = {
-  customComponents: string[];
-  content: {
-    blocks: any[];
-    id: string;
-  };
-};
-
 @Component({
   tag: \\"render-content\\",
 
@@ -8743,8 +8346,8 @@ type Props = {
 \`,
 })
 export class RenderContent {
-  @Prop() customComponents: Props[\\"customComponents\\"];
-  @Prop() content: Props[\\"content\\"];
+  @Prop() customComponents: any;
+  @Prop() content: any;
 
   watch0Fn() {
     dispatchNewContentToVisualEditor(this.content);
@@ -8774,21 +8377,14 @@ export class RenderContent {
 exports[`Stencil > jsx > Typescript Test > rootFragmentMultiNode 1`] = `
 "import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
 
-export interface ButtonProps {
-  attributes?: any;
-  text?: string;
-  link?: string;
-  openLinkInNewTab?: boolean;
-}
-
 @Component({
   tag: \\"button\\",
 })
 export class Button {
-  @Prop() link: ButtonProps[\\"link\\"];
-  @Prop() attributes: ButtonProps[\\"attributes\\"];
-  @Prop() openLinkInNewTab: ButtonProps[\\"openLinkInNewTab\\"];
-  @Prop() text: ButtonProps[\\"text\\"];
+  @Prop() link: any;
+  @Prop() attributes: any;
+  @Prop() openLinkInNewTab: any;
+  @Prop() text: any;
 
   componentDidLoad() {}
 
@@ -8899,15 +8495,6 @@ export class SetState {
 exports[`Stencil > jsx > Typescript Test > signalsOnUpdate 1`] = `
 "import { Component, h, Fragment, Watch, Prop } from \\"@stencil/core\\";
 
-type Props = {
-  id: string;
-  foo: {
-    bar: {
-      baz: number;
-    };
-  };
-};
-
 @Component({
   tag: \\"my-basic-component\\",
 
@@ -8918,8 +8505,8 @@ type Props = {
 \`,
 })
 export class MyBasicComponent {
-  @Prop() id: Props[\\"id\\"];
-  @Prop() foo: Props[\\"foo\\"];
+  @Prop() id: any;
+  @Prop() foo: any;
 
   watch0Fn() {
     console.log(\\"props.id changed\\", this.id);
@@ -9167,16 +8754,11 @@ import type { Foo as Foo2 } from \\"./type-export\\";
 
 import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
 
-export type TypeDependencyProps = {
-  foo: Foo;
-  foo2: Foo2;
-};
-
 @Component({
   tag: \\"type-dependency\\",
 })
 export class TypeDependency {
-  @Prop() foo: TypeDependencyProps[\\"foo\\"];
+  @Prop() foo: any;
 
   componentDidLoad() {}
 
@@ -9187,6 +8769,31 @@ export class TypeDependency {
 "
 `;
 
+exports[`Stencil > jsx > Typescript Test > typeExternalProps 1`] = `
+"import { FooProps } from \\"./foo-props\\";
+
+import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
+
+@Component({
+  tag: \\"type-external-props\\",
+})
+export class TypeExternalProps {
+  @Prop() name: FooProps[\\"name\\"];
+
+  componentDidLoad() {}
+
+  render() {
+    return (
+      <div>
+        Hello
+        {this.name}!{\\" \\"}
+      </div>
+    );
+  }
+}
+"
+`;
+
 exports[`Stencil > jsx > Typescript Test > typeExternalStore 1`] = `
 "import { FooStore } from \\"./foo-store\\";
 
@@ -9215,12 +8822,6 @@ export class TypeExternalStore {
 exports[`Stencil > jsx > Typescript Test > typeGetterStore 1`] = `
 "import { Component, h, Fragment, State } from \\"@stencil/core\\";
 
-type GetterStore = {
-  getName: () => string;
-  name: string;
-  get test(): string;
-};
-
 @Component({
   tag: \\"type-getter-store\\",
 })
diff --git a/packages/core/src/generators/react/helpers/state.ts b/packages/core/src/generators/react/helpers/state.ts
index 71afe1b943..8165378856 100644
--- a/packages/core/src/generators/react/helpers/state.ts
+++ b/packages/core/src/generators/react/helpers/state.ts
@@ -139,12 +139,12 @@ export const getReactVariantStateString = ({
           keyPrefix: 'const',
           valueMapper: (code, type, _, key) => {
             if (key) {
-              const rscPrefix = options.rsc ? `${key} = ` : '';
+              const constPrefix = !code.startsWith('function') ? `${key} = ` : '';
 
               if (type === 'getter')
-                return `${rscPrefix}${getFunctionString(code.replace('get ', ''))}`;
+                return `${constPrefix}${getFunctionString(code.replace('get ', ''))}`;
               if (type === 'function')
-                return code.startsWith('async') ? code : `${rscPrefix}${getFunctionString(code)}`;
+                return code.startsWith('async') ? code : `${constPrefix}${getFunctionString(code)}`;
             }
             return code;
           },

From dcc8d3292f83361b8f6891f368a0065b0862e146 Mon Sep 17 00:00:00 2001
From: Nicolas Merget <nicolas.merget@deutschebahn.com>
Date: Fri, 28 Feb 2025 09:18:02 +0100
Subject: [PATCH 20/20] chore: update snapshots

---
 e2e/e2e-react/src/App.tsx                     |   2 +-
 .../react-state-variables.test.ts.snap        | 256 +++---------------
 2 files changed, 46 insertions(+), 212 deletions(-)

diff --git a/e2e/e2e-react/src/App.tsx b/e2e/e2e-react/src/App.tsx
index ecd93244ec..b9e7a892e6 100644
--- a/e2e/e2e-react/src/App.tsx
+++ b/e2e/e2e-react/src/App.tsx
@@ -1,5 +1,5 @@
 // Mitosis output for not yet include .d.ts, so ignore the types when importing.
-// Trigger nx remote cache: 2
+// Trigger nx remote cache: 3
 // @ts-ignore
 import { E2eApp } from '@builder.io/e2e-app/react';
 
diff --git a/packages/core/src/__tests__/__snapshots__/react-state-variables.test.ts.snap b/packages/core/src/__tests__/__snapshots__/react-state-variables.test.ts.snap
index ca23d6be0e..ac5f4be0f7 100644
--- a/packages/core/src/__tests__/__snapshots__/react-state-variables.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/react-state-variables.test.ts.snap
@@ -1,6 +1,6 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`React - only > jsx > Javascript Test > AdvancedRef 1`] = `
+exports[`React - stateType: variables > jsx > Javascript Test > AdvancedRef 1`] = `
 "\\"use client\\";
 import * as React from \\"react\\";
 import { useRef, useEffect } from \\"react\\";
@@ -59,172 +59,6 @@ export default MyBasicRefComponent;
 "
 `;
 
-exports[`React - only > jsx > Javascript Test > InputParent 1`] = `
-"import * as React from \\"react\\";
-import FormInputComponent from \\"./input.raw\\";
-
-function Stepper(props) {
-  const handleChange = function handleChange(value) {
-    console.log(value);
-  };
-
-  return (
-    <FormInputComponent
-      name=\\"kingzez\\"
-      type=\\"text\\"
-      onChange={(value) => handleChange(value)}
-    />
-  );
-}
-
-export default Stepper;
-"
-`;
-
-exports[`React - only > jsx > Typescript Test > AdvancedRef 1`] = `
-"\\"use client\\";
-import * as React from \\"react\\";
-import { useRef, useEffect } from \\"react\\";
-
-export interface Props {
-  showInput: boolean;
-}
-
-function MyBasicRefComponent(props: Props) {
-  const inputRef = useRef<HTMLInputElement>(null);
-  const inputNoArgRef = useRef<HTMLLabelElement>(null);
-  const name = \\"PatrickJS\\";
-  const onBlur = function onBlur() {
-    // Maintain focus
-    inputRef.current.focus();
-  };
-  const lowerCaseName = function lowerCaseName() {
-    return name.toLowerCase();
-  };
-
-  useEffect(() => {
-    console.log(\\"Received an update\\");
-  }, [inputRef.current, inputNoArgRef.current]);
-
-  return (
-    <>
-      <div>
-        {props.showInput ? (
-          <>
-            <input
-              className=\\"input\\"
-              ref={inputRef}
-              value={name}
-              onBlur={(event) => onBlur()}
-              onChange={(event) => (name = event.target.value)}
-            />
-            <label htmlFor=\\"cars\\" ref={inputNoArgRef}>
-              Choose a car:
-            </label>
-            <select name=\\"cars\\" id=\\"cars\\">
-              <option value=\\"supra\\">GR Supra</option>
-              <option value=\\"86\\">GR 86</option>
-            </select>
-          </>
-        ) : null}
-        Hello
-        {lowerCaseName()}! I can run in React, Qwik, Vue, Solid, or Web
-        Component!
-      </div>
-      <style jsx>{\`
-        .input {
-          color: red;
-        }
-      \`}</style>
-    </>
-  );
-}
-
-export default MyBasicRefComponent;
-"
-`;
-
-exports[`React - only > jsx > Typescript Test > InputParent 1`] = `
-"import * as React from \\"react\\";
-import FormInputComponent from \\"./input.raw\\";
-
-function Stepper(props: any) {
-  const handleChange = function handleChange(value: string) {
-    console.log(value);
-  };
-
-  return (
-    <FormInputComponent
-      name=\\"kingzez\\"
-      type=\\"text\\"
-      onChange={(value) => handleChange(value)}
-    />
-  );
-}
-
-export default Stepper;
-"
-`;
-
-exports[`React - stateType: variables > jsx > Javascript Test > AdvancedRef 1`] = `
-"\\"use client\\";
-import * as React from \\"react\\";
-import { useRef, useEffect } from \\"react\\";
-
-function MyBasicRefComponent(props) {
-  const inputRef = useRef(null);
-  const inputNoArgRef = useRef(null);
-  const name = \\"PatrickJS\\";
-  const onBlur = (onBlur = function onBlur() {
-    // Maintain focus
-    inputRef.current.focus();
-  });
-  const lowerCaseName = (lowerCaseName = function lowerCaseName() {
-    return name.toLowerCase();
-  });
-
-  useEffect(() => {
-    console.log(\\"Received an update\\");
-  }, [inputRef.current, inputNoArgRef.current]);
-
-  return (
-    <>
-      <div>
-        {props.showInput ? (
-          <>
-            <input
-              className=\\"input\\"
-              ref={inputRef}
-              value={name}
-              onBlur={(event) => onBlur()}
-              onChange={(event) => (name = event.target.value)}
-            />
-            <label htmlFor=\\"cars\\" ref={inputNoArgRef}>
-              Choose a car:
-            </label>
-            <select name=\\"cars\\" id=\\"cars\\">
-              <option value=\\"supra\\">GR Supra</option>
-              <option value=\\"86\\">GR 86</option>
-            </select>
-          </>
-        ) : null}
-        Hello
-        {lowerCaseName()}! I can run in React, Qwik, Vue, Solid, or Web
-        Component!
-      </div>
-      <style jsx>{\`
-        .input {
-          color: red;
-        }
-      \`}</style>
-    </>
-  );
-}
-
-export default MyBasicRefComponent;
-"
-`;
-
 exports[`React - stateType: variables > jsx > Javascript Test > Basic 1`] = `
 "\\"use client\\";
 import * as React from \\"react\\";
@@ -271,10 +105,10 @@ import { Injector, MyService, createInjector } from \\"@dummy/injection-js\\";
 
 function MyBasicComponent(props) {
   const name = \\"PatrickJS\\";
-  const onChange = (onChange = function onChange() {
+  const onChange = function onChange() {
     const change = myService.method(\\"change\\");
     console.log(change);
-  });
+  };
 
   const myService = useContext(MyService);
 
@@ -480,13 +314,13 @@ function MyBasicRefComponent(props) {
   const inputRef = useRef(null);
   const inputNoArgRef = useRef(null);
   const name = \\"PatrickJS\\";
-  const onBlur = (onBlur = function onBlur() {
+  const onBlur = function onBlur() {
     // Maintain focus
     inputRef.current?.focus();
-  });
-  const lowerCaseName = (lowerCaseName = function lowerCaseName() {
+  };
+  const lowerCaseName = function lowerCaseName() {
     return name.toLowerCase();
-  });
+  };
 
   return (
     <>
@@ -533,11 +367,11 @@ import { useRef } from \\"react\\";
 
 function MyBasicRefAssignmentComponent(props) {
   const holdValueRef = useRef(\\"Patrick\\");
-  const handlerClick = (handlerClick = function handlerClick(event) {
+  const handlerClick = function handlerClick(event) {
     event.preventDefault();
     console.log(\\"current value\\", holdValueRef.current);
     holdValueRef.current = holdValueRef.current + \\"JS\\";
-  });
+  };
 
   return (
     <div>
@@ -916,11 +750,11 @@ function Image(props) {
     // TODO: Add more checks here, like testing for real web browsers
     return !!props.lazy && isBrowser();
   };
-  const isBrowser = (isBrowser = function isBrowser() {
+  const isBrowser = function isBrowser() {
     return (
       typeof window !== \\"undefined\\" && window.navigator.product != \\"ReactNative\\"
     );
-  });
+  };
   const load = false;
 
   useEffect(() => {
@@ -2691,13 +2525,13 @@ import * as React from \\"react\\";
 import { useEffect } from \\"react\\";
 
 function OnUpdate(props) {
-  const foo = (foo = function foo(params) {});
-  const bar = (bar = function bar() {});
-  const zoo = (zoo = function zoo() {
+  const foo = function foo(params) {};
+  const bar = function bar() {};
+  const zoo = function zoo() {
     const params = {
       cb: bar,
     };
-  });
+  };
 
   useEffect(() => {
     foo({
@@ -3387,13 +3221,13 @@ function MyBasicRefComponent(props: Props) {
   const inputRef = useRef<HTMLInputElement>(null);
   const inputNoArgRef = useRef<HTMLLabelElement>(null);
   const name = \\"PatrickJS\\";
-  const onBlur = (onBlur = function onBlur() {
+  const onBlur = function onBlur() {
     // Maintain focus
     inputRef.current.focus();
-  });
-  const lowerCaseName = (lowerCaseName = function lowerCaseName() {
+  };
+  const lowerCaseName = function lowerCaseName() {
     return name.toLowerCase();
-  });
+  };
 
   useEffect(() => {
     console.log(\\"Received an update\\");
@@ -3487,10 +3321,10 @@ import { Injector, MyService, createInjector } from \\"@dummy/injection-js\\";
 
 function MyBasicComponent(props: any) {
   const name = \\"PatrickJS\\";
-  const onChange = (onChange = function onChange() {
+  const onChange = function onChange() {
     const change = myService.method(\\"change\\");
     console.log(change);
-  });
+  };
 
   const myService = useContext(MyService);
 
@@ -3710,13 +3544,13 @@ function MyBasicRefComponent(props: Props) {
   const inputRef = useRef<HTMLInputElement | null>(null);
   const inputNoArgRef = useRef<HTMLLabelElement | null>(null);
   const name = \\"PatrickJS\\";
-  const onBlur = (onBlur = function onBlur() {
+  const onBlur = function onBlur() {
     // Maintain focus
     inputRef.current?.focus();
-  });
-  const lowerCaseName = (lowerCaseName = function lowerCaseName() {
+  };
+  const lowerCaseName = function lowerCaseName() {
     return name.toLowerCase();
-  });
+  };
 
   return (
     <>
@@ -3767,11 +3601,11 @@ export interface Props {
 
 function MyBasicRefAssignmentComponent(props: Props) {
   const holdValueRef = useRef(\\"Patrick\\");
-  const handlerClick = (handlerClick = function handlerClick(event: Event) {
+  const handlerClick = function handlerClick(event: Event) {
     event.preventDefault();
     console.log(\\"current value\\", holdValueRef.current);
     holdValueRef.current = holdValueRef.current + \\"JS\\";
-  });
+  };
 
   return (
     <div>
@@ -4216,11 +4050,11 @@ function Image(props: ImageProps) {
     // TODO: Add more checks here, like testing for real web browsers
     return !!props.lazy && isBrowser();
   };
-  const isBrowser = (isBrowser = function isBrowser() {
+  const isBrowser = function isBrowser() {
     return (
       typeof window !== \\"undefined\\" && window.navigator.product != \\"ReactNative\\"
     );
-  });
+  };
   const load = false;
 
   useEffect(() => {
@@ -6247,13 +6081,13 @@ import * as React from \\"react\\";
 import { useEffect } from \\"react\\";
 
 function OnUpdate(props: any) {
-  const foo = (foo = function foo(params) {});
-  const bar = (bar = function bar() {});
-  const zoo = (zoo = function zoo() {
+  const foo = function foo(params) {};
+  const bar = function bar() {};
+  const zoo = function zoo() {
     const params = {
       cb: bar,
     };
-  });
+  };
 
   useEffect(() => {
     foo({
@@ -7128,9 +6962,9 @@ exports[`React - stateType: variables > svelte > Javascript Test > eventHandlers
 import * as React from \\"react\\";
 
 function MyComponent(props) {
-  const log = (log = function log(msg = \\"hello\\") {
+  const log = function log(msg = \\"hello\\") {
     console.log(msg);
-  });
+  };
 
   return (
     <div>
@@ -7165,9 +6999,9 @@ import * as React from \\"react\\";
 
 function MyComponent(props) {
   const show = true;
-  const toggle = (toggle = function toggle() {
+  const toggle = function toggle() {
     show = !show;
-  });
+  };
 
   return (
     <>
@@ -7263,9 +7097,9 @@ function MyComponent(props) {
   const a = 2;
   const b = 5;
   const result = null;
-  const calculateResult = (calculateResult = function calculateResult(a_, b_) {
+  const calculateResult = function calculateResult(a_, b_) {
     result = a_ * b_;
-  });
+  };
 
   useEffect(() => {
     calculateResult(a, b);
@@ -7509,9 +7343,9 @@ exports[`React - stateType: variables > svelte > Typescript Test > eventHandlers
 import * as React from \\"react\\";
 
 function MyComponent(props: any) {
-  const log = (log = function log(msg = \\"hello\\") {
+  const log = function log(msg = \\"hello\\") {
     console.log(msg);
-  });
+  };
 
   return (
     <div>
@@ -7546,9 +7380,9 @@ import * as React from \\"react\\";
 
 function MyComponent(props: any) {
   const show = true;
-  const toggle = (toggle = function toggle() {
+  const toggle = function toggle() {
     show = !show;
-  });
+  };
 
   return (
     <>
@@ -7644,9 +7478,9 @@ function MyComponent(props: any) {
   const a = 2;
   const b = 5;
   const result = null;
-  const calculateResult = (calculateResult = function calculateResult(a_, b_) {
+  const calculateResult = function calculateResult(a_, b_) {
     result = a_ * b_;
-  });
+  };
 
   useEffect(() => {
     calculateResult(a, b);