lightview
Version:
Small, simple, powerful web UI and micro front end creation ... Great ideas from Svelte, React, Vue and Riot combined.
69 lines (64 loc) • 2.03 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Scratch</title>
<script src="../../lightview.js?as=x-body"></script>
</head>
<body>
<div style="margin:20px;padding:5px;border:1px;border-style:solid;border-color:${color}">
<p>
<input type="text" value="${color}">
<input type="radio" name="color" value="red">
<input type="radio" name="color" value="yellow">
<input type="radio" name="color" value="green">
<select value="${color}">
<option value="red">red</option>
<option>yellow</option>
<option> green</option>
</select>
<div>Hamburger options:</div>
<select value="${hamburger}" multiple>
<option value="lettuce">lettuce</option>
<option>tomato</option>
<option>cheese</option>
</select>
</p>
Expose: <input type="checkbox" value="${checked}">
<p l-if="${checked}">
Now you've done it. You've exposed me.
</p>
<ul l-for="${hamburger}">
<li>${item}</li>
</ul>
<ul l-for:entries="${hamburger}">
<li>${item[0]}:${item[1]}</li>
</ul>
<ul l-for:values="${hamburger}">
<li>${item}</li>
</ul>
<p id="variables">
</p>
</div>
<script type="lightview/module">
self.variables({color:string,checked:boolean,hamburger:Array},{reactive});
color = "green";
checked = true;
hamburger = ["lettuce"];
// demo instrumentation
const variableValues = () => {
const el = self.getElementById("variables");
while (el.lastElementChild) el.lastElementChild.remove();
self.getVariableNames().forEach((name) => {
const line = document.createElement("div");
line.innerText = `${name} = ${JSON.stringify(self.getValue(name))}`;
el.appendChild(line);
});
};
variableValues();
addEventListener("change", () => {
variableValues()
});
</script>
</body>
</html>