@chialab/synapse

Application framework built on the top of DNA Web Components.

Usage no npm install needed!

<script type="module">
  import chialabSynapse from 'https://cdn.skypack.dev/@chialab/synapse';
</script>

README

Synapse logo

Synapse • Application framework built on the top of DNA Web Components.

NPM


Get the library

Usage via unpkg.com, as UMD package:

<script src="https://unpkg.com/@chialab/synapse" type="text/javascript"></script>

or as ES6 module:

import { App, Router, ... } from 'https://unpkg.com/@chialab/synapse?module';

Install via NPM:

$ npm i @chialab/synapse
$ yarn add @chialab/synapse
import { App, Router, ... } from '@chialab/synapse';

Create an application

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

const routes = [
    {
        pattern: '/',
        render(req, res) {
            return html`<div>
                <h1>Home</h1>
            </div>`;
        },
    },
    {
        handler(req, res) {
            res.data = new Error('not found');
        },
        render(req, res) {
            return html`<div>
                <details>
                    <summary>${res.data.message}</summary>
                    <pre>${res.data.stack}</pre>
                </details>
            </div>`;
    },
}];

class DemoApp extends App {
    render() {
        return html`
            <header>
                <h1>Synapse 3.0</h1>
            </header>
            <nav>
                <ul>
                    <li>
                        <a href="/">Home</a>
                    </li>
                </ul>
            </nav>
            <main>
                ${super.render()}
            </main>
        `;
    }
}

customElements.define('demo-app', DemoApp);

const app = render(document.getElementById('app'), html`<${DemoApp} routes=${routes} />`);
app.navigate('/');

Development

Build status codecov

Build the project

Install the dependencies and run the build script:

$ yarn install
$ yarn build

This will generate the UMD and ESM bundles in the dist folder, as well as the declaration file.

Test the project

Run the test script:

$ yarn test

Release

The release script uses Semantic Release to update package version, create a Github release and publish to the NPM registry.

An environment variable named GH_TOKEN with a generated Github Access Token needs to be defined in a local .env file.

$ echo 'export GH_TOKEN="abcxyz"' > .env

Now you are ready to run the release command:

$ yarn release

License

Synapse is released under the MIT license.