Updating for spectacle 3.0

.babelrc

@@ -5,7 +5,8 @@
     "react"
   ],
   "plugins": [
-    "transform-decorators-legacy",
+    "react-hot-loader/babel",
+    "transform-decorators-legacy"
   ],
   "env": {
     "production": {
@@ -15,8 +16,8 @@
         "transform-react-constant-elements",
         "transform-react-inline-elements",
         "transform-runtime",
-        "transform-decorators-legacy",
-      ],
+        "transform-decorators-legacy"
+      ]
     },
     "test": {
       "plugins": [

index.js

@@ -1,6 +1,31 @@
 import React from "react";
-import { render } from "react-dom";
+import PropTypes from "prop-types";
+import ReactDOM from "react-dom";
+import { AppContainer } from "react-hot-loader";
+import Redbox from "redbox-react";
 
 import Presentation from "./presentation";
 
-render(<Presentation/>, document.getElementById("root"));
+const CustomErrorReporter = ({ error }) => <Redbox error={ error } />;
+
+CustomErrorReporter.propTypes = {
+  error: PropTypes.instanceOf(Error).isRequired
+};
+
+ReactDOM.render(
+  <AppContainer errorReporter={CustomErrorReporter}>
+    <Presentation />
+  </AppContainer>,
+  document.getElementById("root"),
+);
+
+if (module.hot) {
+  module.hot.accept("./presentation", () => {
+    const NextPresentation = require("./presentation").default;    ReactDOM.render(
+      <AppContainer errorReporter={CustomErrorReporter}>
+        <NextPresentation />
+      </AppContainer>,
+      document.getElementById("root"),
+    );
+  });
+}

package.json

@@ -13,50 +13,51 @@
   "author": "",
   "license": "MIT",
   "dependencies": {
-    "normalize.css": "3.0.3",
-    "react": "15.4.2",
-    "react-dom": "15.4.2",
-    "spectacle": "^2.0.0"
+    "normalize.css": "7.0.0",
+    "react": "^16.0.0",
+    "react-dom": "^16.0.0",
+    "spectacle": "^3.0.0"
   },
   "devDependencies": {
-    "babel-cli": "^6.16.0",
-    "babel-core": "^6.18.0",
-    "babel-eslint": "^7.0.0",
-    "babel-loader": "^6.2.5",
-    "babel-plugin-react-transform": "^2.0.0-beta1",
-    "babel-plugin-transform-decorators-legacy": "^1.2.0",
-    "babel-plugin-transform-react-constant-elements": "^6.4.0",
-    "babel-plugin-transform-react-inline-elements": "^6.4.0",
-    "babel-plugin-transform-react-remove-prop-types": "^0.2.1",
-    "babel-plugin-transform-runtime": "^6.4.3",
-    "babel-polyfill": "^6.16.0",
-    "babel-preset-es2015": "^6.18.0",
-    "babel-preset-react": "^6.3.13",
-    "babel-preset-stage-0": "^6.3.13",
-    "babel-runtime": "^6.18.0",
-    "cross-env": "^1.0.7",
-    "css-loader": "^0.23.0",
-    "eslint": "^3.8.0",
-    "eslint-config-formidable": "^2.0.1",
-    "eslint-plugin-filenames": "^1.1.0",
-    "eslint-plugin-import": "^2.0.1",
-    "eslint-plugin-react": "^6.4.1",
-    "express": "^4.13.3",
-    "file-loader": "^0.9.0",
-    "html-loader": "^0.4.0",
-    "is-buffer": "^1.1.1",
-    "markdown-loader": "^0.1.7",
-    "node-libs-browser": "^0.5.3",
-    "react-transform-catch-errors": "^1.0.0",
-    "react-transform-hmr": "^1.0.4",
-    "redbox-react": "^1.2.0",
+    "babel-cli": "^6.26.0",
+    "babel-core": "^6.26.0",
+    "babel-eslint": "^8.0.1",
+    "babel-loader": "^7.1.2",
+    "babel-plugin-react-transform": "^3.0.0",
+    "babel-plugin-transform-decorators-legacy": "^1.3.4",
+    "babel-plugin-transform-react-constant-elements": "^6.23.0",
+    "babel-plugin-transform-react-inline-elements": "^6.22.0",
+    "babel-plugin-transform-react-remove-prop-types": "^0.4.10",
+    "babel-plugin-transform-runtime": "^6.23.0",
+    "babel-polyfill": "^6.26.0",
+    "babel-preset-es2015": "^6.24.1",
+    "babel-preset-react": "^6.24.1",
+    "babel-preset-stage-0": "^6.24.1",
+    "babel-runtime": "^6.26.0",
+    "cross-env": "^5.1.0",
+    "css-loader": "^0.28.7",
+    "eslint": "^4.9.0",
+    "eslint-config-formidable": "^3.0.0",
+    "eslint-plugin-filenames": "^1.2.0",
+    "eslint-plugin-import": "^2.8.0",
+    "eslint-plugin-react": "^7.4.0",
+    "express": "^4.16.2",
+    "file-loader": "^1.1.5",
+    "html-loader": "^0.5.1",
+    "is-buffer": "^1.1.5",
+    "markdown-loader": "^2.0.1",
+    "node-libs-browser": "^2.0.0",
     "raw-loader": "^0.5.1",
-    "rimraf": "^2.4.4",
-    "style-loader": "^0.13.0",
+    "react-hot-loader": "^3.1.1",
+    "react-transform-catch-errors": "^1.0.2",
+    "redbox-react": "^1.5.0",
+    "rimraf": "^2.6.2",
+    "style-loader": "^0.19.0",
     "surge": "latest",
-    "url-loader": "^0.5.6",
-    "webpack": "2.2.0",
-    "webpack-dev-middleware": "^1.8.4",
-    "webpack-hot-middleware": "^2.13.0"
+    "url-loader": "^0.6.2",
+    "webpack": "3.8.1",
+    "webpack-dev-middleware": "^1.12.0",
+    "webpack-dev-server": "^2.9.3",
+    "webpack-hot-middleware": "^2.20.0"
   }
 }

server.js

@@ -11,7 +11,6 @@ var compiler = webpack(config);
 var serverPort = process.env.PORT || 3000;
 
 app.use(require("webpack-dev-middleware")(compiler, {
-  noInfo: true,
   publicPath: config.output.publicPath
 }));
 

webpack.config.js

@@ -4,20 +4,21 @@ var path = require("path");
 var webpack = require("webpack");
 
 module.exports = {
-  devtool: "source-map",
+  devtool: "eval",
   entry: [
-    "webpack-hot-middleware/client",
     "babel-polyfill",
+    'webpack-hot-middleware/client',
+    "react-hot-loader/patch",
     "./index"
   ],
   output: {
     path: path.join(__dirname, "dist"),
     filename: "bundle.js",
-    publicPath: "/dist/"
+    publicPath: "/dist",
   },
   plugins: [
-    new webpack.HotModuleReplacementPlugin(),
-    new webpack.NoEmitOnErrorsPlugin()
+    new webpack.NamedModulesPlugin(),
+    new webpack.HotModuleReplacementPlugin()
   ],
   module: {
     loaders: [{
@@ -27,23 +28,6 @@ module.exports = {
       test: /\.(js|jsx)$/,
       exclude: /node_modules/,
       loader: "babel-loader",
-      query: {
-        plugins: [
-          [
-            "react-transform", {
-              transforms: [{
-                transform: "react-transform-hmr",
-                imports: ["react"],
-                locals: ["module"]
-              }, {
-                transform: "react-transform-catch-errors",
-                imports: ["react", "redbox-react"]
-              }]
-            }
-          ]
-        ]
-      },
-      exclude: /node_modules/,
       include: __dirname
     }, {
       test: /\.css$/,