template tonic

An example of tonic + client-side routing.

use

1. Use the template button in github. Or clone this then rm -rf .git && git init. Then npm i && npm init.

2. Edit the source code in src/index.js.

3. start a local server

npm start

see a demonstration

template-tonic-spa.netlify.app

featuring

• 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

Start a local development server

npm start

build

Create a static website in public

npm run build

structure

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.

vite

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

ESM

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>

See an article about import maps

test

npm test