radi
Version:
**Radi** is a tiny javascript framework.
206 lines (183 loc) • 4.72 kB
HTML
<html style="width: 100%; height: 100%; overflow: hidden">
<head>
<meta charset="utf-8">
<title>Radi.js Perf Demo</title>
<style>
body {
background: #fff;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 15px;
line-height: 1.7;
margin: 0;
padding: 30px;
}
a {
color: #4183c4;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
h1 {
border-bottom: 1px solid #ddd;
font-size: 2.0em;
font-weight: bold;
margin: 0 0 15px;
padding: 0;
}
button {
font-weight: bold;
line-height: 2;
}
</style>
</head>
<body>
<h1>Radi.js Perf Demo</h1>
<div id="app"></div>
<script src="../../dist/radi.js"></script>
<!-- <script src="../../src/devtools.js"></script> -->
<script>
const { r, component, cond, list, link, mount, l } = radi;
const dot = component({
view: function () {
var size = l(this.size + 'px');
return r('div.dot',
{
style: {
position: 'absolute',
font: 'normal 15px sans-serif',
textAlign: 'center',
cursor: 'pointer',
width: size,
height: size,
left: l(this.x + 'px'),
top: l(this.y + 'px'),
borderRadius: l((this.size / 2) + 'px'),
lineHeight: size,
background: l(this.hover ? '#ff0' : '#61dafb')
},
onmouseenter: () => { this.hover = true; },
onmouseleave: () => { this.hover = false; },
},
l(this.hover ? '*' + this.text + '*' : this.text)
);
},
props: {
x: Number,
y: Number,
size: Number,
text: String,
},
state: {
hover: false
}
});
var targetSize = 31;
const triangle = component({
name: 'triangle',
view: function() {
var s = this.s;
if (s <= targetSize) {
return r('div',new dot().props({
x: this.x - (targetSize / 2),
y: this.y - (targetSize / 2),
size: targetSize,
text: l(this.seconds),
}));
}
s = s / 2;
// Radi don't really care about 'slowdown' this, but it's here cuz someone
// could ask for this to be here
var slowDown = true;
if (slowDown) {
var e = performance.now() + 0.8;
while (performance.now() < e) {
// Artificially long execution time.
}
}
return r('div',
new triangle().props({
x: this.x,
y: this.y - (s / 2),
s: s,
seconds: l(this.seconds)
}),
new triangle().props({
x: this.x - s,
y: this.y + (s / 2),
s: s,
seconds: l(this.seconds)
}),
new triangle().props({
x: this.x + s,
y: this.y + (s / 2),
s: s,
seconds: l(this.seconds)
})
);
},
props: {
x: Number,
y: Number,
s: Number,
seconds: Number
}
});
const main = component({
name: 'main',
state: {
elapsed: 0,
scale: 1,
seconds: 0,
start: null
},
view: function () {
return r('div',
{
style: {
position: 'absolute',
transformOrigin: '0 0',
left: '50%',
top: '50%',
width: '10px',
height: '10px',
background: '#eee',
transform: l('scaleX(' + (this.scale / 2.1) + ') scaleY(0.7) translateZ(0.1px)')
}
},
new triangle().props({
x: 0,
y: 0,
s: 1000,
seconds: l(this.seconds)
})
);
},
actions: {
onMount() {
console.log('mounted');
this.start = Date.now();
this.nextFrame();
this.nextSecond();
},
nextFrame() {
this.elapsed = Date.now() - this.start;
const t = (this.elapsed / 1000) % 10;
this.scale = 1 + (t > 5 ? 10 - t : t) / 10;
window.requestAnimationFrame(() => {
this.nextFrame();
});
},
nextSecond() {
this.seconds = (this.seconds > 9) ? 0 : this.seconds + 1;
setTimeout(() => {
this.nextSecond();
}, 1000);
}
}
});
mount(new main(), 'app');
</script>
</body>
</html>