webapp: Bumped everything to latest version, replaced React with Prea…

…ct, bootstrap out of beta, minor fixes.
dhedegaard · Jan 26, 2018 · 6c37000 · 6c37000
1 parent 40456a0
commit 6c37000
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 20 deletions.
diff --git a/webapp/components/App.tsx b/webapp/components/App.tsx
@@ -8,7 +8,7 @@ interface IAppState {
 }
 
 export default class App extends React.Component<undefined, IAppState> {
-    state: IAppState = {
+    state = {
         username: "",
         message: "",
     };

diff --git a/webapp/components/ChatContainer.tsx b/webapp/components/ChatContainer.tsx
@@ -22,7 +22,7 @@ export default class ChatContainer extends React.Component<IChatContainerProps,
     }
 
     componentDidUpdate(): void {
-        let elem: Element = ReactDOM.findDOMNode(this.refs.chat);
+        let elem = this.refs.chat as HTMLElement;
         elem.scrollTop = elem.scrollHeight;
     }
 

diff --git a/webapp/index.tsx b/webapp/index.tsx
@@ -4,6 +4,7 @@ import * as ReactDOM from "react-dom";
 import App from "./components/App";
 
 ReactDOM.render(
-    <App />,
-    document.getElementById("container")
+    /* Temporary fix for broken type declarations. */
+    <App /> as any,
+    document.getElementById("container"),
 );
diff --git a/webapp/package.json b/webapp/package.json
@@ -7,27 +7,26 @@
     "start": "webpack -p"
   },
   "dependencies": {
+    "@types/react": "^16.0.35",
+    "@types/react-dom": "^16.0.3",
     "babel-core": "^6.26.0",
     "babel-loader": "^7.1.2",
     "babel-polyfill": "^6.26.0",
     "babel-preset-es2015": "^6.24.1",
     "babel-preset-react": "^6.24.1",
-    "bootstrap": "^4.0.0-beta",
-    "css-loader": "^0.28.7",
-    "extract-text-webpack-plugin": "^3.0.1",
-    "node-sass": "^4.5.3",
+    "bootstrap": "^4.0.0",
+    "css-loader": "^0.28.9",
+    "extract-text-webpack-plugin": "^3.0.2",
+    "node-sass": "^4.7.2",
     "path": "^0.12.7",
-    "react": "^16.0.0",
-    "react-dom": "^16.0.0",
+    "preact": "^8.2.7",
+    "preact-compat": "^3.18.0",
+    "preact-dom": "^1.0.1",
     "sass-loader": "^6.0.6",
-    "style-loader": "^0.19.0",
-    "ts-loader": "^2.3.7",
-    "typescript": "^2.5.3",
-    "webpack": "^3.6.0",
+    "style-loader": "^0.19.1",
+    "ts-loader": "^3.3.1",
+    "typescript": "^2.6.2",
+    "webpack": "^3.10.0",
     "whatwg-fetch": "^2.0.3"
-  },
-  "devDependencies": {
-    "@types/react": "^16.0.9",
-    "@types/react-dom": "^16.0.0"
   }
 }
diff --git a/webapp/webpack.config.js b/webapp/webpack.config.js
@@ -13,7 +13,13 @@ module.exports = {
         filename: "bundle.js"
     },
     resolve: {
-        extensions: [".ts", ".tsx", ".js", ".jsx"]
+        extensions: [".ts", ".tsx", ".js", ".jsx"],
+        alias: {
+            'react': 'preact-compat',
+            'react-dom': 'preact-compat',
+            // Not necessary unless you consume a module using `createClass`
+            'create-react-class': 'preact-compat/lib/create-react-class'
+        }
     },
     devtool: "source-map",
     module: {
@@ -56,4 +62,4 @@ module.exports = {
             allChunks: true
         })
     ]
-};
+}