lightview 1.6.2-b → 1.6.5-b

package/README.md

@@ -1,4 +1,4 @@
-# lightview v1.4.10b (BETA)
+# lightview v1.6.5b (BETA)
 
 Small, simple, powerful web UI and micro front end creation ...
 
@@ -6,3 +6,37 @@ Great ideas from Svelte, React, Vue and Riot combined into one small tool: < 7K
 
 See the docs and examples at [https://lightview.dev](https://lightview.dev).
 
+Meanwhile, here is what you get:
+
+1) Single file and <a href="#local-templates" target=_self>template</a> components.
+
+1) [Sandboxed remote components](https://lightview.dev/#sandboxed-components) and micro front ends</a>.
+
+1) [Unit testable](https://lightview.dev/#unit-testing) components and a [debug mode](https://lightview.dev/#debugging) for using standard JavaScript debuggers</a>.
+
+1) No pre-deployment transpilation/compilation required.
+
+1) Svelte like variable usage, i.e. write your state modifying code like normal code.
+
+1) Extended variable type declarations including `min`, `max` and `step` on `number` or limits on `string` and `array` lengths.
+
+1) [TypeScript like](https://lightview.dev/#variables) runtime type checking of variables in components.
+
+1) Automatic server retrieval and update of variables declared as `remote`.
+
+1) Automatic import, export, cross-component sync, or reactive response to attributes/props/variables. See [superVariable](https://lightview.dev/#super-variable).
+
+1) [Automatic form variable creation and binding](https://lightview.dev/#auto-binding-forms).
+
+1) [Attribute directives](https://lightview.dev/#attribute-directives) like `l-if`, and a single powerful `l-for` that handles array and object keys, values, and entries.
+
+1) Reactive string template literals for content and attribute value replacement.
+
+1) No virtual DOM. The Lightview dependency tracker laser targets just those nodes that need updates.
+
+1) SPA, and MPA friendly ... somewhat SEO friendly and short steps away from fully SEO friendly.
+
+1) A [component library](https://lightview.dev/components) including charts and gauges.
+
+1) Lots of live [editable examples](https://lightview.dev/#examples).
+

package/components/chart.html

@@ -23,7 +23,7 @@
         });
     let chart,
         datatable,
-        options;
+        options = {};
     self.variables({type: "string", title: "string", style: "string"}, {observed});
     if(style) target.setAttribute("style",style);
     self.addRow = (row) => {
@@ -36,6 +36,9 @@
             chart.draw(datatable, options);
         }
     };
+    self.setOptions = (newOptions) => {
+      Object.assign(options,newOptions);
+    };
     self.init = () => {
         const node = self.firstChild,
             callback = (textNode, oldValue, newValue) => {
@@ -48,9 +51,7 @@
                     target.innerText = e + newValue;
                 }
             };
-        options = {
-            title: title
-        };
+        if(!options.title && title) options.title = title;
         chart = new google.visualization[type](target);
         node.characterDataMutationCallback = callback;
         callback(node, node.textContent, node.textContent);
@@ -67,7 +68,7 @@
         resizeObserver.observe(target);
         self.removeAttribute("hidden");
     };
