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/15-form-binding.html ADDED Viewed

@@ -0,0 +1,110 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Lightview:Tutorial:Form Binding</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">
+## Form Binding
+Forms allow you to map a set of variables to a single object.
+If you provide a `value` attribute to a form element and the `value` attribute points to a variable that is an `object`,
+then the values of the input elements of the form will be mapped to properties on the variable using their `name` attributes
+when the form is submitted.
+*Note*, the default action of the form is prevented unless there is an `action` attribute. Also, auto bound forms handle their inputs
+on submit, not as the field values change.
+Currently, the entire object bound to the form value is replaced. Partial updates may be possible in the future.
+If the variable bound to the form is `reactive`, then any variables bound to the input fields SHOULD NOT be part of the
+form variable, i.e. associated to the form variable via a dot annotated path, because the form variable will already be updated as the values
+change.
+Forms are also the way you can efficiently collect data without two-way data binding. You simply bind non-reactive variables to the form and the inputs.
+Try adding an input field to the form.
+```html
+<p>Notes: <textarea name="notes"></textarea></p>
+```
+Try adding non-reactive variables.
+&lt;body&gt;
+```html
+<form value="${user}">
+    <p>Email: <input name="email" type="email" value="${email}" required></p>
+    <p>Phone: <input name="phone" type="tel" value="${phone}" required></p>
+    <p><input type="submit"></input></p>
+</form>
+```
+&lt;/body&gt;
+&lt;script&gt;
+```javascript
+currentComponent.mount = function() {
+    this.variables({user:"object"},{set:{}});
+    this.variables({email:"string"},{set:"joe@somewhere.com"});
+    this.variables({phone:"string"},{set:"555-555-5555"});
+    addEventListener("change",({variableName}) => {
+        const el = document.createElement("div");
+        el.innerText = JSON.stringify(this.getVariableValue(variableName));
+        this.shadowRoot.appendChild(el);
+    })
+}
+```
+&lt;/script&gt;
+    </div>
+    <button class="nav-previous"><a href="./14-automatic-variable-creation.html" target="content">Previous</a></button>
+    <button class="nav-next"><a href="./16-if-directive.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 previewheight="250px">
+        <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>
+    <form value="${user}">
+        <p>Email: <input name="email" type="email" required></p>
+        <p>Phone: <input name="phone" type="tel" required></p>
+        <p><input type="submit"></input></p>
+    </form>
+</l-body>
+<script id="lightview">
+    currentComponent.mount = function() {
+        this.variables({user:"object"},{reactive,set:{}});
+        addEventListener("change",({variableName}) => {
+            const el = document.createElement("div");
+            el.innerText = JSON.stringify(this.getVariableValue(variableName));
+            this.shadowRoot.appendChild(el);
+        })
+    }
+</script>
+</template>
+    </l-repl>
+</div>
+<script>
+    processMarkdown();
+</script>
+</body>
+</html>

package/docs/tutorial/16-if-directive.html ADDED Viewed

@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Lightview:Tutorial:If Directive</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">
+## If Directive
+The `l-if` directive supports the conditional display of content. It can be added to any html element. If its value
+is `true`, the element and child nodes are displayed. Otherwise, they are not.
+Try deleting the line `exposed = true`. Nothing should display.
+Try adding `hiding = true` to the mount function in the script block. "I am hiding" should display.
+Try changing `l-if="${hiding}"` to `l-if="${!hiding}"`. Nothing should display.
+    </div>
+    <button class="nav-previous"><a href="./15-form-binding.html" target="content">Previous</a></button>
+    <button class="nav-next"><a href="./17-loop-directives.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>
+    <p l-if="${exposed}">I am exposed</p>
+    <p l-if="${hiding}">I am hiding</p>
+</l-body>
+<script id="lightview">
+    currentComponent.mount = function() {
+        this.variables({exposed:"boolean",hiding:"boolean"});
+        exposed = true;
+    }
+</script>
+</template>
+    </l-repl>
+</div>
+<script>
+    processMarkdown();
+</script>
+</body>
+</html>

package/docs/tutorial/17-loop-directives.html ADDED Viewed

