lightview
Version:
Small, simple, powerful web UI and micro front end creation ... Great ideas from Svelte, React, Vue and Riot combined.
94 lines (90 loc) • 2.09 kB
HTML
<html>
<head>
<title>Types</title>
<script src="../../lightview.js?as=x-body"></script>
</head>
<body>
<div style="margin:20px">
<p>
<button l-on:click="${run}">Run</button>
<button l-on:click="${clear}">Clear</button>
</p>
<p id="console"></p>
</div>
<script type="lightview/module">
const {string} = await import("../types.js");
debugger;
self.run = () => {
self.variables({
err: Error,
astring: "string",
asdvancedstring: string({maxlength:10}),
aDate: Date,
});
try {
self.variables({
badvariable: string({maxlength:"10"}),
});
} catch(e) {
err = e;
}
try {
astring = "my string";
} catch (e) {
err = e;
}
try {
asdvancedstring = "my string";
} catch (e) {
err = e;
}
try {
asdvancedstring = "my long string";
} catch (e) {
err = e;
}
try {
astring = 1;
} catch (e) {
err = e;
}
try {
aDate = new Date();
} catch (e) {
err = e;
}
try {
aDate = 1;
} catch (e) {
err = e;
}
try {
err = 1;
} catch (e) {
err = e;
}
};
// demo instrumentation
self.clear = () => {
const cnsl = self.getElementById("console");
while (cnsl.lastChild) cnsl.lastChild.remove();
};
addEventListener("change", ({
variableName,
value
}) => {
const cnsl = self.getElementById("console");
if (cnsl) {
const message = document.createElement("div");
if (variableName === "err") {
message.innerHTML = `<b>></b> ${value}<br>`;
} else {
message.innerHTML = `<b>></b> ${variableName} = ${value}<br>`;
}
cnsl.appendChild(message);
}
});
</script>
</body>
</html>