Merge pull request #252 from marvinhagemeister/fix_jsx

Fix jsx error

Author: ForsakenHarmony

.eslintrc

@@ -11,5 +11,10 @@
     "brace-style": "off",
     "comma-dangle": ["warn", "always-multiline"],
     "indent": "off"
+  },
+  "settings": {
+    "react": {
+      "version": "16.6"
+    }
   }
 }

.gitignore

@@ -6,4 +6,5 @@ build
 dist
 package-lock.json
 yarn.lock
-.vscode
+.vscode
+.rts2*

README.md

@@ -111,4 +111,3 @@ Here's what's coming up for Microbundle:
 
 [rollup]: https://github.com/rollup/rollup
 [bublé]: https://github.com/Rich-Harris/buble
-[nodent]: https://github.com/MatAtBread/nodent-compiler

babel.config.js

@@ -0,0 +1,23 @@
+module.exports = {
+	presets: [
+		[
+			'@babel/preset-env',
+			{
+				exclude: [
+					'transform-async-to-generator',
+					'proposal-async-generator-functions',
+					'transform-regenerator',
+				],
+				loose: true,
+				targets: {
+					chrome: '58',
+					ie: '11',
+				},
+			},
+		],
+	],
+	plugins: [
+		['babel-plugin-transform-async-to-promises', { inlineHelpers: true }],
+		'@babel/plugin-syntax-jsx',
+	],
+};

package.json

@@ -7,20 +7,15 @@
   "bin": "dist/cli.js",
   "scripts": {
     "build": "npm run -s build:babel && npm run -s build:self",
-    "build:babel": "babel-node src/cli.js --target=node --format cjs src/{cli,index}.js --presets env",
+    "build:babel": "babel-node src/cli.js --target=node --format cjs src/{cli,index}.js",
     "build:self": "node dist/cli.js --target=node --format cjs src/{cli,index}.js",
     "prepare": "npm run -s build",
-    "prepare:babel": "babel --presets env src/*.js -d dist && npm t",
+    "prepare:babel": "babel src/*.js -d dist && npm t",
     "lint": "eslint src",
     "test": "npm run -s lint && npm run -s build && jest",
     "release": "npm run -s prepare && npm test && git commit -am $npm_package_version && git tag $npm_package_version && git push && git push --tags && npm publish"
   },
   "repository": "developit/microbundle",
