Simpli/unification

app/client.js

@@ -13,8 +13,8 @@ import ssr from "choo-ssr";
 
 //  V A R I A B L E S
 
-const head = local("app/components/head");
-const wrapper = local("app/components/wrapper");
+const head = local("app/components/head").default;
+const wrapper = local("app/components/wrapper").default;
 
 
 

app/components/head.js

@@ -16,7 +16,7 @@ let title = "";
 
 //  E X P O R T
 
-module.exports = exports = (state, emit) => {
+export default (state, emit) => {
   switch(true) {
     case (state.route !== "/" && state.params.wildcard):
       title = `${state.params.wildcard.capitalize()} ∙ LBRY ∙ ${config.meta.tagline}`;

app/components/navigation.js

@@ -5,20 +5,13 @@
 //  P A C K A G E S
 
 import html from "choo/html";
-import Nanocomponent from "nanocomponent";
-import xtend from "xtend";
 
 
 
 //  E X P O R T
 
-export default class Navigation extends Nanocomponent {
-  constructor() {
-    super();
-
-    this.state = {
-      active: true,
-      links: [
+export default currentUrl => {
+  const links = [
     {
       name: "LBRY.io",
       title: "Escape the techno scene",
@@ -44,40 +37,40 @@ export default class Navigation extends Nanocomponent {
       title: "Interact with LBRY",
       url: "/community"
     }
-      ]
-    };
-
-    this.renderLink = this.renderLink.bind(this);
-  }
-
-  createElement(props) {
-    this.state = xtend(this.state, props);
+  ];
 
   return html`
     <nav class="navigation">
       <div class="inner-wrap">
         <a class="navigation__item logo" href="/" title="LBRY homepage">Home</a>
-          ${this.state.links.map(this.renderLink)}
+        ${links.map(link => renderLink(currentUrl, link))}
       </div>
     </nav>
   `;
-  }
+};
 
-  renderLink(props, i, arr) { // eslint-disable-line
+
+
+//  H E L P E R
+
+function renderLink(href, link) {
   let activeClass;
 
-    if (this.state.href === "/" && props.url === "/") {
-      activeClass = true;
-    } else if (props.url !== "/" && this.state.href.indexOf(props.url) >= 0) {
+  switch(true) {
+    case (link.url !== "/" && href.indexOf(link.url) >= 0):
       activeClass = true;
+      break;
+
+    default:
+      activeClass = false;
+      break;
   }
 
   return html`
     <a
       class="navigation__item${activeClass ? " active" : ""}"
-        href="${props.url}"
-        title="${props.title}"
-      >${props.name}</a>
+      href="${link.url}"
+      title="${link.title}"
+    >${link.name}</a>
   `;
 }
-}

app/components/wrapper.js

@@ -5,26 +5,25 @@
 //  P A C K A G E
 
 import asyncHtml from "choo-async/html";
+import { require as local } from "app-root-path";
 
 //  V A R I A B L E S
 
-import footer from "./footer";
-import Navigation from "./navigation";
-
-const navigation = new Navigation();
+const footer = local("app/components/footer").default;
+const navigation = local("app/components/navigation").default;
 
 
 
 //  E X P O R T
 
-module.exports = exports = children => (state, emit) => asyncHtml`
+export default children => (state, emit) => asyncHtml`
   <main>
     <noscript>
       <p>LBRY is quite fancy and relies on a bit of JavaScript to do these fancy things.</p>
       <p>Please enable it, if you can.</p>
     </noscript>
 
-    ${navigation.render({ href: state.href || "/" })}
+    ${navigation(state.href)}
     <aside class="flashes" id="flash-container"></aside>
     ${children(state, emit)}
     ${footer(state, emit)}

package.json

@@ -32,15 +32,13 @@
     "make-promises-safe": "^1.1.0",
     "markdown-it": "^8.4.2",
     "markdown-it-anchor": "^5.0.2",
-    "nanocomponent": "^6.5.2",
     "prismjs": "^1.15.0",
     "redis": "^2.8.0",
     "request": "^2.88.0",
     "request-promise-native": "^1.0.5",
     "slack-node": "^0.1.8",
     "socket.io": "^2.1.1",
-    "stringify-object": "^3.2.2",
-    "xtend": "^4.0.1"
+    "stringify-object": "^3.2.2"
   },
   "description": "Documentation for the LBRY protocol and associated projects",
   "devDependencies": {