Repository: styleguidist/react-styleguidist
Pull request #1379 (2019-06-05 08:31:00)

Disable asyncAwait transform to make async/await work by default
iss: #1371

Add `transforms: { asyncAwait: false }` for default compilerConfig to make async/await work by default
Update default value of compilerConfig in the configuration documentation.

### Error explanation: ([issue discussion](https://github.com/styleguidist/react-styleguidist/issues/1371#issuecomment-496003017))
We have the error here because styleguidinst has updated version of [bublé](https://github.com/bublejs/buble) ([from v0.9.4 to v0.9.7](https://github.com/mendrew/react-styleguidist/commit/48f72208d6cfb19e34654f22b47c86d8531e2b71#diff-b9cfc7f2cdf78a7f4b91a753d10865a2R34)) which does actual code transformation.
In latest version of bublé they throw this error because right now [bublé cannot transpile async](https://github.com/bublejs/buble/issues/109#issuecomment-380854164), so they've added a special transform option called `asyncAwait` to pass `async` through as before. Here the code, how they do it: [example](https://github.com/bublejs/buble/blob/086d895cdd616de065bf82339567ed4f0bc44b75/src/program/types/ArrowFunctionExpression.js#L6-L12)

It has been working before because bublé just passed `async` through.
Right now it throws the error, but you are able to confgure bublé to pass async through without transformation by using [compilerConfig](https://react-styleguidist.js.org/docs/configuration.html#compilerconfig) in your `styleguide.config.js`.
Like this: 
```js
  compilerConfig: {
    transforms: { asyncAwait: false }
  }
```

It also makes sence to pass default styleguidinst options for `compilerConfig` ([code](https://github.com/mendrew/react-styleguidist/blob/010761b5752ac43841aa54837c5562eddd8f9d82/src/scripts/schemas/config.js#L34-L45)), as documentation about default options is outdated.

mendrew: This is how updated `compilerConfig docs` look like 
<img width="959" alt="updated-compiler-config-doc" src="https://user-images.githubusercontent.com/5443359/58942326-3bca6c80-8786-11e9-8b40-717b7d073f26.png">

Maybe it makes sense to specify that if you use async/await then it won't be transform.

And I don't know where to add a test for it new compierConfig default value..


Patch:
diff --git a/docs/Configuration.md b/docs/Configuration.md
index e93715b5..926b0e1b 100644
--- a/docs/Configuration.md
+++ b/docs/Configuration.md
@@ -59,7 +59,24 @@ Your application static assets folder, will be accessible as `/` in the style gu
 
 #### `compilerConfig`
 
-Type: `Object`, default: `{ objectAssign: 'Object.assign' }`
+Type: `Object`, default:
+
+```javascript
+{
+  // Don't include an Object.assign ponyfill, we have our own
+  objectAssign: 'Object.assign',
+  // Transpile only features needed for IE11
+  target: { ie: 11 },
+  transforms: {
+    // Don't throw on ESM imports, we transpile them ourselves
+    modules: false,
+    // Enable tagged template literals for styled-components
+    dangerousTaggedTemplateString: true,
+    // to make async/await work by default (no transformation)
+    asyncAwait: false,
+  },
+}
+```
 
 Styleguidist uses [Bublé](https://buble.surge.sh/guide/) to run ES6 code on the frontend. This config object will be added as the second argument for `buble.transform`.
 
diff --git a/src/scripts/make-webpack-config.js b/src/scripts/make-webpack-config.js
index 2737bd44..ead32672 100644
--- a/src/scripts/make-webpack-config.js
+++ b/src/scripts/make-webpack-config.js
@@ -42,7 +42,7 @@ module.exports = function(config, env) {
 			publicPath: '',
 		},
 		resolve: {
-			extensions: ['.js', '.jsx', '.json'],
+			extensions: ['.js', '.jsx', '.ts', '.tsx', '.json'],
 			alias: {},
 		},
 		plugins: [
diff --git a/src/scripts/schemas/config.js b/src/scripts/schemas/config.js
index c8acd49f..a7a8428c 100644
--- a/src/scripts/schemas/config.js
+++ b/src/scripts/schemas/config.js
@@ -41,6 +41,8 @@ module.exports = {
 				modules: false,
 				// Enable tagged template literals for styled-components
 				dangerousTaggedTemplateString: true,
+				// to make async/await work by default (no transformation)
+				asyncAwait: false,
 			},
 		},
 	},


Test patch:
diff --git a/src/client/utils/__tests__/compileCode.spec.js b/src/client/utils/__tests__/compileCode.spec.js
index e301a823..84c2f64a 100644
--- a/src/client/utils/__tests__/compileCode.spec.js
+++ b/src/client/utils/__tests__/compileCode.spec.js
@@ -20,6 +20,19 @@ const foo = bar$0.default || bar$0;"
 `);
 	});
 
+	test('transform async/await is not throw an error', () => {
+		const onError = jest.fn();
+		const result = compileCode(
+			`async function asyncFunction() { return await Promise.resolve(); }`,
+			compilerConfig,
+			onError
+		);
+		expect(onError).not.toHaveBeenCalled();
+		expect(result).toMatchInlineSnapshot(
+			`"async function asyncFunction() { return await Promise.resolve(); }"`
+		);
+	});
+
 	test('transform imports to require() in front of JSX', () => {
 		const result = compileCode(
 			`