A router for zeit applications
MIT License
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
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.
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>`;
});
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
-objectapp.uiHook
.All actions
which start with a /
, will automatically navigate trough a matching route.
You can also navigate with the router.navigate
method.
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>`;
});
yarn install && yarn now:dev
or
npm install && npm run now:dev
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
)
Feel free to add PRs or open Issues (: