How to use spect - 5 common examples
To help you get started, we’ve selected a few spect examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
spectjs / spect / example / counter.js View on Github 
import $, { state, html } from 'spect'
$('#counter', el => {
let { value = 0 } = state()
// html side-effect
html`<${el}>
<input value="${value}">
<button> state({value: value+1})}>+</button>
<button> state({value: value-1})}>-</button>
`
})
$(document.body, el => html`import $, { state, html } from 'spect'
$('#counter', el => {
let { value = 0 } = state()
// html side-effect
html`<${el}>
<input value="${value}">
<button> state({value: value+1})}>+</button>
<button> state({value: value-1})}>-</button>
`
})
$(document.body, el => html`import $, { html, route } from 'spect'
$('#app', el => html`
<header title="App title">
<aside>
<main>${page}</main>
`)
function page(main) {
html`Loading...`
// unredirect
path = ({
'/dashboard': '/',
'/signIn': '/sign-in',
'/user/:userId': '/user'
})[path]
import(path).then(html, html)</aside></header>import $, {html, state} from 'spect'
const isValidEmail = (s) => /.+@.+\..+/i.test(s);
$('#mount', main)
function main(el) {
let {value} = state()
html`<${el}>
Please enter an email address:
<input name="email"> state({value: e.target.value})}/>
The address is ${isValidEmail(value)}
`
}function main(el) {
let {value} = state()
html`<${el}>
Please enter an email address:
<input name="email"> state({value: e.target.value})}/>
The address is ${isValidEmail(value)}
`
}
