on-page
A router for web components. Render a template when the page matches a route. When you're on a page. That's it.
Example
This example uses Bram templates to pass the pages params
to a few components. Support for other templating engines is coming soon.
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/users/14">Matthew</a></li>
</ul>
</nav>
<on-page route="/" default>
<template>
<home-page :params="{{params}}"></home-page>
</template>
</on-page>
<on-page route="/about">
<template>
<about-page></about-page>
</template>
</on-page>
<on-page route="/users/:id">
<template>
<user-page :params="{{params}}"></user-page>
</template>
</on-page>
<template id="home-template">
<h1>Home</h1>
<p>This is home! Welcome!</p>
</template>
<template id="about-template">
<h1>About</h1>
<p>This is about this page!</p>
</template>
<template id="user-template">
<h1>User</h1>
<h2>Name</h2>
<p>Welcome {{id}}, this is kind of cool</p>
</template>
<script>
[
['home-page', '#home-template'],
['about-page', '#about-template'],
['user-page', '#user-template']
].forEach(([tagName, template]) => {
class Page extends Bram.Element {
get template() {
return template;
}
}
customElements.define(tagName, Page);
});
</script>
Install
On npm
npm install on-page --save
On Bower
bower install on-page2 --save
License
BSD 2 Clause