van_router@0.4.8

Van Router

A small (1kb gzipped) router middleware for vanilla-js.

Features

Easy to use. you can use pure js everywhere or combine with other framework like Alpinejs, React etc.
Small. this library is small (just 1kb gzipped).
Middleware. does your application have authentication? you can use middleware.
Lazy-Load. this router support laze-load js/controller.

Installation

Browser

<!-- non module -->
<script src="//unpkg.com/van-router@0.4.8"></script>

<!-- es module -->
<script type="module">
  import { VanRouter } from "https://unpkg.com/van-router@0.4.8/index.esm.js";
  // code here
</script>

Nodejs

npm i van-router

Deno

import { VanRouter } from "https://deno.land/x/van_router@0.4.8/mod.ts";

Usage

Example

...
<body>
  <nav>
    <a href="#/home" u-link>Home</a>
    <a href="#/about" u-link>About</a>
  </nav>
  <div id="app"></div>
  <script>
    const render = (elem) => {
      document.getElementById("app").innerHTML = elem;
    }
    const router = new VanRouter({ render });

    router.add("/", () => {
      return `<h1>Hello Home</h1>`;
    });

    router.add("/about", () => {
      return `<h1>Hello About</h1>`;
    });

    router.resolve();
  </script>
</body>
...

note : extension vscode for literal html lit-html.

router.add("/", ({ html }) => {
  return html`<h1>Hello Home</h1>`;
});

Middleware

...

const foo_midd = (ctx, next) => {
  ctx.foo = "foo";
  next();
}
const bar_midd = (ctx, next) => {
  ctx.bar = "bar";
  next();
}

// global middleware
router.use(foo_midd);

// inline middleware
router.add("/", bar_midd, ({ foo, bar }) => {
  return `<h1>${foo}${bar}</h1>`;
  // => foobar
});

...

Interaction

use mount for javascript to document interaction or DOM manipulation.

...
router.add("/", ({ mount }) => {

  mount(() => {
    const btn = document.getElementById("btn");
    btn.onclick = () => {
      alert("Hello from button");
    };
  });

  return `<button id="btn">Click Me</button>`;
});
...

Lazy-load

/router.js

...
router.add("/", ({ lazy }) => {
  return lazy("/controller/home.js");
});
...

/controller/home.js

function home() {
  return `<h1>Hello Home</h1>`;
}

Config

Config for VanRouter

const router = new VanRouter(config);

Config.render

Render configs.

const render = (elem) => {
  document.getElementById("app").innerHTML = elem;
  // or with React
  // ReactDOM.render(elem, document.getElementById("app"));
};
const router = new VanRouter({ render });

Config.base

Base path/url like <base href="/myapp" />.

const router = new VanRouter({ base: "/myapp" });

Context (ctx)

Is an utility based on object.

router.add("/", (context) => {...})

Context.params

Object query parameter from path.

router.add("/user/:userId", (ctx) => {
  console.log(ctx.params);
  // => { userId: "123" }
  return ``;
});

Context.mount

use mount for javascript to document interaction or DOM manipulation.

router.add("/", ({ mount }) => {
  mount(() => {
    const btn = document.getElementById("btn");
    btn.onclick = () => {
      alert("Hello from button");
    };
  });

  return `<button id="btn">Click Me</button>`;
});

Context.unmount

use unmount for cleanup listener or global variable.

router.add("/", ({ mount, unmount }) => {
  mount(() => {
    window.myClick = () => {
      alert("hello from global window");
    };
  });

  unmount(() => {
    delete window.myClick;
  });

  return `<button onclick="myClick()">Click Me</button>`;
});

Context.lazy

Lazy load js/controller

/router.js

...
router.add("/", ({ lazy }) => {
  return lazy("/controller/home.js");
});
...

/controller/home.js

function home() {
  return `<h1>Hello Home</h1>`;
}

Context.go

go to state/path.

router.add("/", (ctx) => {
  ctx.go("#/home");
  // or without hash
  ctx.go("/home");
});

Context.html

for vscode literal html syntax highlight lit-html.

router.add("/", ({ html }) => {
  return html`<h1>Hello World</h1>`;
});

Other context

Context.pathname
Context.url

Handle error & not found

Handle 404 not found

router.add("*", () => {
  return `<h1>404 not found</h1>`;
});

Handle error

router.add("/", (ctx) => {
  ctx.noop();
  return `<h1>Noop</h1>`;
});
router.onError((err, ctx) => {
  console.log(err);
  return `<h1>${err.message}</h1>`;
  // message => ctx.noop is not a function
});

With React (jsx)

import React from "react";
import ReactDOM from "react-dom";
import { VanRouter } from "van-router";

// example components
import Home from "./components/home";
import About from "./components/about";

const render = (component) => {
  ReactDOM.render(component, document.getElementById("app"));
};

const router = new VanRouter({ render });

router.add("/", () => {
  return <Home />;
});

router.add("/about", () => {
  return <About />;
});

router.resolve();

It’s Fun Project :).