-    addEventListener("connected", ({target}) => {
+    self.addEventListener("connected", ({target}) => {
         google.charts.load("current", {"packages": ["corechart","gauge"]});
         google.charts.setOnLoadCallback(self.init);
     });

package/components/gauge.html

@@ -48,7 +48,7 @@
         resizeObserver.observe(target);
         self.removeAttribute("hidden");
     };
-    addEventListener("connected", ({target}) => {
+    self.addEventListener("connected", ({target}) => {
         google.charts.load("current", {"packages": ["corechart","gauge"]});
         google.charts.setOnLoadCallback(self.init);
     });

package/examples/chart.html

@@ -50,15 +50,17 @@
 </l-chart>
 <script>
     const gauges = document.getElementById("myGauges");
-    setInterval(function() {
-        gauges.setValue(0, 1, 40 + Math.round(60 * Math.random()));
-    }, 6000);
-    setInterval(function() {
-        gauges.setValue(1, 1, 40 + Math.round(60 * Math.random()));
-    }, 5000);
-    setInterval(function() {
-        gauges.setValue(2, 1, 60 + Math.round(40 * Math.random()));
-    }, 7500);
+    gauges.addEventListener("connected",() => {
+        setInterval(function() {
+            gauges.setValue(0, 1, 40 + Math.round(60 * Math.random()));
+        }, 6000);
+        setInterval(function() {
+            gauges.setValue(1, 1, 40 + Math.round(60 * Math.random()));
+        }, 5000);
+        setInterval(function() {
+            gauges.setValue(2, 1, 60 + Math.round(40 * Math.random()));
+        }, 7500);
+    })
 </script>
 </body>
 </html>

package/examples/medium/remote.html

@@ -0,0 +1,59 @@
+<html>
+<head>
+  <title>Lightview:Examples:Medium:Remote</title>
+  <!--
+      for convenience, import the chart component from the Lightview component library
+      alias it to r-chart rather than use the default l-chart
+      we could use any gauge component that exposes methods to update its view
+  -->
+  <link href="../../components/chart.html" rel="module" crossorigin="use-credentials" as="r-chart">
+  <!--
+      load the lightview library, about 7K
+      use the body of this file to create a custom element to replace itself
+  -->
+  <script src="../../lightview.js?as=x-body"></script>
+</head>
+<body>
+<!--
+  layout the dashboad using the chart component r-chart
+-->
+<div style="width:100%;text-align:center">
+  <!--
+      set the initial value 0 for all components in a relaxed JSON5 configuration data block
+  -->
+  <r-chart id="dashboard" style="display:inline-block" type="Gauge" title="Server Status">
+    [
+    ['Label', 'Value'], // gauge will always take two columns, Label and Value
+    ['Memory', 0],
+    ['CPU', 0],
+    ['Network', 0]
+    ]
+  </r-chart>
+</div>
+<script type="lightview/module">
+    // use local, normal variables for as much as possible
+    const {remote} = await import("../../types.js"), // load the functional type 'remote`
+      sensorIndex = { // map sensor names to indexes in the dashboard data
+        memory:0,
+        cpu:1,
+        network:2
+      },
+      dashboard = document.body.getElementById("dashboard"),
+      path = "https://lightview.dev/sensors/"; // replace base path for your own implementation
+    // create remote reactive variables for sensors with differing refresh rates (ttl in milliseconds)
+    self.variables({memory:"number"},{remote:remote({ttl:5000,path})});
+    self.variables({cpu:"number"},{remote:remote({ttl:2500,path})});
+    self.variables({network:"number"},{remote:remote({ttl:1500,path})});
+    dashboard.addEventListener("connected",() => {
+       dashboard.setOptions({ // when dashboard component has finished initializing, set more options
+          redFrom: 90, redTo: 100,
+          yellowFrom:75, yellowTo: 90,
+          minorTicks: 5});
+      addEventListener("change",({variableName,value}) => { // execute the magic with a localized eventListener
+         const index = sensorIndex[variableName];
+         dashboard.setValue(index, 1, value);
+      });
+    });
+</script>
+</body>
+</html>

package/examples/xor.html

@@ -28,7 +28,7 @@
       })
     </script>
     </template>
-    <title>Form</title>
+    <title>Lightview:Examples:XOR</title>
     <script src="../lightview.js"></script>
     <script>
         Lightview.createComponent("x-audiostream", document.getElementById("audiostream"))

package/jest.config.json

@@ -9,4 +9,4 @@
   "globalSetup": "jest-environment-puppeteer/setup",
   "globalTeardown": "jest-environment-puppeteer/teardown",
   "testEnvironment": "jest-environment-puppeteer"
-}
+}

package/lightview.js

