Support custom babel plugins. (#41)

Fixes #36

README.md

@@ -57,9 +57,29 @@ splittable({
 
 - `writeTo`: Output directory for bundles. Default: `./out/`
 - `warnings`: Whether to show closure compiler warnings. Default: `false`
+- `babel`: (Experimental, feedback appreciated) Allows specifying babel options. By default splittable also reads from your `.babelrc`. Please note, though. We highly recommend turning off transpilation of ES6 modules. Otherwise the generated code will be very poor (splittable compiles ES6 modules at a later stage).
 
+#### Example
+
+```js
+splittable({
+  modules: ['./test/module-regression/custom-babel-config.js'],
+  writeTo: 'test-out/',
+  babel: {
+    presets: [
+      ['es2015', { loose: true, modules: false /* IMPORTANT! */ }],
+      'stage-0'
+    ],
+    plugins: [
+      'transform-object-rest-spread',
+      ['transform-react-jsx', { pragma:'h' }]
+    ],
+  }
+})
 ```
 
+### Generated bundles
+
 The above will write 3 files (plus sourcemaps) to the directory `out`.
 
 1. A bundle of `./lib/a` and its dependencies.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "splittable",
-  "version": "3.1.0",
+  "version": "4.0.0",
   "description": "Module bundler with support for code splitting, ES6 & CommonJS modules.",
   "main": "index.js",
   "scripts": {
@@ -21,6 +21,9 @@
   "author": "cramforce",
   "license": "Apache-2.0",
   "devDependencies": {
+    "babel-plugin-transform-object-rest-spread": "^6.20.2",
+    "babel-preset-es2015": "^6.18.0",
+    "babel-preset-stage-0": "^6.16.0",
     "bel": "^4.5.1",
     "d3-array": "^1.0.1",
     "d3-shape": "^1.0.3",

splittable.js

@@ -100,7 +100,7 @@ exports.getFlags = function(config) {
     }
   });
 
-  return exports.getGraph(config.modules).then(function(g) {
+  return exports.getGraph(config.modules, config).then(function(g) {
     return flagsArray.concat(
         exports.getBundleFlags(g, flagsArray));
   });
@@ -185,7 +185,7 @@ exports.getBundleFlags = function(g) {
  * @return {!Promise<{bundles: !Object}>} A Promise for bundle definitions.
  * @visibleForTesting
  */
-exports.getGraph = function(entryModules) {
+exports.getGraph = function(entryModules, config) {
   var resolve;
   var reject;
   var promise = new Promise(function(res, rej) {
@@ -217,25 +217,31 @@ exports.getGraph = function(entryModules) {
     browserMask: {},
   };
 
+  config.babel = config.babel || {};
+
   // Use browserify with babel to learn about deps.
   var b = browserify(entryModules, {
     debug: true,
     deps: true,
     detectGlobals: false,
   })
-      // We register 2 separate transforms. The initial stage are
-      // transforms that closure compiler does not support.
-      .transform(babel, {
-        plugins: [
-          require.resolve("babel-plugin-transform-react-jsx"),
-        ]
-      // The second stage are transforms that closure compiler supports
-      // directly and which we don't want to apply during deps finding.
-      }).transform(babel, {
-        plugins: [
-          require.resolve("babel-plugin-transform-es2015-modules-commonjs"),
-        ]
-      });
+  // We register 2 separate transforms. The initial stage are
+  // transforms that closure compiler does not support.
+  .transform(babel, {
+    babelrc: !!config.babel.babelrc,
+    plugins: config.babel.plugins || [
+      require.resolve("babel-plugin-transform-react-jsx"),
+    ],
+    presets: config.babel.presets,
+  }).
+  // The second stage are transforms that closure compiler supports
+  // directly and which we don't want to apply during deps finding.
+  transform(babel, {
+    babelrc: false,
+    plugins: [
+      require.resolve("babel-plugin-transform-es2015-modules-commonjs"),
+    ]
+  });
 
   b.on('package', function(pkg) {
     if (!pkg.browser) {
@@ -286,10 +292,6 @@ exports.getGraph = function(entryModules) {
           return;  // We only care about the first transform per file.
         }
         seenTransform[filename] = true;
-        // Dirty hack to see if any JSX was actually inserted into doc.
-        if (!/React\.createElement/.test(result.code)) {
-          return;
-        }
         filename = relativePath(process.cwd(), filename);
         // Copy transformed code into shadow path. Files in this path
         // have precedence over regular relative paths.
@@ -402,7 +404,6 @@ function setupBundles(graph) {
   }
 }
 
-
 var knownExtensions = {
   js: true,
   es: true,

test/module-regression/custom-babel-config.js

@@ -0,0 +1,6 @@
+
+export function test() {
+  this.todos = this.todos.map(
+    todo => ({ ...todo, completed })
+  );
+}

test/test-module-regression.js

@@ -25,3 +25,21 @@ t.test('module regression: bel', function(t) {
     writeTo: 'test-out/',
   });
 });
+
+t.test('custom babel config', function(t) {
+  fs.emptyDirSync('test-out/');
+  return splittable({
+    modules: ['./test/module-regression/custom-babel-config.js'],
+    writeTo: 'test-out/',
+    babel: {
+      presets: [
+        ['es2015', { loose: true, modules: false }],
+        'stage-0'
+      ],
+      plugins: [
+        'transform-object-rest-spread',
+        ['transform-react-jsx', { pragma:'h' }]
+      ],
+    }
+  });
+});

test/test-splittable.js

@@ -30,7 +30,7 @@ function jsonEqual(t, a, b, message) {
 }
 
 t.test('module order with 2 modules', function(t) {
-  return getGraph(['./sample/lib/a', './sample/lib/b']).then(function(g) {
+  return getGraph(['./sample/lib/a', './sample/lib/b'], {}).then(function(g) {
     jsonEqual(t, g.bundles, {
       "_base": {
         "isBase": true,
@@ -61,18 +61,18 @@ t.test('module order with 2 modules', function(t) {
 
     jsonEqual(t, makeVariableFileNamesConsistent(getBundleFlags(g)), [
       "--js", "base.js",
-      "--js", "sample/lib/d.js",
-      "--js", "sample/lib/c.js",
+      "--js", "./splittable-build/transformed/sample/lib/d.js",
+      "--js", "./splittable-build/transformed/sample/lib/c.js",
       "--module", "_base:3",
       "--module_wrapper", "_base:" + splittable.baseBundleWrapper,
-      "--js", "sample/lib/has-only-one-dependency.js",
-      "--js", "sample/lib/e.js",
+      "--js", "./splittable-build/transformed/sample/lib/has-only-one-dependency.js",
+      "--js", "./splittable-build/transformed/sample/lib/e.js",
       "--js", "sample/lib/data.json",
-      "--js", "sample/lib/a.js",
+      "--js", "./splittable-build/transformed/sample/lib/a.js",
       "--js", "$TMP_FILE",
       "--module", "sample-lib-a:5:_base",
       "--module_wrapper", "sample-lib-a:" + splittable.bundleWrapper,
-      "--js", "sample/lib/b.js",
+      "--js", "./splittable-build/transformed/sample/lib/b.js",
       "--js", "$TMP_FILE",
       "--module", "sample-lib-b:2:_base",
       "--module_wrapper", "sample-lib-b:" + splittable.bundleWrapper,
@@ -84,7 +84,7 @@ t.test('module order with 2 modules', function(t) {
 });
 
 t.test('module order with 2 modules and no overlap', function(t) {
-  return getGraph(['./sample/lib/d', './sample/lib/e']).then(function(g) {
+  return getGraph(['./sample/lib/d', './sample/lib/e'], {}).then(function(g) {
     jsonEqual(t, g.bundles, {
       "_base": {
         "isBase": true,
@@ -111,7 +111,7 @@ t.test('module order with 2 modules and no overlap', function(t) {
 });
 
 t.test('accepts different module input syntax', function(t) {
-  return getGraph(['sample/lib/b.js']).then(function(g) {
+  return getGraph(['sample/lib/b.js'], {}).then(function(g) {
     jsonEqual(t, g.bundles, {
       "sample/lib/b.js": {
         "isBase": false,
@@ -126,9 +126,9 @@ t.test('accepts different module input syntax', function(t) {
 
     jsonEqual(t, getBundleFlags(g), [
       "--js", "base.js",
-      "--js", "sample/lib/d.js",
-      "--js", "sample/lib/c.js",
-      "--js", "sample/lib/b.js",
+      "--js", "./splittable-build/transformed/sample/lib/d.js",
+      "--js", "./splittable-build/transformed/sample/lib/c.js",
+      "--js", "./splittable-build/transformed/sample/lib/b.js",
       "--module", "sample-lib-b:4",
       "--module_wrapper", "sample-lib-b:" + splittable.defaultWrapper,
       "--js_module_root", "./splittable-build/transformed/",
@@ -139,7 +139,7 @@ t.test('accepts different module input syntax', function(t) {
 });
 
 t.test('packages', function(t) {
-  return getGraph(['sample/lib/other-module-root']).then(function(g) {
+  return getGraph(['sample/lib/other-module-root'], {}).then(function(g) {
     jsonEqual(t, g.bundles, {
       "sample/lib/other-module-root.js": {
         "isBase": false,
@@ -167,7 +167,7 @@ t.test('packages', function(t) {
       "--js", "node_modules/d3-shape/build/d3-shape.js",
       "--js", "node_modules/left-pad/index.js",
       "--js", "node_modules/promise-pjs/promise.js",
-      "--js", "sample/lib/other-module-root.js",
+      "--js", "./splittable-build/transformed/sample/lib/other-module-root.js",
       "--module", "sample-lib-other-module-root:12",
       "--module_wrapper", "sample-lib-other-module-root:" +
           splittable.defaultWrapper,
@@ -180,7 +180,7 @@ t.test('packages', function(t) {
 
 t.test('module order with 3 modules', function(t) {
   return getGraph(['./sample/lib/a', './sample/lib/b',
-      './sample/lib/no-deps']).then(function(g) {
+      './sample/lib/no-deps'], {}).then(function(g) {
         jsonEqual(t, g.bundles, {
           "_base": {
             "isBase": true,
@@ -249,9 +249,9 @@ t.test('getFlags', function(t) {
       "--source_map_location_mapping","splittable-build/browser/|/",
       "--source_map_location_mapping", "|/",
       "--js", "base.js",
-      "--js", "sample/lib/d.js",
-      "--js", "sample/lib/c.js",
-      "--js", "sample/lib/b.js",
+      "--js", "./splittable-build/transformed/sample/lib/d.js",
+      "--js", "./splittable-build/transformed/sample/lib/c.js",
+      "--js", "./splittable-build/transformed/sample/lib/b.js",
       "--module", "sample-lib-b:4",
       "--module_wrapper", "sample-lib-b:" + splittable.defaultWrapper,
       "--js_module_root", "./splittable-build/transformed/",