Upgrade react-scripts

frontend/package.json

@@ -10,7 +10,6 @@
     "graphql-tag": "^2.0.0",
     "loadash": "^0.0.1",
     "prop-types": "^15.5.9",
-    "proxyquire": "^1.7.11",
     "react": "^15.5.4",
     "react-apollo": "^1.2.0",
     "react-dom": "^15.5.4",
@@ -21,17 +20,17 @@
     "redux-actions": "^2.0.3",
     "redux-form": "^6.7.0",
     "reselect": "^3.0.1",
-    "rewire": "^2.5.2",
     "simple-statistics": "^4.1.0",
     "styled-components": "^1.4.6"
   },
   "devDependencies": {
-    "react-scripts": "0.9.5"
+    "react-scripts": "^1.0.5"
   },
   "scripts": {
-    "start": "PORT=3069 node scripts/customized-config start",
+    "start": "PORT=3069 react-scripts start",
-    "build": "node scripts/customized-config build",
+    "build": "node react-scripts build",
-    "test": "node scripts/customized-config test --env=jsdom",
+    "test": "node react-scripts test --env=jsdom",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "install": "node scripts/postinstall"
   }
 }

frontend/scripts/config-overrides.dev.js

@@ -1,69 +0,0 @@
-const fs = require('fs');
-const path = require('path');
-const paths = require('./paths');
-
-const {
-  ROOT,
-  MODULES,
-  FRONTEND,
-  UI,
-  STATIC
-} = paths;
-
-module.exports = function(config) {
-  // Add support for loading .graphql files
-  config.module.loaders[0].exclude.push(/\.(graphql|gql)$/);
-
-  const loaders = config.module.loaders.reduce((loaders, loader) => {
-    if(loader.loader === 'babel') {
-      loaders.push({
-        test: loader.test,
-        include: loader.include,
-        loader: loader.loader,
-        query: {
-          babelrc: false,
-          presets: [require.resolve('babel-preset-react-app')],
-          plugins: [["inline-react-svg", {
-            "ignorePattern": "libre-franklin"
-          }]],
-          cacheDirectory: true
-        }
-      })
-    }
-    else {
-      loaders.push(loader);
-    }
-    return loaders;
-  }, []);
-
-  config.module.loaders = loaders;
-
-  config.module.loaders.push({
-    test: /\.(graphql|gql)$/,
-    exclude: /node_modules/,
-    loader: require.resolve('graphql-tag/loader'),
-  });
-
-  config.resolveLoader.modules = MODULES;
-
-  config.resolve.modules = MODULES;
-
-  config.resolve.alias = Object.assign({}, config.resolve.alias, fs.readdirSync(FRONTEND)
-    .map((name) => path.join(FRONTEND, name))
-    .filter((fullpath) => fs.statSync(fullpath).isDirectory())
-    .reduce((aliases, fullpath) => Object.assign(aliases, {
-      [`@${path.basename(fullpath)}`]: fullpath
-    }), {
-      '@root': FRONTEND,
-      '@ui': UI
-    }));
-
-  config.module.loaders = config.module.loaders.map((loader) => {
-    if(loader.include) {
-      return Object.assign({}, loader, {include: [loader.include, UI]});
-    }
-    return loader;
-  });
-
-  return config;
-}

frontend/scripts/customized-config.js

