refactor: default props passing for react

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.lite.tsx

@@ -0,0 +1,22 @@
+import { useDefaultProps, useStore } from '@builder.io/mitosis';
+
+type Props = {
+  foo?: string;
+  bar?: string;
+};
+
+type State = {
+  getProps: () => string;
+};
+
+useDefaultProps<Props>({ foo: 'abc', bar: 'foo' });
+
+export default function DefaultProps(props: Props) {
+  const state = useStore<State>({
+    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

@@ -1,6 +1,7 @@
 import { For, onMount, Show, useStore } from '@builder.io/mitosis';
 import { COMPONENT_PATHS } from './component-paths';
 import ComponentWithTypes from './components/component-with-types.lite';
+import DefaultProps from './components/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';
@@ -42,6 +43,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,13 @@ const test = playwrightTest.extend<{ packageName: PackageName | 'DEFAULT' }>({
 });
 
 test.describe('e2e', () => {
+  test('default props', async ({ page }) => {
+    await page.goto('/default-props/');
+    const text = await page.getByTestId('default-props').allTextContents();
+
+    expect(text.includes('abc')).toBeTruthy();
+    expect(text.includes('xyz')).toBeTruthy();
+  });
   test('todo list add', async ({ page }) => {
     await page.goto('/one-component/');
 

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

@@ -15416,9 +15416,13 @@ exports[`Mitosis, format: react > jsx > Javascript Test > ContentSlotJSX 1`] = `
 import * as React from \\"react\\";
 import { useState } from \\"react\\";
 
-function ContentSlotJsxCode(
-  props = { content: \\"\\", slotReference: undefined, slotContent: undefined }
-) {
+function ContentSlotJsxCode(props) {
+  props = {
+    ...props,
+    content: \\"\\",
+    slotReference: undefined,
+    slotContent: undefined,
+  };
   const [name, setName] = useState(() => \\"king\\");
 
   const [showContent, setShowContent] = useState(() => false);
@@ -16933,16 +16937,16 @@ exports[`Mitosis, format: react > jsx > Javascript Test > defaultProps 1`] = `
 "\\"use client\\";
 import * as React from \\"react\\";
 
-function Button(
+function Button(props) {
   props = {
+    ...props,
     text: \\"default text\\",
     link: \\"https://builder.io/\\",
     openLinkInNewTab: false,
     onClick: () => {
       console.log(\\"hi\\");
     },
-  }
-) {
+  };
   return (
     <div>
       {props.link ? (
@@ -16975,14 +16979,14 @@ exports[`Mitosis, format: react > jsx > Javascript Test > defaultPropsOutsideCom
 "\\"use client\\";
 import * as React from \\"react\\";
 
-function Button(
+function Button(props) {
   props = {
+    ...props,
     text: \\"default text\\",
     link: \\"https://builder.io/\\",
     openLinkInNewTab: false,
     onClick: () => {},
-  }
-) {
+  };
   return (
     <div>
       {props.link ? (
@@ -19119,9 +19123,13 @@ import * as React from \\"react\\";
 import { useState } from \\"react\\";
 import type { JSX } from \\"../../../../jsx-runtime\\";
 
-function ContentSlotJsxCode(
-  props = { content: \\"\\", slotReference: undefined, slotContent: undefined }
-) {
+function ContentSlotJsxCode(props) {
+  props = {
+    ...props,
+    content: \\"\\",
+    slotReference: undefined,
+    slotContent: undefined,
+  };
   const [name, setName] = useState(() => \\"king\\");
 
   const [showContent, setShowContent] = useState(() => false);
@@ -20644,16 +20652,16 @@ exports[`Mitosis, format: react > jsx > Typescript Test > defaultProps 1`] = `
 "\\"use client\\";
 import * as React from \\"react\\";
 
-function Button(
+function Button(props) {
   props = {
+    ...props,
     text: \\"default text\\",
     link: \\"https://builder.io/\\",
     openLinkInNewTab: false,
     onClick: () => {
       console.log(\\"hi\\");
     },
-  }
-) {
+  };
   return (
     <div>
       {props.link ? (
@@ -20686,14 +20694,14 @@ exports[`Mitosis, format: react > jsx > Typescript Test > defaultPropsOutsideCom
 "\\"use client\\";
 import * as React from \\"react\\";
 
-function Button(
+function Button(props) {
   props = {
+    ...props,
     text: \\"default text\\",
     link: \\"https://builder.io/\\",
     openLinkInNewTab: false,
     onClick: () => {},
-  }
-) {
+  };
   return (
     <div>
       {props.link ? (
@@ -22293,7 +22301,8 @@ exports[`Mitosis, format: react > svelte > Javascript Test > classDirective 1`]
 import * as React from \\"react\\";
 import { useState } from \\"react\\";
 
-function MyComponent(props = {}) {
+function MyComponent(props) {
+  props = { ...props };
   const [focus, setFocus] = useState(() => true);
 
   return (
@@ -22310,14 +22319,14 @@ export default MyComponent;
 `;
 
 exports[`Mitosis, format: react > svelte > Javascript Test > context 1`] = `
-"'>' expected. (31:13)
-  29 | return (
-  30 |
-> 31 | <'activeTab'.Provider  value={activeTab}><div>{activeTab}</div></'activeTab'.Provider>
+"'>' expected. (32:13)
+  30 | return (
+  31 |
+> 32 | <'activeTab'.Provider  value={activeTab}><div>{activeTab}</div></'activeTab'.Provider>
      |             ^
-  32 |
   33 |
-  34 |"
+  34 |
+  35 |"
 `;
 
 exports[`Mitosis, format: react > svelte > Javascript Test > each 1`] = `
@@ -22692,7 +22701,8 @@ exports[`Mitosis, format: react > svelte > Typescript Test > classDirective 1`]
 import * as React from \\"react\\";
 import { useState } from \\"react\\";
 
-function MyComponent(props = {}) {
+function MyComponent(props) {
+  props = { ...props };
   const [focus, setFocus] = useState(() => true);
 
   return (
@@ -22709,14 +22719,14 @@ export default MyComponent;
 `;
 
 exports[`Mitosis, format: react > svelte > Typescript Test > context 1`] = `
-"'>' expected. (31:13)
-  29 | return (
-  30 |
-> 31 | <'activeTab'.Provider  value={activeTab}><div>{activeTab}</div></'activeTab'.Provider>
+"'>' expected. (32:13)
+  30 | return (
+  31 |
+> 32 | <'activeTab'.Provider  value={activeTab}><div>{activeTab}</div></'activeTab'.Provider>
      |             ^
-  32 |
   33 |
-  34 |"
+  34 |
+  35 |"
 `;
 
 exports[`Mitosis, format: react > svelte > Typescript Test > each 1`] = `