Feat: RSC: onInit (#1587)

* f * f * f * add test * f * f
BuilderIO · Oct 11, 2024 · 82c79fd · 82c79fd
1 parent a024e90
commit 82c79fd
Show file tree

Hide file tree

Showing 27 changed files with 1,172 additions and 24 deletions.
diff --git a/.changeset/shiny-yaks-fly.md 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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\\";