npm - lightview - Versions diffs - 1.3.1-b → 1.4.0-b - Mend

lightview 1.3.1-b → 1.4.0-b

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 (8) hide show

package/README.md CHANGED Viewed

@@ -1,6 +1,6 @@
-# lightview v1.3.1b (BETA)
+# lightview v1.4.0b (BETA)
-Small, simple, powerful web UI creation ...
+Small, simple, powerful web UI and micro front end creation ...
 Great ideas from Svelte, React, Vue and Riot combined into one small tool: < 6K (minified/gzipped).

package/directives.html CHANGED Viewed

@@ -7,65 +7,57 @@
 <body>
-<p>
-Show: <input type="checkbox" :="${on}" l-bind="on">
+<div style="margin:20px">
+    <p>
+        Show: <input type="checkbox" value="${on}">
     <div l-if="${on}">
-        Show is true
+        Now you've done it. You've exposed me.
     </div>
-</p>
-<p>
-<input id="red" type="radio" name="myradio" value="red" :="${color}" l-bind="color"> Red
-<input id="yellow" type="radio" name="myradio" value="yellow" :="${color}" l-bind="color"> Yellow
-<input id="green" type="radio" name="myradio" value="green" :="${color}" l-bind="color"> Green
-</p>
-<p>
-    <select l-bind="color" value="${color}">
-        <option value="red">Red</option>
-        <option value="yellow">Yellow</option>
-        <option value="green">Green</option>
-    </select>
-</p>
-<p>
-    How would you like that burger?<br>
-    <select l-bind="options" value="${options}" multiple>
-        <option>lettuce</option>
-        <option>tomato</option>
-        <option>cheese</option>
-    </select>
-</p>
-<ul l-for:each="${children}">
-    <li>${index}:${element}</li>
-</ul>
-<ul l-for:values:value:index='{"1":"v1","2":"v2","3":"v3"}'>
-    <li>${value}:${index}</li>
-</ul>
-<ul l-for:keys:key='{"name":"joe","age":27}'>
-    <li>${key}</li>
-</ul>
-<ul l-for:entries:entry="${children}">
-    <li>${entry[0]}:${entry[1]}</li>
-</ul>
-Variable Values
-<p id="variables"></p>
+    </p>
+    <p>
+    <p>
+        How would you like that burger?<br>
+        <select value="${options}" multiple>
+            <option>lettuce</option>
+            <option>tomato</option>
+            <option>cheese</option>
+        </select>
+    </p>
+    For (defaults to each)
+    <ul l-for:each="${options}">
+        <li>${index}:${item}</li>
+    </ul>
+    For Each
+    <ul l-for:each="${options}">
+        <li>${index}:${item}</li>
+    </ul>
+    For Values
+    <ul l-for:values="${options}">
+        <li>${item}:${index}</li>
+    </ul>
+    For Keys
+    <ul l-for:keys="${options}">
+        <li>${item}</li>
+    </ul>
+    For Entries
+    <ul l-for:entries="${options}">
+        <li>${item[0]}:${item[1]}</li>
+    </ul>
+    Variable Values
+    <p id="variables"></p>
+</div>
 <script type="lightview/module">
-self.variables({on:boolean,off:boolean,color:string,children:Array,options:Array},{reactive});
+self.variables({on:boolean,options:Array},{reactive});
 on = true;
