Add PureComponent fallback babel transform #1452
Conversation
majapw
added
the
semver-patch: fixes/refactors/etc
majapw
force-pushed
the
maja-add-purecomponent-babel-transform
branch
from
7b5c78f
to
e9b8303
Compare
.babelrc
Outdated
| @@ -7,7 +7,8 @@ | |||
| "svgo": false | |||
| }], | |||
| ["transform-replace-object-assign", { "moduleSpecifier": "object.assign" }], | |||
| "istanbul" | |||
| "istanbul", | |||
There was a problem hiding this comment.
i think the istanbul transform needs to come last, so it can properly instrument the code for coverage
majapw
force-pushed
the
maja-add-purecomponent-babel-transform
branch
4 times, most recently
from
aec0c32
to
47ba050
Compare
scripts/pure-component-fallback.js
Outdated
| @@ -0,0 +1,67 @@ | |||
| module.exports = function pureComponentFallback(babel) { | |||
| const { types: t, template } = babel; | |||
There was a problem hiding this comment.
nbd but this can be destructured in the previous line
| const superclass = path.get('superClass'); | ||
| // check for PureComponent | ||
| if (t.isIdentifier(superclass)) { | ||
| return superclass.node.name === 'PureComponent'; |
There was a problem hiding this comment.
probably fine for "just this repo", but if we'll want to use this in other projects, we should make sure that PureComponent is actually a named import from 'react' or a destructure from React imported/required from 'react'
|
|
||
| if (t.isMemberExpression(superclass)) { | ||
| // Check for React.PureComponent | ||
| return superclass.get('object').node.name === 'React' |
| @@ -340,4 +338,4 @@ export default withStyles(({ reactDates: { color, font } }) => ({ | |||
| CalendarDay__today: {}, | |||
| CalendarDay__firstDayOfWeek: {}, | |||
| CalendarDay__lastDayOfWeek: {}, | |||
| }), { pureComponent: pureComponentAvailable })(CalendarDay); | |||
| }), { pureComponent: typeof React.PureComponent !== 'undefined' })(CalendarDay); | |||
There was a problem hiding this comment.
not a blocker, but it'd be nicer if the transform could add this instead
scripts/pure-component-fallback.js
Outdated
| 'method', | ||
| t.identifier('shouldComponentUpdate'), | ||
| [t.identifier('nextProps'), t.identifier('nextState')], | ||
| t.blockStatement([template('return shallowCompare(this, nextProps, nextState);')()]), |
There was a problem hiding this comment.
the trailing function comma here is breaking node 6.
|
I tested this in the react-dates-demo repo (https://www.github.com/majapw/react-dates-demo) with React 15.2 and React 16 in both Chrome and IE10 successfully. |
majapw
force-pushed
the
maja-add-purecomponent-babel-transform
branch
from
47ba050
to
04e5ba9
Compare
majapw
force-pushed
the
maja-add-purecomponent-babel-transform
branch
from
04e5ba9
to
443c600
Compare
Fix for #1354
Never got around to doing this before and now it is blocking.
Thanks @skevy for writing the transform!
to: @ljharb @skevy @Sumeet-Jain