lightview
Version:
Small, simple, powerful web UI and micro front end creation ... Great ideas from Svelte, React, Vue and Riot combined.
75 lines (69 loc) • 2.9 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Lightview:Tutorial:Conventional Javascript</title>
<link href="../css/tutorial.css" rel="stylesheet">
<link href="../components/repl.html" rel="module">
<link href="../slidein.html" rel="module">
<script src="../javascript/highlightjs.min.js"></script>
<script src="../javascript/marked.min.js"></script>
<script src="../javascript/utils.js"></script>
</head>
<body class="tutorial-body">
<script src="../javascript/lightview.js"></script>
<div class="tutorial-instructions">
<l-slidein src="./contents.html" class="toc"></l-slidein>
<div class="markdown">
## Conventional and Lightview Javascript
All Lightview development involves the creation of components and all Lightview components have at least and at most one
`script` with the id "lightview". There can also be other `script` elements in a component file.
If you do not explicitly create a component, then (as with this example), the body of the file containing the script is
treated like a component.
You can use conventional JavaScript with `let`, `const`, closures, etc. inside your Lightview script. And,
Lightview scripts always support a top level `await`, even though they are not declared as `type="module"`.
Try changing `loops = 5` to another number and watch the script do a countdown. Note that the countdown does not start
until the component has received a `mounted` event. This is the point at which script with the id "lightview" has
been fully processed, i.e. all variables have been declared and initialized and an initial pass has being
made to replace variables in the HTML.
</div>
<button class="nav-previous"><a href="./5.2-extended-functional-types.html" target="content">Previous</a></button>
<button class="nav-next"><a href="./7-monitoring-with-observers.html" target="content">Next</a></button>
</div>
<div style="float:right;margin-right:10px">
<h2></h2>
<l-repl id="repl" style="min-height:95vh;min-width:600px;" previewpinned>
<div slot="bodyhtml"></div>
<div slot="script"></div>
<template slot="src">
<l-head>
<script src="../javascript/lightview.js?as=x-body"></script>
</l-head>
<l-body>
${count}
</l-body>
<script id="lightview">
var tick = () => {
return new Promise((resolve) => setTimeout(() => resolve(),1000))
}
currentComponent.mount = function() {
let loops = 5,
i = 0;
this.variables({count:"any"},{reactive,set:loops});
this.addEventListener("mounted",async () => {
while(loops--) {
await tick();
count = loops;
};
count = "Go";
})
}
</script>
</template>
</l-repl>
</div>
<script>
processMarkdown();
</script>
</body>
</html>