fix: support <Show else> in builder json (#1602)

* fix: support <Show else> in builder json * ⚾️ * Update packages/core/src/generators/builder/generator.ts Co-authored-by: Steve Sewell <steve@builder.io> * 🌀 --------- Co-authored-by: Steve Sewell <steve@builder.io>
BuilderIO · Oct 24, 2024 · 8d823a1 · 8d823a1
1 parent bc55fca
commit 8d823a1
Show file tree

Hide file tree

Showing 30 changed files with 2,476 additions and 168 deletions.
diff --git a/.changeset/silent-llamas-hope.md b/.changeset/silent-llamas-hope.md
@@ -0,0 +1,5 @@
+---
+'@builder.io/mitosis': patch
+---
+
+[Builder] Fix: support Show.else property
diff --git a/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap b/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap
@@ -2453,6 +2453,11 @@ exports[`Alpine.js > jsx > Javascript Test > showExpressions 1`] = `
   <template x-if=\\"conditionA === 'Default'\\">
     <template x-if=\\"conditionB === 'Complete'\\">20mb</template>
   </template>
+  <template x-if=\\"conditionA === 'Default'\\">
+    <template x-if=\\"conditionB === 'Complete'\\">
+      <div>complete</div>
+    </template>
+  </template>
 </div>
 <script>
   document.addEventListener(\\"alpine:init\\", () => {
@@ -5263,6 +5268,11 @@ exports[`Alpine.js > jsx > Typescript Test > showExpressions 1`] = `
   <template x-if=\\"conditionA === 'Default'\\">
     <template x-if=\\"conditionB === 'Complete'\\">20mb</template>
   </template>
+  <template x-if=\\"conditionA === 'Default'\\">
+    <template x-if=\\"conditionB === 'Complete'\\">
+      <div>complete</div>
+    </template>
+  </template>
 </div>
 <script>
   document.addEventListener(\\"alpine:init\\", () => {

diff --git a/packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap b/packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap
@@ -5737,6 +5737,18 @@ import { Component, Input } from \\"@angular/core\\";
         <ng-container *ngIf=\\"!(conditionB === 'Complete')\\">9mb</ng-container>
       </ng-container>
       <ng-container *ngIf=\\"!(conditionA === 'Default')\\">4mb</ng-container>
+      <ng-container *ngIf=\\"conditionA === 'Default'\\">
+        <ng-container *ngIf=\\"conditionB === 'Complete'\\">
+          <div>complete</div>
+        </ng-container>
+        <ng-container *ngIf=\\"!(conditionB === 'Complete')\\">9mb</ng-container>
+      </ng-container>
+      <ng-container *ngIf=\\"!(conditionA === 'Default')\\">
+        <ng-container *ngIf=\\"conditionC === 'Complete'\\">dff</ng-container>
+        <ng-container *ngIf=\\"!(conditionC === 'Complete')\\">
+          <div>complete else</div>
+        </ng-container>
+      </ng-container>
     </div>
   \`,
   styles: [
@@ -5750,6 +5762,7 @@ import { Component, Input } from \\"@angular/core\\";
 export default class ShowWithOtherValues {
   @Input() conditionA;
   @Input() conditionB;
+  @Input() conditionC;
 }
 
 @NgModule({
@@ -13110,6 +13123,18 @@ interface Props {
         <ng-container *ngIf=\\"!(conditionB === 'Complete')\\">9mb</ng-container>
       </ng-container>
       <ng-container *ngIf=\\"!(conditionA === 'Default')\\">4mb</ng-container>
+      <ng-container *ngIf=\\"conditionA === 'Default'\\">
+        <ng-container *ngIf=\\"conditionB === 'Complete'\\">
+          <div>complete</div>
+        </ng-container>
+        <ng-container *ngIf=\\"!(conditionB === 'Complete')\\">9mb</ng-container>
+      </ng-container>
+      <ng-container *ngIf=\\"!(conditionA === 'Default')\\">
+        <ng-container *ngIf=\\"conditionC === 'Complete'\\">dff</ng-container>
+        <ng-container *ngIf=\\"!(conditionC === 'Complete')\\">
+          <div>complete else</div>
+        </ng-container>
+      </ng-container>
     </div>
   \`,
   styles: [
@@ -13123,6 +13148,7 @@ interface Props {
 export default class ShowWithOtherValues {
   @Input() conditionA!: Props[\\"conditionA\\"];
   @Input() conditionB!: Props[\\"conditionB\\"];
+  @Input() conditionC!: Props[\\"conditionC\\"];
 }
 
 @NgModule({

diff --git a/packages/core/src/__tests__/__snapshots__/angular.mapper.test.ts.snap b/packages/core/src/__tests__/__snapshots__/angular.mapper.test.ts.snap
@@ -5827,6 +5827,18 @@ import { Component, Input } from \\"@angular/core\\";
         <ng-container *ngIf=\\"!(conditionB === 'Complete')\\">9mb</ng-container>
       </ng-container>
       <ng-container *ngIf=\\"!(conditionA === 'Default')\\">4mb</ng-container>
+      <ng-container *ngIf=\\"conditionA === 'Default'\\">
+        <ng-container *ngIf=\\"conditionB === 'Complete'\\">
+          <div>complete</div>
+        </ng-container>
+        <ng-container *ngIf=\\"!(conditionB === 'Complete')\\">9mb</ng-container>
+      </ng-container>
+      <ng-container *ngIf=\\"!(conditionA === 'Default')\\">
+        <ng-container *ngIf=\\"conditionC === 'Complete'\\">dff</ng-container>
+        <ng-container *ngIf=\\"!(conditionC === 'Complete')\\">
+          <div>complete else</div>
+        </ng-container>
+      </ng-container>
     </div>
   \`,
   styles: [
@@ -5840,6 +5852,7 @@ import { Component, Input } from \\"@angular/core\\";
 export default class ShowWithOtherValues {
   @Input() conditionA;
   @Input() conditionB;
+  @Input() conditionC;
 }
 
 @NgModule({
@@ -13318,6 +13331,18 @@ interface Props {
         <ng-container *ngIf=\\"!(conditionB === 'Complete')\\">9mb</ng-container>
       </ng-container>
       <ng-container *ngIf=\\"!(conditionA === 'Default')\\">4mb</ng-container>
+      <ng-container *ngIf=\\"conditionA === 'Default'\\">
+        <ng-container *ngIf=\\"conditionB === 'Complete'\\">
+          <div>complete</div>
+        </ng-container>
+        <ng-container *ngIf=\\"!(conditionB === 'Complete')\\">9mb</ng-container>
+      </ng-container>
+      <ng-container *ngIf=\\"!(conditionA === 'Default')\\">
+        <ng-container *ngIf=\\"conditionC === 'Complete'\\">dff</ng-container>
+        <ng-container *ngIf=\\"!(conditionC === 'Complete')\\">
+          <div>complete else</div>
+        </ng-container>
+      </ng-container>
     </div>
   \`,
   styles: [
@@ -13331,6 +13356,7 @@ interface Props {
 export default class ShowWithOtherValues {
   @Input() conditionA!: Props[\\"conditionA\\"];
   @Input() conditionB!: Props[\\"conditionB\\"];
+  @Input() conditionC!: Props[\\"conditionC\\"];
 }
 
 @NgModule({

diff --git a/packages/core/src/__tests__/__snapshots__/angular.state.test.ts.snap b/packages/core/src/__tests__/__snapshots__/angular.state.test.ts.snap
@@ -5917,6 +5917,18 @@ import { Component, Input } from \\"@angular/core\\";
         <ng-container *ngIf=\\"!(conditionB === 'Complete')\\">9mb</ng-container>
       </ng-container>
       <ng-container *ngIf=\\"!(conditionA === 'Default')\\">4mb</ng-container>
+      <ng-container *ngIf=\\"conditionA === 'Default'\\">
+        <ng-container *ngIf=\\"conditionB === 'Complete'\\">
+          <div>complete</div>
+        </ng-container>
+        <ng-container *ngIf=\\"!(conditionB === 'Complete')\\">9mb</ng-container>
+      </ng-container>
+      <ng-container *ngIf=\\"!(conditionA === 'Default')\\">
+        <ng-container *ngIf=\\"conditionC === 'Complete'\\">dff</ng-container>
+        <ng-container *ngIf=\\"!(conditionC === 'Complete')\\">
+          <div>complete else</div>
+        </ng-container>
+      </ng-container>
     </div>
   \`,
   styles: [
@@ -5930,6 +5942,7 @@ import { Component, Input } from \\"@angular/core\\";
 export default class ShowWithOtherValues {
   @Input() conditionA;
   @Input() conditionB;
+  @Input() conditionC;
 }
 
 @NgModule({
@@ -13534,6 +13547,18 @@ interface Props {
         <ng-container *ngIf=\\"!(conditionB === 'Complete')\\">9mb</ng-container>
       </ng-container>
       <ng-container *ngIf=\\"!(conditionA === 'Default')\\">4mb</ng-container>
+      <ng-container *ngIf=\\"conditionA === 'Default'\\">
+        <ng-container *ngIf=\\"conditionB === 'Complete'\\">
+          <div>complete</div>
+        </ng-container>
+        <ng-container *ngIf=\\"!(conditionB === 'Complete')\\">9mb</ng-container>
+      </ng-container>
+      <ng-container *ngIf=\\"!(conditionA === 'Default')\\">
+        <ng-container *ngIf=\\"conditionC === 'Complete'\\">dff</ng-container>
+        <ng-container *ngIf=\\"!(conditionC === 'Complete')\\">
+          <div>complete else</div>
+        </ng-container>
+      </ng-container>
     </div>
   \`,
   styles: [
@@ -13547,6 +13572,7 @@ interface Props {
 export default class ShowWithOtherValues {
   @Input() conditionA!: Props[\\"conditionA\\"];
   @Input() conditionB!: Props[\\"conditionB\\"];
+  @Input() conditionC!: Props[\\"conditionC\\"];
 }
 
 @NgModule({

diff --git a/packages/core/src/__tests__/__snapshots__/angular.styles.test.ts.snap b/packages/core/src/__tests__/__snapshots__/angular.styles.test.ts.snap
@@ -5157,12 +5157,25 @@ import { Component, Input } from \\"@angular/core\\";
         <ng-container *ngIf=\\"!(conditionB === 'Complete')\\">9mb</ng-container>
       </ng-container>
       <ng-container *ngIf=\\"!(conditionA === 'Default')\\">4mb</ng-container>
+      <ng-container *ngIf=\\"conditionA === 'Default'\\">
+        <ng-container *ngIf=\\"conditionB === 'Complete'\\">
+          <div>complete</div>
+        </ng-container>
+        <ng-container *ngIf=\\"!(conditionB === 'Complete')\\">9mb</ng-container>
+      </ng-container>
+      <ng-container *ngIf=\\"!(conditionA === 'Default')\\">
+        <ng-container *ngIf=\\"conditionC === 'Complete'\\">dff</ng-container>
+        <ng-container *ngIf=\\"!(conditionC === 'Complete')\\">
+          <div>complete else</div>
+        </ng-container>
+      </ng-container>
     </div>
   \`,
 })
 export default class ShowWithOtherValues {
   @Input() conditionA;
   @Input() conditionB;
+  @Input() conditionC;
 }
 
 @NgModule({
@@ -11789,12 +11802,25 @@ interface Props {
         <ng-container *ngIf=\\"!(conditionB === 'Complete')\\">9mb</ng-container>
       </ng-container>
       <ng-container *ngIf=\\"!(conditionA === 'Default')\\">4mb</ng-container>
+      <ng-container *ngIf=\\"conditionA === 'Default'\\">
+        <ng-container *ngIf=\\"conditionB === 'Complete'\\">
+          <div>complete</div>
+        </ng-container>
+        <ng-container *ngIf=\\"!(conditionB === 'Complete')\\">9mb</ng-container>
+      </ng-container>
+      <ng-container *ngIf=\\"!(conditionA === 'Default')\\">
+        <ng-container *ngIf=\\"conditionC === 'Complete'\\">dff</ng-container>
+        <ng-container *ngIf=\\"!(conditionC === 'Complete')\\">
+          <div>complete else</div>
+        </ng-container>
+      </ng-container>
     </div>
   \`,
 })
 export default class ShowWithOtherValues {
   @Input() conditionA!: Props[\\"conditionA\\"];
   @Input() conditionB!: Props[\\"conditionB\\"];
+  @Input() conditionC!: Props[\\"conditionC\\"];
 }
 
 @NgModule({

diff --git a/packages/core/src/__tests__/__snapshots__/angular.test.ts.snap b/packages/core/src/__tests__/__snapshots__/angular.test.ts.snap
@@ -10782,6 +10782,18 @@ import { Component, Input } from \\"@angular/core\\";
         <ng-container *ngIf=\\"!(conditionB === 'Complete')\\">9mb</ng-container>
       </ng-container>
       <ng-container *ngIf=\\"!(conditionA === 'Default')\\">4mb</ng-container>
+      <ng-container *ngIf=\\"conditionA === 'Default'\\">
+        <ng-container *ngIf=\\"conditionB === 'Complete'\\">
+          <div>complete</div>
+        </ng-container>
+        <ng-container *ngIf=\\"!(conditionB === 'Complete')\\">9mb</ng-container>
+      </ng-container>
+      <ng-container *ngIf=\\"!(conditionA === 'Default')\\">
+        <ng-container *ngIf=\\"conditionC === 'Complete'\\">dff</ng-container>
+        <ng-container *ngIf=\\"!(conditionC === 'Complete')\\">
+          <div>complete else</div>
+        </ng-container>
+      </ng-container>
     </div>
   \`,
   styles: [
@@ -10795,6 +10807,7 @@ import { Component, Input } from \\"@angular/core\\";
 export default class ShowWithOtherValues {
   @Input() conditionA;
   @Input() conditionB;
+  @Input() conditionC;
 }
 
 @NgModule({
@@ -10847,6 +10860,18 @@ import { CommonModule } from \\"@angular/common\\";
         <ng-container *ngIf=\\"!(conditionB === 'Complete')\\">9mb</ng-container>
       </ng-container>
       <ng-container *ngIf=\\"!(conditionA === 'Default')\\">4mb</ng-container>
+      <ng-container *ngIf=\\"conditionA === 'Default'\\">
+        <ng-container *ngIf=\\"conditionB === 'Complete'\\">
+          <div>complete</div>
+        </ng-container>
+        <ng-container *ngIf=\\"!(conditionB === 'Complete')\\">9mb</ng-container>
+      </ng-container>
+      <ng-container *ngIf=\\"!(conditionA === 'Default')\\">
+        <ng-container *ngIf=\\"conditionC === 'Complete'\\">dff</ng-container>
+        <ng-container *ngIf=\\"!(conditionC === 'Complete')\\">
+          <div>complete else</div>
+        </ng-container>
+      </ng-container>
     </div>
   \`,
   styles: [
@@ -10862,6 +10887,7 @@ import { CommonModule } from \\"@angular/common\\";
 export default class ShowWithOtherValues {
   @Input() conditionA;
   @Input() conditionB;
+  @Input() conditionC;
 }
 "
 `;
@@ -24678,6 +24704,18 @@ interface Props {
         <ng-container *ngIf=\\"!(conditionB === 'Complete')\\">9mb</ng-container>
       </ng-container>
       <ng-container *ngIf=\\"!(conditionA === 'Default')\\">4mb</ng-container>
+      <ng-container *ngIf=\\"conditionA === 'Default'\\">
+        <ng-container *ngIf=\\"conditionB === 'Complete'\\">
+          <div>complete</div>
+        </ng-container>
+        <ng-container *ngIf=\\"!(conditionB === 'Complete')\\">9mb</ng-container>
+      </ng-container>
+      <ng-container *ngIf=\\"!(conditionA === 'Default')\\">
+        <ng-container *ngIf=\\"conditionC === 'Complete'\\">dff</ng-container>
+        <ng-container *ngIf=\\"!(conditionC === 'Complete')\\">
+          <div>complete else</div>
+        </ng-container>
+      </ng-container>
     </div>
   \`,
   styles: [
@@ -24691,6 +24729,7 @@ interface Props {
 export default class ShowWithOtherValues {
   @Input() conditionA!: Props[\\"conditionA\\"];
   @Input() conditionB!: Props[\\"conditionB\\"];
+  @Input() conditionC!: Props[\\"conditionC\\"];
 }
 
 @NgModule({
@@ -24748,6 +24787,18 @@ interface Props {
         <ng-container *ngIf=\\"!(conditionB === 'Complete')\\">9mb</ng-container>
       </ng-container>
       <ng-container *ngIf=\\"!(conditionA === 'Default')\\">4mb</ng-container>
+      <ng-container *ngIf=\\"conditionA === 'Default'\\">
+        <ng-container *ngIf=\\"conditionB === 'Complete'\\">
+          <div>complete</div>
+        </ng-container>
+        <ng-container *ngIf=\\"!(conditionB === 'Complete')\\">9mb</ng-container>
+      </ng-container>
+      <ng-container *ngIf=\\"!(conditionA === 'Default')\\">
+        <ng-container *ngIf=\\"conditionC === 'Complete'\\">dff</ng-container>
+        <ng-container *ngIf=\\"!(conditionC === 'Complete')\\">
+          <div>complete else</div>
+        </ng-container>
+      </ng-container>
     </div>
   \`,
   styles: [
@@ -24763,6 +24814,7 @@ interface Props {
 export default class ShowWithOtherValues {
   @Input() conditionA!: Props[\\"conditionA\\"];
   @Input() conditionB!: Props[\\"conditionB\\"];
+  @Input() conditionC!: Props[\\"conditionC\\"];
 }
 "
 `;