[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/__snapshots__/fixtures.test.js.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`hot-reload single default: single default 1`] = `
+"
+import React from 'react';
+import Hello from './Hello';
+import Layout from './Layout';
+import './App.css';
+
+export default function App({ children }) {
+  return (
+    <Layout>
+      <Hello />
+    </Layout>
+  );
+}
+
+module.hot.accept(['./Layout', './Hello'], window.__invalidate);
+
+      ↓ ↓ ↓ ↓ ↓ ↓
+
+import React from 'react';
+import Hello from './Hello';
+import Layout from './Layout';
+import './App.css';
+
+let App = window.__assign(module, \\"App\\", function App({
+  children
+}) {
+  return <Layout>
+      <Hello />
+    </Layout>;
+});
+
+export default App;
+module.hot.accept(['./Layout', './Hello'], window.__invalidate);
+"
+`;

packages/babel-plugin-hot-reload/tests/fixtures/single-default-export.js

+import React from 'react';
+import Hello from './Hello';
+import Layout from './Layout';
+import './App.css';
+
+export default function App({ children }) {
+  return (
+    <Layout>
+      <Hello />
+    </Layout>
+  );
+}
+
+module.hot.accept(['./Layout', './Hello'], window.__invalidate);

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

+'use strict';
+
+const pluginTester = require('babel-plugin-tester');
+const hotReload = require('..');
+const path = require('path');
+
+pluginTester({
+  plugin: hotReload,
+  filename: __filename,
+  babelOptions: {
+    parserOpts: { plugins: ['jsx'] },
+    generatorOpts: {},
+    babelrc: false,
+  },
+  snapshot: true,
+  tests: [
+    {
+      title: 'single default',
+      fixture: path.join(__dirname, 'fixtures', 'single-default-export.js'),
+      snapshot: true,
+    },
+  ],
+});

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

 'use strict';
 
-const template = require('babel-template');
-
 function functionReturnsElement(path) {
   const { body } = path.body;
   const last = body[body.length - 1];
@@ -15,119 +13,81 @@ function functionReturnsElement(path) {
   return true;
 }
 
-function hoistFunctionalComponentToWindow(
-  t,
-  name,
-  generatedName,
-  params,
-  body
-) {
-  return template(
-    `
-    window[GEN_NAME] = function NAME(PARAMS) {
-      BODY
-    }
-    `
-  )({
-    GEN_NAME: t.StringLiteral(generatedName),
-    NAME: t.Identifier(`__hot__${name}__`),
-    PARAMS: params,
-    BODY: body,
-  });
-}
-
-function decorateFunctionName(t, name, generatedName) {
-  return template(
-    `
-    try {
-      Object.defineProperty(window[GEN_NAME], 'name', {
-        value: NAME
-      });
-    } catch (_ignored) {}
-    `
-  )({
-    GEN_NAME: t.StringLiteral(generatedName),
-    NAME: t.StringLiteral(name),
-  });
+function hotAssign(name, func) {
+  return [
+    {
+      type: 'VariableDeclaration',
+      kind: 'let',
+      declarations: [
+        {
+          type: 'VariableDeclarator',
+          id: { type: 'Identifier', name: name },
+          init: {
+            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 },
+              func,
+            ],
+          },
+        },
+      ],
+    },
+    {
+      type: 'ExportDefaultDeclaration',
+      declaration: { type: 'Identifier', name: name },
+    },
+  ];
 }
 
-function exportHoistedFunctionCallProxy(t, name, generatedName) {
-  return template(
-    `
-    export default function NAME() {
-      var result = window[GEN_NAME].apply(this, arguments);
-      window.__renderHook(NAME);
-      return result;
+function getExportDefaultDeclaration(t) {
+  return function ExportDefaultDeclaration(path) {
+    const { type } = path.node.declaration;
+    if (
+      type !== 'FunctionDeclaration' ||
+      !functionReturnsElement(path.node.declaration)
+    ) {
+      return;
     }
-    `,
-    { sourceType: 'module' }
-  )({
-    GEN_NAME: t.StringLiteral(generatedName),
-    NAME: t.Identifier(name),
-  });
-}
+    const {
+      id: { name },
+    } = path.node.declaration;
+    path.replaceWithMultiple(hotAssign(name, path.node.declaration));
 
-function decorateFunctionId(t, name, generatedName) {
-  return template(
-    `
-    try {
-      Object.defineProperty(NAME, '__hot__id', {
-        value: GEN_NAME
-      });
-    } catch (_ignored) {}
-    `
-  )({
-    GEN_NAME: t.StringLiteral(generatedName),
-    NAME: t.Identifier(name),
-  });
-}
+    // const generatedName = `__hot__${state.file.opts.filename}$$${name}`;
 
-module.exports = function({ types: t }) {
-  return { visitor: {} };
+    // path.replaceWithMultiple([
+    //   hoistFunctionalComponentToWindow(t, name, generatedName, params, body),
+    //   decorateFunctionName(t, name, generatedName),
+    //   exportHoistedFunctionCallProxy(t, name, generatedName),
+    //   decorateFunctionId(t, name, generatedName),
+    //   template(
+    //     `
+    //   module.hot.accept();
+    //   `
+    //   )(),
+    //   template(
+    //     `
+    //   module.hot.dispose(() => {
+    //     setTimeout(() => window.__enqueueForceUpdate(NAME));
+    //   });
+    //   `
+    //   )({ NAME: t.Identifier(name) }),
+    // ]);
+  };
+}
 
+module.exports = function({ types }) {
   return {
+    name: 'hot-reload',
     visitor: {
-      ExportDefaultDeclaration(path, state) {
-        const { type } = path.node.declaration;
-        if (
-          type !== 'FunctionDeclaration' ||
-          !functionReturnsElement(path.node.declaration)
-        ) {
-          return;
-        }
-        const {
-          id: { name },
-          params,
-          body,
-        } = path.node.declaration;
-
-        const generatedName = `__hot__${state.file.opts.filename}$$${name}`;
-
-        path.replaceWithMultiple([
-          hoistFunctionalComponentToWindow(
-            t,
-            name,
-            generatedName,
-            params,
-            body
-          ),
-          decorateFunctionName(t, name, generatedName),
-          exportHoistedFunctionCallProxy(t, name, generatedName),
-          decorateFunctionId(t, name, generatedName),
-          template(
-            `
-            module.hot.accept();
-            `
-          )(),
-          template(
-            `
-            module.hot.dispose(() => {
-              setTimeout(() => window.__enqueueForceUpdate(NAME));
-            });
-            `
-          )({ NAME: t.Identifier(name) }),
-        ]);
-      },
+      ExportDefaultDeclaration: getExportDefaultDeclaration(types),
     },
   };
 };

packages/babel-plugin-hot-reload/package.json

@@ -7,7 +7,12 @@
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "license": "BSD-3-Clause",
-  "dependencies": {
-    "babel-template": "6.24.1"
+  "dependencies": {},
+  "devDependencies": {
+    "@babel/core": "^7.2.0",
+    "@babel/template": "^7.1.2",
+    "babel-core": "7.0.0-bridge.0",
+    "babel-plugin-tester": "^5.5.2",
+    "jest": "^23.6.0"
   }
 }