lightview
Version:
Small, simple, powerful web UI and micro front end creation ... Great ideas from Svelte, React, Vue and Riot combined.
98 lines (94 loc) • 3.29 kB
HTML
<head>
<title>Form</title>
<script src="../../lightview.js?as=x-body"></script>
<script>Lightview.whenFramed(({as,unhide,importAnchors,isolated,enableFrames}) => {
Lightview.bodyAsComponent({as,unhide,importAnchors,isolated,enableFrames});
})</script>
</head>
<body style="height:fit-content;width:fit-content;display:flex;flex-direction:column;max-height:100%;overflow:auto;">
<div style="margin:20px">
<p>
<input type="text" value="${color}">
<input type="checkbox" value="${checked}">
<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>
<br><button l-on:click="${placeOrder}">Place Order</button>
</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 id="lightview">
(document.currentComponent||(document.currentComponent=document.body)).mount = async function() {
const orders = [];
self.variables({
checked: "boolean"
}, {
reactive
});
self.variables({
color: "string",
hamburger: Array
}, {
reactive, exported
});
self.addEventListener("connected", () => {
color = "green";
checked = true;
hamburger = ["lettuce"];
});
self.placeOrder = () => {
orders.push(hamburger);
message = {hamburger};
};
// 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.getVariableValue(name))}`;
el.appendChild(line);
});
const line = document.createElement("div");
line.innerText = "Previous Orders";
el.appendChild(line);
orders.forEach((order) => {
const line = document.createElement("div");
line.innerText = JSON.stringify(order);
el.appendChild(line);
});
};
variableValues();
addEventListener("change", () => {
variableValues()
});
}
</script>
</body>
</html>