Fix ASI bug in react-hot-loader transform (#384)

The specific pattern `export default function() {}` was transformed in such a way that the parenthesized block afterword looked like a function invocation. To avoid this, we can start the snippet with a semicolon.
alangpierce · Dec 31, 2018 · 69d9178 · 69d9178
1 parent 4f42a22
commit 69d9178
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 5 deletions.
diff --git a/src/transformers/ReactHotLoaderTransformer.ts b/src/transformers/ReactHotLoaderTransformer.ts
@@ -44,7 +44,7 @@ export default class ReactHotLoaderTransformer extends Transformer {
       });
     }
     return `
-(function () {
+;(function () {
   var reactHotLoader = require('react-hot-loader').default;
   var leaveModule = require('react-hot-loader').leaveModule;
   if (!reactHotLoader) {

diff --git a/test/react-hot-loader-test.ts b/test/react-hot-loader-test.ts
@@ -75,7 +75,7 @@ describe("transform react-hot-loader", () => {
       
       let _default; exports. default = _default = 12;
     
-(function () {
+;(function () {
   var reactHotLoader = require('react-hot-loader').default;
   var leaveModule = require('react-hot-loader').leaveModule;
   if (!reactHotLoader) {
@@ -141,7 +141,7 @@ describe("transform react-hot-loader", () => {
       
       let _default; export default _default = 12;
     
-(function () {
+;(function () {
   var reactHotLoader = require('react-hot-loader').default;
   var leaveModule = require('react-hot-loader').leaveModule;
   if (!reactHotLoader) {
@@ -167,7 +167,7 @@ describe("transform react-hot-loader", () => {
       
       const f = (x) => x + 1;
     
-(function () {
+;(function () {
   var reactHotLoader = require('react-hot-loader').default;
   var leaveModule = require('react-hot-loader').leaveModule;
   if (!reactHotLoader) {
@@ -188,7 +188,28 @@ describe("transform react-hot-loader", () => {
       `${RHL_PREFIX}
       export default function add() {}
     
-(function () {
+;(function () {
+  var reactHotLoader = require('react-hot-loader').default;
+  var leaveModule = require('react-hot-loader').leaveModule;
+  if (!reactHotLoader) {
+    return;
+  }
+  reactHotLoader.register(add, "add", "sample.tsx");
+  leaveModule(module);
+})();`,
+      ["typescript"],
+    );
+  });
+
+  it("guards against ASI issues by starting the suffix with a semicolon", () => {
+    assertESMResult(
+      `
+      export default function add() {}
+    `,
+      `${RHL_PREFIX}
+      export default function add() {}
+    
+;(function () {
   var reactHotLoader = require('react-hot-loader').default;
   var leaveModule = require('react-hot-loader').leaveModule;
   if (!reactHotLoader) {