#30: app now runs on hyperapp

webapp/.gitignore

@@ -9,6 +9,9 @@
 # production
 /build
 
+# css files always generated from scss
+*.css
+
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*

webapp/config/paths.js

@@ -40,7 +40,6 @@ function getServedPath(appPackageJson) {
 
 // config after eject: we're in ./config/
 module.exports = {
-  dotenv: resolveApp('.env'),
   appBuild: resolveApp('build'),
   appPublic: resolveApp('public'),
   appHtml: resolveApp('public/index.html'),

webapp/package.json

@@ -7,26 +7,30 @@
     "babel-eslint": "7.2.3",
     "babel-jest": "20.0.3",
     "babel-loader": "7.1.2",
+    "babel-preset-es2015": "^6.1.18",
     "babel-runtime": "6.26.0",
     "bulma": "^0.6.1",
     "copy-webpack-plugin": "4.3.1",
+    "css-loader": "0.28.8",
     "eslint": "4.10.0",
     "eslint-loader": "1.9.0",
     "eslint-plugin-flowtype": "2.39.1",
     "eslint-plugin-import": "2.8.0",
+    "hyperapp": "1.0.2",
     "jest": "20.0.4",
     "node-sass-chokidar": "0.0.3",
     "npm-run-all": "^4.1.2",
     "promise": "8.0.1",
     "rimraf": "2.6.2",
+    "style-loader": "0.19.1",
     "webpack": "3.8.1",
     "webpack-dev-server": "2.9.4",
     "whatwg-fetch": "2.0.3"
   },
   "scripts": {
-    "watch-css": "npm run build-css && node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o build/ --watch --recursive",
+    "watch-css": "npm run build-css && node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/ --watch --recursive",
     "watch-js": "webpack --watch",
-    "build-css": "node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o build/",
+    "build-css": "node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/",
     "build-js": "webpack",
     "start-js": "webpack-dev-server --hot --inline",
     "start": "npm-run-all -p watch-css start-js",

webapp/public/index.html

@@ -8,8 +8,8 @@
       manifest.json provides metadata used when your web app is added to the
       homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
-    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <link rel="manifest" href="manifest.json">
+    <link rel="shortcut icon" href="favicon.ico">
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
@@ -25,7 +25,6 @@
 <noscript>
     You need to enable JavaScript to run this app.
 </noscript>
-<div id="root"></div>
 <script src="bundle.js"></script>
 </body>
 </html>

webapp/src/App.js

@@ -1,29 +1,12 @@
-import React, {Component} from 'react';
-import EncryptionKeyBox from './EncryptionKeyBox';
+import { h } from "hyperapp"
 import './App.css';
 
-function AppLogo() {
-    return (
-        <div className="app-logo">
-            deadbox
-        </div>
-    );
-}
+const AppLogo = () => (
+    h("div", {class: 'app-logo'}, "deadbox")
+);
 
-class App extends Component {
-    render() {
-        return (
-            <EncryptionKeyBox logo={<AppLogo />}>
-                <section className="hero is-primary is-fullheight">
-                    <div className="hero-body">
-                        <div className="container">
-                            <h1 className="title">Connect</h1>
-                        </div>
-                    </div>
-                </section>
-            </EncryptionKeyBox>
-        );
-    }
-}
-
-export default App;
+export const state = {};
+export const actions = {};
+export const view = (state, actions) => (
+    h(AppLogo)
+);

webapp/src/index.js

@@ -1,8 +1,5 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
+import { app } from "hyperapp"
 import './index.css';
-import App from './App';
-import registerServiceWorker from './registerServiceWorker';
+import {state, actions, view} from './App';
 
-ReactDOM.render(<App/>, document.getElementById('root'));
-registerServiceWorker();
+app(state, actions, view, document.body);

webapp/webpack.config.js

@@ -21,11 +21,25 @@ module.exports = {
     contentBase: paths.appBuild,
   },
   module: {
-    loaders: [
+    rules: [
       {
-        // process ES6 files using babel
-        loader: 'babel-loader',
-        test: /\.(js|mjs)$/,
+        test: /\.css$/,
+        use: [
+          // HINT: style-loader generates <style> tags,
+          // css-loader just resolves the CSS name to a URL
+          { loader: "style-loader" },
+          { loader: "css-loader" }
+        ]
+      },
+      {
+        test: /\.js$/,
+        exclude: /(node_modules|bower_components)/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            presets: ['es2015']
+          }
+        }
       }
     ]
   },