refactor: change defaultProps generation for react (#1661)

* refactor: change defaultProps generation for react

* chore: update snapshots

* refactor: default props passing for react

* fix: issues with e2e tests

* fix: issue with e2e for stencil

* chore: run fmt

* fix: issue with vue default props

* fix: issue with default props for e2e tests

* fix: issue with stencil e2e test for default props

* fix: issue with stencil types for e2e

* fix: issue with stencil local exports

* chore: add test results upload to find issues with e2e tests

* chore: rename default-props.lite.tsx to fix issue with react e2e

* chore: provide e2e builds on failure

* chore: exclude node_modules

* test: trigger avoiding nx remote cache

* fix: issue with rsc functions

* chore: update snapshots

* fix: issue with doubled variable name

* chore: update snapshots

.changeset/fluffy-eyes-add.md

@@ -0,0 +1,5 @@
+---
+'@builder.io/mitosis': patch
+---
+
+[react]: Changed `defaultProps` generation for react, because defaultProps for function components is deprecated

.github/workflows/checks.yml

@@ -145,3 +145,21 @@ jobs:
 
       - name: Run E2E tests
         run: yarn ci:e2e
+
+      - name: 🆙 Upload test results
+        if: failure()
+        uses: actions/upload-artifact@v4
+        with:
+          name: playwright-results
+          path: ./e2e/e2e-app/test-results
+          retention-days: 14
+
+      - name: 🆙 Upload e2e builds
+        if: failure()
+        uses: actions/upload-artifact@v4
+        with:
+          name: e2e-builds
+          path: |
+            ./e2e/**/dist
+            !**/node_modules/**
+          retention-days: 14

e2e/e2e-app/src/component-paths.ts

@@ -1,4 +1,5 @@
 export const COMPONENT_PATHS = [
+  '/default-props/',
   '/one-component/',
   '/two-components/',
   '/types/',

e2e/e2e-app/src/components/default-props/use-default-props.lite.tsx

@@ -0,0 +1,18 @@
+import { useDefaultProps, useStore } from '@builder.io/mitosis';
+
+useDefaultProps({ foo: 'abc', bar: 'foo' });
+
+type DefaultPropsType = {
+  foo?: string;
+  bar?: string;
+};
+
+export default function DefaultProps(props: DefaultPropsType) {
+  const state = useStore({
+    getProps: () => {
+      return JSON.stringify({ foo: props.foo, bar: props.bar });
+    },
+  });
+
+  return <div data-testid="default-props">{state.getProps()}</div>;
+}

e2e/e2e-app/src/homepage.lite.tsx

@@ -2,6 +2,7 @@ import { For, onMount, Show, useStore } from '@builder.io/mitosis';
 import { COMPONENT_PATHS } from './component-paths';
 import ComponentOnUpdate from './components/component-on-update.lite';
 import ComponentWithTypes from './components/component-with-types.lite';
+import DefaultProps from './components/default-props/use-default-props.lite';
 import DisabledInput from './components/disabled-input/disabled-input.lite';
 import NestedParent from './components/nested/nested-parent.lite';
 import OneComponent from './components/one-component.lite';
@@ -43,6 +44,10 @@ export default function Homepage(props: { pathname?: string }) {
         <NestedParent />
       </Show>
 
+      <Show when={state.pathToUse.startsWith('/default-props')}>
+        <DefaultProps bar="xyz" />
+      </Show>
+
       <Show when={state.pathToUse.startsWith('/types')}>
         <ComponentWithTypes name="Lorem ipsum" />
       </Show>

e2e/e2e-app/tests/main.spec.ts

@@ -7,6 +7,18 @@ const test = playwrightTest.extend<{ packageName: PackageName | 'DEFAULT' }>({
 });
 
 test.describe('e2e', () => {
+  test('default props', async ({ page, packageName }) => {
+    // TODO: Some targets don't support `defaultProps` :(
+    if (['e2e-qwik', 'e2e-solid'].includes(packageName)) {
+      test.skip();
+    }
+
+    await page.goto('/default-props/');
+    const text = await page.getByTestId('default-props').textContent();
+
+    expect(text?.includes('abc')).toBeTruthy();
+    expect(text?.includes('xyz')).toBeTruthy();
+  });
   test('todo list add', async ({ page }) => {
     await page.goto('/one-component/');
 

e2e/e2e-react/src/App.tsx

@@ -1,5 +1,5 @@
 // Mitosis output for not yet include .d.ts, so ignore the types when importing.
-// Trigger nx remote cache: 2
+// Trigger nx remote cache: 3
 // @ts-ignore
 import { E2eApp } from '@builder.io/e2e-app/react';
 

packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap

@@ -3086,6 +3086,20 @@ exports[`Alpine.js > jsx > Javascript Test > typeDependency 1`] = `
 "
 `;
 
+exports[`Alpine.js > jsx > Javascript Test > typeExternalProps 1`] = `
+"<div x-data=\\"typeExternalProps()\\">
+  Hello
+  <span x-html=\\"name\\"></span>
+  !
+</div>
+<script>
+  document.addEventListener(\\"alpine:init\\", () => {
+    Alpine.data(\\"typeExternalProps\\", () => ({}));
+  });
+</script>
+"
+`;
+
 exports[`Alpine.js > jsx > Javascript Test > typeExternalStore 1`] = `
 "<div x-data=\\"typeExternalStore()\\">
   Hello
@@ -6323,6 +6337,20 @@ exports[`Alpine.js > jsx > Typescript Test > typeDependency 1`] = `
 "
 `;
 
+exports[`Alpine.js > jsx > Typescript Test > typeExternalProps 1`] = `
+"<div x-data=\\"typeExternalProps()\\">
+  Hello
+  <span x-html=\\"name\\"></span>
+  !
+</div>
+<script>
+  document.addEventListener(\\"alpine:init\\", () => {
+    Alpine.data(\\"typeExternalProps\\", () => ({}));
+  });
+</script>
+"
+`;
+
 exports[`Alpine.js > jsx > Typescript Test > typeExternalStore 1`] = `
 "<div x-data=\\"typeExternalStore()\\">
   Hello

packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap

@@ -7541,6 +7541,38 @@ export class TypeDependencyModule {}
 "
 `;
 
+exports[`Angular with Preserve Imports and File Extensions > jsx > Javascript Test > typeExternalProps 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component, Input } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"type-external-props\\",
+  template: \`
+    <div>Hello {{name}} !</div>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class TypeExternalProps {
+  @Input() name;
+}
+
+@NgModule({
+  declarations: [TypeExternalProps],
+  imports: [CommonModule],
+  exports: [TypeExternalProps],
+})
+export class TypeExternalPropsModule {}
+"
+`;
+
 exports[`Angular with Preserve Imports and File Extensions > jsx > Javascript Test > typeExternalStore 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -15949,6 +15981,40 @@ export class TypeDependencyModule {}
 "
 `;
 
+exports[`Angular with Preserve Imports and File Extensions > jsx > Typescript Test > typeExternalProps 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component, Input } from \\"@angular/core\\";
+
+import { FooProps } from \\"./foo-props\\";
+
+@Component({
+  selector: \\"type-external-props\\",
+  template: \`
+    <div>Hello {{name}} !</div>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class TypeExternalProps {
+  @Input() name!: FooProps[\\"name\\"];
+}
+
+@NgModule({
+  declarations: [TypeExternalProps],
+  imports: [CommonModule],
+  exports: [TypeExternalProps],
+})
+export class TypeExternalPropsModule {}
+"
+`;
+
 exports[`Angular with Preserve Imports and File Extensions > jsx > Typescript Test > typeExternalStore 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";

packages/core/src/__tests__/__snapshots__/angular.mapper.test.ts.snap

@@ -7667,6 +7667,39 @@ export class TypeDependencyModule {}
 "
 `;
 
+exports[`Angular with Import Mapper Tests > jsx > Javascript Test > typeExternalProps 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component, Input } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"type-external-props\\",
+  template: \`
+    <div>Hello {{name}} !</div>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class TypeExternalProps {
+  @Input() name;
+}
+
+@NgModule({
+  declarations: [TypeExternalProps],
+  imports: [CommonModule],
+  exports: [TypeExternalProps],
+  bootstrap: [SomeOtherComponent],
+})
+export class TypeExternalPropsModule {}
+"
+`;
+
 exports[`Angular with Import Mapper Tests > jsx > Javascript Test > typeExternalStore 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -16212,6 +16245,41 @@ export class TypeDependencyModule {}
 "
 `;
 
+exports[`Angular with Import Mapper Tests > jsx > Typescript Test > typeExternalProps 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component, Input } from \\"@angular/core\\";
+
+import { FooProps } from \\"./foo-props\\";
+
+@Component({
+  selector: \\"type-external-props\\",
+  template: \`
+    <div>Hello {{name}} !</div>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class TypeExternalProps {
+  @Input() name!: FooProps[\\"name\\"];
+}
+
+@NgModule({
+  declarations: [TypeExternalProps],
+  imports: [CommonModule],
+  exports: [TypeExternalProps],
+  bootstrap: [SomeOtherComponent],
+})
+export class TypeExternalPropsModule {}
+"
+`;
+
 exports[`Angular with Import Mapper Tests > jsx > Typescript Test > typeExternalStore 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";

packages/core/src/__tests__/__snapshots__/angular.state.test.ts.snap

@@ -7810,6 +7810,38 @@ export class TypeDependencyModule {}
 "
 `;
 
+exports[`Angular with manually creating and handling class properties as bindings (more stable) > jsx > Javascript Test > typeExternalProps 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component, Input } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"type-external-props\\",
+  template: \`
+    <div>Hello {{name}} !</div>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class TypeExternalProps {
+  @Input() name;
+}
+
+@NgModule({
+  declarations: [TypeExternalProps],
+  imports: [CommonModule],
+  exports: [TypeExternalProps],
+})
+export class TypeExternalPropsModule {}
+"
+`;
+
 exports[`Angular with manually creating and handling class properties as bindings (more stable) > jsx > Javascript Test > typeExternalStore 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -16546,6 +16578,40 @@ export class TypeDependencyModule {}
 "
 `;
 
+exports[`Angular with manually creating and handling class properties as bindings (more stable) > jsx > Typescript Test > typeExternalProps 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component, Input } from \\"@angular/core\\";
+
+import { FooProps } from \\"./foo-props\\";
+
+@Component({
+  selector: \\"type-external-props\\",
+  template: \`
+    <div>Hello {{name}} !</div>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class TypeExternalProps {
+  @Input() name!: FooProps[\\"name\\"];
+}
+
+@NgModule({
+  declarations: [TypeExternalProps],
+  imports: [CommonModule],
+  exports: [TypeExternalProps],
+})
+export class TypeExternalPropsModule {}
+"
+`;
+
 exports[`Angular with manually creating and handling class properties as bindings (more stable) > jsx > Typescript Test > typeExternalStore 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";