@@ -1,72 +0,0 @@
-/*
-  This module runs the scripts from react-scripts (Create React App)
-  and gives an opportunity to override the Webpack config by creating
-  a "config-overrides.dev.js" or "config-overrides.prod.js" file in the
-  root of the project.
-
-  The config-override file should export a single function that takes a
-  config and returns the modified config, like this:
-
-  module.exports = function(webpackConfig) {
-    return webpackConfig;
-  };
-*/
-var rewire = require('rewire');
-var proxyquire = require('proxyquire');
-
-switch(process.argv[2]) {
-  // The "start" script is run during development mode
-  case 'start':
-    rewireModule('react-scripts/scripts/start.js', loadCustomizer('./config-overrides.dev'));
-    break;
-  // The "build" script is run to produce a production bundle
-  case 'build':
-    rewireModule('react-scripts/scripts/build.js', loadCustomizer('./config-overrides.prod'));
-    break;
-  // The "test" script runs all the tests with Jest
-  case 'test':
-    // Load customizations from the config-overrides.testing file.
-    // That file should export a single function that takes a config and returns a config
-    let customizer = loadCustomizer('./config-overrides.testing');
-    proxyquire('react-scripts/scripts/test.js', {
-      // When test.js asks for '../utils/createJestConfig' it will get this instead:
-      '../utils/createJestConfig': (...args) => {
-        // Use the existing createJestConfig function to create a config, then pass
-        // it through the customizer
-        var createJestConfig = require('react-scripts/utils/createJestConfig');
-        return customizer(createJestConfig(...args));
-      }
-    });
-    break;
-  default:
-    console.log('customized-config only supports "start", "build", and "test" options.');
-    process.exit(-1);
-}
-
-// Attempt to load the given module and return null if it fails.
-function loadCustomizer(module) {
-  try {
-    return require(module);
-  } catch(e) {
-    if(e.code !== "MODULE_NOT_FOUND") {
-      throw e;
-    }
-  }
-
-  // If the module doesn't exist, return a
-  // noop that simply returns the config it's given.
-  return config => config;
-}
-
-function rewireModule(modulePath, customizer) {
-  // Load the module with `rewire`, which allows modifying the
-  // script's internal variables.
-  let defaults = rewire(modulePath);
-
-  // Reach into the module, grab its global 'config' variable,
-  // pass it through the customizer function, and then set it back.
-  // 'config' is Create React App's built-in Webpack config.
-  let config = defaults.__get__('config');
-  config = customizer(Object.assign({}, config));
-  defaults.__set__('config', config);
-}

frontend/scripts/paths.js

@@ -1,22 +0,0 @@
-const path = require('path');
-
-const ROOT = path.join(__dirname, '../..');
-const UI = path.join(ROOT, 'ui');
-const FRONTEND = process.env.NODE_ENV === 'production'
-  ? path.join(__dirname, '../')
-  : path.join(ROOT, 'frontend');
-
-module.exports = {
-  ROOT,
-  MODULES: [
-    path.join(FRONTEND, 'node_modules'),
-    path.join(UI, 'node_modules'),
-    'node_modules'
-  ],
-  FRONTEND: path.join(FRONTEND, 'src'),
-  UI: process.env.NODE_ENV === 'production'
-    ? path.join(FRONTEND, 'node_modules', '@tomgco/joyent-portal-ui', 'dist')
-    : path.join(UI, 'src'),
-  STATIC: path.join(FRONTEND, 'static'),
-  ESLINT: path.join(__dirname, '.eslintrc')
-};

frontend/scripts/postinstall.js

@@ -0,0 +1,35 @@
+const fs = require('fs');
+const path = require('path');
+
+// TODO: this will need to happen for prod and test too
+const configPath = path.join(__dirname, '../node_modules/react-scripts/config/webpack.config.dev.js');
+const orignalConfigPath = path.join(__dirname, '../node_modules/react-scripts/config/webpack.config.dev.original.js');
+const enhancedConfigPath = path.join(__dirname, './webpack.config.dev.js');
+
+// bit of healthy callback hell for making it spicy
+fs.readFile(configPath, (error, orignalConfig) => {
+  if(error) {
+    console.log('Original config read error', error);
+  }
+  else {
+    fs.writeFile(orignalConfigPath, orignalConfig, (error) => {
+      if(error) {
+        console.log('Original config write error', error);
+      }
+      else {
+        fs.readFile(enhancedConfigPath, (error, enhancedConfig) => {
+          if(error) {
+            console.log('Enhanced config read error', error);
+          }
+          else {
+            fs.writeFile(configPath, enhancedConfig, (error) => {
+              if(error) {
+                console.log('Enhanced config write error', error);
+              }
+            })
+          }
+        })
+      }
+    })
+  }
+})

