{"body":"","parents":["20004e94d399541da70d08fd12b64dafb498ebce"],"commit":{"authorName":"cpojer","authorEmail":"christoph.pojer@gmail.com","subject":"Add pure-render-mixin transform","revision":"d4cb2537af0c168637f72dc06fa3472eeabb3eef","shortRevision":"d4cb2537af","authoredAt":"2015-03-25T01:30:23-07:00"},"files":[{"status":"M","path":"npm-react-codemod\/README.md"},{"status":"M","path":"npm-react-codemod\/test\/__tests__\/transform-tests.js"},{"status":"A","path":"npm-react-codemod\/test\/pure-render-mixin-test.js"},{"status":"A","path":"npm-react-codemod\/test\/pure-render-mixin-test.output.js"},{"status":"A","path":"npm-react-codemod\/test\/pure-render-mixin-test2.js"},{"status":"A","path":"npm-react-codemod\/test\/pure-render-mixin-test2.output.js"},{"status":"A","path":"npm-react-codemod\/test\/pure-render-mixin-test3.js"},{"status":"A","path":"npm-react-codemod\/test\/pure-render-mixin-test3.output.js"},{"status":"A","path":"npm-react-codemod\/test\/pure-render-mixin-test4.js"},{"status":"A","path":"npm-react-codemod\/test\/pure-render-mixin-test4.output.js"},{"status":"A","path":"npm-react-codemod\/transforms\/pure-render-mixin.js"}],"patch":"diff --git a\/npm-react-codemod\/README.md b\/npm-react-codemod\/README.md\nindex 69c9cce41c..2bcd084f23 100644\n--- a\/npm-react-codemod\/README.md\n+++ b\/npm-react-codemod\/README.md\n@@ -22,6 +22,18 @@ calls.\n \n * `react-codemod findDOMNode `\n \n+`pure-render-mixin.js` removes `PureRenderMixin` and inlines\n+`shouldComponentUpdate` so that the ES6 class transform can pick up the React\n+component and turn it into an ES6 class. NOTE: This currently only works if you\n+are using the master version (>0.13.1) of React as it is using\n+`React.addons.shallowCompare`\n+\n+ * `react-codemod pure-render-mixin `\n+ * If `--mixin-name=` is specified it will look for the specified name\n+ instead of `PureRenderMixin`. Note that it is not possible to use a\n+ namespaced name for the mixin. `mixins: [React.addons.PureRenderMixin]` will\n+ not currently work.\n+\n ### Recast Options\n \n Options to [recast](https:\/\/github.com\/benjamn\/recast)'s printer can be provided\ndiff --git a\/npm-react-codemod\/test\/__tests__\/transform-tests.js b\/npm-react-codemod\/test\/__tests__\/transform-tests.js\nindex d551036d07..b7dfde0323 100644\n--- a\/npm-react-codemod\/test\/__tests__\/transform-tests.js\n+++ b\/npm-react-codemod\/test\/__tests__\/transform-tests.js\n@@ -38,5 +38,17 @@ describe('Transform Tests', () => {\n test('findDOMNode', 'findDOMNode-test');\n });\n \n+ it('transforms the \"pure-render-mixin\" tests correctly', () => {\n+ test('pure-render-mixin', 'pure-render-mixin-test');\n+\n+ test('pure-render-mixin', 'pure-render-mixin-test2');\n+\n+ test('pure-render-mixin', 'pure-render-mixin-test3');\n+\n+ test('pure-render-mixin', 'pure-render-mixin-test4', {\n+ 'mixin-name': 'ReactComponentWithPureRenderMixin',\n+ });\n+ });\n+\n \n });\ndiff --git a\/npm-react-codemod\/test\/pure-render-mixin-test.js b\/npm-react-codemod\/test\/pure-render-mixin-test.js\nnew file mode 100644\nindex 0000000000..dcb374328f\n--- \/dev\/null\n+++ b\/npm-react-codemod\/test\/pure-render-mixin-test.js\n@@ -0,0 +1,45 @@\n+var React = require('react\/addons');\n+\n+var PureRenderMixin = React.addons.PureRenderMixin;\n+\n+var MyComponent = React.createClass({\n+ mixins: [PureRenderMixin],\n+\n+ render: function() {\n+ return

;\n+ }\n+});\n+\n+var MyMixedComponent = React.createClass({\n+ mixins: [PureRenderMixin, SomeOtherMixin],\n+\n+ render: function() {\n+ return

;\n+ }\n+});\n+\n+var MyFooComponent = React.createClass({\n+ mixins: [PureRenderMixin, SomeOtherMixin],\n+\n+ render: function() {\n+ return

;\n+ },\n+\n+ foo: function() {\n+\n+ }\n+});\n+\n+var MyStupidComponent = React.createClass({\n+ mixins: [PureRenderMixin],\n+\n+ shouldComponentUpdate: function() {\n+ return !!'wtf is this doing here?';\n+ },\n+\n+ render: function() {\n+ return

;\n+ }\n+});\n+\n+module.exports = MyComponent;\ndiff --git a\/npm-react-codemod\/test\/pure-render-mixin-test.output.js b\/npm-react-codemod\/test\/pure-render-mixin-test.output.js\nnew file mode 100644\nindex 0000000000..31fdec6c87\n--- \/dev\/null\n+++ b\/npm-react-codemod\/test\/pure-render-mixin-test.output.js\n@@ -0,0 +1,55 @@\n+var React = require('react\/addons');\n+\n+var PureRenderMixin = React.addons.PureRenderMixin;\n+\n+var MyComponent = React.createClass({\n+ shouldComponentUpdate: function(nextProps, nextState) {\n+ return React.addons.shallowCompare(this, nextProps, nextState);\n+ },\n+\n+ render: function() {\n+ return

;\n+ }\n+});\n+\n+var MyMixedComponent = React.createClass({\n+ mixins: [SomeOtherMixin],\n+\n+ shouldComponentUpdate: function(nextProps, nextState) {\n+ return React.addons.shallowCompare(this, nextProps, nextState);\n+ },\n+\n+ render: function() {\n+ return

;\n+ }\n+});\n+\n+var MyFooComponent = React.createClass({\n+ mixins: [SomeOtherMixin],\n+\n+ render: function() {\n+ return

;\n+ },\n+\n+ foo: function() {\n+\n+ },\n+\n+ shouldComponentUpdate: function(nextProps, nextState) {\n+ return React.addons.shallowCompare(this, nextProps, nextState);\n+ }\n+});\n+\n+var MyStupidComponent = React.createClass({\n+ mixins: [PureRenderMixin],\n+\n+ shouldComponentUpdate: function() {\n+ return !!'wtf is this doing here?';\n+ },\n+\n+ render: function() {\n+ return

;\n+ }\n+});\n+\n+module.exports = MyComponent;\ndiff --git a\/npm-react-codemod\/test\/pure-render-mixin-test2.js b\/npm-react-codemod\/test\/pure-render-mixin-test2.js\nnew file mode 100644\nindex 0000000000..e5acfdabe5\n--- \/dev\/null\n+++ b\/npm-react-codemod\/test\/pure-render-mixin-test2.js\n@@ -0,0 +1,13 @@\n+var React = require('react\/addons');\n+\n+var PureRenderMixin = React.addons.PureRenderMixin;\n+\n+var MyComponent = React.createClass({\n+ mixins: [PureRenderMixin],\n+\n+ render: function() {\n+ return

;\n+ }\n+});\n+\n+module.exports = MyComponent;\ndiff --git a\/npm-react-codemod\/test\/pure-render-mixin-test2.output.js b\/npm-react-codemod\/test\/pure-render-mixin-test2.output.js\nnew file mode 100644\nindex 0000000000..90d0a78208\n--- \/dev\/null\n+++ b\/npm-react-codemod\/test\/pure-render-mixin-test2.output.js\n@@ -0,0 +1,13 @@\n+var React = require('react\/addons');\n+\n+var MyComponent = React.createClass({\n+ shouldComponentUpdate: function(nextProps, nextState) {\n+ return React.addons.shallowCompare(this, nextProps, nextState);\n+ },\n+\n+ render: function() {\n+ return

;\n+ }\n+});\n+\n+module.exports = MyComponent;\ndiff --git a\/npm-react-codemod\/test\/pure-render-mixin-test3.js b\/npm-react-codemod\/test\/pure-render-mixin-test3.js\nnew file mode 100644\nindex 0000000000..4044f4779c\n--- \/dev\/null\n+++ b\/npm-react-codemod\/test\/pure-render-mixin-test3.js\n@@ -0,0 +1,14 @@\n+var React = require('react\/addons');\n+\n+var Foo = 'Foo';\n+var PureRenderMixin = React.addons.PureRenderMixin;\n+\n+var MyComponent = React.createClass({\n+ mixins: [PureRenderMixin],\n+\n+ render: function() {\n+ return

;\n+ }\n+});\n+\n+module.exports = MyComponent;\ndiff --git a\/npm-react-codemod\/test\/pure-render-mixin-test3.output.js b\/npm-react-codemod\/test\/pure-render-mixin-test3.output.js\nnew file mode 100644\nindex 0000000000..37cc2fe1d3\n--- \/dev\/null\n+++ b\/npm-react-codemod\/test\/pure-render-mixin-test3.output.js\n@@ -0,0 +1,15 @@\n+var React = require('react\/addons');\n+\n+var Foo = 'Foo';\n+\n+var MyComponent = React.createClass({\n+ shouldComponentUpdate: function(nextProps, nextState) {\n+ return React.addons.shallowCompare(this, nextProps, nextState);\n+ },\n+\n+ render: function() {\n+ return

;\n+ }\n+});\n+\n+module.exports = MyComponent;\ndiff --git a\/npm-react-codemod\/test\/pure-render-mixin-test4.js b\/npm-react-codemod\/test\/pure-render-mixin-test4.js\nnew file mode 100644\nindex 0000000000..cbf384e0f4\n--- \/dev\/null\n+++ b\/npm-react-codemod\/test\/pure-render-mixin-test4.js\n@@ -0,0 +1,12 @@\n+var React = require('React');\n+var ReactComponentWithPureRenderMixin = require('ReactComponentWithPureRenderMixin');\n+\n+var MyComponent = React.createClass({\n+ mixins: [ReactComponentWithPureRenderMixin],\n+\n+ render: function() {\n+ return

;\n+ }\n+});\n+\n+module.exports = MyComponent;\ndiff --git a\/npm-react-codemod\/test\/pure-render-mixin-test4.output.js b\/npm-react-codemod\/test\/pure-render-mixin-test4.output.js\nnew file mode 100644\nindex 0000000000..14c9cf2f94\n--- \/dev\/null\n+++ b\/npm-react-codemod\/test\/pure-render-mixin-test4.output.js\n@@ -0,0 +1,13 @@\n+var React = require('React');\n+\n+var MyComponent = React.createClass({\n+ shouldComponentUpdate: function(nextProps, nextState) {\n+ return React.addons.shallowCompare(this, nextProps, nextState);\n+ },\n+\n+ render: function() {\n+ return

;\n+ }\n+});\n+\n+module.exports = MyComponent;\ndiff --git a\/npm-react-codemod\/transforms\/pure-render-mixin.js b\/npm-react-codemod\/transforms\/pure-render-mixin.js\nnew file mode 100644\nindex 0000000000..1fb2ec7a25\n--- \/dev\/null\n+++ b\/npm-react-codemod\/transforms\/pure-render-mixin.js\n@@ -0,0 +1,179 @@\n+\/*eslint-disable no-comma-dangle*\/\n+\n+'use strict';\n+\n+function removePureRenderMixin(file, api, options) {\n+ const j = api.jscodeshift;\n+\n+ require('.\/utils\/array-polyfills');\n+ const ReactUtils = require('.\/utils\/ReactUtils')(j);\n+\n+ const printOptions = options.printOptions || {quote: 'single'};\n+ const root = j(file.source);\n+\n+ const PURE_RENDER_MIXIN = options['mixin-name'] || 'PureRenderMixin';\n+ const SHOULD_COMPONENT_UPDATE = 'shouldComponentUpdate';\n+ const NEXT_PROPS = 'nextProps';\n+ const NEXT_STATE = 'nextState';\n+\n+ \/\/ ---------------------------------------------------------------------------\n+ \/\/ shouldComponentUpdate\n+ const createShouldComponentUpdateFunction = () =>\n+ j.functionExpression(\n+ null,\n+ [j.identifier(NEXT_PROPS), j.identifier(NEXT_STATE)],\n+ j.blockStatement([\n+ j.returnStatement(\n+ j.callExpression(\n+ j.memberExpression(\n+ j.identifier('React'),\n+ j.memberExpression(\n+ j.identifier('addons'),\n+ j.identifier('shallowCompare'),\n+ false\n+ ),\n+ false\n+ ),\n+ [\n+ j.thisExpression(),\n+ j.identifier(NEXT_PROPS),\n+ j.identifier(NEXT_STATE)\n+ ]\n+ )\n+ )\n+ ])\n+ );\n+\n+ const createShouldComponentUpdateProperty = () =>\n+ j.property(\n+ 'init',\n+ j.identifier(SHOULD_COMPONENT_UPDATE),\n+ createShouldComponentUpdateFunction()\n+ );\n+\n+ const hasShouldComponentUpdate = classPath =>\n+ ReactUtils.getReactCreateClassSpec(classPath)\n+ .properties.every(property =>\n+ property.key.name !== SHOULD_COMPONENT_UPDATE\n+ );\n+\n+ \/\/ ---------------------------------------------------------------------------\n+ \/\/ Mixin related code\n+ const isPureRenderMixin = node => (\n+ node.type === 'Identifier' &&\n+ node.name === PURE_RENDER_MIXIN\n+ );\n+\n+ const hasPureRenderMixin = classPath => {\n+ const spec = ReactUtils.getReactCreateClassSpec(classPath);\n+ const mixin = spec && spec.properties.find(ReactUtils.isMixinProperty);\n+ return mixin && mixin.value.elements.some(isPureRenderMixin);\n+ };\n+\n+ const removeMixin = elements =>\n+ j.property(\n+ 'init',\n+ j.identifier('mixins'),\n+ j.arrayExpression(\n+ elements.filter(element => !isPureRenderMixin(element))\n+ )\n+ );\n+\n+ \/\/ ---------------------------------------------------------------------------\n+ \/\/ Boom!\n+ const insertShouldComponentUpdate = properties => {\n+ const length = properties.length;\n+ const lastProp = properties[length - 1];\n+ \/\/ I wouldn't dare insert at the bottom if the last function is render\n+ if (\n+ lastProp.key.type === 'Identifier' &&\n+ lastProp.key.name === 'render'\n+ ) {\n+ properties.splice(\n+ length - 1,\n+ 1,\n+ createShouldComponentUpdateProperty(),\n+ lastProp\n+ );\n+ } else {\n+ properties.push(createShouldComponentUpdateProperty());\n+ }\n+ return properties;\n+ };\n+\n+ const cleanupReactComponent = classPath => {\n+ const spec = ReactUtils.getReactCreateClassSpec(classPath);\n+ const properties = spec.properties\n+ .map(property => {\n+ if (ReactUtils.isMixinProperty(property)) {\n+ const elements = property.value.elements;\n+ return (elements.length !== 1) ? removeMixin(elements) : null;\n+ }\n+ return property;\n+ })\n+ .filter(property => !!property);\n+\n+ ReactUtils.findReactCreateClassCallExpression(classPath).replaceWith(\n+ ReactUtils.createCreateReactClassCallExpression(\n+ insertShouldComponentUpdate(properties)\n+ )\n+ );\n+ };\n+\n+ \/\/ Remove it if only two or fewer are left:\n+ \/\/ var PureRenderMixin = React.addons.PureRenderMixin;\n+ const hasPureRenderIdentifiers = path =>\n+ path.find(j.Identifier, {\n+ name: PURE_RENDER_MIXIN,\n+ }).size() > 2;\n+\n+ const deletePureRenderMixin = path => {\n+ if (hasPureRenderIdentifiers(path)) {\n+ return;\n+ }\n+\n+ const declaration = path\n+ .findVariableDeclarators(PURE_RENDER_MIXIN)\n+ .closest(j.VariableDeclaration);\n+\n+ if (declaration.size > 1) {\n+ declaration.forEach(p =>\n+ j(p).replaceWith(\n+ j.variableDeclaration(\n+ 'var',\n+ p.value.declarations.filter(isPureRenderMixin)\n+ )\n+ )\n+ );\n+ } else {\n+ \/\/ Let's assume the variable declaration happens at the top level\n+ const program = declaration.closest(j.Program).get();\n+ const body = program.value.body;\n+ const index = body.indexOf(declaration.get().value);\n+ if (index !== -1) {\n+ body.splice(index, 1);\n+ }\n+ }\n+ };\n+\n+ if (\n+ options['no-explicit-require'] ||\n+ ReactUtils.hasReact(root)\n+ ) {\n+ const didTransform = ReactUtils\n+ .findReactCreateClass(root)\n+ .filter(hasPureRenderMixin)\n+ .filter(hasShouldComponentUpdate)\n+ .forEach(cleanupReactComponent)\n+ .size() > 0;\n+\n+ if (didTransform) {\n+ deletePureRenderMixin(root);\n+ return root.toSource(printOptions) + '\\n';\n+ }\n+ }\n+\n+ return null;\n+}\n+\n+module.exports = removePureRenderMixin;\n"}

dillon1000/react

Files changed