refactor: change defaultProps generation for react #1661
Conversation
🦋 Changeset detectedLatest commit: 95b5378 The changes in this PR will be included in the next version bump. This PR includes changesets to release 2 packages
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 |
|
View your CI Pipeline Execution ↗ for commit 95b5378.
☁️ Nx Cloud last updated this comment at |
There was a problem hiding this comment.
@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
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, Essentially, |
|
Yes, I changed it to follow your suggestions. I also had to change other targets because the e2e tests were failing. ^.^ |
| @@ -1,4 +1,5 @@ | |||
| // Mitosis output for not yet include .d.ts, so ignore the types when importing. | |||
| // Trigger nx remote cache: 1 | |||
There was a problem hiding this comment.
did you face issued with nx cache not rebuilding the tests?
| "'function' is not allowed as a variable declaration name. (21:9) | ||
| 19 | function Column(props) { | ||
| 20 | | ||
| > 21 | const function getColumns() { |
There was a problem hiding this comment.
This is a big regression. Seems to only happen for RSCs, and not other React generators.
There was a problem hiding this comment.
Looks like:
const getColumns = function getColumns() {
return props.columns || [];
};became
const function getColumns() {
return props.columns || [];
};which is invalid JS
| if (type === 'getter') return getFunctionString(code.replace('get ', '')); | ||
| if (type === 'function') | ||
| return code.startsWith('async') ? code : getFunctionString(code); |
There was a problem hiding this comment.
this refactor seems to have introduced the regression: getFunctionString(code) doesn't do the same thing as ${key} = function ${code} in the original code
Description
Please provide the following information:
closes #1471
Make sure to follow the PR preparation steps in CONTRIBUTING.md before submitting your PR:
yarn fmt:prettier.yarn test:updateyarn g:changesetand follow the CLI instructions. Alternatively, use the Changeset Github Bot to create the file.