-  "babel": {
-    "presets": [
-      "env"
-    ]
-  },
   "prettier": {
     "singleQuote": true,
     "trailingComma": "all",
@@ -47,39 +42,45 @@
   "author": "Jason Miller <[email protected]> (http://jasonformat.com)",
   "license": "MIT",
   "dependencies": {
-    "acorn-jsx": "^4.1.1",
+    "@babel/core": "^7.1.6",
+    "@babel/plugin-proposal-class-properties": "^7.1.0",
+    "@babel/plugin-syntax-jsx": "^7.0.0",
+    "@babel/polyfill": "^7.0.0",
     "asyncro": "^3.0.0",
     "autoprefixer": "^9.0.0",
-    "babel-polyfill": "^6.26.0",
+    "babel-plugin-transform-async-to-promises": "^0.8.1",
     "brotli-size": "^0.0.3",
     "camelcase": "^5.0.0",
     "chalk": "^2.4.0",
     "cssnano": "^4.1.7",
     "es6-promisify": "^6.0.1",
     "gzip-size": "^5.0.0",
     "pretty-bytes": "^5.1.0",
-    "rollup": "^0.66.6",
-    "rollup-plugin-buble": "^0.19.2",
+    "rollup": "^0.67.3",
+    "rollup-plugin-babel": "^4.1.0-0",
+    "rollup-plugin-buble": "^0.19.4",
     "rollup-plugin-bundle-size": "^1.0.1",
     "rollup-plugin-commonjs": "^9.0.0",
     "rollup-plugin-es3": "^1.1.0",
     "rollup-plugin-flow": "^1.1.1",
     "rollup-plugin-node-resolve": "^3.3.0",
-    "rollup-plugin-nodent": "^0.2.2",
     "rollup-plugin-postcss": "^1.6.1",
     "rollup-plugin-preserve-shebang": "^0.1.6",
     "rollup-plugin-sizes": "^0.4.2",
     "rollup-plugin-strict-alias": "^1.0.0",
     "rollup-plugin-terser": "^3.0.0",
-    "rollup-plugin-typescript2": "^0.17.2",
+    "rollup-plugin-typescript2": "^0.18.0",
     "sade": "^1.4.0",
     "tiny-glob": "^0.2.0",
     "tslib": "^1.9.0",
     "typescript": ">=2.8.3"
   },
   "devDependencies": {
-    "babel-cli": "^6.26.0",
-    "babel-preset-env": "^1.6.1",
+    "@babel/cli": "^7.1.5",
+    "@babel/node": "^7.0.0",
+    "@babel/preset-env": "^7.1.6",
+    "babel-core": "^7.0.0-bridge.0",
+    "babel-jest": "^23.6.0",
     "directory-tree": "^2.1.0",
     "eslint": "^5.0.0",
     "eslint-config-developit": "^1.1.1",
@@ -90,6 +91,7 @@
     "jest": "^23.6.0",
     "lint-staged": "^8.0.0",
     "prettier": "^1.13.0",
+    "regenerator-runtime": "^0.12.1",
     "rimraf": "^2.6.2",
     "shell-quote": "^1.6.1",
     "strip-ansi": "^5.0.0"

src/cli.js

@@ -1,4 +1,3 @@
-#!/usr/bin/env node
 import microbundle from '.';
 import prog from './prog';
 import { stdout } from './utils';

src/index.js

@@ -1,4 +1,3 @@
-import 'acorn-jsx';
 import fs from 'fs';
 import { resolve, relative, dirname, basename, extname } from 'path';
 import chalk from 'chalk';
@@ -7,8 +6,8 @@ import glob from 'tiny-glob/sync';
 import autoprefixer from 'autoprefixer';
 import cssnano from 'cssnano';
 import { rollup, watch } from 'rollup';
-import nodent from 'rollup-plugin-nodent';
 import commonjs from 'rollup-plugin-commonjs';
+import babel from 'rollup-plugin-babel';
 import nodeResolve from 'rollup-plugin-node-resolve';
 import buble from 'rollup-plugin-buble';
 import { terser } from 'rollup-plugin-terser';
@@ -44,6 +43,16 @@ const WATCH_OPTS = {
 	exclude: 'node_modules/**',
 };
 
+// Hoist function because something (rollup?) incorrectly removes it
+function formatSize(size, filename, type, raw) {
+	const pretty = raw ? `${size} B` : prettyBytes(size);
+	const color = size < 5000 ? 'green' : size > 40000 ? 'red' : 'yellow';
+	const MAGIC_INDENTATION = type === 'br' ? 13 : 10;
+	return `${' '.repeat(MAGIC_INDENTATION - pretty.length)}${chalk[color](
+		pretty,
+	)}: ${chalk.white(basename(filename))}.${type}`;
+}
+
 export default async function microbundle(options) {
 	let cwd = (options.cwd = resolve(process.cwd(), options.cwd)),
 		hasPackageJson = true;
@@ -97,8 +106,8 @@ export default async function microbundle(options) {
 				(await isFile(resolve(cwd, filename + '.ts')))
 					? '.ts'
 					: (await isFile(resolve(cwd, filename + '.tsx')))
-						? '.tsx'
-						: '.js'
+					? '.tsx'
+					: '.js'
 			}`,
 		);
 
@@ -108,9 +117,10 @@ export default async function microbundle(options) {
 			options.entries && options.entries.length
 				? options.entries
 				: (options.pkg.source && resolve(cwd, options.pkg.source)) ||
-				  ((await isDir(resolve(cwd, 'src'))) && (await jsOrTs('src/index'))) ||
-				  (await jsOrTs('index')) ||
-				  options.pkg.module,
+						((await isDir(resolve(cwd, 'src'))) &&
+							(await jsOrTs('src/index'))) ||
+						(await jsOrTs('index')) ||
+						options.pkg.module,
 		)
 		.map(file => glob(file))
 		.forEach(file => options.input.push(...file));
@@ -146,15 +156,6 @@ export default async function microbundle(options) {
 		}
 	}
 
-	function formatSize(size, filename, type, raw) {
-		const pretty = raw ? `${size} B` : prettyBytes(size);
-		const color = size < 5000 ? 'green' : size > 40000 ? 'red' : 'yellow';
-		const MAGIC_INDENTATION = type === 'br' ? 13 : 10;
-		return `${' '.repeat(MAGIC_INDENTATION - pretty.length)}${chalk[color](
-			pretty,
-		)}: ${chalk.white(basename(filename))}.${type}`;
-	}
-
 	async function getSizeInfo(code, filename) {
 		const raw = options.raw || code.length < 5000;
 		const gzip = formatSize(await gzipSize(code), filename, 'gz', raw);
@@ -322,6 +323,9 @@ function createConfig(options, entry, format, writeMeta) {
 		inputOptions: {
 			input: exportType ? resolve(__dirname, '../src/lib/__entry__.js') : entry,
 			external: id => {
+				if (id === 'babel-plugin-transform-async-to-promises/helpers') {
+					return false;
+				}
 				if (options.multipleEntries && id === '.') {
 					return true;
 				}
@@ -355,31 +359,39 @@ function createConfig(options, entry, format, writeMeta) {
 									jsx: options.jsx,
 								},
 							},
+							tsconfigOverride: {
+								compilerOptions: {
+									target: 'es2017',
+								},
+							},
 						}),
 					!useTypescript && flow({ all: true, pretty: true }),
-					nodent({
+					// Only used for async await
+					babel({
+						// We mainly use bublé to transpile JS and only use babel to
+						// transpile down `async/await`. To prevent conflicts with user
+						// supplied configurations we set this option to false. Note
+						// that we never supported using custom babel configs anyway.
+						babelrc: false,
 						exclude: 'node_modules/**',
-						noRuntime: true,
-						promises: true,
-						transformations: {
-							forOf: false,
-						},
-						parser: {
-							plugins: {
-								jsx: true,
-							},
+						plugins: [
+							'@babel/plugin-syntax-jsx',
+							[
+								'babel-plugin-transform-async-to-promises',
+								{ inlineHelpers: true, externalHelpers: true },
+							],
+							['@babel/plugin-proposal-class-properties', { loose: true }],
+						],
+					}),
+					buble({
+						exclude: 'node_modules/**',
+						jsx: options.jsx || 'h',
+						objectAssign: options.assign || 'Object.assign',
+						transforms: {
+							dangerousForOf: true,
+							dangerousTaggedTemplateString: true,
 						},
 					}),
-					!useTypescript &&
-						buble({
-							exclude: 'node_modules/**',
-							jsx: options.jsx || 'h',
-							objectAssign: options.assign || 'Object.assign',
-							transforms: {
-								dangerousForOf: true,
-								dangerousTaggedTemplateString: true,
-							},
-						}),
 					useNodeResolve &&
 						commonjs({
 							include: 'node_modules/**',