Zeit-router NPM

zeit-integration-router

What is this?

This is a small router concept for zeit integrations. It supports the basic functionality of a router and some extras like parameters.

DEMO: https://zeit.co/integrations/integration-router Example: go to src/example

How to?

The only package you need is zeit-router. Install and import it at the top of your entrypoint.

npm i zeit-router
# or
yarn add zeit-router

Create an instance:

import { ZeitRouter } from 'zeit-router';

// with optinal start route (default: '/')
const app = new ZeitRouter('/');

Note: The current route is saved to currentPath inside metadata, so do not overwrite it.

libs/router.ts returns a class. The class has 2 Methods.

add(path, cb, silent)

This method adds a route. You can define the path like you do in express or other frameworks. The callback function gives you handler(zeitClient, payload), router and params. You have to return a htm method. silent(default: false): If this parameter is set to true, this page will not be rendered again after a reload and the previous page will be displayed instead. This is a useful flag for confirmation fields.

app.add('/:id', ({ handler, router, params }) => {
  return htm`<Box>
    <B>${params.id}</B>
  </Box>`;
});

uiHook(handler, router)

This methods wraps withUiHook and adds an additional router-object to the callback function.

export default app.uiHook(async (handler: HandlerOptions, router: Router) => {
  return htm`<Page>${router.currentPath}</Page>`;
});

`router`-object

async navigate(path)

Navigate through a specific route. Works only inside the app.uiHook.

currentRoute

Shows the current route. Returns a promise.

previousRoute

Shows the previous route. Returns a promise.

renderRoute(path)

Renders a specific route.

Routing

All actions which start with a /, will automatically navigate trough a matching route. You can also navigate with the router.navigate method.

Full Example:

import { ZeitRouter } from 'zeit-router';
import { HandlerOptions, Router } from '../types';

const app = new ZeitRouter('/');

app.add('/', () => {
  return htm`<Box>
    <B>home</B>
  </Box>`;
});

app.add('/parameter/:id', ({ params }) => {
  return htm`<Box>
    <B>${params.id}</B>
  </Box>`;
});

const uiHook = app.uiHook(async (handler: HandlerOptions, router: Router) => {
  const {
    payload: { action }
  } = handler;

  if (action === 'home') {
    await router.navigate('/');
  }

  return htm`<Page>
    <Button action="home" small highlight>home</Button>
    <Button action="/parameter/123" small highlight>parameter</Button>
    <Button action="fail" small warning>fail</Button>

    ${await router.currentRoute}

    Your are here: <B>${router.currentPath}</B>
  </Page>`;
});

Development

clone this repository
install the now cli
run following commands:

yarn install && yarn now:dev

npm install && npm run now:dev

The server starts on port 5005

More information

You can also use yarn dev or npm run dev. This command will start a dev server which supports autoreloading on file change. (You need to install nodemon)