[WIP] Hot reloading (only for Hooks)

Created by: gaearon

I don't know if this is going to work but I'm going to try another time. Hooks were another piece of the puzzle. Maybe it'll work out.

Preserving state is Hooks-only. It's too brittle for classes. With Hooks it "just works" by design.

packages/babel-plugin-hot-reload/tests/__fixtures__/assignment.js

 let LazyCC;
+LazyCC = 5;
+
 let DoubleLazyCC = LazyCC;

packages/babel-plugin-hot-reload/tests/__snapshots__/fixtures.test.js.snap

@@ -3,11 +3,14 @@
 exports[`hot-reload assignment: assignment 1`] = `
 "
 let LazyCC;
+LazyCC = 5;
+
 let DoubleLazyCC = LazyCC;
 
       ↓ ↓ ↓ ↓ ↓ ↓
 
 let LazyCC;
+LazyCC = window.__assign(module, \\"LazyCC\\", 5);
 
 let DoubleLazyCC = window.__assign(module, \\"DoubleLazyCC\\", LazyCC);
 "

packages/babel-plugin-hot-reload/index.js

@@ -69,7 +69,29 @@ function isVariableCandidate(declaration) {
   );
 }
 
+function isAssignmentCandidate(assignment) {
+  return isIdentifierCandidate(assignment.left) && assignment.operator === '=';
+}
+
+function hotRegister(name, content) {
+  return {
+    type: 'CallExpression',
+    callee: {
+      type: 'MemberExpression',
+      object: { type: 'Identifier', name: 'window' },
+      property: { type: 'Identifier', name: '__assign' },
+      computed: false,
+    },
+    arguments: [
+      { type: 'Identifier', name: 'module' },
+      { type: 'StringLiteral', value: name },
+      content,
+    ],
+  };
+}
+
 function hotDeclare(path) {
+  console.log('replacing', path.node.id);
   path.replaceWith({
     type: 'VariableDeclarator',
     id: {
@@ -131,6 +153,29 @@ module.exports = function({ types }) {
           },
         });
       },
+      ExpressionStatement(path) {
+        if (path.parent.type !== 'Program') {
+          // Only traverse top level variable declaration
+          return;
+        }
+        if (this.file.code.includes('no-hot')) {
+          return;
+        }
+
+        path.traverse({
+          AssignmentExpression(path) {
+            if (isAssignmentCandidate(path.node)) {
+              if (!isHotCall(path.node.right)) {
+                console.log('replacing', path.node.left.name);
+                path.node.right = hotRegister(
+                  path.node.left.name,
+                  path.node.right
+                );
+              }
+            }
+          },
+        });
+      },
     },
   };
 };