change from react to preact

Unfortunately had to remove hot reloading, react-hot-loader does not work with preact

Author: stropitek

demos/bootstrap.js

@@ -13,25 +13,14 @@ import './manifest.json';
 
 const app = document.getElementById('app');
 
-import {AppContainer} from 'react-hot-loader';
-// AppContainer is a necessary wrapper component for HMR
-
 const render = (Component) => {
     ReactDOM.render(
-        <AppContainer>
             <Provider store={store}>
                 <Component />
-            </Provider>
-        </AppContainer>,
+            </Provider>,
         app
     );
 };
 
 render(App);
 
-// Hot Module Replacement API
-if (module.hot) {
-    module.hot.accept('./containers/App', () => {
-        render(App);
-    });
-}

demos/containers/SVCConfig.js

@@ -30,7 +30,7 @@ class SVCConfig extends Component {
                         </td>
                     </tr>
                     <tr>
-                        <td><label htmlFor="SVC_kernel" >Kernel caca</label></td>
+                        <td><label htmlFor="SVC_kernel" >Kernel</label></td>
                         <td>
                             <Field name="kernel" component="select" id="SVC_kernel">
                                 {Object.keys(KERNEL_TYPES).map(kernel => {

package.json

@@ -58,13 +58,13 @@
     "bootstrap": "4.0.0-alpha.6",
     "chroma-js": "^1.2.2",
     "cli-table": "^0.3.1",
-    "css-loader": "^0.27.1",
+    "css-loader": "^0.28.4",
     "eslint": "^3.18.0",
     "eslint-config-cheminfo": "^1.7.0",
     "eslint-config-neptun-react": "^1.0.1",
     "eslint-plugin-no-only-tests": "^1.1.0",
     "eslint-plugin-react": "^6.10.3",
-    "file-loader": "^0.10.1",
+    "file-loader": "^0.11.2",
     "font-awesome": "^4.7.0",
     "font-awesome-webpack": "^0.0.5-beta.2",
     "gh-pages": "^0.12.0",
@@ -78,9 +78,10 @@
     "ml-svm": "^2.1.2",
     "mocha": "^3.2.0",
     "mocha-better-spec-reporter": "^3.1.0",
+    "preact": "^8.1.0",
+    "preact-compat": "^3.16.0",
     "react": "^15.4.2",
     "react-dom": "^15.4.2",
-    "react-hot-loader": "beta",
     "react-icons": "^2.2.5",
     "react-loading-animation": "^1.2.1",
     "react-redux": "^5.0.3",
@@ -96,9 +97,9 @@
     "style-loader": "^0.13.2",
     "tether": "^1.4.0",
     "url-loader": "^0.5.8",
-    "webpack": "^2.2.1",
+    "webpack": "^2.6.1",
     "webpack-bundle-analyzer": "^2.8.2",
-    "webpack-dev-server": "^2.4.1",
+    "webpack-dev-server": "^2.4.5",
     "webpack-visualizer-plugin": "^0.1.11",
     "worker-loader": "^0.8.0"
   }

webpack.common.js

@@ -17,8 +17,13 @@ module.exports = {
         filename: 'bundle.js',
         publicPath
     },
-
-
+    resolve: {
+        extensions: ['.js'],
+        alias: {
+            react: 'preact-compat',
+            'react-dom': 'preact-compat',
+        }
+    },
     module: {
         rules: [
             {

webpack.config.js

@@ -4,26 +4,10 @@ const webpack = require('webpack');
 const webpackConfig = require('./webpack.common');
 const port = 3000;
 
-webpackConfig.entry = [
-    'react-hot-loader/patch',
-    // activate HMR for React
-].concat(webpackConfig.entry);
 
 webpackConfig.devtool = 'inline-source-map';
 
-webpackConfig.plugins = webpackConfig.plugins.concat([
-    new webpack.HotModuleReplacementPlugin(),
-    // enable HMR globally
-
-    new webpack.NamedModulesPlugin(),
-    // prints more readable module names in the browser console on HMR updates
-
-    new webpack.NoEmitOnErrorsPlugin(),
-    // do not emit compiled assets that include errors
-]);
-
 webpackConfig.devServer = {
-    hot: true,
     inline: true,
     historyApiFallback: true,
     contentBase: 'demos',