Synapse

Client-side routing framework

Features

Synapse brings declarative routing and request/response semantics on top of DNA Web Components, so an App can drive navigation like a small client-side framework.

Web Components first

App extends DNA's Component, so routing is just another Web Component in your page — no separate root or portal needed.

Request/Response pipeline

Routes and middlewares connect through a before/after pipeline: Request and Response objects flow through each step, with priorities and pattern matching.

Declarative route patterns

Routes match Express-style patterns — static segments, :name params, :name* wildcards and a catch-all * — resolved by a Router you can also use standalone.

Pluggable history

Swap between the in-memory History and BrowserHistory implementations to control how navigation is tracked and persisted.

Get the library

Install via NPM:

npm i @chialab/synapse

yarn add @chialab/synapse

pnpm add @chialab/synapse

Create an application

import { customElement, render } from '@chialab/dna';
import { App } from '@chialab/synapse';

@customElement('demo-app')
class DemoApp extends App {
    static routes = [
        {
            pattern: '/',
            render: () => (
                <main>
                    <h1>Home</h1>
                </main>
            ),
        },
        {
            pattern: '*',
            render: () => (
                <main>
                    <h1>Not found</h1>
                </main>
            ),
        },
    ];

    render() {
        return (
            <>
                <header>
                    <h1>Synapse</h1>
                </header>
                <nav>
                    <a href={this.router.resolve('/')}>Home</a>
                </nav>
                {super.render()}
            </>
        );
    }
}

const app = render(<DemoApp base="/" />, document.getElementById('app'));

app.start('/');

Development

Build

Install the dependencies and run the build script:

pnpm install

pnpm build

This will generate the ESM bundle in the dist folder, as well as the declaration files.

Test

Run the test script:

pnpm test

License

Synapse is released under the MIT license.