f

BuilderIO · Feb 5, 2024 · c30022e · c30022e
1 parent e4c18c7
commit c30022e
Show file tree

Hide file tree

Showing 24 changed files with 2,268 additions and 122 deletions.
diff --git a/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap b/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap
@@ -2477,6 +2477,25 @@ exports[`Alpine.js > jsx > Javascript Test > showWithRootText 1`] = `
 "
 `;
 
+exports[`Alpine.js > jsx > Javascript Test > signalsOnUpdate 1`] = `
+"<style>
+  .div {
+    padding: 10px;
+  }
+</style>
+<div class=\\"test div\\" x-data=\\"myBasicComponent()\\">
+  <span x-html=\\"id\\"></span>
+
+  <span x-html=\\"foo.value.bar.baz\\"></span>
+</div>
+<script>
+  document.addEventListener(\\"alpine:init\\", () => {
+    Alpine.data(\\"myBasicComponent\\", () => ({}));
+  });
+</script>
+"
+`;
+
 exports[`Alpine.js > jsx > Javascript Test > spreadAttrs 1`] = `
 "<input x-data=\\"myBasicComponent()\\" x-bind=\\"attrs\\" />
 <script>
@@ -5187,6 +5206,25 @@ exports[`Alpine.js > jsx > Typescript Test > showWithRootText 1`] = `
 "
 `;
 
+exports[`Alpine.js > jsx > Typescript Test > signalsOnUpdate 1`] = `
+"<style>
+  .div {
+    padding: 10px;
+  }
+</style>
+<div class=\\"test div\\" x-data=\\"myBasicComponent()\\">
+  <span x-html=\\"id\\"></span>
+
+  <span x-html=\\"foo.bar.baz\\"></span>
+</div>
+<script>
+  document.addEventListener(\\"alpine:init\\", () => {
+    Alpine.data(\\"myBasicComponent\\", () => ({}));
+  });
+</script>
+"
+`;
+
 exports[`Alpine.js > jsx > Typescript Test > spreadAttrs 1`] = `
 "<input x-data=\\"myBasicComponent()\\" x-bind=\\"attrs\\" />
 <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
@@ -3869,6 +3869,44 @@ export class ShowRootTextModule {}
 "
 `;
 
+exports[`Angular with Preserve Imports and File Extensions > jsx > Javascript Test > signalsOnUpdate 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component, Input } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"my-basic-component, MyBasicComponent\\",
+  template: \`
+    <div class=\\"test div\\">{{id}} {{foo.value.bar.baz}}</div>
+  \`,
+  styles: [
+    \`
+      .div {
+        padding: 10px;
+      }
+    \`,
+  ],
+})
+export class MyBasicComponent {
+  @Input() id: any;
+  @Input() foo: any;
+
+  ngAfterContentChecked() {
+    console.log(\\"props.id changed\\", this.id);
+    console.log(\\"props.foo.value.bar.baz changed\\", this.foo.value.bar.baz);
+  }
+}
+
+@NgModule({
+  declarations: [MyBasicComponent],
+  imports: [CommonModule],
+  exports: [MyBasicComponent],
+})
+export class MyBasicComponentModule {}
+"
+`;
+
 exports[`Angular with Preserve Imports and File Extensions > jsx > Javascript Test > spreadAttrs 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -8563,6 +8601,53 @@ export class ShowRootTextModule {}
 "
 `;
 
+exports[`Angular with Preserve Imports and File Extensions > jsx > Typescript Test > signalsOnUpdate 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component, Input } from \\"@angular/core\\";
+
+type Props = {
+  id: string;
+  foo: {
+    bar: {
+      baz: number;
+    };
+  };
+};
+
+@Component({
+  selector: \\"my-basic-component, MyBasicComponent\\",
+  template: \`
+    <div class=\\"test div\\">{{id}} {{foo.bar.baz}}</div>
+  \`,
+  styles: [
+    \`
+      .div {
+        padding: 10px;
+      }
+    \`,
+  ],
+})
+export class MyBasicComponent {
+  @Input() id: Props[\\"id\\"];
+  @Input() foo: Props[\\"foo\\"];
+
+  ngAfterContentChecked() {
+    console.log(\\"props.id changed\\", this.id);
+    console.log(\\"props.foo.value.bar.baz changed\\", this.foo.bar.baz);
+  }
+}
+
+@NgModule({
+  declarations: [MyBasicComponent],
+  imports: [CommonModule],
+  exports: [MyBasicComponent],
+})
+export class MyBasicComponentModule {}
+"
+`;
+
 exports[`Angular with Preserve Imports and File Extensions > jsx > Typescript Test > spreadAttrs 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
@@ -3954,6 +3954,45 @@ export class ShowRootTextModule {}
 "
 `;
 
+exports[`Angular with Import Mapper Tests > jsx > Javascript Test > signalsOnUpdate 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component, Input } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"my-basic-component, MyBasicComponent\\",
+  template: \`
+    <div class=\\"test div\\">{{id}} {{foo.value.bar.baz}}</div>
+  \`,
+  styles: [
+    \`
+      .div {
+        padding: 10px;
+      }
+    \`,
+  ],
+})
+export class MyBasicComponent {
+  @Input() id: any;
+  @Input() foo: any;
+
+  ngAfterContentChecked() {
+    console.log(\\"props.id changed\\", this.id);
+    console.log(\\"props.foo.value.bar.baz changed\\", this.foo.value.bar.baz);
+  }
+}
+
+@NgModule({
+  declarations: [MyBasicComponent],
+  imports: [CommonModule],
+  exports: [MyBasicComponent],
+  bootstrap: [SomeOtherComponent],
+})
+export class MyBasicComponentModule {}
+"
+`;
+
 exports[`Angular with Import Mapper Tests > jsx > Javascript Test > spreadAttrs 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -8749,6 +8788,54 @@ export class ShowRootTextModule {}
 "
 `;
 
+exports[`Angular with Import Mapper Tests > jsx > Typescript Test > signalsOnUpdate 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component, Input } from \\"@angular/core\\";
+
+type Props = {
+  id: string;
+  foo: {
+    bar: {
+      baz: number;
+    };
+  };
+};
+
+@Component({
+  selector: \\"my-basic-component, MyBasicComponent\\",
+  template: \`
+    <div class=\\"test div\\">{{id}} {{foo.bar.baz}}</div>
+  \`,
+  styles: [
+    \`
+      .div {
+        padding: 10px;
+      }
+    \`,
+  ],
+})
+export class MyBasicComponent {
+  @Input() id: Props[\\"id\\"];
+  @Input() foo: Props[\\"foo\\"];
+
+  ngAfterContentChecked() {
+    console.log(\\"props.id changed\\", this.id);
+    console.log(\\"props.foo.value.bar.baz changed\\", this.foo.bar.baz);
+  }
+}
+
+@NgModule({
+  declarations: [MyBasicComponent],
+  imports: [CommonModule],
+  exports: [MyBasicComponent],
+  bootstrap: [SomeOtherComponent],
+})
+export class MyBasicComponentModule {}
+"
+`;
+
 exports[`Angular with Import Mapper Tests > jsx > Typescript Test > spreadAttrs 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";