README
Synapse • Application framework built on the top of DNA Web Components.
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 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.