From de597095605af8293ad170488116995d220783f2 Mon Sep 17 00:00:00 2001
From: Corbin Crutchley <git@crutchcorn.dev>
Date: Mon, 8 May 2023 11:17:05 -0700
Subject: [PATCH 1/8] fix: remove incorrect forwardRef from Preact

---
 .../__snapshots__/preact.test.ts.snap         | 168 +++++++++---------
 packages/core/src/generators/react/blocks.ts  |   3 +
 .../core/src/generators/react/generator.ts    |   4 +-
 3 files changed, 85 insertions(+), 90 deletions(-)

diff --git a/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap b/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap
index 1785ca756b..be5515c56c 100644
--- a/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap
@@ -1610,29 +1610,27 @@ exports[`Preact > jsx > Javascript Test > basicForwardRef 1`] = `
 import { h, Fragment } from \\"preact\\";
 import { useState, forwardRef } from \\"preact/hooks\\";
 
-const MyBasicForwardRefComponent = forwardRef(
-  function MyBasicForwardRefComponent(props, inputRef) {
-    const [name, setName] = useState(() => \\"PatrickJS\\");
+function MyBasicForwardRefComponent(props) {
+  const [name, setName] = useState(() => \\"PatrickJS\\");
 
-    return (
-      <Fragment>
-        <div>
-          <input
-            className=\\"input\\"
-            ref={inputRef}
-            value={name}
-            onChange={(event) => setName(event.target.value)}
-          />
-        </div>
-        <style jsx>{\`
-          .input {
-            color: red;
-          }
-        \`}</style>
-      </Fragment>
-    );
-  }
-);
+  return (
+    <Fragment>
+      <div>
+        <input
+          className=\\"input\\"
+          ref={props.inputRef}
+          value={name}
+          onChange={(event) => setName(event.target.value)}
+        />
+      </div>
+      <style jsx>{\`
+        .input {
+          color: red;
+        }
+      \`}</style>
+    </Fragment>
+  );
+}
 
 export default MyBasicForwardRefComponent;
 "
@@ -1643,29 +1641,27 @@ exports[`Preact > jsx > Javascript Test > basicForwardRefMetadata 1`] = `
 import { h, Fragment } from \\"preact\\";
 import { useState, forwardRef } from \\"preact/hooks\\";
 
