#30: rewrite existing code from React to Hyperapp

webapp/README.md

@@ -18,4 +18,5 @@ This is the webapp to access a Drop.
 
 * [webpack](https://webpack.js.org/configuration/)
 * [hyperapp](https://github.com/hyperapp/hyperapp/tree/master/docs), UI framework
+  * [hyperapp/awesome](https://github.com/hyperapp/awesome#apps-and-boilerplates) is a curated list of projects built with Hyperapp.
 * [bulma](https://bulma.io/documentation/overview/start/), CSS framework

webapp/webpack.config.js → webapp/config/webpack.config.js

@@ -1,7 +1,7 @@
 'use strict';
 
-const paths = require('./config/paths');
-const polyfills = require.resolve('./config/polyfills');
+const paths = require('./paths');
+const polyfills = require.resolve('./polyfills');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 
 module.exports = {
@@ -20,13 +20,19 @@ module.exports = {
     // server webpack dev server from build directory
     contentBase: paths.appBuild,
   },
+  resolve: {
+    modules: [
+      paths.appSrc, // HINT: allow for absolute path ES6 imports from 'src' directory
+      paths.appNodeModules
+    ]
+  },
   module: {
     rules: [
       {
         test: /\.css$/,
         use: [
-          // HINT: style-loader generates <style> tags,
-          // css-loader just resolves the CSS name to a URL
+          // HINT: style-loader generates <style> tags, css-loader just resolves the CSS name to a URL
+          // TODO: don't use style tags, but https://github.com/webpack-contrib/extract-text-webpack-plugin
           { loader: "style-loader" },
           { loader: "css-loader" }
         ]
@@ -37,7 +43,9 @@ module.exports = {
         use: {
           loader: 'babel-loader',
           options: {
-            presets: ['es2015']
+            // NOTE that we're not transpiling to ES5, but just resolving modules.
+            // Therefore, browsers need to know ES6, but don't need to know module loading.
+            plugins: ["transform-es2015-modules-commonjs"]
           }
         }
       }

webapp/package.json

@@ -7,7 +7,7 @@
     "babel-eslint": "7.2.3",
     "babel-jest": "20.0.3",
     "babel-loader": "7.1.2",
-    "babel-preset-es2015": "^6.1.18",
+    "babel-plugin-transform-es2015-modules-commonjs": "6.26.0",
     "babel-runtime": "6.26.0",
     "bulma": "^0.6.1",
     "copy-webpack-plugin": "4.3.1",
@@ -29,10 +29,10 @@
   },
   "scripts": {
     "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",
+    "watch-js": "webpack --watch --config config/webpack.config.js",
     "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",
+    "build-js": "webpack --config config/webpack.config.js",
+    "start-js": "webpack-dev-server --hot --inline --config config/webpack.config.js",
     "start": "npm-run-all -p watch-css start-js",
     "build": "npm-run-all build-css build-js",
     "test": "node scripts/test.js --env=jsdom",

webapp/src/View.js

@@ -0,0 +1,14 @@
+import { h } from "hyperapp"
+import {Logo} from "app/Logo";
+import {WithEncryptionKey} from "encryption/WithEncryptionKey";
+import {Nav} from "app/Nav";
+import {KeyTag} from "encryption/KeyTag";
+
+export const view = (state, actions) => {
+  return h(WithEncryptionKey, {
+    actions: actions.encryption,
+    state: state.encryption,
+    whenKeyAvailable: h(Nav, {logo: h(Logo), items: [h(KeyTag)]}),
+    logo: h(Logo)
+  });
+};

webapp/src/app/Logo.js

@@ -0,0 +1,6 @@
+import { h } from "hyperapp"
+import "./Logo.css"
+
+export const Logo = () => (
+  h("div", {class: 'app-logo'}, "deadbox")
+);

webapp/src/App.scss → webapp/src/app/Logo.scss

@@ -6,9 +6,3 @@
     font-weight: 300;
     padding: .1em .7em;
 }
-
-/* cf. https://github.com/jgthms/bulma/issues/1401#issuecomment-341570516 */
-.is-vertical-center {
-  display: flex;
-  align-items: center;
-}

webapp/src/app/Nav.js

@@ -0,0 +1,20 @@
+import { h } from "hyperapp"
+
+export const Nav = ({ logo, items }, children) => (
+  h("div", {}, [
+    h("nav", {class: "navbar is-black"}, [
+      h("div", {class:"navbar-brand"}, [
+        h("h1", {class:"is-size-5 is-vertical-center"}, [
+          logo
+        ])
+      ]),
+      h("div", {class:"navbar-menu"}, [
+        h("div", {class:"navbar-start"}),
+        h("div", {class:"navbar-end"},
+          items.map(item => h("div", {class:"navbar-item"}, [item]))
+        )
+      ])
+    ]),
+    ...children
+  ])
+);

webapp/src/encryption/KeyGeneratingSection.js

@@ -0,0 +1,14 @@
+import { h } from "hyperapp"
+
+export const KeyGeneratingSection = ({ logo }) => (
+  h("section", {class:"hero is-success is-fullheight"}, [
+    h("div", {class:"hero-body"}, [
+      h("div", {class:"container has-text-centered"}, [
+        h("h1", {class:"title"}, [
+          logo
+        ]),
+        h("p", {}, "Your key is generated, please wait ...")
+      ])
+    ])
+  ])
+);

webapp/src/encryption/KeyTag.js

@@ -0,0 +1,8 @@
+import { h } from "hyperapp"
+
+export const KeyTag = () => (
+  h("div", {class:"tags has-addons"}, [
+    h("span", {class:"tag"}, "personal key"),
+    h("span", {class:"tag is-success"}, "AA:BB:CC:DD:EE:FF")
+  ])
+);

webapp/src/encryption/WithEncryptionKey.js

@@ -0,0 +1,8 @@
+import { h } from "hyperapp"
+import {KeyGeneratingSection} from "./KeyGeneratingSection";
+
+export const WithEncryptionKey = ({actions, state, whenKeyAvailable, logo}) => (
+  h("div", {
+    oncreate() { actions.setKeyAvailableDelayed(3000); } // HINT: Mock key creation for now
+  }, state.keyAvailable ? whenKeyAvailable : h(KeyGeneratingSection, {logo: logo}))
+);

webapp/src/encryption/index.js

@@ -0,0 +1,10 @@
+export default {
+  state: {
+    keyAvailable: false
+  },
+  actions: {
+    setKeyAvailable: () => (state) => ({ keyAvailable: true }),
+    setKeyAvailableDelayed: timeout => (state, actions) =>
+      new Promise(resolve => setTimeout(resolve, timeout)).then(() => actions.setKeyAvailable())
+  }
+};

webapp/src/index.js

@@ -1,5 +1,14 @@
 import { app } from "hyperapp"
 import './index.css';
-import {state, actions, view} from './App';
+import {view} from './View';
+import encryption from "encryption";
+
+const state = {
+  encryption: encryption.state
+};
+
+const actions = {
+  encryption: encryption.actions
+};
 
 app(state, actions, view, document.body);

webapp/src/index.scss

@@ -5,3 +5,9 @@ body {
     padding: 0;
     font-family: sans-serif;
 }
+
+/* cf. https://github.com/jgthms/bulma/issues/1401#issuecomment-341570516 */
+.is-vertical-center {
+    display: flex;
+    align-items: center;
+}