From eeaf4e659047caca77166429cdb95acb3511d590 Mon Sep 17 00:00:00 2001
From: Steve Sanderson <SteveSandersonMS@users.noreply.github.com>
Date: Wed, 17 May 2017 21:37:47 +0100
Subject: [PATCH] Update ReactSpa to React Hot Loader 3. Remove babel
 dependency.

---
 templates/ReactSpa/.babelrc             |  3 ---
 templates/ReactSpa/ClientApp/boot.tsx   | 30 +++++++++++++++++++------
 templates/ReactSpa/ClientApp/routes.tsx |  8 +------
 templates/ReactSpa/package.json         |  8 +++----
 templates/ReactSpa/tsconfig.json        |  5 +++--
 templates/ReactSpa/webpack.config.js    |  1 -
 6 files changed, 30 insertions(+), 25 deletions(-)
 delete mode 100644 templates/ReactSpa/.babelrc

diff --git a/templates/ReactSpa/.babelrc b/templates/ReactSpa/.babelrc
deleted file mode 100644
index 86c445f..0000000
--- a/templates/ReactSpa/.babelrc
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "presets": ["es2015", "react"]
-}
diff --git a/templates/ReactSpa/ClientApp/boot.tsx b/templates/ReactSpa/ClientApp/boot.tsx
index 1d15e40..3b2debf 100644
--- a/templates/ReactSpa/ClientApp/boot.tsx
+++ b/templates/ReactSpa/ClientApp/boot.tsx
@@ -2,12 +2,28 @@ import './css/site.css';
 import 'bootstrap';
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
+import { AppContainer } from 'react-hot-loader';
 import { BrowserRouter } from 'react-router-dom';
-import routes from './routes';
+import * as RoutesModule from './routes';
+let routes = RoutesModule.routes;
 
-// This code starts up the React app when it runs in a browser. It sets up the routing configuration
-// and injects the app into a DOM element.
-ReactDOM.render(
-    <BrowserRouter children={ routes } />,
-    document.getElementById('react-app')
-);
+function renderApp() {
+    // This code starts up the React app when it runs in a browser. It sets up the routing
+    // configuration and injects the app into a DOM element.
+    ReactDOM.render(
+        <AppContainer>
+            <BrowserRouter children={ routes } />
+        </AppContainer>,
+        document.getElementById('react-app')
+    );
+}
+
+renderApp();
+
+// Allow Hot Module Replacement
+if (module.hot) {
+    module.hot.accept('./routes', () => {
+        routes = require<typeof RoutesModule>('./routes').routes;
+        renderApp();
+    });
+}
diff --git a/templates/ReactSpa/ClientApp/routes.tsx b/templates/ReactSpa/ClientApp/routes.tsx
index dfacf05..22fd32e 100644
--- a/templates/ReactSpa/ClientApp/routes.tsx
+++ b/templates/ReactSpa/ClientApp/routes.tsx
@@ -5,14 +5,8 @@ import { Home } from './components/Home';
 import { FetchData } from './components/FetchData';
 import { Counter } from './components/Counter';
 
-export default <Layout>
+export const routes = <Layout>
     <Route exact path='/' component={ Home } />
     <Route path='/counter' component={ Counter } />
     <Route path='/fetchdata' component={ FetchData } />
 </Layout>;
-
-// Allow Hot Module Reloading
-declare var module: any;
-if (module.hot) {
-    module.hot.accept();
-}
diff --git a/templates/ReactSpa/package.json b/templates/ReactSpa/package.json
index ee1272e..c38c79d 100644
--- a/templates/ReactSpa/package.json
+++ b/templates/ReactSpa/package.json
@@ -6,13 +6,10 @@
     "@types/react": "^0.14.38",
     "@types/react-dom": "^0.14.17",
     "@types/react-router": "^2.0.38",
+    "@types/webpack-env": "^1.13.0",
     "aspnet-webpack": "^1.0.27",
-    "aspnet-webpack-react": "^1.0.4",
+    "aspnet-webpack-react": "^2.0.0",
     "awesome-typescript-loader": "^3.0.0",
-    "babel-core": "^6.17.0",
-    "babel-loader": "^6.2.5",
-    "babel-preset-es2015": "^6.16.0",
-    "babel-preset-react": "^6.16.0",
     "bootstrap": "^3.3.6",
     "css-loader": "^0.25.0",
     "event-source-polyfill": "^0.0.7",
@@ -23,6 +20,7 @@
     "json-loader": "^0.5.4",
     "react": "~15.4.0",
     "react-dom": "~15.4.0",
+    "react-hot-loader": "3.0.0-beta.7",
     "react-router-dom": "^4.0.0",
     "style-loader": "^0.13.1",
     "typescript": "^2.2.1",
diff --git a/templates/ReactSpa/tsconfig.json b/templates/ReactSpa/tsconfig.json
index 7488111..cd7432a 100644
--- a/templates/ReactSpa/tsconfig.json
+++ b/templates/ReactSpa/tsconfig.json
@@ -2,10 +2,11 @@
   "compilerOptions": {
     "baseUrl": ".",
     "moduleResolution": "node",
-    "target": "es6",
-    "jsx": "preserve",
+    "target": "es5",
+    "jsx": "react",
     "sourceMap": true,
     "skipDefaultLibCheck": true,
+    "types": [ "webpack-env" ],
     "paths": {
       // Fix "Duplicate identifier" errors caused by multiple dependencies fetching their own copies of type definitions.
       // We tell TypeScript which type definitions module to treat as the canonical one (instead of combining all of them).
diff --git a/templates/ReactSpa/webpack.config.js b/templates/ReactSpa/webpack.config.js
index a54d5ce..e2254d6 100644
--- a/templates/ReactSpa/webpack.config.js
+++ b/templates/ReactSpa/webpack.config.js
@@ -17,7 +17,6 @@ module.exports = (env) => {
         },
         module: {
             rules: [
-                { test: /\.ts(x?)$/, include: /ClientApp/, use: { loader: 'babel-loader', options: { cacheDirectory: true } } },
                 { test: /\.tsx?$/, include: /ClientApp/, use: 'awesome-typescript-loader?silent=true' },
                 { test: /\.css$/, use: isDevBuild ? ['style-loader', 'css-loader'] : ExtractTextPlugin.extract({ use: 'css-loader?minimize' }) },
                 { test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' }