Merge pull request #2 from TaopaiC/babel-6

fix Babel 6
chicoxyzzy · Nov 12, 2015 · 8b30661 · 8b30661
2 parents 292e5ad + df1ba2d
commit 8b30661
Show file tree

Hide file tree

Showing 10 changed files with 89 additions and 71 deletions.
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,3 @@
+{
+  "presets": ["es2015"]
+}
diff --git a/package.json b/package.json
@@ -14,14 +14,16 @@
   },
   "homepage": "https://github.com/gaearon/babel-plugin-react-transform#readme",
   "devDependencies": {
-    "babel": "^5.8.23",
+    "babel-cli": "^6.1.1",
+    "babel-core": "^6.0.0",
+    "babel-preset-es2015": "^6.0.15",
     "mocha": "^2.2.5",
     "rimraf": "^2.4.3"
   },
   "scripts": {
     "clean": "rimraf lib",
-    "build": "babel-plugin build",
-    "test": "mocha --compilers js:babel/register",
+    "build": "babel src --out-dir lib --copy-files",
+    "test": "mocha --compilers js:babel-core/register",
     "test:watch": "npm run test -- --watch",
     "prepublish": "npm run clean && npm run build"
   },

diff --git a/src/index.js b/src/index.js
@@ -87,7 +87,7 @@ export default function ({ types: t }) {
    * Creates a record about us having visited a valid React component.
    * Such records will later be merged into a single object.
    */
-  function createComponentRecord(node, scope, file, state) {
+  function createComponentRecord(node, scope, state) {
     const displayName = findDisplayName(node) || undefined;
     const uniqueId = scope.generateUidIdentifier(
       '$' + (displayName || 'Unknown')
@@ -114,8 +114,8 @@ export default function ({ types: t }) {
    * Memorizes the fact that we have visited a valid component in the plugin state.
    * We will later retrieve memorized records to compose an object out of them.
    */
-  function addComponentRecord(node, scope, file, state) {
-    const [uniqueId, definition] = createComponentRecord(node, scope, file, state);
+  function addComponentRecord(node, scope, state) {
+    const [uniqueId, definition] = createComponentRecord(node, scope, state);
     state[recordsKey] = state[recordsKey] || [];
     state[recordsKey].push(t.objectProperty(
       t.identifier(uniqueId),
@@ -149,21 +149,21 @@ export default function ({ types: t }) {
    * Imports and calls a particular transformation target function.
    * You may specify several such transformations, so they are handled separately.
    */
-  function defineInitTransformCall(scope, { file }, recordsId, targetOptions) {
+  function defineInitTransformCall(scope, file, recordsId, targetOptions) {
     const id = scope.generateUidIdentifier('reactComponentWrapper');
     const { transform, imports = [], locals = [] } = targetOptions;
     const { filename } = file.opts;
     return [id, t.variableDeclaration('var', [
       t.variableDeclarator(id,
-        t.callExpression(file.addImport(transform), [
+        t.callExpression(file.addImport(transform, 'default'), [
           t.objectExpression([
             t.objectProperty(t.identifier('filename'), t.stringLiteral(filename)),
             t.objectProperty(t.identifier('components'), recordsId),
             t.objectProperty(t.identifier('locals'), t.arrayExpression(
               locals.map(local => t.identifier(local))
             )),
             t.objectProperty(t.identifier('imports'), t.arrayExpression(
-              imports.map(imp => file.addImport(imp, null, 'absolute'))
+              imports.map(imp => file.addImport(imp, 'default', 'absolute'))
             ))
           ])
         ])
@@ -194,52 +194,57 @@ export default function ({ types: t }) {
 
   return {
     visitor: {
-      Function: {
-        enter({ node, parent, scope }, file) {
+      'FunctionDeclaration|FunctionExpression': {
+        enter({ node, parent, scope }) {
           if (!this.state[depthKey]) {
             this.state[depthKey] = 0;
           }
           this.state[depthKey]++;
         },
-        exit({ node, parent, scope }, file) {
+        exit({ node, parent, scope }) {
           this.state[depthKey]--;
         }
       },
 
-      Class({ node, scope }, file) {
+      ClassExpression(path) {
+        const {node, scope} = path;
         if (!isComponentishClass(node)) {
           return;
         }
 
         const wrapReactComponentId = this.state[wrapComponentIdKey];
-        const uniqueId = addComponentRecord(node, scope, file, this.state);
+        const uniqueId = addComponentRecord(node, scope, this.state);
 
         node.decorators = node.decorators || [];
         node.decorators.push(t.decorator(
-          t.callExpression(wrapReactComponentId, [t.stringLiteral(uniqueId)])
+          t.callExpression(wrapReactComponentId, [t.identifier(uniqueId)])
         ));
       },
 
       CallExpression: {
-        exit({ node, scope }, file) {
+        exit(path) {
+          const { node, scope } = path;
           const { isCreateClassCallExpression } = this.state[cacheKey];
-          if (!isCreateClass(node, isCreateClassCallExpression)) {
+          if (!isCreateClass(node, isCreateClassCallExpression) || node._reactTransformWrapped) {
             return;
           }
 
           const wrapReactComponentId = this.state[wrapComponentIdKey];
-          const uniqueId = addComponentRecord(node, scope, file, this.state);
+          const uniqueId = addComponentRecord(node, scope, this.state);
+          node._reactTransformWrapped = true;
 
-          return t.callExpression(
-            t.callExpression(wrapReactComponentId, [t.stringLiteral(uniqueId)]),
-            [node]
+          path.replaceWith(
+            t.callExpression(
+              t.callExpression(wrapReactComponentId, [t.stringLiteral(uniqueId)]),
+              [node]
+            )
           );
         }
       },
 
       Program: {
-        enter({ scope }, file) {
-          const { opts } = file;
+        enter({ scope }, state) {
+          const { opts } = state;
           if (!isValidOptions(opts)) {
             throw new Error(
               'babel-plugin-react-transform requires that you specify options in .babelrc ' +
@@ -258,7 +263,8 @@ export default function ({ types: t }) {
           this.state[wrapComponentIdKey] = scope.generateUidIdentifier('wrapComponent');
         },
 
-        exit({ node, scope }, file) {
+        exit(path) {
+          const { node, scope, hub: {file} } = path;
           if (!foundComponentRecords(this.state)) {
             return;
           }
@@ -278,12 +284,12 @@ export default function ({ types: t }) {
           // Create one uber function calling each transformation
           const wrapComponentId = this.state[wrapComponentIdKey];
           const wrapComponent = defineWrapComponent(wrapComponentId, initTransformIds);
-          return t.program([
+          path.replaceWith(t.program([
             recordsVar,
             ...initTransformVars,
             wrapComponent,
             ...node.body
-          ]);
+          ]));
         }
       }
     }

diff --git a/test/fixtures/classic/.babelrc b/test/fixtures/classic/.babelrc
@@ -1,14 +1,14 @@
 {
-  "plugins": ["../../../src"],
-  "extra": {
-    "react-transform": {
+  "presets": ["es2015"],
+  "plugins": [
+    ["../../../src", {
       "transforms": [{
         "transform": "my-custom-module/wrap",
         "locals": ["module"],
         "imports": ["react"]
       }, {
         "transform": "my-other-custom-module/wrap"
       }]
-    }
-  }
+    }]
+  ]
 }
diff --git a/test/fixtures/classic/expected.js b/test/fixtures/classic/expected.js
@@ -1,18 +1,23 @@
 'use strict';
 
-var _myCustomModuleWrap2 = require('my-custom-module/wrap');
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _wrap = require('my-other-custom-module/wrap');
 
-var _myCustomModuleWrap3 = _interopRequireDefault(_myCustomModuleWrap2);
+var _wrap2 = _interopRequireDefault(_wrap);
 
 var _react = require('react');
 
-var _myOtherCustomModuleWrap2 = require('my-other-custom-module/wrap');
+var _react2 = _interopRequireDefault(_react);
 
-var _myOtherCustomModuleWrap3 = _interopRequireDefault(_myOtherCustomModuleWrap2);
+var _wrap3 = require('my-custom-module/wrap');
+
+var _wrap4 = _interopRequireDefault(_wrap3);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-Object.defineProperty(exports, '__esModule', {
-  value: true
-});
 var _components = {
   _$A: {
     displayName: 'A'
@@ -59,14 +64,14 @@ var _components = {
   }
 };
 
-var _reactComponentWrapper = (0, _myCustomModuleWrap3['default'])({
+var _reactComponentWrapper = (0, _wrap4.default)({
   filename: '%FIXTURE_PATH%',
   components: _components,
   locals: [module],
-  imports: [_react]
+  imports: [_react2.default]
 });
 
-var _reactComponentWrapper2 = (0, _myOtherCustomModuleWrap3['default'])({
+var _reactComponentWrapper2 = (0, _wrap2.default)({
   filename: '%FIXTURE_PATH%',
   components: _components,
   locals: [],
@@ -79,8 +84,6 @@ function _wrapComponent(uniqueId) {
   };
 }
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
-
 var React = require('react');
 var connect = require('some-hoc');
 var twice = require('other-hoc');
@@ -137,7 +140,7 @@ var more = {
   }
 };
 
-exports['default'] = _wrapComponent('_$E')(React.createClass({
+exports.default = _wrapComponent('_$E')(React.createClass({
   displayName: 'E',
 
   render: function render() {}
@@ -153,7 +156,9 @@ var DynamicName = _wrapComponent('_$Unknown2')(React.createClass({
   render: function render() {}
 }));
 
-var Something = Math.random() > .5 ? _wrapComponent('_$ComponentInsideCondition')(React.createClass({ displayName: 'ComponentInsideCondition', render: function render() {} })) : _wrapComponent('_$AnotherComponentInsideCondition')(React.createClass({ displayName: 'AnotherComponentInsideCondition', render: function render() {} }));
+var Something = Math.random() > .5 ? _wrapComponent('_$ComponentInsideCondition')(React.createClass({ displayName: 'ComponentInsideCondition', render: function render() {}
+})) : _wrapComponent('_$AnotherComponentInsideCondition')(React.createClass({ displayName: 'AnotherComponentInsideCondition', render: function render() {}
+}));
 
 function factory() {
   var ComponentInsideFunction = _wrapComponent('_$ComponentInsideFunction')(React.createClass({
@@ -166,4 +171,3 @@ function factory() {
     render: function render() {}
   }));
 }
-module.exports = exports['default'];
diff --git a/test/fixtures/customFactoryMethod/.babelrc b/test/fixtures/customFactoryMethod/.babelrc
@@ -1,7 +1,7 @@
 {
-  "plugins": ["../../../src"],
-  "extra": {
-    "react-transform": {
+  "presets": ["es2015"],
+  "plugins": [
+    ["../../../src", {
       "transforms": [{
         "transform": "my-custom-module/wrap",
         "locals": ["module"],
@@ -14,6 +14,6 @@
         "createClass",
         "myComponentFactory"
       ]
-    }
-  }
+    }]
+  ]
 }
diff --git a/test/fixtures/customFactoryMethod/expected.js b/test/fixtures/customFactoryMethod/expected.js
@@ -1,29 +1,33 @@
 'use strict';
 
-var _myCustomModuleWrap2 = require('my-custom-module/wrap');
+var _wrap = require('my-other-custom-module/wrap');
 
-var _myCustomModuleWrap3 = _interopRequireDefault(_myCustomModuleWrap2);
+var _wrap2 = _interopRequireDefault(_wrap);
 
 var _react = require('react');
 
-var _myOtherCustomModuleWrap2 = require('my-other-custom-module/wrap');
+var _react2 = _interopRequireDefault(_react);
 
-var _myOtherCustomModuleWrap3 = _interopRequireDefault(_myOtherCustomModuleWrap2);
+var _wrap3 = require('my-custom-module/wrap');
+
+var _wrap4 = _interopRequireDefault(_wrap3);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var _components = {
   _$A: {
     displayName: 'A'
   }
 };
 
-var _reactComponentWrapper = (0, _myCustomModuleWrap3['default'])({
+var _reactComponentWrapper = (0, _wrap4.default)({
   filename: '%FIXTURE_PATH%',
   components: _components,
   locals: [module],
-  imports: [_react]
+  imports: [_react2.default]
 });
 
-var _reactComponentWrapper2 = (0, _myOtherCustomModuleWrap3['default'])({
+var _reactComponentWrapper2 = (0, _wrap2.default)({
   filename: '%FIXTURE_PATH%',
   components: _components,
   locals: [],
@@ -36,8 +40,6 @@ function _wrapComponent(uniqueId) {
   };
 }
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
-
 var myComponentFactory = require('myComponentFactory');
 
 var A = _wrapComponent('_$A')(myComponentFactory({

diff --git a/test/fixtures/modern/.babelrc b/test/fixtures/modern/.babelrc
@@ -1,14 +1,14 @@
 {
-  "plugins": ["../../../src"],
-  "extra": {
-    "react-transform": {
+  "presets": ["es2015"],
+  "plugins": [
+    ["../../../src", {
       "transforms": [{
         "transform": "my-custom-module/wrap",
         "locals": ["module"],
         "imports": ["react"]
       }, {
         "transform": "my-other-custom-module/wrap"
       }]
-    }
-  }
+    }]
+  ]
 }
diff --git a/test/fixtures/vanilla/.babelrc b/test/fixtures/vanilla/.babelrc
@@ -1,14 +1,15 @@
 {
-  "plugins": ["../../../src"],
-  "extra": {
-    "react-transform": {
+  "presets": ["es2015"],
+  "plugins": [
+    ["../../../src", {
       "transforms": [{
         "transform": "my-custom-module/wrap",
         "locals": ["module"],
         "imports": ["react"]
       }, {
         "transform": "my-other-custom-module/wrap"
       }]
-    }
-  }
+
+    }]
+  ]
 }
diff --git a/test/index.js b/test/index.js
@@ -1,7 +1,7 @@
 import path from 'path';
 import fs from 'fs';
 import assert from 'assert';
-import { transformFileSync } from 'babel';
+import { transformFileSync } from 'babel-core';
 import plugin from '../src';
 
 function trim(str) {