From 82c79fde93d80b331d28417c72c099fe356800e0 Mon Sep 17 00:00:00 2001
From: Sami Jaber <jabersami@gmail.com>
Date: Fri, 11 Oct 2024 15:02:39 -0300
Subject: [PATCH] Feat: RSC: onInit (#1587)

* f

* f

* f

* add test

* f

* f
---
 .changeset/shiny-yaks-fly.md                  |   5 +
 .../__snapshots__/alpine.test.ts.snap         |  20 ++
 .../__snapshots__/angular.import.test.ts.snap |  68 ++++++
 .../__snapshots__/angular.mapper.test.ts.snap |  70 +++++++
 .../__snapshots__/angular.state.test.ts.snap  |  68 ++++++
 .../__snapshots__/angular.styles.test.ts.snap |  54 +++++
 .../__snapshots__/angular.test.ts.snap        | 122 +++++++++++
 .../__tests__/__snapshots__/html.test.ts.snap |  10 +
 .../__snapshots__/liquid.test.ts.snap         |  10 +
 .../__tests__/__snapshots__/lit.test.ts.snap  |  42 ++++
 .../__snapshots__/marko.test.ts.snap          |  12 ++
 .../__snapshots__/parse-jsx.test.ts.snap      |  72 +++++++
 .../__snapshots__/preact.test.ts.snap         |  38 ++++
 .../__tests__/__snapshots__/qwik.test.ts.snap |  30 +++
 .../__snapshots__/react-native.test.ts.snap   |  62 ++++++
 .../__snapshots__/react.test.ts.snap          |  36 ++++
 .../__tests__/__snapshots__/rsc.test.ts.snap  |  40 ++--
 .../__snapshots__/solid.test.ts.snap          |  60 ++++++
 .../__snapshots__/stencil.test.ts.snap        |  28 +++
 .../__snapshots__/svelte.test.ts.snap         |  16 ++
 .../__tests__/__snapshots__/taro.test.ts.snap |  38 ++++
 .../vue-composition.test.ts.snap              |  20 ++
 .../__tests__/__snapshots__/vue.test.ts.snap  |  36 ++++
 .../__snapshots__/webcomponent.test.ts.snap   | 194 ++++++++++++++++++
 .../data/blocks/onInit-plain.raw.tsx          |   9 +
 packages/core/src/__tests__/test-generator.ts |   5 +-
 .../core/src/generators/react/generator.ts    |  31 ++-
 27 files changed, 1172 insertions(+), 24 deletions(-)
 create mode 100644 .changeset/shiny-yaks-fly.md
 create mode 100644 packages/core/src/__tests__/data/blocks/onInit-plain.raw.tsx

diff --git a/.changeset/shiny-yaks-fly.md b/.changeset/shiny-yaks-fly.md
new file mode 100644
index 0000000000..df96c7cde9
--- /dev/null
+++ b/.changeset/shiny-yaks-fly.md
@@ -0,0 +1,5 @@
+---
+'@builder.io/mitosis': patch
+---
+
+[React] Fix: Inline `onInit` hook when generating RSC components.
diff --git a/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap b/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap
index d8231a2776..b02d191998 100644
--- a/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap
@@ -1922,6 +1922,16 @@ exports[`Alpine.js > jsx > Javascript Test > onInit 1`] = `
 "
 `;
 
+exports[`Alpine.js > jsx > Javascript Test > onInitPlain 1`] = `
+"<div x-data=\\"onInitPlain()\\"></div>
+<script>
+  document.addEventListener(\\"alpine:init\\", () => {
+    Alpine.data(\\"onInitPlain\\", () => ({}));
+  });
+</script>
+"
+`;
+
 exports[`Alpine.js > jsx > Javascript Test > onMount 1`] = `
 "<div x-data=\\"comp()\\"></div>
 <script>
@@ -4715,6 +4725,16 @@ exports[`Alpine.js > jsx > Typescript Test > onInit 1`] = `
 "
 `;
 
+exports[`Alpine.js > jsx > Typescript Test > onInitPlain 1`] = `
+"<div x-data=\\"onInitPlain()\\"></div>
+<script>
+  document.addEventListener(\\"alpine:init\\", () => {
+    Alpine.data(\\"onInitPlain\\", () => ({}));
+  });
+</script>
+"
+`;
+
 exports[`Alpine.js > jsx > Typescript Test > onMount 1`] = `
 "<div x-data=\\"comp()\\"></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 ae7218639f..dd65efd0b0 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap
@@ -4655,6 +4655,40 @@ export class OnInitModule {}
 "
 `;
 
+exports[`Angular with Preserve Imports and File Extensions > jsx > Javascript Test > onInitPlain 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"on-init-plain\\",
+  template: \`
+    <div></div>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class OnInitPlain {
+  ngOnInit() {
+    console.log(\\"onInit\\");
+  }
+}
+
+@NgModule({
+  declarations: [OnInitPlain],
+  imports: [CommonModule],
+  exports: [OnInitPlain],
+})
+export class OnInitPlainModule {}
+"
+`;
+
 exports[`Angular with Preserve Imports and File Extensions > jsx > Javascript Test > onMount 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -11911,6 +11945,40 @@ export class OnInitModule {}
 "
 `;
 
+exports[`Angular with Preserve Imports and File Extensions > jsx > Typescript Test > onInitPlain 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"on-init-plain\\",
+  template: \`
+    <div></div>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class OnInitPlain {
+  ngOnInit() {
+    console.log(\\"onInit\\");
+  }
+}
+
+@NgModule({
+  declarations: [OnInitPlain],
+  imports: [CommonModule],
+  exports: [OnInitPlain],
+})
+export class OnInitPlainModule {}
+"
+`;
+
 exports[`Angular with Preserve Imports and File Extensions > jsx > Typescript Test > onMount 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 070231d021..f4aeba006b 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.mapper.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.mapper.test.ts.snap
@@ -4727,6 +4727,41 @@ export class OnInitModule {}
 "
 `;
 
+exports[`Angular with Import Mapper Tests > jsx > Javascript Test > onInitPlain 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"on-init-plain\\",
+  template: \`
+    <div></div>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class OnInitPlain {
+  ngOnInit() {
+    console.log(\\"onInit\\");
+  }
+}
+
+@NgModule({
+  declarations: [OnInitPlain],
+  imports: [CommonModule],
+  exports: [OnInitPlain],
+  bootstrap: [SomeOtherComponent],
+})
+export class OnInitPlainModule {}
+"
+`;
+
 exports[`Angular with Import Mapper Tests > jsx > Javascript Test > onMount 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -12100,6 +12135,41 @@ export class OnInitModule {}
 "
 `;
 
+exports[`Angular with Import Mapper Tests > jsx > Typescript Test > onInitPlain 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"on-init-plain\\",
+  template: \`
+    <div></div>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class OnInitPlain {
+  ngOnInit() {
+    console.log(\\"onInit\\");
+  }
+}
+
+@NgModule({
+  declarations: [OnInitPlain],
+  imports: [CommonModule],
+  exports: [OnInitPlain],
+  bootstrap: [SomeOtherComponent],
+})
+export class OnInitPlainModule {}
+"
+`;
+
 exports[`Angular with Import Mapper Tests > jsx > Typescript Test > onMount 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
diff --git a/packages/core/src/__tests__/__snapshots__/angular.state.test.ts.snap b/packages/core/src/__tests__/__snapshots__/angular.state.test.ts.snap
index 4f24c49c89..eecc77004f 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.state.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.state.test.ts.snap
@@ -4822,6 +4822,40 @@ export class OnInitModule {}
 "
 `;
 
+exports[`Angular with manually creating and handling class properties as bindings (more stable) > jsx > Javascript Test > onInitPlain 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"on-init-plain\\",
+  template: \`
+    <div></div>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class OnInitPlain {
+  ngOnInit() {
+    console.log(\\"onInit\\");
+  }
+}
+
+@NgModule({
+  declarations: [OnInitPlain],
+  imports: [CommonModule],
+  exports: [OnInitPlain],
+})
+export class OnInitPlainModule {}
+"
+`;
+
 exports[`Angular with manually creating and handling class properties as bindings (more stable) > jsx > Javascript Test > onMount 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -12322,6 +12356,40 @@ export class OnInitModule {}
 "
 `;
 
+exports[`Angular with manually creating and handling class properties as bindings (more stable) > jsx > Typescript Test > onInitPlain 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"on-init-plain\\",
+  template: \`
+    <div></div>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class OnInitPlain {
+  ngOnInit() {
+    console.log(\\"onInit\\");
+  }
+}
+
+@NgModule({
+  declarations: [OnInitPlain],
+  imports: [CommonModule],
+  exports: [OnInitPlain],
+})
+export class OnInitPlainModule {}
+"
+`;
+
 exports[`Angular with manually creating and handling class properties as bindings (more stable) > jsx > Typescript Test > onMount 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
diff --git a/packages/core/src/__tests__/__snapshots__/angular.styles.test.ts.snap b/packages/core/src/__tests__/__snapshots__/angular.styles.test.ts.snap
index fdc6cf64de..7162b96608 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.styles.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.styles.test.ts.snap
@@ -4203,6 +4203,33 @@ export class OnInitModule {}
 "
 `;
 
+exports[`Angular with visuallyIgnoreHostElement = false > jsx > Javascript Test > onInitPlain 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"on-init-plain\\",
+  template: \`
+    <div></div>
+  \`,
+})
+export default class OnInitPlain {
+  ngOnInit() {
+    console.log(\\"onInit\\");
+  }
+}
+
+@NgModule({
+  declarations: [OnInitPlain],
+  imports: [CommonModule],
+  exports: [OnInitPlain],
+})
+export class OnInitPlainModule {}
+"
+`;
+
 exports[`Angular with visuallyIgnoreHostElement = false > jsx > Javascript Test > onMount 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -10726,6 +10753,33 @@ export class OnInitModule {}
 "
 `;
 
+exports[`Angular with visuallyIgnoreHostElement = false > jsx > Typescript Test > onInitPlain 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"on-init-plain\\",
+  template: \`
+    <div></div>
+  \`,
+})
+export default class OnInitPlain {
+  ngOnInit() {
+    console.log(\\"onInit\\");
+  }
+}
+
+@NgModule({
+  declarations: [OnInitPlain],
+  imports: [CommonModule],
+  exports: [OnInitPlain],
+})
+export class OnInitPlainModule {}
+"
+`;
+
 exports[`Angular with visuallyIgnoreHostElement = false > jsx > Typescript Test > onMount 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 b2d15229bc..370380078a 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.test.ts.snap
@@ -8798,6 +8798,67 @@ export default class OnInit {
 "
 `;
 
+exports[`Angular > jsx > Javascript Test > onInitPlain 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"on-init-plain\\",
+  template: \`
+    <div></div>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class OnInitPlain {
+  ngOnInit() {
+    console.log(\\"onInit\\");
+  }
+}
+
+@NgModule({
+  declarations: [OnInitPlain],
+  imports: [CommonModule],
+  exports: [OnInitPlain],
+})
+export class OnInitPlainModule {}
+"
+`;
+
+exports[`Angular > jsx > Javascript Test > onInitPlain 2`] = `
+"import { Component } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+@Component({
+  selector: \\"on-init-plain\\",
+  template: \`
+    <div></div>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+  standalone: true,
+  imports: [CommonModule],
+})
+export default class OnInitPlain {
+  ngOnInit() {
+    console.log(\\"onInit\\");
+  }
+}
+"
+`;
+
 exports[`Angular > jsx > Javascript Test > onMount 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -22473,6 +22534,67 @@ export default class OnInit {
 "
 `;
 
+exports[`Angular > jsx > Typescript Test > onInitPlain 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"on-init-plain\\",
+  template: \`
+    <div></div>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class OnInitPlain {
+  ngOnInit() {
+    console.log(\\"onInit\\");
+  }
+}
+
+@NgModule({
+  declarations: [OnInitPlain],
+  imports: [CommonModule],
+  exports: [OnInitPlain],
+})
+export class OnInitPlainModule {}
+"
+`;
+
+exports[`Angular > jsx > Typescript Test > onInitPlain 2`] = `
+"import { Component } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+@Component({
+  selector: \\"on-init-plain\\",
+  template: \`
+    <div></div>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+  standalone: true,
+  imports: [CommonModule],
+})
+export default class OnInitPlain {
+  ngOnInit() {
+    console.log(\\"onInit\\");
+  }
+}
+"
+`;
+
 exports[`Angular > jsx > Typescript Test > onMount 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 97b902df19..772c745a2e 100644
--- a/packages/core/src/__tests__/__snapshots__/html.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/html.test.ts.snap
@@ -4552,6 +4552,11 @@ exports[`Html > jsx > Javascript Test > onInit 1`] = `
 "
 `;
 
+exports[`Html > jsx > Javascript Test > onInitPlain 1`] = `
+"<div></div>
+"
+`;
+
 exports[`Html > jsx > Javascript Test > onMount 1`] = `
 "<div></div>
 <script>
@@ -11497,6 +11502,11 @@ exports[`Html > jsx > Typescript Test > onInit 1`] = `
 "
 `;
 
+exports[`Html > jsx > Typescript Test > onInitPlain 1`] = `
+"<div></div>
+"
+`;
+
 exports[`Html > jsx > Typescript Test > onMount 1`] = `
 "<div></div>
 <script>
diff --git a/packages/core/src/__tests__/__snapshots__/liquid.test.ts.snap b/packages/core/src/__tests__/__snapshots__/liquid.test.ts.snap
index 5a914da134..89bfc646ff 100644
--- a/packages/core/src/__tests__/__snapshots__/liquid.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/liquid.test.ts.snap
@@ -628,6 +628,11 @@ exports[`Liquid > jsx > Javascript Test > onInit 1`] = `
 "
 `;
 
+exports[`Liquid > jsx > Javascript Test > onInitPlain 1`] = `
+"<div></div>
+"
+`;
+
 exports[`Liquid > jsx > Javascript Test > onMount 1`] = `
 "<div></div>
 "
@@ -1540,6 +1545,11 @@ exports[`Liquid > jsx > Typescript Test > onInit 1`] = `
 "
 `;
 
+exports[`Liquid > jsx > Typescript Test > onInitPlain 1`] = `
+"<div></div>
+"
+`;
+
 exports[`Liquid > jsx > Typescript Test > onMount 1`] = `
 "<div></div>
 "
diff --git a/packages/core/src/__tests__/__snapshots__/lit.test.ts.snap b/packages/core/src/__tests__/__snapshots__/lit.test.ts.snap
index bfc2139765..8e8531a52c 100644
--- a/packages/core/src/__tests__/__snapshots__/lit.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/lit.test.ts.snap
@@ -2847,6 +2847,27 @@ export default class OnInit extends LitElement {
 "
 `;
 
+exports[`Lit > jsx > Javascript Test > onInitPlain 1`] = `
+"import { LitElement, html, css } from \\"lit\\";
+import { customElement, property, state, query } from \\"lit/decorators.js\\";
+
+@customElement(\\"on-init-plain\\")
+export default class OnInitPlain extends LitElement {
+  createRenderRoot() {
+    return this;
+  }
+
+  render() {
+    return html\`
+
+          <div></div>
+
+        \`;
+  }
+}
+"
+`;
+
 exports[`Lit > jsx > Javascript Test > onMount 1`] = `
 "import { LitElement, html, css } from \\"lit\\";
 import { customElement, property, state, query } from \\"lit/decorators.js\\";
@@ -7386,6 +7407,27 @@ export default class OnInit extends LitElement {
 "
 `;
 
+exports[`Lit > jsx > Typescript Test > onInitPlain 1`] = `
+"import { LitElement, html, css } from \\"lit\\";
+import { customElement, property, state, query } from \\"lit/decorators.js\\";
+
+@customElement(\\"on-init-plain\\")
+export default class OnInitPlain extends LitElement {
+  createRenderRoot() {
+    return this;
+  }
+
+  render() {
+    return html\`
+
+          <div></div>
+
+        \`;
+  }
+}
+"
+`;
+
 exports[`Lit > jsx > Typescript Test > onMount 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 416aabb629..b85808e5ad 100644
--- a/packages/core/src/__tests__/__snapshots__/marko.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/marko.test.ts.snap
@@ -1777,6 +1777,12 @@ class {
 <div>Default name defined by parent \${state.name}</div>"
 `;
 
+exports[`Marko > jsx > Javascript Test > onInitPlain 1`] = `
+"class {}
+
+<div></div>"
+`;
+
 exports[`Marko > jsx > Javascript Test > onMount 1`] = `
 "class {
   onMount() {
@@ -4269,6 +4275,12 @@ class {
 <div>Default name defined by parent \${state.name}</div>"
 `;
 
+exports[`Marko > jsx > Typescript Test > onInitPlain 1`] = `
+"class {}
+
+<div></div>"
+`;
+
 exports[`Marko > jsx > Typescript Test > onMount 1`] = `
 "class {
   onMount() {
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 093605a643..411e74f3e3 100644
--- a/packages/core/src/__tests__/__snapshots__/parse-jsx.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/parse-jsx.test.ts.snap
@@ -7089,6 +7089,42 @@ console.log('set defaults with props')",
 }
 `;
 
+exports[`Parse JSX > Javascript > onInitPlain 1`] = `
+{
+  "@type": "@builder.io/mitosis/component",
+  "children": [
+    {
+      "@type": "@builder.io/mitosis/node",
+      "bindings": {},
+      "children": [],
+      "meta": {},
+      "name": "div",
+      "properties": {},
+      "scope": {},
+    },
+  ],
+  "context": {
+    "get": {},
+    "set": {},
+  },
+  "exports": {},
+  "hooks": {
+    "onEvent": [],
+    "onInit": {
+      "code": "console.log('onInit')",
+    },
+    "onMount": [],
+  },
+  "imports": [],
+  "inputs": [],
+  "meta": {},
+  "name": "OnInitPlain",
+  "refs": {},
+  "state": {},
+  "subComponents": [],
+}
+`;
+
 exports[`Parse JSX > Javascript > onMount 1`] = `
 {
   "@type": "@builder.io/mitosis/component",
@@ -18565,6 +18601,42 @@ console.log('set defaults with props')",
 }
 `;
 
+exports[`Parse JSX > Typescript > onInitPlain 1`] = `
+{
+  "@type": "@builder.io/mitosis/component",
+  "children": [
+    {
+      "@type": "@builder.io/mitosis/node",
+      "bindings": {},
+      "children": [],
+      "meta": {},
+      "name": "div",
+      "properties": {},
+      "scope": {},
+    },
+  ],
+  "context": {
+    "get": {},
+    "set": {},
+  },
+  "exports": {},
+  "hooks": {
+    "onEvent": [],
+    "onInit": {
+      "code": "console.log('onInit')",
+    },
+    "onMount": [],
+  },
+  "imports": [],
+  "inputs": [],
+  "meta": {},
+  "name": "OnInitPlain",
+  "refs": {},
+  "state": {},
+  "subComponents": [],
+}
+`;
+
 exports[`Parse JSX > Typescript > onMount 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 1cbbe95e50..393d98baaa 100644
--- a/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap
@@ -2329,6 +2329,25 @@ export default OnInit;
 "
 `;
 
+exports[`Preact > jsx > Javascript Test > onInitPlain 1`] = `
+"/** @jsx h */
+import { h, Fragment } from \\"preact\\";
+import { useRef } from \\"preact/hooks\\";
+
+function OnInitPlain(props) {
+  const hasInitialized = useRef(false);
+  if (!hasInitialized.current) {
+    console.log(\\"onInit\\");
+    hasInitialized.current = true;
+  }
+
+  return <div />;
+}
+
+export default OnInitPlain;
+"
+`;
+
 exports[`Preact > jsx > Javascript Test > onMount 1`] = `
 "/** @jsx h */
 import { h, Fragment } from \\"preact\\";
@@ -6091,6 +6110,25 @@ export default OnInit;
 "
 `;
 
+exports[`Preact > jsx > Typescript Test > onInitPlain 1`] = `
+"/** @jsx h */
+import { h, Fragment } from \\"preact\\";
+import { useRef } from \\"preact/hooks\\";
+
+function OnInitPlain(props: any) {
+  const hasInitialized = useRef(false);
+  if (!hasInitialized.current) {
+    console.log(\\"onInit\\");
+    hasInitialized.current = true;
+  }
+
+  return <div />;
+}
+
+export default OnInitPlain;
+"
+`;
+
 exports[`Preact > jsx > Typescript Test > onMount 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 c9d076141a..b91cfedc60 100644
--- a/packages/core/src/__tests__/__snapshots__/qwik.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/qwik.test.ts.snap
@@ -4054,6 +4054,21 @@ export default OnInit;
 "
 `;
 
+exports[`qwik > jsx > Javascript Test > onInitPlain 1`] = `
+"import { Fragment, component$, h, useTask$ } from \\"@builder.io/qwik\\";
+
+export const OnInitPlain = component$((props) => {
+  useTask$(() => {
+    console.log(\\"onInit\\");
+  });
+
+  return <div></div>;
+});
+
+export default OnInitPlain;
+"
+`;
+
 exports[`qwik > jsx > Javascript Test > onMount 1`] = `
 "import { Fragment, component$, h, useVisibleTask$ } from \\"@builder.io/qwik\\";
 
@@ -7686,6 +7701,21 @@ export default OnInit;
 "
 `;
 
+exports[`qwik > jsx > Typescript Test > onInitPlain 1`] = `
+"import { Fragment, component$, h, useTask$ } from \\"@builder.io/qwik\\";
+
+export const OnInitPlain = component$((props: any) => {
+  useTask$(() => {
+    console.log(\\"onInit\\");
+  });
+
+  return <div></div>;
+});
+
+export default OnInitPlain;
+"
+`;
+
 exports[`qwik > jsx > Typescript Test > onMount 1`] = `
 "import { Fragment, component$, h, useVisibleTask$ } 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 ff21c2510c..d0d034da53 100644
--- a/packages/core/src/__tests__/__snapshots__/react-native.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/react-native.test.ts.snap
@@ -3198,6 +3198,37 @@ export default OnInit;
 "
 `;
 
+exports[`React Native > jsx > Javascript Test > onInitPlain 1`] = `
+"import * as React from \\"react\\";
+import {
+  FlatList,
+  ScrollView,
+  View,
+  StyleSheet,
+  Image,
+  Text,
+  Pressable,
+  TextInput,
+  TouchableOpacity,
+  Button,
+  Linking,
+} from \\"react-native\\";
+import { useRef } from \\"react\\";
+
+function OnInitPlain(props) {
+  const hasInitialized = useRef(false);
+  if (!hasInitialized.current) {
+    console.log(\\"onInit\\");
+    hasInitialized.current = true;
+  }
+
+  return <View />;
+}
+
+export default OnInitPlain;
+"
+`;
+
 exports[`React Native > jsx > Javascript Test > onMount 1`] = `
 "import * as React from \\"react\\";
 import {
@@ -8322,6 +8353,37 @@ export default OnInit;
 "
 `;
 
+exports[`React Native > jsx > Typescript Test > onInitPlain 1`] = `
+"import * as React from \\"react\\";
+import {
+  FlatList,
+  ScrollView,
+  View,
+  StyleSheet,
+  Image,
+  Text,
+  Pressable,
+  TextInput,
+  TouchableOpacity,
+  Button,
+  Linking,
+} from \\"react-native\\";
+import { useRef } from \\"react\\";
+
+function OnInitPlain(props: any) {
+  const hasInitialized = useRef(false);
+  if (!hasInitialized.current) {
+    console.log(\\"onInit\\");
+    hasInitialized.current = true;
+  }
+
+  return <View />;
+}
+
+export default OnInitPlain;
+"
+`;
+
 exports[`React Native > jsx > Typescript Test > onMount 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 9eeab7c17d..0999ad8c6c 100644
--- a/packages/core/src/__tests__/__snapshots__/react.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/react.test.ts.snap
@@ -2308,6 +2308,24 @@ export default OnInit;
 "
 `;
 
+exports[`React > jsx > Javascript Test > onInitPlain 1`] = `
+"import * as React from \\"react\\";
+import { useRef } from \\"react\\";
+
+function OnInitPlain(props) {
+  const hasInitialized = useRef(false);
+  if (!hasInitialized.current) {
+    console.log(\\"onInit\\");
+    hasInitialized.current = true;
+  }
+
+  return <div />;
+}
+
+export default OnInitPlain;
+"
+`;
+
 exports[`React > jsx > Javascript Test > onMount 1`] = `
 "\\"use client\\";
 import * as React from \\"react\\";
@@ -5974,6 +5992,24 @@ export default OnInit;
 "
 `;
 
+exports[`React > jsx > Typescript Test > onInitPlain 1`] = `
+"import * as React from \\"react\\";
+import { useRef } from \\"react\\";
+
+function OnInitPlain(props: any) {
+  const hasInitialized = useRef(false);
+  if (!hasInitialized.current) {
+    console.log(\\"onInit\\");
+    hasInitialized.current = true;
+  }
+
+  return <div />;
+}
+
+export default OnInitPlain;
+"
+`;
+
 exports[`React > jsx > Typescript Test > onMount 1`] = `
 "\\"use client\\";
 import * as React from \\"react\\";
diff --git a/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap b/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap
index 3910089358..ad1b5a7ae2 100644
--- a/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap
@@ -2303,6 +2303,19 @@ export default OnInit;
 "
 `;
 
+exports[`RSC > jsx > Javascript Test > onInitPlain 1`] = `
+"import * as React from \\"react\\";
+
+function OnInitPlain(props) {
+  console.log(\\"onInit\\");
+
+  return <div />;
+}
+
+export default OnInitPlain;
+"
+`;
+
 exports[`RSC > jsx > Javascript Test > onMount 1`] = `
 "\\"use client\\";
 import * as React from \\"react\\";
@@ -3055,15 +3068,10 @@ export default UseTargetComponent;
 
 exports[`RSC > jsx > Javascript Test > webComponent 1`] = `
 "import * as React from \\"react\\";
-import { useRef } from \\"react\\";
 import { register } from \\"swiper/element/bundle\\";
 
 function MyBasicWebComponent(props) {
-  const hasInitialized = useRef(false);
-  if (!hasInitialized.current) {
-    register();
-    hasInitialized.current = true;
-  }
+  register();
 
   return (
     <swiper-container slides-per-view=\\"3\\" navigation=\\"true\\" pagination=\\"true\\">
@@ -5711,6 +5719,19 @@ export default OnInit;
 "
 `;
 
+exports[`RSC > jsx > Typescript Test > onInitPlain 1`] = `
+"import * as React from \\"react\\";
+
+function OnInitPlain(props: any) {
+  console.log(\\"onInit\\");
+
+  return <div />;
+}
+
+export default OnInitPlain;
+"
+`;
+
 exports[`RSC > jsx > Typescript Test > onMount 1`] = `
 "\\"use client\\";
 import * as React from \\"react\\";
@@ -6565,15 +6586,10 @@ export default UseTargetComponent;
 
 exports[`RSC > jsx > Typescript Test > webComponent 1`] = `
 "import * as React from \\"react\\";
-import { useRef } from \\"react\\";
 import { register } from \\"swiper/element/bundle\\";
 
 function MyBasicWebComponent(props: any) {
-  const hasInitialized = useRef(false);
-  if (!hasInitialized.current) {
-    register();
-    hasInitialized.current = true;
-  }
+  register();
 
   return (
     <swiper-container slides-per-view=\\"3\\" navigation=\\"true\\" pagination=\\"true\\">
diff --git a/packages/core/src/__tests__/__snapshots__/solid.test.ts.snap b/packages/core/src/__tests__/__snapshots__/solid.test.ts.snap
index d34748cc42..a47a642b15 100644
--- a/packages/core/src/__tests__/__snapshots__/solid.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/solid.test.ts.snap
@@ -4814,6 +4814,36 @@ export default OnInit;
 "
 `;
 
+exports[`Solid > jsx > Javascript Test > onInitPlain 1`] = `
+"function OnInitPlain(props) {
+  console.log(\\"onInit\\");
+
+  return (
+    <>
+      <div></div>
+    </>
+  );
+}
+
+export default OnInitPlain;
+"
+`;
+
+exports[`Solid > jsx > Javascript Test > onInitPlain 2`] = `
+"function OnInitPlain(props) {
+  console.log(\\"onInit\\");
+
+  return (
+    <>
+      <div></div>
+    </>
+  );
+}
+
+export default OnInitPlain;
+"
+`;
+
 exports[`Solid > jsx > Javascript Test > onMount 1`] = `
 "import { onMount } from \\"solid-js\\";
 
@@ -12428,6 +12458,36 @@ export default OnInit;
 "
 `;
 
+exports[`Solid > jsx > Typescript Test > onInitPlain 1`] = `
+"function OnInitPlain(props: any) {
+  console.log(\\"onInit\\");
+
+  return (
+    <>
+      <div></div>
+    </>
+  );
+}
+
+export default OnInitPlain;
+"
+`;
+
+exports[`Solid > jsx > Typescript Test > onInitPlain 2`] = `
+"function OnInitPlain(props: any) {
+  console.log(\\"onInit\\");
+
+  return (
+    <>
+      <div></div>
+    </>
+  );
+}
+
+export default OnInitPlain;
+"
+`;
+
 exports[`Solid > jsx > Typescript Test > onMount 1`] = `
 "import { onMount } from \\"solid-js\\";
 
diff --git a/packages/core/src/__tests__/__snapshots__/stencil.test.ts.snap b/packages/core/src/__tests__/__snapshots__/stencil.test.ts.snap
index c6aed6342c..2a20cd5a6a 100644
--- a/packages/core/src/__tests__/__snapshots__/stencil.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/stencil.test.ts.snap
@@ -2530,6 +2530,20 @@ export class OnInit {
 "
 `;
 
+exports[`Stencil > jsx > Javascript Test > onInitPlain 1`] = `
+"import { Component, h, Fragment } from \\"@stencil/core\\";
+
+@Component({
+  tag: \\"on-init-plain\\",
+})
+export class OnInitPlain {
+  render() {
+    return <div></div>;
+  }
+}
+"
+`;
+
 exports[`Stencil > jsx > Javascript Test > onMount 1`] = `
 "import { Component, h, Fragment } from \\"@stencil/core\\";
 
@@ -6390,6 +6404,20 @@ export class OnInit {
 "
 `;
 
+exports[`Stencil > jsx > Typescript Test > onInitPlain 1`] = `
+"import { Component, h, Fragment } from \\"@stencil/core\\";
+
+@Component({
+  tag: \\"on-init-plain\\",
+})
+export class OnInitPlain {
+  render() {
+    return <div></div>;
+  }
+}
+"
+`;
+
 exports[`Stencil > jsx > Typescript Test > onMount 1`] = `
 "import { Component, h, 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 1cae8fec90..2d181c014e 100644
--- a/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap
@@ -1973,6 +1973,14 @@ exports[`Svelte > jsx > Javascript Test > onInit 1`] = `
 <div>Default name defined by parent {name}</div>"
 `;
 
+exports[`Svelte > jsx > Javascript Test > onInitPlain 1`] = `
+"<script>
+  console.log(\\"onInit\\");
+</script>
+
+<div />"
+`;
+
 exports[`Svelte > jsx > Javascript Test > onMount 1`] = `
 "<script>
   import { onDestroy, onMount } from \\"svelte\\";
@@ -5254,6 +5262,14 @@ exports[`Svelte > jsx > Typescript Test > onInit 1`] = `
 <div>Default name defined by parent {name}</div>"
 `;
 
+exports[`Svelte > jsx > Typescript Test > onInitPlain 1`] = `
+"<script lang=\\"ts\\">
+  console.log(\\"onInit\\");
+</script>
+
+<div />"
+`;
+
 exports[`Svelte > jsx > Typescript Test > onMount 1`] = `
 "<script lang=\\"ts\\">
   import { onDestroy, onMount } from \\"svelte\\";
diff --git a/packages/core/src/__tests__/__snapshots__/taro.test.ts.snap b/packages/core/src/__tests__/__snapshots__/taro.test.ts.snap
index cd79244b08..31dcef141b 100644
--- a/packages/core/src/__tests__/__snapshots__/taro.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/taro.test.ts.snap
@@ -2333,6 +2333,25 @@ export default OnInit;
 "
 `;
 
+exports[`Taro > jsx > Javascript Test > onInitPlain 1`] = `
+"import * as React from \\"react\\";
+import { useRef } from \\"react\\";
+import { View } from \\"@tarojs/components\\";
+
+function OnInitPlain(props) {
+  const hasInitialized = useRef(false);
+  if (!hasInitialized.current) {
+    console.log(\\"onInit\\");
+    hasInitialized.current = true;
+  }
+
+  return <View />;
+}
+
+export default OnInitPlain;
+"
+`;
+
 exports[`Taro > jsx > Javascript Test > onMount 1`] = `
 "\\"use client\\";
 import * as React from \\"react\\";
@@ -6081,6 +6100,25 @@ export default OnInit;
 "
 `;
 
+exports[`Taro > jsx > Typescript Test > onInitPlain 1`] = `
+"import * as React from \\"react\\";
+import { useRef } from \\"react\\";
+import { View } from \\"@tarojs/components\\";
+
+function OnInitPlain(props: any) {
+  const hasInitialized = useRef(false);
+  if (!hasInitialized.current) {
+    console.log(\\"onInit\\");
+    hasInitialized.current = true;
+  }
+
+  return <View />;
+}
+
+export default OnInitPlain;
+"
+`;
+
 exports[`Taro > jsx > Typescript Test > onMount 1`] = `
 "\\"use client\\";
 import * as React from \\"react\\";
diff --git a/packages/core/src/__tests__/__snapshots__/vue-composition.test.ts.snap b/packages/core/src/__tests__/__snapshots__/vue-composition.test.ts.snap
index 682c5595c9..674a97f37e 100644
--- a/packages/core/src/__tests__/__snapshots__/vue-composition.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/vue-composition.test.ts.snap
@@ -2095,6 +2095,16 @@ console.log(\\"set defaults with props\\");
 </script>"
 `;
 
+exports[`Vue > jsx > Javascript Test > onInitPlain 1`] = `
+"<template>
+  <div></div>
+</template>
+
+<script setup>
+console.log(\\"onInit\\");
+</script>"
+`;
+
 exports[`Vue > jsx > Javascript Test > onMount 1`] = `
 "<template>
   <div></div>
@@ -5406,6 +5416,16 @@ console.log(\\"set defaults with props\\");
 </script>"
 `;
 
+exports[`Vue > jsx > Typescript Test > onInitPlain 1`] = `
+"<template>
+  <div></div>
+</template>
+
+<script setup lang=\\"ts\\">
+console.log(\\"onInit\\");
+</script>"
+`;
+
 exports[`Vue > jsx > Typescript Test > onMount 1`] = `
 "<template>
   <div></div>
diff --git a/packages/core/src/__tests__/__snapshots__/vue.test.ts.snap b/packages/core/src/__tests__/__snapshots__/vue.test.ts.snap
index d8e5e9938c..68808ff35e 100644
--- a/packages/core/src/__tests__/__snapshots__/vue.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/vue.test.ts.snap
@@ -2578,6 +2578,24 @@ export default defineComponent({
 </script>"
 `;
 
+exports[`Vue > jsx > Javascript Test > onInitPlain 1`] = `
+"<template>
+  <div></div>
+</template>
+
+<script>
+import { defineComponent } from \\"vue\\";
+
+export default defineComponent({
+  name: \\"on-init-plain\\",
+
+  created() {
+    console.log(\\"onInit\\");
+  },
+});
+</script>"
+`;
+
 exports[`Vue > jsx > Javascript Test > onMount 1`] = `
 "<template>
   <div></div>
@@ -6747,6 +6765,24 @@ export default defineComponent({
 </script>"
 `;
 
+exports[`Vue > jsx > Typescript Test > onInitPlain 1`] = `
+"<template>
+  <div></div>
+</template>
+
+<script lang=\\"ts\\">
+import { defineComponent } from \\"vue\\";
+
+export default defineComponent({
+  name: \\"on-init-plain\\",
+
+  created() {
+    console.log(\\"onInit\\");
+  },
+});
+</script>"
+`;
+
 exports[`Vue > jsx > Typescript Test > onMount 1`] = `
 "<template>
   <div></div>
diff --git a/packages/core/src/__tests__/__snapshots__/webcomponent.test.ts.snap b/packages/core/src/__tests__/__snapshots__/webcomponent.test.ts.snap
index 2ae6e58041..240a9e8c82 100644
--- a/packages/core/src/__tests__/__snapshots__/webcomponent.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/webcomponent.test.ts.snap
@@ -10061,6 +10061,103 @@ customElements.define(\\"on-init\\", OnInit);
 "
 `;
 
+exports[`webcomponent > jsx > Javascript Test > onInitPlain 1`] = `
+"/**
+ * Usage:
+ *
+ *  <on-init-plain></on-init-plain>
+ *
+ */
+class OnInitPlain extends HTMLElement {
+  get _root() {
+    return this.shadowRoot || this;
+  }
+
+  constructor() {
+    super();
+    const self = this;
+
+    this.onInitOnce = false;
+
+    this.state = {};
+    if (!this.props) {
+      this.props = {};
+    }
+
+    // used to keep track of all nodes created by show/for
+    this.nodesToDestroy = [];
+    // batch updates
+    this.pendingUpdate = false;
+
+    if (undefined) {
+      this.attachShadow({ mode: \\"open\\" });
+    }
+  }
+
+  destroyAnyNodes() {
+    // destroy current view template refs before rendering again
+    this.nodesToDestroy.forEach((el) => el.remove());
+    this.nodesToDestroy = [];
+  }
+
+  connectedCallback() {
+    this._root.innerHTML = \`
+      <div></div>\`;
+    this.pendingUpdate = true;
+    this.onInit();
+    this.render();
+    this.onMount();
+    this.pendingUpdate = false;
+    this.update();
+  }
+
+  onInit() {
+    if (!this.onInitOnce) {
+      console.log(\\"onInit\\");
+      this.onInitOnce = true;
+    }
+  }
+
+  onMount() {}
+
+  onUpdate() {}
+
+  update() {
+    if (this.pendingUpdate === true) {
+      return;
+    }
+    this.pendingUpdate = true;
+    this.render();
+    this.onUpdate();
+    this.pendingUpdate = false;
+  }
+
+  render() {
+    // re-rendering needs to ensure that all nodes generated by for/show are refreshed
+    this.destroyAnyNodes();
+    this.updateBindings();
+  }
+
+  updateBindings() {}
+
+  // Helper to render content
+  renderTextNode(el, text) {
+    const textNode = document.createTextNode(text);
+    if (el?.scope) {
+      textNode.scope = el.scope;
+    }
+    if (el?.context) {
+      textNode.context = el.context;
+    }
+    el.after(textNode);
+    this.nodesToDestroy.push(el.nextSibling);
+  }
+}
+
+customElements.define(\\"on-init-plain\\", OnInitPlain);
+"
+`;
+
 exports[`webcomponent > jsx > Javascript Test > onMount 1`] = `
 "/**
  * Usage:
@@ -25223,6 +25320,103 @@ customElements.define(\\"on-init\\", OnInit);
 "
 `;
 
+exports[`webcomponent > jsx > Typescript Test > onInitPlain 1`] = `
+"/**
+ * Usage:
+ *
+ *  <on-init-plain></on-init-plain>
+ *
+ */
+class OnInitPlain extends HTMLElement {
+  get _root() {
+    return this.shadowRoot || this;
+  }
+
+  constructor() {
+    super();
+    const self = this;
+
+    this.onInitOnce = false;
+
+    this.state = {};
+    if (!this.props) {
+      this.props = {};
+    }
+
+    // used to keep track of all nodes created by show/for
+    this.nodesToDestroy = [];
+    // batch updates
+    this.pendingUpdate = false;
+
+    if (undefined) {
+      this.attachShadow({ mode: \\"open\\" });
+    }
+  }
+
+  destroyAnyNodes() {
+    // destroy current view template refs before rendering again
+    this.nodesToDestroy.forEach((el) => el.remove());
+    this.nodesToDestroy = [];
+  }
+
+  connectedCallback() {
+    this._root.innerHTML = \`
+      <div></div>\`;
+    this.pendingUpdate = true;
+    this.onInit();
+    this.render();
+    this.onMount();
+    this.pendingUpdate = false;
+    this.update();
+  }
+
+  onInit() {
+    if (!this.onInitOnce) {
+      console.log(\\"onInit\\");
+      this.onInitOnce = true;
+    }
+  }
+
+  onMount() {}
+
+  onUpdate() {}
+
+  update() {
+    if (this.pendingUpdate === true) {
+      return;
+    }
+    this.pendingUpdate = true;
+    this.render();
+    this.onUpdate();
+    this.pendingUpdate = false;
+  }
+
+  render() {
+    // re-rendering needs to ensure that all nodes generated by for/show are refreshed
+    this.destroyAnyNodes();
+    this.updateBindings();
+  }
+
+  updateBindings() {}
+
+  // Helper to render content
+  renderTextNode(el, text) {
+    const textNode = document.createTextNode(text);
+    if (el?.scope) {
+      textNode.scope = el.scope;
+    }
+    if (el?.context) {
+      textNode.context = el.context;
+    }
+    el.after(textNode);
+    this.nodesToDestroy.push(el.nextSibling);
+  }
+}
+
+customElements.define(\\"on-init-plain\\", OnInitPlain);
+"
+`;
+
 exports[`webcomponent > jsx > Typescript Test > onMount 1`] = `
 "/**
  * Usage:
diff --git a/packages/core/src/__tests__/data/blocks/onInit-plain.raw.tsx b/packages/core/src/__tests__/data/blocks/onInit-plain.raw.tsx
new file mode 100644
index 0000000000..c6d986522e
--- /dev/null
+++ b/packages/core/src/__tests__/data/blocks/onInit-plain.raw.tsx
@@ -0,0 +1,9 @@
+import { onInit } from '@builder.io/mitosis';
+
+export default function OnInitPlain() {
+  onInit(() => {
+    console.log('onInit');
+  });
+
+  return <div />;
+}
diff --git a/packages/core/src/__tests__/test-generator.ts b/packages/core/src/__tests__/test-generator.ts
index f25214192b..aae5dd63a6 100644
--- a/packages/core/src/__tests__/test-generator.ts
+++ b/packages/core/src/__tests__/test-generator.ts
@@ -1,8 +1,9 @@
 import { parseJsx } from '@/parsers/jsx';
 import { Target } from '@/types/config';
 import { BaseTranspilerOptions, TranspilerGenerator } from '@/types/transpiler';
-import { describe, test } from 'vitest';
+import { describe, expect, test } from 'vitest';
 import { MitosisComponent, createTypescriptProject, parseSvelte } from '..';
+
 const getRawFile = async (filePath: string) => {
   const code = await import(`${filePath}?raw`).then((x) => x.default as string);
   return { code, filePath: ['src', '__tests__', filePath].join('/') };
@@ -85,6 +86,7 @@ const inputParentBlock = getRawFile('./data/blocks/input-parent.raw.tsx');
 const multipleOnUpdate = getRawFile('./data/blocks/multiple-onUpdate.raw.tsx');
 const multipleOnUpdateWithDeps = getRawFile('./data/blocks/multiple-onUpdateWithDeps.raw.tsx');
 const onInit = getRawFile('./data/blocks/onInit.raw.tsx');
+const onInitPlain = getRawFile('./data/blocks/onInit-plain.raw.tsx');
 const onEvent = getRawFile('./data/blocks/onEvent.raw.tsx');
 const onInitonMount = getRawFile('./data/blocks/onInit-onMount.raw.tsx');
 const onMount = getRawFile('./data/blocks/onMount.raw.tsx');
@@ -190,6 +192,7 @@ const BASIC_TESTS: Tests = {
   Columns: columns,
   onUpdate: onUpdate,
   onInit: onInit,
+  onInitPlain,
   onEvent,
   onUpdateWithDeps: onUpdateWithDeps,
   onMount: onMount,
diff --git a/packages/core/src/generators/react/generator.ts b/packages/core/src/generators/react/generator.ts
index 405d625c5f..57435e0a7d 100644
--- a/packages/core/src/generators/react/generator.ts
+++ b/packages/core/src/generators/react/generator.ts
@@ -289,18 +289,21 @@ const getPropsDefinition = ({ json }: { json: MitosisComponent }) => {
   return `${json.name}.defaultProps = {${defaultPropsString}};`;
 };
 
-const checkShouldAddUseClientDirective = (json: MitosisComponent, options: ToReactOptions) => {
-  if (!options.addUseClientDirectiveIfNeeded) return false;
-  if (options.type === 'native') return false;
-  if (options.preact) return false;
-
+const isRSC = (json: MitosisComponent, options: ToReactOptions) => {
   // When using RSC generator, we check `componentType` field in metadata to determine if it's a server component
   const componentType = json.meta.useMetadata?.rsc?.componentType;
   if (options.rsc && checkIsDefined(componentType)) {
-    return componentType === 'client';
+    return componentType === 'server';
   }
 
-  return checkIfIsClientComponent(json);
+  return !checkIfIsClientComponent(json);
+};
+const checkShouldAddUseClientDirective = (json: MitosisComponent, options: ToReactOptions) => {
+  if (!options.addUseClientDirectiveIfNeeded) return false;
+  if (options.type === 'native') return false;
+  if (options.preact) return false;
+
+  return !isRSC(json, options);
 };
 
 const _componentToReact = (
@@ -376,7 +379,13 @@ const _componentToReact = (
   if (hasContext(json) && options.contextType !== 'prop-drill') {
     reactLibImports.add('useContext');
   }
-  if (allRefs.length || json.hooks.onInit?.code) {
+
+  const shouldAddUseClientDirective = checkShouldAddUseClientDirective(json, options);
+
+  const shouldInlineOnInitHook =
+    !shouldAddUseClientDirective && options.rsc && isRSC(json, options);
+
+  if (allRefs.length || (json.hooks.onInit?.code && !shouldInlineOnInitHook)) {
     reactLibImports.add('useRef');
   }
   if (!options.preact && hasPropRef) {
@@ -450,7 +459,9 @@ const _componentToReact = (
 
     ${
       json.hooks.onInit?.code
-        ? `
+        ? shouldInlineOnInitHook
+          ? processHookCode({ str: json.hooks.onInit.code, options })
+          : `
         const hasInitialized = useRef(false);
         if (!hasInitialized.current) {
           ${processHookCode({
@@ -530,8 +541,6 @@ const _componentToReact = (
     );
   `;
 
-  const shouldAddUseClientDirective = checkShouldAddUseClientDirective(json, options);
-
   const str = dedent`
   ${shouldAddUseClientDirective ? `'use client';` : ''}
   ${getDefaultImport(json, options)}