@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Lightview:Tutorial:Loop Directives</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">
+## Loop Directives
+Lightview has a single looping directive, `l-for`, that can be configured to handle objects and arrays and loop over keys, values, or entries
+with default variable names or variable names you provide.
+The iterator directive takes the form `l-for:?accessor:?itemVariable:?indexVariable:?arrayVariable="${data}"`.
+The default iterator accessor is `each`. You can also use `entries`, `keys`, and `values`.
+The default iteration variables are `item`, `index`, and `array`.
+Try pasting this code into the &lt;body&gt;:
+```html
+<form value="${person}">
+    <div l-for:keys:key="${person}">
+    <p></p><label for="${key}">${key}:</label><input id="${key}" value="${person[key]}"></p>
+    </div>
+    <input type="submit">
+</form>
+```
+Try pasting this code into the &lt;body&gt;:
+```html
+<div l-for:each:child:i:children="${children}">
+    <p>${child} has index ${i} in ${JSON.stringify(children)}</p>
+</div>
+```
+    </div>
+    <button class="nav-previous"><a href="./16-if-directive.html" target="content">Previous</a></button>
+    <button class="nav-next"><a href="./18-sanitizing-and-escaping-input.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>
+        <div slot="script"></div>
+<template slot="src">
+<l-head>
+    <script src="../javascript/lightview.js?as=x-body"></script>
+</l-head>
+<l-body>
+    <ul l-for:entries="${person}">
+        <li>${item[0]}:${item[1]}</li>
+    </ul>
+    <ul l-for="${children}">
+        <li>${item}</li>
+    </ul>
+</l-body>
+<script id="lightview">
+    currentComponent.mount = function() {
+        this.variables({person:"object"},{set:{email:"joe@somewhere.com",phone:"555-555-5555"}});
+        this.variables({children:Array},{set:["mary","john"]});
+    }
+</script>
+</template>
+    </l-repl>
+</div>
+<script>
+    processMarkdown();
+</script>
+</body>
+</html>

package/docs/tutorial/18-sanitizing-and-escaping-input.html ADDED Viewed

@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Lightview:Tutorial:Sanitizing and Escaping HTML</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">
+## Sanitizing and Escaping HTML
+Lightview "sanitizes" templates before attempting to resolve them by making suspicious code unparseable. The result is that the template will simply
+not be replaced in the component. If resolution is successful and the target node is an HTMLElement or Attr, it takes the result of the template
+interpolation and escapes all HTML characters before inserting the value into the DOM. If the target node is a TextNode,
+no escaping is conducted because it is not needed. The DOM will not try to treat the content of a text node like it is HTML, even if it looks like HTML.
+Surprisingly, most of the time, the target will be a TextNode.
+Note that the only successful substitutions in the REPL are for the button label and the value of `test` plus 1.
+See the API documentation on [Lightview.sanitizeTemplate](../api.html#sanitizeTemplate) and [Lightview.escapeHTML](../api.html#escapeHTML).
+This concludes the tutorial. Feel free to post questions to the <a href="https://github.com/anywhichway/lightview/issues" target="_tab">
+GitHub issues page</a>.
+    </div>
+    <button class="nav-previous"><a href="./17-loop-directives.html" target="content">Previous</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>
+    <p>
+        <button l-on:click="${bump}">Click count:${count}</button>
+    </p>
+    <div style="margin:20px">
+        <h1>Test:${test + 1}</h1>
+        ${"<h1>Test:"+(test++)+"</h1>"}
+        <p>
+            ${(while (test)<10 { test++}; test)}
+        </p>
+        <p>
+            ${(() =>test)()}
+        </p>
+        <p>
+            ${(() = >test)()}
+        </p>
+        <p>
+            ${function(){return \${test}})()}
+        </p>
+    </div>
+</l-body>
+<script id="lightview">
+    currentComponent.mount = async function() {
+        self.variables({count: "number",test:"number"}, {reactive,set:0});
+        self.bump = () => count++;
+    }
+</script>
+</template>
+    </l-repl>
+</div>
+<script>
+    processMarkdown();
+</script>
+</body>
+</html>

package/docs/tutorial/2-imported-and-exported-variables.html ADDED Viewed

