als-component
Version:
lightweight JavaScript library for creating reactive, server-rendered, and browser-based components.
30 lines (26 loc) • 851 B
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="/component.js"></script>
<title>Counter</title>
</head>
<body>
<div component="App"></div>
</body>
<script>
class App extends Component {
constructor(props, inner) { super(props, inner) }
render({count=0}) {
return /*html*/`<div>
<input type="text" load="${this.action('load',(element) => element.focus())}">
<button click="${this.action('click',() => this.update({count:count-1}))}">-</button>
<span>${count}</span>
<button click="${this.action('click',() => this.update({count:count+1}))}">+</button>
</div>`
}
}
new App({count:5}).update()
</script>
</html>