prettier

richardanaya · Jan 29, 2020 · 622ffae · 622ffae
1 parent 2a6da85
commit 622ffae
Show file tree

Hide file tree

Showing 3 changed files with 77 additions and 60 deletions.
diff --git a/README.md b/README.md
@@ -62,9 +62,16 @@ class CounterPageRoute extends PageRoute {
     super("/*")
   }
 
-  async function onRender(){
+  async onRender() {
     // use lit to render to content holder
-    render(document.body, html`<div>${session.counter}<button onclick="${this.onAdd}">+</button></div>`
+    render(
+      html`
+        <div>
+          ${session.counter}<button @click=${this.onAdd.bind(this)}>+</button>
+        </div>
+      `,
+      document.body
+    );
   }
 
   function onAdd() {

diff --git a/demo.html b/demo.html
@@ -2,49 +2,58 @@
 <body>
 </body>
 <script type="module">
-import {html, render} from 'https://unpkg.com/lit-html?module';
-import {PageRoute,register} from './voir.js';
+import { html, render } from "https://unpkg.com/lit-html?module";
+import { PageRoute, register } from "./voir.js";
 
 var session = { counter: 0 };
 
 class CounterPageRoute extends PageRoute {
   constructor() {
     // all pages route to counter
-    super("/*")
+    super("/*");
   }
 
-  async onRender(){
+  async onRender() {
     // use lit to render to content holder
-    render(html`<div>${session.counter}<button @click=${this.onAdd.bind(this)}>+</button></div>`,document.body)
+    render(
+      html`
+        <div>
+          ${session.counter}<button @click=${this.onAdd.bind(this)}>+</button>
+        </div>
+      `,
+      document.body
+    );
   }
 
   onAdd() {
     // modify state
     session.counter += 1;
-    if(session.counter == 3){
-      this.navigate("/foo")
+    if (session.counter == 3) {
+      this.navigate("/foo");
     }
     // rerender current page
     this.renderCurrentPage();
-  } 
+  }
 }
 
 class FooPageRoute extends PageRoute {
   constructor() {
     // all pages route to counter
-    super("/foo")
+    super("/foo");
   }
 
-  async onRender(){
+  async onRender() {
     // use lit to render to content holder
-    render(html`<div>you made it to foo <a href="/demo.html">go back</a></div>`,document.body)
+    render(
+      html`
+        <div>you made it to foo <a href="/demo.html">go back</a></div>
+      `,
+      document.body
+    );
   }
 }
 
 // register the page routes in the order we'd like them evaluated
-register([
-  FooPageRoute,
-  CounterPageRoute,
-])
+register([FooPageRoute, CounterPageRoute]);
 </script>
 </html>
diff --git a/voir.js b/voir.js
@@ -1,48 +1,49 @@
 class Router {
   routes = [];
-  root = '/';
+  root = "/";
 
   constructor(options) {
-    window.addEventListener("load",()=>{
+    window.addEventListener("load", () => {
       this.listen();
-      setTimeout(()=>{
+      setTimeout(() => {
         this.routeCheck();
-      },1);
-    })
+      }, 1);
+    });
   }
 
   add(path, cb) {
     this.routes.push({ path, cb });
   }
 
-  clearSlashes(path){
-    return path.toString()
-    .replace(/\/$/, '')
-    .replace(/^\//, '');
+  clearSlashes(path) {
+    return path
+      .toString()
+      .replace(/\/$/, "")
+      .replace(/^\//, "");
   }
 
   getCurrentPath() {
-    let fragment = (decodeURI(window.location.pathname + window.location.search));
-    fragment = fragment.replace(/\?(.*)$/, '');
-    return (fragment)
-  };
+    let fragment = decodeURI(window.location.pathname + window.location.search);
+    fragment = fragment.replace(/\?(.*)$/, "");
+    return fragment;
+  }
 
   navigate(path) {
     window.history.pushState(null, null, this.root + this.clearSlashes(path));
-    setTimeout(()=>{
+    setTimeout(() => {
       this.routeCheck();
-    },1);
-  };
+    }, 1);
+  }
 
-  isExternal(path){
+  isExternal(path) {
     return path.indexOf(window.location.origin) != 0;
   }
 
   listen() {
     this.interval = setInterval(this.routeCheck.bind(this), 50);
-  };
+  }
 
-  routeCheck(){
+  routeCheck() {
     let curPath = this.getCurrentPath();
     if (this.current === curPath) return;
     this.current = curPath;
@@ -51,67 +52,67 @@ class Router {
       const match = this.current.match(route.path);
       if (match) {
         match.shift();
-        route.cb.call(null,match)
+        route.cb.call(null, match);
         return match;
       }
       return false;
     });
-  };
+  }
 }
 
 const router = new Router();
 
 let currentPageRoute = null;
 
 export class PageRoute {
-  constructor(route){
+  constructor(route) {
     this.firstTime = false;
     this.router = router;
-    this.router.add(route,(match)=>{
+    this.router.add(route, match => {
       currentPageRoute = this;
       this.match = match;
-      if(this.onInit && !this.firstTime){
+      if (this.onInit && !this.firstTime) {
         spawn(this.onInit.bind(this));
         this.firstTime = true;
       }
-      if(this.onLoad){
+      if (this.onLoad) {
         spawn(this.onLoad.bind(this));
       }
-      if(this.onRender){
-        spawn(this.onRender.bind(this))
+      if (this.onRender) {
+        spawn(this.onRender.bind(this));
       }
-    })
+    });
   }
 
   renderCurrentPage() {
-    if(currentPageRoute && currentPageRoute.onRender){
+    if (currentPageRoute && currentPageRoute.onRender) {
       currentPageRoute.onRender();
     }
   }
 
-  navigate(path){
+  navigate(path) {
     router.navigate(path);
   }
 }
 
-export function register(routes){
-  for(var i in routes){
-    new routes[i];
+export function register(routes) {
+  for (var i in routes) {
+    new routes[i]();
   }
 }
 
-export function spawn(f){
-  f().then(()=>{
-      //executed
-  })
+export function spawn(f) {
+  f().then(() => {
+    //executed
+  });
 }
 
-document.addEventListener("click",function(e){
+document.addEventListener("click", function(e) {
   var el = e.target;
-  while (el && 'A' !== el.nodeName.toUpperCase()) el = el.parentNode;
-  if (!el || 'A' !== el.nodeName.toUpperCase()) return;
-  if(el && !router.isExternal(el.href)){
-    router.navigate(el.href.slice(window.location.origin.length))
+  while (el && "A" !== el.nodeName.toUpperCase()) el = el.parentNode;
+  if (!el || "A" !== el.nodeName.toUpperCase()) return;
+  if (el && !router.isExternal(el.href)) {
+    router.navigate(el.href.slice(window.location.origin.length));
     e.preventDefault();
   }
-})
+});