lightview 1.4.0-b → 1.4.4-b

package/README.md

@@ -1,4 +1,4 @@
-# lightview v1.4.0b (BETA)
+# lightview v1.4.4b (BETA)
 
 Small, simple, powerful web UI and micro front end creation ...
 

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,8 @@ 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 addListener = (node, eventName, callback) => {
+        node.addEventListener(eventName, callback); // just used to make code footprint smaller
     }
     const anchorHandler = async (event) => {
         event.preventDefault();
@@ -93,9 +93,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 {
@@ -118,7 +127,7 @@ const {observe} = (() => {
         }
         throw new TypeError(`Unable to coerce ${value} to ${toType}`)
     }
-    const Reactor = (value) => {
+    const Reactor = (value,component) => {
         if (value && typeof (value) === "object") {
             if (value.__isReactor__) return value;
             const childReactors = [],
@@ -131,7 +140,7 @@ const {observe} = (() => {
                                 return [...target];
                             }
                             if (property === "toString") return function toString() {
-                                return JSON.stringify(target);
+                                return JSON.stringify([...target]);
                             }
                         }
                         let value = target[property];
@@ -146,7 +155,7 @@ const {observe} = (() => {
                             return value;
                         }
                         if (value && type === "object") {
-                            value = Reactor(value);
+                            value = Reactor(value,component);
                             childReactors.push(value);
                         }
                         target[property] = value;
@@ -156,7 +165,7 @@ const {observe} = (() => {
                         const type = typeof (value);
                         if (target[property] !== value) {
                             if (value && type === "object") {
-                                value = Reactor(value);
+                                value = Reactor(value,component);
                                 childReactors.push(value);
                             }
                             target[property] = value;
@@ -202,7 +211,7 @@ const {observe} = (() => {
                 if (newValue == null || type === "any" || newtype === type || (typetype === "function" && newValue && newtype === "object" && newValue instanceof type)) {
                     if (value !== newValue) {
                         event.oldValue = value;
-                        target[property].value = reactive ? Reactor(newValue) : newValue; // do first to prevent loops
+                        target[property].value = reactive ? Reactor(newValue,component) : newValue; // do first to prevent loops
                         target.postEvent.value("change", event);
                         if (event.defaultPrevented) target[property].value = value;
                     }
@@ -218,14 +227,20 @@ const {observe} = (() => {
             }
         });
     }
-    const createObserver = (domNode) => {
+    const createObserver = (domNode, framed) => {
         const observer = new MutationObserver((mutations) => {
             mutations.forEach((mutation) => {
                 if (mutation.type === "attributes") {
+                    if (framed) debugger;
                     const name = mutation.attributeName,
-                        target = mutation.target;
+                        target = mutation.target,
+                        value = target.getAttribute(name);
+                    if (framed && name === "message" && target instanceof IFrameElement) {
+                        if (value) console.log("message", value);
+                        target.removeAttribute(name);
+                        target.dispatchEvent(new CustomEvent("message", {detail: JSON.parse(value)}))
+                    }
                     if (target.observedAttributes && target.observedAttributes.includes(name)) {
-                        const value = target.getAttribute(name);
                         if (value !== mutation.oldValue) {
                             target.setValue(name, value);
                             if (target.attributeChangedCallback) target.attributeChangedCallback(name, value, mutation.oldValue);
@@ -264,7 +279,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;
@@ -302,7 +317,7 @@ const {observe} = (() => {
     }
     const inputTypeToType = (inputType) => {
         if (!inputType) return "any"
-        if (["text", "tel", "email", "url", "search", "radio"].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";
@@ -311,40 +326,45 @@ const {observe} = (() => {
     const _importAnchors = (node, component) => {
         [...node.querySelectorAll('a[href][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"),
-                type = input.tagName === "SELECT" && input.hasAttribute("multiple") ? Array : inputTypeToType(inputtype),
-                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});
-            addListener(input,"change", (event) => {
-                event.stopImmediatePropagation();
-                const target = event.target;
-                let value = target.value;
-                if (inputtype === "checkbox") {
-                    value = input.checked
-                } 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)
-                            .map((option) => option.getAttribute("value") || option.innerText);
-                    }
+    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");
+        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 || input.tagName === "TEXTAREA" || ["text", "number", "tel", "email", "url", "search", "password"].includes(inputtype))) {
+            eventname = "input";
+        }
+        addListener(input, eventname, (event) => {
+            event.stopImmediatePropagation();
+            const target = event.target;
+            let value = target.value;
+            if (inputtype === "checkbox") {
+                value = input.checked
+            } 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)
+                        .map((option) => option.getAttribute("value") || option.innerText);
                 }
-                component.varsProxy[name] = coerce(value, type);
-            })
+            }
+            component.varsProxy[name] = coerce(value, type);
+        })
     }
     const tryParse = (value) => {
         try {
             return JSON.parse(value);
-        } catch(e) {
+        } catch (e) {
             return value;
         }
     }
@@ -358,7 +378,7 @@ const {observe} = (() => {
         exported: {value: true, constant: true},
         imported: {value: true, constant: true}
     };
-    const createClass = (domElementNode, {observer,  importAnchors}) => {
+    const createClass = (domElementNode, {observer, importAnchors, framed}) => {
         const instances = new Set(),
             dom = domElementNode.tagName === "TEMPLATE"
                 ? domElementNode.content.cloneNode(true)
@@ -372,7 +392,7 @@ const {observe} = (() => {
             constructor() {
                 super();
                 instances.add(this);
-                observer ||= createObserver(this);
+                observer ||= createObserver(this, framed);
                 const currentComponent = this,
                     shadow = this.attachShadow({mode: "open"}),
                     eventlisteners = {};
@@ -402,6 +422,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});
                 ["getElementById", "querySelector", "querySelectorAll"]
                     .forEach((fname) => {
                         Object.defineProperty(this, fname, {
@@ -462,50 +483,50 @@ const {observe} = (() => {
                             // 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 (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(node.attributes.value) {
+                                        const valueattr = node.attributes.value,
+                                            template = valueattr.template || valueattr.template.value;
+                                        if(template.startsWith("${") && template.endsWith("}")) {
+                                            const name = template.substring(2,template.length-1);
+                                            if(!name.includes(" ")) bindInput(node,name,this,value);
+                                        }
                                     }
-                                }
-                                if(name) bindInput(node,name,ctx);
+                                });
                             }
                             [...node.attributes].forEach((attr) => {
-                                if(attr.name==="value") return;
+                                if (attr.name === "value") 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()) {
@@ -513,7 +534,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 {
@@ -528,17 +549,17 @@ const {observe} = (() => {
                                     }
                                 }
 
-                               const [type, ...params] = name.split(":");
+                                const [type, ...params] = name.split(":");
                                 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");
                                         }
@@ -549,7 +570,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, () => {
@@ -623,7 +644,7 @@ const {observe} = (() => {
 
             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)
                 })
             }
 
@@ -673,7 +694,7 @@ const {observe} = (() => {
                             }
                             if (reactive) {
                                 variable.reactive = true;
-                                this.vars[key] = Reactor(variable);
+                                this.vars[key] = Reactor(variable,this);
                             }
                             if (shared) {
                                 variable.shared = true;
@@ -721,13 +742,17 @@ const {observe} = (() => {
             }
         }
     }
-    const createComponent = (name, node, {observer, importAnchors} = {}) => {
+    const createComponent = (name, node, {observer, importAnchors, framed} = {}) => {
         let ctor = customElements.get(name);
         if (ctor) {
-            console.warn(new Error(`${name} is already a CustomElement. Not redefining`));
+            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});
+        ctor = createClass(node, {observer, importAnchors, framed});
         customElements.define(name, ctor);
         return ctor;
     }
@@ -756,9 +781,9 @@ const {observe} = (() => {
         }
     }
 
-    const bodyAsComponent = ({as = "x-body", unhide, importAnchors} = {}) => {
+    const bodyAsComponent = ({as = "x-body", unhide, importAnchors, framed} = {}) => {
         const parent = document.body.parentElement;
-        createComponent(as, document.body, {importAnchors});
+        createComponent(as, document.body, {importAnchors, framed});
         const component = document.createElement(as);
         parent.replaceChild(component, document.body);
         Object.defineProperty(document, "body", {
@@ -800,7 +825,8 @@ const {observe} = (() => {
 
     const url = new URL(document.currentScript.getAttribute("src"), window.location.href);
     let 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"]'),
@@ -808,10 +834,10 @@ const {observe} = (() => {
             isolated = !!document.querySelector('meta[name="l-isolate"]'),
             enableFrames = !!document.querySelector('meta[name="l-enableFrames"]');
         if (whenFramed) {
-            whenFramed({unhide, importAnchors, isolated, enableFrames});
+            whenFramed({unhide, importAnchors, 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 = () => {
@@ -847,7 +873,7 @@ const {observe} = (() => {
         }
         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) {
@@ -872,7 +898,9 @@ const {observe} = (() => {
                     }
                     if (type === "setAttribute") {
                         const [name, value] = [...argsList];
-                        if (iframe.getAttribute(name) !== value + "") iframe.setAttribute(name, value);
+                        if (iframe.getAttribute(name) !== value + "") {
+                            iframe.setAttribute(name, value);
+                        }
                         return;
                     }
                     if (type === "removeAttribute") {
@@ -882,32 +910,52 @@ const {observe} = (() => {
                 }
                 console.warn("iframe posted a message without providing an id", message);
             });
-            const mutationCallback = (mutationsList) => {
-                const console = document.getElementById("console");
-                for (const {target, attributeName, oldValue} of mutationsList) {
-                    if (!["height", "width"].includes(attributeName)) {
+            if (!OBSERVER) {
+                const mutationCallback = (mutationsList) => {
+                    const console = document.getElementById("console");
+                    for (const {target, attributeName, oldValue} of mutationsList) {
                         const value = target.getAttribute(attributeName);
-                        if (!value) postMessage({type: "removeAttribute", argsList: [attributeName]}, iframe)
-                        else if (value !== oldValue) postMessage({
-                            type: "setAttribute",
-                            argsList: [attributeName, value]
-                        }, iframe)
+                        if (!["height", "width", "message"].includes(attributeName)) {
+                            if (!value) postMessage({type: "removeAttribute", argsList: [attributeName]}, iframe)
+                            else if (value !== oldValue) {
+                                postMessage({
+                                    type: "setAttribute",
+                                    argsList: [attributeName, value]
+                                }, iframe)
+                            }
+                        }
+                        if (attributeName === "message") {
+                            if (value) {
+                                target.removeAttribute("message");
+                                target.dispatchEvent(new CustomEvent("message", {target, detail: JSON.parse(value)}))
+                            }
+                        } else {
+                            target.dispatchEvent(new CustomEvent("attribute.changed", {
+                                target,
+                                detail: {attributeName, value, oldValue}
+                            }))
+                        }
                     }
-                }
-            };
-            const observer = new MutationObserver(mutationCallback),
-                iframe = document.getElementById("myframe");
-            observer.observe(iframe, {attributes: true, attributeOldValue: true});
+                };
+                const observer = OBSERVER = new MutationObserver(mutationCallback),
+                    iframe = document.getElementById("myframe");
+                observer.observe(iframe, {attributes: true, attributeOldValue: true});
+            }
         }
     }
     const whenFramed = (f, {isolated} = {}) => {
-        addListener(document,"DOMContentLoaded", (event) => loader(f));
+        // loads for framed content
+        addListener(document, "DOMContentLoaded", (event) => loader(f));
     }
     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) { // CodePen mucks with window.parent
-        addListener(document,"DOMContentLoaded", () => loader())
+    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())
     }
 
     return {observe}
-})();
+})();
+
+

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "lightview",
-  "version": "1.4.0b",
+  "version": "1.4.4b",
   "description": "Small, simple, powerful web UI and micro front end creation ... imagine a blend of Svelte, React, Vue, Riot and more.",
   "main": "lightview.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "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);
+    });
+});