Building blocks for the frontend.
featuring
- no shadow DOM
- no external runtime dependencies
- @substrate-system/tonic — A Low Profile Component Framework
- @substrate-system/template-web-component — A template for vanilla web componenets
- @substrate-system/web-component — A minimal parent component to inherit from
- Where web components shine
- HTML Web Components
- Let's create a Web Component from scratch!
There is a strict convention with how these components are factored. To keep
server-side rendering easy, an isomorphic file is exposed at /ssr. This file
exposes a single function , html, that takes attributes as an object and
returns a string of HTML.
The frontend component uses this to render itself in the connectedCallback
function.
This makes it easy to render a component serverside. Just import the
/ssr path:
import { html } from '@substrate-system/example-component/ssr'
// return an HTML string
html({
disabled: true,
placeholder: 'hello'
})Some other frontend libraries:
- @substrate-system/tapzero — Zero dependency test framework
- @substrate-system/dom — Helpers for working with the DOM in tests
- route-event — Simple client side route event
- @substrate-system/routes — Route matcher
- @substrate-system/debug — Debug utility