frontend/scripts/webpack.config.dev.js

@@ -0,0 +1,111 @@
+// @remove-on-eject-begin
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ */
+// @remove-on-eject-end
+'use strict';
+
+const fs = require('fs');
+const path = require('path');
+const paths = require('./paths');
+const originalConfig = require('./webpack.config.dev.original');
+
+const ROOT = path.join(__dirname, '../../../..');
+const UI_ROOT = path.join(ROOT, 'ui');
+const FRONTEND_ROOT = process.env.NODE_ENV === 'production'
+  ? path.join(__dirname, '../')
+  : path.join(ROOT, 'frontend');
+
+const MODULES = [
+  path.join(FRONTEND_ROOT, 'node_modules'),
+  path.join(UI_ROOT, 'node_modules'),
+  'node_modules'
+];
+const FRONTEND = path.join(FRONTEND_ROOT, 'src'); // duplicate
+const UI = process.env.NODE_ENV === 'production'
+  ? path.join(FRONTEND_ROOT, 'node_modules', '@tomgco/joyent-portal-ui', 'dist')
+  : path.join(UI_ROOT, 'src'); // also duplicate
+const STATIC = path.join(FRONTEND_ROOT, 'static');
+const ESLINT = path.join(__dirname, '.eslintrc');
+
+// module.exports = originalConfig;
+
+// module.exports = function() {
+
+  console.log('originalConfig = ', originalConfig);
+  // return originalConfig;
+
+  // config.module.rules[1].exclude.push(/\.(graphql|gql)$/);
+
+  const rules = originalConfig.module.rules.reduce((loaders, loader, index) => {
+    if(loader.test === /\.(js|jsx)$/) {
+      loaders.push({
+        test: loader.test,
+        include: [loader.include, UI],
+        loader: loader.loader,
+        options: {
+          babelrc: false,
+          presets: [require.resolve('babel-preset-react-app')],
+          plugins: [['inline-react-svg', {
+            ignorePattern: 'libre-franklin'
+          }]],
+          cacheDirectory: true
+        }
+      })
+    }
+    else if(index === 1) {
+      loaders.push({
+        exclude: loader.exclude.concat([/\.(graphql|gql)$/]),
+        loader: loader.loader,
+        options: loader.options
+      })
+    }
+    else if(loader.include) {
+      loaders.push(Object.assign({}, loader, {include: [loader.include, UI]}));
+    }
+    else {
+      loaders.push(loader);
+    }
+    return loaders;
+  }, []);
+
+  rules.push({
+    test: /\.(graphql|gql)$/,
+    exclude: /node_modules/,
+    loader: require.resolve('graphql-tag/loader')
+  });
+
+  const aliases = Object.assign({}, originalConfig.resolve.alias, fs.readdirSync(FRONTEND)
+    .map((name) => path.join(FRONTEND, name))
+    .filter((fullpath) => fs.statSync(fullpath).isDirectory())
+    .reduce((aliases, fullpath) => Object.assign(aliases, {
+      [`@${path.basename(fullpath)}`]: fullpath
+    }), {
+      '@root': FRONTEND,
+      '@ui': UI
+    }));
+
+  const resolveModules = originalConfig.resolve.modules.concat(MODULES);
+
+  originalConfig.module.rules = rules;
+  originalConfig.resolve.alias = aliases;
+  originalConfig.resolve.modules = resolveModules;
+  originalConfig.resolve.plugins = [];
+
+  module.exports = originalConfig;
+
+  // return originalConfig;
+
+  // resolves
+  // config.resolveLoader.modules = MODULES;
+
+  // config.resolve.modules = MODULES;
+
+  // set rules and return
+
+// }