-
Notifications
You must be signed in to change notification settings - Fork 284
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #133 from flarnie/addReactDOMFactoryCodemod
Add codemod for 'React.DOM.div' -> 'React.createElement("div"'
- Loading branch information
Showing
16 changed files
with
335 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,192 @@ | ||
/** | ||
* Copyright 2013-2015, Facebook, Inc. | ||
* All rights reserved. | ||
* | ||
* This source code is licensed under the BSD-style license found in the | ||
* LICENSE file in the root directory of this source tree. An additional grant | ||
* of patent rights can be found in the PATENTS file in the same directory. | ||
* | ||
*/ | ||
|
||
'use strict'; | ||
|
||
module.exports = function(file, api, options) { | ||
const j = api.jscodeshift; | ||
const root = j(file.source); | ||
|
||
let hasModifications; | ||
|
||
const DOMModuleName = 'DOM'; | ||
|
||
/** | ||
* Replaces 'DOM' with 'createElement' in places where we grab 'DOM' out of | ||
* 'React' with destructuring. | ||
* Note that this only picks up 'DOM' when required from React or | ||
* require('react') | ||
*/ | ||
const replaceDestructuredDOMStatement = (j, root) => { | ||
let hasModifications = false; | ||
//--------- | ||
// First update import statments. eg: | ||
// import { | ||
// DOM, | ||
// foo, | ||
// } from 'react'; | ||
root | ||
.find(j.ImportDeclaration) | ||
.filter(path => ( | ||
path.node.specifiers.filter(specifier => ( | ||
specifier.imported && | ||
specifier.imported.name === DOMModuleName | ||
)).length > 0 && | ||
path.node.source.value === 'react' | ||
)) | ||
.forEach(path => { | ||
hasModifications = true; | ||
|
||
// Replace the DOM key with 'createElement' | ||
path.node.specifiers = path.node.specifiers.map( | ||
specifier => { | ||
if (specifier.imported && specifier.imported.name === DOMModuleName) { | ||
return j.importSpecifier(j.identifier('createElement')); | ||
} else { | ||
return specifier; | ||
} | ||
} | ||
); | ||
}); | ||
|
||
//--------- | ||
// Next update require statments. | ||
// This matches both | ||
// const { | ||
// Component, | ||
// DOM, | ||
// } = React; | ||
// and | ||
// const { | ||
// Component, | ||
// DOM, | ||
// } = require('react'); | ||
root | ||
.find(j.ObjectPattern) | ||
.filter(path => ( | ||
path.parent.node.init && | ||
( | ||
// matches '} = React;' | ||
path.parent.node.init.name === 'React' | ||
|| | ||
( | ||
// matches "} = require('react');" | ||
path.parent.node.init.type === 'CallExpression' && | ||
path.parent.node.init.callee.name === 'require' && | ||
path.parent.node.init.arguments[0].value === 'react' | ||
) | ||
) && | ||
path.node.properties.some(property => { | ||
return property.key.name === DOMModuleName; | ||
}) | ||
)) | ||
.forEach(path => { | ||
hasModifications = true; | ||
|
||
// Replace the DOM key with 'createElement' | ||
path.node.properties = path.node.properties.map((property) => { | ||
if (property.key.name === DOMModuleName) { | ||
return j.identifier('createElement'); | ||
} else { | ||
return property; | ||
} | ||
}); | ||
}); | ||
return hasModifications; | ||
}; | ||
|
||
hasModifications = | ||
replaceDestructuredDOMStatement(j, root) || hasModifications; | ||
|
||
if (hasModifications) { | ||
// if we 'hasModifications' then we found and replaced a reference to | ||
// '{DOM} = React;' or '{DOM} = require('react');' | ||
// In this case we need to update 'DOM.<element>' syntax | ||
|
||
/** | ||
* Update cases where DOM.div is being called | ||
* eg 'foo = DOM.div('a'...' | ||
* replace with 'foo = createElement('div', 'a'...' | ||
*/ | ||
function replaceDOMReferences(j, root) { | ||
let hasModifications = false; | ||
|
||
const isDOMIdentifier = path => ( | ||
path.node.name === DOMModuleName && | ||
path.parent.parent.node.type === 'CallExpression' | ||
); | ||
|
||
root | ||
.find(j.Identifier) | ||
.filter(isDOMIdentifier) | ||
.forEach(path => { | ||
hasModifications = true; | ||
|
||
const DOMargs = path.parent.parent.node.arguments; | ||
const DOMFactoryPath = path.parent.node.property; | ||
const DOMFactoryType = DOMFactoryPath.name; | ||
|
||
// DOM.div(... -> createElement(... | ||
j(path.parent).replaceWith( | ||
j.identifier('createElement') | ||
); | ||
// createElement(... -> createElement('div', ... | ||
DOMargs.unshift(j.literal(DOMFactoryType)); | ||
}); | ||
|
||
return hasModifications; | ||
} | ||
|
||
hasModifications = replaceDOMReferences(j, root) || hasModifications; | ||
} | ||
|
||
/** | ||
* Update React.DOM references | ||
* eg 'foo = React.DOM.div('a'...' | ||
* replace with 'foo = React.createElement('div', 'a'...' | ||
*/ | ||
function replaceReactDOMReferences(j, root) { | ||
let hasModifications = false; | ||
|
||
// matches 'React.DOM' | ||
const isReactDOMIdentifier = path => ( | ||
path.node.name === DOMModuleName && | ||
( | ||
path.parent.node.type === 'MemberExpression' && | ||
path.parent.node.object.name === 'React' | ||
) | ||
); | ||
|
||
root | ||
.find(j.Identifier) | ||
.filter(isReactDOMIdentifier) | ||
.forEach(path => { | ||
hasModifications = true; | ||
const DOMargs = path.parent.parent.parent.node.arguments; | ||
const DOMFactoryPath = path.parent.parent.node.property; | ||
const DOMFactoryType = DOMFactoryPath.name; | ||
|
||
// React.DOM.div(... -> React.DOM.createElement(... | ||
path.parent.parent.node.property = j.identifier('createElement'); | ||
// React.DOM.createElement(... -> React.createElement(... | ||
j(path.parent).replaceWith(j.identifier('React')); | ||
// React.createElement(... -> React.createElement('div'... | ||
DOMargs.unshift(j.literal(DOMFactoryType)); | ||
}); | ||
|
||
return hasModifications; | ||
} | ||
|
||
hasModifications = replaceReactDOMReferences(j, root) || hasModifications; | ||
|
||
return hasModifications | ||
? root.toSource({ quote: 'single' }) | ||
: null; | ||
}; |
7 changes: 7 additions & 0 deletions
7
transforms/__testfixtures__/React-DOM-to-react-dom-factories/react-dom-basic-case.input.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
const React = require('react'); | ||
|
||
class Hello extends React.Component { | ||
render() { | ||
return React.DOM.div(null, `Hello ${this.props.toWhat}`); | ||
} | ||
} |
7 changes: 7 additions & 0 deletions
7
transforms/__testfixtures__/React-DOM-to-react-dom-factories/react-dom-basic-case.output.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
const React = require('react'); | ||
|
||
class Hello extends React.Component { | ||
render() { | ||
return React.createElement('div', null, `Hello ${this.props.toWhat}`); | ||
} | ||
} |
11 changes: 11 additions & 0 deletions
11
...__testfixtures__/React-DOM-to-react-dom-factories/react-dom-deconstructed-import.input.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
import ReactDOM from 'ReactDOM'; | ||
import { | ||
Component, | ||
DOM | ||
} from 'react'; | ||
|
||
class Hello extends Component { | ||
render() { | ||
return DOM.div(null, `Hello ${this.props.toWhat}`); | ||
} | ||
} |
11 changes: 11 additions & 0 deletions
11
..._testfixtures__/React-DOM-to-react-dom-factories/react-dom-deconstructed-import.output.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
import ReactDOM from 'ReactDOM'; | ||
import { | ||
Component, | ||
createElement | ||
} from 'react'; | ||
|
||
class Hello extends Component { | ||
render() { | ||
return createElement('div', null, `Hello ${this.props.toWhat}`); | ||
} | ||
} |
11 changes: 11 additions & 0 deletions
11
...ures__/React-DOM-to-react-dom-factories/react-dom-deconstructed-require-part-two.input.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
const ReactDOM = require('ReactDOM'); | ||
const { | ||
Component, | ||
DOM | ||
} = require('react'); | ||
|
||
class Hello extends Component { | ||
render() { | ||
return DOM.div(null, `Hello ${this.props.toWhat}`); | ||
} | ||
} |
11 changes: 11 additions & 0 deletions
11
...res__/React-DOM-to-react-dom-factories/react-dom-deconstructed-require-part-two.output.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
const ReactDOM = require('ReactDOM'); | ||
const { | ||
Component, | ||
createElement | ||
} = require('react'); | ||
|
||
class Hello extends Component { | ||
render() { | ||
return createElement('div', null, `Hello ${this.props.toWhat}`); | ||
} | ||
} |
12 changes: 12 additions & 0 deletions
12
..._testfixtures__/React-DOM-to-react-dom-factories/react-dom-deconstructed-require.input.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
const React = require('react'); | ||
const ReactDOM = require('ReactDOM'); | ||
const { | ||
Component, | ||
DOM | ||
} = React; | ||
|
||
class Hello extends Component { | ||
render() { | ||
return DOM.div(null, `Hello ${this.props.toWhat}`); | ||
} | ||
} |
12 changes: 12 additions & 0 deletions
12
...testfixtures__/React-DOM-to-react-dom-factories/react-dom-deconstructed-require.output.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
const React = require('react'); | ||
const ReactDOM = require('ReactDOM'); | ||
const { | ||
Component, | ||
createElement | ||
} = React; | ||
|
||
class Hello extends Component { | ||
render() { | ||
return createElement('div', null, `Hello ${this.props.toWhat}`); | ||
} | ||
} |
13 changes: 13 additions & 0 deletions
13
...__/React-DOM-to-react-dom-factories/react-dom-no-change-dom-from-other-libraries.input.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
let {DOM} = require('Free'); | ||
import {DOM} from 'Free'; | ||
|
||
const foo = DOM.div('a', 'b', 'c'); | ||
const bar = Free.DOM.div('a', 'b', 'c'); | ||
|
||
DOM = 'this is a test!'; | ||
|
||
foo.DOM = {}; | ||
|
||
foo.DOM.div = () => null; | ||
|
||
const bar = foo.DOM.div('a', 'b', 'c'); |
Empty file.
7 changes: 7 additions & 0 deletions
7
...rms/__testfixtures__/React-DOM-to-react-dom-factories/react-dom-no-change-import.input.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
import React from 'react'; | ||
|
||
class Hello extends React.Component { | ||
render() { | ||
return React.createElement('div', null, `Hello ${this.props.toWhat}`); | ||
} | ||
} |
Empty file.
7 changes: 7 additions & 0 deletions
7
...ms/__testfixtures__/React-DOM-to-react-dom-factories/react-dom-no-change-require.input.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
const React = require('react'); | ||
|
||
class Hello extends React.Component { | ||
render() { | ||
return React.createElement('div', null, `Hello ${this.props.toWhat}`); | ||
} | ||
} |
Empty file.
34 changes: 34 additions & 0 deletions
34
transforms/__tests__/React-DOM-to-react-dom-factories-test.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,34 @@ | ||
/** | ||
* Copyright 2013-2015, Facebook, Inc. | ||
* All rights reserved. | ||
* | ||
* This source code is licensed under the BSD-style license found in the | ||
* LICENSE file in the root directory of this source tree. An additional grant | ||
* of patent rights can be found in the PATENTS file in the same directory. | ||
* | ||
*/ | ||
|
||
'use strict'; | ||
|
||
const tests = [ | ||
'react-dom-basic-case', | ||
'react-dom-deconstructed-import', | ||
'react-dom-deconstructed-require', | ||
'react-dom-deconstructed-require-part-two', | ||
'react-dom-no-change-import', | ||
'react-dom-no-change-require', | ||
'react-dom-no-change-dom-from-other-libraries', | ||
]; | ||
|
||
const defineTest = require('jscodeshift/dist/testUtils').defineTest; | ||
|
||
describe('React-DOM-to-react-dom-factories', () => { | ||
tests.forEach(test => | ||
defineTest( | ||
__dirname, | ||
'React-DOM-to-react-dom-factories', | ||
null, | ||
`React-DOM-to-react-dom-factories/${ test }` | ||
) | ||
); | ||
}); |