apprun
Version:
JavaScript library that has Elm inspired architecture, event pub-sub and components
37 lines (36 loc) • 922 B
HTML
<html>
<head>
<meta charset="utf-8">
<title>Counter web component</title>
<style>
body {
font-family: Lato;
}
</style>
</head>
<body>
<h1>AppRun component as the web component. </h1>
<my-app id="counter"></my-app>
<script src="https://cdnjs.cloudflare.com/ajax/libs/custom-elements/1.1.2/custom-elements.min.js"></script>
<script src="dist/apprun-html.js"></script>
<script>
class Counter extends Component {
constructor() {
super();
this.state = 0;
this.view = state => `<div>
<h1>${state}</h1>
<button onclick='counter.run("-1")'>-1</button>
<button onclick='counter.run("+1")'>+1</button>
</div>`;
this.update = {
'+1': state => state + 1,
'-1': state => state - 1
};
}
}
app.webComponent('my-app', Counter, {shadow: true});
</script>
</body>
</html>