Utilities for routing client-side pages.


stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
00Oct 2, 2017Aug 23, 2017Minified + gzip package size for @ajces/router in KB


AJCES router

This is forked from hyperapp/router and extracts the match logic into a framework agnostic Matcher. Additional handling of meta tag diffing on route changes, has also been added, using array of route objects [{path, view, meta}] instead of an array of arrays which I feel is clearer in the code.

The defaultMeta provided to the Router will allow defaults for routes that choose not to specify a meta value, anything supplied to a route meta object will be merged with defaultMeta via Object.assign({}, defaultMeta, match.meta)

There are meta tags that cause bugs in certain browsers if modified after page load, these are skipped in our meta diff to avoid issues: origin, referrer, viewport. ( any other key value pair should work in the meta object )

import { h, app } from "hyperapp";
import { router, updateMeta, Link, Router, Route } from "@ajces/router";
import { Header, Nav, Footer, About, Profile, Nested, NestedRoutes } from "./components";

  state: { count: 0 },
  view: (state, actions) => (
      <Header />
      <Nav />
          title: "Hyperapp Meta Router!",
          description: "hyperapp componad based routing experiment",
          keywords: "hyperapp, routing, router, meta",
          author: "Andy Johnson"
        <Route path="/" meta={params => ({ title: "Home" })} component={props => (
            <Link to="/about" go={actions.router.go} />
            <Link to="/profile/andy" go={actions.router.go} />
        )} />
        <Route path="/about" onroute={match => console.log(match)} component={About} />
        <Route path="/profile/:user" meta={params => ({ title: `Profile - ${params.user}` })} component={Profile} />
        <Route path="/nested" component={Nested}>
          <Route path="/routes" onroute={match => console.log("matched path /nested/routes")} component={NestedRoutes}>
      <Footer />
  mixins: [router()]


@ajces/router is MIT licensed. See LICENSE.

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.