npm - lightview - Versions diffs - 1.7.2-b → 1.8.2 - Mend

lightview 1.7.2-b → 1.8.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (122) hide show

package/README.md +15 -16
package/docs/CNAME +1 -0
package/docs/api.html +674 -0
package/docs/blank.html +10 -0
package/docs/comparedto.html +89 -0
package/docs/components/chart-repl.html +69 -0
package/docs/components/chart.html +17 -0
package/{components → docs/components}/components.js +31 -11
package/docs/components/contents.html +17 -0
package/docs/components/gantt-repl.html +61 -0
package/docs/components/gantt.html +42 -0
package/docs/components/gauge-repl.html +66 -0
package/docs/components/gauge.html +20 -0
package/docs/components/orgchart-repl.html +64 -0
package/docs/components/orgchart.html +41 -0
package/docs/components/repl-as-src.html +17 -0
package/docs/components/repl-repl.html +95 -0
package/docs/components/repl.html +527 -0
package/docs/components/timeline-repl.html +72 -0
package/docs/components/timeline.html +44 -0
package/docs/components.html +14 -0
package/docs/css/highlightjs.min.css +9 -0
package/docs/css/tutorial.css +35 -0
package/docs/examples/anchor.html +11 -0
package/{components/chart/example.html → docs/examples/chart.html} +6 -4
package/docs/examples/counter.html +26 -0
package/{examples → docs/examples}/counter.test.mjs +0 -0
package/docs/examples/counter2.html +26 -0
package/{examples → docs/examples}/directives.html +20 -18
package/{examples → docs/examples}/foreign.html +1 -1
package/docs/examples/forgeinform.html +98 -0
package/docs/examples/form.html +61 -0
package/{examples → docs/examples}/gauge.html +4 -2
package/{examples → docs/examples}/invalid-template-literals.html +6 -4
package/{examples → docs/examples}/medium/remote.html +1 -1
package/docs/examples/message.html +18 -0
package/{examples → docs/examples}/nested.html +2 -2
package/docs/examples/object-bound-form.html +34 -0
package/{examples → docs/examples}/remote-server.js +0 -0
package/docs/examples/remote.html +34 -0
package/{examples → docs/examples}/remote.json +0 -0
package/{examples → docs/examples}/scratch.html +1 -1
package/docs/examples/sensors/index.html +44 -0
package/{examples → docs/examples}/sensors/sensor-server.js +0 -0
package/docs/examples/shared.html +41 -0
package/{examples → docs/examples}/template.html +1 -1
package/{examples → docs/examples}/timeline.html +2 -2
package/docs/examples/todo.html +40 -0
package/docs/examples/top.html +10 -0
package/{examples → docs/examples}/types.html +1 -1
package/{examples → docs/examples}/xor.html +22 -20
package/docs/examples.html +25 -0
package/docs/index.html +44 -0
package/docs/javascript/codejar.min.js +8 -0
package/docs/javascript/highlightjs.min.js +1173 -0
package/docs/javascript/isomorphic-git.js +9 -0
package/docs/javascript/json5.min.js +1 -0
package/docs/javascript/lightning-fs.js +1 -0
package/docs/javascript/lightview.js +1285 -0
package/docs/javascript/marked.min.js +6 -0
package/docs/javascript/peerjs.min.js +70 -0
package/docs/javascript/turndown.js +973 -0
package/docs/javascript/types.js +606 -0
package/docs/javascript/utils.js +45 -0
package/docs/lightview.html +63 -0
package/docs/old_index.html +965 -0
package/docs/old_index.md +1132 -0
package/docs/slidein.html +51 -0
package/docs/tutorial/0-getting-started.html +67 -0
package/docs/tutorial/1-intro-to-variables.html +103 -0
package/docs/tutorial/10-template-components.html +80 -0
package/docs/tutorial/11-linked-components.html +76 -0
package/docs/tutorial/12-imported-components.html +67 -0
package/docs/tutorial/13-input-binding.html +94 -0
package/docs/tutorial/14-automatic-variable-creation.html +74 -0
package/docs/tutorial/15-form-binding.html +110 -0
package/docs/tutorial/16-if-directive.html +60 -0
package/docs/tutorial/17-loop-directives.html +83 -0
package/docs/tutorial/18-sanitizing-and-escaping-input.html +79 -0
package/docs/tutorial/2-imported-and-exported-variables.html +80 -0
package/docs/tutorial/3-data-types.html +89 -0
package/docs/tutorial/4-extended-data-types.html +83 -0
package/docs/tutorial/5-extended-functional-types.html +96 -0
package/docs/tutorial/5.1-extended-functional-types.html +79 -0
package/docs/tutorial/5.2-extended-functional-types.html +70 -0
package/docs/tutorial/6-conventional-javascript.html +75 -0
package/docs/tutorial/7-monitoring-with-observers.html +107 -0
package/docs/tutorial/8-event-listeners.html +65 -0
package/docs/tutorial/9-intro-to-components.html +91 -0
package/docs/tutorial/contents.html +32 -0
package/docs/tutorial/my-component.html +29 -0
package/docs/tutorial/remote-value.json +4 -0
package/docs/websiterepl.html +46 -0
package/lightview.js +499 -363
package/lightview.min.js +1 -0
package/lightview_good.js +1267 -0
package/lightview_optimized.js +1274 -0
package/package.json +7 -2
package/repl_hold.html +320 -0
package/test/basic.html +29 -17
package/test/basic.test.mjs +1 -11
package/test/extended.html +16 -19
package/types.js +118 -36
package/unsplash.key +1 -0
package/components/chart/chart.html +0 -15
package/components/chart.html +0 -81
package/components/gantt/example.html +0 -27
package/components/gantt/gantt.html +0 -34
package/components/gauge/example.html +0 -28
package/components/gauge/guage.html +0 -19
package/components/gauge.html +0 -57
package/components/timeline.html +0 -81
package/examples/chart.html +0 -66
package/examples/counter.html +0 -24
package/examples/forgeinform.html +0 -96
package/examples/form.html +0 -59
package/examples/message.html +0 -12
package/examples/object-bound-form.html +0 -32
package/examples/remote.html +0 -32
package/examples/sensors/index.html +0 -30
package/examples/todo.html +0 -38
package/examples/top.html +0 -10