-color = "yellow";
-children = ["John","Mary","Jane"];
-options = ["tomato"];
+options = ["lettuce"];
-addEventListener("change",()=> {
+// demo instrumentation
+const variableValues = () => {
     const el = self.getElementById("variables");
     while(el.lastElementChild) el.lastElementChild.remove();
     self.getVariableNames().forEach((name) => {
@@ -73,7 +65,12 @@ addEventListener("change",()=> {
         line.innerText = `${name} = ${JSON.stringify(self.getValue(name))}`;
         el.appendChild(line);
     });
+};
+variableValues();
+addEventListener("change",()=> {
+    variableValues()
 });
 </script>
 </body>

package/lightview.js CHANGED Viewed

@@ -264,14 +264,14 @@ const {observe} = (() => {
                     nodes.push(node);
                 } else if (node.nodeType === Node.ELEMENT_NODE) {
                     let skip;
+                    if(node.getAttribute("type")==="radio") nodes.push(node);
                     [...node.attributes].forEach((attr) => {
                         if (attr.value.includes("${")) {
                             attr.template ||= attr.value;
-                            if (!nodes.includes(node)) nodes.push(node);
-                        }
-                        if (attr.name.includes(":") || attr.name.startsWith("l-")) {
+                            nodes.push(node);
+                        } else if (attr.name.includes(":") || attr.name.startsWith("l-")) {
                             skip = attr.name.includes("l-for:");
-                            if (!nodes.includes(node)) nodes.push(node);
+                            nodes.push(node)
                         }
                     })
                     if (!skip && !node.shadowRoot) nodes.push(...getNodes(node));
@@ -281,7 +281,7 @@ const {observe} = (() => {
         return nodes;
     }
     const resolveNode = (node, component) => {
-        if (node.template) {
+        if (node?.template) {
             try {
                 const value = Function("context", "with(context) { return `" + node.template + "` }")(component.varsProxy);
                 node.nodeValue = value === "null" || value === "undefined" ? "" : value;
@@ -289,11 +289,11 @@ const {observe} = (() => {
                 if (!e.message.includes("defined")) throw e; // actually looking for undefined or not defined
             }
         }
-        return node.nodeValue;
+        return node?.nodeValue;
     }
-    const render = (template, render) => {
+    const render = (hasTemplate, render) => {
         let observer;
-        if (template) {
+        if (hasTemplate) {
             if (observer) observer.cancel();
             observer = observe(render)
         } else {
@@ -314,37 +314,17 @@ const {observe} = (() => {
             addListener(node,"click", anchorHandler);
         })
     }
-    const _bindForms = (node, component) => {
-        [...node.querySelectorAll("input")].forEach((input) => bindInput(input, component))
-    }
-    const bindInput = (input, component) => {
-        let name = input.getAttribute("name"),
-            vname = input.getAttribute("l-bind") || name;
-        name ||= vname;
-        if (name) {
-            if (!input.hasAttribute("l-bind")) input.setAttribute("l-bind", vname)
+    const bindInput = (input, name, component) => {
             const inputtype = input.tagName === "SELECT" ? "text" : input.getAttribute("type"),
                 type = input.tagName === "SELECT" && input.hasAttribute("multiple") ? Array : inputTypeToType(inputtype),
                 deflt = input.getAttribute("default"),
                 value = input.getAttribute("value");
-            let variable = component.vars[vname] || {type};
+            let variable = component.vars[name] || {type};
             if (type !== variable.type) {
                 if (variable.type === "any" || variable.type === "unknown") variable.type = type;
-                else throw new TypeError(`Attempt to bind <input name="${name}" type="${type}"> to variable ${vname}:${variable.type}`)
+                else throw new TypeError(`Attempt to bind <input name="${name}" type="${type}"> to variable ${name}:${variable.type}`)
             }
-            component.variables({[vname]: type});
-            variable = component.vars[vname];
-            //if (value || deflt) {
-            if (inputtype !== "radio") {
-                if (value && !value.includes("${")) {
-                    variable.value = coerce(value, type);
-                    //input.setAttribute("value", `\${${name}}`);
-                } else if (deflt && !deflt.includes("${")) {
-                    variable.value = coerce(deflt, type);
-                    //input.setAttribute("default", `\${${name}}`);
-                }
-            }
-            //}
+            component.variables({[name]: type});
             addListener(input,"change", (event) => {
                 event.stopImmediatePropagation();
                 const target = event.target;
@@ -354,12 +334,18 @@ const {observe} = (() => {
                 } else if (target.tagName === "SELECT") {
                     if (target.hasAttribute("multiple")) {
                         value = [...target.querySelectorAll("option")]
-                            .filter((option) => option.selected || option.getAttribute("value") == value || option.innerText == value)
+                            .filter((option) => option.selected || resolveNode(option.attributes.value,component)==value || option.innerText == value)
                             .map((option) => option.getAttribute("value") || option.innerText);
                     }
                 }
-                component.varsProxy[vname] = coerce(value, type);
+                component.varsProxy[name] = coerce(value, type);
             })
+    }
+    const tryParse = (value) => {
+        try {
+            return JSON.parse(value);
+        } catch(e) {
+            return value;
         }
     }
     let reserved = {
@@ -372,7 +358,7 @@ const {observe} = (() => {
         exported: {value: true, constant: true},
         imported: {value: true, constant: true}
     };
-    const createClass = (domElementNode, {observer, bindForms, importAnchors}) => {
+    const createClass = (domElementNode, {observer,  importAnchors}) => {
         const instances = new Set(),
             dom = domElementNode.tagName === "TEMPLATE"
                 ? domElementNode.content.cloneNode(true)
@@ -425,7 +411,6 @@ const {observe} = (() => {
                         })
                     });
                 [...dom.childNodes].forEach((child) => shadow.appendChild(child.cloneNode(true)));
-                if (bindForms) _bindForms(shadow, this);
                 if (importAnchors) _importAnchors(shadow, this);
             }
@@ -459,9 +444,7 @@ const {observe} = (() => {
                     const text = script.innerHTML.replaceAll(/\/\*[\s\S]*?\*\/|([^:]|^)\/\/.*$/gm, "$1").replaceAll(/\r?\n/g, "");
                     currentScript.innerHTML = `Function('if(window["${scriptid}"]?.ctx) { with(window["${scriptid}"].ctx) { ${text}; }  window["${scriptid}"](); }')(); `;
                     let resolver;
-                    promises.push(new Promise((resolve) => {
-                        resolver = resolve;
-                    }));
+                    promises.push(new Promise((resolve) => resolver = resolve));
                     window[scriptid] = () => {
                         delete window[scriptid];
                         currentScript.remove();
@@ -471,49 +454,93 @@ const {observe} = (() => {
                     ctx.appendChild(currentScript);
                 }
                 Promise.all(promises).then(() => {
-                    const inputs = [...ctx.shadowRoot.querySelectorAll("input[l-bind]"), ...ctx.shadowRoot.querySelectorAll("select[l-bind]")];
-                    inputs.forEach((input) => {
-                        bindInput(input, ctx);
-                    })
                     const nodes = getNodes(ctx);
                     nodes.forEach((node) => {
                         if (node.nodeType === Node.TEXT_NODE && node.template.includes("${")) {
                             render(!!node.template, () => resolveNode(node, this))
                         } else if (node.nodeType === Node.ELEMENT_NODE) {
+                            // resolve the value before all else;
+                            const attr = node.attributes.value;
+                            let name;
+                            if(attr && attr.template) {
+                                render(!!attr.template,() => {
+                                    const value = resolveNode(attr, this),
+                                        eltype = resolveNode(node.attributes.type,ctx);
+                                    if(eltype==="checkbox") {
+                                        if(coerce(value,"boolean")===true) {
+                                            node.setAttribute("checked","");
+                                            node.checked = true;
+                                        } else {
+                                            node.removeAttribute("checked");
+                                            node.checked = false;
+                                        }
+                                        const vname = resolveNode(node.attributes.name,ctx);
+                                        if(vname) ctx.setValue(vname,node.checked,{coerceTo:"boolean"});
+                                    }
+                                    if(node.tagName==="SELECT") {
+                                        let values = [value];
+                                        if(node.hasAttribute("multiple")) values = coerce(value,Array);
+                                        [...node.querySelectorAll("option")].forEach((option) => {
+                                            if(option.hasAttribute("value")) {
+                                                if (values.includes(resolveNode(option.attributes.value, ctx))) {
+                                                    option.setAttribute("selected", "");
+                                                    option.selected = true;
+                                                }
+                                            } else if(option.innerText.trim()===value) {
+                                                option.setAttribute("selected","");
+                                                option.selected = true;
+                                            }
+                                        })
+                                    }
+                                });
+                                let name;
+                                for(const vname of this.getVariableNames()) {
+                                    if("${" + vname + "}" === attr.template) {
+                                        name = vname;
+                                        break;
+                                    }
+                                }
+                                if(name) bindInput(node,name,ctx);
+                            }
                             [...node.attributes].forEach((attr) => {
-                                const {name, value} = attr,
-                                    [type, ...params] = name.split(":");
-                                if (type === "" || type=="checked" || node.tagName === "SELECT") { // name is :something
+                                if(attr.name==="value") return;
+                                const {name, value} = attr;
+                                if(name==="type") {
+                                    if (value === "radio") {
+                                        const name = resolveNode(node.attributes.name, ctx);
+                                        for (const vname of this.getVariableNames()) {
+                                            if (vname === name) {
+                                                render(true, () => {
+                                                    const name = resolveNode(node.attributes.name, ctx),
+                                                        varvalue = Function("context", "with(context) { return `${" + name + "}` }")(ctx.varsProxy);
+                                                    if (varvalue == resolveNode(node.attributes.value,ctx)) {
+                                                        node.setAttribute("checked", "");
+                                                        node.checked = true;
+                                                    } else {
+                                                        node.removeAttribute("checked");
+                                                        node.checked = false;
+                                                    }
+                                                });
+                                                bindInput(node, name, ctx);
+                                                break;
+                                            }
+                                        }
+                                    }
+                                }
+                               const [type, ...params] = name.split(":");
+                                if (type === "") { // name is :something
                                     render(!!attr.template, () => {
-                                        const attrtype = node.getAttribute("type"),
-                                            value = resolveNode(attr, this),
-                                            elvalue = node.getAttribute("value"),
-                                            elname = node.getAttribute("name");
+                                        const value = attr.value,
+                                            elvalue = resolveNode(node.attributes.value,ctx),
+                                            eltype = resolveNode(node.attributes.type,ctx),
+                                            elname = resolveNode(node.attributes.name,ctx);
                                         if (params[0]) {
                                             if (value === "true") node.setAttribute(params[0], "")
                                             else node.removeAttribute(params[0]);
-                                        } else if (attrtype === "checkbox" || node.tagName === "OPTION") {
-                                            if (value === "true") {
-                                                node.setAttribute("checked", "");
-                                            } else {
-                                                node.removeAttribute("checked");
-                                            }
-                                        } else if (attrtype === "radio") {
-                                            if (elvalue === value) {
-                                                node.setAttribute("checked", "");
-                                            }
-                                        } else if (name === "value" && node.tagName === "SELECT") {
-                                            node.setAttribute("value", value);
-                                            const values = value[0] === "[" ? JSON.parse(value) : value.split(","); // handle multiselect
-                                            [...node.querySelectorAll("option")].forEach((option) => {
-                                                if (option.hasAttribute("value")) {
-                                                    if (values.includes(option.getAttribute("value"))) {
-                                                        option.setAttribute("selected", true);
-                                                    }
-                                                } else if (values.includes(option.innerText)) {
-                                                    option.setAttribute("selected", true);
-                                                }
-                                            })
+                                        } else if (eltype=== "checkbox" || node.tagName === "OPTION") {
+                                            if (value === "true") node.setAttribute("checked", "")
+                                            else node.removeAttribute("checked");
                                         }
                                     })
                                 } else if (type === "l-on") {
@@ -532,7 +559,7 @@ const {observe} = (() => {
                                 } else if (type === "l-for") {
                                     node.template ||= node.innerHTML;
                                     render(!!attr.template, () => {
-                                        const [what = "each", vname = "element", index = "index", array = "array", after = false] = params,
+                                        const [what = "each", vname = "item", index = "index", array = "array", after = false] = params,
                                             value = resolveNode(attr, this),
                                             coerced = coerce(value, what === "each" ? Array : "object"),
                                             target = what === "each" ? coerced : Object[what](coerced),
@@ -652,9 +679,7 @@ const {observe} = (() => {
                                 variable.shared = true;
                                 addEventListener("change", ({variableName, value}) => {
                                     if (this.vars[variableName]?.shared) {
-                                        this.siblings.forEach((instance) => {
-                                            instance.setValue(variableName, value);
-                                        })
+                                        this.siblings.forEach((instance) => instance.setValue(variableName, value))
                                     }
                                 })
                             }
@@ -669,47 +694,6 @@ const {observe} = (() => {
                                 })
                             }
                         });
-                    addEventListener("change", ({variableName, value}) => {
-                        [...this.shadowRoot.querySelectorAll(`input[l-bind=${variableName}]`),
-                            ...this.shadowRoot.querySelectorAll(`select[l-bind=${variableName}]`)]
-                            .forEach((input) => {
-                                const eltype = input.getAttribute("type");
-                                if (eltype === "checkbox") { // at el option selected
-                                    if(!!value) {
-                                        input.setAttribute("checked", "");
-                                    } else {
-                                        input.removeAttribute("checked");
-                                    }
-                                    input.checked = !!value;
-                                } else if (eltype === "radio") {
-                                    if (input.getAttribute("value") === value) {
-                                        input.setAttribute("checked", "");
-                                        input.checked = true;
-                                    }
-                                } else if (input.tagName === "SELECT") {
-                                    const values = value && typeof (value) === "object" && value instanceof Array ? value : [value];
-                                    [...input.querySelectorAll("option")].forEach((option) => {
-                                        if (values.includes(option.getAttribute("value") || option.innerText)) {
-                                            option.setAttribute("selected", "");
-                                            option.selected = true;
-                                        }
-                                    })
-                                } else if (!eltype || eltype === "text") {
-                                    value = typeof (value) === "string" || value == null ? value : JSON.stringify(value);
-                                    const oldvalue = input.getAttribute("value") || "";
-                                    if (oldvalue !== value) {
-                                        if (value == null) input.removeAttribute("value");
-                                        else input.setAttribute("value", value);
-                                        try {
-                                            input.setSelectionRange(0, Math.max(oldvalue.length, value ? value.length : 0)); // shadowDom sometimes fails to rerender unless this is done;
-                                            input.setRangeText(value || "", 0, Math.max(oldvalue.length, value ? value.length : 0));
-                                        } catch (e) {
-                                        }
-                                    }
-                                }
-                            })
-                    })
                 }
                 return Object.entries(this.vars)
                     .reduce((result, [key, variable]) => {
@@ -737,13 +721,13 @@ const {observe} = (() => {
             }
         }
     }
-    const createComponent = (name, node, {observer, bindForms, importAnchors} = {}) => {
+    const createComponent = (name, node, {observer, importAnchors} = {}) => {
         let ctor = customElements.get(name);
         if (ctor) {
             console.warn(new Error(`${name} is already a CustomElement. Not redefining`));
             return ctor;
         }
-        ctor = createClass(node, {observer, bindForms, importAnchors});
+        ctor = createClass(node, {observer, importAnchors});
         customElements.define(name, ctor);
         return ctor;
     }
@@ -759,10 +743,9 @@ const {observe} = (() => {
             const html = await (await fetch(url.href)).text(),
                 dom = parser.parseFromString(html, "text/html"),
                 importAnchors = !!dom.head.querySelector('meta[name="l-importAnchors"]'),
-                bindForms = !!dom.head.querySelector('meta[name="l-bindForms"]'),
                 unhide = !!dom.head.querySelector('meta[name="l-unhide"]');
             if (unhide) dom.body.removeAttribute("hidden");
-            createComponent(as, dom.body, {observer, importAnchors, bindForms});
+            createComponent(as, dom.body, {observer, importAnchors});
         }
         return {as};
     }
@@ -773,9 +756,9 @@ const {observe} = (() => {
         }
     }
-    const bodyAsComponent = ({as = "x-body", unhide, importAnchors, bindForms} = {}) => {
+    const bodyAsComponent = ({as = "x-body", unhide, importAnchors} = {}) => {
         const parent = document.body.parentElement;
-        createComponent(as, document.body, {importAnchors, bindForms});
+        createComponent(as, document.body, {importAnchors});
         const component = document.createElement(as);
         parent.replaceChild(component, document.body);
         Object.defineProperty(document, "body", {
@@ -821,12 +804,11 @@ const {observe} = (() => {
     const loader = async (whenFramed) => {
         if (!!document.querySelector('meta[name="l-importLinks"]')) await importLinks();
         const importAnchors = !!document.querySelector('meta[name="l-importAnchors"]'),
-            bindForms = !!document.querySelector('meta[name="l-bindForms"]'),
             unhide = !!document.querySelector('meta[name="l-unhide"]'),
             isolated = !!document.querySelector('meta[name="l-isolate"]'),
             enableFrames = !!document.querySelector('meta[name="l-enableFrames"]');
         if (whenFramed) {
-            whenFramed({unhide, importAnchors, bindForms, isolated, enableFrames});
+            whenFramed({unhide, importAnchors, isolated, enableFrames});
             if (!isolated) {
                 postMessage.enabled = true;
                 addListener(window,"message", ({data}) => {
@@ -861,7 +843,7 @@ const {observe} = (() => {
                 postMessage({type: "DOMContentLoaded"})
             }
         } else if (url.searchParams.has("as")) {
-            bodyAsComponent({as: url.searchParams.get("as"), unhide, importAnchors, bindForms});
+            bodyAsComponent({as: url.searchParams.get("as"), unhide, importAnchors});
         }
         if (enableFrames) {
             postMessage.enabled = true;

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "name": "lightview",
-  "version": "1.3.1b",
-  "description": "Small, simple, powerful web UI creation ... imagine a blend of Svelte, React, Vue, Riot and more.",
+  "version": "1.4.0b",
+  "description": "Small, simple, powerful web UI and micro front end creation ... imagine a blend of Svelte, React, Vue, Riot and more.",
   "main": "lightview.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
@@ -18,7 +18,10 @@
     "vue",
     "moon",
     "hyperapp",
-    "hyperhtml"
+    "hyperhtml",
+    "micro front end",
+    "custom elements",
+    "web components"
   ],
   "author": "Simon Y. Blackwell",
   "license": "MIT",

package/remote.html CHANGED Viewed

@@ -9,7 +9,8 @@
 <body>
 <p>
-   The component below is loaded from an alternate domain and running in an iframe.
+   The component below is loaded from an alternate domain and running in a child iframe.
+    The logging console is below the component in this frame.
 </p>
 <iframe id="myframe" src="https://lightview.dev/remoteform.html?id=myframe"></iframe>
 <div id="console" style="max-height:250px;scroll:auto"></div>

package/remoteform.html CHANGED Viewed

@@ -2,45 +2,73 @@
 <head>
     <title>Form</title>
-    <meta name="l-bindForms">
     <script src="./lightview.js?as=x-body"></script>
-    <script>Lightview.whenFramed(({as,unhide,importAnchors,bindForms,isolated,enableFrames}) => {
-        Lightview.bodyAsComponent({as,unhide,importAnchors,bindForms,isolated,enableFrames});
+    <script>Lightview.whenFramed(({as,unhide,importAnchors,isolated,enableFrames}) => {
+        Lightview.bodyAsComponent({as,unhide,importAnchors,isolated,enableFrames});
     })</script>
 </head>
 <body style="height:fit-content;width:fit-content;display:flex;flex-direction:column;max-height:100%;overflow:auto;">
-<p>
-    <button l-on:click="run">Run</button> <button l-on:click="reset">Reset</button> <button l-on:click="setNull">Set Null</button>
-</p>
-<form>
-    <input name="name" type="text" value="Joe"><br>
-    <input name="age" type="number" value="20"><br>
-</form>
-<div id="console"></div>
+<div style="margin:20px">
+    <p>
+        <input type="text" value="${color}">
+        <input type="checkbox" value="${checked}">
+        <input type="radio" name="color" value="red">
+        <input type="radio" name="color" value="yellow">
+        <input type="radio" name="color" value="green">
+        <select value="${color}">
+            <option value="red">red</option>
+            <option>yellow</option>
+            <option> green </option>
+        </select>
+    <div>Hamburger options:</div>
+    <select value="${hamburger}" multiple>
+        <option value="lettuce">lettuce</option>
+        <option>tomato</option>
+        <option>cheese</option>
+    </select>
+    </p>
+    <p l-if="${checked}">
+        Now you've done it. You've exposed me.
+    </p>
+    <ul l-for="${hamburger}">
+        <li>${item}</li>
+    </ul>
+    <ul l-for:entries="${hamburger}">
+        <li>${item[0]}:${item[1]}</li>
+    </ul>
+    <ul l-for:values="${hamburger}">
+        <li>${item}</li>
+    </ul>
+    <p id="variables">
+    </p>
+</div>
 <script type="lightview/module">
-    self.variables({name:string,age:number},{exported,imported});
-    self.run = () => {
-      name = "Bill";
-      age = 30;
-      action("run");
-    };
-    self.reset = () => {
-      name = "Joe";
-      age = 20;
-      const console = self.getElementById("console");
-      while(console.lastElementChild) console.lastElementChild.remove();
-    };
-    self.setNull = () => {
-      name = null;
-      age = undefined;
-       action("setNull");
+    self.variables({
+      color: string,
+      checked: boolean,
+      hamburger: Array
+    }, {
+      reactive
+    });
+    color = "green";
+    checked = true;
+    hamburger = ["lettuce"];
+    // demo instrumentation
+    const variableValues = () => {
+      const el = self.getElementById("variables");
+      while (el.lastElementChild) el.lastElementChild.remove();
+      self.getVariableNames().forEach((name) => {
+        const line = document.createElement("div");
+        line.innerText = `${name} = ${JSON.stringify(self.getValue(name))}`;
+        el.appendChild(line);
+      });
     };
-    const action = (name) => {
-        const div = document.createElement("div");
-        div.innerText = name;
-        self.getElementById("console").appendChild(div);
-    }
+    variableValues();
+    addEventListener("change", () => {
+      variableValues()
+    });
   </script>
 </body>

package/scratch.html ADDED Viewed

@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Scratch</title>
+    <script src="./lightview.js?as=x-body"></script>
+</head>
+<body>
+<div style="margin:20px;padding:5px;border:1px;border-style:solid;border-color:${color}">
+    <p>
+        <input type="text" value="${color}">
+        <input type="radio" name="color" value="red">
+        <input type="radio" name="color" value="yellow">
+        <input type="radio" name="color" value="green">
+        <select value="${color}">
+            <option value="red">red</option>
+            <option>yellow</option>
+            <option> green</option>
+        </select>
+    <div>Hamburger options:</div>
+    <select value="${hamburger}" multiple>
+        <option value="lettuce">lettuce</option>
+        <option>tomato</option>
+        <option>cheese</option>
+    </select>
+    </p>
+    Expose: <input type="checkbox" value="${checked}">
+    <p l-if="${checked}">
+        Now you've done it. You've exposed me.
+    </p>
+    <ul l-for="${hamburger}">
+        <li>${item}</li>
+    </ul>
+    <ul l-for:entries="${hamburger}">
+        <li>${item[0]}:${item[1]}</li>
+    </ul>
+    <ul l-for:values="${hamburger}">
+        <li>${item}</li>
+    </ul>
+    <p id="variables">
+    </p>
+</div>
+<script type="lightview/module">
+    self.variables({color:string,checked:boolean,hamburger:Array},{reactive});
+    color = "green";
+    checked = true;
+    hamburger = ["lettuce"];
+    // demo instrumentation
+    const variableValues = () => {
+      const el = self.getElementById("variables");
+      while (el.lastElementChild) el.lastElementChild.remove();
+      self.getVariableNames().forEach((name) => {
+        const line = document.createElement("div");
+        line.innerText = `${name} = ${JSON.stringify(self.getValue(name))}`;
+        el.appendChild(line);
+      });
+    };
+    variableValues();
+    addEventListener("change", () => {
+      variableValues()
+    });
+</script>
+</body>
+</html>

package/xor.html CHANGED Viewed

@@ -5,12 +5,12 @@
     <template id="audiostream">
         <p>${name}</p>
         <p>
-            Play: <input name="play" type="checkbox" l-bind="run" checked="${run}">
+            Play: <input type="checkbox" value="${run}">
         </p>
         <script type="lightview/module">
       self.variables({
         run: boolean
-      });
+      },{reactive});
       self.variables({
         name: string
       }, {
@@ -31,9 +31,7 @@
     <title>Form</title>
     <script src="./lightview.js"></script>
     <script>
-        Lightview.createComponent("x-audiostream", document.getElementById("audiostream"), {
-            bindForms: true
-        })
+        Lightview.createComponent("x-audiostream", document.getElementById("audiostream"))
     </script>
 </head>