[WIP] Hot reloading (only for Hooks)

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

@@ -0,0 +1,208 @@
+'use strict';
+const sysPath = require('path');
+const fs = require('fs');
+
+function functionReturnsElement(path) {
+  const { body } = path.body;
+  const last = body[body.length - 1];
+  if (typeof last !== 'object' || last.type !== 'ReturnStatement') {
+    return false;
+  }
+  const { type: returnType } = last.argument;
+  if (returnType !== 'JSXElement') {
+    return false;
+  }
+  return true;
+}
+
+function hotAssign(types, name, func) {
+  return [
+    types.variableDeclaration('var', [
+      types.variableDeclarator(
+        types.identifier(name),
+        hotRegister(types, name, func)
+      ),
+    ]),
+    types.exportDefaultDeclaration({ type: 'Identifier', name: name }),
+  ];
+}
+
+function isHotCall(call) {
+  return (
+    call &&
+    call.type === 'CallExpression' &&
+    call.callee.type === 'MemberExpression' &&
+    call.callee.object.name === 'window' &&
+    call.callee.property.name === '__assign'
+  );
+}
+
+function isIdentifierCandidate(identifier) {
+  return (
+    identifier.type === 'Identifier' &&
+    identifier.name[0] >= 'A' &&
+    identifier.name[0] <= 'Z'
+  );
+}
+
+function isVariableCandidate(declaration) {
+  return (
+    isIdentifierCandidate(declaration.id) &&
+    declaration.init &&
+    !isHotCall(declaration.init)
+  );
+}
+
+function isAssignmentCandidate(assignment) {
+  return isIdentifierCandidate(assignment.left) && assignment.operator === '=';
+}
+
+function hotRegister(t, name, content) {
+  if (t.isFunctionDeclaration(content)) {
+    content.type = 'FunctionExpression'; // TODO: why do we have to do this hack?
+  }
+  return t.callExpression(
+    t.memberExpression(t.identifier('window'), t.identifier('__assign')),
+    [t.identifier('module'), t.stringLiteral(name), content]
+  );
+}
+
+function hotDeclare(types, path) {
+  path.replaceWith(
+    types.variableDeclarator(
+      types.identifier(path.node.id.name),
+      hotRegister(types, path.node.id.name, path.node.init)
+    )
+  );
+}
+
+function isFile(path) {
+  try {
+    const stats = fs.lstatSync(path);
+    return stats.isFile();
+  } catch (err) {
+    if (err.code === 'ENOENT') {
+      return false;
+    }
+    throw err;
+  }
+}
+
+function naiveResolve(path, exts = ['js', 'jsx', 'ts', 'tsx']) {
+  return [path, ...exts.map(ext => path + '.' + ext)].find(isFile) || null;
+}
+
+function shouldReloadFile(file) {
+  // TODO: this is really naive
+  const contents = fs.readFileSync(file, 'utf8');
+  return contents.includes('React');
+}
+
+module.exports = function({ types }) {
+  return {
+    name: 'hot-reload',
+    visitor: {
+      ImportDeclaration(path) {
+        if (this.file.code.includes('no-hot')) {
+          return;
+        }
+
+        if (!types.isStringLiteral(path.node.source)) {
+          return;
+        }
+
+        const target = path.node.source.value;
+        if (!target.startsWith('.')) {
+          return;
+        }
+
+        const file = naiveResolve(
+          sysPath.resolve(sysPath.dirname(this.file.opts.filename), target)
+        );
+        if (file == null) {
+          return;
+        }
+
+        if (shouldReloadFile(file)) {
+          path.insertAfter(
+            types.expressionStatement(
+              types.callExpression(
+                types.memberExpression(
+                  types.memberExpression(
+                    types.identifier('module'),
+                    types.identifier('hot')
+                  ),
+                  types.identifier('accept')
+                ),
+                [
+                  types.stringLiteral(target),
+                  types.memberExpression(
+                    types.identifier('window'),
+                    types.identifier('__invalidate')
+                  ),
+                ]
+              )
+            )
+          );
+        }
+      },
+      ExportDefaultDeclaration(path) {
+        if (this.file.code.includes('no-hot')) {
+          return;
+        }
+
+        const { type } = path.node.declaration;
+        if (
+          type !== 'FunctionDeclaration' ||
+          !functionReturnsElement(path.node.declaration)
+        ) {
+          return;
+        }
+        const {
+          id: { name },
+        } = path.node.declaration;
+        path.replaceWithMultiple(hotAssign(types, name, path.node.declaration));
+      },
+      VariableDeclaration(path) {
+        if (path.parent.type !== 'Program') {
+          // Only traverse top level variable declaration
+          return;
+        }
+        if (this.file.code.includes('no-hot')) {
+          return;
+        }
+
+        path.traverse({
+          VariableDeclarator(path) {
+            if (isVariableCandidate(path.node)) {
+              hotDeclare(types, path);
+            }
+          },
+        });
+      },
+      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)) {
+                path.node.right = hotRegister(
+                  types,
+                  path.node.left.name,
+                  path.node.right
+                );
+              }
+            }
+          },
+        });
+      },
+    },
+  };
+};

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

