template tonic

An example of tonic + client-side routing.

use

Use the template button in github. Or clone this then rm -rf .git && git init. Then npm i && npm init.
Edit the source code in src/index.js.
start a local server

npm start

preversion npm hook -- use @nichoth/check-max-deps to validate the number of dependencies, and lint.
eslint via standardx -- npm run lint
type checking via a jsconfig file

npm start

Create a static website in public

npm run build

This uses client side routing and the single page app pattern. You would want to serve the same html for any route that is requested.

We are using application state in the root component

this.state = {
    route: (location.pathname + location.search),
    count: 0
}

And passing state to child components as props:

this.html`<my-count id="count" count=${this.state.count}></my-count>`

This means that the state persists between route changes.

This uses vite as a development server. This makes it easy to develop as a single page app.

We are depending on the browser resolving ES modules. The module @nichoth/tonic is marked as external in the vite config:

{
    build: {
        rollupOptions: {
            external: ['@nichoth/tonic']
        }
    }
}

This pairs with our html file:

<script type="importmap">
    {
        "imports": {
            "@nichoth/tonic": "./tonic.min.js"
        }
    }
</script>

npm test