@xlit/router NPM

@xlit/router

Vanilla router custom element with multiple routes and middlewares.

Installation

npm i @xlit/router

Getting started

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>@xlit/router</title>
</head>

<body>
  <div id="outlet"></div>

  <template id="homeTemplate">
    <div>
      <h1>Home</h1>
    </div>
  </template>

  <script type="module" src="index.js"></script>
</body>
</html>

Write index.js:

import { Navigator, Router, template, component } from '@xlit/router';

customElements.define('x-login', class Login extends HTMLElement {
  // ...
});

const router = new Router(document.getElementById('outlet'))
  .use(async (ctx, next) => {
    // do something before
    await next();
    // do something after
  })
  // route with template element
  .route('/', template(document.getElementById('homeTemplate'))
  // route with custom element component
  .route('/login', component('x-login'))
  // route with lazy loading component
  .route('/lazy', component('x-lazy', () => import('./lazy.js')));

await Navigator.start(router);

Write lazy.js:

customElements.define('x-lazy', class Lazy extends HTMLElement {
  // ...
});

Navigate

Navigator.push('/foo');
Navigator.replace('/foo');
Navigator.pop();
Navigator.go(1);

Router Mode

Router mode can be configured from mode router options whether use push state history or hash-bang mode. Default value is history.

const defaultRouter = new Router(outlet); // history
const hashRouter = new Router(outlet, { mode: 'hash' }); // hash
const historyRouter = new Router(outlet, { mode: 'history' }); // history

router customelements webcomponents

@infinitebrahmanuniverse/nolb-_xl @everything-registry/sub-chunk-1030 @xlit/a11y-menu

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago