lightview 1.4.2-b → 1.4.7-b

package/README.md

@@ -1,8 +1,8 @@
-# lightview v1.4.2b (BETA)
+# lightview v1.4.7b (BETA)
 
 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).
+Great ideas from Svelte, React, Vue and Riot combined into one small tool: < 7K (minified/gzipped).
 
 See the docs and examples at [https://lightview.dev](https://lightview.dev).
 

package/codepen-no-tabs-embed.css

@@ -0,0 +1,2 @@
+body.split-output #output > .active { width: 75%; }
+body.split-output #output > #result-box.active { width: 25% }

package/counter.html

@@ -9,6 +9,7 @@
 </p>
 
 <script type="lightview/module">
+debugger;
     self.variables({
       count: number
     }, {

package/jest-puppeteer.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+    server: {
+        command: 'http-server'
+    }
+}

package/jest.config.json

@@ -0,0 +1,12 @@
+{
+  "moduleFileExtensions": ["mjs", "js", "jsx", "ts", "tsx", "json", "node"],
+  "testMatch": [
+    "**/?(*.)test.?js"
+  ],
+  "verbose": true,
+  "transform": {},
+  "testEnvironment": "jest-environment-node",
+  "globalSetup": "jest-environment-puppeteer/setup",
+  "globalTeardown": "jest-environment-puppeteer/teardown",
+  "testEnvironment": "jest-environment-puppeteer"
+}

package/lightview.js

@@ -30,8 +30,24 @@ const {observe} = (() => {
     let CURRENTOBSERVER;
     const parser = new DOMParser();
 
-    const addListener = (node,eventName,callback) => {
-        node.addEventListener(eventName,callback); // just used to make code footprint smaller
+    const templateSanitizer = (string) => {
+        return string.replace(/function\s+/g,"")
+            .replace(/function\(/g,"")
+            .replace(/=\s*>/g,"")
+            .replace(/(while|do|for|alert)\s*\(/g,"")
+            .replace(/console\.[a-zA-Z$]+\s*\(/g,"");
+    }
+    Lightview.sanitizeTemplate = templateSanitizer;
+
+    const escaper = document.createElement('textarea');
+    function escapeHTML(html) {
+        escaper.textContent = html;
+        return escaper.innerHTML;
+    }
+    Lightview.escapeHTML = escapeHTML;
+
+    const addListener = (node, eventName, callback) => {
+        node.addEventListener(eventName, callback); // just used to make code footprint smaller
     }
     const anchorHandler = async (event) => {
         event.preventDefault();
@@ -73,6 +89,7 @@ const {observe} = (() => {
         if (toType === "number") return parseFloat(value + "");
         if (toType === "boolean") {
             if (["on", "checked", "selected"].includes(value)) return true;
+            if(value==null || value==="") return false;
             try {
                 const parsed = JSON.parse(value + "");
                 if (typeof (parsed) === "boolean") return parsed;
@@ -93,9 +110,18 @@ const {observe} = (() => {
                     if (isfunction) {
                         const instance = toType === Date ? new Date() : Object.create(toType.prototype);
                         if (instance instanceof Array) {
-                            const parsed = JSON.parse(value.startsWith("[") ? value : `[${value}]`);
-                            if (!Array.isArray(parsed)) throw new TypeError(`Expected an Array for parsed data`)
-                            parsed.forEach((item) => instance.push(item))
+                            let parsed = tryParse(value.startsWith("[") ? value : `[${value}]`);
+                            if (!Array.isArray(parsed)) {
+                                if(value.includes(",")) parsed = value.split(",");
+                                else {
+                                    parsed = tryParse(`["${value}"]`);
+                                    if(!Array.isArray(parsed) || parsed[0]!==value && parsed.length!==1) parsed = null;
+                                }
+                            }
+                            if (!Array.isArray(parsed)) {
+                                throw new TypeError(`Expected an Array for parsed data`)
+                            }
+                            instance.push(...parsed);
                         } else if (instance instanceof Date) {
                             instance.setTime(Date.parse(value));
                         } else {
@@ -131,7 +157,7 @@ const {observe} = (() => {
                                 return [...target];
                             }
                             if (property === "toString") return function toString() {
-                                return JSON.stringify(target);
+                                return JSON.stringify([...target]);
                             }
                         }
                         let value = target[property];
@@ -218,18 +244,18 @@ const {observe} = (() => {
             }
         });
     }
-    const createObserver = (domNode,framed) => {
+    const createObserver = (domNode, framed) => {
         const observer = new MutationObserver((mutations) => {
             mutations.forEach((mutation) => {
                 if (mutation.type === "attributes") {
-                    if(framed) debugger;
+                    //if (framed) debugger;
                     const name = mutation.attributeName,
                         target = mutation.target,
                         value = target.getAttribute(name);
-                    if(framed && name==="message" && target instanceof IFrameElement) {
-                        if(value) console.log("message",value);
+                    if (framed && name === "message" && target instanceof IFrameElement) {
+                        if (value) console.log("message", value);
                         target.removeAttribute(name);
-                        target.dispatchEvent("message",new CustomEvent("message",{detail:JSON.parse(value)}))
+                        target.dispatchEvent(new CustomEvent("message", {detail: JSON.parse(value)}))
                     }
                     if (target.observedAttributes && target.observedAttributes.includes(name)) {
                         if (value !== mutation.oldValue) {
@@ -270,7 +296,7 @@ const {observe} = (() => {
                     nodes.push(node);
                 } else if (node.nodeType === Node.ELEMENT_NODE) {
                     let skip;
-                    if(node.getAttribute("type")==="radio") nodes.push(node);
+                    if (node.getAttribute("type") === "radio") nodes.push(node);
                     [...node.attributes].forEach((attr) => {
                         if (attr.value.includes("${")) {
                             attr.template ||= attr.value;
@@ -286,12 +312,14 @@ const {observe} = (() => {
         }
         return nodes;
     }
-    const resolveNode = (node, component) => {
+    const resolveNode = (node, component,safe) => {
         if (node?.template) {
             try {
-                const value = Function("context", "with(context) { return `" + node.template + "` }")(component.varsProxy);
-                node.nodeValue = value === "null" || value === "undefined" ? "" : value;
+                let value = Function("context", "with(context) { return `" + Lightview.sanitizeTemplate(node?.template) + "` }")(component.varsProxy);
+                value = node.nodeType===Node.TEXT_NODE || !safe ? value : Lightview.escapeHTML(value);
+                node.nodeValue = value=="null" || value=="undefined" ? "" : value;
             } catch (e) {
+                console.warn(e);
                 if (!e.message.includes("defined")) throw e; // actually looking for undefined or not defined
             }
         }
@@ -308,34 +336,35 @@ const {observe} = (() => {
     }
     const inputTypeToType = (inputType) => {
         if (!inputType) return "any"
-        if (["text", "tel", "email", "url", "search", "radio","color","password"].includes(inputType)) return "string";
+        if (["text", "tel", "email", "url", "search", "radio", "color", "password"].includes(inputType)) return "string";
         if (["number", "range"].includes(inputType)) return "number";
         if (["datetime"].includes(inputType)) return Date;
         if (["checkbox"].includes(inputType)) return "boolean";
         return "any";
     }
-    const _importAnchors = (node, component) => {
-        [...node.querySelectorAll('a[href][target^="#"]')].forEach((node) => {
+    const importAnchors = (node, component) => {
+        [...node.querySelectorAll('a[href$=".html"][target^="#"]')].forEach((node) => {
             node.removeEventListener("click", anchorHandler);
-            addListener(node,"click", anchorHandler);
+            addListener(node, "click", anchorHandler);
         })
     }
-    const bindInput = (input, name, component) => {
-        const inputtype = input.tagName === "SELECT" ? "text" : input.getAttribute("type"),
+    const bindInput = (input, name, component,value) => {
+        const inputtype = input.tagName === "SELECT" || input.tagName === "TEXTAREA" ? "text" : input.getAttribute("type"),
             type = input.tagName === "SELECT" && input.hasAttribute("multiple") ? Array : inputTypeToType(inputtype),
-            deflt = input.getAttribute("default"),
-            value = input.getAttribute("value");
+            deflt = input.getAttribute("default");
+        value ||= input.getAttribute("value");
         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 ${name}:${variable.type}`)
         }
         component.variables({[name]: type});
+        component.setValue(name,value);
         let eventname = "change";
-        if(input.tagName!=="SELECT" && (!inputtype || ["text","number","tel","email","url","search","password"].includes(inputtype))) {
+        if (input.tagName !== "SELECT" && (!inputtype || input.tagName === "TEXTAREA" || ["text", "number", "tel", "email", "url", "search", "password"].includes(inputtype))) {
             eventname = "input";
         }
-        addListener(input,eventname, (event) => {
+        addListener(input, eventname, (event) => {
             event.stopImmediatePropagation();
             const target = event.target;
             let value = target.value;
@@ -344,7 +373,7 @@ const {observe} = (() => {
             } else if (target.tagName === "SELECT") {
                 if (target.hasAttribute("multiple")) {
                     value = [...target.querySelectorAll("option")]
-                        .filter((option) => option.selected || resolveNode(option.attributes.value,component)==value || option.innerText == value)
+                        .filter((option) => option.selected || resolveNode(option.attributes.value, component) == value || option.innerText == value)
                         .map((option) => option.getAttribute("value") || option.innerText);
                 }
             }
@@ -354,21 +383,23 @@ const {observe} = (() => {
     const tryParse = (value) => {
         try {
             return JSON.parse(value);
-        } catch(e) {
+        } catch (e) {
             return value;
         }
     }
     let reserved = {
+        any: {value: "any",constant: true},
         boolean: {value: "boolean", constant: true},
         string: {value: "string", constant: true},
         number: {value: "number", constant: true},
+        object: {value: "object", constant: true},
         observed: {value: true, constant: true},
         reactive: {value: true, constant: true},
         shared: {value: true, constant: true},
         exported: {value: true, constant: true},
         imported: {value: true, constant: true}
     };
-    const createClass = (domElementNode, {observer,  importAnchors, framed}) => {
+    const createClass = (domElementNode, {observer, framed}) => {
         const instances = new Set(),
             dom = domElementNode.tagName === "TEMPLATE"
                 ? domElementNode.content.cloneNode(true)
@@ -382,7 +413,7 @@ const {observe} = (() => {
             constructor() {
                 super();
                 instances.add(this);
-                observer ||= createObserver(this,framed);
+                observer ||= createObserver(this, framed);
                 const currentComponent = this,
                     shadow = this.attachShadow({mode: "open"}),
                     eventlisteners = {};
@@ -412,7 +443,7 @@ const {observe} = (() => {
                 };
                 this.defaultAttributes = domElementNode.tagName === "TEMPLATE" ? domElementNode.attributes : dom.attributes;
                 this.varsProxy = createVarsProxy(this.vars, this, CustomElement);
-                if(framed || CustomElement.lightviewFramed) this.variables({message:Object},{exported:true});
+                if (framed || CustomElement.lightviewFramed) this.variables({message: Object}, {exported: true});
                 ["getElementById", "querySelector", "querySelectorAll"]
                     .forEach((fname) => {
                         Object.defineProperty(this, fname, {
@@ -422,7 +453,7 @@ const {observe} = (() => {
                         })
                     });
                 [...dom.childNodes].forEach((child) => shadow.appendChild(child.cloneNode(true)));
-                if (importAnchors) _importAnchors(shadow, this);
+                importAnchors(shadow, this);
             }
 
             get siblings() {
@@ -472,51 +503,49 @@ const {observe} = (() => {
                         } 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,() => {
+                            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","");
+                                        eltype = resolveNode(node.attributes.type, ctx);
+                                    if(node.attributes.value) {
+                                        const template = attr.template;
+                                        if(/\$\{[a-zA-z_]+\}/g.test(template)) {
+                                            const name = template.substring(2,template.length-1);
+                                            bindInput(node,name,this,value);
+                                        }
+                                    }
+                                    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"});
+                                        const vname = resolveNode(node.attributes.name, ctx);
+                                        if (vname) ctx.setValue(vname, node.checked, {coerceTo: "boolean"});
                                     }
-                                    if(node.tagName==="SELECT") {
+                                    if (node.tagName === "SELECT") {
                                         let values = [value];
-                                        if(node.hasAttribute("multiple")) values = coerce(value,Array);
+                                        if (node.hasAttribute("multiple")) values = coerce(value, Array);
                                         [...node.querySelectorAll("option")].forEach((option) => {
-                                            if(option.hasAttribute("value")) {
+                                            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","");
+                                            } 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) => {
-                                if(attr.name==="value") return;
+                                if (attr.name === "value" && attr.template) return;
                                 const {name, value} = attr;
-                                if(name==="type") {
+                                if (name === "type") {
                                     if (value === "radio") {
                                         const name = resolveNode(node.attributes.name, ctx);
                                         for (const vname of this.getVariableNames()) {
@@ -524,7 +553,7 @@ const {observe} = (() => {
                                                 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)) {
+                                                    if (varvalue == resolveNode(node.attributes.value, ctx)) {
                                                         node.setAttribute("checked", "");
                                                         node.checked = true;
                                                     } else {
@@ -543,13 +572,13 @@ const {observe} = (() => {
                                 if (type === "") { // name is :something
                                     render(!!attr.template, () => {
                                         const value = attr.value,
-                                            elvalue = resolveNode(node.attributes.value,ctx),
-                                            eltype = resolveNode(node.attributes.type,ctx),
-                                            elname = resolveNode(node.attributes.name,ctx);
+                                            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 (eltype=== "checkbox" || node.tagName === "OPTION") {
+                                        } else if (eltype === "checkbox" || node.tagName === "OPTION") {
                                             if (value === "true") node.setAttribute("checked", "")
                                             else node.removeAttribute("checked");
                                         }
@@ -560,7 +589,7 @@ const {observe} = (() => {
                                         const value = resolveNode(attr, this);
                                         if (listener) node.removeEventListener(params[0], listener);
                                         listener = this[value] || window[value] || Function(value);
-                                        addListener(node,params[0], listener);
+                                        addListener(node, params[0], listener);
                                     })
                                 } else if (type === "l-if") {
                                     render(!!attr.template, () => {
@@ -575,11 +604,13 @@ const {observe} = (() => {
                                             coerced = coerce(value, what === "each" ? Array : "object"),
                                             target = what === "each" ? coerced : Object[what](coerced),
                                             html = target.reduce((html, item, i, target) => {
-                                                return html += Function("context", "with(context) { return `" + node.template + "` }")({
-                                                    [vname]: item,
-                                                    [index]: i,
-                                                    [array]: 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) {
@@ -611,46 +642,46 @@ const {observe} = (() => {
                 //Object.defineProperty(this, "adoptedCallback", {configurable: true, writable: true, value});
             }
 
-            connected(value) {
-                this.connectedCallback = value;
+            connected(callback) {
+                this.connectedCallback = callback;
                 //Object.defineProperty(this, "connectedCallback", {configurable: true, writable: true, value});
             }
 
-            attributeChanged(value) {
-                this.attributeChangedCallback = value;
+            attributeChanged(callback) {
+                this.attributeChangedCallback = callback;
                 //Object.defineProperty(this, "attributeChangedCallback", {configurable: true, writable: true, value});
             }
 
-            disconnected(value) {
+            disconnected(callback) {
                 Object.defineProperty(this, "disconnectedCallback", {
                     configurable: true,
                     writable: true,
                     value: () => {
                         value();
-                        super.disconnectedCallback(value);
+                        super.disconnectedCallback(callback);
                     }
                 });
             }
 
             getVariableNames() {
                 return Object.keys(this.vars).filter((name) => {
-                    return !(name in reserved) && !["self","addEventListener","postEvent"].includes(name)
+                    return !(name in reserved) && !["self", "addEventListener", "postEvent"].includes(name)
                 })
             }
 
-            setValue(name, value, {shared, coerceTo = typeof (value)} = {}) {
+            setValue(variableName, value, {coerceTo = typeof (value)} = {}) {
                 if (!this.isConnected) {
                     instances.delete(this);
                     return false;
                 }
-                let {type} = this.vars[name] || {};
+                let {type} = this.vars[variableName] || {};
                 if (type) {
                     value = coerce(value, type);
-                    if (this.varsProxy[name] !== value) {
-                        const variable = this.vars[name];
+                    if (this.varsProxy[variableName] !== value) {
+                        const variable = this.vars[variableName];
                         if (variable.shared) {
                             const event = new VariableEvent({
-                                variableName: name,
+                                variableName: variableName,
                                 value: value,
                                 oldValue: variable.value
                             });
@@ -658,12 +689,12 @@ const {observe} = (() => {
                             this.vars.postEvent.value("change", event);
                             if (event.defaultPrevented) variable.value = value;
                         } else {
-                            this.varsProxy[name] = value;
+                            this.varsProxy[variableName] = value;
                         }
                     }
                     return true;
                 }
-                this.vars[name] = {name, type: coerceTo, value: coerce(value, coerceTo)};
+                this.vars[variableName] = {name, type: coerceTo, value: coerce(value, coerceTo)};
                 return false;
             }
 
@@ -732,48 +763,57 @@ const {observe} = (() => {
             }
         }
     }
-    const createComponent = (name, node, {observer, importAnchors,framed} = {}) => {
+    const createComponent = (name, node, {framed,observer} = {}) => {
         let ctor = customElements.get(name);
         if (ctor) {
-            if(framed && !ctor.lightviewFramed) {
+            if (framed && !ctor.lightviewFramed) {
                 ctor.lightviewFramed = true;
             } else {
                 console.warn(new Error(`${name} is already a CustomElement. Not redefining`));
             }
             return ctor;
         }
-        ctor = createClass(node, {observer, importAnchors,framed});
+        ctor = createClass(node, {observer, framed});
         customElements.define(name, ctor);
+        Lightview.customElements.set(name,ctor);
         return ctor;
     }
+    Lightview.customElements = new Map();
     Lightview.createComponent = createComponent;
     //Object.defineProperty(Lightview, "createComponent", {writable: true, configurable: true, value: createComponent})
     const importLink = async (link, observer) => {
         const url = (new URL(link.getAttribute("href"), window.location.href)),
             as = link.getAttribute("as") || getNameFromPath(url.pathname);
-        if (url.hostname !== window.location.hostname) {
-            throw new URIError(`importLink:HTML imports must be from same domain: ${url.hostname}!=${location.hostname}`)
+        if (url.hostname !== window.location.hostname && !link.getAttribute("crossorigin")) {
+            throw new URIError(`importLink:HTML imports must be from same domain: ${url.hostname}!=${location.hostname} unless 'crossorigin' attribute is set.`)
         }
         if (!customElements.get(as)) {
             const html = await (await fetch(url.href)).text(),
                 dom = parser.parseFromString(html, "text/html"),
-                importAnchors = !!dom.head.querySelector('meta[name="l-importAnchors"]'),
-                unhide = !!dom.head.querySelector('meta[name="l-unhide"]');
+                unhide = !!dom.head.querySelector('meta[name="l-unhide"]'),
+                links = dom.head.querySelectorAll('link[href$=".html"][rel=module]');
+            for(const childlink of links) {
+                const href = childlink.getAttribute("href"),
+                    childurl = new URL(href,url.href);
+                childlink.setAttribute("href",childurl.href);
+                if(link.hasAttribute("crossorigin")) childlink.setAttribute("crossorigin",link.getAttribute("crossorigin"))
+                await importLink(childlink,observer);
+            }
             if (unhide) dom.body.removeAttribute("hidden");
-            createComponent(as, dom.body, {observer, importAnchors});
+            createComponent(as, dom.body, {observer});
         }
         return {as};
     }
     const importLinks = async () => {
         const observer = createObserver(document.body);
-        for (const link of [...document.querySelectorAll("link[href][rel=module]")]) {
-            await importLink(link);
+        for (const link of [...document.querySelectorAll(`link[href$=".html"][rel=module]`)]) {
+            await importLink(link,observer);
         }
     }
 
-    const bodyAsComponent = ({as = "x-body", unhide, importAnchors,framed} = {}) => {
+    const bodyAsComponent = ({as = "x-body", unhide, framed} = {}) => {
         const parent = document.body.parentElement;
-        createComponent(as, document.body, {importAnchors,framed});
+        createComponent(as, document.body, {framed});
         const component = document.createElement(as);
         parent.replaceChild(component, document.body);
         Object.defineProperty(document, "body", {
@@ -815,19 +855,18 @@ const {observe} = (() => {
 
     const url = new URL(document.currentScript.getAttribute("src"), window.location.href);
     let domContentLoadedEvent;
-    if(!domContentLoadedEvent) addListener(window,"DOMContentLoaded", (event) => domContentLoadedEvent = event);
+    if (!domContentLoadedEvent) addListener(window, "DOMContentLoaded", (event) => domContentLoadedEvent = event);
     let OBSERVER;
     const loader = async (whenFramed) => {
-        if (!!document.querySelector('meta[name="l-importLinks"]')) await importLinks();
-        const importAnchors = !!document.querySelector('meta[name="l-importAnchors"]'),
-            unhide = !!document.querySelector('meta[name="l-unhide"]'),
+        await importLinks();
+        const 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, isolated, enableFrames, framed:true});
+            whenFramed({unhide, isolated, enableFrames, framed: true});
             if (!isolated) {
                 postMessage.enabled = true;
-                addListener(window,"message", ({data}) => {
+                addListener(window, "message", ({data}) => {
                     const {type, argsList} = JSON.parse(data);
                     if (type === "framed") {
                         const resize = () => {
@@ -859,11 +898,11 @@ const {observe} = (() => {
                 postMessage({type: "DOMContentLoaded"})
             }
         } else if (url.searchParams.has("as")) {
-            bodyAsComponent({as: url.searchParams.get("as"), unhide, importAnchors});
+            bodyAsComponent({as: url.searchParams.get("as"), unhide});
         }
         if (enableFrames) {
             postMessage.enabled = true;
-            addListener(window,"message", (message) => {
+            addListener(window, "message", (message) => {
                 const {type, iframeId, argsList, href} = JSON.parse(message.data),
                     iframe = document.getElementById(iframeId);
                 if (iframe) {
@@ -900,7 +939,7 @@ const {observe} = (() => {
                 }
                 console.warn("iframe posted a message without providing an id", message);
             });
-            if(!OBSERVER) {
+            if (!OBSERVER) {
                 const mutationCallback = (mutationsList) => {
                     const console = document.getElementById("console");
                     for (const {target, attributeName, oldValue} of mutationsList) {
@@ -914,13 +953,16 @@ const {observe} = (() => {
                                 }, iframe)
                             }
                         }
-                        if(attributeName==="message") {
-                            if(value) {
+                        if (attributeName === "message") {
+                            if (value) {
                                 target.removeAttribute("message");
-                                target.dispatchEvent(new CustomEvent("message",{target,detail:JSON.parse(value)}))
+                                target.dispatchEvent(new CustomEvent("message", {target, detail: JSON.parse(value)}))
                             }
                         } else {
-                            target.dispatchEvent(new CustomEvent("attribute.changed",{target,detail:{attributeName,value,oldValue}}))
+                            target.dispatchEvent(new CustomEvent("attribute.changed", {
+                                target,
+                                detail: {attributeName, value, oldValue}
+                            }))
                         }
                     }
                 };
@@ -930,17 +972,17 @@ const {observe} = (() => {
             }
         }
     }
-    const whenFramed = (f, {isolated} = {}) => {
+    const whenFramed = (callback, {isolated} = {}) => {
         // loads for framed content
-        addListener(document,"DOMContentLoaded", (event) => loader(f));
+        addListener(document, "DOMContentLoaded", (event) => loader(callback));
     }
     Lightview.whenFramed = whenFramed;
     //Object.defineProperty(Lightview, "whenFramed", {configurable: true, writable: true, value: whenFramed});
     if (window.location === window.parent.location || !(window.parent instanceof Window) || window.parent !== window) {
         // loads for unframed content
         // CodePen mucks with window.parent
-        addListener(document,"DOMContentLoaded", () => loader())
+        addListener(document, "DOMContentLoaded", () => loader())
     }
 
     return {observe}
-})();
+})();

package/message.html

@@ -0,0 +1,13 @@
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>Message</title>
+</head>
+<body>
+${value}
+<script type="lightview/module">
+debugger;
+    self.variables({value:string},{imported});
+</script>
+</body>
+</html>

package/nested.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<head>
+    <title>Nested</title>
+    <link href="./message.html" rel="module">
+    <script src="./lightview.js?as=x-body"></script>
+</head>
+<body>
+<l-message value="Hello One"></l-message>
+<l-message value="Hello Two"></l-message>
+</body>
+</html>

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "lightview",
-  "version": "1.4.2b",
-  "description": "Small, simple, powerful web UI and micro front end creation ... imagine a blend of Svelte, React, Vue, Riot and more.",
+  "version": "1.4.7b",
+  "description": "Small, simple, powerful web UI and micro front end creation ... Great ideas from Svelte, React, Vue and Riot combined.",
   "main": "lightview.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "set NODE_OPTIONS=--experimental-vm-modules && jest ./test"
   },
   "repository": {
     "type": "git",
@@ -28,5 +28,9 @@
   "bugs": {
     "url": "https://github.com/anywhichway/lightview/issues"
   },
-  "homepage": "https://github.com/anywhichway/lightview#readme"
+  "homepage": "https://github.com/anywhichway/lightview#readme",
+  "devDependencies": {
+    "jest": "^27.5.1",
+    "jest-puppeteer": "^6.1.0"
+  }
 }

package/test/basic.html

@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Basic</title>
+    <template id="x-test" name="joe" open="true" count=1 children='["mary"]' l-on:click="bump">
+        <span id="name">${name}</span>
+        <span id="open">${open}</span>
+        <span id="count">${count}</span>
+        <span id="children">${children}</span>
+        <span id="color">${color}</span>
+        <span id="checked">${checked}</span>
+        <span id="age">${age}</span>
+        <span id="hamburger">${hamburger}</span>
+
+        <input id="iuntyped" value="${iuntyped}">
+        <input id="itext" type="text" value="${itext}">
+        <input id="itel" type="tel" value="${itel}">
+        <input id="iemail" type="email" value="${iemail}">
+        <input id="iurl" type="url" value="${iurl}">
+        <input id="isearch" type="search" value="${isearch}">
+        <input id="iradio" type="radio" value="${iradio}">
+        <input id="icolor" type="color" value="${icolor}">
+        <input id="ipassword" type="password" value="${ipassword}">
+
+        <input id="inumber" type="number" value="${inumber}">
+        <input id="irange" type="range" value="${irange}">
+
+        <input id="idatetime" type="datetime" value="${idatetime}">
+
+        <input id="icheckbox" type="checkbox" value="${icheckbox}">
+
+        <script type="lightview/module">
+        debugger;
+            self.variables({name:string,open:boolean,count:number,children:Array},{imported,reactive});
+            self.variables({color:string,checked:boolean,age:number,hamburger:Array},{exported,reactive});
+            self.variables({counter:number},{reactive});
+            self.variables({myshare:number},{shared});
+
+            color = "green";
+            checked = true;
+            age = 27;
+            hamburger = ["lettuce"];
+            counter = 0;
+            myshare = 1;
+
+            iuntyped = "test";
+            itext = "test";
+            itel = "test";
+            iemail = "test";
+            iurl = "test";
+            isearch = "test";
+            iradio = "test";
+            icolor = "test";
+            ipassword = "test";
+
+            inumber = 1;
+            irange = 1;
+
+            idatetime = new Date();
+
+            icheckbox = true;
+
+            self.bump = () => {
+                counter++;
+                };
+        </script>
+    </template>
+    <script src="../lightview.js"></script>
+    <script>
+        Lightview.createComponent("x-test",document.getElementById("x-test"));
+    </script>
+</head>
+<body>
+<p><x-test id="test"></x-test></p>
+
+<p><x-test id="test1"></x-test></p>
+</body>
+</html>

package/test/basic.test.mjs

@@ -0,0 +1,248 @@
+import 'expect-puppeteer';
+
+describe('Google', () => {
+    beforeAll(async () => {
+        await page.goto('https://google.com');
+    });
+
+    test('should be titled "Google"', async () => {
+        await expect(page.title()).resolves.toMatch('Google');
+    });
+});
+
+describe('Lightview', () => {
+    beforeAll(async () => {
+        await page.goto('http://localhost:8080/test/basic.html');
+    });
+
+    test('should be titled "Basic"', async () => {
+        await expect(page.title()).resolves.toMatch('Basic');
+    });
+
+    test('boolean - open should be imported', async () => {
+        const result = await page.evaluate(() => {
+            const el = document.getElementById("test");
+            return JSON.parse(el.getValue("open"));
+        });
+        expect(result).toBe(true);
+    });
+
+    test('number - count should be imported', async () => {
+        const result = await page.evaluate(() => {
+            const el = document.getElementById("test");
+            return JSON.parse(el.getValue("count"));
+        });
+        expect(result).toBe(1);
+    });
+
+    test('string - name should be imported', async () => {
+        const result = await page.evaluate(() => {
+            const el = document.getElementById("test");
+            return el.getValue("name");
+        });
+        expect(result).toBe("joe");
+    });
+
+    test('object - children should be imported', async () => {
+        const result = await page.evaluate(() => {
+            const el = document.getElementById("test");
+            return el.getValue("children").toJSON();
+        });
+        expect(Array.isArray(result)).toBe(true);
+        expect(result[0]).toBe("mary");
+        expect(result.length).toBe(1);
+    });
+
+    test('boolean - checked should be exported', async () => {
+        const result = await page.evaluate(() => {
+            const el = document.getElementById("test");
+            return JSON.parse(el.getAttribute("checked"));
+        });
+        expect(result).toBe(true);
+    });
+
+    test('number - age should be exported', async () => {
+        const result = await page.evaluate(() => {
+            const el = document.getElementById("test");
+            return JSON.parse(el.getAttribute("age"));
+        });
+        expect(result).toBe(27);
+    });
+
+    test('string - color should be exported', async () => {
+        const result = await page.evaluate(() => {
+            const el = document.getElementById("test");
+            return el.getAttribute("color");
+        });
+        expect(result).toBe("green");
+    });
+
+    test('object - hamburger should be exported', async () => {
+        const result = await page.evaluate(() => {
+            const el = document.getElementById("test");
+            return JSON.parse(el.getAttribute("hamburger"));
+        });
+        expect(Array.isArray(result)).toBe(true);
+        expect(result[0]).toBe("lettuce");
+        expect(result.length).toBe(1);
+    });
+
+    test('boolean - open should be rendered', async () => {
+        const result = await page.evaluate(() => {
+            const el = document.getElementById("test"),
+                result = el.getElementById("open");
+            return JSON.parse(result.innerText);
+        });
+        expect(result).toBe(true);
+    });
+
+    test('number - count should be rendered', async () => {
+        const result = await page.evaluate(() => {
+            const el = document.getElementById("test"),
+                result = el.getElementById("count");
+            return JSON.parse(result.innerText);
+        });
+        expect(result).toBe(1);
+    });
+
+    test('string - name should be rendered', async () => {
+        const result = await page.evaluate(() => {
+            const  el = document.getElementById("test"),
+                result = el.getElementById("name");
+            return result.innerText;
+        });
+        expect(result).toBe("joe");
+    });
+
+    test('object - children should be rendered', async () => {
+        const result = await page.evaluate(() => {
+            const  el = document.getElementById("test"),
+                result = el.getElementById("children");
+            return JSON.parse(result.innerText);
+        });
+        expect(Array.isArray(result)).toBe(true);
+        expect(result[0]).toBe("mary");
+        expect(result.length).toBe(1);
+    });
+
+    test('boolean - checked should be rendered', async () => {
+        const result = await page.evaluate(() => {
+            const el = document.getElementById("test"),
+                result = el.getElementById("checked");
+            return JSON.parse(result.innerText);
+        });
+        expect(result).toBe(true);
+    });
+
+    test('number - age should be rendered', async () => {
+        const result = await page.evaluate(() => {
+            const  el = document.getElementById("test"),
+                result = el.getElementById("age");
+            return JSON.parse(result.innerText);
+        });
+        expect(result).toBe(27);
+    });
+
+    test('string - color should be rendered', async () => {
+        const result = await page.evaluate(() => {
+            const  el = document.getElementById("test"),
+                result = el.getElementById("color");
+            return result.innerText;
+        });
+        expect(result).toBe("green");
+    });
+
+    test('object - hamburger should be rendered', async () => {
+        const result = await page.evaluate(() => {
+            const el = document.getElementById("test"),
+                result = el.getElementById("hamburger");
+            return JSON.parse(result.innerText);
+        });
+        expect(Array.isArray(result)).toBe(true);
+        expect(result[0]).toBe("lettuce");
+        expect(result.length).toBe(1);
+    });
+
+    test('shared - myshare should be same', async () => {
+        const result = await page.evaluate(async () => {
+            const el0 = document.getElementById("test"),
+                el1 = document.getElementById("test1")
+            return [el0.getValue("myshare"),el1.getValue("myshare")];
+        });
+        expect(Array.isArray(result)).toBe(true);
+        expect(result[0]).toBe(result[1]);
+    });
+
+    test('untyped input - iuntyped should be "test"', async () => {
+        const result = await page.evaluate(async () => {
+            const el = document.getElementById("test"),
+                result = el.getElementById("iuntyped")
+            return result.getAttribute("value");
+        });
+        expect(result).toBe("test");
+    });
+
+    // "tel", "email", "url", "search", "radio", "color", "password"
+    ["text","tel","email", "url", "search", "radio", "color", "password"].forEach((type) => {
+        const f =  Function(`return async () => {
+        const result = await page.evaluate(async () => {
+            const el = document.getElementById("test"),
+                result = el.getElementById("i${type}");
+            return {value:result.getAttribute("value"),variable:el.vars["i${type}"]};
+        });
+        const {value,variable} = result;
+        expect(value).toBe("test");
+         expect(variable.name).toBe("i${type}");
+         expect(variable.type).toBe("string");
+          expect(variable.value).toBe(value);
+    }`)();
+        test(`${type} input - i${type} should be "test"`,f);
+        });
+
+    test('number input - inumber should be 1', async () => {
+        const result = await page.evaluate(async () => {
+            const el = document.getElementById("test"),
+                result = el.getElementById("inumber")
+            return JSON.parse(result.getAttribute("value"));
+        });
+        expect(result).toBe(1);
+    });
+
+    test('range input - irange should be 1', async () => {
+        const result = await page.evaluate(async () => {
+            const el = document.getElementById("test"),
+                result = el.getElementById("irange")
+            return JSON.parse(result.getAttribute("value"));
+        });
+        expect(result).toBe(1);
+    });
+
+    test('datetime input - idatetime should be current date', async () => {
+        const result = await page.evaluate(async () => {
+            const el = document.getElementById("test"),
+                result = el.getElementById("idatetime")
+            return result.getAttribute("value");
+        });
+        const dt = new Date(result);
+        expect(dt).toBeInstanceOf(Date);
+        expect(dt.toString()).toBe(result);
+    });
+
+    test('checkbox input - icheckbox should be true', async () => {
+        const result = await page.evaluate(async () => {
+            const el = document.getElementById("test"),
+                result = el.getElementById("icheckbox")
+            return JSON.parse(result.getAttribute("value"));
+        });
+        expect(result).toBe(true);
+    });
+
+    test('on:<handler> - count should be bumped', async () => {
+        await page.click("#test",{waitUntil:"load"});
+        const result = await page.evaluate(async () => {
+            const el = document.getElementById("test");
+            return JSON.parse(el.getValue("counter"));
+        });
+        expect(result).toBe(1);
+    });
+});

package/top.html

@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<head>
+    <title>Top</title>
+    <link href="./nested.html" rel="module">
+    <script src="./lightview.js?as=x-body"></script>
+</head>
+<body>
+<l-nested></l-nested>
+</body>
+</html>