@@ -241,10 +241,13 @@ const {observe} = (() => {
                 const variable = target[property],
                     {type, value, shared, exported, constant, reactive, remote} = variable;
                 if (constant) throw new TypeError(`${property}:${type} is a constant`);
-                newValue = type.validate ? type.validate(newValue,target[property]) : coerce(newValue,type);
+                if(newValue!=null || type.required) newValue = type.validate ? type.validate(newValue,target[property]) : coerce(newValue,type);
                 const newtype = typeof (newValue),
                     typetype = typeof (type);
-                if (newValue == null || type === "any" || (newtype === type && typetype==="string") || (typetype === "function" && (newValue && newtype === "object" && newValue instanceof type) || variable.validityState?.valid)) {
+                if ((newValue == null && !type.required) ||
+                    type === "any" ||
+                    (newtype === type && typetype==="string") ||
+                    (typetype === "function" && !type.validate && (newValue && newtype === "object" && newValue instanceof type) || variable.validityState?.valid)) {
                     if (value !== newValue) {
                         event.oldValue = value;
                         target[property].value = reactive ? Reactor(newValue) : newValue; // do first to prevent loops
@@ -260,7 +263,7 @@ const {observe} = (() => {
                 if (typetype === "function" && newValue && newtype === "object") {
                     throw new TypeError(`Can't assign instance of '${newValue.constructor.name}' to variable '${property}:${type.name.replace("bound ", "")}'`)
                 }
-                throw new TypeError(`Can't assign '${typeof (newValue)} ${newtype === "string" ? '"' + newValue + '"' : newValue}' to variable '${property}:${typetype === "function" ? type.name.replace("bound ", "") : type}'`)
+                throw new TypeError(`Can't assign '${typeof (newValue)} ${newtype === "string" ? '"' + newValue + '"' : newValue}' to variable '${property}:${typetype === "function" ? type.name.replace("bound ", "") : type} ${type.required ? "required" : ""}'`)
             },
             keys() {
                 return [...Object.keys(vars)];
@@ -339,7 +342,7 @@ const {observe} = (() => {
         }
         return nodes;
     }
-    const AsyncFunction = Object.getPrototypeOf(async function(){}).constructor;
+
     const resolveNodeOrText = (node, component, safe) => {
         const type = typeof (node),
             template = type === "string" ? node.trim() : node.template;
@@ -444,13 +447,13 @@ const {observe} = (() => {
                     eventlisteners = {};
                 // needs to be local to the instance
                 Object.defineProperty(this,"changeListener",{value:
-                    function({variableName, value}) {
-                    if (currentComponent.changeListener.targets.has(variableName)) {
-                        value = typeof (value) === "string" || !value ? value : JSON.stringify(value);
-                        if (value == null) removeComponentAttribute(currentComponent, variableName);
-                        else setComponentAttribute(currentComponent, variableName, value);
-                    }
-                }});
+                        function({variableName, value}) {
+                            if (currentComponent.changeListener.targets.has(variableName)) {
+                                value = typeof (value) === "string" || !value ? value : JSON.stringify(value);
+                                if (value == null) removeComponentAttribute(currentComponent, variableName);
+                                else setComponentAttribute(currentComponent, variableName, value);
+                            }
+                        }});
                 this.vars = {
                     ...reserved,
                     addEventListener: {
@@ -505,23 +508,25 @@ const {observe} = (() => {
                 instances.delete(this);
             }
 
-            connectedCallback() {
+            async connectedCallback() {
                 const ctx = this,
                     shadow = ctx.shadowRoot;
                 for (const attr of this.defaultAttributes) this.hasAttribute(attr.name) || this.setAttribute(attr.name, attr.value);
                 const scripts = shadow.querySelectorAll("script"),
-                    promises = [],
-                    scriptpromises = [];
+                    promises = [];
+                // scriptpromises = [];
                 for (const script of [...scripts]) {
                     if (script.attributes.src?.value?.includes("/lightview.js")) continue;
                     const currentScript = document.createElement("script");
                     if (script.className !== "lightview" && !((script.attributes.type?.value || "").includes("lightview/"))) {
                         for (const attr of script.attributes) currentScript.setAttribute(attr.name,attr.value);
-                        scriptpromises.push(new Promise((resolve) => {
-                            currentScript.onload = () => resolve();
-                        }))
                         shadow.appendChild(currentScript);
-                        currentScript.remove();
+                        await new Promise((resolve) => {
+                            currentScript.onload = () => {
+                                currentScript.remove();
+                                resolve();
+                            }
+                        })
                         continue;
                     };
                     const scriptid = Math.random() + "";
@@ -531,166 +536,166 @@ const {observe} = (() => {
                     currentScript.classList.remove("lightview");
                     const text = script.innerHTML.replaceAll(/\/\*[\s\S]*?\*\/|([^:]|^)\/\/.*$/gm, "$1").replaceAll(/\r?\n/g, "");
                     currentScript.innerHTML = `Object.getPrototypeOf(async function(){}).constructor('if(window["${scriptid}"]?.ctx) { const ctx = window["${scriptid}"].ctx; { with(ctx) { ${text}; } } }')().then(() => window["${scriptid}"]()); `;
-                    let resolver;
-                    window[scriptid] = () => {
-                        delete window[scriptid];
-                        currentScript.remove();
-                        resolver();
-                    }
-                    window[scriptid].ctx = ctx.varsProxy;
-                    promises.push(new Promise((resolve) => {
-                        resolver = resolve;
-                        // wait for all regular scripts to load first
-                        Promise.all(scriptpromises).then(() => shadow.appendChild(currentScript));
-                    }));
+                    await new Promise((resolve) => {
+                        window[scriptid] = () => {
+                            delete window[scriptid];
+                            currentScript.remove();
+                            resolve();
+                        }
+                        window[scriptid].ctx = ctx.varsProxy;
+                        shadow.appendChild(currentScript);
+                    })
                 }
-                Promise.all(promises).then(() => {
-                    const nodes = getNodes(ctx);
-                    nodes.forEach((node) => {
-                        if (node.nodeType === Node.TEXT_NODE && node.template.includes("${")) {
-                           observe(() => resolveNodeOrText(node, this));
-                        } else if (node.nodeType === Node.ELEMENT_NODE) {
-                            // resolve the value before all else;
-                            const attr = node.attributes.value,
-                                template = attr?.template;
-                            if (attr && template) {
-                                    let value = resolveNodeOrText(attr, this),
-                                        eltype = node.attributes.type ? resolveNodeOrText(node.attributes.type, ctx) : null;
-                                    const template = attr.template;
-                                    if (template) {
-                                        if (/\$\{[a-zA-z_]+\}/g.test(template)) {
-                                            const name = template.substring(2, template.length - 1);
-                                            if(!this.vars[name] || this.vars[name].reactive) {
-                                                bindInput(node, name, this, value);
+                // Promise.all(promises).then(() => {
+                const nodes = getNodes(ctx);
+                nodes.forEach((node) => {
+                    if (node.nodeType === Node.TEXT_NODE && node.template.includes("${")) {
+                        observe(() => resolveNodeOrText(node, this));
+                    } else if (node.nodeType === Node.ELEMENT_NODE) {
+                        // resolve the value before all else;
+                        const attr = node.attributes.value,
+                            template = attr?.template;
+                        if (attr && template) {
+                            let value = resolveNodeOrText(attr, this),
+                                eltype = node.attributes.type ? resolveNodeOrText(node.attributes.type, ctx) : null;
+                            const template = attr.template;
+                            if (template) {
+                                if (/\$\{[a-zA-z_]+\}/g.test(template)) {
+                                    const name = template.substring(2, template.length - 1);
+                                    if(!this.vars[name] || this.vars[name].reactive) {
+                                        bindInput(node, name, this, value);
+                                    }
+                                }
+                                observe(() => {
+                                    const value = resolveNodeOrText(template, ctx);
+                                    if(value!==undefined) {
+                                        if (eltype === "checkbox") {
+                                            if (coerce(value, "boolean") === true) {
+                                                node.setAttribute("checked", "");
+                                                node.checked = true;
+                                            } else {
+                                                node.removeAttribute("checked");
+                                                node.checked = false;
                                             }
-                                        }
-                                        observe(() => {
-                                            const value = resolveNodeOrText(template, ctx);
-                                            if(value!==undefined) {
-                                                if (eltype === "checkbox") {
-                                                    if (coerce(value, "boolean") === true) {
-                                                        node.setAttribute("checked", "");
-                                                        node.checked = true;
-                                                    } else {
-                                                        node.removeAttribute("checked");
-                                                        node.checked = false;
+                                        } else if (node.tagName === "SELECT") {
+                                            let values = [value];
+                                            if (node.hasAttribute("multiple")) values = coerce(value, Array);
+                                            [...node.querySelectorAll("option")].forEach(async (option) => {
+                                                if (option.hasAttribute("value")) {
+                                                    if (values.includes(resolveNodeOrText(option.attributes.value, ctx))) {
+                                                        option.setAttribute("selected", "");
+                                                        option.selected = true;
                                                     }
-                                                } else if (node.tagName === "SELECT") {
-                                                    let values = [value];
-                                                    if (node.hasAttribute("multiple")) values = coerce(value, Array);
-                                                    [...node.querySelectorAll("option")].forEach(async (option) => {
-                                                        if (option.hasAttribute("value")) {
-                                                            if (values.includes(resolveNodeOrText(option.attributes.value, ctx))) {
-                                                                option.setAttribute("selected", "");
-                                                                option.selected = true;
-                                                            }
-                                                        } else if (values.includes(resolveNodeOrText(option.innerText, ctx))) {
-                                                            option.setAttribute("selected", "");
-                                                            option.selected = true;
-                                                        }
-                                                    })
-                                                } else if (eltype!=="radio") {
-                                                    attr.value = value;
+                                                } else if (values.includes(resolveNodeOrText(option.innerText, ctx))) {
+                                                    option.setAttribute("selected", "");
+                                                    option.selected = true;
                                                 }
-                                            }
-                                        });
+                                            })
+                                        } else if (eltype!=="radio") {
+                                            attr.value = value;
+                                        }
                                     }
+                                });
+                            }
+                        }
+                        [...node.attributes].forEach(async (attr) => {
+                            if (attr.name === "value" && attr.template) return;
+                            const {name, value} = attr,
+                                vname = node.attributes.name?.value;
+                            if (name === "type" && value=="radio" && vname) {
+                                bindInput(node, vname, this);
+                                observe(() => {
+                                    const varvalue =  Function("context", "with(context) { return `${" + vname + "}` }")(ctx.varsProxy);
+                                    if (node.attributes.value.value == varvalue) {
+                                        node.setAttribute("checked", "");
+                                        node.checked = true;
+                                    } else {
+                                        node.removeAttribute("checked");
+                                        node.checked = false;
+                                    }
+                                });
                             }
-                           [...node.attributes].forEach(async (attr) => {
-                                if (attr.name === "value" && attr.template) return;
-                                const {name, value} = attr,
-                                    vname = node.attributes.name?.value;
-                                if (name === "type" && value=="radio" && vname) {
-                                    bindInput(node, vname, this);
-                                   observe(() => {
-                                        const varvalue =  Function("context", "with(context) { return `${" + vname + "}` }")(ctx.varsProxy);
-                                        if (node.attributes.value.value == varvalue) {
-                                            node.setAttribute("checked", "");
-                                            node.checked = true;
-                                        } else {
-                                            node.removeAttribute("checked");
-                                            node.checked = false;
-                                        }
-                                    });
-                                }
 
-                                const [type, ...params] = name.split(":");
-                                if (type === "") { // name is :something
-                                    observe(() => {
-                                        const value = attr.value;
-                                        if (params[0]) {
-                                            if (value === "true") node.setAttribute(params[0], "")
-                                            else node.removeAttribute(params[0]);
-                                        } else {
-                                            const elvalue = node.attributes.value ? resolveNodeOrText(node.attributes.value, ctx) : null,
-                                                eltype = node.attributes.type ? resolveNodeOrText(node.attributes.type, ctx) : null;
-                                            if (eltype === "checkbox" || node.tagName === "OPTION") {
-                                                if (elvalue === "true") node.setAttribute("checked", "")
-                                                else node.removeAttribute("checked");
-                                            }
-                                        }
-                                    })
-                                } else if (type === "l-on") {
-                                    let listener;
-                                    observe(() => {
-                                        const value = resolveNodeOrText(attr, this);
-                                        if (listener) node.removeEventListener(params[0], listener);
-                                        listener = this[value] || window[value] || Function(value);
-                                        addListener(node, params[0], listener);
-                                    })
-                                } else if (type === "l-if") {
-                                    observe(() => {
-                                        const value = resolveNodeOrText(attr, this);
-                                        node.style.setProperty("display", value === "true" ? "revert" : "none");
-                                    })
-                                } else if (type === "l-for") {
-                                    node.template ||= node.innerHTML;
-                                    observe(() => {
-                                        const [what = "each", vname = "item", index = "index", array = "array", after = false] = params,
-                                            value = resolveNodeOrText(attr, this),
-                                            coerced = coerce(value, what === "each" ? Array : "object"),
-                                            target = what === "each" ? coerced : Object[what](coerced),
-                                            html = target.reduce( (html, item, i, target) => {
-                                                return html += Function("vars", "context", "with(vars) { with(context) { return `" + node.template + "` }}")(
-                                                    ctx.varsProxy,
-                                                    {
-                                                        [vname]: item,
-                                                        [index]: i,
-                                                        [array]: target
-                                                    })
-                                            }, ""),
-                                            parsed = parser.parseFromString(html, "text/html");
-                                        if (!window.lightviewDebug) {
-                                            if (after) {
-                                                node.style.setProperty("display", "none")
-                                            } else {
-                                                while (node.lastElementChild) node.lastElementChild.remove();
-                                            }
+                            const [type, ...params] = name.split(":");
+                            if (type === "") { // name is :something
+                                observe(() => {
+                                    const value = attr.value;
+                                    if (params[0]) {
+                                        if (value === "true") node.setAttribute(params[0], "")
+                                        else node.removeAttribute(params[0]);
+                                    } else {
+                                        const elvalue = node.attributes.value ? resolveNodeOrText(node.attributes.value, ctx) : null,
+                                            eltype = node.attributes.type ? resolveNodeOrText(node.attributes.type, ctx) : null;
+                                        if (eltype === "checkbox" || node.tagName === "OPTION") {
+                                            if (elvalue === "true") node.setAttribute("checked", "")
+                                            else node.removeAttribute("checked");
                                         }
-                                        while (parsed.body.firstChild) {
-                                            if (after) node.parentElement.insertBefore(parsed.body.firstChild, node);
-                                            else node.appendChild(parsed.body.firstChild);
+                                    }
+                                })
+                            } else if (type === "l-on") {
+                                let listener;
+                                observe(() => {
+                                    const value = resolveNodeOrText(attr, this);
+                                    if (listener) node.removeEventListener(params[0], listener);
+                                    listener = this[value] || window[value] || Function(value);
+                                    addListener(node, params[0], listener);
+                                })
+                            } else if (type === "l-if") {
+                                observe(() => {
+                                    const value = resolveNodeOrText(attr, this);
+                                    node.style.setProperty("display", value === "true" ? "revert" : "none");
+                                })
+                            } else if (type === "l-for") {
+                                node.template ||= node.innerHTML;
+                                observe(() => {
+                                    const [what = "each", vname = "item", index = "index", array = "array", after = false] = params,
+                                        value = resolveNodeOrText(attr, this),
+                                        coerced = coerce(value, what === "each" ? Array : "object"),
+                                        target = what === "each" ? coerced : Object[what](coerced),
+                                        html = target.reduce( (html, item, i, target) => {
+                                            return html += Function("vars", "context", "with(vars) { with(context) { return `" + node.template + "` }}")(
+                                                ctx.varsProxy,
+                                                {
+                                                    [vname]: item,
+                                                    [index]: i,
+                                                    [array]: target
+                                                })
+                                        }, ""),
+                                        parsed = parser.parseFromString(html, "text/html");
+                                    if (!window.lightviewDebug) {
+                                        if (after) {
+                                            node.style.setProperty("display", "none")
+                                        } else {
+                                            while (node.lastElementChild) node.lastElementChild.remove();
                                         }
-                                    })
-                                } else if(attr.template) {
-                                    observe(() => {
-                                        resolveNodeOrText(attr, this);
-                                    })
-                                }
-                            })
-                        }
-                    })
-                    shadow.normalize();
-                    observer ||= createObserver(ctx, framed);
-                    observer.observe(ctx, {attributeOldValue: true, subtree:true, characterData:true, characterDataOldValue:true});
-                    ctx.vars.postEvent.value("connected");
+                                    }
+                                    while (parsed.body.firstChild) {
+                                        if (after) node.parentElement.insertBefore(parsed.body.firstChild, node);
+                                        else node.appendChild(parsed.body.firstChild);
+                                    }
+                                })
+                            } else if(attr.template) {
+                                observe(() => {
+                                    resolveNodeOrText(attr, this);
+                                })
+                            }
+                        })
+                    }
                 })
+                shadow.normalize();
+                observer ||= createObserver(ctx, framed);
+                observer.observe(ctx, {attributeOldValue: true, subtree:true, characterData:true, characterDataOldValue:true});
+                //ctx.vars.postEvent.value("connected");
+                this.dispatchEvent(new Event("connected"));
+                // })
             }
             adoptedCallback(callback) {
-                this.vars.postEvent.value("adopted");
+                this.dispatchEvent(new Event("adopted"));
+                //this.vars.postEvent.value("adopted");
             }
             disconnectedCallback() {
-                this.vars.postEvent.value("disconnected");
+                this.dispatchEvent(new Event("disconnected"));
+                //this.vars.postEvent.value("disconnected");
             }
             get observedAttributes() {
                 return CustomElement.observedAttributes;
@@ -782,7 +787,7 @@ const {observe} = (() => {
                                 variable.remote = remote;
                                 remote.handleRemote({variable, config:remote.config, reactive,component:this});
                             }
-                            if(type.validate) type.validate(variable.value,variable);
+                            if(type.validate && variable.value!==undefined) type.validate(variable.value,variable);
                         });
                 }
                 return Object.entries(this.vars)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lightview",
-  "version": "1.6.2b",
+  "version": "1.6.5b",
   "description": "Small, simple, powerful web UI and micro front end creation ... Great ideas from Svelte, React, Vue and Riot combined.",
   "main": "lightview.js",
   "scripts": {

package/test/basic.html

@@ -46,7 +46,7 @@
             counter = 0;
             myshare = 1;
 
-            addEventListener("connected", ({target}) => {
+            self.addEventListener("connected", ({target}) => {
                 iuntyped = "test";
                 itext = "test";
                 itel = "test";

package/test/extended.html

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Extended</title>
+    <script src="../lightview.js?as=x-body"></script>
+</head>
+<body>
+<script type="lightview/module">
+const {array,boolean,number,object,string} = await import("../types.js");
+
+self.variables({strictarray:array},{set:[]});
+self.variables({strictboolean:boolean},{set:true});
+self.variables({strictnumber:number},{set:0});
+self.variables({strictobject:object},{set:{}});
+self.variables({strictstring:string},{set:"test"});
+
+
+self.variables({requiredarray:array({required:true})});
+self.variables({requiredboolean:boolean({required:true})});
+self.variables({requirednumber:number({required:true})});
+self.variables({requiredobject:object({required:true})});
+self.variables({requiredstring:string({required:true})});
+
+//self.setVariableValue("requirednumber",null);
+
+</script>
+</body>
+</html>

package/test/extended.test.mjs

@@ -0,0 +1,270 @@
+import 'expect-puppeteer';
+function reviver(property,value) {
+    if(value==="@-Infinity") return -Infinity;
+    if(value==="@Infinity") return Infinity;
+    if(value==="@NaN") return NaN;
+    return value;
+}
+
+describe('Lightview - Variables', () => {
+    beforeAll(async () => {
+        await page.goto('http://localhost:8080/test/extended.html');
+    });
+
+    test('should be titled "Extended"', async () => {
+        await expect(page.title()).resolves.toMatch('Extended');
+    });
+
+    test('strictarray - should be array', async () => {
+        const result = await page.evaluate(() => {
+            return document.body.getVariableValue("strictarray")
+        });
+        expect(Array.isArray(result)).toBe(true);
+    });
+
+    test('strictarray - should set', async () => {
+        const result = await page.evaluate(() => {
+            try {
+                document.body.setVariableValue("strictarray",[]);
+            } catch(e) {
+                return e;
+            }
+            return document.body.getVariableValue("strictarray")
+        });
+        expect(Array.isArray(result)).toBe(true);
+    });
+
+    test('strictarray - should allow null', async () => {
+        const result = await page.evaluate(() => {
+            try {
+                document.body.setVariableValue("strictarray",undefined);
+                document.body.setVariableValue("strictarray",null);
+            } catch(e) {
+                return e;
+            }
+            return document.body.getVariableValue("strictarray")
+        });
+        expect(result).toBe(null);
+    });
+
+    test('strictarray - should throw', async () => {
+        const result = await page.evaluate(() => {
+            try {
+                document.body.setVariableValue("strictarray","false");
+            } catch(e) {
+                return e.message;
+            }
+            return document.body.getVariableValue("strictarray");
+        });
+        const {name,validityState} = JSON.parse(result,reviver);
+        expect(name).toBe("strictarray");
+        expect(validityState.typeMismatch).toBe(true);
+        expect(validityState.value).toBe("false");
+    });
+
+    test('strictboolean - should be boolean', async () => {
+        const result = await page.evaluate(() => {
+            return document.body.getVariableValue("strictboolean")
+        });
+        expect(result).toBe(true);
+    });
+
+    test('strictboolean - should set', async () => {
+        const result = await page.evaluate(() => {
+            try {
+                document.body.setVariableValue("strictboolean",false);
+            } catch(e) {
+                return e.message;
+            }
+            return document.body.getVariableValue("strictboolean")
+        });
+        expect(result).toBe(false);
+    });
+
+    test('strictboolean - should allow null', async () => {
+        const result = await page.evaluate(() => {
+            try {
+                document.body.setVariableValue("strictboolean",undefined);
+                document.body.setVariableValue("strictboolean",null);
+            } catch(e) {
+                return e.message;
+            }
+            return document.body.getVariableValue("strictboolean")
+        });
+        expect(result).toBe(null);
+    });
+
+    test('strictboolean - should throw', async () => {
+        const result = await page.evaluate(() => {
+            try {
+                document.body.setVariableValue("strictboolean","true");
+            } catch(e) {
+                return e.message;
+            }
+            return document.body.getVariableValue("strictboolean");
+        });
+        const {name,validityState} = JSON.parse(result,reviver);
+        expect(name).toBe("strictboolean");
+        expect(validityState.typeMismatch).toBe(true);
+        expect(validityState.value).toBe("true");
+    });
+
+    test('strictnumber - should be number', async () => {
+        const result = await page.evaluate(() => {
+            return document.body.getVariableValue("strictnumber")
+        });
+        expect(result).toBe(0);
+    });
+
+    test('strictnumber - should set', async () => {
+        const result = await page.evaluate(() => {
+            try {
+                document.body.setVariableValue("strictnumber",1);
+            } catch(e) {
+                return e.message;
+            }
+            return document.body.getVariableValue("strictnumber")
+        });
+        expect(result).toBe(1);
+    });
+
+    test('strictnumber - should allow null', async () => {
+        const result = await page.evaluate(() => {
+            try {
+                document.body.setVariableValue("strictnumber",undefined);
+                document.body.setVariableValue("strictnumber",null);
+            } catch(e) {
+                return e.message;
+            }
+            return document.body.getVariableValue("strictnumber")
+        });
+        expect(result).toBe(null);
+    });
+
+    test('strictnumber - should throw', async () => {
+        const result = await page.evaluate(() => {
+            try {
+                document.body.setVariableValue("strictnumber","0");
+            } catch(e) {
+                return e.message;
+            }
+            return document.body.getVariableValue("strictnumber");
+        });
+        const {name,validityState} = JSON.parse(result,reviver);
+        expect(name).toBe("strictnumber");
+        expect(validityState.typeMismatch).toBe(true);
+        expect(validityState.value).toBe("0");
+    });
+
+    test('strictobject - should be object', async () => {
+        const result = await page.evaluate(() => {
+            return document.body.getVariableValue("strictobject")
+        });
+        expect(typeof(result)).toBe("object");
+        expect(Object.keys(result).length).toBe(0);
+    });
+
+    test('strictobject - should set', async () => {
+        const result = await page.evaluate(() => {
+            try {
+                document.body.setVariableValue("strictobject", {test:"test"});
+            } catch(e) {
+                return e.message;
+            }
+            return document.body.getVariableValue("strictobject")
+        });
+        expect(typeof(result)).toBe("object");
+        expect(Object.keys(result).length).toBe(1);
+        expect(result.test).toBe("test");
+    });
+
+    test('strictobject - should allow null', async () => {
+        const result = await page.evaluate(() => {
+            try {
+                document.body.setVariableValue("strictobject",undefined);
+                document.body.setVariableValue("strictobject",null);
+            } catch(e) {
+                return e.message;
+            }
+            return document.body.getVariableValue("strictobject")
+        });
+        expect(result).toBe(null);
+    });
+
+    test('strictobject - should throw', async () => {
+        const result = await page.evaluate(() => {
+            try {
+                document.body.setVariableValue("strictobject","false");
+            } catch(e) {
+                return e.message;
+            }
+            return document.body.getVariableValue("strictobject");
+        });
+        const {name,validityState} = JSON.parse(result,reviver);
+        expect(name).toBe("strictobject");
+        expect(validityState.typeMismatch).toBe(true);
+        expect(validityState.value).toBe("false");
+    });
+
+    test('strictstring - should be string', async () => {
+        const result = await page.evaluate(() => {
+            return document.body.getVariableValue("strictstring")
+        });
+        expect(result).toBe("test");
+    });
+
+    test('strictstring - should set', async () => {
+        const result = await page.evaluate(() => {
+            try {
+                document.body.setVariableValue("strictstring","anothertest");
+            } catch(e) {
+                return e.message;
+            }
+            return document.body.getVariableValue("strictstring")
+        });
+        expect(result).toBe("anothertest");
+    });
+
+    test('strictstring - should allow null', async () => {
+        const result = await page.evaluate(() => {
+            try {
+                document.body.setVariableValue("strictstring",undefined);
+                document.body.setVariableValue("strictstring",null);
+            } catch(e) {
+                return e.message;
+            }
+            return document.body.getVariableValue("strictstring")
+        });
+        expect(result).toBe(null);
+    });
+
+    test('strictstring - should throw', async () => {
+        const result = await page.evaluate(() => {
+            try {
+                document.body.setVariableValue("strictstring",0);
+            } catch(e) {
+                return e.message;
+            }
+            return document.body.getVariableValue("strictstring");
+        });
+        const {name,validityState} = JSON.parse(result,reviver);
+        expect(name).toBe("strictstring");
+        expect(validityState.typeMismatch).toBe(true);
+        expect(validityState.value).toBe(0);
+    });
+
+    test('requirednumber - should throw and not allow null', async () => {
+        const result = await page.evaluate(() => {
+            try {
+                document.body.setVariableValue("requirednumber",null);
+            } catch(e) {
+                return e.message;
+            }
+            return document.body.getVariableValue("requirednumber")
+        });
+        const {name,validityState} = JSON.parse(result,reviver);
+        expect(name).toBe("requirednumber");
+        expect(validityState.valueMissing).toBe(true);
+        //expect(validityState.value).toBe(null);
+    });
+})

package/types.js

@@ -1,3 +1,23 @@
+const toJSON = (value) => {
+    if([-Infinity,Infinity].includes(value)) return `@${value}`;
+    if(typeof(value)==="number" && isNaN(value)) return "@NaN";
+    if(value && typeof(value)==="object") {
+        return Object.entries(value)
+            .reduce((json,[key,value]) => {
+                if(value && typeof(value)==="object" && value.toJSON) value = value.toJSON();
+                json[key] = toJSON(value);
+                return json;
+            },Array.isArray(value) ? [] : {})
+    }
+    return value;
+};
+function reviver(property,value) {
+    if(value==="@-Infinity") return -Infinity;
+    if(value==="@Infinity") return Infinity;
+    if(value==="@NaN") return NaN;
+    return value;
+}
+
 function ValidityState(options) {
     if(!this || !(this instanceof ValidityState)) return new ValidityState(options);
     Object.assign(this,{
@@ -15,9 +35,17 @@ function ValidityState(options) {
     },options);
 }
 
+function DataType(options) {
+    if(!this || !(this instanceof DataType)) return new DataType(options);
+    Object.assign(this,options);
+}
+DataType.prototype.toJSON = function() {
+    return toJSON(this);
+}
+
 const tryParse = (value) => {
     try {
-        return JSON.parse(value+"")
+        return JSON.parse(value+"",reviver)
     } catch(e) {
 
     }
@@ -25,7 +53,7 @@ const tryParse = (value) => {
 
 const ifInvalid = (variable) => {
     variable.validityState.type = typeof(variable.type)==="string" ? variable.type : variable.type.type;
-    throw new TypeError(JSON.stringify(variable));
+    throw new TypeError(JSON.stringify(DataType(variable)));
     // or could return existing value variable.value
     // or could return nothing
 }
@@ -99,6 +127,7 @@ const array = ({coerce=false, required = false,whenInvalid = ifInvalid,maxlength
     }
 }
 array.validate = validateArray;
+array.whenInvalid = ifInvalid;
 array.coerce = false;
 array.required = false;
 
@@ -110,7 +139,7 @@ const validateBoolean  = function(value,variable) {
     if(this.required && value==null) {
         variable.validityState = ValidityState({valueMissing: true});
     } else {
-        const result = !!(this.coerce ? tryParse(value) : value);
+        const result = this.coerce ? tryParse(value) : value;
         if(typeof(result)!=="boolean") {
             variable.validityState = ValidityState({typeMismatch: true, value});
         } else {
@@ -135,6 +164,7 @@ const boolean = ({coerce=false,required=false, whenInvalid = ifInvalid,...rest})
     }
 }
 boolean.validate = validateBoolean;
+boolean.whenInvalid = ifInvalid;
 boolean.coerce = false;
 boolean.required = false;
 
@@ -186,11 +216,12 @@ const number = ({coerce=false,required = false,whenInvalid = ifInvalid,min=-Infi
     }
 }
 number.validate = validateNumber;
+number.whenInvalid = ifInvalid;
 number.min = -Infinity;
 number.max = Infinity;
 number.coerce = false;
 number.required = false;
-number.allwNaN = true;
+number.allowNaN = true;
 number.step = 1;
 
 const validateObject  = function(value,variable) {
@@ -225,6 +256,7 @@ const object = ({coerce=false, required = false,whenInvalid = ifInvalid,...rest}
     }
 }
 object.validate = validateObject;
+object.whenInvalid = ifInvalid;
 object.coerce = false;
 object.required = false;
 
@@ -269,6 +301,7 @@ const string = ({coerce=false, required = false,whenInvalid = ifInvalid, maxleng
     }
 }
 string.validate = validateString;
+string.whenInvalid = ifInvalid;
 string.coerce = false;
 string.required = false;
 string.maxlength = Infinity;
@@ -306,6 +339,7 @@ const symbol = ({coerce=false,required=false, whenInvalid = ifInvalid,...rest})
     }
 }
 symbol.validate = validateSymbol;
+symbol.whenInvalid = ifInvalid;
 symbol.coerce = false;
 symbol.required = false;
 
@@ -404,9 +438,9 @@ const handleRemote = async ({variable, config, reactive, component},doput) => {
             : get(href,variable));
         if(variable.value===undefined) variable.value = value; // do not await here
     } else if (remote && type === "object") {
-        let href;
         if(!config.path) config.path = `./${variable.name}`;
-        if(config.path) href = new URL(config.path,window.location.href).href;
+        if(config.path.endsWith("/")) config.path = `${config.path}${variable.name}`;
+        const href = new URL(config.path,window.location.href).href;
         if(!config.get || !config.put) {
             if(!href) throw new Error(`A remote path is required if no put function is provided for remote data`)
             if(!config.get) config.get = get;
@@ -425,12 +459,12 @@ const handleRemote = async ({variable, config, reactive, component},doput) => {
     }
     if(value) {
         const json = await value;
-       //value.then((json) => {
-            if (json && typeof (json) === "object" && reactive) {
-                variable.value = remoteProxy({json, variable,config, reactive, component});
-            } else {
-                component.setVariableValue(variable.name,json);
-            }
+        //value.then((json) => {
+        if (json && typeof (json) === "object" && reactive) {
+            variable.value = remoteProxy({json, variable,config, reactive, component});
+        } else {
+            component.setVariableValue(variable.name,json);
+        }
         //})
     }
 }
@@ -442,4 +476,4 @@ const remote = (config) => {
     }
 }
 
-export {ValidityState,any,array,boolean,number,string,symbol,remote}
+export {ValidityState,any,array,boolean,number,object,string,symbol,remote,reviver}