@beforesemicolon/router

Web Component Router (beta)

Web component router based on Markup.

Motivation

• web standards alone routing is hard to work with
• it takes time to implement a custom router
• most routers out there are framework specific
• routers out there require JavaScript code to be written and a powerful component tag simplifies that
• available routers dont handle both JavaScript and HTML files
• web components work with everything which makes it a perfect candidate for a router

<nav>
    <page-link path="/">Home</page-link>
    <page-link path="/contact">Contact</page-link>
</nav>

<page-route path="/">
    Home content
</page-route>

<page-route path="/contact">
    Contact content
</page-route>

<page-route path="/404">
    404 - Page not found!
</page-route>

<page-redirect to="/404"></page-redirect>

Examples

• Demo Doc
• Tabs

Installation

npm install @beforesemicolon/router

via CDN:

<!-- required WebComponent Markup to be present -->
<script src="https://unpkg.com/@beforesemicolon/web-component/dist/client.js"></script>


<!-- use the latest version -->
<script src="https://unpkg.com/@beforesemicolon/router/dist/client.js"></script>

<!-- use a specific version -->
<script src="https://unpkg.com/@beforesemicolon/router@0.1.0/dist/client.js"></script>

<!-- link you app script after -->
<script>
    const { ... } = BFS.ROUTER
</script>

Documentation

Full Documentation