-
Notifications
You must be signed in to change notification settings - Fork 294
feat: add React 19 replace default props transform #331
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: master
Are you sure you want to change the base?
Changes from 7 commits
cd05eb8
82ad3a4
7b1901c
1d8befd
0bcf600
98ca275
0d7dc9f
eff3a37
5dabf5b
121afe2
13e3d84
1ff6996
40d28ac
58d7e23
88b5b16
611d84e
c752f35
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,8 @@ | ||
const Button = ({ size, color }) => { | ||
return <button style={{ color, fontSize: size }}>Click me</button>; | ||
}; | ||
|
||
Button.defaultProps = { | ||
size: "16px", | ||
color: "blue", | ||
}; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
const Button = ({ size = "16px", color = "blue" }) => { | ||
return <button style={{ color, fontSize: size }}>Click me</button>; | ||
}; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,8 @@ | ||
const Button = ({ size, color }) => { | ||
return <button style={{ color, fontSize: size }}>Click me</button>; | ||
}; | ||
|
||
Button.defaultProps = { | ||
size: "16px", | ||
color: "blue", | ||
}; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
const Button = ({ size = "16px", color = "blue" }) => { | ||
return <button style={{ color, fontSize: size }}>Click me</button>; | ||
}; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,15 @@ | ||
const Card = ({ user: { name, age } }) => { | ||
return ( | ||
<div> | ||
<p>{name}</p> | ||
<p>{age}</p> | ||
</div> | ||
); | ||
}; | ||
|
||
Card.defaultProps = { | ||
user: { | ||
name: "Unknown", | ||
age: 0, | ||
}, | ||
}; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
const Card = ({ user: { name, age } = { | ||
name: "Unknown", | ||
age: 0, | ||
} }) => { | ||
return ( | ||
<div> | ||
<p>{name}</p> | ||
<p>{age}</p> | ||
</div> | ||
); | ||
}; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
const Span = ({ fontSize, children }) => { | ||
return <span style={{ fontSize }}>{children}</span>; | ||
}; | ||
|
||
Span.defaultProps = { | ||
fontSize: "20px", | ||
}; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
const Span = ({ fontSize = "20px", children }) => { | ||
return <span style={{ fontSize }}>{children}</span>; | ||
}; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
const C = (props) => { | ||
return <>{props.text}</>; | ||
}; | ||
|
||
C.defaultProps = { | ||
text: "test", | ||
}; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
const C = (props) => { | ||
return <>{props.text}</>; | ||
}; | ||
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
const C = ({ text }) => { | ||
return <>{text}</>; | ||
}; | ||
|
||
C.defaultProps = { | ||
text: "test", | ||
}; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
const C = ({ text = "test" }) => { | ||
return <>{text}</>; | ||
}; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,8 @@ | ||
const List = ({ items, renderItem }) => { | ||
return <ul>{items.map(renderItem)}</ul>; | ||
}; | ||
|
||
List.defaultProps = { | ||
items: [], | ||
renderItem: (item) => <li key={item}>{item}</li>, | ||
}; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
const List = ({ items = [], renderItem = (item) => <li key={item}>{item}</li> }) => { | ||
return <ul>{items.map(renderItem)}</ul>; | ||
}; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
const Link = ({ href, children, ...props }) => { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. What would happen if There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. For the example you provided, it only considers href and produces the following output: const Link = ({ href = "#", ...props }) => {
return (
<a href={href} {...props} />
);
}; There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. @eps1lon Before: const MyComp = ({foo, ...props}) {
console.log(props.bar)
}
MyComp.defaultProps = {foo: "hello", bar: "bye"} After: const MyComp = ({foo = 'hello', ...props}) {
props = {...props, bar: typeof props.bar === 'undefined' ? 'bye' : props.bar}
console.log(props.bar)
} There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. @eps1lon |
||
return ( | ||
<a href={href} {...props}> | ||
{children} | ||
</a> | ||
); | ||
}; | ||
|
||
Link.defaultProps = { | ||
href: "#", | ||
children: "Click here", | ||
}; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
const Link = ({ href = "#", children = "Click here", ...props }) => { | ||
return ( | ||
<a href={href} {...props}> | ||
{children} | ||
</a> | ||
); | ||
}; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This no longer sets
props.text
by default. The codemod should opt out here with a message (or insert a comment) that it couldn't handle this case.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@amirabbas-gh Can we do something like this?
Before:
After:
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It won't be able to handle the case of computed member expressions, which is ok, and perhaps we should just leave a note/comment for such cases:
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@eps1lon
I have another proposal:
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This seems fine.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@eps1lon
I fixed this in:
this commit
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
TypeScript is probably going to be the biggest blocker here. But codemodding that perfectly seems like a pretty huge task.