-const MyBasicForwardRefComponent = forwardRef(
-  function MyBasicForwardRefComponent(props, inputRef) {
-    const [name, setName] = useState(() => \\"PatrickJS\\");
+function MyBasicForwardRefComponent(props) {
+  const [name, setName] = useState(() => \\"PatrickJS\\");
 
-    return (
-      <Fragment>
-        <div>
-          <input
-            className=\\"input\\"
-            ref={inputRef}
-            value={name}
-            onChange={(event) => setName(event.target.value)}
-          />
-        </div>
-        <style jsx>{\`
-          .input {
-            color: red;
-          }
-        \`}</style>
-      </Fragment>
-    );
-  }
-);
+  return (
+    <Fragment>
+      <div>
+        <input
+          className=\\"input\\"
+          ref={props.inputRef}
+          value={name}
+          onChange={(event) => setName(event.target.value)}
+        />
+      </div>
+      <style jsx>{\`
+        .input {
+          color: red;
+        }
+      \`}</style>
+    </Fragment>
+  );
+}
 
 export default MyBasicForwardRefComponent;
 "
@@ -4996,29 +4992,27 @@ export interface Props {
   inputRef: HTMLInputElement;
 }
 
-const MyBasicForwardRefComponent = forwardRef<Props[\\"inputRef\\"]>(
-  function MyBasicForwardRefComponent(props: Props, inputRef) {
-    const [name, setName] = useState(() => \\"PatrickJS\\");
+function MyBasicForwardRefComponent(props: Props) {
+  const [name, setName] = useState(() => \\"PatrickJS\\");
 
-    return (
-      <Fragment>
-        <div>
-          <input
-            className=\\"input\\"
-            ref={inputRef}
-            value={name}
-            onChange={(event) => setName(event.target.value)}
-          />
-        </div>
-        <style jsx>{\`
-          .input {
-            color: red;
-          }
-        \`}</style>
-      </Fragment>
-    );
-  }
-);
+  return (
+    <Fragment>
+      <div>
+        <input
+          className=\\"input\\"
+          ref={props.inputRef}
+          value={name}
+          onChange={(event) => setName(event.target.value)}
+        />
+      </div>
+      <style jsx>{\`
+        .input {
+          color: red;
+        }
+      \`}</style>
+    </Fragment>
+  );
+}
 
 export default MyBasicForwardRefComponent;
 "
@@ -5034,29 +5028,27 @@ export interface Props {
   inputRef: HTMLInputElement;
 }
 
-const MyBasicForwardRefComponent = forwardRef<Props[\\"inputRef\\"]>(
-  function MyBasicForwardRefComponent(props: Props, inputRef) {
-    const [name, setName] = useState(() => \\"PatrickJS\\");
+function MyBasicForwardRefComponent(props: Props) {
+  const [name, setName] = useState(() => \\"PatrickJS\\");
 
-    return (
-      <Fragment>
-        <div>
-          <input
-            className=\\"input\\"
-            ref={inputRef}
-            value={name}
-            onChange={(event) => setName(event.target.value)}
-          />
-        </div>
-        <style jsx>{\`
-          .input {
-            color: red;
-          }
-        \`}</style>
-      </Fragment>
-    );
-  }
-);
+  return (
+    <Fragment>
+      <div>
+        <input
+          className=\\"input\\"
+          ref={props.inputRef}
+          value={name}
+          onChange={(event) => setName(event.target.value)}
+        />
+      </div>
+      <style jsx>{\`
+        .input {
+          color: red;
+        }
+      \`}</style>
+    </Fragment>
+  );
+}
 
 export default MyBasicForwardRefComponent;
 "
diff --git a/packages/core/src/generators/react/blocks.ts b/packages/core/src/generators/react/blocks.ts
index 29cb421f5c..a9592c67cf 100644
--- a/packages/core/src/generators/react/blocks.ts
+++ b/packages/core/src/generators/react/blocks.ts
@@ -139,6 +139,9 @@ const BINDING_MAPPERS: {
     | ((key: string, value: string, options?: ToReactOptions) => [string, string]);
 } = {
   ref(ref, value, options) {
+    if (options?.preact) {
+      return [ref, value];
+    }
     const regexp = /(.+)?props\.(.+)( |\)|;|\()?$/m;
     if (regexp.test(value)) {
       const match = regexp.exec(value);
diff --git a/packages/core/src/generators/react/generator.ts b/packages/core/src/generators/react/generator.ts
index 5feee28f7c..3833f92470 100644
--- a/packages/core/src/generators/react/generator.ts
+++ b/packages/core/src/generators/react/generator.ts
@@ -264,7 +264,7 @@ const _componentToReact = (
   let hasState = checkHasState(json);
 
   const [forwardRef, hasPropRef] = getPropsRef(json);
-  const isForwardRef = Boolean(json.meta.useMetadata?.forwardRef || hasPropRef);
+  const isForwardRef = !options.preact && Boolean(json.meta.useMetadata?.forwardRef || hasPropRef);
   if (isForwardRef) {
     const meta = json.meta.useMetadata?.forwardRef as string;
     options.forwardRef = meta || forwardRef;
@@ -313,7 +313,7 @@ const _componentToReact = (
   if (allRefs.length) {
     reactLibImports.add('useRef');
   }
-  if (hasPropRef) {
+  if (!options.preact && hasPropRef) {
     reactLibImports.add('forwardRef');
   }
   if (

From d67de8d4811baf7189e507b375d0340beb6debe9 Mon Sep 17 00:00:00 2001
From: Corbin Crutchley <git@crutchcorn.dev>
Date: Tue, 9 May 2023 00:35:00 -0700
Subject: [PATCH 2/8] chore: fix preact snapshot

---
 .../core/src/__tests__/__snapshots__/preact.test.ts.snap  | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap b/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap
index be5515c56c..8534356a13 100644
--- a/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap
@@ -1608,7 +1608,7 @@ export default MyComponent;
 exports[`Preact > jsx > Javascript Test > basicForwardRef 1`] = `
 "/** @jsx h */
 import { h, Fragment } from \\"preact\\";
-import { useState, forwardRef } from \\"preact/hooks\\";
+import { useState } from \\"preact/hooks\\";
 
 function MyBasicForwardRefComponent(props) {
   const [name, setName] = useState(() => \\"PatrickJS\\");
@@ -1639,7 +1639,7 @@ export default MyBasicForwardRefComponent;
 exports[`Preact > jsx > Javascript Test > basicForwardRefMetadata 1`] = `
 "/** @jsx h */
 import { h, Fragment } from \\"preact\\";
-import { useState, forwardRef } from \\"preact/hooks\\";
+import { useState } from \\"preact/hooks\\";
 
 function MyBasicForwardRefComponent(props) {
   const [name, setName] = useState(() => \\"PatrickJS\\");
@@ -4985,7 +4985,7 @@ export default MyComponent;
 exports[`Preact > jsx > Typescript Test > basicForwardRef 1`] = `
 "/** @jsx h */
 import { h, Fragment } from \\"preact\\";
-import { useState, forwardRef } from \\"preact/hooks\\";
+import { useState } from \\"preact/hooks\\";
 
 export interface Props {
   showInput: boolean;
@@ -5021,7 +5021,7 @@ export default MyBasicForwardRefComponent;
 exports[`Preact > jsx > Typescript Test > basicForwardRefMetadata 1`] = `
 "/** @jsx h */
 import { h, Fragment } from \\"preact\\";
-import { useState, forwardRef } from \\"preact/hooks\\";
+import { useState } from \\"preact/hooks\\";
 
 export interface Props {
   showInput: boolean;

From 1fdb410d0ac49c0e1fcd756ce202239b94a82825 Mon Sep 17 00:00:00 2001
From: Corbin Crutchley <corbin.crutchley@nwyc.com>
Date: Tue, 9 May 2023 06:17:35 -0700
Subject: [PATCH 3/8] chore: make React only forwardRef during `ref`

---
 .../__snapshots__/alpine.test.ts.snap         |  52 ++-
 .../__snapshots__/angular.import.test.ts.snap |  83 ++++-
 .../__snapshots__/angular.mapper.test.ts.snap |  85 ++++-
 .../__snapshots__/angular.test.ts.snap        | 152 ++++++++-
 .../__tests__/__snapshots__/html.test.ts.snap | 128 ++++++-
 .../__snapshots__/liquid.test.ts.snap         |  24 ++
 .../__tests__/__snapshots__/lit.test.ts.snap  |  91 ++++-
 .../__snapshots__/marko.test.ts.snap          |  64 +++-
 .../__snapshots__/parse-jsx.test.ts.snap      | 195 ++++++++++-
 .../__snapshots__/preact.test.ts.snap         |  73 +++-
 .../__tests__/__snapshots__/qwik.test.ts.snap |  82 ++++-
 .../__snapshots__/react-native.test.ts.snap   |  83 ++++-
 .../__snapshots__/react.test.ts.snap          |  77 ++++-
 .../__tests__/__snapshots__/rsc.test.ts.snap  |  63 +++-
 .../__snapshots__/stencil.test.ts.snap        |  72 +++-
 .../__snapshots__/svelte.test.ts.snap         |  53 ++-
 .../__tests__/__snapshots__/taro.test.ts.snap |  80 ++++-
 .../vue-composition.test.ts.snap              |  65 +++-
 .../__tests__/__snapshots__/vue.test.ts.snap  |  81 ++++-
 .../__snapshots__/webcomponent.test.ts.snap   | 313 +++++++++++++++++-
 .../__tests__/data/basic-forwardRef.raw.tsx   |   4 +-
 .../__tests__/data/dont-forwardRef.raw.tsx    |  25 ++
 packages/core/src/__tests__/test-generator.ts |   2 +
 packages/core/src/generators/react/blocks.ts  |   2 +-
 .../core/src/generators/react/generator.ts    |  10 +-
 packages/core/src/generators/react/refs.ts    |  27 ++
 packages/core/src/helpers/get-props.ts        |   3 +-
 27 files changed, 1907 insertions(+), 82 deletions(-)
 create mode 100644 packages/core/src/__tests__/data/dont-forwardRef.raw.tsx
 create mode 100644 packages/core/src/generators/react/refs.ts

diff --git a/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap b/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap
index 0188f539ee..b454e5ae4a 100644
--- a/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap
@@ -1414,7 +1414,7 @@ exports[`Alpine.js > jsx > Javascript Test > basicForwardRef 1`] = `
 <div x-data=\\"myBasicForwardRefComponent()\\">
   <input
     class=\\"input\\"
-    x-ref=\\"inputRef\\"
+    x-ref=\\"ref\\"
     x-bind:value=\\"name\\"
     x-on:change=\\"name = $event.target.value\\"
   />
@@ -1681,6 +1681,30 @@ exports[`Alpine.js > jsx > Javascript Test > defaultValsWithTypes 1`] = `
 "
 `;
 
+exports[`Alpine.js > jsx > Javascript Test > dontForwardRef 1`] = `
+"<style>
+  .input {
+    color: red;
+  }
+</style>
+<div x-data=\\"dontForwardRefComponent()\\">
+  <input
+    class=\\"input\\"
+    x-ref=\\"inputRef\\"
+    x-bind:value=\\"name\\"
+    x-on:change=\\"name = $event.target.value\\"
+  />
+</div>
+<script>
+  document.addEventListener(\\"alpine:init\\", () => {
+    Alpine.data(\\"dontForwardRefComponent\\", () => ({
+      name: \\"PatrickJS\\",
+    }));
+  });
+</script>
+"
+`;
+
 exports[`Alpine.js > jsx > Javascript Test > expressionState 1`] = `
 "<div x-data=\\"myComponent()\\"><span x-html=\\"refToUse\\"></span></div>
 <script>
@@ -3934,7 +3958,7 @@ exports[`Alpine.js > jsx > Typescript Test > basicForwardRef 1`] = `
 <div x-data=\\"myBasicForwardRefComponent()\\">
   <input
     class=\\"input\\"
-    x-ref=\\"inputRef\\"
+    x-ref=\\"ref\\"
     x-bind:value=\\"name\\"
     x-on:change=\\"name = $event.target.value\\"
   />
@@ -4201,6 +4225,30 @@ exports[`Alpine.js > jsx > Typescript Test > defaultValsWithTypes 1`] = `
 "
 `;
 
+exports[`Alpine.js > jsx > Typescript Test > dontForwardRef 1`] = `
+"<style>
+  .input {
+    color: red;
+  }
+</style>
+<div x-data=\\"dontForwardRefComponent()\\">
+  <input
+    class=\\"input\\"
+    x-ref=\\"inputRef\\"
+    x-bind:value=\\"name\\"
+    x-on:change=\\"name = $event.target.value\\"
+  />
+</div>
+<script>
+  document.addEventListener(\\"alpine:init\\", () => {
+    Alpine.data(\\"dontForwardRefComponent\\", () => ({
+      name: \\"PatrickJS\\",
+    }));
+  });
+</script>
+"
+`;
+
 exports[`Alpine.js > jsx > Typescript Test > expressionState 1`] = `
 "<div x-data=\\"myComponent()\\"><span x-html=\\"refToUse\\"></span></div>
 <script>
diff --git a/packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap b/packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap
index 31fe53a9e0..45adb4f611 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap
@@ -2583,6 +2583,44 @@ export class ComponentWithTypesModule {}
 "
 `;
 
+exports[`Angular with Preserve Imports and File Extensions > jsx > Javascript Test > dontForwardRef 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"dont-forward-ref-component, DontForwardRefComponent\\",
+  template: \`
+    <div>
+      <input
+        class=\\"input\\"
+        [attr.value]=\\"name\\"
+        (input)=\\"name = $event.target.value\\"
+      />
+    </div>
+  \`,
+  styles: [
+    \`
+      .input {
+        color: red;
+      }
+    \`,
+  ],
+})
+export class DontForwardRefComponent {
+  name = \\"PatrickJS\\";
+}
+
+@NgModule({
+  declarations: [DontForwardRefComponent],
+  imports: [CommonModule],
+  exports: [DontForwardRefComponent],
+})
+export class DontForwardRefComponentModule {}
+"
+`;
+
 exports[`Angular with Preserve Imports and File Extensions > jsx > Javascript Test > expressionState 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -6370,7 +6408,7 @@ import { Component } from \\"@angular/core\\";
 
 export interface Props {
   showInput: boolean;
-  inputRef: HTMLInputElement;
+  ref: HTMLInputElement;
 }
 
 @Component({
@@ -6922,6 +6960,49 @@ export class ComponentWithTypesModule {}
 "
 `;
 
+exports[`Angular with Preserve Imports and File Extensions > jsx > Typescript Test > dontForwardRef 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+
+export interface Props {
+  showInput: boolean;
+  inputRef: HTMLInputElement;
+}
+
+@Component({
+  selector: \\"dont-forward-ref-component, DontForwardRefComponent\\",
+  template: \`
+    <div>
+      <input
+        class=\\"input\\"
+        [attr.value]=\\"name\\"
+        (input)=\\"name = $event.target.value\\"
+      />
+    </div>
+  \`,
+  styles: [
+    \`
+      .input {
+        color: red;
+      }
+    \`,
+  ],
+})
+export class DontForwardRefComponent {
+  name = \\"PatrickJS\\";
+}
+
+@NgModule({
+  declarations: [DontForwardRefComponent],
+  imports: [CommonModule],
+  exports: [DontForwardRefComponent],
+})
+export class DontForwardRefComponentModule {}
+"
+`;
+
 exports[`Angular with Preserve Imports and File Extensions > jsx > Typescript Test > expressionState 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 096402099a..d65412297f 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.mapper.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.mapper.test.ts.snap
@@ -2636,6 +2636,45 @@ export class ComponentWithTypesModule {}
 "
 `;
 
+exports[`Angular with Import Mapper Tests > jsx > Javascript Test > dontForwardRef 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"dont-forward-ref-component, DontForwardRefComponent\\",
+  template: \`
+    <div>
+      <input
+        class=\\"input\\"
+        [attr.value]=\\"name\\"
+        (input)=\\"name = $event.target.value\\"
+      />
+    </div>
+  \`,
+  styles: [
+    \`
+      .input {
+        color: red;
+      }
+    \`,
+  ],
+})
+export class DontForwardRefComponent {
+  name = \\"PatrickJS\\";
+}
+
+@NgModule({
+  declarations: [DontForwardRefComponent],
+  imports: [CommonModule],
+  exports: [DontForwardRefComponent],
+  bootstrap: [SomeOtherComponent],
+})
+export class DontForwardRefComponentModule {}
+"
+`;
+
 exports[`Angular with Import Mapper Tests > jsx > Javascript Test > expressionState 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -6501,7 +6540,7 @@ import { Component } from \\"@angular/core\\";
 
 export interface Props {
   showInput: boolean;
-  inputRef: HTMLInputElement;
+  ref: HTMLInputElement;
 }
 
 @Component({
@@ -7067,6 +7106,50 @@ export class ComponentWithTypesModule {}
 "
 `;
 
+exports[`Angular with Import Mapper Tests > jsx > Typescript Test > dontForwardRef 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+
+export interface Props {
+  showInput: boolean;
+  inputRef: HTMLInputElement;
+}
+
+@Component({
+  selector: \\"dont-forward-ref-component, DontForwardRefComponent\\",
+  template: \`
+    <div>
+      <input
+        class=\\"input\\"
+        [attr.value]=\\"name\\"
+        (input)=\\"name = $event.target.value\\"
+      />
+    </div>
+  \`,
+  styles: [
+    \`
+      .input {
+        color: red;
+      }
+    \`,
+  ],
+})
+export class DontForwardRefComponent {
+  name = \\"PatrickJS\\";
+}
+
+@NgModule({
+  declarations: [DontForwardRefComponent],
+  imports: [CommonModule],
+  exports: [DontForwardRefComponent],
+  bootstrap: [SomeOtherComponent],
+})
+export class DontForwardRefComponentModule {}
+"
+`;
+
 exports[`Angular with Import Mapper Tests > jsx > Typescript Test > expressionState 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 8841cf31f4..d438f2f346 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.test.ts.snap
@@ -4789,6 +4789,75 @@ export class ComponentWithTypes {
 "
 `;
 
+exports[`Angular > jsx > Javascript Test > dontForwardRef 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"dont-forward-ref-component, DontForwardRefComponent\\",
+  template: \`
+    <div>
+      <input
+        class=\\"input\\"
+        [attr.value]=\\"name\\"
+        (input)=\\"name = $event.target.value\\"
+      />
+    </div>
+  \`,
+  styles: [
+    \`
+      .input {
+        color: red;
+      }
+    \`,
+  ],
+})
+export class DontForwardRefComponent {
+  name = \\"PatrickJS\\";
+}
+
+@NgModule({
+  declarations: [DontForwardRefComponent],
+  imports: [CommonModule],
+  exports: [DontForwardRefComponent],
+})
+export class DontForwardRefComponentModule {}
+"
+`;
+
+exports[`Angular > jsx > Javascript Test > dontForwardRef 2`] = `
+"import { Component } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+@Component({
+  selector: \\"dont-forward-ref-component, DontForwardRefComponent\\",
+  template: \`
+    <div>
+      <input
+        class=\\"input\\"
+        [attr.value]=\\"name\\"
+        (input)=\\"name = $event.target.value\\"
+      />
+    </div>
+  \`,
+  styles: [
+    \`
+      .input {
+        color: red;
+      }
+    \`,
+  ],
+  standalone: true,
+  imports: [CommonModule],
+})
+export class DontForwardRefComponent {
+  name = \\"PatrickJS\\";
+}
+"
+`;
+
 exports[`Angular > jsx > Javascript Test > expressionState 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -11792,7 +11861,7 @@ import { Component } from \\"@angular/core\\";
 
 export interface Props {
   showInput: boolean;
-  inputRef: HTMLInputElement;
+  ref: HTMLInputElement;
 }
 
 @Component({
@@ -11833,7 +11902,7 @@ import { CommonModule } from \\"@angular/common\\";
 
 export interface Props {
   showInput: boolean;
-  inputRef: HTMLInputElement;
+  ref: HTMLInputElement;
 }
 
 @Component({
@@ -12804,6 +12873,85 @@ export class ComponentWithTypes {
 "
 `;
 
+exports[`Angular > jsx > Typescript Test > dontForwardRef 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+
+export interface Props {
+  showInput: boolean;
+  inputRef: HTMLInputElement;
+}
+
+@Component({
+  selector: \\"dont-forward-ref-component, DontForwardRefComponent\\",
+  template: \`
+    <div>
+      <input
+        class=\\"input\\"
+        [attr.value]=\\"name\\"
+        (input)=\\"name = $event.target.value\\"
+      />
+    </div>
+  \`,
+  styles: [
+    \`
+      .input {
+        color: red;
+      }
+    \`,
+  ],
+})
+export class DontForwardRefComponent {
+  name = \\"PatrickJS\\";
+}
+
+@NgModule({
+  declarations: [DontForwardRefComponent],
+  imports: [CommonModule],
+  exports: [DontForwardRefComponent],
+})
+export class DontForwardRefComponentModule {}
+"
+`;
+
+exports[`Angular > jsx > Typescript Test > dontForwardRef 2`] = `
+"import { Component } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+export interface Props {
+  showInput: boolean;
+  inputRef: HTMLInputElement;
+}
+
+@Component({
+  selector: \\"dont-forward-ref-component, DontForwardRefComponent\\",
+  template: \`
+    <div>
+      <input
+        class=\\"input\\"
+        [attr.value]=\\"name\\"
+        (input)=\\"name = $event.target.value\\"
+      />
+    </div>
+  \`,
+  styles: [
+    \`
+      .input {
+        color: red;
+      }
+    \`,
+  ],
+  standalone: true,
+  imports: [CommonModule],
+})
+export class DontForwardRefComponent {
+  name = \\"PatrickJS\\";
+}
+"
+`;
+
 exports[`Angular > jsx > Typescript Test > expressionState 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 ce50ed6ada..f9f11dd77b 100644
--- a/packages/core/src/__tests__/__snapshots__/html.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/html.test.ts.snap
@@ -3233,7 +3233,7 @@ exports[`Html > jsx > Javascript Test > basicForwardRef 1`] = `
     class=\\"input\\"
     data-el=\\"input-1\\"
     data-dom-state=\\"input-2\\"
-    data-ref=\\"undefined-props.inputRef\\"
+    data-ref=\\"undefined-props.ref\\"
   />
 </div>
 <style>
@@ -3976,6 +3976,68 @@ exports[`Html > jsx > Javascript Test > defaultValsWithTypes 1`] = `
 "
 `;
 
+exports[`Html > jsx > Javascript Test > dontForwardRef 1`] = `
+"<div>
+  <input
+    class=\\"input\\"
+    data-el=\\"input-1\\"
+    data-dom-state=\\"input-2\\"
+    data-ref=\\"undefined-props.inputRef\\"
+  />
+</div>
+<style>
+  .input {
+    color: red;
+  }
+</style>
+<script>
+  (() => {
+    const state = { name: \\"PatrickJS\\" };
+    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='input-1']\\").forEach((el) => {
+        el.value = state.name;
+
+        el.removeEventListener(\\"input\\", onInput1Input);
+        el.addEventListener(\\"input\\", onInput1Input);
+      });
+
+      destroyAnyNodes();
+
+      pendingUpdate = false;
+    }
+
+    // Event handler for 'input' event on input-1
+    function onInput1Input(event) {
+      state.name = event.target.value;
+      update();
+    }
+
+    // Update with initial state on first load
+    update();
+  })();
+</script>
+"
+`;
+
 exports[`Html > jsx > Javascript Test > expressionState 1`] = `
 "<div>
   <template data-el=\\"div-1\\"><!-- state.refToUse --></template>
@@ -9083,7 +9145,7 @@ exports[`Html > jsx > Typescript Test > basicForwardRef 1`] = `
     class=\\"input\\"
     data-el=\\"input-1\\"
     data-dom-state=\\"input-2\\"
-    data-ref=\\"undefined-props.inputRef\\"
+    data-ref=\\"undefined-props.ref\\"
   />
 </div>
 <style>
@@ -9826,6 +9888,68 @@ exports[`Html > jsx > Typescript Test > defaultValsWithTypes 1`] = `
 "
 `;
 
+exports[`Html > jsx > Typescript Test > dontForwardRef 1`] = `
+"<div>
+  <input
+    class=\\"input\\"
+    data-el=\\"input-1\\"
+    data-dom-state=\\"input-2\\"
+    data-ref=\\"undefined-props.inputRef\\"
+  />
+</div>
+<style>
+  .input {
+    color: red;
+  }
+</style>
+<script>
+  (() => {
+    const state = { name: \\"PatrickJS\\" };
+    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='input-1']\\").forEach((el) => {
+        el.value = state.name;
+
+        el.removeEventListener(\\"input\\", onInput1Input);
+        el.addEventListener(\\"input\\", onInput1Input);
+      });
+
+      destroyAnyNodes();
+
+      pendingUpdate = false;
+    }
+
+    // Event handler for 'input' event on input-1
+    function onInput1Input(event) {
+      state.name = event.target.value;
+      update();
+    }
+
+    // Update with initial state on first load
+    update();
+  })();
+</script>
+"
+`;
+
 exports[`Html > jsx > Typescript Test > expressionState 1`] = `
 "<div>
   <template data-el=\\"div-1\\"><!-- state.refToUse --></template>
diff --git a/packages/core/src/__tests__/__snapshots__/liquid.test.ts.snap b/packages/core/src/__tests__/__snapshots__/liquid.test.ts.snap
index 6a445aeb2e..9e18344a02 100644
--- a/packages/core/src/__tests__/__snapshots__/liquid.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/liquid.test.ts.snap
@@ -568,6 +568,18 @@ exports[`Liquid > jsx > Javascript Test > defaultValsWithTypes 1`] = `
 "
 `;
 
+exports[`Liquid > jsx > Javascript Test > dontForwardRef 1`] = `
+"<div>
+  <input class=\\"input\\" value=\\"{{name}}\\" />
+</div>
+<style>
+  .input {
+    color: red;
+  }
+</style>
+"
+`;
+
 exports[`Liquid > jsx > Javascript Test > expressionState 1`] = `
 "<div>{{refToUse}}</div>
 "
@@ -1414,6 +1426,18 @@ exports[`Liquid > jsx > Typescript Test > defaultValsWithTypes 1`] = `
 "
 `;
 
+exports[`Liquid > jsx > Typescript Test > dontForwardRef 1`] = `
+"<div>
+  <input class=\\"input\\" value=\\"{{name}}\\" />
+</div>
+<style>
+  .input {
+    color: red;
+  }
+</style>
+"
+`;
+
 exports[`Liquid > jsx > Typescript Test > expressionState 1`] = `
 "<div>{{refToUse}}</div>
 "
diff --git a/packages/core/src/__tests__/__snapshots__/lit.test.ts.snap b/packages/core/src/__tests__/__snapshots__/lit.test.ts.snap
index abc95ac6f7..f4165e0e22 100644
--- a/packages/core/src/__tests__/__snapshots__/lit.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/lit.test.ts.snap
@@ -2068,10 +2068,10 @@ export default class MyBasicForwardRefComponent extends LitElement {
     return this;
   }
 
-  @query('[ref=\\"props.inputRef\\"]')
-  propsInputRef!: HTMLElement;
+  @query('[ref=\\"props.ref\\"]')
+  propsRef!: HTMLElement;
 
-  @property() inputRef: any;
+  @property() ref: any;
 
   @state() name = \\"PatrickJS\\";
 
@@ -2082,7 +2082,7 @@ export default class MyBasicForwardRefComponent extends LitElement {
 }
 </style>
           <div>
-          <input ref=\\"props.inputRef\\" .value=\${this.name} @input=\${(event) =>
+          <input ref=\\"props.ref\\" .value=\${this.name} @input=\${(event) =>
       (this.name = event.target.value)} />
         </div>
 
@@ -2529,6 +2529,40 @@ export default class ComponentWithTypes extends LitElement {
 "
 `;
 
+exports[`Lit > jsx > Javascript Test > dontForwardRef 1`] = `
+"import { LitElement, html, css } from \\"lit\\";
+import { customElement, property, state, query } from \\"lit/decorators.js\\";
+
+@customElement(\\"dont-forward-ref-component\\")
+export default class DontForwardRefComponent extends LitElement {
+  createRenderRoot() {
+    return this;
+  }
+
+  @query('[ref=\\"props.inputRef\\"]')
+  propsInputRef!: HTMLElement;
+
+  @property() inputRef: any;
+
+  @state() name = \\"PatrickJS\\";
+
+  render() {
+    return html\`
+          <style>.input {
+  color: red;
+}
+</style>
+          <div>
+          <input ref=\\"props.inputRef\\" .value=\${this.name} @input=\${(event) =>
+      (this.name = event.target.value)} />
+        </div>
+
+        \`;
+  }
+}
+"
+`;
+
 exports[`Lit > jsx > Javascript Test > expressionState 1`] = `
 "import { LitElement, html, css } from \\"lit\\";
 import { customElement, property, state, query } from \\"lit/decorators.js\\";
@@ -6244,7 +6278,7 @@ import { customElement, property, state, query } from \\"lit/decorators.js\\";
 
 export interface Props {
   showInput: boolean;
-  inputRef: HTMLInputElement;
+  ref: HTMLInputElement;
 }
 
 @customElement(\\"my-basic-forward-ref-component\\")
@@ -6253,10 +6287,10 @@ export default class MyBasicForwardRefComponent extends LitElement {
     return this;
   }
 
-  @query('[ref=\\"props.inputRef\\"]')
-  propsInputRef!: HTMLElement;
+  @query('[ref=\\"props.ref\\"]')
+  propsRef!: HTMLElement;
 
-  @property() inputRef: any;
+  @property() ref: any;
 
   @state() name = \\"PatrickJS\\";
 
@@ -6267,7 +6301,7 @@ export default class MyBasicForwardRefComponent extends LitElement {
 }
 </style>
           <div>
-          <input ref=\\"props.inputRef\\" .value=\${this.name} @input=\${(event) =>
+          <input ref=\\"props.ref\\" .value=\${this.name} @input=\${(event) =>
       (this.name = event.target.value)} />
         </div>
 
@@ -6756,6 +6790,45 @@ export default class ComponentWithTypes extends LitElement {
 "
 `;
 
+exports[`Lit > jsx > Typescript Test > dontForwardRef 1`] = `
+"import { LitElement, html, css } from \\"lit\\";
+import { customElement, property, state, query } from \\"lit/decorators.js\\";
+
+export interface Props {
+  showInput: boolean;
+  inputRef: HTMLInputElement;
+}
+
+@customElement(\\"dont-forward-ref-component\\")
+export default class DontForwardRefComponent extends LitElement {
+  createRenderRoot() {
+    return this;
+  }
+
+  @query('[ref=\\"props.inputRef\\"]')
+  propsInputRef!: HTMLElement;
+
+  @property() inputRef: any;
+
+  @state() name = \\"PatrickJS\\";
+
+  render() {
+    return html\`
+          <style>.input {
+  color: red;
+}
+</style>
+          <div>
+          <input ref=\\"props.inputRef\\" .value=\${this.name} @input=\${(event) =>
+      (this.name = event.target.value)} />
+        </div>
+
+        \`;
+  }
+}
+"
+`;
+
 exports[`Lit > jsx > Typescript Test > expressionState 1`] = `
 "import { LitElement, html, css } from \\"lit\\";
 import { customElement, property, state, query } from \\"lit/decorators.js\\";
diff --git a/packages/core/src/__tests__/__snapshots__/marko.test.ts.snap b/packages/core/src/__tests__/__snapshots__/marko.test.ts.snap
index 372e8c4402..ae6ef1bd4c 100644
--- a/packages/core/src/__tests__/__snapshots__/marko.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/marko.test.ts.snap
@@ -1353,8 +1353,8 @@ exports[`Marko > jsx > Javascript Test > basicForwardRef 1`] = `
     this.state = { name: \\"PatrickJS\\" };
   }
 
-  get propsInputRef() {
-    return this.getEl(\\"propsInputRef\\");
+  get propsRef() {
+    return this.getEl(\\"propsRef\\");
   }
 }
 
@@ -1366,7 +1366,7 @@ style {
 <div>
   <input
     class=\\"input-7c942903\\"
-    key=\\"propsInputRef\\"
+    key=\\"propsRef\\"
     value=(state.name)
     on-input(event => state.name = event.target.value)
   />
@@ -1587,6 +1587,32 @@ class {}
 <div>Hello \${input.name || DEFAULT_VALUES.name}</div>"
 `;
 
+exports[`Marko > jsx > Javascript Test > dontForwardRef 1`] = `
+"class {
+  onCreate(input) {
+    this.state = { name: \\"PatrickJS\\" };
+  }
+
+  get propsInputRef() {
+    return this.getEl(\\"propsInputRef\\");
+  }
+}
+
+style { 
+  .input-5ca2af3c {
+    color: red;
+  }
+}
+<div>
+  <input
+    class=\\"input-5ca2af3c\\"
+    key=\\"propsInputRef\\"
+    value=(state.name)
+    on-input(event => state.name = event.target.value)
+  />
+</div>"
+`;
+
 exports[`Marko > jsx > Javascript Test > expressionState 1`] = `
 "class {
   onCreate(input) {
@@ -3609,8 +3635,8 @@ exports[`Marko > jsx > Typescript Test > basicForwardRef 1`] = `
     this.state = { name: \\"PatrickJS\\" };
   }
 
-  get propsInputRef() {
-    return this.getEl(\\"propsInputRef\\");
+  get propsRef() {
+    return this.getEl(\\"propsRef\\");
   }
 }
 
@@ -3622,7 +3648,7 @@ style {
 <div>
   <input
     class=\\"input-014e706f\\"
-    key=\\"propsInputRef\\"
+    key=\\"propsRef\\"
     value=(state.name)
     on-input(event => state.name = event.target.value)
   />
@@ -3845,6 +3871,32 @@ class {}
 <div>Hello \${input.name || DEFAULT_VALUES.name}</div>"
 `;
 
+exports[`Marko > jsx > Typescript Test > dontForwardRef 1`] = `
+"class {
+  onCreate(input) {
+    this.state = { name: \\"PatrickJS\\" };
+  }
+
+  get propsInputRef() {
+    return this.getEl(\\"propsInputRef\\");
+  }
+}
+
+style { 
+  .input-30866138 {
+    color: red;
+  }
+}
+<div>
+  <input
+    class=\\"input-30866138\\"
+    key=\\"propsInputRef\\"
+    value=(state.name)
+    on-input(event => state.name = event.target.value)
+  />
+</div>"
+`;
+
 exports[`Marko > jsx > Typescript Test > expressionState 1`] = `
 "class {
   onCreate(input) {
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 a49032230b..b50e0316a9 100644
--- a/packages/core/src/__tests__/__snapshots__/parse-jsx.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/parse-jsx.test.ts.snap
@@ -6378,7 +6378,7 @@ exports[`Parse JSX > Javascript > basicForwardRef 1`] = `
               "type": "single",
             },
             "ref": {
-              "code": "props.inputRef",
+              "code": "props.ref",
               "type": "single",
             },
             "value": {
@@ -7967,6 +7967,97 @@ exports[`Parse JSX > Javascript > defaultValsWithTypes 1`] = `
 }
 `;
 
+exports[`Parse JSX > Javascript > dontForwardRef 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": "
+      ",
+          },
+          "scope": {},
+        },
+        {
+          "@type": "@builder.io/mitosis/node",
+          "bindings": {
+            "css": {
+              "code": "{
+  color: 'red'
+}",
+              "type": "single",
+            },
+            "onChange": {
+              "arguments": [
+                "event",
+              ],
+              "code": "state.name = event.target.value",
+              "type": "single",
+            },
+            "ref": {
+              "code": "props.inputRef",
+              "type": "single",
+            },
+            "value": {
+              "code": "state.name",
+              "type": "single",
+            },
+          },
+          "children": [],
+          "meta": {},
+          "name": "input",
+          "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": {},
+  "imports": [],
+  "inputs": [],
+  "meta": {},
+  "name": "DontForwardRefComponent",
+  "refs": {},
+  "state": {
+    "name": {
+      "code": "'PatrickJS'",
+      "type": "property",
+    },
+  },
+  "subComponents": [],
+}
+`;
+
 exports[`Parse JSX > Javascript > expressionState 1`] = `
 {
   "@type": "@builder.io/mitosis/component",
@@ -18244,7 +18335,7 @@ exports[`Parse JSX > Typescript > basicForwardRef 1`] = `
               "type": "single",
             },
             "ref": {
-              "code": "props.inputRef",
+              "code": "props.ref",
               "type": "single",
             },
             "value": {
@@ -18299,7 +18390,7 @@ exports[`Parse JSX > Typescript > basicForwardRef 1`] = `
   "types": [
     "export interface Props {
   showInput: boolean;
-  inputRef: HTMLInputElement;
+  ref: HTMLInputElement;
 }",
   ],
 }
@@ -19902,6 +19993,104 @@ exports[`Parse JSX > Typescript > defaultValsWithTypes 1`] = `
 }
 `;
 
+exports[`Parse JSX > Typescript > dontForwardRef 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": "
+      ",
+          },
+          "scope": {},
+        },
+        {
+          "@type": "@builder.io/mitosis/node",
+          "bindings": {
+            "css": {
+              "code": "{
+  color: 'red'
+}",
+              "type": "single",
+            },
+            "onChange": {
+              "arguments": [
+                "event",
+              ],
+              "code": "state.name = event.target.value",
+              "type": "single",
+            },
+            "ref": {
+              "code": "props.inputRef",
+              "type": "single",
+            },
+            "value": {
+              "code": "state.name",
+              "type": "single",
+            },
+          },
+          "children": [],
+          "meta": {},
+          "name": "input",
+          "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": {},
+  "imports": [],
+  "inputs": [],
+  "meta": {},
+  "name": "DontForwardRefComponent",
+  "propsTypeRef": "Props",
+  "refs": {},
+  "state": {
+    "name": {
+      "code": "'PatrickJS'",
+      "type": "property",
+    },
+  },
+  "subComponents": [],
+  "types": [
+    "export interface Props {
+  showInput: boolean;
+  inputRef: HTMLInputElement;
+}",
+  ],
+}
+`;
+
 exports[`Parse JSX > Typescript > expressionState 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 8534356a13..f5bccd9036 100644
--- a/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap
@@ -1618,7 +1618,7 @@ function MyBasicForwardRefComponent(props) {
       <div>
         <input
           className=\\"input\\"
-          ref={props.inputRef}
+          ref={props.ref}
           value={name}
           onChange={(event) => setName(event.target.value)}
         />
@@ -2035,6 +2035,37 @@ export default ComponentWithTypes;
 "
 `;
 
+exports[`Preact > jsx > Javascript Test > dontForwardRef 1`] = `
+"/** @jsx h */
+import { h, Fragment } from \\"preact\\";
+import { useState } from \\"preact/hooks\\";
+
+function DontForwardRefComponent(props) {
+  const [name, setName] = useState(() => \\"PatrickJS\\");
+
+  return (
+    <Fragment>
+      <div>
+        <input
+          className=\\"input\\"
+          ref={props.inputRef}
+          value={name}
+          onChange={(event) => setName(event.target.value)}
+        />
+      </div>
+      <style jsx>{\`
+        .input {
+          color: red;
+        }
+      \`}</style>
+    </Fragment>
+  );
+}
+
+export default DontForwardRefComponent;
+"
+`;
+
 exports[`Preact > jsx > Javascript Test > expressionState 1`] = `
 "/** @jsx h */
 import { h, Fragment } from \\"preact\\";
@@ -4989,7 +5020,7 @@ import { useState } from \\"preact/hooks\\";
 
 export interface Props {
   showInput: boolean;
-  inputRef: HTMLInputElement;
+  ref: HTMLInputElement;
 }
 
 function MyBasicForwardRefComponent(props: Props) {
@@ -5000,7 +5031,7 @@ function MyBasicForwardRefComponent(props: Props) {
       <div>
         <input
           className=\\"input\\"
-          ref={props.inputRef}
+          ref={props.ref}
           value={name}
           onChange={(event) => setName(event.target.value)}
         />
@@ -5460,6 +5491,42 @@ export default ComponentWithTypes;
 "
 `;
 
+exports[`Preact > jsx > Typescript Test > dontForwardRef 1`] = `
+"/** @jsx h */
+import { h, Fragment } from \\"preact\\";
+import { useState } from \\"preact/hooks\\";
+
+export interface Props {
+  showInput: boolean;
+  inputRef: HTMLInputElement;
+}
+
+function DontForwardRefComponent(props: Props) {
+  const [name, setName] = useState(() => \\"PatrickJS\\");
+
+  return (
+    <Fragment>
+      <div>
+        <input
+          className=\\"input\\"
+          ref={props.inputRef}
+          value={name}
+          onChange={(event) => setName(event.target.value)}
+        />
+      </div>
+      <style jsx>{\`
+        .input {
+          color: red;
+        }
+      \`}</style>
+    </Fragment>
+  );
+}
+
+export default DontForwardRefComponent;
+"
+`;
+
 exports[`Preact > jsx > Typescript Test > expressionState 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 523f7b0f6f..a968d70833 100644
--- a/packages/core/src/__tests__/__snapshots__/qwik.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/qwik.test.ts.snap
@@ -3430,7 +3430,7 @@ export const MyBasicForwardRefComponent = component$((props) => {
     <div>
       <input
         class=\\"input-MyBasicForwardRefComponent\\"
-        ref={props.inputRef}
+        ref={props.ref}
         value={state.name}
         onChange$={(event) => (state.name = event.target.value)}
       />
@@ -3715,6 +3715,42 @@ export default ComponentWithTypes;
 "
 `;
 
+exports[`qwik > jsx > Javascript Test > dontForwardRef 1`] = `
+"import {
+  Fragment,
+  component$,
+  h,
+  useStore,
+  useStylesScoped$,
+} from \\"@builder.io/qwik\\";
+
+export const DontForwardRefComponent = component$((props) => {
+  useStylesScoped$(STYLES);
+
+  const state = useStore({ name: \\"PatrickJS\\" });
+
+  return (
+    <div>
+      <input
+        class=\\"input-DontForwardRefComponent\\"
+        ref={props.inputRef}
+        value={state.name}
+        onChange$={(event) => (state.name = event.target.value)}
+      />
+    </div>
+  );
+});
+
+export default DontForwardRefComponent;
+
+export const STYLES = \`
+.input-DontForwardRefComponent {
+  color: red;
+}
+\`;
+"
+`;
+
 exports[`qwik > jsx > Javascript Test > expressionState 1`] = `
 "import { Fragment, component$, h, useStore } from \\"@builder.io/qwik\\";
 
@@ -6619,7 +6655,7 @@ exports[`qwik > jsx > Typescript Test > basicForwardRef 1`] = `
 
 export interface Props {
   showInput: boolean;
-  inputRef: HTMLInputElement;
+  ref: HTMLInputElement;
 }
 export const MyBasicForwardRefComponent = component$((props: Props) => {
   useStylesScoped$(STYLES);
@@ -6630,7 +6666,7 @@ export const MyBasicForwardRefComponent = component$((props: Props) => {
     <div>
       <input
         class=\\"input-MyBasicForwardRefComponent\\"
-        ref={props.inputRef}
+        ref={props.ref}
         value={state.name}
         onChange$={(event) => (state.name = event.target.value)}
       />
@@ -6944,6 +6980,46 @@ export default ComponentWithTypes;
 "
 `;
 
+exports[`qwik > jsx > Typescript Test > dontForwardRef 1`] = `
+"import {
+  Fragment,
+  component$,
+  h,
+  useStore,
+  useStylesScoped$,
+} from \\"@builder.io/qwik\\";
+
+export interface Props {
+  showInput: boolean;
+  inputRef: HTMLInputElement;
+}
+export const DontForwardRefComponent = component$((props: Props) => {
+  useStylesScoped$(STYLES);
+
+  const state = useStore<any>({ name: \\"PatrickJS\\" });
+
+  return (
+    <div>
+      <input
+        class=\\"input-DontForwardRefComponent\\"
+        ref={props.inputRef}
+        value={state.name}
+        onChange$={(event) => (state.name = event.target.value)}
+      />
+    </div>
+  );
+});
+
+export default DontForwardRefComponent;
+
+export const STYLES = \`
+.input-DontForwardRefComponent {
+  color: red;
+}
+\`;
+"
+`;
+
 exports[`qwik > jsx > Typescript Test > expressionState 1`] = `
 "import { Fragment, component$, h, useStore } from \\"@builder.io/qwik\\";
 
diff --git a/packages/core/src/__tests__/__snapshots__/react-native.test.ts.snap b/packages/core/src/__tests__/__snapshots__/react-native.test.ts.snap
index 5993c31383..5466a7e73d 100644
--- a/packages/core/src/__tests__/__snapshots__/react-native.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/react-native.test.ts.snap
@@ -1809,13 +1809,13 @@ import {
 import { useState, forwardRef } from \\"react\\";
 
 const MyBasicForwardRefComponent = forwardRef(
-  function MyBasicForwardRefComponent(props, inputRef) {
+  function MyBasicForwardRefComponent(props, ref) {
     const [name, setName] = useState(() => \\"PatrickJS\\");
 
     return (
       <View>
         <View
-          ref={inputRef}
+          ref={ref}
           value={name}
           onChange={(event) => setName(event.target.value)}
           style={styles.view1}
@@ -2307,6 +2307,39 @@ export default ComponentWithTypes;
 "
 `;
 
+exports[`React Native > jsx > Javascript Test > dontForwardRef 1`] = `
+"import * as React from \\"react\\";
+import {
+  FlatList,
+  ScrollView,
+  View,
+  StyleSheet,
+  Image,
+  Text,
+} from \\"react-native\\";
+import { useState } from \\"react\\";
+
+function DontForwardRefComponent(props) {
+  const [name, setName] = useState(() => \\"PatrickJS\\");
+
+  return (
+    <View>
+      <View
+        ref={props.inputRef}
+        value={name}
+        onChange={(event) => setName(event.target.value)}
+        style={styles.view1}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({ view1: { color: \\"red\\" } });
+
+export default DontForwardRefComponent;
+"
+`;
+
 exports[`React Native > jsx > Javascript Test > expressionState 1`] = `
 "import * as React from \\"react\\";
 import {
@@ -5706,17 +5739,17 @@ import { useState, forwardRef } from \\"react\\";
 
 export interface Props {
   showInput: boolean;
-  inputRef: HTMLInputElement;
+  ref: HTMLInputElement;
 }
 
-const MyBasicForwardRefComponent = forwardRef<Props[\\"inputRef\\"]>(
-  function MyBasicForwardRefComponent(props: Props, inputRef) {
+const MyBasicForwardRefComponent = forwardRef<Props[\\"ref\\"]>(
+  function MyBasicForwardRefComponent(props: Props, ref) {
     const [name, setName] = useState(() => \\"PatrickJS\\");
 
     return (
       <View>
         <View
-          ref={inputRef}
+          ref={ref}
           value={name}
           onChange={(event) => setName(event.target.value)}
           style={styles.view1}
@@ -6251,6 +6284,44 @@ export default ComponentWithTypes;
 "
 `;
 
+exports[`React Native > jsx > Typescript Test > dontForwardRef 1`] = `
+"import * as React from \\"react\\";
+import {
+  FlatList,
+  ScrollView,
+  View,
+  StyleSheet,
+  Image,
+  Text,
+} from \\"react-native\\";
+import { useState } from \\"react\\";
+
+export interface Props {
+  showInput: boolean;
+  inputRef: HTMLInputElement;
+}
+
+function DontForwardRefComponent(props: Props) {
+  const [name, setName] = useState(() => \\"PatrickJS\\");
+
+  return (
+    <View>
+      <View
+        ref={props.inputRef}
+        value={name}
+        onChange={(event) => setName(event.target.value)}
+        style={styles.view1}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({ view1: { color: \\"red\\" } });
+
+export default DontForwardRefComponent;
+"
+`;
+
 exports[`React Native > jsx > Typescript Test > expressionState 1`] = `
 "import * as React from \\"react\\";
 import {
diff --git a/packages/core/src/__tests__/__snapshots__/react.test.ts.snap b/packages/core/src/__tests__/__snapshots__/react.test.ts.snap
index f053910c85..3388c49922 100644
--- a/packages/core/src/__tests__/__snapshots__/react.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/react.test.ts.snap
@@ -1571,7 +1571,7 @@ exports[`React > jsx > Javascript Test > basicForwardRef 1`] = `
 import { useState, forwardRef } from \\"react\\";
 
 const MyBasicForwardRefComponent = forwardRef(
-  function MyBasicForwardRefComponent(props, inputRef) {
+  function MyBasicForwardRefComponent(props, ref) {
     const [name, setName] = useState(() => \\"PatrickJS\\");
 
     return (
@@ -1579,7 +1579,7 @@ const MyBasicForwardRefComponent = forwardRef(
         <div>
           <input
             className=\\"input\\"
-            ref={inputRef}
+            ref={ref}
             value={name}
             onChange={(event) => setName(event.target.value)}
           />
@@ -1986,6 +1986,36 @@ export default ComponentWithTypes;
 "
 `;
 
+exports[`React > jsx > Javascript Test > dontForwardRef 1`] = `
+"import * as React from \\"react\\";
+import { useState } from \\"react\\";
+
+function DontForwardRefComponent(props) {
+  const [name, setName] = useState(() => \\"PatrickJS\\");
+
+  return (
+    <>
+      <div>
+        <input
+          className=\\"input\\"
+          ref={props.inputRef}
+          value={name}
+          onChange={(event) => setName(event.target.value)}
+        />
+      </div>
+      <style jsx>{\`
+        .input {
+          color: red;
+        }
+      \`}</style>
+    </>
+  );
+}
+
+export default DontForwardRefComponent;
+"
+`;
+
 exports[`React > jsx > Javascript Test > expressionState 1`] = `
 "import * as React from \\"react\\";
 import { useState } from \\"react\\";
@@ -4855,11 +4885,11 @@ import { useState, forwardRef } from \\"react\\";
 
 export interface Props {
   showInput: boolean;
-  inputRef: HTMLInputElement;
+  ref: HTMLInputElement;
 }
 
-const MyBasicForwardRefComponent = forwardRef<Props[\\"inputRef\\"]>(
-  function MyBasicForwardRefComponent(props: Props, inputRef) {
+const MyBasicForwardRefComponent = forwardRef<Props[\\"ref\\"]>(
+  function MyBasicForwardRefComponent(props: Props, ref) {
     const [name, setName] = useState(() => \\"PatrickJS\\");
 
     return (
@@ -4867,7 +4897,7 @@ const MyBasicForwardRefComponent = forwardRef<Props[\\"inputRef\\"]>(
         <div>
           <input
             className=\\"input\\"
-            ref={inputRef}
+            ref={ref}
             value={name}
             onChange={(event) => setName(event.target.value)}
           />
@@ -5317,6 +5347,41 @@ export default ComponentWithTypes;
 "
 `;
 
+exports[`React > jsx > Typescript Test > dontForwardRef 1`] = `
+"import * as React from \\"react\\";
+import { useState } from \\"react\\";
+
+export interface Props {
+  showInput: boolean;
+  inputRef: HTMLInputElement;
+}
+
+function DontForwardRefComponent(props: Props) {
+  const [name, setName] = useState(() => \\"PatrickJS\\");
+
+  return (
+    <>
+      <div>
+        <input
+          className=\\"input\\"
+          ref={props.inputRef}
+          value={name}
+          onChange={(event) => setName(event.target.value)}
+        />
+      </div>
+      <style jsx>{\`
+        .input {
+          color: red;
+        }
+      \`}</style>
+    </>
+  );
+}
+
+export default DontForwardRefComponent;
+"
+`;
+
 exports[`React > jsx > Typescript Test > expressionState 1`] = `
 "import * as React from \\"react\\";
 import { useState } from \\"react\\";
diff --git a/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap b/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap
index e3b406a22f..6fdc9dde3a 100644
--- a/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap
@@ -1477,6 +1477,7 @@ export default MyBasicForwardRefComponent;
 
 exports[`RSC > jsx > Javascript Test > basicForwardRefMetadata 1`] = `
 "import * as React from \\"react\\";
+import { forwardRef } from \\"react\\";
 
 const MyBasicForwardRefComponent = forwardRef(
   function MyBasicForwardRefComponent(props, inputRef) {
@@ -1826,6 +1827,30 @@ export default ComponentWithTypes;
 "
 `;
 
+exports[`RSC > jsx > Javascript Test > dontForwardRef 1`] = `
+"import * as React from \\"react\\";
+
+function DontForwardRefComponent(props) {
+  const _context = { ...props[\\"_context\\"] };
+
+  const state = { name: \\"PatrickJS\\" };
+
+  return (
+    <>
+      <div>
+        <input className=\\"input-0f920d02\\" value={state.name} />
+      </div>
+      <style>{\`.input-0f920d02 {
+  color: red;
+}\`}</style>
+    </>
+  );
+}
+
+export default DontForwardRefComponent;
+"
+`;
+
 exports[`RSC > jsx > Javascript Test > expressionState 1`] = `
 "import * as React from \\"react\\";
 
@@ -4571,7 +4596,7 @@ exports[`RSC > jsx > Typescript Test > basicForwardRef 1`] = `
 
 export interface Props {
   showInput: boolean;
-  inputRef: HTMLInputElement;
+  ref: HTMLInputElement;
 }
 
 function MyBasicForwardRefComponent(props: Props) {
@@ -4582,9 +4607,9 @@ function MyBasicForwardRefComponent(props: Props) {
   return (
     <>
       <div>
-        <input className=\\"input-346a570f\\" value={state.name} />
+        <input className=\\"input-50884ee0\\" value={state.name} />
       </div>
-      <style>{\`.input-346a570f {
+      <style>{\`.input-50884ee0 {
   color: red;
 }\`}</style>
     </>
@@ -4597,13 +4622,14 @@ export default MyBasicForwardRefComponent;
 
 exports[`RSC > jsx > Typescript Test > basicForwardRefMetadata 1`] = `
 "import * as React from \\"react\\";
+import { forwardRef } from \\"react\\";
 
 export interface Props {
   showInput: boolean;
   inputRef: HTMLInputElement;
 }
 
-const MyBasicForwardRefComponent = forwardRef(
+const MyBasicForwardRefComponent = forwardRef<Props[\\"inputRef\\"]>(
   function MyBasicForwardRefComponent(props: Props, inputRef) {
     const _context = { ...props[\\"_context\\"] };
 
@@ -4989,6 +5015,35 @@ export default ComponentWithTypes;
 "
 `;
 
+exports[`RSC > jsx > Typescript Test > dontForwardRef 1`] = `
+"import * as React from \\"react\\";
+
+export interface Props {
+  showInput: boolean;
+  inputRef: HTMLInputElement;
+}
+
+function DontForwardRefComponent(props: Props) {
+  const _context = { ...props[\\"_context\\"] };
+
+  const state = { name: \\"PatrickJS\\" };
+
+  return (
+    <>
+      <div>
+        <input className=\\"input-0d4c0c8e\\" value={state.name} />
+      </div>
+      <style>{\`.input-0d4c0c8e {
+  color: red;
+}\`}</style>
+    </>
+  );
+}
+
+export default DontForwardRefComponent;
+"
+`;
+
 exports[`RSC > jsx > Typescript Test > expressionState 1`] = `
 "import * as React from \\"react\\";
 
diff --git a/packages/core/src/__tests__/__snapshots__/stencil.test.ts.snap b/packages/core/src/__tests__/__snapshots__/stencil.test.ts.snap
index fecb62ae64..e9b53aa5d3 100644
--- a/packages/core/src/__tests__/__snapshots__/stencil.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/stencil.test.ts.snap
@@ -1728,7 +1728,7 @@ exports[`Stencil > jsx > Javascript Test > basicForwardRef 1`] = `
 \`,
 })
 export default class MyBasicForwardRefComponent {
-  @Prop() inputRef: any;
+  @Prop() ref: any;
 
   @State() name = \\"PatrickJS\\";
 
@@ -1737,7 +1737,7 @@ export default class MyBasicForwardRefComponent {
       <div>
         <input
           class=\\"input\\"
-          ref={(el) => (this.props.inputRef = el)}
+          ref={(el) => (this.props.ref = el)}
           value={this.name}
           onInput={(event) => (this.name = event.target.value)}
         />
@@ -2123,6 +2123,38 @@ export default class ComponentWithTypes {
 "
 `;
 
+exports[`Stencil > jsx > Javascript Test > dontForwardRef 1`] = `
+"import { Component, Prop, h, State, Fragment } from \\"@stencil/core\\";
+
+@Component({
+  tag: \\"dont-forward-ref-component\\",
+  styles: \`
+        .input {
+          color: red;
+        }
+\`,
+})
+export default class DontForwardRefComponent {
+  @Prop() inputRef: any;
+
+  @State() name = \\"PatrickJS\\";
+
+  render() {
+    return (
+      <div>
+        <input
+          class=\\"input\\"
+          ref={(el) => (this.props.inputRef = el)}
+          value={this.name}
+          onInput={(event) => (this.name = event.target.value)}
+        />
+      </div>
+    );
+  }
+}
+"
+`;
+
 exports[`Stencil > jsx > Javascript Test > expressionState 1`] = `
 "import { Component, Prop, h, State, Fragment } from \\"@stencil/core\\";
 
@@ -4600,7 +4632,7 @@ exports[`Stencil > jsx > Typescript Test > basicForwardRef 1`] = `
 \`,
 })
 export default class MyBasicForwardRefComponent {
-  @Prop() inputRef: any;
+  @Prop() ref: any;
 
   @State() name = \\"PatrickJS\\";
 
@@ -4609,7 +4641,7 @@ export default class MyBasicForwardRefComponent {
       <div>
         <input
           class=\\"input\\"
-          ref={(el) => (this.props.inputRef = el)}
+          ref={(el) => (this.props.ref = el)}
           value={this.name}
           onInput={(event) => (this.name = event.target.value)}
         />
@@ -4997,6 +5029,38 @@ export default class ComponentWithTypes {
 "
 `;
 
+exports[`Stencil > jsx > Typescript Test > dontForwardRef 1`] = `
+"import { Component, Prop, h, State, Fragment } from \\"@stencil/core\\";
+
+@Component({
+  tag: \\"dont-forward-ref-component\\",
+  styles: \`
+        .input {
+          color: red;
+        }
+\`,
+})
+export default class DontForwardRefComponent {
+  @Prop() inputRef: any;
+
+  @State() name = \\"PatrickJS\\";
+
+  render() {
+    return (
+      <div>
+        <input
+          class=\\"input\\"
+          ref={(el) => (this.props.inputRef = el)}
+          value={this.name}
+          onInput={(event) => (this.name = event.target.value)}
+        />
+      </div>
+    );
+  }
+}
+"
+`;
+
 exports[`Stencil > jsx > Typescript Test > expressionState 1`] = `
 "import { Component, Prop, h, State, Fragment } from \\"@stencil/core\\";
 
diff --git a/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap b/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap
index 70b151aa5d..1ad534576f 100644
--- a/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap
@@ -1460,13 +1460,13 @@ exports[`Svelte > jsx > Javascript Test > arrowFunctionInUseStore 1`] = `
 
 exports[`Svelte > jsx > Javascript Test > basicForwardRef 1`] = `
 "<script>
-  export let inputRef;
+  export let ref;
 
   let name = \\"PatrickJS\\";
 </script>
 
 <div>
-  <input class=\\"input\\" bind:this={inputRef} bind:value={name} />
+  <input class=\\"input\\" bind:this={ref} bind:value={name} />
 </div>
 
 <style>
@@ -1748,6 +1748,24 @@ exports[`Svelte > jsx > Javascript Test > defaultValsWithTypes 1`] = `
 <div>Hello {name || DEFAULT_VALUES.name}</div>"
 `;
 
+exports[`Svelte > jsx > Javascript Test > dontForwardRef 1`] = `
+"<script>
+  export let inputRef;
+
+  let name = \\"PatrickJS\\";
+</script>
+
+<div>
+  <input class=\\"input\\" bind:this={inputRef} bind:value={name} />
+</div>
+
+<style>
+  .input {
+    color: red;
+  }
+</style>"
+`;
+
 exports[`Svelte > jsx > Javascript Test > expressionState 1`] = `
 "<script>
   export let componentRef;
@@ -4323,18 +4341,18 @@ exports[`Svelte > jsx > Typescript Test > basicForwardRef 1`] = `
 "<script context=\\"module\\" lang=\\"ts\\">
   export interface Props {
     showInput: boolean;
-    inputRef: HTMLInputElement;
+    ref: HTMLInputElement;
   }
 </script>
 
 <script lang=\\"ts\\">
-  export let inputRef: Props[\\"inputRef\\"];
+  export let ref: Props[\\"ref\\"];
 
   let name = \\"PatrickJS\\";
 </script>
 
 <div>
-  <input class=\\"input\\" bind:this={inputRef} bind:value={name} />
+  <input class=\\"input\\" bind:this={ref} bind:value={name} />
 </div>
 
 <style>
@@ -4681,6 +4699,31 @@ exports[`Svelte > jsx > Typescript Test > defaultValsWithTypes 1`] = `
 <div>Hello {name || DEFAULT_VALUES.name}</div>"
 `;
 
+exports[`Svelte > jsx > Typescript Test > dontForwardRef 1`] = `
+"<script context=\\"module\\" lang=\\"ts\\">
+  export interface Props {
+    showInput: boolean;
+    inputRef: HTMLInputElement;
+  }
+</script>
+
+<script lang=\\"ts\\">
+  export let inputRef: Props[\\"inputRef\\"];
+
+  let name = \\"PatrickJS\\";
+</script>
+
+<div>
+  <input class=\\"input\\" bind:this={inputRef} bind:value={name} />
+</div>
+
+<style>
+  .input {
+    color: red;
+  }
+</style>"
+`;
+
 exports[`Svelte > jsx > Typescript Test > expressionState 1`] = `
 "<script lang=\\"ts\\">
   export let componentRef;
diff --git a/packages/core/src/__tests__/__snapshots__/taro.test.ts.snap b/packages/core/src/__tests__/__snapshots__/taro.test.ts.snap
index cb31618f77..6f19b35015 100644
--- a/packages/core/src/__tests__/__snapshots__/taro.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/taro.test.ts.snap
@@ -1579,7 +1579,7 @@ import { useState, forwardRef } from \\"react\\";
 import { View, Input } from \\"@tarojs/components\\";
 
 const MyBasicForwardRefComponent = forwardRef(
-  function MyBasicForwardRefComponent(props, inputRef) {
+  function MyBasicForwardRefComponent(props, ref) {
     const [name, setName] = useState(() => \\"PatrickJS\\");
 
     return (
@@ -1587,7 +1587,7 @@ const MyBasicForwardRefComponent = forwardRef(
         <View>
           <Input
             className=\\"input\\"
-            ref={inputRef}
+            ref={ref}
             value={name}
             onChange={(event) => setName(event.target.value)}
           />
@@ -2006,6 +2006,37 @@ export default ComponentWithTypes;
 "
 `;
 
+exports[`Taro > jsx > Javascript Test > dontForwardRef 1`] = `
+"import * as React from \\"react\\";
+import { useState } from \\"react\\";
+import { View, Input } from \\"@tarojs/components\\";
+
+function DontForwardRefComponent(props) {
+  const [name, setName] = useState(() => \\"PatrickJS\\");
+
+  return (
+    <>
+      <View>
+        <Input
+          className=\\"input\\"
+          ref={props.inputRef}
+          value={name}
+          onChange={(event) => setName(event.target.value)}
+        />
+      </View>
+      <style jsx>{\`
+        .input {
+          color: red;
+        }
+      \`}</style>
+    </>
+  );
+}
+
+export default DontForwardRefComponent;
+"
+`;
+
 exports[`Taro > jsx > Javascript Test > expressionState 1`] = `
 "import * as React from \\"react\\";
 import { useState } from \\"react\\";
@@ -4937,13 +4968,13 @@ import { useState, forwardRef } from \\"react\\";
 
 export interface Props {
   showInput: boolean;
-  inputRef: HTMLInputElement;
+  ref: HTMLInputElement;
 }
 
 import { View, Input } from \\"@tarojs/components\\";
 
-const MyBasicForwardRefComponent = forwardRef<Props[\\"inputRef\\"]>(
-  function MyBasicForwardRefComponent(props: Props, inputRef) {
+const MyBasicForwardRefComponent = forwardRef<Props[\\"ref\\"]>(
+  function MyBasicForwardRefComponent(props: Props, ref) {
     const [name, setName] = useState(() => \\"PatrickJS\\");
 
     return (
@@ -4951,7 +4982,7 @@ const MyBasicForwardRefComponent = forwardRef<Props[\\"inputRef\\"]>(
         <View>
           <Input
             className=\\"input\\"
-            ref={inputRef}
+            ref={ref}
             value={name}
             onChange={(event) => setName(event.target.value)}
           />
@@ -5416,6 +5447,43 @@ export default ComponentWithTypes;
 "
 `;
 
+exports[`Taro > jsx > Typescript Test > dontForwardRef 1`] = `
+"import * as React from \\"react\\";
+import { useState } from \\"react\\";
+
+export interface Props {
+  showInput: boolean;
+  inputRef: HTMLInputElement;
+}
+
+import { View, Input } from \\"@tarojs/components\\";
+
+function DontForwardRefComponent(props: Props) {
+  const [name, setName] = useState(() => \\"PatrickJS\\");
+
+  return (
+    <>
+      <View>
+        <Input
+          className=\\"input\\"
+          ref={props.inputRef}
+          value={name}
+          onChange={(event) => setName(event.target.value)}
+        />
+      </View>
+      <style jsx>{\`
+        .input {
+          color: red;
+        }
+      \`}</style>
+    </>
+  );
+}
+
+export default DontForwardRefComponent;
+"
+`;
+
 exports[`Taro > jsx > Typescript Test > expressionState 1`] = `
 "import * as React from \\"react\\";
 import { useState } from \\"react\\";
diff --git a/packages/core/src/__tests__/__snapshots__/vue-composition.test.ts.snap b/packages/core/src/__tests__/__snapshots__/vue-composition.test.ts.snap
index 8d47346ad6..4238085f5e 100644
--- a/packages/core/src/__tests__/__snapshots__/vue-composition.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/vue-composition.test.ts.snap
@@ -1583,7 +1583,7 @@ exports[`Vue > jsx > Javascript Test > basicForwardRef 1`] = `
   <div>
     <input
       class=\\"input\\"
-      ref=\\"inputRef\\"
+      ref=\\"ref\\"
       :value=\\"name\\"
       @input=\\"name = $event.target.value\\"
     />
@@ -1593,7 +1593,7 @@ exports[`Vue > jsx > Javascript Test > basicForwardRef 1`] = `
 <script setup>
 import { ref } from \\"vue\\";
 
-const props = defineProps([\\"inputRef\\"]);
+const props = defineProps([\\"ref\\"]);
 const name = ref(\\"PatrickJS\\");
 </script>
 
@@ -1921,6 +1921,32 @@ const props = defineProps([\\"name\\"]);
 </script>"
 `;
 
+exports[`Vue > jsx > Javascript Test > dontForwardRef 1`] = `
+"<template>
+  <div>
+    <input
+      class=\\"input\\"
+      ref=\\"inputRef\\"
+      :value=\\"name\\"
+      @input=\\"name = $event.target.value\\"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref } from \\"vue\\";
+
+const props = defineProps([\\"inputRef\\"]);
+const name = ref(\\"PatrickJS\\");
+</script>
+
+<style scoped>
+.input {
+  color: red;
+}
+</style>"
+`;
+
 exports[`Vue > jsx > Javascript Test > expressionState 1`] = `
 "<template>
   <div>{{ refToUse }}</div>
@@ -4583,7 +4609,7 @@ exports[`Vue > jsx > Typescript Test > basicForwardRef 1`] = `
   <div>
     <input
       class=\\"input\\"
-      ref=\\"inputRef\\"
+      ref=\\"ref\\"
       :value=\\"name\\"
       @input=\\"name = $event.target.value\\"
     />
@@ -4595,7 +4621,7 @@ import { ref } from \\"vue\\";
 
 export interface Props {
   showInput: boolean;
-  inputRef: HTMLInputElement;
+  ref: HTMLInputElement;
 }
 
 const props = defineProps<Props>();
@@ -4968,6 +4994,37 @@ const props = defineProps<Props>();
 </script>"
 `;
 
+exports[`Vue > jsx > Typescript Test > dontForwardRef 1`] = `
+"<template>
+  <div>
+    <input
+      class=\\"input\\"
+      ref=\\"inputRef\\"
+      :value=\\"name\\"
+      @input=\\"name = $event.target.value\\"
+    />
+  </div>
+</template>
+
+<script setup lang=\\"ts\\">
+import { ref } from \\"vue\\";
+
+export interface Props {
+  showInput: boolean;
+  inputRef: HTMLInputElement;
+}
+
+const props = defineProps<Props>();
+const name = ref(\\"PatrickJS\\");
+</script>
+
+<style scoped>
+.input {
+  color: red;
+}
+</style>"
+`;
+
 exports[`Vue > jsx > Typescript Test > expressionState 1`] = `
 "<template>
   <div>{{ refToUse }}</div>
diff --git a/packages/core/src/__tests__/__snapshots__/vue.test.ts.snap b/packages/core/src/__tests__/__snapshots__/vue.test.ts.snap
index 93910ef1ee..8157b4e972 100644
--- a/packages/core/src/__tests__/__snapshots__/vue.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/vue.test.ts.snap
@@ -1845,7 +1845,7 @@ exports[`Vue > jsx > Javascript Test > basicForwardRef 1`] = `
   <div>
     <input
       class=\\"input\\"
-      ref=\\"inputRef\\"
+      ref=\\"ref\\"
       :value=\\"name\\"
       @input=\\"name = $event.target.value\\"
     />
@@ -1858,7 +1858,7 @@ import { defineComponent } from \\"vue\\";
 export default defineComponent({
   name: \\"my-basic-forward-ref-component\\",
 
-  props: [\\"inputRef\\"],
+  props: [\\"ref\\"],
 
   data() {
     return { name: \\"PatrickJS\\" };
@@ -2267,6 +2267,39 @@ export default defineComponent({
 </script>"
 `;
 
+exports[`Vue > jsx > Javascript Test > dontForwardRef 1`] = `
+"<template>
+  <div>
+    <input
+      class=\\"input\\"
+      ref=\\"inputRef\\"
+      :value=\\"name\\"
+      @input=\\"name = $event.target.value\\"
+    />
+  </div>
+</template>
+
+<script>
+import { defineComponent } from \\"vue\\";
+
+export default defineComponent({
+  name: \\"dont-forward-ref-component\\",
+
+  props: [\\"inputRef\\"],
+
+  data() {
+    return { name: \\"PatrickJS\\" };
+  },
+});
+</script>
+
+<style scoped>
+.input {
+  color: red;
+}
+</style>"
+`;
+
 exports[`Vue > jsx > Javascript Test > expressionState 1`] = `
 "<template>
   <div>{{ refToUse }}</div>
@@ -5480,7 +5513,7 @@ exports[`Vue > jsx > Typescript Test > basicForwardRef 1`] = `
   <div>
     <input
       class=\\"input\\"
-      ref=\\"inputRef\\"
+      ref=\\"ref\\"
       :value=\\"name\\"
       @input=\\"name = $event.target.value\\"
     />
@@ -5492,13 +5525,13 @@ import { defineComponent } from \\"vue\\";
 
 export interface Props {
   showInput: boolean;
-  inputRef: HTMLInputElement;
+  ref: HTMLInputElement;
 }
 
 export default defineComponent({
   name: \\"my-basic-forward-ref-component\\",
 
-  props: [\\"inputRef\\"],
+  props: [\\"ref\\"],
 
   data() {
     return { name: \\"PatrickJS\\" };
@@ -5945,6 +5978,44 @@ export default defineComponent({
 </script>"
 `;
 
+exports[`Vue > jsx > Typescript Test > dontForwardRef 1`] = `
+"<template>
+  <div>
+    <input
+      class=\\"input\\"
+      ref=\\"inputRef\\"
+      :value=\\"name\\"
+      @input=\\"name = $event.target.value\\"
+    />
+  </div>
+</template>
+
+<script lang=\\"ts\\">
+import { defineComponent } from \\"vue\\";
+
+export interface Props {
+  showInput: boolean;
+  inputRef: HTMLInputElement;
+}
+
+export default defineComponent({
+  name: \\"dont-forward-ref-component\\",
+
+  props: [\\"inputRef\\"],
+
+  data() {
+    return { name: \\"PatrickJS\\" };
+  },
+});
+</script>
+
+<style scoped>
+.input {
+  color: red;
+}
+</style>"
+`;
+
 exports[`Vue > jsx > Typescript Test > expressionState 1`] = `
 "<template>
   <div>{{ refToUse }}</div>
diff --git a/packages/core/src/__tests__/__snapshots__/webcomponent.test.ts.snap b/packages/core/src/__tests__/__snapshots__/webcomponent.test.ts.snap
index dd4a7aebb6..5c9738eb5d 100644
--- a/packages/core/src/__tests__/__snapshots__/webcomponent.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/webcomponent.test.ts.snap
@@ -8444,6 +8444,159 @@ customElements.define(\\"component-with-types\\", ComponentWithTypes);
 "
 `;
 
+exports[`webcomponent > jsx > Javascript Test > dontForwardRef 1`] = `
+"/**
+ * Usage:
+ *
+ *  <dont-forward-ref-component></dont-forward-ref-component>
+ *
+ */
+class DontForwardRefComponent extends HTMLElement {
+  get _root() {
+    return this.shadowRoot || this;
+  }
+
+  constructor() {
+    super();
+    const self = this;
+
+    this.state = { name: \\"PatrickJS\\" };
+    if (!this.props) {
+      this.props = {};
+    }
+
+    // used to keep track of all nodes created by show/for
+    this.nodesToDestroy = [];
+    // batch updates
+    this.pendingUpdate = false;
+
+    // Event handler for 'input' event on input-dont-forward-ref-component-1
+    this.onInputDontForwardRefComponent1Input = (event) => {
+      this.state.name = event.target.value;
+      this.update();
+    };
+
+    if (undefined) {
+      this.attachShadow({ mode: \\"open\\" });
+    }
+  }
+
+  destroyAnyNodes() {
+    // destroy current view template refs before rendering again
+    this.nodesToDestroy.forEach((el) => el.remove());
+    this.nodesToDestroy = [];
+  }
+
+  connectedCallback() {
+    this._root.innerHTML = \`
+      <div>
+        <input
+          class=\\"input\\"
+          data-el=\\"input-dont-forward-ref-component-1\\"
+          data-dom-state=\\"DontForwardRefComponent-input-dont-forward-ref-component-1\\"
+        />
+      </div>
+      <style>
+        .input {
+          color: red;
+        }
+      </style>\`;
+    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() {
+    // grab previous input state
+    const preStateful = this.getStateful(this._root);
+    const preValues = this.prepareHydrate(preStateful);
+
+    // re-rendering needs to ensure that all nodes generated by for/show are refreshed
+    this.destroyAnyNodes();
+    this.updateBindings();
+
+    // hydrate input state
+    if (preValues.length) {
+      const nextStateful = this.getStateful(this._root);
+      this.hydrateDom(preValues, nextStateful);
+    }
+  }
+
+  getStateful(el) {
+    const stateful = el.querySelectorAll(\\"[data-dom-state]\\");
+    return stateful ? Array.from(stateful) : [];
+  }
+  prepareHydrate(stateful) {
+    return stateful.map((el) => {
+      return {
+        id: el.dataset.domState,
+        value: el.value,
+        active: document.activeElement === el,
+        selectionStart: el.selectionStart,
+      };
+    });
+  }
+  hydrateDom(preValues, stateful) {
+    return stateful.map((el, index) => {
+      const prev = preValues.find((prev) => el.dataset.domState === prev.id);
+      if (prev) {
+        el.value = prev.value;
+        if (prev.active) {
+          el.focus();
+          el.selectionStart = prev.selectionStart;
+        }
+      }
+    });
+  }
+
+  updateBindings() {
+    this._root
+      .querySelectorAll(\\"[data-el='input-dont-forward-ref-component-1']\\")
+      .forEach((el) => {
+        el.value = this.state.name;
+        el.removeEventListener(
+          \\"input\\",
+          this.onInputDontForwardRefComponent1Input
+        );
+        el.addEventListener(\\"input\\", this.onInputDontForwardRefComponent1Input);
+      });
+  }
+
+  // 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(\\"dont-forward-ref-component\\", DontForwardRefComponent);
+"
+`;
+
 exports[`webcomponent > jsx > Javascript Test > expressionState 1`] = `
 "/**
  * Usage:
@@ -19282,7 +19435,7 @@ customElements.define(\\"my-component\\", MyComponent);
 exports[`webcomponent > jsx > Typescript Test > basicForwardRef 1`] = `
 "export interface Props {
   showInput: boolean;
-  inputRef: HTMLInputElement;
+  ref: HTMLInputElement;
 }
 
 /**
@@ -21107,6 +21260,164 @@ customElements.define(\\"component-with-types\\", ComponentWithTypes);
 "
 `;
 
+exports[`webcomponent > jsx > Typescript Test > dontForwardRef 1`] = `
+"export interface Props {
+  showInput: boolean;
+  inputRef: HTMLInputElement;
+}
+
+/**
+ * Usage:
+ *
+ *  <dont-forward-ref-component></dont-forward-ref-component>
+ *
+ */
+class DontForwardRefComponent extends HTMLElement {
+  get _root() {
+    return this.shadowRoot || this;
+  }
+
+  constructor() {
+    super();
+    const self = this;
+
+    this.state = { name: \\"PatrickJS\\" };
+    if (!this.props) {
+      this.props = {};
+    }
+
+    // used to keep track of all nodes created by show/for
+    this.nodesToDestroy = [];
+    // batch updates
+    this.pendingUpdate = false;
+
+    // Event handler for 'input' event on input-dont-forward-ref-component-1
+    this.onInputDontForwardRefComponent1Input = (event) => {
+      this.state.name = event.target.value;
+      this.update();
+    };
+
+    if (undefined) {
+      this.attachShadow({ mode: \\"open\\" });
+    }
+  }
+
+  destroyAnyNodes() {
+    // destroy current view template refs before rendering again
+    this.nodesToDestroy.forEach((el) => el.remove());
+    this.nodesToDestroy = [];
+  }
+
+  connectedCallback() {
+    this._root.innerHTML = \`
+      <div>
+        <input
+          class=\\"input\\"
+          data-el=\\"input-dont-forward-ref-component-1\\"
+          data-dom-state=\\"DontForwardRefComponent-input-dont-forward-ref-component-1\\"
+        />
+      </div>
+      <style>
+        .input {
+          color: red;
+        }
+      </style>\`;
+    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() {
+    // grab previous input state
+    const preStateful = this.getStateful(this._root);
+    const preValues = this.prepareHydrate(preStateful);
+
+    // re-rendering needs to ensure that all nodes generated by for/show are refreshed
+    this.destroyAnyNodes();
+    this.updateBindings();
+
+    // hydrate input state
+    if (preValues.length) {
+      const nextStateful = this.getStateful(this._root);
+      this.hydrateDom(preValues, nextStateful);
+    }
+  }
+
+  getStateful(el) {
+    const stateful = el.querySelectorAll(\\"[data-dom-state]\\");
+    return stateful ? Array.from(stateful) : [];
+  }
+  prepareHydrate(stateful) {
+    return stateful.map((el) => {
+      return {
+        id: el.dataset.domState,
+        value: el.value,
+        active: document.activeElement === el,
+        selectionStart: el.selectionStart,
+      };
+    });
+  }
+  hydrateDom(preValues, stateful) {
+    return stateful.map((el, index) => {
+      const prev = preValues.find((prev) => el.dataset.domState === prev.id);
+      if (prev) {
+        el.value = prev.value;
+        if (prev.active) {
+          el.focus();
+          el.selectionStart = prev.selectionStart;
+        }
+      }
+    });
+  }
+
+  updateBindings() {
+    this._root
+      .querySelectorAll(\\"[data-el='input-dont-forward-ref-component-1']\\")
+      .forEach((el) => {
+        el.value = this.state.name;
+        el.removeEventListener(
+          \\"input\\",
+          this.onInputDontForwardRefComponent1Input
+        );
+        el.addEventListener(\\"input\\", this.onInputDontForwardRefComponent1Input);
+      });
+  }
+
+  // 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(\\"dont-forward-ref-component\\", DontForwardRefComponent);
+"
+`;
+
 exports[`webcomponent > jsx > Typescript Test > expressionState 1`] = `
 "/**
  * Usage:
diff --git a/packages/core/src/__tests__/data/basic-forwardRef.raw.tsx b/packages/core/src/__tests__/data/basic-forwardRef.raw.tsx
index 9b8db10fb6..3fa2431272 100644
--- a/packages/core/src/__tests__/data/basic-forwardRef.raw.tsx
+++ b/packages/core/src/__tests__/data/basic-forwardRef.raw.tsx
@@ -2,7 +2,7 @@ import { useStore } from '@builder.io/mitosis';
 
 export interface Props {
   showInput: boolean;
-  inputRef: HTMLInputElement;
+  ref: HTMLInputElement;
 }
 
 export default function MyBasicForwardRefComponent(props: Props) {
@@ -13,7 +13,7 @@ export default function MyBasicForwardRefComponent(props: Props) {
   return (
     <div>
       <input
-        ref={props.inputRef}
+        ref={props.ref}
         css={{
           color: 'red',
         }}
diff --git a/packages/core/src/__tests__/data/dont-forwardRef.raw.tsx b/packages/core/src/__tests__/data/dont-forwardRef.raw.tsx
new file mode 100644
index 0000000000..aac095143f
--- /dev/null
+++ b/packages/core/src/__tests__/data/dont-forwardRef.raw.tsx
@@ -0,0 +1,25 @@
+import { useStore } from '@builder.io/mitosis';
+
+export interface Props {
+  showInput: boolean;
+  inputRef: HTMLInputElement;
+}
+
+export default function DontForwardRefComponent(props: Props) {
+  const state = useStore({
+    name: 'PatrickJS',
+  });
+
+  return (
+    <div>
+      <input
+        ref={props.inputRef}
+        css={{
+          color: 'red',
+        }}
+        value={state.name}
+        onChange={(event) => (state.name = event.target.value)}
+      />
+    </div>
+  );
+}
diff --git a/packages/core/src/__tests__/test-generator.ts b/packages/core/src/__tests__/test-generator.ts
index 24aa136f44..ddd9baf6e2 100644
--- a/packages/core/src/__tests__/test-generator.ts
+++ b/packages/core/src/__tests__/test-generator.ts
@@ -29,6 +29,7 @@ const basicChildComponent = getRawFile('./data/basic-child-component.raw.tsx');
 const basicFor = getRawFile('./data/basic-for.raw.tsx');
 const basicRef = getRawFile('./data/basic-ref.raw.tsx');
 const basicForwardRef = getRawFile('./data/basic-forwardRef.raw.tsx');
+const dontForwardRef = getRawFile('./data/dont-forwardRef.raw.tsx');
 const basicForwardRefMetadata = getRawFile('./data/basic-forwardRef-metadata.raw.tsx');
 const basicRefPrevious = getRawFile('./data/basic-ref-usePrevious.raw.tsx');
 const basicRefAssignment = getRawFile('./data/basic-ref-assignment.raw.tsx');
@@ -228,6 +229,7 @@ const FOR_SHOW_TESTS: Tests = {
 const FORWARD_REF_TESTS: Tests = {
   basicForwardRef,
   basicForwardRefMetadata,
+  dontForwardRef
 };
 
 const SHOW_TESTS: Tests = {
diff --git a/packages/core/src/generators/react/blocks.ts b/packages/core/src/generators/react/blocks.ts
index a9592c67cf..85ebf864b6 100644
--- a/packages/core/src/generators/react/blocks.ts
+++ b/packages/core/src/generators/react/blocks.ts
@@ -146,7 +146,7 @@ const BINDING_MAPPERS: {
     if (regexp.test(value)) {
       const match = regexp.exec(value);
       const prop = match?.[2];
-      if (prop) {
+      if (prop && options?.forwardRef === prop) {
         return [ref, prop];
       }
     }
diff --git a/packages/core/src/generators/react/generator.ts b/packages/core/src/generators/react/generator.ts
index 3833f92470..cc604b167a 100644
--- a/packages/core/src/generators/react/generator.ts
+++ b/packages/core/src/generators/react/generator.ts
@@ -6,7 +6,6 @@ import { createMitosisNode } from '../../helpers/create-mitosis-node';
 import { dedent } from '../../helpers/dedent';
 import { fastClone } from '../../helpers/fast-clone';
 import { getRefs } from '../../helpers/get-refs';
-import { getPropsRef } from '../../helpers/get-props-ref';
 import {
   stringifyContextValue,
   getStateObjectStringFromComponent,
@@ -39,6 +38,7 @@ import { blockToReact } from './blocks';
 import { mergeOptions } from '../../helpers/merge-options';
 import { stripNewlinesInStrings } from '../../helpers/replace-new-lines-in-strings';
 import { isRootTextNode } from '../../helpers/is-root-text-node';
+import { getReactPropsRef } from './refs';
 
 export const contextPropDrillingKey = '_context';
 
@@ -263,15 +263,15 @@ const _componentToReact = (
 
   let hasState = checkHasState(json);
 
-  const [forwardRef, hasPropRef] = getPropsRef(json);
+  const [forwardRef, hasPropRef] = getReactPropsRef(json);
   const isForwardRef = !options.preact && Boolean(json.meta.useMetadata?.forwardRef || hasPropRef);
   if (isForwardRef) {
     const meta = json.meta.useMetadata?.forwardRef as string;
     options.forwardRef = meta || forwardRef;
   }
   const forwardRefType =
-    options.typescript && json.propsTypeRef && forwardRef && json.propsTypeRef !== 'any'
-      ? `<${json.propsTypeRef}["${forwardRef}"]>`
+    options.typescript && json.propsTypeRef && options.forwardRef && json.propsTypeRef !== 'any'
+      ? `<${json.propsTypeRef}["${options.forwardRef}"]>`
       : '';
 
   if (options.stateType === 'builder') {
@@ -313,7 +313,7 @@ const _componentToReact = (
   if (allRefs.length) {
     reactLibImports.add('useRef');
   }
-  if (!options.preact && hasPropRef) {
+  if (!options.preact && options.forwardRef) {
     reactLibImports.add('forwardRef');
   }
   if (
diff --git a/packages/core/src/generators/react/refs.ts b/packages/core/src/generators/react/refs.ts
new file mode 100644
index 0000000000..bdbb67cdfc
--- /dev/null
+++ b/packages/core/src/generators/react/refs.ts
@@ -0,0 +1,27 @@
+import traverse from 'traverse';
+import { MitosisComponent } from '../../types/mitosis-component';
+import { isMitosisNode } from '../../helpers/is-mitosis-node';
+
+export function getReactPropsRef(json: MitosisComponent, shouldRemove?: boolean): [string, boolean] {
+  let has = false;
+  let prop = '';
+  traverse(json).forEach(function (item) {
+    if (isMitosisNode(item)) {
+      const binding = item.bindings.ref;
+      const regexp = /(.+)?props\.(ref)( |\)|;|\()?$/;
+      if (binding && regexp.test(binding.code)) {
+        const match = regexp.exec(binding.code);
+        const _prop = match?.[2];
+        if (_prop) {
+          prop = _prop;
+        }
+        if (shouldRemove) {
+          delete item.bindings.ref;
+        }
+        has = true;
+        this.stop();
+      }
+    }
+  });
+  return [prop, has];
+}
diff --git a/packages/core/src/helpers/get-props.ts b/packages/core/src/helpers/get-props.ts
index 60e009b69e..bb451202f9 100644
--- a/packages/core/src/helpers/get-props.ts
+++ b/packages/core/src/helpers/get-props.ts
@@ -14,7 +14,8 @@ const prohibitedKeywordRE = new RegExp(
       'extends,finally,continue,debugger,function,arguments,typeof,void,' +
       // both below conditions added based on https://github.com/vuejs/vue/blob/e80cd09fff570df57d608f8f5aaccee6d7f31917/src/core/instance/state.ts#L89-L96
       // below line added from https://github.com/vuejs/vue/blob/8880b55d52f8d873f79ef67436217c8752cddef5/src/shared/util.ts#L130
-      'key,ref,slot,slot-scope,is,' +
+      // `ref` is not included in this prohibited list, as React handles `ref` as a `forwardRef` properly
+      'key,slot,slot-scope,is,' +
       // below line added from https://github.com/vuejs/vue/blob/72aed6a149b94b5b929fb47370a7a6d4cb7491c5/src/platforms/web/util/attrs.ts#L5
       'style'
     )

From 06673d97fd39b19c9c6d8b312668b4df3dc5a97b Mon Sep 17 00:00:00 2001
From: Corbin Crutchley <corbin.crutchley@nwyc.com>
Date: Tue, 9 May 2023 06:26:38 -0700
Subject: [PATCH 4/8] chore: update forwardRef docs

---
 docs/hooks.md | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/docs/hooks.md b/docs/hooks.md
index c613fd62cd..544c1e62e8 100644
--- a/docs/hooks.md
+++ b/docs/hooks.md
@@ -52,13 +52,13 @@ export default function MyComponent() {
 
 <details>
 
-In React you may need to wrap your component with `forwardRef` to provide direct access to an element (`input` for example). You can do this by using using a `prop` value as the `ref`
+In React you may need to wrap your component with `forwardRef` to pass a `ref` property to a component. You can do this by naming one of your Mitosis `prop`s `ref`
 
 _Mitosis input_
 
 ```typescript
 export default function MyInput(props) {
-  return <input ref={props.inputRef} />;
+  return <input ref={props.ref} />;
 }
 ```
 
@@ -67,8 +67,8 @@ _Mitosis output_
 ```typescript
 import { forwardRef } from 'react';
 
-export default forwardRef(function MyInput(props, inputRef) {
-  return <input ref={inputRef} />;
+export default forwardRef(function MyInput(props, ref) {
+  return <input ref={ref} />;
 });
 ```
 

From 644b64d1498d7e11d007cc4ce8140b2ed02f081b Mon Sep 17 00:00:00 2001
From: Corbin Crutchley <git@crutchcorn.dev>
Date: Tue, 16 May 2023 06:17:43 -0700
Subject: [PATCH 5/8] chore: apply formatting

---
 packages/core/src/__tests__/test-generator.ts | 2 +-
 packages/core/src/generators/react/refs.ts    | 5 ++++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/core/src/__tests__/test-generator.ts b/packages/core/src/__tests__/test-generator.ts
index c7c09674a5..81bcdd0664 100644
--- a/packages/core/src/__tests__/test-generator.ts
+++ b/packages/core/src/__tests__/test-generator.ts
@@ -231,7 +231,7 @@ const FOR_SHOW_TESTS: Tests = {
 const FORWARD_REF_TESTS: Tests = {
   basicForwardRef,
   basicForwardRefMetadata,
-  dontForwardRef
+  dontForwardRef,
 };
 
 const SHOW_TESTS: Tests = {
diff --git a/packages/core/src/generators/react/refs.ts b/packages/core/src/generators/react/refs.ts
index bdbb67cdfc..b19c1326be 100644
--- a/packages/core/src/generators/react/refs.ts
+++ b/packages/core/src/generators/react/refs.ts
@@ -2,7 +2,10 @@ import traverse from 'traverse';
 import { MitosisComponent } from '../../types/mitosis-component';
 import { isMitosisNode } from '../../helpers/is-mitosis-node';
 
-export function getReactPropsRef(json: MitosisComponent, shouldRemove?: boolean): [string, boolean] {
+export function getReactPropsRef(
+  json: MitosisComponent,
+  shouldRemove?: boolean,
+): [string, boolean] {
   let has = false;
   let prop = '';
   traverse(json).forEach(function (item) {

From 4702447d528714dcb94b4075edbea2084bfbc746 Mon Sep 17 00:00:00 2001
From: Corbin Crutchley <git@crutchcorn.dev>
Date: Mon, 22 May 2023 21:45:12 -0700
Subject: [PATCH 6/8] chore: add target to getProps to validate Vue

---
 packages/core/src/generators/angular.ts          | 2 +-
 packages/core/src/generators/html.ts             | 2 +-
 packages/core/src/generators/lit/generate.ts     | 2 +-
 packages/core/src/generators/stencil/generate.ts | 2 +-
 packages/core/src/generators/svelte/svelte.ts    | 2 +-
 packages/core/src/generators/vue/vue.ts          | 2 +-
 packages/core/src/helpers/get-props.ts           | 9 ++++++---
 7 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/packages/core/src/generators/angular.ts b/packages/core/src/generators/angular.ts
index 1b5ca49543..808931adca 100644
--- a/packages/core/src/generators/angular.ts
+++ b/packages/core/src/generators/angular.ts
@@ -357,7 +357,7 @@ export const componentToAngular: TranspilerGenerator<ToAngularOptions> =
     });
     const hasConstructor = Boolean(injectables.length || json.hooks?.onInit);
 
-    const props = getProps(json);
+    const props = getProps(json, "angular");
     // prevent jsx props from showing up as @Input
     if (hasPropRef) {
       props.delete(forwardProp);
diff --git a/packages/core/src/generators/html.ts b/packages/core/src/generators/html.ts
index 259db92c81..fab4c8d463 100644
--- a/packages/core/src/generators/html.ts
+++ b/packages/core/src/generators/html.ts
@@ -891,7 +891,7 @@ export const componentToCustomElement: TranspilerGenerator<ToHtmlOptions> =
     const childComponents = getChildComponents(json, useOptions);
     const componentHasProps = hasProps(json);
     const componentHasStatefulDom = hasStatefulDom(json);
-    const props = getProps(json);
+    const props = getProps(json, "html");
     // prevent jsx props from showing up as @Input
     if (hasPropRef) {
       props.delete(forwardProp);
diff --git a/packages/core/src/generators/lit/generate.ts b/packages/core/src/generators/lit/generate.ts
index 72e2a216fb..055810311b 100644
--- a/packages/core/src/generators/lit/generate.ts
+++ b/packages/core/src/generators/lit/generate.ts
@@ -133,7 +133,7 @@ export const componentToLit: TranspilerGenerator<ToLitOptions> =
     if (options.plugins) {
       json = runPreJsonPlugins(json, options.plugins);
     }
-    const props = getProps(component);
+    const props = getProps(component, "lit");
     let css = collectCss(json);
 
     const domRefs = getRefs(json);
diff --git a/packages/core/src/generators/stencil/generate.ts b/packages/core/src/generators/stencil/generate.ts
index 8e8d5e47da..f58f5d1d4d 100644
--- a/packages/core/src/generators/stencil/generate.ts
+++ b/packages/core/src/generators/stencil/generate.ts
@@ -103,7 +103,7 @@ export const componentToStencil: TranspilerGenerator<ToStencilOptions> =
     if (options.plugins) {
       json = runPreJsonPlugins(json, options.plugins);
     }
-    const props = getProps(component);
+    const props = getProps(component, "stencil");
     let css = collectCss(json);
 
     mapRefs(component, (refName) => `this.${refName}`);
diff --git a/packages/core/src/generators/svelte/svelte.ts b/packages/core/src/generators/svelte/svelte.ts
index c8bceec2d0..64682123ad 100644
--- a/packages/core/src/generators/svelte/svelte.ts
+++ b/packages/core/src/generators/svelte/svelte.ts
@@ -154,7 +154,7 @@ export const componentToSvelte: TranspilerGenerator<ToSvelteOptions> =
 
     gettersToFunctions(json);
 
-    const props = Array.from(getProps(json)).filter((prop) => !isSlotProperty(prop));
+    const props = Array.from(getProps(json, "svelte")).filter((prop) => !isSlotProperty(prop));
 
     const refs = Array.from(getRefs(json))
       .map(stripStateAndProps({ json, options }))
diff --git a/packages/core/src/generators/vue/vue.ts b/packages/core/src/generators/vue/vue.ts
index 133599aba8..7fd590cda5 100644
--- a/packages/core/src/generators/vue/vue.ts
+++ b/packages/core/src/generators/vue/vue.ts
@@ -166,7 +166,7 @@ const componentToVue: TranspilerGenerator<Partial<ToVueOptions>> =
     }
 
     // need to run this before we process the component's code
-    const props = Array.from(getProps(component));
+    const props = Array.from(getProps(component, "vue"));
     const elementProps = props.filter((prop) => !isSlotProperty(prop));
     const slotsProps = props.filter((prop) => isSlotProperty(prop));
 
diff --git a/packages/core/src/helpers/get-props.ts b/packages/core/src/helpers/get-props.ts
index bb451202f9..9682fde2bb 100644
--- a/packages/core/src/helpers/get-props.ts
+++ b/packages/core/src/helpers/get-props.ts
@@ -1,12 +1,13 @@
 import traverse from 'traverse';
 import { MitosisComponent } from '../types/mitosis-component';
+import { Target } from '../types/config';
 
 const propsRegex = /props\s*\.\s*([a-zA-Z0-9_\$]+)/;
 const allPropsMatchesRegex = new RegExp(propsRegex, 'g');
 
 // copied from https://github.com/vuejs/core/blob/fa6556a0d56eeff1fec4f948460351ccf8f99f35/packages/compiler-core/src/validateExpression.ts
 // typeof, instanceof and in are allowed
-const prohibitedKeywordRE = new RegExp(
+const getProhibitedKeywordRE = (target: Target) => new RegExp(
   '\\b' +
     (
       'do,if,for,let,new,try,var,case,else,with,await,break,catch,class,const,' +
@@ -14,8 +15,9 @@ const prohibitedKeywordRE = new RegExp(
       'extends,finally,continue,debugger,function,arguments,typeof,void,' +
       // both below conditions added based on https://github.com/vuejs/vue/blob/e80cd09fff570df57d608f8f5aaccee6d7f31917/src/core/instance/state.ts#L89-L96
       // below line added from https://github.com/vuejs/vue/blob/8880b55d52f8d873f79ef67436217c8752cddef5/src/shared/util.ts#L130
-      // `ref` is not included in this prohibited list, as React handles `ref` as a `forwardRef` properly
       'key,slot,slot-scope,is,' +
+      // React handles `ref` as a `forwardRef` properly, but should be included in Vue from the same list as the above line
+      target === 'react' ? '' : 'ref' +
       // below line added from https://github.com/vuejs/vue/blob/72aed6a149b94b5b929fb47370a7a6d4cb7491c5/src/platforms/web/util/attrs.ts#L5
       'style'
     )
@@ -27,7 +29,8 @@ const prohibitedKeywordRE = new RegExp(
 /**
  * Get props used in the components by reference
  */
-export const getProps = (json: MitosisComponent) => {
+export const getProps = (json: MitosisComponent, target: Target) => {
+  const prohibitedKeywordRE = getProhibitedKeywordRE(target);
   const props = new Set<string>();
   traverse(json).forEach(function (item) {
     if (typeof item === 'string') {

From a6f593428d9173a1455d9460bc7c9ed988805e24 Mon Sep 17 00:00:00 2001
From: Corbin Crutchley <git@crutchcorn.dev>
Date: Mon, 22 May 2023 21:45:24 -0700
Subject: [PATCH 7/8] chore: update snapshots

---
 .../__snapshots__/marko.test.ts.snap          |   8 +-
 .../__tests__/__snapshots__/qwik.test.ts.snap | 703 ++++++++++++------
 2 files changed, 493 insertions(+), 218 deletions(-)

diff --git a/packages/core/src/__tests__/__snapshots__/marko.test.ts.snap b/packages/core/src/__tests__/__snapshots__/marko.test.ts.snap
index c3ea5d1312..d98d94bc15 100644
--- a/packages/core/src/__tests__/__snapshots__/marko.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/marko.test.ts.snap
@@ -1385,13 +1385,13 @@ exports[`Marko > jsx > Javascript Test > basicForwardRef 1`] = `
 }
 
 style { 
-  .input-7c942903 {
+  .input-55669c1e {
     color: red;
   }
 }
 <div>
   <input
-    class=\\"input-7c942903\\"
+    class=\\"input-55669c1e\\"
     key=\\"propsRef\\"
     value=(state.name)
     on-input(event => state.name = event.target.value)
@@ -3693,13 +3693,13 @@ exports[`Marko > jsx > Typescript Test > basicForwardRef 1`] = `
 }
 
 style { 
-  .input-014e706f {
+  .input-421e0008 {
     color: red;
   }
 }
 <div>
   <input
-    class=\\"input-014e706f\\"
+    class=\\"input-421e0008\\"
     key=\\"propsRef\\"
     value=(state.name)
     on-input(event => state.name = event.target.value)
diff --git a/packages/core/src/__tests__/__snapshots__/qwik.test.ts.snap b/packages/core/src/__tests__/__snapshots__/qwik.test.ts.snap
index 10fc151271..41f1696441 100644
--- a/packages/core/src/__tests__/__snapshots__/qwik.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/qwik.test.ts.snap
@@ -18,7 +18,13 @@ exports[`qwik > Accordion 1`] = `
   });
 };
 ",
-  "low.jsx": "import { qrl, useStore, useStylesScopedQrl } from \\"@builder.io/qwik\\";
+  "low.jsx": "import {
+  Fragment,
+  h,
+  qrl,
+  useStore,
+  useStylesScopedQrl,
+} from \\"@builder.io/qwik\\";
 
 export const MyComponentStyles = \`.csw5022{display:flex;flex-direction:column;position:relative;flex-shrink:0;box-sizing:border-box;margin-top:20px;align-items:stretch}.csanagh{margin-top:10px;position:relative;display:flex;align-items:stretch;flex-direction:column;padding-bottom:10px}.c4qyc1p{position:relative;display:flex;align-items:stretch;flex-direction:column;margin-top:10px;padding-bottom:10px}.crwdrpw{text-align:left;display:flex;flex-direction:column}.ctcw2m4{padding-top:50px;text-align:left;display:flex;flex-direction:column;padding-bottom:50px}\`;
 export const MyComponentOnMount = (p) => {
@@ -336,7 +342,13 @@ exports[`qwik > For 1`] = `
   });
 };
 ",
-  "low.jsx": "import { qrl, useStore, useStylesScopedQrl } from \\"@builder.io/qwik\\";
+  "low.jsx": "import {
+  Fragment,
+  h,
+  qrl,
+  useStore,
+  useStylesScopedQrl,
+} from \\"@builder.io/qwik\\";
 
 export const MyComponentStyles = \`.cvdfnp5{display:flex;flex-direction:column;position:relative;flex-shrink:0;box-sizing:border-box;margin-top:0px;padding-left:20px;padding-right:20px;padding-top:50px;padding-bottom:50px;width:100vw;margin-left:calc(50% - 50vw)}.cz5wnof{width:100%;align-self:stretch;flex-grow:1;box-sizing:border-box;max-width:1200px;display:flex;flex-direction:column;align-items:stretch;margin-left:auto;margin-right:auto}.cdrk993{text-align:center}\`;
 export const MyComponentOnMount = (p) => {
@@ -418,7 +430,7 @@ export const __proxyMerge__ = function __proxyMerge__(state, local) {
   });
 };
 ",
-  "med.jsx": "import { componentQrl, qrl } from \\"@builder.io/qwik\\";
+  "med.jsx": "import { componentQrl, h, qrl } from \\"@builder.io/qwik\\";
 
 export const MyComponent = componentQrl(
   qrl(\\"./low.js\\", \\"MyComponentOnMount\\", [])
@@ -488,8 +500,8 @@ export const __proxyMerge__ = function __proxyMerge__(state, local) {
 };
 ",
   "med.js": "import {
-  componentQrl,
   Fragment,
+  componentQrl,
   h,
   qrl,
   useStore,
@@ -725,8 +737,8 @@ export const __proxyMerge__ = function __proxyMerge__(state, local) {
 };
 ",
   "med.js": "import {
-  componentQrl,
   Fragment,
+  componentQrl,
   h,
   qrl,
   useStore,
@@ -1062,7 +1074,13 @@ export const __proxyMerge__ = function __proxyMerge__(state, local) {
 ",
   "low.js": "import { CoreButton } from \\"./med.js\\";
 
-import { h, qrl, useStore, useStylesScopedQrl } from \\"@builder.io/qwik\\";
+import {
+  Fragment,
+  h,
+  qrl,
+  useStore,
+  useStylesScopedQrl,
+} from \\"@builder.io/qwik\\";
 
 export const MyComponentStyles = \`.c9nzze9{display:flex;flex-direction:column;position:relative;flex-shrink:0;box-sizing:border-box;margin-top:20px;appearance:none;padding-top:15px;padding-bottom:15px;padding-left:25px;padding-right:25px;background-color:#3898EC;color:white;border-radius:4px;text-align:center;cursor:pointer}\`;
 export const MyComponentOnMount = (p) => {
@@ -1197,7 +1215,13 @@ exports[`qwik > component > bindings 2`] = `
 ",
   "low.jsx": "import { ComponentD187055AF171488FAD843ACF045D6BF7 } from \\"./med.js\\";
 
-import { qrl, useStore, useStylesScopedQrl } from \\"@builder.io/qwik\\";
+import {
+  Fragment,
+  h,
+  qrl,
+  useStore,
+  useStylesScopedQrl,
+} from \\"@builder.io/qwik\\";
 
 export const ComponentD187055AF171488FAD843ACF045D6BF7Styles = \`.cj49hqu{display:flex;flex-direction:column;position:relative;flex-shrink:0;box-sizing:border-box;margin-top:20px;height:auto;background-color:rgba(227, 227, 227, 1);border-radius:5px;border-style:solid;border-color:rgb(0, 0, 0);border-width:1px;padding-bottom:30px}.cjrqfb1{display:flex;flex-direction:column;position:relative;flex-shrink:0;box-sizing:border-box;margin-top:20px;line-height:normal;height:auto;text-align:center}\`;
 export const ComponentD187055AF171488FAD843ACF045D6BF7OnMount = (p) => {
@@ -1670,7 +1694,13 @@ exports[`qwik > hello_world > stylesheet 1`] = `
   });
 };
 ",
-  "low.jsx": "import { qrl, useStore, useStylesScopedQrl } from \\"@builder.io/qwik\\";
+  "low.jsx": "import {
+  Fragment,
+  h,
+  qrl,
+  useStore,
+  useStylesScopedQrl,
+} from \\"@builder.io/qwik\\";
 
 export const MyComponentStyles = \`.crt27f8{display:flex;flex-direction:column;position:relative;flex-shrink:0;box-sizing:border-box;margin-top:123px;line-height:normal;height:auto;text-align:center;margin-left:auto;margin-right:auto}\`;
 export const MyComponentOnMount = (p) => {
@@ -1741,7 +1771,13 @@ export const __proxyMerge__ = function __proxyMerge__(state, local) {
 `;
 
 exports[`qwik > jsx > Javascript Test > Basic 1`] = `
-"import { component$, useStore, useStylesScoped$ } from \\"@builder.io/qwik\\";
+"import {
+  Fragment,
+  component$,
+  h,
+  useStore,
+  useStylesScoped$,
+} from \\"@builder.io/qwik\\";
 
 export const DEFAULT_VALUES = {
   name: \\"Steve\\",
@@ -1776,7 +1812,7 @@ export const STYLES = \`
 `;
 
 exports[`qwik > jsx > Javascript Test > Basic 2`] = `
-"import { component$, useStore } from \\"@builder.io/qwik\\";
+"import { Fragment, component$, h, useStore } from \\"@builder.io/qwik\\";
 
 export const MyBasicForShowComponent = component$((props) => {
   const state = useStore({ name: \\"PatrickJS\\", names: [\\"Steve\\", \\"PatrickJS\\"] });
@@ -1807,7 +1843,9 @@ export default MyBasicForShowComponent;
 
 exports[`qwik > jsx > Javascript Test > Basic Context 1`] = `
 "import {
+  Fragment,
   component$,
+  h,
   useContext,
   useContextProvider,
   useStore,
@@ -1815,7 +1853,7 @@ exports[`qwik > jsx > Javascript Test > Basic Context 1`] = `
   useVisibleTask$,
 } from \\"@builder.io/qwik\\";
 
-import { Injector, MyService } from \\"@dummy/injection-js\\";
+import { Injector, MyService, createInjector } from \\"@dummy/injection-js\\";
 
 export const onChange = function onChange(props, state, myService) {
   const change = myService.method(\\"change\\");
@@ -1849,7 +1887,9 @@ export default MyBasicComponent;
 
 exports[`qwik > jsx > Javascript Test > Basic OnMount Update 1`] = `
 "import {
+  Fragment,
   component$,
+  h,
   useStore,
   useTask$,
   useVisibleTask$,
@@ -1872,7 +1912,13 @@ export default MyBasicOnMountUpdateComponent;
 `;
 
 exports[`qwik > jsx > Javascript Test > Basic Outputs 1`] = `
-"import { component$, useStore, useVisibleTask$ } from \\"@builder.io/qwik\\";
+"import {
+  Fragment,
+  component$,
+  h,
+  useStore,
+  useVisibleTask$,
+} from \\"@builder.io/qwik\\";
 
 export const MyBasicOutputsComponent = component$((props) => {
   const state = useStore({ name: \\"PatrickJS\\" });
@@ -1889,7 +1935,13 @@ export default MyBasicOutputsComponent;
 `;
 
 exports[`qwik > jsx > Javascript Test > Basic Outputs Meta 1`] = `
-"import { component$, useStore, useVisibleTask$ } from \\"@builder.io/qwik\\";
+"import {
+  Fragment,
+  component$,
+  h,
+  useStore,
+  useVisibleTask$,
+} from \\"@builder.io/qwik\\";
 
 export const MyBasicOutputsComponent = component$((props) => {
   const state = useStore({ name: \\"PatrickJS\\" });
@@ -1906,7 +1958,7 @@ export default MyBasicOutputsComponent;
 `;
 
 exports[`qwik > jsx > Javascript Test > BasicAttribute 1`] = `
-"import { component$ } from \\"@builder.io/qwik\\";
+"import { Fragment, component$, h } from \\"@builder.io/qwik\\";
 
 export const MyComponent = component$((props) => {
   return <input autocapitalize=\\"on\\" autocomplete=\\"on\\" spellcheck={true} />;
@@ -1919,7 +1971,7 @@ export default MyComponent;
 exports[`qwik > jsx > Javascript Test > BasicBooleanAttribute 1`] = `
 "import MyBooleanAttributeComponent from \\"./basic-boolean-attribute-component.raw\\";
 
-import { component$, Slot } from \\"@builder.io/qwik\\";
+import { Fragment, Slot, component$, h } from \\"@builder.io/qwik\\";
 
 export const MyBooleanAttribute = component$((props) => {
   return (
@@ -1938,9 +1990,11 @@ export default MyBooleanAttribute;
 `;
 
 exports[`qwik > jsx > Javascript Test > BasicChildComponent 1`] = `
-"import MyBasicComponent from \\"./basic.raw\\";
+"import MyBasicOnMountUpdateComponent from \\"./basic-onMount-update.raw\\";
+
+import MyBasicComponent from \\"./basic.raw\\";
 
-import { component$, useStore } from \\"@builder.io/qwik\\";
+import { Fragment, component$, h, useStore } from \\"@builder.io/qwik\\";
 
 export const MyBasicChildComponent = component$((props) => {
   const state = useStore({ dev: \\"PatrickJS\\", name: \\"Steve\\" });
@@ -1964,8 +2018,9 @@ export default MyBasicChildComponent;
 
 exports[`qwik > jsx > Javascript Test > BasicFor 1`] = `
 "import {
-  component$,
   Fragment,
+  component$,
+  h,
   useStore,
   useVisibleTask$,
 } from \\"@builder.io/qwik\\";
@@ -2002,8 +2057,9 @@ export default MyBasicForComponent;
 
 exports[`qwik > jsx > Javascript Test > BasicRef 1`] = `
 "import {
-  component$,
   Fragment,
+  component$,
+  h,
   useSignal,
   useStore,
   useStylesScoped$,
@@ -2066,7 +2122,7 @@ export const STYLES = \`
 `;
 
 exports[`qwik > jsx > Javascript Test > BasicRefAssignment 1`] = `
-"import { component$, useSignal } from \\"@builder.io/qwik\\";
+"import { Fragment, component$, h, useSignal } from \\"@builder.io/qwik\\";
 
 export const handlerClick = function handlerClick(
   props,
@@ -2094,7 +2150,14 @@ export default MyBasicRefAssignmentComponent;
 `;
 
 exports[`qwik > jsx > Javascript Test > BasicRefPrevious 1`] = `
-"import { component$, useSignal, useStore, useTask$ } from \\"@builder.io/qwik\\";
+"import {
+  Fragment,
+  component$,
+  h,
+  useSignal,
+  useStore,
+  useTask$,
+} from \\"@builder.io/qwik\\";
 
 export function usePrevious(value) {
   // The ref object is a generic container whose current property is mutable ...
@@ -2131,7 +2194,7 @@ export default MyPreviousComponent;
 `;
 
 exports[`qwik > jsx > Javascript Test > Button 1`] = `
-"import { component$ } from \\"@builder.io/qwik\\";
+"import { Fragment, component$, h } from \\"@builder.io/qwik\\";
 
 export const Button = component$((props) => {
   return (
@@ -2159,7 +2222,7 @@ export default Button;
 `;
 
 exports[`qwik > jsx > Javascript Test > Columns 1`] = `
-"import { component$, useStylesScoped$ } from \\"@builder.io/qwik\\";
+"import { Fragment, component$, h, useStylesScoped$ } from \\"@builder.io/qwik\\";
 
 export const getColumns = function getColumns(props, state) {
   return props.columns || [];
@@ -2229,7 +2292,7 @@ export const STYLES = \`
 exports[`qwik > jsx > Javascript Test > ContentSlotHtml 1`] = `
 "import { Slot } from \\"./med.js\\";
 
-import { component$ } from \\"@builder.io/qwik\\";
+import { Fragment, component$, h } from \\"@builder.io/qwik\\";
 
 export const ContentSlotCode = component$((props) => {
   return (
@@ -2252,7 +2315,14 @@ export default ContentSlotCode;
 exports[`qwik > jsx > Javascript Test > ContentSlotJSX 1`] = `
 "import { Slot } from \\"./med.js\\";
 
-import { component$, useComputed$, useStore } from \\"@builder.io/qwik\\";
+import {
+  Fragment,
+  Slot,
+  component$,
+  h,
+  useComputed$,
+  useStore,
+} from \\"@builder.io/qwik\\";
 
 export const show = function show(props, state) {
   props.slotContent ? 1 : \\"\\";
@@ -2293,7 +2363,9 @@ export default ContentSlotJsxCode;
 
 exports[`qwik > jsx > Javascript Test > CustomCode 1`] = `
 "import {
+  Fragment,
   component$,
+  h,
   useSignal,
   useStore,
   useVisibleTask$,
@@ -2368,7 +2440,9 @@ export default CustomCode;
 
 exports[`qwik > jsx > Javascript Test > Embed 1`] = `
 "import {
+  Fragment,
   component$,
+  h,
   useSignal,
   useStore,
   useVisibleTask$,
@@ -2443,7 +2517,9 @@ export default CustomCode;
 
 exports[`qwik > jsx > Javascript Test > Form 1`] = `
 "import {
+  Fragment,
   component$,
+  h,
   useComputed$,
   useSignal,
   useStore,
@@ -2748,8 +2824,10 @@ export const STYLES = \`
 
 exports[`qwik > jsx > Javascript Test > Image 1`] = `
 "import {
-  component$,
+  Fragment,
   Slot,
+  component$,
+  h,
   useSignal,
   useStore,
   useStylesScoped$,
@@ -2845,7 +2923,7 @@ export const STYLES = \`
 `;
 
 exports[`qwik > jsx > Javascript Test > Image State 1`] = `
-"import { component$, Fragment, useStore } from \\"@builder.io/qwik\\";
+"import { Fragment, component$, h, useStore } from \\"@builder.io/qwik\\";
 
 export const ImgStateComponent = component$((props) => {
   const state = useStore({
@@ -2871,7 +2949,7 @@ export default ImgStateComponent;
 `;
 
 exports[`qwik > jsx > Javascript Test > Img 1`] = `
-"import { component$ } from \\"@builder.io/qwik\\";
+"import { Fragment, component$, h } from \\"@builder.io/qwik\\";
 
 import { Builder } from \\"@builder.io/sdk\\";
 
@@ -2895,7 +2973,7 @@ export default ImgComponent;
 `;
 
 exports[`qwik > jsx > Javascript Test > Input 1`] = `
-"import { component$ } from \\"@builder.io/qwik\\";
+"import { Fragment, component$, h } from \\"@builder.io/qwik\\";
 
 import { Builder } from \\"@builder.io/sdk\\";
 
@@ -2923,7 +3001,7 @@ export default FormInputComponent;
 `;
 
 exports[`qwik > jsx > Javascript Test > RawText 1`] = `
-"import { component$ } from \\"@builder.io/qwik\\";
+"import { Fragment, component$, h } from \\"@builder.io/qwik\\";
 
 export const RawText = component$((props) => {
   return (
@@ -2939,7 +3017,7 @@ export default RawText;
 `;
 
 exports[`qwik > jsx > Javascript Test > Section 1`] = `
-"import { component$, Slot } from \\"@builder.io/qwik\\";
+"import { Fragment, Slot, component$, h } from \\"@builder.io/qwik\\";
 
 export const SectionComponent = component$((props) => {
   return (
@@ -2963,7 +3041,7 @@ export default SectionComponent;
 `;
 
 exports[`qwik > jsx > Javascript Test > Section 2`] = `
-"import { component$, Slot, useStore } from \\"@builder.io/qwik\\";
+"import { Fragment, Slot, component$, h, useStore } from \\"@builder.io/qwik\\";
 
 export const SectionStateComponent = component$((props) => {
   const state = useStore({ items: [42], max: 42 });
@@ -2993,7 +3071,7 @@ export default SectionStateComponent;
 `;
 
 exports[`qwik > jsx > Javascript Test > Select 1`] = `
-"import { component$ } from \\"@builder.io/qwik\\";
+"import { Fragment, component$, h } from \\"@builder.io/qwik\\";
 
 import { Builder } from \\"@builder.io/sdk\\";
 
@@ -3028,7 +3106,7 @@ export default SelectComponent;
 exports[`qwik > jsx > Javascript Test > SlotDefault 1`] = `
 "import { Slot } from \\"./med.js\\";
 
-import { component$ } from \\"@builder.io/qwik\\";
+import { Fragment, component$, h } from \\"@builder.io/qwik\\";
 
 export const SlotCode = component$((props) => {
   return (
@@ -3049,7 +3127,7 @@ exports[`qwik > jsx > Javascript Test > SlotHtml 1`] = `
 
 import { Slot } from \\"./med.js\\";
 
-import { component$ } from \\"@builder.io/qwik\\";
+import { Fragment, component$, h } from \\"@builder.io/qwik\\";
 
 export const SlotCode = component$((props) => {
   return (
@@ -3072,7 +3150,7 @@ export default SlotCode;
 exports[`qwik > jsx > Javascript Test > SlotJsx 1`] = `
 "import ContentSlotCode from \\"./content-slot-jsx.raw\\";
 
-import { component$ } from \\"@builder.io/qwik\\";
+import { Fragment, component$, h } from \\"@builder.io/qwik\\";
 
 export const SlotCode = component$((props) => {
   return (
@@ -3093,7 +3171,7 @@ export default SlotCode;
 exports[`qwik > jsx > Javascript Test > SlotNamed 1`] = `
 "import { Slot } from \\"./med.js\\";
 
-import { component$ } from \\"@builder.io/qwik\\";
+import { Fragment, component$, h } from \\"@builder.io/qwik\\";
 
 export const SlotCode = component$((props) => {
   return (
@@ -3111,7 +3189,9 @@ export default SlotCode;
 
 exports[`qwik > jsx > Javascript Test > Stamped.io 1`] = `
 "import {
+  Fragment,
   component$,
+  h,
   useStore,
   useStylesScoped$,
   useVisibleTask$,
@@ -3216,7 +3296,7 @@ export const STYLES = \`
 `;
 
 exports[`qwik > jsx > Javascript Test > Submit 1`] = `
-"import { component$ } from \\"@builder.io/qwik\\";
+"import { Fragment, component$, h } from \\"@builder.io/qwik\\";
 
 export const SubmitButton = component$((props) => {
   return (
@@ -3231,7 +3311,9 @@ export default SubmitButton;
 `;
 
 exports[`qwik > jsx > Javascript Test > Text 1`] = `
-"import { component$, useStore } from \\"@builder.io/qwik\\";
+"import { Fragment, component$, h, useStore } from \\"@builder.io/qwik\\";
+
+import { Builder } from \\"@builder.io/sdk\\";
 
 export const Text = component$((props) => {
   const state = useStore({ name: \\"Decadef20\\" });
@@ -3257,7 +3339,7 @@ export default Text;
 `;
 
 exports[`qwik > jsx > Javascript Test > Textarea 1`] = `
-"import { component$ } from \\"@builder.io/qwik\\";
+"import { Fragment, component$, h } from \\"@builder.io/qwik\\";
 
 export const Textarea = component$((props) => {
   return (
@@ -3276,7 +3358,7 @@ export default Textarea;
 `;
 
 exports[`qwik > jsx > Javascript Test > Video 1`] = `
-"import { component$ } from \\"@builder.io/qwik\\";
+"import { Fragment, component$, h } from \\"@builder.io/qwik\\";
 
 export const Video = component$((props) => {
   return (
@@ -3308,7 +3390,7 @@ export default Video;
 `;
 
 exports[`qwik > jsx > Javascript Test > arrowFunctionInUseStore 1`] = `
-"import { component$, useStore } from \\"@builder.io/qwik\\";
+"import { Fragment, component$, h, useStore } from \\"@builder.io/qwik\\";
 
 export const setName = function setName(props, state, value) {
   state.name = value;
@@ -3331,7 +3413,13 @@ export default MyComponent;
 `;
 
 exports[`qwik > jsx > Javascript Test > basicForNoTagReference 1`] = `
-"import { component$, useComputed$, useStore } from \\"@builder.io/qwik\\";
+"import {
+  Fragment,
+  component$,
+  h,
+  useComputed$,
+  useStore,
+} from \\"@builder.io/qwik\\";
 
 export const MyBasicForNoTagRefComponent = component$((props) => {
   const state = useStore({ TagName: \\"div\\", name: \\"VincentW\\", tag: \\"span\\" });
@@ -3358,7 +3446,13 @@ export default MyBasicForNoTagRefComponent;
 `;
 
 exports[`qwik > jsx > Javascript Test > basicForwardRef 1`] = `
-"import { component$, useStore, useStylesScoped$ } from \\"@builder.io/qwik\\";
+"import {
+  Fragment,
+  component$,
+  h,
+  useStore,
+  useStylesScoped$,
+} from \\"@builder.io/qwik\\";
 
 export const MyBasicForwardRefComponent = component$((props) => {
   useStylesScoped$(STYLES);
@@ -3388,7 +3482,13 @@ export const STYLES = \`
 `;
 
 exports[`qwik > jsx > Javascript Test > basicForwardRefMetadata 1`] = `
-"import { component$, useStore, useStylesScoped$ } from \\"@builder.io/qwik\\";
+"import {
+  Fragment,
+  component$,
+  h,
+  useStore,
+  useStylesScoped$,
+} from \\"@builder.io/qwik\\";
 
 export const MyBasicForwardRefComponent = component$((props) => {
   useStylesScoped$(STYLES);
@@ -3418,7 +3518,7 @@ export const STYLES = \`
 `;
 
 exports[`qwik > jsx > Javascript Test > class + ClassName + css 1`] = `
-"import { component$, useStylesScoped$ } from \\"@builder.io/qwik\\";
+"import { Fragment, component$, h, useStylesScoped$ } from \\"@builder.io/qwik\\";
 
 export const MyBasicComponent = component$((props) => {
   useStylesScoped$(STYLES);
@@ -3441,7 +3541,7 @@ export const STYLES = \`
 `;
 
 exports[`qwik > jsx > Javascript Test > class + css 1`] = `
-"import { component$, useStylesScoped$ } from \\"@builder.io/qwik\\";
+"import { Fragment, component$, h, useStylesScoped$ } from \\"@builder.io/qwik\\";
 
 export const MyBasicComponent = component$((props) => {
   useStylesScoped$(STYLES);
@@ -3464,7 +3564,7 @@ export const STYLES = \`
 `;
 
 exports[`qwik > jsx > Javascript Test > className + css 1`] = `
-"import { component$, useStylesScoped$ } from \\"@builder.io/qwik\\";
+"import { Fragment, component$, h, useStylesScoped$ } from \\"@builder.io/qwik\\";
 
 export const MyBasicComponent = component$((props) => {
   useStylesScoped$(STYLES);
@@ -3487,7 +3587,7 @@ export const STYLES = \`
 `;
 
 exports[`qwik > jsx > Javascript Test > className 1`] = `
-"import { component$, useStore } from \\"@builder.io/qwik\\";
+"import { Fragment, component$, h, useStore } from \\"@builder.io/qwik\\";
 
 export const ClassNameCode = component$((props) => {
   const state = useStore({ bindings: \\"a binding\\" });
@@ -3505,7 +3605,13 @@ export default ClassNameCode;
 `;
 
 exports[`qwik > jsx > Javascript Test > classState 1`] = `
-"import { component$, useStore, useStylesScoped$ } from \\"@builder.io/qwik\\";
+"import {
+  Fragment,
+  component$,
+  h,
+  useStore,
+  useStylesScoped$,
+} from \\"@builder.io/qwik\\";
 
 export const MyBasicComponent = component$((props) => {
   useStylesScoped$(STYLES);
@@ -3538,7 +3644,13 @@ export const STYLES = \`
 `;
 
 exports[`qwik > jsx > Javascript Test > contentState 1`] = `
-"import { component$, useContextProvider, useStore } from \\"@builder.io/qwik\\";
+"import {
+  Fragment,
+  component$,
+  h,
+  useContextProvider,
+  useStore,
+} from \\"@builder.io/qwik\\";
 
 import BuilderContext from \\"@dummy/context\\";
 
@@ -3559,7 +3671,7 @@ export default RenderContent;
 `;
 
 exports[`qwik > jsx > Javascript Test > defaultProps 1`] = `
-"import { component$ } from \\"@builder.io/qwik\\";
+"import { Fragment, component$, h } from \\"@builder.io/qwik\\";
 
 export const Button = component$((props) => {
   return (
@@ -3591,7 +3703,7 @@ export default Button;
 `;
 
 exports[`qwik > jsx > Javascript Test > defaultPropsOutsideComponent 1`] = `
-"import { component$ } from \\"@builder.io/qwik\\";
+"import { Fragment, component$, h } from \\"@builder.io/qwik\\";
 
 export const Button = component$((props) => {
   return (
@@ -3623,7 +3735,7 @@ export default Button;
 `;
 
 exports[`qwik > jsx > Javascript Test > defaultValsWithTypes 1`] = `
-"import { component$ } from \\"@builder.io/qwik\\";
+"import { Fragment, component$, h } from \\"@builder.io/qwik\\";
 
 export const DEFAULT_VALUES = {
   name: \\"Sami\\",
@@ -3637,7 +3749,13 @@ export default ComponentWithTypes;
 `;
 
 exports[`qwik > jsx > Javascript Test > dontForwardRef 1`] = `
-"import { component$, useStore, useStylesScoped$ } from \\"@builder.io/qwik\\";
+"import {
+  Fragment,
+  component$,
+  h,
+  useStore,
+  useStylesScoped$,
+} from \\"@builder.io/qwik\\";
 
 export const DontForwardRefComponent = component$((props) => {
   useStylesScoped$(STYLES);
@@ -3667,7 +3785,7 @@ export const STYLES = \`
 `;
 
 exports[`qwik > jsx > Javascript Test > expressionState 1`] = `
-"import { component$, useStore } from \\"@builder.io/qwik\\";
+"import { Fragment, component$, h, useStore } from \\"@builder.io/qwik\\";
 
 export const MyComponent = component$((props) => {
   const state = useStore({
@@ -3686,7 +3804,7 @@ export default MyComponent;
 exports[`qwik > jsx > Javascript Test > import types 1`] = `
 "import RenderBlock from \\"./builder-render-block.raw\\";
 
-import { component$ } from \\"@builder.io/qwik\\";
+import { Fragment, component$, h } from \\"@builder.io/qwik\\";
 
 export const getRenderContentProps = function getRenderContentProps(
   props,
@@ -3719,7 +3837,7 @@ export default RenderContent;
 `;
 
 exports[`qwik > jsx > Javascript Test > multipleOnUpdate 1`] = `
-"import { component$, useTask$ } from \\"@builder.io/qwik\\";
+"import { Fragment, component$, h, useTask$ } from \\"@builder.io/qwik\\";
 
 export const MultipleOnUpdate = component$((props) => {
   useTask$(({ track }) => {
@@ -3737,7 +3855,7 @@ export default MultipleOnUpdate;
 `;
 
 exports[`qwik > jsx > Javascript Test > multipleOnUpdateWithDeps 1`] = `
-"import { component$, useStore, useTask$ } from \\"@builder.io/qwik\\";
+"import { Fragment, component$, h, useStore, useTask$ } from \\"@builder.io/qwik\\";
 
 export const MultipleOnUpdateWithDeps = component$((props) => {
   const state = useStore({ a: \\"a\\", b: \\"b\\", c: \\"c\\", d: \\"d\\" });
@@ -3768,7 +3886,7 @@ export default MultipleOnUpdateWithDeps;
 `;
 
 exports[`qwik > jsx > Javascript Test > multipleSpreads 1`] = `
-"import { component$, useStore } from \\"@builder.io/qwik\\";
+"import { Fragment, component$, h, useStore } from \\"@builder.io/qwik\\";
 
 export const MyBasicComponent = component$((props) => {
   const state = useStore({
@@ -3785,7 +3903,7 @@ export default MyBasicComponent;
 `;
 
 exports[`qwik > jsx > Javascript Test > nestedShow 1`] = `
-"import { component$ } from \\"@builder.io/qwik\\";
+"import { Fragment, component$, h } from \\"@builder.io/qwik\\";
 
 export const NestedShow = component$((props) => {
   return (
@@ -3808,7 +3926,7 @@ export default NestedShow;
 `;
 
 exports[`qwik > jsx > Javascript Test > nestedStyles 1`] = `
-"import { component$, useStylesScoped$ } from \\"@builder.io/qwik\\";
+"import { Fragment, component$, h, useStylesScoped$ } from \\"@builder.io/qwik\\";
 
 export const NestedStyles = component$((props) => {
   useStylesScoped$(STYLES);
@@ -3849,7 +3967,13 @@ export const STYLES = \`
 `;
 
 exports[`qwik > jsx > Javascript Test > onInit & onMount 1`] = `
-"import { component$, useTask$, useVisibleTask$ } from \\"@builder.io/qwik\\";
+"import {
+  Fragment,
+  component$,
+  h,
+  useTask$,
+  useVisibleTask$,
+} from \\"@builder.io/qwik\\";
 
 export const OnInit = component$((props) => {
   useVisibleTask$(() => {
@@ -3867,7 +3991,7 @@ export default OnInit;
 `;
 
 exports[`qwik > jsx > Javascript Test > onInit 1`] = `
-"import { component$, useStore, useTask$ } from \\"@builder.io/qwik\\";
+"import { Fragment, component$, h, useStore, useTask$ } from \\"@builder.io/qwik\\";
 
 export const defaultValues = {
   name: \\"PatrickJS\\",
@@ -3887,7 +4011,7 @@ export default OnInit;
 `;
 
 exports[`qwik > jsx > Javascript Test > onMount 1`] = `
-"import { component$, useVisibleTask$ } from \\"@builder.io/qwik\\";
+"import { Fragment, component$, h, useVisibleTask$ } from \\"@builder.io/qwik\\";
 
 export const Comp = component$((props) => {
   useVisibleTask$(() => {
@@ -3902,7 +4026,7 @@ export default Comp;
 `;
 
 exports[`qwik > jsx > Javascript Test > onUpdate 1`] = `
-"import { component$, useTask$ } from \\"@builder.io/qwik\\";
+"import { Fragment, component$, h, useTask$ } from \\"@builder.io/qwik\\";
 
 export const OnUpdate = component$((props) => {
   useTask$(({ track }) => {
@@ -3917,7 +4041,7 @@ export default OnUpdate;
 `;
 
 exports[`qwik > jsx > Javascript Test > onUpdateWithDeps 1`] = `
-"import { component$, useStore, useTask$ } from \\"@builder.io/qwik\\";
+"import { Fragment, component$, h, useStore, useTask$ } from \\"@builder.io/qwik\\";
 
 export const OnUpdateWithDeps = component$((props) => {
   const state = useStore({ a: \\"a\\", b: \\"b\\" });
@@ -3936,7 +4060,7 @@ export default OnUpdateWithDeps;
 `;
 
 exports[`qwik > jsx > Javascript Test > preserveExportOrLocalStatement 1`] = `
-"import { component$ } from \\"@builder.io/qwik\\";
+"import { Fragment, component$, h } from \\"@builder.io/qwik\\";
 
 export const b = 3;
 export const foo = () => {};
@@ -3952,7 +4076,7 @@ export default MyBasicComponent;
 `;
 
 exports[`qwik > jsx > Javascript Test > preserveTyping 1`] = `
-"import { component$ } from \\"@builder.io/qwik\\";
+"import { Fragment, component$, h } from \\"@builder.io/qwik\\";
 
 export const MyBasicComponent = component$((props) => {
   return (
@@ -3965,7 +4089,7 @@ export default MyBasicComponent;
 `;
 
 exports[`qwik > jsx > Javascript Test > propsDestructure 1`] = `
-"import { component$, Slot, useStore } from \\"@builder.io/qwik\\";
+"import { Fragment, Slot, component$, h, useStore } from \\"@builder.io/qwik\\";
 
 export const MyBasicComponent = component$((props) => {
   const state = useStore({ name: \\"Decadef20\\" });
@@ -3984,7 +4108,7 @@ export default MyBasicComponent;
 `;
 
 exports[`qwik > jsx > Javascript Test > propsInterface 1`] = `
-"import { component$ } from \\"@builder.io/qwik\\";
+"import { Fragment, component$, h } from \\"@builder.io/qwik\\";
 
 export const MyBasicComponent = component$((props) => {
   return (
@@ -3997,7 +4121,7 @@ export default MyBasicComponent;
 `;
 
 exports[`qwik > jsx > Javascript Test > propsType 1`] = `
-"import { component$ } from \\"@builder.io/qwik\\";
+"import { Fragment, component$, h } from \\"@builder.io/qwik\\";
 
 export const MyBasicComponent = component$((props) => {
   return (
@@ -4010,7 +4134,7 @@ export default MyBasicComponent;
 `;
 
 exports[`qwik > jsx > Javascript Test > referencingFunInsideHook 1`] = `
-"import { component$, useTask$ } from \\"@builder.io/qwik\\";
+"import { Fragment, component$, h, useTask$ } from \\"@builder.io/qwik\\";
 
 export const foo = function foo(props, state, params) {};
 export const bar = function bar(props, state) {};
@@ -4061,7 +4185,9 @@ import RenderComponent from \\"./render-component\\";
 
 import RenderComponentWithContext from \\"./render-component-with-context\\";
 
-import { component$, useComputed$ } from \\"@builder.io/qwik\\";
+import RenderRepeatedBlock from \\"./render-repeated-block\\";
+
+import { Fragment, component$, h, useComputed$ } from \\"@builder.io/qwik\\";
 
 export const RenderBlock = component$((props) => {
   const state = {};
@@ -4300,7 +4426,9 @@ export default RenderBlock;
 
 exports[`qwik > jsx > Javascript Test > renderContentExample 1`] = `
 "import {
+  Fragment,
   component$,
+  h,
   useContextProvider,
   useStore,
   useStylesScoped$,
@@ -4362,7 +4490,7 @@ export const STYLES = \`
 `;
 
 exports[`qwik > jsx > Javascript Test > rootFragmentMultiNode 1`] = `
-"import { component$, Fragment } from \\"@builder.io/qwik\\";
+"import { Fragment, component$, h } from \\"@builder.io/qwik\\";
 
 export const Button = component$((props) => {
   return (
@@ -4390,7 +4518,7 @@ export default Button;
 `;
 
 exports[`qwik > jsx > Javascript Test > rootShow 1`] = `
-"import { component$ } from \\"@builder.io/qwik\\";
+"import { Fragment, component$, h } from \\"@builder.io/qwik\\";
 
 export const RenderStyles = component$((props) => {
   return <>{props.foo === \\"bar\\" ? <div>Bar</div> : <div>Foo</div>}</>;
@@ -4401,7 +4529,7 @@ export default RenderStyles;
 `;
 
 exports[`qwik > jsx > Javascript Test > self-referencing component 1`] = `
-"import { component$ } from \\"@builder.io/qwik\\";
+"import { Fragment, component$, h } from \\"@builder.io/qwik\\";
 
 export const MyComponent = component$((props) => {
   return (
@@ -4419,7 +4547,7 @@ export default MyComponent;
 `;
 
 exports[`qwik > jsx > Javascript Test > self-referencing component with children 1`] = `
-"import { component$, Slot } from \\"@builder.io/qwik\\";
+"import { Fragment, Slot, component$, h } from \\"@builder.io/qwik\\";
 
 export const MyComponent = component$((props) => {
   return (
@@ -4440,7 +4568,7 @@ export default MyComponent;
 `;
 
 exports[`qwik > jsx > Javascript Test > showWithFor 1`] = `
-"import { component$ } from \\"@builder.io/qwik\\";
+"import { Fragment, component$, h } from \\"@builder.io/qwik\\";
 
 export const NestedShow = component$((props) => {
   return (
@@ -4461,7 +4589,7 @@ export default NestedShow;
 `;
 
 exports[`qwik > jsx > Javascript Test > showWithRootText 1`] = `
-"import { component$ } from \\"@builder.io/qwik\\";
+"import { Fragment, component$, h } from \\"@builder.io/qwik\\";
 
 export const ShowRootText = component$((props) => {
   return <>{props.conditionA ? <>ContentA</> : <div>else-condition-A</div>}</>;
@@ -4472,7 +4600,7 @@ export default ShowRootText;
 `;
 
 exports[`qwik > jsx > Javascript Test > spreadAttrs 1`] = `
-"import { component$ } from \\"@builder.io/qwik\\";
+"import { Fragment, component$, h } from \\"@builder.io/qwik\\";
 
 export const MyBasicComponent = component$((props) => {
   return <input {...attrs} />;
@@ -4483,7 +4611,7 @@ export default MyBasicComponent;
 `;
 
 exports[`qwik > jsx > Javascript Test > spreadNestedProps 1`] = `
-"import { component$ } from \\"@builder.io/qwik\\";
+"import { Fragment, component$, h } from \\"@builder.io/qwik\\";
 
 export const MyBasicComponent = component$((props) => {
   return <input {...props.nested} />;
@@ -4494,7 +4622,7 @@ export default MyBasicComponent;
 `;
 
 exports[`qwik > jsx > Javascript Test > spreadProps 1`] = `
-"import { component$ } from \\"@builder.io/qwik\\";
+"import { Fragment, component$, h } from \\"@builder.io/qwik\\";
 
 export const MyBasicComponent = component$((props) => {
   return <input {...props} />;
@@ -4505,7 +4633,7 @@ export default MyBasicComponent;
 `;
 
 exports[`qwik > jsx > Javascript Test > styleClassAndCss 1`] = `
-"import { component$, useStylesScoped$ } from \\"@builder.io/qwik\\";
+"import { Fragment, component$, h, useStylesScoped$ } from \\"@builder.io/qwik\\";
 
 export const MyComponent = component$((props) => {
   useStylesScoped$(STYLES);
@@ -4535,7 +4663,7 @@ export const STYLES = \`
 exports[`qwik > jsx > Javascript Test > subComponent 1`] = `
 "import Foo from \\"./foo-sub-component\\";
 
-import { component$ } from \\"@builder.io/qwik\\";
+import { Fragment, component$, h } from \\"@builder.io/qwik\\";
 
 export const SubComponent = component$((props) => {
   return <Foo></Foo>;
@@ -4546,7 +4674,7 @@ export default SubComponent;
 `;
 
 exports[`qwik > jsx > Javascript Test > svgComponent 1`] = `
-"import { component$ } from \\"@builder.io/qwik\\";
+"import { Fragment, component$, h } from \\"@builder.io/qwik\\";
 
 export const SvgComponent = component$((props) => {
   return (
@@ -4580,7 +4708,7 @@ export default SvgComponent;
 `;
 
 exports[`qwik > jsx > Javascript Test > typeDependency 1`] = `
-"import { component$ } from \\"@builder.io/qwik\\";
+"import { Fragment, component$, h } from \\"@builder.io/qwik\\";
 
 export const TypeDependency = component$((props) => {
   return <div>{props.foo}</div>;
@@ -4591,7 +4719,7 @@ export default TypeDependency;
 `;
 
 exports[`qwik > jsx > Javascript Test > use-style 1`] = `
-"import { component$, useStylesScoped$ } from \\"@builder.io/qwik\\";
+"import { Fragment, component$, h, useStylesScoped$ } from \\"@builder.io/qwik\\";
 
 export const MyComponent = component$((props) => {
   useStylesScoped$(STYLES);
@@ -4613,7 +4741,7 @@ button {
 `;
 
 exports[`qwik > jsx > Javascript Test > use-style-and-css 1`] = `
-"import { component$, useStylesScoped$ } from \\"@builder.io/qwik\\";
+"import { Fragment, component$, h, useStylesScoped$ } from \\"@builder.io/qwik\\";
 
 export const MyComponent = component$((props) => {
   useStylesScoped$(STYLES);
@@ -4642,7 +4770,7 @@ button {
 `;
 
 exports[`qwik > jsx > Javascript Test > use-style-outside-component 1`] = `
-"import { component$, useStylesScoped$ } from \\"@builder.io/qwik\\";
+"import { Fragment, component$, h, useStylesScoped$ } from \\"@builder.io/qwik\\";
 
 export const MyComponent = component$((props) => {
   useStylesScoped$(STYLES);
@@ -4664,7 +4792,7 @@ button {
 `;
 
 exports[`qwik > jsx > Remove Internal mitosis package 1`] = `
-"import { component$, useStore } from \\"@builder.io/qwik\\";
+"import { Fragment, component$, h, useStore } from \\"@builder.io/qwik\\";
 
 export const MyBasicComponent = component$((props) => {
   const state = useStore({ name: \\"PatrickJS\\" });
@@ -4681,7 +4809,13 @@ export default MyBasicComponent;
 `;
 
 exports[`qwik > jsx > Typescript Test > Basic 1`] = `
-"import { component$, useStore, useStylesScoped$ } from \\"@builder.io/qwik\\";
+"import {
+  Fragment,
+  component$,
+  h,
+  useStore,
+  useStylesScoped$,
+} from \\"@builder.io/qwik\\";
 
 export interface MyBasicComponentProps {
   id: string;
@@ -4719,7 +4853,7 @@ export const STYLES = \`
 `;
 
 exports[`qwik > jsx > Typescript Test > Basic 2`] = `
-"import { component$, useStore } from \\"@builder.io/qwik\\";
+"import { Fragment, component$, h, useStore } from \\"@builder.io/qwik\\";
 
 export const MyBasicForShowComponent = component$((props: any) => {
   const state = useStore<any>({
@@ -4753,7 +4887,9 @@ export default MyBasicForShowComponent;
 
 exports[`qwik > jsx > Typescript Test > Basic Context 1`] = `
 "import {
+  Fragment,
   component$,
+  h,
   useContext,
   useContextProvider,
   useStore,
@@ -4761,7 +4897,7 @@ exports[`qwik > jsx > Typescript Test > Basic Context 1`] = `
   useVisibleTask$,
 } from \\"@builder.io/qwik\\";
 
-import { Injector, MyService } from \\"@dummy/injection-js\\";
+import { Injector, MyService, createInjector } from \\"@dummy/injection-js\\";
 
 export const onChange = function onChange(props, state, myService) {
   const change = myService.method(\\"change\\");
@@ -4795,7 +4931,9 @@ export default MyBasicComponent;
 
 exports[`qwik > jsx > Typescript Test > Basic OnMount Update 1`] = `
 "import {
+  Fragment,
   component$,
+  h,
   useStore,
   useTask$,
   useVisibleTask$,
@@ -4825,7 +4963,13 @@ export default MyBasicOnMountUpdateComponent;
 `;
 
 exports[`qwik > jsx > Typescript Test > Basic Outputs 1`] = `
-"import { component$, useStore, useVisibleTask$ } from \\"@builder.io/qwik\\";
+"import {
+  Fragment,
+  component$,
+  h,
+  useStore,
+  useVisibleTask$,
+} from \\"@builder.io/qwik\\";
 
 export const MyBasicOutputsComponent = component$((props: any) => {
   const state = useStore<any>({ name: \\"PatrickJS\\" });
@@ -4842,7 +4986,13 @@ export default MyBasicOutputsComponent;
 `;
 
 exports[`qwik > jsx > Typescript Test > Basic Outputs Meta 1`] = `
-"import { component$, useStore, useVisibleTask$ } from \\"@builder.io/qwik\\";
+"import {
+  Fragment,
+  component$,
+  h,
+  useStore,
+  useVisibleTask$,
+} from \\"@builder.io/qwik\\";
 
 export const MyBasicOutputsComponent = component$((props: any) => {
   const state = useStore<any>({ name: \\"PatrickJS\\" });
@@ -4859,7 +5009,7 @@ export default MyBasicOutputsComponent;
 `;
 
 exports[`qwik > jsx > Typescript Test > BasicAttribute 1`] = `
-"import { component$ } from \\"@builder.io/qwik\\";
+"import { Fragment, component$, h } from \\"@builder.io/qwik\\";
 
 export const MyComponent = component$((props: any) => {
   return <input autocapitalize=\\"on\\" autocomplete=\\"on\\" spellcheck={true} />;
@@ -4872,7 +5022,7 @@ export default MyComponent;
 exports[`qwik > jsx > Typescript Test > BasicBooleanAttribute 1`] = `
 "import MyBooleanAttributeComponent from \\"./basic-boolean-attribute-component.raw\\";
 
-import { component$, Slot } from \\"@builder.io/qwik\\";
+import { Fragment, Slot, component$, h } from \\"@builder.io/qwik\\";
 
 type Props = {
   children: any;
@@ -4895,9 +5045,11 @@ export default MyBooleanAttribute;
 `;
 
 exports[`qwik > jsx > Typescript Test > BasicChildComponent 1`] = `
-"import MyBasicComponent from \\"./basic.raw\\";
+"import MyBasicOnMountUpdateComponent from \\"./basic-onMount-update.raw\\";
 
-import { component$, useStore } from \\"@builder.io/qwik\\";
+import MyBasicComponent from \\"./basic.raw\\";
+
+import { Fragment, component$, h, useStore } from \\"@builder.io/qwik\\";
 
 export const MyBasicChildComponent = component$((props: any) => {
   const state = useStore<any>({ dev: \\"PatrickJS\\", name: \\"Steve\\" });
@@ -4921,8 +5073,9 @@ export default MyBasicChildComponent;
 
 exports[`qwik > jsx > Typescript Test > BasicFor 1`] = `
 "import {
-  component$,
   Fragment,
+  component$,
+  h,
   useStore,
   useVisibleTask$,
 } from \\"@builder.io/qwik\\";
@@ -4962,8 +5115,9 @@ export default MyBasicForComponent;
 
 exports[`qwik > jsx > Typescript Test > BasicRef 1`] = `
 "import {
-  component$,
   Fragment,
+  component$,
+  h,
   useSignal,
   useStore,
   useStylesScoped$,
@@ -5029,7 +5183,7 @@ export const STYLES = \`
 `;
 
 exports[`qwik > jsx > Typescript Test > BasicRefAssignment 1`] = `
-"import { component$, useSignal } from \\"@builder.io/qwik\\";
+"import { Fragment, component$, h, useSignal } from \\"@builder.io/qwik\\";
 
 export interface Props {
   showInput: boolean;
@@ -5060,7 +5214,14 @@ export default MyBasicRefAssignmentComponent;
 `;
 
 exports[`qwik > jsx > Typescript Test > BasicRefPrevious 1`] = `
-"import { component$, useSignal, useStore, useTask$ } from \\"@builder.io/qwik\\";
+"import {
+  Fragment,
+  component$,
+  h,
+  useSignal,
+  useStore,
+  useTask$,
+} from \\"@builder.io/qwik\\";
 
 export interface Props {
   showInput: boolean;
@@ -5100,7 +5261,7 @@ export default MyPreviousComponent;
 `;
 
 exports[`qwik > jsx > Typescript Test > Button 1`] = `
-"import { component$ } from \\"@builder.io/qwik\\";
+"import { Fragment, component$, h } from \\"@builder.io/qwik\\";
 
 export interface ButtonProps {
   attributes?: any;
@@ -5134,7 +5295,7 @@ export default Button;
 `;
 
 exports[`qwik > jsx > Typescript Test > Columns 1`] = `
-"import { component$, useStylesScoped$ } from \\"@builder.io/qwik\\";
+"import { Fragment, component$, h, useStylesScoped$ } from \\"@builder.io/qwik\\";
 
 type Column = {
   content: any; // TODO: Implement this when support for dynamic CSS lands
@@ -5220,7 +5381,7 @@ exports[`qwik > jsx > Typescript Test > ContentSlotHtml 1`] = `
 
 import { Slot } from \\"./med.js\\";
 
-import { component$ } from \\"@builder.io/qwik\\";
+import { Fragment, component$, h } from \\"@builder.io/qwik\\";
 
 type Props = {
   [key: string]: string | JSX.Element;
@@ -5249,7 +5410,14 @@ exports[`qwik > jsx > Typescript Test > ContentSlotJSX 1`] = `
 
 import { Slot } from \\"./med.js\\";
 
-import { component$, useComputed$, useStore } from \\"@builder.io/qwik\\";
+import {
+  Fragment,
+  Slot,
+  component$,
+  h,
+  useComputed$,
+  useStore,
+} from \\"@builder.io/qwik\\";
 
 type Props = {
   [key: string]: string | JSX.Element;
@@ -5293,7 +5461,9 @@ export default ContentSlotJsxCode;
 
 exports[`qwik > jsx > Typescript Test > CustomCode 1`] = `
 "import {
+  Fragment,
   component$,
+  h,
   useSignal,
   useStore,
   useVisibleTask$,
@@ -5372,7 +5542,9 @@ export default CustomCode;
 
 exports[`qwik > jsx > Typescript Test > Embed 1`] = `
 "import {
+  Fragment,
   component$,
+  h,
   useSignal,
   useStore,
   useVisibleTask$,
@@ -5451,14 +5623,16 @@ export default CustomCode;
 
 exports[`qwik > jsx > Typescript Test > Form 1`] = `
 "import {
+  Fragment,
   component$,
+  h,
   useComputed$,
   useSignal,
   useStore,
   useStylesScoped$,
 } from \\"@builder.io/qwik\\";
 
-import { Builder, builder, BuilderElement } from \\"@builder.io/sdk\\";
+import { Builder, BuilderElement, builder } from \\"@builder.io/sdk\\";
 
 import {
   BuilderBlock as BuilderBlockComponent,
@@ -5789,8 +5963,10 @@ export const STYLES = \`
 
 exports[`qwik > jsx > Typescript Test > Image 1`] = `
 "import {
-  component$,
+  Fragment,
   Slot,
+  component$,
+  h,
   useSignal,
   useStore,
   useStylesScoped$,
@@ -5904,7 +6080,7 @@ export const STYLES = \`
 `;
 
 exports[`qwik > jsx > Typescript Test > Image State 1`] = `
-"import { component$, Fragment, useStore } from \\"@builder.io/qwik\\";
+"import { Fragment, component$, h, useStore } from \\"@builder.io/qwik\\";
 
 export const ImgStateComponent = component$((props: any) => {
   const state = useStore<any>({
@@ -5930,7 +6106,7 @@ export default ImgStateComponent;
 `;
 
 exports[`qwik > jsx > Typescript Test > Img 1`] = `
-"import { component$ } from \\"@builder.io/qwik\\";
+"import { Fragment, component$, h } from \\"@builder.io/qwik\\";
 
 import { Builder } from \\"@builder.io/sdk\\";
 
@@ -5970,7 +6146,7 @@ export default ImgComponent;
 `;
 
 exports[`qwik > jsx > Typescript Test > Input 1`] = `
-"import { component$ } from \\"@builder.io/qwik\\";
+"import { Fragment, component$, h } from \\"@builder.io/qwik\\";
 
 import { Builder } from \\"@builder.io/sdk\\";
 
@@ -6007,7 +6183,7 @@ export default FormInputComponent;
 `;
 
 exports[`qwik > jsx > Typescript Test > RawText 1`] = `
-"import { component$ } from \\"@builder.io/qwik\\";
+"import { Fragment, component$, h } from \\"@builder.io/qwik\\";
 
 export interface RawTextProps {
   attributes?: any;
@@ -6027,7 +6203,7 @@ export default RawText;
 `;
 
 exports[`qwik > jsx > Typescript Test > Section 1`] = `
-"import { component$, Slot } from \\"@builder.io/qwik\\";
+"import { Fragment, Slot, component$, h } from \\"@builder.io/qwik\\";
 
 export interface SectionProps {
   maxWidth?: number;
@@ -6056,7 +6232,7 @@ export default SectionComponent;
 `;
 
 exports[`qwik > jsx > Typescript Test > Section 2`] = `
-"import { component$, Slot, useStore } from \\"@builder.io/qwik\\";
+"import { Fragment, Slot, component$, h, useStore } from \\"@builder.io/qwik\\";
 
 export interface SectionProps {
   maxWidth?: number;
@@ -6091,7 +6267,7 @@ export default SectionStateComponent;
 `;
 
 exports[`qwik > jsx > Typescript Test > Select 1`] = `
-"import { component$ } from \\"@builder.io/qwik\\";
+"import { Fragment, component$, h } from \\"@builder.io/qwik\\";
 
 import { Builder } from \\"@builder.io/sdk\\";
 
@@ -6136,7 +6312,7 @@ export default SelectComponent;
 exports[`qwik > jsx > Typescript Test > SlotDefault 1`] = `
 "import { Slot } from \\"./med.js\\";
 
-import { component$ } from \\"@builder.io/qwik\\";
+import { Fragment, component$, h } from \\"@builder.io/qwik\\";
 
 type Props = {
   [key: string]: string;
@@ -6160,7 +6336,7 @@ exports[`qwik > jsx > Typescript Test > SlotHtml 1`] = `
 
 import { Slot } from \\"./med.js\\";
 
-import { component$ } from \\"@builder.io/qwik\\";
+import { Fragment, component$, h } from \\"@builder.io/qwik\\";
 
 type Props = {
   [key: string]: string;
@@ -6186,7 +6362,7 @@ export default SlotCode;
 exports[`qwik > jsx > Typescript Test > SlotJsx 1`] = `
 "import ContentSlotCode from \\"./content-slot-jsx.raw\\";
 
-import { component$ } from \\"@builder.io/qwik\\";
+import { Fragment, component$, h } from \\"@builder.io/qwik\\";
 
 type Props = {
   [key: string]: string;
@@ -6210,7 +6386,7 @@ export default SlotCode;
 exports[`qwik > jsx > Typescript Test > SlotNamed 1`] = `
 "import { Slot } from \\"./med.js\\";
 
-import { component$ } from \\"@builder.io/qwik\\";
+import { Fragment, component$, h } from \\"@builder.io/qwik\\";
 
 type Props = {
   [key: string]: string;
@@ -6231,7 +6407,9 @@ export default SlotCode;
 
 exports[`qwik > jsx > Typescript Test > Stamped.io 1`] = `
 "import {
+  Fragment,
   component$,
+  h,
   useStore,
   useStylesScoped$,
   useVisibleTask$,
@@ -6340,7 +6518,7 @@ export const STYLES = \`
 `;
 
 exports[`qwik > jsx > Typescript Test > Submit 1`] = `
-"import { component$ } from \\"@builder.io/qwik\\";
+"import { Fragment, component$, h } from \\"@builder.io/qwik\\";
 
 export interface ButtonProps {
   attributes?: any;
@@ -6359,7 +6537,9 @@ export default SubmitButton;
 `;
 
 exports[`qwik > jsx > Typescript Test > Text 1`] = `
-"import { component$, useStore } from \\"@builder.io/qwik\\";
+"import { Fragment, component$, h, useStore } from \\"@builder.io/qwik\\";
+
+import { Builder } from \\"@builder.io/sdk\\";
 
 export interface TextProps {
   attributes?: any;
@@ -6392,7 +6572,7 @@ export default Text;
 `;
 
 exports[`qwik > jsx > Typescript Test > Textarea 1`] = `
-"import { component$ } from \\"@builder.io/qwik\\";
+"import { Fragment, component$, h } from \\"@builder.io/qwik\\";
 
 export interface TextareaProps {
   attributes?: any;
@@ -6418,7 +6598,7 @@ export default Textarea;
 `;
 
 exports[`qwik > jsx > Typescript Test > Video 1`] = `
-"import { component$ } from \\"@builder.io/qwik\\";
+"import { Fragment, component$, h } from \\"@builder.io/qwik\\";
 
 export interface VideoProps {
   attributes?: any;
@@ -6475,7 +6655,7 @@ export default Video;
 `;
 
 exports[`qwik > jsx > Typescript Test > arrowFunctionInUseStore 1`] = `
-"import { component$, useStore } from \\"@builder.io/qwik\\";
+"import { Fragment, component$, h, useStore } from \\"@builder.io/qwik\\";
 
 export const setName = function setName(props, state, value) {
   state.name = value;
@@ -6498,7 +6678,13 @@ export default MyComponent;
 `;
 
 exports[`qwik > jsx > Typescript Test > basicForNoTagReference 1`] = `
-"import { component$, useComputed$, useStore } from \\"@builder.io/qwik\\";
+"import {
+  Fragment,
+  component$,
+  h,
+  useComputed$,
+  useStore,
+} from \\"@builder.io/qwik\\";
 
 export const MyBasicForNoTagRefComponent = component$((props: any) => {
   const state = useStore<any>({
@@ -6529,7 +6715,13 @@ export default MyBasicForNoTagRefComponent;
 `;
 
 exports[`qwik > jsx > Typescript Test > basicForwardRef 1`] = `
-"import { component$, useStore, useStylesScoped$ } from \\"@builder.io/qwik\\";
+"import {
+  Fragment,
+  component$,
+  h,
+  useStore,
+  useStylesScoped$,
+} from \\"@builder.io/qwik\\";
 
 export interface Props {
   showInput: boolean;
@@ -6563,7 +6755,13 @@ export const STYLES = \`
 `;
 
 exports[`qwik > jsx > Typescript Test > basicForwardRefMetadata 1`] = `
-"import { component$, useStore, useStylesScoped$ } from \\"@builder.io/qwik\\";
+"import {
+  Fragment,
+  component$,
+  h,
+  useStore,
+  useStylesScoped$,
+} from \\"@builder.io/qwik\\";
 
 export interface Props {
   showInput: boolean;
@@ -6597,7 +6795,7 @@ export const STYLES = \`
 `;
 
 exports[`qwik > jsx > Typescript Test > class + ClassName + css 1`] = `
-"import { component$, useStylesScoped$ } from \\"@builder.io/qwik\\";
+"import { Fragment, component$, h, useStylesScoped$ } from \\"@builder.io/qwik\\";
 
 export const MyBasicComponent = component$((props: any) => {
   useStylesScoped$(STYLES);
@@ -6620,7 +6818,7 @@ export const STYLES = \`
 `;
 
 exports[`qwik > jsx > Typescript Test > class + css 1`] = `
-"import { component$, useStylesScoped$ } from \\"@builder.io/qwik\\";
+"import { Fragment, component$, h, useStylesScoped$ } from \\"@builder.io/qwik\\";
 
 export const MyBasicComponent = component$((props: any) => {
   useStylesScoped$(STYLES);
@@ -6643,7 +6841,7 @@ export const STYLES = \`
 `;
 
 exports[`qwik > jsx > Typescript Test > className + css 1`] = `
-"import { component$, useStylesScoped$ } from \\"@builder.io/qwik\\";
+"import { Fragment, component$, h, useStylesScoped$ } from \\"@builder.io/qwik\\";
 
 export const MyBasicComponent = component$((props: any) => {
   useStylesScoped$(STYLES);
@@ -6668,7 +6866,7 @@ export const STYLES = \`
 exports[`qwik > jsx > Typescript Test > className 1`] = `
 "import { JSX } from \\"../../../../jsx-runtime\\";
 
-import { component$, useStore } from \\"@builder.io/qwik\\";
+import { Fragment, component$, h, useStore } from \\"@builder.io/qwik\\";
 
 type Props = {
   [key: string]: string | JSX.Element;
@@ -6690,7 +6888,13 @@ export default ClassNameCode;
 `;
 
 exports[`qwik > jsx > Typescript Test > classState 1`] = `
-"import { component$, useStore, useStylesScoped$ } from \\"@builder.io/qwik\\";
+"import {
+  Fragment,
+  component$,
+  h,
+  useStore,
+  useStylesScoped$,
+} from \\"@builder.io/qwik\\";
 
 export const MyBasicComponent = component$((props: any) => {
   useStylesScoped$(STYLES);
@@ -6723,7 +6927,13 @@ export const STYLES = \`
 `;
 
 exports[`qwik > jsx > Typescript Test > contentState 1`] = `
-"import { component$, useContextProvider, useStore } from \\"@builder.io/qwik\\";
+"import {
+  Fragment,
+  component$,
+  h,
+  useContextProvider,
+  useStore,
+} from \\"@builder.io/qwik\\";
 
 import BuilderContext from \\"@dummy/context\\";
 
@@ -6744,7 +6954,7 @@ export default RenderContent;
 `;
 
 exports[`qwik > jsx > Typescript Test > defaultProps 1`] = `
-"import { component$ } from \\"@builder.io/qwik\\";
+"import { Fragment, component$, h } from \\"@builder.io/qwik\\";
 
 export interface ButtonProps {
   attributes?: any;
@@ -6785,7 +6995,7 @@ export default Button;
 `;
 
 exports[`qwik > jsx > Typescript Test > defaultPropsOutsideComponent 1`] = `
-"import { component$ } from \\"@builder.io/qwik\\";
+"import { Fragment, component$, h } from \\"@builder.io/qwik\\";
 
 export interface ButtonProps {
   attributes?: any;
@@ -6824,7 +7034,7 @@ export default Button;
 `;
 
 exports[`qwik > jsx > Typescript Test > defaultValsWithTypes 1`] = `
-"import { component$ } from \\"@builder.io/qwik\\";
+"import { Fragment, component$, h } from \\"@builder.io/qwik\\";
 
 type Props = {
   name: string;
@@ -6841,7 +7051,13 @@ export default ComponentWithTypes;
 `;
 
 exports[`qwik > jsx > Typescript Test > dontForwardRef 1`] = `
-"import { component$, useStore, useStylesScoped$ } from \\"@builder.io/qwik\\";
+"import {
+  Fragment,
+  component$,
+  h,
+  useStore,
+  useStylesScoped$,
+} from \\"@builder.io/qwik\\";
 
 export interface Props {
   showInput: boolean;
@@ -6875,7 +7091,7 @@ export const STYLES = \`
 `;
 
 exports[`qwik > jsx > Typescript Test > expressionState 1`] = `
-"import { component$, useStore } from \\"@builder.io/qwik\\";
+"import { Fragment, component$, h, useStore } from \\"@builder.io/qwik\\";
 
 export const MyComponent = component$((props: any) => {
   const state = useStore<any>({
@@ -6893,11 +7109,11 @@ export default MyComponent;
 
 exports[`qwik > jsx > Typescript Test > import types 1`] = `
 "import {
-  default as RenderBlock,
   RenderBlockProps,
+  default as RenderBlock,
 } from \\"./builder-render-block.raw\\";
 
-import { component$ } from \\"@builder.io/qwik\\";
+import { Fragment, component$, h } from \\"@builder.io/qwik\\";
 
 import { BuilderContent, GetContentOptions } from \\"@builder.io/sdk\\";
 
@@ -6937,7 +7153,7 @@ export default RenderContent;
 `;
 
 exports[`qwik > jsx > Typescript Test > multipleOnUpdate 1`] = `
-"import { component$, useTask$ } from \\"@builder.io/qwik\\";
+"import { Fragment, component$, h, useTask$ } from \\"@builder.io/qwik\\";
 
 export const MultipleOnUpdate = component$((props: any) => {
   useTask$(({ track }) => {
@@ -6955,7 +7171,7 @@ export default MultipleOnUpdate;
 `;
 
 exports[`qwik > jsx > Typescript Test > multipleOnUpdateWithDeps 1`] = `
-"import { component$, useStore, useTask$ } from \\"@builder.io/qwik\\";
+"import { Fragment, component$, h, useStore, useTask$ } from \\"@builder.io/qwik\\";
 
 export const MultipleOnUpdateWithDeps = component$((props: any) => {
   const state = useStore<any>({ a: \\"a\\", b: \\"b\\", c: \\"c\\", d: \\"d\\" });
@@ -6986,7 +7202,7 @@ export default MultipleOnUpdateWithDeps;
 `;
 
 exports[`qwik > jsx > Typescript Test > multipleSpreads 1`] = `
-"import { component$, useStore } from \\"@builder.io/qwik\\";
+"import { Fragment, component$, h, useStore } from \\"@builder.io/qwik\\";
 
 export const MyBasicComponent = component$((props: any) => {
   const state = useStore<any>({
@@ -7003,7 +7219,7 @@ export default MyBasicComponent;
 `;
 
 exports[`qwik > jsx > Typescript Test > nestedShow 1`] = `
-"import { component$ } from \\"@builder.io/qwik\\";
+"import { Fragment, component$, h } from \\"@builder.io/qwik\\";
 
 interface Props {
   conditionA: boolean;
@@ -7030,7 +7246,7 @@ export default NestedShow;
 `;
 
 exports[`qwik > jsx > Typescript Test > nestedStyles 1`] = `
-"import { component$, useStylesScoped$ } from \\"@builder.io/qwik\\";
+"import { Fragment, component$, h, useStylesScoped$ } from \\"@builder.io/qwik\\";
 
 export const NestedStyles = component$((props: any) => {
   useStylesScoped$(STYLES);
@@ -7071,7 +7287,13 @@ export const STYLES = \`
 `;
 
 exports[`qwik > jsx > Typescript Test > onInit & onMount 1`] = `
-"import { component$, useTask$, useVisibleTask$ } from \\"@builder.io/qwik\\";
+"import {
+  Fragment,
+  component$,
+  h,
+  useTask$,
+  useVisibleTask$,
+} from \\"@builder.io/qwik\\";
 
 export const OnInit = component$((props: any) => {
   useVisibleTask$(() => {
@@ -7089,7 +7311,7 @@ export default OnInit;
 `;
 
 exports[`qwik > jsx > Typescript Test > onInit 1`] = `
-"import { component$, useStore, useTask$ } from \\"@builder.io/qwik\\";
+"import { Fragment, component$, h, useStore, useTask$ } from \\"@builder.io/qwik\\";
 
 type Props = {
   name: string;
@@ -7112,7 +7334,7 @@ export default OnInit;
 `;
 
 exports[`qwik > jsx > Typescript Test > onMount 1`] = `
-"import { component$, useVisibleTask$ } from \\"@builder.io/qwik\\";
+"import { Fragment, component$, h, useVisibleTask$ } from \\"@builder.io/qwik\\";
 
 export const Comp = component$((props: any) => {
   useVisibleTask$(() => {
@@ -7127,7 +7349,7 @@ export default Comp;
 `;
 
 exports[`qwik > jsx > Typescript Test > onUpdate 1`] = `
-"import { component$, useTask$ } from \\"@builder.io/qwik\\";
+"import { Fragment, component$, h, useTask$ } from \\"@builder.io/qwik\\";
 
 export const OnUpdate = component$((props: any) => {
   useTask$(({ track }) => {
@@ -7142,7 +7364,7 @@ export default OnUpdate;
 `;
 
 exports[`qwik > jsx > Typescript Test > onUpdateWithDeps 1`] = `
-"import { component$, useStore, useTask$ } from \\"@builder.io/qwik\\";
+"import { Fragment, component$, h, useStore, useTask$ } from \\"@builder.io/qwik\\";
 
 type Props = {
   size: string;
@@ -7164,7 +7386,7 @@ export default OnUpdateWithDeps;
 `;
 
 exports[`qwik > jsx > Typescript Test > preserveExportOrLocalStatement 1`] = `
-"import { component$ } from \\"@builder.io/qwik\\";
+"import { Fragment, component$, h } from \\"@builder.io/qwik\\";
 
 type Types = {
   s: any[];
@@ -7189,7 +7411,7 @@ export default MyBasicComponent;
 `;
 
 exports[`qwik > jsx > Typescript Test > preserveTyping 1`] = `
-"import { component$ } from \\"@builder.io/qwik\\";
+"import { Fragment, component$, h } from \\"@builder.io/qwik\\";
 
 export type A = \\"test\\";
 export interface C {
@@ -7214,7 +7436,7 @@ export default MyBasicComponent;
 `;
 
 exports[`qwik > jsx > Typescript Test > propsDestructure 1`] = `
-"import { component$, Slot, useStore } from \\"@builder.io/qwik\\";
+"import { Fragment, Slot, component$, h, useStore } from \\"@builder.io/qwik\\";
 
 type Props = {
   children: any;
@@ -7237,7 +7459,7 @@ export default MyBasicComponent;
 `;
 
 exports[`qwik > jsx > Typescript Test > propsInterface 1`] = `
-"import { component$ } from \\"@builder.io/qwik\\";
+"import { Fragment, component$, h } from \\"@builder.io/qwik\\";
 
 interface Person {
   name: string;
@@ -7254,7 +7476,7 @@ export default MyBasicComponent;
 `;
 
 exports[`qwik > jsx > Typescript Test > propsType 1`] = `
-"import { component$ } from \\"@builder.io/qwik\\";
+"import { Fragment, component$, h } from \\"@builder.io/qwik\\";
 
 type Person = {
   name: string;
@@ -7271,7 +7493,7 @@ export default MyBasicComponent;
 `;
 
 exports[`qwik > jsx > Typescript Test > referencingFunInsideHook 1`] = `
-"import { component$, useTask$ } from \\"@builder.io/qwik\\";
+"import { Fragment, component$, h, useTask$ } from \\"@builder.io/qwik\\";
 
 export const foo = function foo(props, state, params) {};
 export const bar = function bar(props, state) {};
@@ -7298,7 +7520,10 @@ export default OnUpdate;
 exports[`qwik > jsx > Typescript Test > renderBlock 1`] = `
 "import { TARGET } from \\"../../constants/target.js\\";
 
-import { BuilderContextInterface } from \\"../../context/types.js\\";
+import {
+  BuilderContextInterface,
+  RegisteredComponent,
+} from \\"../../context/types.js\\";
 
 import { evaluate } from \\"../../functions/evaluate.js\\";
 
@@ -7318,17 +7543,24 @@ import { getReactNativeBlockStyles } from \\"../../functions/get-react-native-bl
 
 import { BuilderBlock } from \\"../../types/builder-block.js\\";
 
+import { Nullable } from \\"../../types/typescript.js\\";
+
 import BlockStyles from \\"./block-styles\\";
 
 import { isEmptyHtmlElement } from \\"./render-block.helpers.js\\";
 
-import { default as RenderComponent } from \\"./render-component\\";
+import {
+  RenderComponentProps,
+  default as RenderComponent,
+} from \\"./render-component\\";
 
 import RenderComponentWithContext from \\"./render-component-with-context\\";
 
+import RenderRepeatedBlock from \\"./render-repeated-block\\";
+
 import { RepeatData } from \\"./types.js\\";
 
-import { component$, useComputed$ } from \\"@builder.io/qwik\\";
+import { Fragment, component$, h, useComputed$ } from \\"@builder.io/qwik\\";
 
 export type RenderBlockProps = {
   block: BuilderBlock;
@@ -7571,7 +7803,9 @@ export default RenderBlock;
 
 exports[`qwik > jsx > Typescript Test > renderContentExample 1`] = `
 "import {
+  Fragment,
   component$,
+  h,
   useContextProvider,
   useStore,
   useStylesScoped$,
@@ -7640,7 +7874,7 @@ export const STYLES = \`
 `;
 
 exports[`qwik > jsx > Typescript Test > rootFragmentMultiNode 1`] = `
-"import { component$, Fragment } from \\"@builder.io/qwik\\";
+"import { Fragment, component$, h } from \\"@builder.io/qwik\\";
 
 export interface ButtonProps {
   attributes?: any;
@@ -7674,7 +7908,7 @@ export default Button;
 `;
 
 exports[`qwik > jsx > Typescript Test > rootShow 1`] = `
-"import { component$ } from \\"@builder.io/qwik\\";
+"import { Fragment, component$, h } from \\"@builder.io/qwik\\";
 
 export interface RenderStylesProps {
   foo: string;
@@ -7688,7 +7922,7 @@ export default RenderStyles;
 `;
 
 exports[`qwik > jsx > Typescript Test > self-referencing component 1`] = `
-"import { component$ } from \\"@builder.io/qwik\\";
+"import { Fragment, component$, h } from \\"@builder.io/qwik\\";
 
 export const MyComponent = component$((props: any) => {
   return (
@@ -7706,7 +7940,7 @@ export default MyComponent;
 `;
 
 exports[`qwik > jsx > Typescript Test > self-referencing component with children 1`] = `
-"import { component$, Slot } from \\"@builder.io/qwik\\";
+"import { Fragment, Slot, component$, h } from \\"@builder.io/qwik\\";
 
 export const MyComponent = component$((props: any) => {
   return (
@@ -7727,7 +7961,7 @@ export default MyComponent;
 `;
 
 exports[`qwik > jsx > Typescript Test > showWithFor 1`] = `
-"import { component$ } from \\"@builder.io/qwik\\";
+"import { Fragment, component$, h } from \\"@builder.io/qwik\\";
 
 interface Props {
   conditionA: boolean;
@@ -7752,7 +7986,7 @@ export default NestedShow;
 `;
 
 exports[`qwik > jsx > Typescript Test > showWithRootText 1`] = `
-"import { component$ } from \\"@builder.io/qwik\\";
+"import { Fragment, component$, h } from \\"@builder.io/qwik\\";
 
 interface Props {
   conditionA: boolean;
@@ -7766,7 +8000,7 @@ export default ShowRootText;
 `;
 
 exports[`qwik > jsx > Typescript Test > spreadAttrs 1`] = `
-"import { component$ } from \\"@builder.io/qwik\\";
+"import { Fragment, component$, h } from \\"@builder.io/qwik\\";
 
 export const MyBasicComponent = component$((props: any) => {
   return <input {...attrs} />;
@@ -7777,7 +8011,7 @@ export default MyBasicComponent;
 `;
 
 exports[`qwik > jsx > Typescript Test > spreadNestedProps 1`] = `
-"import { component$ } from \\"@builder.io/qwik\\";
+"import { Fragment, component$, h } from \\"@builder.io/qwik\\";
 
 export const MyBasicComponent = component$((props: any) => {
   return <input {...props.nested} />;
@@ -7788,7 +8022,7 @@ export default MyBasicComponent;
 `;
 
 exports[`qwik > jsx > Typescript Test > spreadProps 1`] = `
-"import { component$ } from \\"@builder.io/qwik\\";
+"import { Fragment, component$, h } from \\"@builder.io/qwik\\";
 
 export const MyBasicComponent = component$((props: any) => {
   return <input {...props} />;
@@ -7799,7 +8033,7 @@ export default MyBasicComponent;
 `;
 
 exports[`qwik > jsx > Typescript Test > styleClassAndCss 1`] = `
-"import { component$, useStylesScoped$ } from \\"@builder.io/qwik\\";
+"import { Fragment, component$, h, useStylesScoped$ } from \\"@builder.io/qwik\\";
 
 export const MyComponent = component$((props: any) => {
   useStylesScoped$(STYLES);
@@ -7829,7 +8063,7 @@ export const STYLES = \`
 exports[`qwik > jsx > Typescript Test > subComponent 1`] = `
 "import Foo from \\"./foo-sub-component\\";
 
-import { component$ } from \\"@builder.io/qwik\\";
+import { Fragment, component$, h } from \\"@builder.io/qwik\\";
 
 export const SubComponent = component$((props: any) => {
   return <Foo></Foo>;
@@ -7840,7 +8074,7 @@ export default SubComponent;
 `;
 
 exports[`qwik > jsx > Typescript Test > svgComponent 1`] = `
-"import { component$ } from \\"@builder.io/qwik\\";
+"import { Fragment, component$, h } from \\"@builder.io/qwik\\";
 
 export const SvgComponent = component$((props: any) => {
   return (
@@ -7878,7 +8112,7 @@ exports[`qwik > jsx > Typescript Test > typeDependency 1`] = `
 
 import { Foo as Foo2 } from \\"./type-export\\";
 
-import { component$ } from \\"@builder.io/qwik\\";
+import { Fragment, component$, h } from \\"@builder.io/qwik\\";
 
 export type TypeDependencyProps = {
   foo: Foo;
@@ -7893,7 +8127,7 @@ export default TypeDependency;
 `;
 
 exports[`qwik > jsx > Typescript Test > use-style 1`] = `
-"import { component$, useStylesScoped$ } from \\"@builder.io/qwik\\";
+"import { Fragment, component$, h, useStylesScoped$ } from \\"@builder.io/qwik\\";
 
 export const MyComponent = component$((props: any) => {
   useStylesScoped$(STYLES);
@@ -7915,7 +8149,7 @@ button {
 `;
 
 exports[`qwik > jsx > Typescript Test > use-style-and-css 1`] = `
-"import { component$, useStylesScoped$ } from \\"@builder.io/qwik\\";
+"import { Fragment, component$, h, useStylesScoped$ } from \\"@builder.io/qwik\\";
 
 export const MyComponent = component$((props: any) => {
   useStylesScoped$(STYLES);
@@ -7944,7 +8178,7 @@ button {
 `;
 
 exports[`qwik > jsx > Typescript Test > use-style-outside-component 1`] = `
-"import { component$, useStylesScoped$ } from \\"@builder.io/qwik\\";
+"import { Fragment, component$, h, useStylesScoped$ } from \\"@builder.io/qwik\\";
 
 export const MyComponent = component$((props: any) => {
   useStylesScoped$(STYLES);
@@ -8246,7 +8480,14 @@ export const __proxyMerge__ = function __proxyMerge__(state, local) {
   });
 };
 ",
-  "med.jsx": "import { qrl, useStore, useStylesScopedQrl } from \\"@builder.io/qwik\\";
+  "med.jsx": "import {
+  Fragment,
+  componentQrl,
+  h,
+  qrl,
+  useStore,
+  useStylesScopedQrl,
+} from \\"@builder.io/qwik\\";
 
 export const MyComponentStyles = \`.c9nzze9{display:flex;flex-direction:column;position:relative;flex-shrink:0;box-sizing:border-box;margin-top:20px;appearance:none;padding-top:15px;padding-bottom:15px;padding-left:25px;padding-right:25px;background-color:#3898EC;color:white;border-radius:4px;text-align:center;cursor:pointer}.cjrqfb1{display:flex;flex-direction:column;position:relative;flex-shrink:0;box-sizing:border-box;margin-top:20px;line-height:normal;height:auto;text-align:center}.c837pqv{display:flex;flex-direction:column;position:relative;flex-shrink:0;box-sizing:border-box;margin-top:20px;width:100%;min-height:20px;min-width:20px;overflow:hidden}\`;
 export const MyComponentOnMount = (p) => {
@@ -8455,7 +8696,7 @@ export const __proxyMerge__ = function __proxyMerge__(state, local) {
 `;
 
 exports[`qwik > svelte > Javascript Test > basic 1`] = `
-"import { component$, useStore } from \\"@builder.io/qwik\\";
+"import { Fragment, component$, h, useStore } from \\"@builder.io/qwik\\";
 
 export const MyComponent = component$((props) => {
   const state = useStore({ name: \\"Steve\\" });
@@ -8476,7 +8717,7 @@ export default MyComponent;
 `;
 
 exports[`qwik > svelte > Javascript Test > bindGroup 1`] = `
-"import { component$, useStore } from \\"@builder.io/qwik\\";
+"import { Fragment, component$, h, useStore } from \\"@builder.io/qwik\\";
 
 export const MyComponent = component$((props) => {
   const state = useStore({ fillings: [], tortilla: \\"Plain\\" });
@@ -8552,7 +8793,7 @@ export default MyComponent;
 `;
 
 exports[`qwik > svelte > Javascript Test > bindProperty 1`] = `
-"import { component$, useStore } from \\"@builder.io/qwik\\";
+"import { Fragment, component$, h, useStore } from \\"@builder.io/qwik\\";
 
 export const MyComponent = component$((props) => {
   const state = useStore({ value: \\"hello\\" });
@@ -8565,7 +8806,7 @@ export default MyComponent;
 `;
 
 exports[`qwik > svelte > Javascript Test > classDirective 1`] = `
-"import { component$, useStore } from \\"@builder.io/qwik\\";
+"import { Fragment, component$, h, useStore } from \\"@builder.io/qwik\\";
 
 export const MyComponent = component$((props) => {
   const state = useStore({ focus: true });
@@ -8585,7 +8826,9 @@ export default MyComponent;
 
 exports[`qwik > svelte > Javascript Test > context 1`] = `
 "import {
+  Fragment,
   component$,
+  h,
   useContext,
   useContextProvider,
   useStore,
@@ -8604,7 +8847,7 @@ export default MyComponent;
 `;
 
 exports[`qwik > svelte > Javascript Test > each 1`] = `
-"import { component$, useStore } from \\"@builder.io/qwik\\";
+"import { Fragment, component$, h, useStore } from \\"@builder.io/qwik\\";
 
 export const MyComponent = component$((props) => {
   const state = useStore({ numbers: [\\"one\\", \\"two\\", \\"three\\"] });
@@ -8623,7 +8866,7 @@ export default MyComponent;
 `;
 
 exports[`qwik > svelte > Javascript Test > eventHandlers 1`] = `
-"import { component$ } from \\"@builder.io/qwik\\";
+"import { Fragment, component$, h } from \\"@builder.io/qwik\\";
 
 export const log = function log(props, state, msg = \\"hello\\") {
   console.log(msg);
@@ -8645,7 +8888,7 @@ export default MyComponent;
 `;
 
 exports[`qwik > svelte > Javascript Test > html 1`] = `
-"import { component$, useStore } from \\"@builder.io/qwik\\";
+"import { Fragment, component$, h, useStore } from \\"@builder.io/qwik\\";
 
 export const MyComponent = component$((props) => {
   const state = useStore({ html: \\"<b>bold</b>\\" });
@@ -8658,7 +8901,7 @@ export default MyComponent;
 `;
 
 exports[`qwik > svelte > Javascript Test > ifElse 1`] = `
-"import { component$, useStore } from \\"@builder.io/qwik\\";
+"import { Fragment, component$, h, useStore } from \\"@builder.io/qwik\\";
 
 export const toggle = function toggle(props, state) {
   state.show = !state.show;
@@ -8686,7 +8929,7 @@ exports[`qwik > svelte > Javascript Test > imports 1`] = `
 
 import { Slot } from \\"./med.js\\";
 
-import { component$, useStore } from \\"@builder.io/qwik\\";
+import { Fragment, component$, h, useStore } from \\"@builder.io/qwik\\";
 
 export const MyComponent = component$((props) => {
   const state = useStore({ disabled: false });
@@ -8705,7 +8948,13 @@ export default MyComponent;
 `;
 
 exports[`qwik > svelte > Javascript Test > lifecycleHooks 1`] = `
-"import { component$, useTask$, useVisibleTask$ } from \\"@builder.io/qwik\\";
+"import {
+  Fragment,
+  component$,
+  h,
+  useTask$,
+  useVisibleTask$,
+} from \\"@builder.io/qwik\\";
 
 export const MyComponent = component$((props) => {
   useVisibleTask$(() => {
@@ -8723,7 +8972,13 @@ export default MyComponent;
 `;
 
 exports[`qwik > svelte > Javascript Test > reactive 1`] = `
-"import { component$, useComputed$, useStore } from \\"@builder.io/qwik\\";
+"import {
+  Fragment,
+  component$,
+  h,
+  useComputed$,
+  useStore,
+} from \\"@builder.io/qwik\\";
 
 export const MyComponent = component$((props) => {
   const state = useStore({ name: \\"Steve\\" });
@@ -8743,7 +8998,7 @@ export default MyComponent;
 `;
 
 exports[`qwik > svelte > Javascript Test > reactiveWithFn 1`] = `
-"import { component$, useStore, useTask$ } from \\"@builder.io/qwik\\";
+"import { Fragment, component$, h, useStore, useTask$ } from \\"@builder.io/qwik\\";
 
 export const calculateResult = function calculateResult(props, state, a_, b_) {
   state.result = a_ * b_;
@@ -8780,7 +9035,7 @@ export default MyComponent;
 exports[`qwik > svelte > Javascript Test > slots 1`] = `
 "import { Slot } from \\"./med.js\\";
 
-import { component$ } from \\"@builder.io/qwik\\";
+import { Fragment, component$, h } from \\"@builder.io/qwik\\";
 
 export const MyComponent = component$((props) => {
   return (
@@ -8798,7 +9053,7 @@ export default MyComponent;
 `;
 
 exports[`qwik > svelte > Javascript Test > style 1`] = `
-"import { component$, useStylesScoped$ } from \\"@builder.io/qwik\\";
+"import { Fragment, component$, h, useStylesScoped$ } from \\"@builder.io/qwik\\";
 
 export const MyComponent = component$((props) => {
   useStylesScoped$(STYLES);
@@ -8822,7 +9077,7 @@ input {
 `;
 
 exports[`qwik > svelte > Javascript Test > textExpressions 1`] = `
-"import { component$, useStore } from \\"@builder.io/qwik\\";
+"import { Fragment, component$, h, useStore } from \\"@builder.io/qwik\\";
 
 export const MyComponent = component$((props) => {
   const state = useStore({ a: 5, b: 12 });
@@ -8843,7 +9098,7 @@ export default MyComponent;
 `;
 
 exports[`qwik > svelte > Typescript Test > basic 1`] = `
-"import { component$, useStore } from \\"@builder.io/qwik\\";
+"import { Fragment, component$, h, useStore } from \\"@builder.io/qwik\\";
 
 export const MyComponent = component$((props: any) => {
   const state = useStore<any>({ name: \\"Steve\\" });
@@ -8864,7 +9119,7 @@ export default MyComponent;
 `;
 
 exports[`qwik > svelte > Typescript Test > bindGroup 1`] = `
-"import { component$, useStore } from \\"@builder.io/qwik\\";
+"import { Fragment, component$, h, useStore } from \\"@builder.io/qwik\\";
 
 export const MyComponent = component$((props: any) => {
   const state = useStore<any>({ fillings: [], tortilla: \\"Plain\\" });
@@ -8940,7 +9195,7 @@ export default MyComponent;
 `;
 
 exports[`qwik > svelte > Typescript Test > bindProperty 1`] = `
-"import { component$, useStore } from \\"@builder.io/qwik\\";
+"import { Fragment, component$, h, useStore } from \\"@builder.io/qwik\\";
 
 export const MyComponent = component$((props: any) => {
   const state = useStore<any>({ value: \\"hello\\" });
@@ -8953,7 +9208,7 @@ export default MyComponent;
 `;
 
 exports[`qwik > svelte > Typescript Test > classDirective 1`] = `
-"import { component$, useStore } from \\"@builder.io/qwik\\";
+"import { Fragment, component$, h, useStore } from \\"@builder.io/qwik\\";
 
 export const MyComponent = component$((props: any) => {
   const state = useStore<any>({ focus: true });
@@ -8973,7 +9228,9 @@ export default MyComponent;
 
 exports[`qwik > svelte > Typescript Test > context 1`] = `
 "import {
+  Fragment,
   component$,
+  h,
   useContext,
   useContextProvider,
   useStore,
@@ -8992,7 +9249,7 @@ export default MyComponent;
 `;
 
 exports[`qwik > svelte > Typescript Test > each 1`] = `
-"import { component$, useStore } from \\"@builder.io/qwik\\";
+"import { Fragment, component$, h, useStore } from \\"@builder.io/qwik\\";
 
 export const MyComponent = component$((props: any) => {
   const state = useStore<any>({ numbers: [\\"one\\", \\"two\\", \\"three\\"] });
@@ -9011,7 +9268,7 @@ export default MyComponent;
 `;
 
 exports[`qwik > svelte > Typescript Test > eventHandlers 1`] = `
-"import { component$ } from \\"@builder.io/qwik\\";
+"import { Fragment, component$, h } from \\"@builder.io/qwik\\";
 
 export const log = function log(props, state, msg = \\"hello\\") {
   console.log(msg);
@@ -9033,7 +9290,7 @@ export default MyComponent;
 `;
 
 exports[`qwik > svelte > Typescript Test > html 1`] = `
-"import { component$, useStore } from \\"@builder.io/qwik\\";
+"import { Fragment, component$, h, useStore } from \\"@builder.io/qwik\\";
 
 export const MyComponent = component$((props: any) => {
   const state = useStore<any>({ html: \\"<b>bold</b>\\" });
@@ -9046,7 +9303,7 @@ export default MyComponent;
 `;
 
 exports[`qwik > svelte > Typescript Test > ifElse 1`] = `
-"import { component$, useStore } from \\"@builder.io/qwik\\";
+"import { Fragment, component$, h, useStore } from \\"@builder.io/qwik\\";
 
 export const toggle = function toggle(props, state) {
   state.show = !state.show;
@@ -9074,7 +9331,7 @@ exports[`qwik > svelte > Typescript Test > imports 1`] = `
 
 import { Slot } from \\"./med.js\\";
 
-import { component$, useStore } from \\"@builder.io/qwik\\";
+import { Fragment, component$, h, useStore } from \\"@builder.io/qwik\\";
 
 export const MyComponent = component$((props: any) => {
   const state = useStore<any>({ disabled: false });
@@ -9093,7 +9350,13 @@ export default MyComponent;
 `;
 
 exports[`qwik > svelte > Typescript Test > lifecycleHooks 1`] = `
-"import { component$, useTask$, useVisibleTask$ } from \\"@builder.io/qwik\\";
+"import {
+  Fragment,
+  component$,
+  h,
+  useTask$,
+  useVisibleTask$,
+} from \\"@builder.io/qwik\\";
 
 export const MyComponent = component$((props: any) => {
   useVisibleTask$(() => {
@@ -9111,7 +9374,13 @@ export default MyComponent;
 `;
 
 exports[`qwik > svelte > Typescript Test > reactive 1`] = `
-"import { component$, useComputed$, useStore } from \\"@builder.io/qwik\\";
+"import {
+  Fragment,
+  component$,
+  h,
+  useComputed$,
+  useStore,
+} from \\"@builder.io/qwik\\";
 
 export const MyComponent = component$((props: any) => {
   const state = useStore<any>({ name: \\"Steve\\" });
@@ -9131,7 +9400,7 @@ export default MyComponent;
 `;
 
 exports[`qwik > svelte > Typescript Test > reactiveWithFn 1`] = `
-"import { component$, useStore, useTask$ } from \\"@builder.io/qwik\\";
+"import { Fragment, component$, h, useStore, useTask$ } from \\"@builder.io/qwik\\";
 
 export const calculateResult = function calculateResult(props, state, a_, b_) {
   state.result = a_ * b_;
@@ -9168,7 +9437,7 @@ export default MyComponent;
 exports[`qwik > svelte > Typescript Test > slots 1`] = `
 "import { Slot } from \\"./med.js\\";
 
-import { component$ } from \\"@builder.io/qwik\\";
+import { Fragment, component$, h } from \\"@builder.io/qwik\\";
 
 export const MyComponent = component$((props: any) => {
   return (
@@ -9186,7 +9455,7 @@ export default MyComponent;
 `;
 
 exports[`qwik > svelte > Typescript Test > style 1`] = `
-"import { component$, useStylesScoped$ } from \\"@builder.io/qwik\\";
+"import { Fragment, component$, h, useStylesScoped$ } from \\"@builder.io/qwik\\";
 
 export const MyComponent = component$((props: any) => {
   useStylesScoped$(STYLES);
@@ -9210,7 +9479,7 @@ input {
 `;
 
 exports[`qwik > svelte > Typescript Test > textExpressions 1`] = `
-"import { component$, useStore } from \\"@builder.io/qwik\\";
+"import { Fragment, component$, h, useStore } from \\"@builder.io/qwik\\";
 
 export const MyComponent = component$((props: any) => {
   const state = useStore<any>({ a: 5, b: 12 });
@@ -9248,7 +9517,13 @@ exports[`qwik > svg 1`] = `
   });
 };
 ",
-  "low.js": "import { h, qrl, useStore, useStylesScopedQrl } from \\"@builder.io/qwik\\";
+  "low.js": "import {
+  Fragment,
+  h,
+  qrl,
+  useStore,
+  useStylesScopedQrl,
+} from \\"@builder.io/qwik\\";
 
 export const MyComponentStyles = \`.c8xlkz3{display:flex;flex-direction:column;align-items:stretch;position:relative;flex-shrink:0;box-sizing:border-box;margin-top:auto;margin-bottom:auto}\`;
 export const MyComponentOnMount = (p) => {
@@ -9524,7 +9799,7 @@ export const __proxyMerge__ = function __proxyMerge__(state, local) {
   });
 };
 ",
-  "med.js": "import { componentQrl, h, qrl, useStore } from \\"@builder.io/qwik\\";
+  "med.js": "import { Fragment, componentQrl, h, qrl, useStore } from \\"@builder.io/qwik\\";
 
 export const TodoOnMount = (p) => {
   const s = useStore(
@@ -9655,7 +9930,7 @@ export const __proxyMerge__ = function __proxyMerge__(state, local) {
   });
 };
 ",
-  "med.tsx": "import { qrl, useStore } from \\"@builder.io/qwik\\";
+  "med.tsx": "import { Fragment, componentQrl, h, qrl, useStore } from \\"@builder.io/qwik\\";
 
 export const TodoOnMount = (p) => {
   const s = useStore(
@@ -9750,9 +10025,9 @@ export const __proxyMerge__ = function __proxyMerge__(state, local) {
   });
 };
 ",
-  "low.tsx": "import { Header } from \\"./med.js\\";
+  "low.tsx": "import { Header, Todo } from \\"./med.js\\";
 
-import { useStore } from \\"@builder.io/qwik\\";
+import { Fragment, h, qrl, useStore } from \\"@builder.io/qwik\\";
 
 export const TodosOnMount = (p) => {
   const s = useStore(
@@ -9813,7 +10088,7 @@ export const __proxyMerge__ = function __proxyMerge__(state, local) {
   });
 };
 ",
-  "med.tsx": "import { componentQrl, qrl } from \\"@builder.io/qwik\\";
+  "med.tsx": "import { componentQrl, h, qrl } from \\"@builder.io/qwik\\";
 
 export const Todos = componentQrl<any, any>(
   qrl(\\"./low.js\\", \\"TodosOnMount\\", [])

From d249c8ee252a71122b146c37c5993819d2cc5f33 Mon Sep 17 00:00:00 2001
From: Corbin Crutchley <git@crutchcorn.dev>
Date: Mon, 22 May 2023 21:49:44 -0700
Subject: [PATCH 8/8] chore: fix formatter

---
 packages/core/src/generators/angular.ts       |  2 +-
 packages/core/src/generators/html.ts          |  2 +-
 packages/core/src/generators/lit/generate.ts  |  2 +-
 .../core/src/generators/stencil/generate.ts   |  2 +-
 packages/core/src/generators/svelte/svelte.ts |  2 +-
 packages/core/src/generators/vue/vue.ts       |  2 +-
 packages/core/src/helpers/get-props.ts        | 41 ++++++++++---------
 7 files changed, 28 insertions(+), 25 deletions(-)

diff --git a/packages/core/src/generators/angular.ts b/packages/core/src/generators/angular.ts
index 808931adca..6886f07351 100644
--- a/packages/core/src/generators/angular.ts
+++ b/packages/core/src/generators/angular.ts
@@ -357,7 +357,7 @@ export const componentToAngular: TranspilerGenerator<ToAngularOptions> =
     });
     const hasConstructor = Boolean(injectables.length || json.hooks?.onInit);
 
-    const props = getProps(json, "angular");
+    const props = getProps(json, 'angular');
     // prevent jsx props from showing up as @Input
     if (hasPropRef) {
       props.delete(forwardProp);
diff --git a/packages/core/src/generators/html.ts b/packages/core/src/generators/html.ts
index fab4c8d463..ebbe090bcb 100644
--- a/packages/core/src/generators/html.ts
+++ b/packages/core/src/generators/html.ts
@@ -891,7 +891,7 @@ export const componentToCustomElement: TranspilerGenerator<ToHtmlOptions> =
     const childComponents = getChildComponents(json, useOptions);
     const componentHasProps = hasProps(json);
     const componentHasStatefulDom = hasStatefulDom(json);
-    const props = getProps(json, "html");
+    const props = getProps(json, 'html');
     // prevent jsx props from showing up as @Input
     if (hasPropRef) {
       props.delete(forwardProp);
diff --git a/packages/core/src/generators/lit/generate.ts b/packages/core/src/generators/lit/generate.ts
index 055810311b..4ce9dfa06b 100644
--- a/packages/core/src/generators/lit/generate.ts
+++ b/packages/core/src/generators/lit/generate.ts
@@ -133,7 +133,7 @@ export const componentToLit: TranspilerGenerator<ToLitOptions> =
     if (options.plugins) {
       json = runPreJsonPlugins(json, options.plugins);
     }
-    const props = getProps(component, "lit");
+    const props = getProps(component, 'lit');
     let css = collectCss(json);
 
     const domRefs = getRefs(json);
diff --git a/packages/core/src/generators/stencil/generate.ts b/packages/core/src/generators/stencil/generate.ts
index f58f5d1d4d..c5f91d7979 100644
--- a/packages/core/src/generators/stencil/generate.ts
+++ b/packages/core/src/generators/stencil/generate.ts
@@ -103,7 +103,7 @@ export const componentToStencil: TranspilerGenerator<ToStencilOptions> =
     if (options.plugins) {
       json = runPreJsonPlugins(json, options.plugins);
     }
-    const props = getProps(component, "stencil");
+    const props = getProps(component, 'stencil');
     let css = collectCss(json);
 
     mapRefs(component, (refName) => `this.${refName}`);
diff --git a/packages/core/src/generators/svelte/svelte.ts b/packages/core/src/generators/svelte/svelte.ts
index 64682123ad..da813edc45 100644
--- a/packages/core/src/generators/svelte/svelte.ts
+++ b/packages/core/src/generators/svelte/svelte.ts
@@ -154,7 +154,7 @@ export const componentToSvelte: TranspilerGenerator<ToSvelteOptions> =
 
     gettersToFunctions(json);
 
-    const props = Array.from(getProps(json, "svelte")).filter((prop) => !isSlotProperty(prop));
+    const props = Array.from(getProps(json, 'svelte')).filter((prop) => !isSlotProperty(prop));
 
     const refs = Array.from(getRefs(json))
       .map(stripStateAndProps({ json, options }))
diff --git a/packages/core/src/generators/vue/vue.ts b/packages/core/src/generators/vue/vue.ts
index 7fd590cda5..8dc02370a1 100644
--- a/packages/core/src/generators/vue/vue.ts
+++ b/packages/core/src/generators/vue/vue.ts
@@ -166,7 +166,7 @@ const componentToVue: TranspilerGenerator<Partial<ToVueOptions>> =
     }
 
     // need to run this before we process the component's code
-    const props = Array.from(getProps(component, "vue"));
+    const props = Array.from(getProps(component, 'vue'));
     const elementProps = props.filter((prop) => !isSlotProperty(prop));
     const slotsProps = props.filter((prop) => isSlotProperty(prop));
 
diff --git a/packages/core/src/helpers/get-props.ts b/packages/core/src/helpers/get-props.ts
index 9682fde2bb..bbb1ce9101 100644
--- a/packages/core/src/helpers/get-props.ts
+++ b/packages/core/src/helpers/get-props.ts
@@ -1,30 +1,33 @@
 import traverse from 'traverse';
-import { MitosisComponent } from '../types/mitosis-component';
 import { Target } from '../types/config';
+import { MitosisComponent } from '../types/mitosis-component';
 
 const propsRegex = /props\s*\.\s*([a-zA-Z0-9_\$]+)/;
 const allPropsMatchesRegex = new RegExp(propsRegex, 'g');
 
 // copied from https://github.com/vuejs/core/blob/fa6556a0d56eeff1fec4f948460351ccf8f99f35/packages/compiler-core/src/validateExpression.ts
 // typeof, instanceof and in are allowed
-const getProhibitedKeywordRE = (target: Target) => new RegExp(
-  '\\b' +
-    (
-      'do,if,for,let,new,try,var,case,else,with,await,break,catch,class,const,' +
-      'super,throw,while,yield,delete,export,import,return,switch,default,' +
-      'extends,finally,continue,debugger,function,arguments,typeof,void,' +
-      // both below conditions added based on https://github.com/vuejs/vue/blob/e80cd09fff570df57d608f8f5aaccee6d7f31917/src/core/instance/state.ts#L89-L96
-      // below line added from https://github.com/vuejs/vue/blob/8880b55d52f8d873f79ef67436217c8752cddef5/src/shared/util.ts#L130
-      'key,slot,slot-scope,is,' +
-      // React handles `ref` as a `forwardRef` properly, but should be included in Vue from the same list as the above line
-      target === 'react' ? '' : 'ref' +
-      // below line added from https://github.com/vuejs/vue/blob/72aed6a149b94b5b929fb47370a7a6d4cb7491c5/src/platforms/web/util/attrs.ts#L5
-      'style'
-    )
-      .split(',')
-      .join('\\b|\\b') +
-    '\\b',
-);
+const getProhibitedKeywordRE = (target: Target) =>
+  new RegExp(
+    '\\b' +
+      ('do,if,for,let,new,try,var,case,else,with,await,break,catch,class,const,' +
+        'super,throw,while,yield,delete,export,import,return,switch,default,' +
+        'extends,finally,continue,debugger,function,arguments,typeof,void,' +
+        // both below conditions added based on https://github.com/vuejs/vue/blob/e80cd09fff570df57d608f8f5aaccee6d7f31917/src/core/instance/state.ts#L89-L96
+        // below line added from https://github.com/vuejs/vue/blob/8880b55d52f8d873f79ef67436217c8752cddef5/src/shared/util.ts#L130
+        'key,slot,slot-scope,is,' +
+        // React handles `ref` as a `forwardRef` properly, but should be included in Vue from the same list as the above line
+        target ===
+      'react'
+        ? ''
+        : 'ref' +
+          // below line added from https://github.com/vuejs/vue/blob/72aed6a149b94b5b929fb47370a7a6d4cb7491c5/src/platforms/web/util/attrs.ts#L5
+          'style'
+      )
+        .split(',')
+        .join('\\b|\\b') +
+      '\\b',
+  );
 
 /**
  * Get props used in the components by reference