radi
Version:
**Radi** is a tiny javascript framework.
77 lines (67 loc) • 1.55 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#app {
text-align: center;
margin: 100px 0;
font-family: Tahoma, Arial;
}
#app .counter {
font-size: 60px;
font-weight: bold;
padding-bottom: 10px;
}
#app button {
font-size: 20px;
border-radius: 5px;
padding: 0 12px;
margin: 0 4px;
line-height: 30px;
outline: none;
}
</style>
</head>
<body>
<div id="app"></div>
<script src="./main.bundle.js"></script>
<!-- <script src="../src/devTools"></script> -->
<script>
const radi = window.$Radi || null;
console.log(radi, { window })
const { r, l, mount, component } = radi;
const counter = component({
view: function () {
return r('div',
{ id: 'app' },
r('div',
{ class: 'counter' },
l(this.counter)
),
r('div',
{ class: 'buttons' },
r('button', { onclick: this.down, disabled: l(this.counter <= 0) }, '-'),
r('button', { onclick: this.up }, '+')
)
)
},
state: {
counter: 0
},
actions: {
up() {
this.counter += 1;
},
down() {
this.counter -= 1;
}
}
});
mount(new counter(), document.body);
</script>
</body>
</html>