package/docs/tutorial/5-extended-functional-types.html ADDED Viewed

@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Lightview:Tutorial:Extended Functional Type:Remote</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">
+##  Extended Functional Type - Remote
+In addition to `constant`, `exported`, `imported`, and `reactive`, Lightview supports the functional types `remote`,
+`shared`, and `observed`.
+- `remote` automatically gets a value from a URL
+- `shared` automatically synchronizes a value across all instances of the same component
+- `observed` in like import, except it changes the variable value every time its corresponding attribute changes on the component
+These types must be loaded from the file `types.js` as shown in the example REPL.
+If you want to import all of them in an efficient manner, do this:
+```javascript
+const {remote, shared, observed} = await import("../types.js");
+this.variables(
+    { remote: "function"},
+    { constant: remote }
+);
+this.variables(
+    { remote: "function"},
+    { constant: shared }
+);
+this.variables(
+    { remote: "function"},
+    { constant: observed }
+);
+```
+For the demo REPL, the file located at `./tutorial/remote-value.json` has the contents `{"name":"joe","age":27}`. Try replacing
+`./tutorial/remote-value.json` with `http://api.open-notify.org/astros.json` to see how many people are in space right now.
+You may have noted that although `remote` is imported as a function, it is not used as such. For details on how to use
+`remote` with a configuration object to support TTL based auto-refresh, automatically sending changed values to the server
+and custom get/patch see the [API documentation](../api.html#remote).
+The `observed` and `shared` types are covered on the next pages.
+</div>
+    <button class="nav-previous"><a href="./4-extended-data-types.html" target="content">Previous</a></button>
+    <button class="nav-next"><a href="./5.1-extended-functional-types.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>
+    Result: ${result}
+</l-body>
+<script id="lightview">
+    currentComponent.mount = async function() {
+        this.variables(
+            { remote: "function"},
+            { constant: (await import("../javascript/types.js")).remote }
+        );
+        this.variables(
+            {
+                result:"object"
+            },
+            {
+                reactive,
+                remote:"./remote-value.json"
+            }
+        );
+    }
+</script>
+</template>
+    </l-repl>
+</div>
+<script>
+    processMarkdown();
+</script>
+</body>
+</html>

package/docs/tutorial/5.1-extended-functional-types.html ADDED Viewed

@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Lightview:Tutorial:Extended Functional Type:Shared</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">
+## Extended Functional Type - Shared
+The extended functional type `shared` automatically synchronizes a value across all instances of the same component.
+The `shared` type must be loaded from the file `types.js` as shown in the example REPL.
+In this example, we provide at attribute value on only one of the &lt;my-input&gt; tags and it is automatically
+propagated as a value to the other tag. Try editing the values.
+Note how the `myinput` component it defined in a &lt;template&gt; tag rather than another file. This is
+covered in more detail in the [Template Components](./10-template-components.html) section of the tutorial.
+</div>
+    <button class="nav-previous"><a href="./5-extended-functional-types.html" target="content">Previous</a></button>
+    <button class="nav-next"><a href="./5.2-extended-functional-types.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="headhtml"></div>
+        <div slot="bodyhtml"></div>
+<template slot="src">
+<l-head>
+    <template id="my-input">
+        Name: <input value="${name}">
+        <script id="lightview">
+            currentComponent.mount = async function() {
+                this.variables(
+                    { shared: "function"},
+                    { constant: (await import("../javascript/types.js")).shared }
+                );
+                this.variables(
+                    {
+                        name:"string"
+                    },
+                    {
+                        shared,
+                        imported,
+                        reactive
+                    }
+                );
+            }
+        </script>
+    </template>
+    <script src="../javascript/lightview.js?"></script>
+</l-head>
+<l-body>
+<script>
+    Lightview.createComponent("my-input", document.getElementById("my-input"))
+</script>
+<my-input></my-input><br>
+<my-input name="joe"></my-input>
+</l-body>
+</template>
+    </l-repl>
+</div>
+<script>
+    processMarkdown();
+</script>
+</body>
+</html>

package/docs/tutorial/5.2-extended-functional-types.html ADDED Viewed

@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Lightview:Tutorial:Extended Functional Type:Observed</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">
+## Extended Functional Type - Observed
+Unlike `imported` variables which only get the value of an attribute when the component is created, `observed` attributes
+update the associated variable every time the attribute changes.
+Clicking on the `Change Attribute` button sets a new value for the attribute "name". Lightview detects this and updates the
+variable `name`. Since `name` is also `reactive`, the HTML nodes referencing it are also updated.
+    </div>
+    <button class="nav-previous"><a href="./5.1-extended-functional-types.html" target="content">Previous</a></button>
+    <button class="nav-next"><a href="./6-conventional-javascript.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 name="joe">
+    Name: ${name}
+    <button l-on:click="${changeAttribute}">Change Attribute</button>
+</l-body>
+<script id="lightview">
+    currentComponent.mount = async function() {
+        this.variables(
+            { observed: "function"},
+            { constant: (await import("../javascript/types.js")).observed }
+        );
+        this.variables(
+            {
+                name:"string"
+            },
+            {
+                reactive,
+                observed
+            }
+        );
+        this.changeAttribute = () => {
+            this.setAttribute("name","mary" + Math.round(Math.random()*10))
+        }
+    }
+</script>
+</template>
+    </l-repl>
+</div>
+<script>
+    processMarkdown();
+</script>
+</body>
+</html>

package/docs/tutorial/6-conventional-javascript.html ADDED Viewed

@@ -0,0 +1,75 @@
+<!DOCTYPE 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>

package/docs/tutorial/7-monitoring-with-observers.html ADDED Viewed

@@ -0,0 +1,107 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Lightview:Tutorial:Monitoring With Observers</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">
+## Monitoring With Observers
+Lightview supports the observer programming paradigm, a powerful mechanism for responding to changes across one or more
+variables.
+To create an observer, wrap a function that references the reactive variables you want to monitor in a call to `observe`.
+Any time the value of one of the variables changes, the function will be called.
+You can cancel an observer by assigning the return value of `observe` to a variable and calling `cancel()` on that value.
+This can be much simpler than setting up event listeners.
+*Note*: In this example we only reference one reactive variable, but you can reference as many as you wish. One observer
+can take the place of multiple event listeners. Try pasting this code as the REPL body.
+```javascript
+${command||""}<br>
+${x}:${y}
+```
+And, paste this as the REPL script:
+```javascript
+currentComponent.mount = function() {
+    this.variables({x:"number",y:"number",command:"string"},{reactive});
+    x = 0;
+    y = 6;
+    let previousx, previousy;
+    let t1, t2;
+    const observer = observe(() => {
+        if(x!==y) {
+            if(x!==previousx) {
+                previousx = x;
+                t1 = setTimeout(() => y--,1000);
+            }
+            if(y!==previousy) {
+                previousy = y;
+                t2 = setTimeout(() => x++,1000);
+            }
+        } else {
+            command = "stop!";
+            clearTimeout(t1);
+            clearTimeout(t2);
+            observer.cancel();
+        }
+    });
+}
+```
+</div>
+    <button class="nav-previous"><a href="./6-conventional-javascript.html" target="content">Previous</a></button>
+    <button class="nav-next"><a href="./8-event-listeners.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>
+    ${command||""}
+</l-body>
+<script id="lightview">
+    currentComponent.mount = function() {
+        this.variables({count:"number"},{reactive,set:0});
+        this.variables({command:"string"},{reactive});
+        const commands = ["On your marks ...","Get set ...","Go!"];
+        observe(() => {
+            if(count < commands.length) {
+                command  = commands[count];
+                setTimeout(()=>count++,3000)
+            }
+        });
+    }
+</script>
+        </template>
+    </l-repl>
+</div>
+<script>
+    processMarkdown();
+</script>
+</body>
+</html>

package/docs/tutorial/8-event-listeners.html ADDED Viewed

@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Lightview:Tutorial:Event Listeners</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">
+## Event Listeners
+Event listeners can be added to any HTML element using the `l-on:[eventType]` directive, e.g.
+`<div l-on:click="${myClickHandler}"></div>`.
+You can choose to keep the listeners private to the component or expose them as properties. To keep them
+private, use variables of type "function". To expose them, just define them on `this` or `self`.
+*Caution*: If you define public listeners, make sure their names do not collide with standard HTML element property names,
+e.g. `getComputedStyle`.
+</div>
+    <button class="nav-previous"><a href="./7-monitoring-with-observers.html" target="content">Previous</a></button>
+    <button class="nav-next"><a href="./9-intro-to-components.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>
+    <button l-on:click="${onClickPrivate}">Private</button>
+    <button l-on:click="${onClickPublic}">Public</button>
+    ${clicked}
+</l-body>
+<script id="lightview">
+    currentComponent.mount = function() {
+        this.variables({clicked:"string"},{reactive,set:""});
+        this.variables({onClickPrivate:"function"});
+        onClickPrivate = ({target}) => clicked = `clicked ${target.innerText}`;
+        this.onClickPublic = ({target}) => clicked = `clicked ${target.innerText}`;
+    }
+</script>
+        </template>
+    </l-repl>
+</div>
+<script>
+    processMarkdown();
+</script>
+</body>
+</html>

package/docs/tutorial/9-intro-to-components.html ADDED Viewed

@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Lightview:Tutorial:Introduction To Components</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">
+## Introduction To Components
+Until this point, we have not shown you the `head` HTML element or used a `style` block.
+All HTML pages using Lightview MUST include include a `lightview.js` file as a regular (not `module`) script in their
+head or close to the top of the `body`.
+You MAY treat an entire page as a component by passing `lightview.js` the query string `as=x-body`. The document body
+will get replaced with the custom element `x-body`.
+When you use `as=x-body`, the page becomes a component with its HTML rendered in a shadow DOM.
+You MAY include a `style` block that will be isolated to the shadow DOM.
+And, you MAY include a `script` block with the id "lightview", the variables of which are also isolated to the shadow DOM
+unless you explicitly add them to an object with higher scope, e.g. `window` or `document`. The execution of the script
+is not isolated. The script can walk up the DOM and out of the shadows unless you explicitly render the component in an
+`iframe`.
+You may also include other script blocks, which will also be somewhat isolated to the shadow DOM.
+*Note*: If you do not include `id="lightview"` for the script block you expect to provide Lightview type behavior, the
+component will not behave properly.
+On this page we continue to let you edit the script block. On the next page we will use a `template` tag to define the
+component and create it manually with a regular script. Take the opportunity on this page to inspect the preview area
+using your JavaScript debugger and look at the `iframe` code with the id "preview", note how the body gets replaced with
+an element named `x-body`.
+</div>
+    <button class="nav-previous"><a href="./8-event-listeners.html" target="content">Previous</a></button>
+    <button class="nav-next"><a href="./10-template-components.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="headhtml" readonly></div>
+        <div slot="bodyhtml"></div>
+        <div slot="css"></div>
+        <div slot="script"></div>
+<template slot="src">
+<l-head>
+<script src="../javascript/lightview.js?as=x-body"></script>
+</l-head>
+<l-body>
+<button l-on:click="${onClickPrivate}">Private</button>
+<button l-on:click="${onClickPublic}">Public</button>
+${clicked}
+</l-body>
+<style>
+    button {
+        border: none;
+        border-radius: 5px;
+    }
+</style>
+<script id="lightview">
+    currentComponent.mount = function() {
+        this.variables({clicked:"string"},{reactive,set:""});
+        this.variables({onClickPrivate:"function"});
+        onClickPrivate = ({target}) => clicked = `clicked ${target.innerText}`;
+        this.onClickPublic = ({target}) => clicked = `clicked ${target.innerText}`;
+    }
+</script>
+</template>
+    </l-repl>
+</div>
+<script>
+    processMarkdown();
+</script>
+</body>
+</html>

package/docs/tutorial/contents.html ADDED Viewed

@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Ligtchview:Tutorial:Contents</title>
+</head>
+<body>
+<ul style="list-style:none;padding-inline-start: 10px">
+    <li><a href="./0-getting-started.html">Getting Started</a></li>
+    <li><a href="./1-intro-to-variables.html">Intro To Variables</a></li>
+    <li><a href="./2-imported-and-exported-variables.html">Imported and Exported Variables</a></li>
+    <li><a href="./3-data-types.html">Data Types</a></li>
+    <li><a href="./4-extended-data-types.html">Extended Data Types</a></li>
+    <li><a href="./5-extended-functional-types.html">Extended Functional Type: Remote</a></li>
+    <li><a href="./5.1-extended-functional-types.html">Extended Functional Type: Shared</a></li>
+    <li><a href="./5.2-extended-functional-types.html">Extended Functional Type: Observed</a></li>
+    <li><a href="./6-conventional-javascript.html">Conventional and Lightview JavaScript</a></li>
+    <li><a href="./7-monitoring-with-observers.html">Monitoring with Observers</a></li>
+    <li><a href="./8-event-listeners.html">Event Listeners</a></li>
+    <li><a href="./9-intro-to-components.html">Intro to Components</a></li>
+    <li><a href="./10-template-components.html">Template Components</a></li>
+    <li><a href="./11-linked-components.html">Linked Components</a></li>
+    <li><a href="./12-imported-components.html">Imported Components</a></li>
+    <li><a href="./13-input-binding.html">Input Binding</a></li>
+    <li><a href="./14-automatic-variable-creation.html">Automatic Variable Creation</a></li>
+    <li><a href="./15-form-binding.html">Form Binding</a></li>
+    <li><a href="./16-if-directive.html">If Directive</a></li>
+    <li><a href="./17-loop-directives.html">Loop Directives</a></li>
+    <li><a href="./18-sanitizing-and-escaping-input.html">Sanitizing and Escaping HTML</a></li>
+</ul>
+</body>
+</html>

package/docs/tutorial/my-component.html ADDED Viewed

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>My Component</title>
+    <script src="../javascript/lightview.js?as=x-body"></script>
+</head>
+<body>
+    <button l-on:click="${onClickPrivate}">Private</button>
+    <button l-on:click="${onClickPublic}">Public</button>
+    ${clicked}
+    <style>
+        button {
+            border: none;
+            border-radius: 5px;
+        }
+    </style>
+    <script id="lightview">
+        (currentComponent ||= document.body).mount = function() {
+            this.variables({clicked:"string"},{reactive,set:""});
+            this.variables({onClickPrivate:"function"});
+            onClickPrivate = ({target}) => clicked = `clicked ${target.innerText}`;
+            this.onClickPublic = ({target}) => clicked = `clicked ${target.innerText}`;
+        }
+    </script>
+</body>
+</html>

package/docs/tutorial/remote-value.json ADDED Viewed

@@ -0,0 +1,4 @@
+{
+  "name": "joe",
+  "age": 27
+}