lightview
Version:
Small, simple, powerful web UI and micro front end creation ... Great ideas from Svelte, React, Vue and Riot combined.
34 lines (28 loc) • 1.22 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Remote</title>
<script src="../../lightview.js?as=x-body"></script>
</head>
<body>
<p>You must run the file "remote-server.js" for this example to work.</p>
<input id="myRemote" type="text" value="${JSON.stringify(myRemote)}" size="${JSON.stringify(myRemote).length}"><br>
<button l-on:click="${patch}">Patch</button><br>
<button l-on:click="${replace}">Replace</button>
<script id="lightview">
(document.currentComponent||(document.currentComponent=document.body)).mount = async function() {
const {remote} = await import("../../types.js");
self.variables({myRemote: "object"}, {reactive, remote: remote("http://localhost:8000/remote.json")});
await myRemote; // must await remotes before the first time they are used, e.g. before HTML is rendered
self.patch = () => {
const json = JSON.parse(document.body.getElementById("myRemote").value);
Object.assign(myRemote, json);
};
self.replace = () => {
myRemote = JSON.parse(document.body.getElementById("myRemote").value);
};
}
</script>
</body>
</html>