@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Lightview:Tutorial:Imported and Exported Variables</title>
+    <link href="../css/tutorial.css" rel="stylesheet">
+    <link href="../slidein.html" rel="module">
+    <link href="../components/repl.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">
+## Imported and Exported Variables
+In addition to being `reactive`, variables can be `imported` from and `exported` to attributes. During this process,
+type coercion occurs.
+If `imported` variables will never change or you plan to implement DOM updates in an alternate manner, you do not need to declare
+them as `reactive`.
+Variables can also be automatically exported. Try cut/paste replace the code with the below.
+```javascript
+currentComponent.mount = function() {
+    this.variables({data:Array},{imported});
+    this.variables({response:Array},{exported});
+    response = '["You","are","in","a","handbasket"]';
+    // for demo, since this code is run in a sandbox REPL, attribute changes do not render to the UI
+    const el = document.createElement("div");
+    el.innerText = self.getAttribute("response");
+    this.shadowRoot.appendChild(el);
+}
+```
+Variables that are `exported` will always update a component's attributes when they change, they do not need to be
+`reactive` unless you plan to use them elsewhere.
+*Note*: Because the script is run in a sandbox for security, the REPL itself does not update; hence, the attribute
+value is retrieved and appended to the result to demonstrate that `exported` works.
+There are also some extended functional types like `remote` to get a variable value from a URL, `shared` and `constant`. These are
+[demonstrated later](./5-extended-functional-types.html).
+See the API documentation on [variables](../api.html#variables) and [imported](../api.html#imported) or
+[exported](../api.html#exported).
+</div>
+    <button class="nav-previous"><a href="./1-intro-to-variables.html" target="content">Previous</a></button>
+    <button class="nav-next"><a href="./3-data-types.html" target="content">Next</a></button>
+</div>
+<div class="repl">
+    <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 data="Hello,there,world">
+${data.join(" ")}!
+            </l-body>
+            <script id="lightview">
+currentComponent.mount = function() {
+    this.variables({data:Array},{imported});
+}
+            </script>
+        </template>
+    </l-repl>
+</div>
+<script>
+    processMarkdown();
+</script>
+</body>
+</html>

package/docs/tutorial/3-data-types.html ADDED Viewed

@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Lightview:Tutorial:Data Types</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">
+## Data Types
+Variables in Lightview can be typed as any of the standard JavaScript `typeof` results with the exception of "undefined".
+Runtime coercion is used and errors are thrown if a value can't be coerced into the correct type. If you do not want coercion,
+then use the extended data types described [next](./4-extended-data-types.html).
+- "boolean"
+    Since the focus of Lightview is UI management the values 1, "true", "on", "checked", "selected" all coerce to `true`. The values "false" and 0 coerce to `false`. The value `undefined` remains `undefined`, i.e. an indeterminate state.
+- "function"
+    Variables of type "function" are useful for defining event listeners [as described later](./8-event-listeners.html).
+- "number"
+- "object"
+- "string"
+- "symbol"
+Additionally, variables can be of type "any".
+And, if you wish, a variable to be an instance of a particular type of object, you can use an unquoted reference to
+any in scope constructor, e.g. `Array` or `MyCustomConstructor`.
+The REPL is configured to display assignment results and errors. Try modifying the `testVariable` type and assignment.
+Or, cut and paste this example into the code section. Then modify `[1,2,3]` to just be `1` or "1,2,3":
+```javascript
+currentComponent.mount = function() {
+    this.variables({result:"any"},{reactive});
+    this.variables({testVariable:Array});
+    try {
+        testVariable = [1,2,3];
+        result = testVariable;
+    } catch(e) {
+        result = e+"";
+    }
+}
+```
+</div>
+    <button class="nav-previous"><a href="./2-imported-and-exported-variables.html" target="content">Previous</a></button>
+    <button class="nav-next"><a href="./4-extended-data-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="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 = function() {
+    this.variables({result:"any"},{reactive});
+    this.variables({testVariable:"boolean"});
+    try {
+        testVariable = true;
+        result = testVariable;
+    } catch(e) {
+        result = e+"";
+    }
+}
+            </script>
+        </template>
+    </l-repl>
+</div>
+<script>
+    processMarkdown();
+</script>
+</body>
+</html>

package/docs/tutorial/4-extended-data-types.html ADDED Viewed

@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Lightview:Tutorial:Extended Data Types</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 Data Types
+Lightview provides extended data types that allow you to put additional constraints on variable values. For example:
+- `number` supports a min, max, step, allowNaN and coercion control
+- `string` supports minlength, maxlength, pattern (a RegExp), and coercion control.
+Extended types must be imported from the file `types.js`. To do this, you must make the `mount` function asynchronous
+and `await` the result of the `import`.
+Unlike standard data types, coercion is off by default for extended data types, try setting the value to "2". You should see an error message.
+Then, try adding `coerce:true` to  the variable configuration. The error message should go away.
+Try setting the value to 3. You should get a different error message.
+Try removing all the configuration options, i.e. use `number({})`. The error message should disappear. Set the value to
+NaN. This should work. Now add `allowNaN:false`. You should get an error message.
+*Note*: You will see "@NaN" in the error message. JavaScript does not stringify `NaN`, `-Infinity` or `Infinity` when
+converting to JSON, so Lightview has to use an unambiguous string representation.
+Try modifying the type to just `number` without making it a function call. Then assign a number or a string.
+Try modifying the type to be a `string` and playing with the configuration options and values.
+Additional extended types and info on how to manage errors can be found in the [API documentation](./api.html).
+</div>
+    <button class="nav-previous"><a href="./3-data-types.html" target="content">Previous</a></button>
+    <button class="nav-next"><a href="./5-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() {
+        const {number} = await import("../javascript/types.js");
+        this.variables({result:"any"},{reactive});
+        this.variables({testVariable:number({min:0,max:10,step:2})});
+        try {
+            testVariable = 0;
+            result = testVariable;
+        } catch(e) {
+            result = e+"";
+        }
+    }
+</script>
+        </template>
+    </l-repl>
+</div>
+<script>
+    processMarkdown();
+</script>
+</body>
+</html>