feat: backport React.Fresh

gaearon · Jun 10, 2019 · e5c4bb4 · e5c4bb4
1 parent 1023b98
commit e5c4bb4
Show file tree

Hide file tree

Showing 9 changed files with 1,105 additions and 6 deletions.
diff --git a/examples/styled-components/src/App.js b/examples/styled-components/src/App.js
@@ -51,11 +51,13 @@ const Hook = () => {
     () => {
       console.log('hot effected 0');
       setState(state => ({
-        x: state.x + 0.1,
+        x: state.x + 0.5,
       }));
     },
     ['hot'],
   );
+
+  //React.useState(0);
   return (
     <div>
       hook state 1: {state.x}

diff --git a/examples/styled-components/webpack.config.babel.js b/examples/styled-components/webpack.config.babel.js
@@ -6,7 +6,7 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
 module.exports = {
   entry: ['./src/index'],
   mode: process.env.NODE_ENV || 'development',
-  devtool: false,
+  //devtool: false,
   output: {
     path: path.join(__dirname, 'dist'),
     filename: 'bundle.js',

diff --git a/src/babel.dev.js b/src/babel.dev.js
@@ -1,4 +1,5 @@
 import { REGENERATE_METHOD } from './internal/constants';
+import fresh from './fresh/babel';
 
 const templateOptions = {
   placeholderPattern: /^([A-Z0-9]+)([A-Z0-9_]+)$/,
@@ -10,9 +11,10 @@ const shouldIgnoreFile = file =>
     .split('\\')
     .join('/')
     .match(/node_modules\/(react|react-hot-loader)([\/]|$)/);
+
 /* eslint-enable */
 
-module.exports = function plugin(args, options = {}) {
+function plugin(args, options = {}) {
   // This is a Babel plugin, but the user put it in the Webpack config.
   if (this && this.callback) {
     throw new Error(
@@ -30,6 +32,12 @@ module.exports = function plugin(args, options = {}) {
   const { safetyNet = true } = options;
 
   const buildRegistration = template('reactHotLoader.register(ID, NAME, FILENAME);', templateOptions);
+
+  const signatureHeader = template(
+    `var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signature : function (a) {return a;}`,
+    templateOptions,
+  );
+
   const headerTemplate = template(
     `(function () {
        var enterModule = (typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal : require('react-hot-loader')).enterModule;
@@ -53,7 +61,7 @@ module.exports = function plugin(args, options = {}) {
     `    
 (function () {  
   
-  var reactHotLoader = (typeof reactHotLoaderGlobal !== 'undefined' ?reactHotLoaderGlobal : require('react-hot-loader')).default;
+  var reactHotLoader = (typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal : require('react-hot-loader')).default;
   
   if (!reactHotLoader) {
     return;
@@ -119,10 +127,12 @@ module.exports = function plugin(args, options = {}) {
       },
 
       Program: {
-        enter({ scope }, state) {
+        enter({ scope, node }, state) {
           const { file } = state;
           state[REGISTRATIONS] = []; // eslint-disable-line no-param-reassign
 
+          node.body.unshift(signatureHeader());
+
           // Everything in the top level scope, when reasonable,
           // is going to get tagged with __source.
           /* eslint-disable guard-for-in,no-restricted-syntax */
@@ -208,6 +218,54 @@ module.exports = function plugin(args, options = {}) {
       },
     },
   };
+}
+
+const mergeRecord = (sourceRecord, newRecord) => {
+  Object.keys(newRecord).forEach(key => {
+    const action = newRecord[key];
+    if (typeof action === 'function') {
+      if (!sourceRecord[key]) {
+        sourceRecord[key] = () => ({});
+      }
+      const prev = sourceRecord[key];
+      sourceRecord[key] = (...args) => {
+        prev(...args);
+        action(...args);
+      };
+    } else if (typeof action === 'object') {
+      if (!sourceRecord[key]) {
+        sourceRecord[key] = {};
+      }
+      mergeRecord(sourceRecord[key], action);
+    }
+  });
+};
+
+const composePlugins = plugins => (...args) => {
+  const result = {};
+  plugins.forEach(creator => {
+    const plugin = creator(...args);
+    mergeRecord(result, plugin);
+  });
+  return result;
 };
 
+module.exports = composePlugins([
+  plugin,
+  (...args) => {
+    const p = fresh(...args);
+    // removing everything we dont want right now
+
+    // registration
+    delete p.visitor.Program;
+
+    // registrations
+    delete p.visitor.FunctionDeclaration.enter;
+    delete p.visitor.FunctionDeclaration.leave;
+    delete p.visitor.VariableDeclaration;
+
+    return p;
+  },
+]);
+
 module.exports.shouldIgnoreFile = shouldIgnoreFile;