Eslint package updated and Maintenance banner page added

1)Eslint and few packages updated 2)Maintenance banner page added
3)Route resolver added for index route

package.json

@@ -20,7 +20,7 @@
     "clean-webpack-plugin": "^0.1.19",
     "css-hot-loader": "^1.3.9",
     "css-loader": "^0.28.11",
-    "eslint": "^4.19.1",
+    "eslint": "^5.0.1",
     "eslint-loader": "^2.0.0",
     "extract-text-webpack-plugin": "^4.0.0-beta.0",
     "file-loader": "^1.1.11",
@@ -29,8 +29,8 @@
     "node-sass": "^4.8.3",
     "sass-loader": "^7.0.3",
     "style-loader": "^0.21.0",
-    "uglifyjs-webpack-plugin": "^1.2.6",
-    "webpack": "^4.12.0",
+    "uglifyjs-webpack-plugin": "^1.2.7",
+    "webpack": "^4.12.2",
     "webpack-cli": "^3.0.8",
     "webpack-dev-server": "^3.1.3",
     "webpack-merge": "^4.1.3"

src/view/components/maintenance-layout/index.js

@@ -0,0 +1,18 @@
+import './styles.scss';
+
+/**
+ * A component that will show the maintenance banner.
+ */
+export default function() {
+    return {
+        view: () => {
+            return m('.maintenance', m('article', [
+                m('h1', 'We\'ll be back soon!'),
+                m('div',[
+                    m('p', m.trust('Sorry for the inconvenience but we\'re performing some maintenance at the moment. If you need to you can always <a href="mailto:#">contact us</a>, otherwise we\'ll be back online shortly!')),
+                    m('p', '- The Team'),
+                ]),
+            ]));
+        },
+    };
+}

src/view/components/maintenance-layout/styles.scss

@@ -0,0 +1,23 @@
+.maintenance {
+  text-align: center;
+  padding: 150px;
+  font: 20px Helvetica, sans-serif;
+  color: #333;
+  h1 {
+      font-size: 50px;
+  }
+  article {
+      display: block;
+      text-align: left;
+      width: 650px;
+      margin: 0 auto;
+  }
+  a {
+      color: #dc8100;
+      text-decoration: none;
+  }
+  a:hover {
+      color: #333;
+      text-decoration: none;
+  }
+}

src/view/components/page-layout/index.js

@@ -4,10 +4,8 @@ import './styles.scss';
  * A component that wraps another component with some common
  * page layout markup and styles.
  */
-export default function(WrappedComponent) {
+export default function() {
     return {
-        view: () => m('.page-layout', [
-            m(WrappedComponent),
-        ]),
+        view: (vnode) => m('.page-layout', vnode.children),
     };
 }

src/view/pages/landing-page.js

@@ -1,32 +1,8 @@
 import SampleComponent from '../components/sample-component';
 
-export default function(/*vnode*/) {
-
-    return {
-        oninit: function(/*vnode*/) {
-            console.log('initialized');
-        },
-        oncreate: function(/*vnode*/) {
-            console.log('DOM created');
-        },
-        onbeforeupdate(/*vnode, old*/) {
-            console.log('onbeforeupdate');
-            return true;
-        },
-        onupdate: function(/*vnode*/) {
-            console.log('DOM updated');
-        },
-        onbeforeremove: function(/*vnode*/) {
-            console.log('exit animation can start');
-            return new Promise(function(resolve) {
-                // call after animation completes
-                resolve();
-            });
-        },
-        onremove: function(/*vnode*/) {
-            console.log('removing DOM element');
-        },
-        view: function(/*vnode*/) {
+export default function() {
+    return {        
+        view() {
             return m('div', [
                 m('h2', 'Congratulations, you made it!'),
                 m('p', 'You\'ve spun up your very first Mithril app :-)'),

src/view/routes.js

@@ -2,13 +2,42 @@ import PageLayout from './components/page-layout';
 
 // Individual pages
 import IndexPage from './pages/landing-page';
-import Splash    from './pages/splash-page';
+import Splash from './components/splash-loader/index';
+import MaintenancePage from './components/maintenance-layout/index';
+
+const $root = document.body.querySelector('#root');
 
 const Routes = {
-    '/splash': PageLayout(Splash),
-    '/index': PageLayout(IndexPage),
+    '/splash': {
+        render: function() {
+            return m(PageLayout, m(Splash));
+        },
+    },
+    '/index': {
+        onmatch() {
+            // Show Loader until the promise has been resolved or rejected.
+            m.render($root, m(PageLayout, m(Splash)));
+
+            return new Promise((resolve/*, reject*/) => {
+                //Fetch all necessary data here
+                setTimeout(function() {
+                    resolve();
+                }, 2000);
+            }).catch((/* e */) => {
+                // In case of server error we can show the maintenance page.
+                return MaintenancePage;
+            });
+        },
+        render(vnode) {
+            if (typeof vnode.tag === 'function') {
+                //If onmatch returns a component or a promise that resolves to a component, comes here.
+                return vnode;
+            }
+            return m(PageLayout, m(IndexPage));
+        },
+    },
 };
 
-const DefaultRoute = '/splash';
+const DefaultRoute = '/index';
 
 export { Routes, DefaultRoute };