@@ -0,0 +1,18 @@
+{
+  "name": "babel-plugin-hot-reload",
+  "version": "0.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "license": "BSD-3-Clause",
+  "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"
+  }
+}

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

@@ -0,0 +1,4 @@
+let LazyCC;
+LazyCC = 5;
+
+let DoubleLazyCC = LazyCC;

packages/babel-plugin-hot-reload/tests/__fixtures__/components/Hello.js

@@ -0,0 +1,5 @@
+import React from 'react';
+
+export default class extends React.Component {
+  render() {}
+}

packages/babel-plugin-hot-reload/tests/__fixtures__/components/Layout.js

@@ -0,0 +1,5 @@
+import React from 'react';
+
+export default class extends React.Component {
+  render() {}
+}

packages/babel-plugin-hot-reload/tests/__fixtures__/default-export-class.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import Hello from './components/Hello';
+
+export default class App extends React.Component {
+  render() {
+    return <Hello />;
+  }
+}

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import Hello from './components/Hello';
+import Layout from './components/Layout';
+import './App.css';
+
+export default function App({ children }) {
+  return (
+    <Layout>
+      <Hello />
+    </Layout>
+  );
+}

packages/babel-plugin-hot-reload/tests/__fixtures__/empty-variable.js

@@ -0,0 +1,2 @@
+// no-snap
+let LazyCC;

packages/babel-plugin-hot-reload/tests/__fixtures__/lazy-component.js

@@ -0,0 +1,2 @@
+import { lazy } from 'react';
+const LazyCC = lazy(() => import('./CounterClass'));

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

@@ -0,0 +1,91 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+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);
+"
+`;
+
+exports[`hot-reload default export class: default export class 1`] = `
+"
+import React from 'react';
+import Hello from './components/Hello';
+
+export default class App extends React.Component {
+  render() {
+    return <Hello />;
+  }
+}
+
+      ↓ ↓ ↓ ↓ ↓ ↓
+
+import React from 'react';
+import Hello from './components/Hello';
+module.hot.accept(\\"./components/Hello\\", window.__invalidate);
+export default class App extends React.Component {
+  render() {
+    return <Hello />;
+  }
+
+}
+"
+`;
+
+exports[`hot-reload default export: default export 1`] = `
+"
+import React from 'react';
+import Hello from './components/Hello';
+import Layout from './components/Layout';
+import './App.css';
+
+export default function App({ children }) {
+  return (
+    <Layout>
+      <Hello />
+    </Layout>
+  );
+}
+
+      ↓ ↓ ↓ ↓ ↓ ↓
+
+import React from 'react';
+import Hello from './components/Hello';
+module.hot.accept(\\"./components/Hello\\", window.__invalidate);
+import Layout from './components/Layout';
+module.hot.accept(\\"./components/Layout\\", window.__invalidate);
+import './App.css';
+
+var App = window.__assign(module, \\"App\\", function App({
+  children
+}) {
+  return <Layout>
+      <Hello />
+    </Layout>;
+});
+
+export default App;
+"
+`;
+
+exports[`hot-reload lazy component: lazy component 1`] = `
+"
+import { lazy } from 'react';
+const LazyCC = lazy(() => import('./CounterClass'));
+
+      ↓ ↓ ↓ ↓ ↓ ↓
+
+import { lazy } from 'react';
+
+const LazyCC = window.__assign(module, \\"LazyCC\\", lazy(() => import('./CounterClass')));
+"
+`;

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

@@ -0,0 +1,26 @@
+'use strict';
+
+const pluginTester = require('babel-plugin-tester');
+const hotReload = require('..');
+const path = require('path');
+const fs = require('fs');
+
+pluginTester({
+  plugin: hotReload,
+  filename: __filename,
+  babelOptions: {
+    parserOpts: { plugins: ['jsx', 'dynamicImport'] },
+    generatorOpts: {},
+    babelrc: false,
+  },
+  snapshot: true,
+  tests: fs
+    .readdirSync(path.join(__dirname, '__fixtures__'))
+    .map(entry => path.join(__dirname, '__fixtures__', entry))
+    .filter(entry => fs.lstatSync(entry).isFile() && entry.endsWith('js'))
+    .map(file => ({
+      title: path.basename(file, '.js').replace(/-/g, ' '),
+      snapshot: !fs.readFileSync(file, 'utf8').includes('no-snap'),
+      fixture: file,
+    })),
+});