fix(vue): vue default props empty object value (BuilderIO#986)

* fix(vue): vue default props empty object value * feat: use 'undefined' string instead of undefined * test: update snapshot
jesse-forked · Jan 23, 2023 · cf67d76 · cf67d76
1 parent b62dac0
commit cf67d76
Show file tree

Hide file tree

Showing 24 changed files with 129 additions and 62 deletions.
diff --git a/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap b/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap
@@ -1609,7 +1609,7 @@ exports[`Alpine.js > jsx > Javascript Test > defaultProps 1`] = `
 
   <template x-if=\\"!link\\">
     <button type=\\"button\\" x-bind=\\"attributes\\" x-on:click=\\"onClick(event)\\">
-      <span x-html=\\"text\\"></span>
+      <span x-html=\\"buttonText\\"></span>
     </button>
   </template>
 </div>
@@ -4076,7 +4076,7 @@ exports[`Alpine.js > jsx > Typescript Test > defaultProps 1`] = `
 
   <template x-if=\\"!link\\">
     <button type=\\"button\\" x-bind=\\"attributes\\" x-on:click=\\"onClick(event)\\">
-      <span x-html=\\"text\\"></span>
+      <span x-html=\\"buttonText\\"></span>
     </button>
   </template>
 </div>

diff --git a/packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap b/packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap
@@ -2689,6 +2689,8 @@ import { Output, EventEmitter, Component, Input } from \\"@angular/core\\";
 export interface ButtonProps {
   attributes?: any;
   text?: string;
+  buttonText?: string; // no default value
+
   link?: string;
   openLinkInNewTab?: boolean;
   onClick?: () => void;
@@ -2717,7 +2719,7 @@ const defaultProps = {
 
       <ng-container *ngIf=\\"!link\\">
         <button type=\\"button\\" (click)=\\"this.onClick.emit($event)\\">
-          {{text}}
+          {{buttonText}}
         </button>
       </ng-container>
     </div>
@@ -2729,6 +2731,7 @@ export class Button {
   @Input() openLinkInNewTab: ButtonProps[\\"openLinkInNewTab\\"] =
     defaultProps[\\"openLinkInNewTab\\"];
   @Input() text: ButtonProps[\\"text\\"] = defaultProps[\\"text\\"];
+  @Input() buttonText: ButtonProps[\\"buttonText\\"];
 
   @Output() onClick = new EventEmitter();
 }
@@ -7017,6 +7020,8 @@ import { Output, EventEmitter, Component, Input } from \\"@angular/core\\";
 export interface ButtonProps {
   attributes?: any;
   text?: string;
+  buttonText?: string; // no default value
+
   link?: string;
   openLinkInNewTab?: boolean;
   onClick?: () => void;
@@ -7045,7 +7050,7 @@ const defaultProps = {
 
       <ng-container *ngIf=\\"!link\\">
         <button type=\\"button\\" (click)=\\"this.onClick.emit($event)\\">
-          {{text}}
+          {{buttonText}}
         </button>
       </ng-container>
     </div>
@@ -7057,6 +7062,7 @@ export class Button {
   @Input() openLinkInNewTab: ButtonProps[\\"openLinkInNewTab\\"] =
     defaultProps[\\"openLinkInNewTab\\"];
   @Input() text: ButtonProps[\\"text\\"] = defaultProps[\\"text\\"];
+  @Input() buttonText: ButtonProps[\\"buttonText\\"];
 
   @Output() onClick = new EventEmitter();
 }

diff --git a/packages/core/src/__tests__/__snapshots__/angular.mapper.test.ts.snap b/packages/core/src/__tests__/__snapshots__/angular.mapper.test.ts.snap
@@ -2739,6 +2739,8 @@ import { Output, EventEmitter, Component, Input } from \\"@angular/core\\";
 export interface ButtonProps {
   attributes?: any;
   text?: string;
+  buttonText?: string; // no default value
+
   link?: string;
   openLinkInNewTab?: boolean;
   onClick?: () => void;
@@ -2767,7 +2769,7 @@ const defaultProps = {
 
       <ng-container *ngIf=\\"!link\\">
         <button type=\\"button\\" (click)=\\"this.onClick.emit($event)\\">
-          {{text}}
+          {{buttonText}}
         </button>
       </ng-container>
     </div>
@@ -2779,6 +2781,7 @@ export class Button {
   @Input() openLinkInNewTab: ButtonProps[\\"openLinkInNewTab\\"] =
     defaultProps[\\"openLinkInNewTab\\"];
   @Input() text: ButtonProps[\\"text\\"] = defaultProps[\\"text\\"];
+  @Input() buttonText: ButtonProps[\\"buttonText\\"];
 
   @Output() onClick = new EventEmitter();
 }
@@ -7157,6 +7160,8 @@ import { Output, EventEmitter, Component, Input } from \\"@angular/core\\";
 export interface ButtonProps {
   attributes?: any;
   text?: string;
+  buttonText?: string; // no default value
+
   link?: string;
   openLinkInNewTab?: boolean;
   onClick?: () => void;
@@ -7185,7 +7190,7 @@ const defaultProps = {
 
       <ng-container *ngIf=\\"!link\\">
         <button type=\\"button\\" (click)=\\"this.onClick.emit($event)\\">
-          {{text}}
+          {{buttonText}}
         </button>
       </ng-container>
     </div>
@@ -7197,6 +7202,7 @@ export class Button {
   @Input() openLinkInNewTab: ButtonProps[\\"openLinkInNewTab\\"] =
     defaultProps[\\"openLinkInNewTab\\"];
   @Input() text: ButtonProps[\\"text\\"] = defaultProps[\\"text\\"];
+  @Input() buttonText: ButtonProps[\\"buttonText\\"];
 
   @Output() onClick = new EventEmitter();
 }

diff --git a/packages/core/src/__tests__/__snapshots__/angular.test.ts.snap b/packages/core/src/__tests__/__snapshots__/angular.test.ts.snap
@@ -5517,6 +5517,8 @@ import { Output, EventEmitter, Component, Input } from \\"@angular/core\\";
 export interface ButtonProps {
   attributes?: any;
   text?: string;
+  buttonText?: string; // no default value
+
   link?: string;
   openLinkInNewTab?: boolean;
   onClick?: () => void;
@@ -5545,7 +5547,7 @@ const defaultProps = {
 
       <ng-container *ngIf=\\"!link\\">
         <button type=\\"button\\" (click)=\\"this.onClick.emit($event)\\">
-          {{text}}
+          {{buttonText}}
         </button>
       </ng-container>
     </div>
@@ -5557,6 +5559,7 @@ export class Button {
   @Input() openLinkInNewTab: ButtonProps[\\"openLinkInNewTab\\"] =
     defaultProps[\\"openLinkInNewTab\\"];
   @Input() text: ButtonProps[\\"text\\"] = defaultProps[\\"text\\"];
+  @Input() buttonText: ButtonProps[\\"buttonText\\"];
 
   @Output() onClick = new EventEmitter();
 }
@@ -5580,6 +5583,8 @@ import { CommonModule } from \\"@angular/common\\";
 export interface ButtonProps {
   attributes?: any;
   text?: string;
+  buttonText?: string; // no default value
+
   link?: string;
   openLinkInNewTab?: boolean;
   onClick?: () => void;
@@ -5608,7 +5613,7 @@ const defaultProps = {
 
       <ng-container *ngIf=\\"!link\\">
         <button type=\\"button\\" (click)=\\"this.onClick.emit($event)\\">
-          {{text}}
+          {{buttonText}}
         </button>
       </ng-container>
     </div>
@@ -5622,6 +5627,7 @@ export class Button {
   @Input() openLinkInNewTab: ButtonProps[\\"openLinkInNewTab\\"] =
     defaultProps[\\"openLinkInNewTab\\"];
   @Input() text: ButtonProps[\\"text\\"] = defaultProps[\\"text\\"];
+  @Input() buttonText: ButtonProps[\\"buttonText\\"];
 
   @Output() onClick = new EventEmitter();
 }
@@ -14433,6 +14439,8 @@ import { Output, EventEmitter, Component, Input } from \\"@angular/core\\";
 export interface ButtonProps {
   attributes?: any;
   text?: string;
+  buttonText?: string; // no default value
+
   link?: string;
   openLinkInNewTab?: boolean;
   onClick?: () => void;
@@ -14461,7 +14469,7 @@ const defaultProps = {
 
       <ng-container *ngIf=\\"!link\\">
         <button type=\\"button\\" (click)=\\"this.onClick.emit($event)\\">
-          {{text}}
+          {{buttonText}}
         </button>
       </ng-container>
     </div>
@@ -14473,6 +14481,7 @@ export class Button {
   @Input() openLinkInNewTab: ButtonProps[\\"openLinkInNewTab\\"] =
     defaultProps[\\"openLinkInNewTab\\"];
   @Input() text: ButtonProps[\\"text\\"] = defaultProps[\\"text\\"];
+  @Input() buttonText: ButtonProps[\\"buttonText\\"];
 
   @Output() onClick = new EventEmitter();
 }
@@ -14496,6 +14505,8 @@ import { CommonModule } from \\"@angular/common\\";
 export interface ButtonProps {
   attributes?: any;
   text?: string;
+  buttonText?: string; // no default value
+
   link?: string;
   openLinkInNewTab?: boolean;
   onClick?: () => void;
@@ -14524,7 +14535,7 @@ const defaultProps = {
 
       <ng-container *ngIf=\\"!link\\">
         <button type=\\"button\\" (click)=\\"this.onClick.emit($event)\\">
-          {{text}}
+          {{buttonText}}
         </button>
       </ng-container>
     </div>
@@ -14538,6 +14549,7 @@ export class Button {
   @Input() openLinkInNewTab: ButtonProps[\\"openLinkInNewTab\\"] =
     defaultProps[\\"openLinkInNewTab\\"];
   @Input() text: ButtonProps[\\"text\\"] = defaultProps[\\"text\\"];
+  @Input() buttonText: ButtonProps[\\"buttonText\\"];
 
   @Output() onClick = new EventEmitter();
 }

diff --git a/packages/core/src/__tests__/__snapshots__/html.test.ts.snap b/packages/core/src/__tests__/__snapshots__/html.test.ts.snap
@@ -3645,7 +3645,7 @@ exports[`Html > jsx > Javascript Test > defaultProps 1`] = `
 
   <template data-el=\\"show-2\\">
     <button type=\\"button\\" data-el=\\"button-1\\">
-      <template data-el=\\"div-2\\"><!-- props.text --></template>
+      <template data-el=\\"div-2\\"><!-- props.buttonText --></template>
     </button>
   </template>
 </div>
@@ -3705,7 +3705,7 @@ exports[`Html > jsx > Javascript Test > defaultProps 1`] = `
       });
 
       document.querySelectorAll(\\"[data-el='div-2']\\").forEach((el) => {
-        renderTextNode(el, props.text);
+        renderTextNode(el, props.buttonText);
       });
 
       destroyAnyNodes();
@@ -9335,7 +9335,7 @@ exports[`Html > jsx > Typescript Test > defaultProps 1`] = `
 
   <template data-el=\\"show-2\\">
     <button type=\\"button\\" data-el=\\"button-1\\">
-      <template data-el=\\"div-2\\"><!-- props.text --></template>
+      <template data-el=\\"div-2\\"><!-- props.buttonText --></template>
     </button>
   </template>
 </div>
@@ -9395,7 +9395,7 @@ exports[`Html > jsx > Typescript Test > defaultProps 1`] = `
       });
 
       document.querySelectorAll(\\"[data-el='div-2']\\").forEach((el) => {
-        renderTextNode(el, props.text);
+        renderTextNode(el, props.buttonText);
       });
 
       destroyAnyNodes();

diff --git a/packages/core/src/__tests__/__snapshots__/lit.test.ts.snap b/packages/core/src/__tests__/__snapshots__/lit.test.ts.snap
@@ -2608,6 +2608,8 @@ import { customElement, property, state, query } from \\"lit/decorators.js\\";
 export interface ButtonProps {
   attributes?: any;
   text?: string;
+  buttonText?: string; // no default value
+
   link?: string;
   openLinkInNewTab?: boolean;
   onClick?: () => void;
@@ -2632,6 +2634,7 @@ export default class Button extends LitElement {
   @property() openLinkInNewTab: any;
   @property() text: any;
   @property() onClick: any;
+  @property() buttonText: any;
 
   render() {
     return html\`
@@ -2657,7 +2660,7 @@ export default class Button extends LitElement {
               event
             ) => this.onClick(event)} >
 
-      \${this.text}
+      \${this.buttonText}
 
               </button>\`
           : null
@@ -6813,6 +6816,8 @@ import { customElement, property, state, query } from \\"lit/decorators.js\\";
 export interface ButtonProps {
   attributes?: any;
   text?: string;
+  buttonText?: string; // no default value
+
   link?: string;
   openLinkInNewTab?: boolean;
   onClick?: () => void;
@@ -6837,6 +6842,7 @@ export default class Button extends LitElement {
   @property() openLinkInNewTab: any;
   @property() text: any;
   @property() onClick: any;
+  @property() buttonText: any;
 
   render() {
     return html\`
@@ -6862,7 +6868,7 @@ export default class Button extends LitElement {
               event
             ) => this.onClick(event)} >
 
-      \${this.text}
+      \${this.buttonText}
 
               </button>\`
           : null

diff --git a/packages/core/src/__tests__/__snapshots__/marko.test.ts.snap b/packages/core/src/__tests__/__snapshots__/marko.test.ts.snap
@@ -1528,7 +1528,7 @@ exports[`Marko > jsx > Javascript Test > defaultProps 1`] = `
       ...(props.attributes)
       on-click(event => input.onClick(event))
     >
-      \${input.text}
+      \${input.buttonText}
     </button></if>
 </div>"
 `;
@@ -3718,7 +3718,7 @@ exports[`Marko > jsx > Typescript Test > defaultProps 1`] = `
       ...(props.attributes)
       on-click(event => input.onClick(event))
     >
-      \${input.text}
+      \${input.buttonText}
     </button></if>
 </div>"
 `;

diff --git a/packages/core/src/__tests__/__snapshots__/parse-jsx.test.ts.snap b/packages/core/src/__tests__/__snapshots__/parse-jsx.test.ts.snap
@@ -7776,7 +7776,7 @@ exports[`Parse JSX > defaultProps 1`] = `
                   "@type": "@builder.io/mitosis/node",
                   "bindings": {
                     "_text": {
-                      "code": "props.text",
+                      "code": "props.buttonText",
                     },
                   },
                   "children": [],
@@ -7880,6 +7880,8 @@ exports[`Parse JSX > defaultProps 1`] = `
     "export interface ButtonProps {
   attributes?: any;
   text?: string;
+  buttonText?: string; // no default value
+
   link?: string;
   openLinkInNewTab?: boolean;
   onClick?: () => void;

diff --git a/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap b/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap
@@ -1823,7 +1823,7 @@ export default function Button(props) {
             {...props.attributes}
             onClick={(event) => props.onClick(event)}
           >
-            {props.text}
+            {props.buttonText}
           </button>
         </Fragment>
       ) : null}
@@ -4941,6 +4941,8 @@ import { h, Fragment } from \\"preact\\";
 export interface ButtonProps {
   attributes?: any;
   text?: string;
+  buttonText?: string; // no default value
+
   link?: string;
   openLinkInNewTab?: boolean;
   onClick?: () => void;
@@ -4968,7 +4970,7 @@ export default function Button(props: ButtonProps) {
             {...props.attributes}
             onClick={(event) => props.onClick(event)}
           >
-            {props.text}
+            {props.buttonText}
           </button>
         </Fragment>
       ) : null}