refactor: change defaultProps generation for react

[nmerget]

Description

Please provide the following information:

closes #1471

Make sure to follow the PR preparation steps in CONTRIBUTING.md before submitting your PR:

• format the codebase: from the root, run yarn fmt:prettier.
• update all snapshots (in core & CLI): from the root, run yarn test:update
• add Changeset entry: from the root, run yarn g:changeset and follow the CLI instructions. Alternatively, use the Changeset Github Bot to create the file.

[changeset-bot]

🦋 Changeset detected

Latest commit: d1bd12e

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
@builder.io/mitosis	Patch
@builder.io/mitosis-cli	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[nx-cloud]

View your CI Pipeline Execution ↗ for commit d1bd12e.

Command	Status	Duration	Result
nx run-many --target test	❌ Failed	4m 45s	View ↗
nx run-many -t test:update	✅ Succeeded	4m 49s	View ↗
nx e2e @builder.io/e2e-app	✅ Succeeded	1m 2s	View ↗
nx run-many --target build --exclude @builder.i...	✅ Succeeded	3m 55s	View ↗
nx build @builder.io/mitosis-site	✅ Succeeded	2m 25s	View ↗

---

☁️ Nx Cloud last updated this comment at 2025-02-25 11:34:35 UTC

[samijaber]

@nmerget Thanks a lot for tackling this long overdue refactor!

There is however one big drawback to your approach: by writing props = { /* DEFAULT_PROPS */}, you are overwriting any props that do not have defaults!

See this example:

type Props = {
  foo?: string;
  bar?: string;
};

// BEFORE
const A = (props: Props) => <div>B: {JSON.stringify(props)}</div>;
A.defaultProps = { foo: 'bar' };

// AFTER
const B = (props: Props = { foo: 'bar' }) => (
  <div>A: {JSON.stringify(props)}</div>
);

// FIX
const C = (props: Props) => {
  props = { ...props, foo: 'bar' };
  return <div>C: {JSON.stringify(props)}</div>;
};

export default function App() {
  return (
    <>
      <A bar="another-prop" />
      <B bar="another-prop" />
      <C bar="another-prop" />
    </>
  );
}

I think we need to instead use the approach i provide in C

[nmerget]

const C = (props: Props) => {
  props = { ...props, foo: 'bar' };
  return <div>C: {JSON.stringify(props)}</div>;
};

This would always overwrite the given props with the default value, wouldn't it? :P

[samijaber]

const C = (props: Props) => {
  props = { ...props, foo: 'bar' };
  return <div>C: {JSON.stringify(props)}</div>;
};

This would always overwrite the given props with the default value, wouldn't it? :P

Woops, you're right. I should have written:

const C = (props: Props) => {
  props = { foo: 'bar', ...props };
  return <div>C: {JSON.stringify(props)}</div>;
};

To re-illustrate my point, here's an updated example:

As you can see, <B /> never sets the default-value in any situation.

Essentially, const MyComp = (props = DEFAULT_VALUES) => {} will never do anything because the props object will always exist. DEFAULT_VALUES will only be used if props is undefined, which is never the case (at worst it's an empty object).

[nmerget]

Yes, I changed it to follow your suggestions. I also had to change other targets because the e2e tests were failing. ^.^

[samijaber]

Requesting changes because one of your refactors caused a regression in the react generator

[samijaber]

this refactor seems to have introduced the regression: getFunctionString(code) doesn't do the same thing as ${key} = function ${code} in the original code

[nmerget]

I'll look at it

[nmerget]

Quick fix was to have an exception for rsc ^.^