From 526a7d20ef1f6b12bccac0f500bcb8522c90ac00 Mon Sep 17 00:00:00 2001 From: Brian Vaughn Date: Mon, 1 May 2017 14:16:17 -0700 Subject: [PATCH] Updated transform-react-display-name for createReactClass addon (#5554) * Updated transform-react-display-name for ReactCreateClass addon * Tweaked description for transform-react-display-name plugin * Changed ReactCreateClass to createReactClass --- .../README.md | 10 +++++++--- .../src/index.js | 8 ++++++-- .../display-name/assignment-expression/actual.js | 3 ++- .../display-name/assignment-expression/expected.js | 5 ++++- .../test/fixtures/display-name/nested/actual.js | 3 ++- .../test/fixtures/display-name/nested/expected.js | 5 ++++- .../fixtures/display-name/object-property/actual.js | 5 ++++- .../fixtures/display-name/object-property/expected.js | 7 ++++++- .../display-name/variable-declarator/actual.js | 3 ++- .../display-name/variable-declarator/expected.js | 5 ++++- 10 files changed, 41 insertions(+), 13 deletions(-) diff --git a/packages/babel-plugin-transform-react-display-name/README.md b/packages/babel-plugin-transform-react-display-name/README.md index da5fddf0bc..81a1312ca1 100644 --- a/packages/babel-plugin-transform-react-display-name/README.md +++ b/packages/babel-plugin-transform-react-display-name/README.md @@ -1,13 +1,14 @@ # babel-plugin-transform-react-display-name -> Add displayName to React.createClass calls +> Add displayName to `createReactClass` (and `React.createClass`) calls ## Example **In** ```js -var foo = React.createClass({}); +var foo = React.createClass({}); // React <= 15 +var bar = createReactClass({}); // React 16+ ``` **Out** @@ -15,7 +16,10 @@ var foo = React.createClass({}); ```js var foo = React.createClass({ displayName: "foo" -}); +}); // React <= 15 +var bar = createReactClass({ + displayName: "bar" +}); // React 16+ ``` ## Installation diff --git a/packages/babel-plugin-transform-react-display-name/src/index.js b/packages/babel-plugin-transform-react-display-name/src/index.js index d94d657c11..5558177b01 100644 --- a/packages/babel-plugin-transform-react-display-name/src/index.js +++ b/packages/babel-plugin-transform-react-display-name/src/index.js @@ -20,12 +20,16 @@ export default function ({ types: t }) { } const isCreateClassCallExpression = t.buildMatchMemberExpression("React.createClass"); + const isCreateClassAddon = (callee) => callee.name === "createReactClass"; function isCreateClass(node) { if (!node || !t.isCallExpression(node)) return false; - // not React.createClass call member object - if (!isCreateClassCallExpression(node.callee)) return false; + // not createReactClass nor React.createClass call member object + if ( + !isCreateClassCallExpression(node.callee) && + !isCreateClassAddon(node.callee) + ) return false; // no call arguments const args = node.arguments; diff --git a/packages/babel-plugin-transform-react-display-name/test/fixtures/display-name/assignment-expression/actual.js b/packages/babel-plugin-transform-react-display-name/test/fixtures/display-name/assignment-expression/actual.js index 59a5805ac5..9460a910e2 100644 --- a/packages/babel-plugin-transform-react-display-name/test/fixtures/display-name/assignment-expression/actual.js +++ b/packages/babel-plugin-transform-react-display-name/test/fixtures/display-name/assignment-expression/actual.js @@ -1 +1,2 @@ -foo = React.createClass({}); +foo = createReactClass({}); +bar = React.createClass({}); \ No newline at end of file diff --git a/packages/babel-plugin-transform-react-display-name/test/fixtures/display-name/assignment-expression/expected.js b/packages/babel-plugin-transform-react-display-name/test/fixtures/display-name/assignment-expression/expected.js index 0acce9a865..03fd039c23 100644 --- a/packages/babel-plugin-transform-react-display-name/test/fixtures/display-name/assignment-expression/expected.js +++ b/packages/babel-plugin-transform-react-display-name/test/fixtures/display-name/assignment-expression/expected.js @@ -1,3 +1,6 @@ -foo = React.createClass({ +foo = createReactClass({ displayName: "foo" +}); +bar = React.createClass({ + displayName: "bar" }); \ No newline at end of file diff --git a/packages/babel-plugin-transform-react-display-name/test/fixtures/display-name/nested/actual.js b/packages/babel-plugin-transform-react-display-name/test/fixtures/display-name/nested/actual.js index d0948f5bfd..b281773d1e 100644 --- a/packages/babel-plugin-transform-react-display-name/test/fixtures/display-name/nested/actual.js +++ b/packages/babel-plugin-transform-react-display-name/test/fixtures/display-name/nested/actual.js @@ -1 +1,2 @@ -var foo = bar(React.createClass({})); +var foo = qux(createReactClass({})); +var bar = qux(React.createClass({})); \ No newline at end of file diff --git a/packages/babel-plugin-transform-react-display-name/test/fixtures/display-name/nested/expected.js b/packages/babel-plugin-transform-react-display-name/test/fixtures/display-name/nested/expected.js index 9c1a454330..2d3a1b6270 100644 --- a/packages/babel-plugin-transform-react-display-name/test/fixtures/display-name/nested/expected.js +++ b/packages/babel-plugin-transform-react-display-name/test/fixtures/display-name/nested/expected.js @@ -1,3 +1,6 @@ -var foo = bar(React.createClass({ +var foo = qux(createReactClass({ displayName: "foo" +})); +var bar = qux(React.createClass({ + displayName: "bar" })); \ No newline at end of file diff --git a/packages/babel-plugin-transform-react-display-name/test/fixtures/display-name/object-property/actual.js b/packages/babel-plugin-transform-react-display-name/test/fixtures/display-name/object-property/actual.js index 42c53a9cbc..5412a002ec 100644 --- a/packages/babel-plugin-transform-react-display-name/test/fixtures/display-name/object-property/actual.js +++ b/packages/babel-plugin-transform-react-display-name/test/fixtures/display-name/object-property/actual.js @@ -1,3 +1,6 @@ ({ - foo: React.createClass({}) + foo: createReactClass({}) }); +({ + bar: React.createClass({}) +}); \ No newline at end of file diff --git a/packages/babel-plugin-transform-react-display-name/test/fixtures/display-name/object-property/expected.js b/packages/babel-plugin-transform-react-display-name/test/fixtures/display-name/object-property/expected.js index f09344b241..1868127e66 100644 --- a/packages/babel-plugin-transform-react-display-name/test/fixtures/display-name/object-property/expected.js +++ b/packages/babel-plugin-transform-react-display-name/test/fixtures/display-name/object-property/expected.js @@ -1,5 +1,10 @@ ({ - foo: React.createClass({ + foo: createReactClass({ displayName: "foo" }) +}); +({ + bar: React.createClass({ + displayName: "bar" + }) }); \ No newline at end of file diff --git a/packages/babel-plugin-transform-react-display-name/test/fixtures/display-name/variable-declarator/actual.js b/packages/babel-plugin-transform-react-display-name/test/fixtures/display-name/variable-declarator/actual.js index a1ce86e321..9aa6adca4d 100644 --- a/packages/babel-plugin-transform-react-display-name/test/fixtures/display-name/variable-declarator/actual.js +++ b/packages/babel-plugin-transform-react-display-name/test/fixtures/display-name/variable-declarator/actual.js @@ -1 +1,2 @@ -var foo = React.createClass({}); +var foo = createReactClass({}); +var bar = React.createClass({}); \ No newline at end of file diff --git a/packages/babel-plugin-transform-react-display-name/test/fixtures/display-name/variable-declarator/expected.js b/packages/babel-plugin-transform-react-display-name/test/fixtures/display-name/variable-declarator/expected.js index 763399a62b..b54b881485 100644 --- a/packages/babel-plugin-transform-react-display-name/test/fixtures/display-name/variable-declarator/expected.js +++ b/packages/babel-plugin-transform-react-display-name/test/fixtures/display-name/variable-declarator/expected.js @@ -1,3 +1,6 @@ -var foo = React.createClass({ +var foo = createReactClass({ displayName: "foo" +}); +var bar = React.createClass({ + displayName: "bar" }); \ No newline at end of file