Better compilation via Babel (#117)

* Use babel to transpile and polyfill

* Add babel polyfill

package.json

@@ -31,12 +31,14 @@
   ],
   "dependencies": {
     "@babel/core": "^7.4.4",
-    "@jaredpalmer/rollup-plugin-preserve-shebang": "^0.1.7",
+    "@babel/plugin-proposal-class-properties": "^7.4.4",
+    "@babel/polyfill": "^7.4.4",
+    "@babel/preset-env": "^7.4.4",
     "ansi-escapes": "^3.2.0",
     "asyncro": "^3.0.0",
-    "@babel/preset-env": "^7.4.4",
     "babel-plugin-annotate-pure-calls": "^0.4.0",
     "babel-plugin-dev-expression": "^0.2.1",
+    "babel-plugin-transform-async-to-promises": "^0.8.11",
     "babel-plugin-transform-rename-import": "^2.3.0",
     "camelcase": "^5.0.0",
     "chalk": "^2.4.2",
@@ -59,7 +61,7 @@
     "rollup-plugin-size-snapshot": "^0.8.0",
     "rollup-plugin-sourcemaps": "^0.4.2",
     "rollup-plugin-terser": "^4.0.4",
-    "rollup-plugin-typescript2": "^0.21.0",
+    "rollup-plugin-typescript2": "^0.21.1",
     "sade": "^1.4.2",
     "tiny-glob": "^0.2.6",
     "ts-jest": "^24.0.2",

src/createRollupConfig.ts

@@ -13,31 +13,59 @@ import shebangPlugin from '@jaredpalmer/rollup-plugin-preserve-shebang';
 
 const replacements = [{ original: 'lodash', replacement: 'lodash-es' }];
 
-const babelOptions = (format: 'cjs' | 'es' | 'umd') => ({
-  exclude: /node_modules/,
+const babelOptions = (
+  format: 'cjs' | 'es' | 'umd',
+  target: 'node' | 'browser'
+) => ({
+  exclude: 'node_modules/**',
   extensions: [...DEFAULT_EXTENSIONS, 'ts', 'tsx'],
-  presets: ['@babel/preset-env'],
+  passPerPreset: true, // @see https://babeljs.io/docs/en/options#passperpreset
+  presets: [
+    [
+      '@babel/preset-env',
+      {
+        loose: true,
+        modules: false,
+        targets: target === 'node' ? { node: '8' } : undefined,
+        exclude: ['transform-async-to-generator'],
+      },
+    ],
+  ],
   plugins: [
     require.resolve('babel-plugin-annotate-pure-calls'),
     require.resolve('babel-plugin-dev-expression'),
     format !== 'cjs' && [
       require.resolve('babel-plugin-transform-rename-import'),
       { replacements },
     ],
+    [
+      require.resolve('babel-plugin-transform-async-to-promises'),
+      { inlineHelpers: true, externalHelpers: true },
+    ],
+    [
+      require.resolve('@babel/plugin-proposal-class-properties'),
+      { loose: true },
+    ],
   ].filter(Boolean),
 });
 
+// shebang cache map thing because the transform only gets run once
+let shebang: any = {};
 export function createRollupConfig(
   format: 'cjs' | 'umd' | 'es',
   env: 'development' | 'production',
   opts: { input: string; name: string; target: 'node' | 'browser' }
 ) {
-  let shebang;
   return {
     // Tell Rollup the entry point to the package
     input: opts.input,
     // Tell Rollup which packages to ignore
-    external,
+    external: (id: string) => {
+      if (id === 'babel-plugin-transform-async-to-promises/helpers') {
+        return false;
+      }
+      return external(id);
+    },
     // Establish Rollup output
     output: {
       // Set filenames of the consumer's package
@@ -90,6 +118,26 @@ export function createRollupConfig(
           include: /\/node_modules\//,
         }),
       json(),
+      {
+        // Custom plugin that removes shebang from code because newer
+        // versions of bublé bundle their own private version of `acorn`
+        // and I don't know a way to patch in the option `allowHashBang`
+        // to acorn. Taken from microbundle.
+        // See: https://github.com/Rich-Harris/buble/pull/165
+        transform(code: string) {
+          let reg = /^#!(.*)/;
+          let match = code.match(reg);
+
+          shebang[opts.name] = match ? '#!' + match[1] : '';
+
+          code = code.replace(reg, '');
+
+          return {
+            code,
+            map: null,
+          };
+        },
+      },
       typescript({
         typescript: require('typescript'),
         cacheRoot: `./.rts2_cache_${format}`,
@@ -98,11 +146,15 @@ export function createRollupConfig(
             sourceMap: true,
             declaration: true,
             jsx: 'react',
-            target: 'es5',
+          },
+        },
+        tsconfigOverride: {
+          compilerOptions: {
+            target: 'esnext',
           },
         },
       }),
-      babel(babelOptions(format)),
+      babel(babelOptions(format, opts.target)),
       replace({
         'process.env.NODE_ENV': JSON.stringify(env),
       }),
@@ -117,15 +169,12 @@ export function createRollupConfig(
           compress: {
             keep_infinity: true,
             pure_getters: true,
-            collapse_vars: false,
+            passes: 10,
           },
           ecma: 5,
           toplevel: format === 'es' || format === 'cjs',
           warnings: true,
         }),
-      shebangPlugin({
-        shebang,
-      }),
     ],
   };
 }