lightview 1.4.7-b → 1.5.1-b

package/lightview.js

@@ -31,19 +31,21 @@ const {observe} = (() => {
     const parser = new DOMParser();
 
     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,"");
+        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) => {
@@ -68,7 +70,8 @@ const {observe} = (() => {
         return "l-" + name;
     }
     const observe = (f, thisArg, argsList = []) => {
-        function observer(...args) {
+        const observer = (...args) => {
+            if(observer.cancelled) return;
             CURRENTOBSERVER = observer;
             try {
                 f.call(thisArg || this, ...argsList, ...args);
@@ -77,19 +80,18 @@ const {observe} = (() => {
             }
             CURRENTOBSERVER = null;
         }
-
         observer.cancel = () => observer.cancelled = true;
         observer();
         return observer;
     }
     const coerce = (value, toType) => {
-        if (value + "" === "null" || value + "" === "undefined") return value;
+        if (value + "" === "null" || value + "" === "undefined" || toType==="any") return value;
         const type = typeof (value);
         if (type === toType) return value;
         if (toType === "number") return parseFloat(value + "");
         if (toType === "boolean") {
             if (["on", "checked", "selected"].includes(value)) return true;
-            if(value==null || value==="") return false;
+            if (value == null || value === "") return false;
             try {
                 const parsed = JSON.parse(value + "");
                 if (typeof (parsed) === "boolean") return parsed;
@@ -101,7 +103,7 @@ const {observe} = (() => {
         if (toType === "string") return value + "";
         const isfunction = typeof (toType) === "function";
         if ((toType === "object" || isfunction)) {
-            if (type === "object") {
+            if (type === "object" && isfunction) {
                 if (value instanceof toType) return value;
             }
             if (type === "string") {
@@ -112,10 +114,10 @@ const {observe} = (() => {
                         if (instance instanceof Array) {
                             let parsed = tryParse(value.startsWith("[") ? value : `[${value}]`);
                             if (!Array.isArray(parsed)) {
-                                if(value.includes(",")) parsed = value.split(",");
+                                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) || parsed[0] !== value && parsed.length !== 1) parsed = null;
                                 }
                             }
                             if (!Array.isArray(parsed)) {
@@ -144,14 +146,16 @@ const {observe} = (() => {
         }
         throw new TypeError(`Unable to coerce ${value} to ${toType}`)
     }
-    const Reactor = (value) => {
-        if (value && typeof (value) === "object") {
-            if (value.__isReactor__) return value;
+    const Reactor = (data) => {
+        if (data && typeof (data) === "object") {
+            if (data.__isReactor__) return data;
             const childReactors = [],
                 dependents = {},
-                proxy = new Proxy(value, {
+                proxy = new Proxy(data, {
                     get(target, property) {
                         if (property === "__isReactor__") return true;
+                        if(property=== "__dependents__") return dependents;
+                        if(property=== "__reactorProxyTarget__") return data;
                         if (target instanceof Array) {
                             if (property === "toJSON") return function toJSON() {
                                 return [...target];
@@ -160,15 +164,19 @@ const {observe} = (() => {
                                 return JSON.stringify([...target]);
                             }
                         }
+                        if(target instanceof Date) {
+                            return Reflect.get(target,property);
+                        }
                         let value = target[property];
                         const type = typeof (value);
                         if (CURRENTOBSERVER && typeof (property) !== "symbol" && type !== "function") {
                             const observers = dependents[property] ||= new Set();
                             observers.add(CURRENTOBSERVER)
                         }
+                        if(value===undefined) return;
                         if (childReactors.includes(value) || (value && type !== "object") || typeof (property) === "symbol") {
-                            // Dated must be bound to work with proxies
-                            if (type === "function" && [Date].includes(value)) value = value.bind(target)
+                            // Dates and Promises must be bound to work with proxies
+                            if (type === "function" && ([Date].includes(value) || property==="then")) value = value.bind(target)
                             return value;
                         }
                         if (value && type === "object") {
@@ -178,8 +186,14 @@ const {observe} = (() => {
                         target[property] = value;
                         return value;
                     },
-                    set(target, property, value) {
+                    async set(target, property, value) {
+                        if(target instanceof Promise) {
+                            console.warn(`Setting ${property} = ${value} on a Promise in Reactor`);
+                        }
                         const type = typeof (value);
+                        if(value && type==="object" && value instanceof Promise) {
+                            value = await value;
+                        }
                         if (target[property] !== value) {
                             if (value && type === "object") {
                                 value = Reactor(value);
@@ -197,7 +211,7 @@ const {observe} = (() => {
                 });
             return proxy;
         }
-        return value;
+        return data;
     }
 
     class VariableEvent {
@@ -209,6 +223,9 @@ const {observe} = (() => {
     const createVarsProxy = (vars, component, constructor) => {
         return new Proxy(vars, {
             get(target, property) {
+                if(target instanceof Date) {
+                    return Reflect.get(target,property);
+                }
                 let {value} = target[property] || {};
                 if (typeof (value) === "function") return value.bind(target);
                 return value;
@@ -221,16 +238,22 @@ const {observe} = (() => {
                     if (event.defaultPrevented) delete target[property].value;
                     return true;
                 }
-                const {type, value, shared, exported, constant, reactive} = target[property];
+                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);
                 const newtype = typeof (newValue),
                     typetype = typeof (type);
-                if (newValue == null || type === "any" || newtype === type || (typetype === "function" && newValue && newtype === "object" && newValue instanceof type)) {
+                if (newValue == null || type === "any" || (newtype === type && typetype==="string") || (typetype === "function" && (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
                         target.postEvent.value("change", event);
-                        if (event.defaultPrevented) target[property].value = value;
+                        if (event.defaultPrevented) {
+                            target[property].value = value;
+                        } else if(remote) {
+                            handleRemote({variable,remote,reactive},true);
+                        }
                     }
                     return true;
                 }
@@ -245,22 +268,21 @@ const {observe} = (() => {
         });
     }
     const createObserver = (domNode, framed) => {
-        const observer = new MutationObserver((mutations) => {
+        const mobserver = new MutationObserver((mutations) => {
             mutations.forEach((mutation) => {
+                const target = mutation.target;
                 if (mutation.type === "attributes") {
                     //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 (value) console.log("message", value);
                         target.removeAttribute(name);
                         target.dispatchEvent(new CustomEvent("message", {detail: JSON.parse(value)}))
                     }
                     if (target.observedAttributes && target.observedAttributes.includes(name)) {
                         if (value !== mutation.oldValue) {
-                            target.setValue(name, value);
-                            if (target.attributeChangedCallback) target.attributeChangedCallback(name, value, mutation.oldValue);
+                            target.setVariableValue(name, value);
                         }
                     }
                 } else if (mutation.type === "childList") {
@@ -270,11 +292,13 @@ const {observe} = (() => {
                     for (const target of mutation.addedNodes) {
                         if (target.connectedCallback) target.connectedCallback();
                     }
+                } else if(mutation.type === "characterData") {
+                    if(target.characterDataMutationCallback) target.characterDataMutationCallback(target,mutation.oldValue,target.textContent);
                 }
             });
         });
-        observer.observe(domNode, {subtree: true, childList: true});
-        return observer;
+        mobserver.observe(domNode, {subtree: true, childList: true});
+        return mobserver;
     }
     const querySelectorAll = (node, selector) => {
         const nodes = [...node.querySelectorAll(selector)],
@@ -291,41 +315,49 @@ const {observe} = (() => {
             nodes.push(root, ...getNodes(root.shadowRoot))
         } else {
             for (const node of root.childNodes) {
+                if (node.tagName === "SCRIPT") continue;
                 if (node.nodeType === Node.TEXT_NODE && node.nodeValue?.includes("${")) {
                     node.template ||= node.nodeValue;
                     nodes.push(node);
                 } else if (node.nodeType === Node.ELEMENT_NODE) {
-                    let skip;
-                    if (node.getAttribute("type") === "radio") nodes.push(node);
+                    let skip, pushed;
                     [...node.attributes].forEach((attr) => {
                         if (attr.value.includes("${")) {
                             attr.template ||= attr.value;
+                            pushed = true;
                             nodes.push(node);
                         } else if (attr.name.includes(":") || attr.name.startsWith("l-")) {
                             skip = attr.name.includes("l-for:");
+                            pushed = true;
                             nodes.push(node)
                         }
                     })
+                    if (!pushed && node.getAttribute("type") === "radio") nodes.push(node);
                     if (!skip && !node.shadowRoot) nodes.push(...getNodes(node));
                 }
             }
         }
         return nodes;
     }
-    const resolveNode = (node, component,safe) => {
-        if (node?.template) {
+    const AsyncFunction = Object.getPrototypeOf(async function(){}).constructor;
+    const resolveNodeOrText = (node, component, safe) => {
+        const type = typeof (node),
+            template = type === "string" ? node.trim() : node.template;
+        if (template) {
             try {
-                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;
+                let value = Function("context", "with(context) { return `" + Lightview.sanitizeTemplate(template) + "` }")(component.varsProxy);
+                value = node.nodeType === Node.TEXT_NODE || !safe ? value : Lightview.escapeHTML(value);
+                if (type === "string") return value==="undefined" ? undefined : value;
+                node.nodeValue = value == "null" || value == "undefined" ? "" : value;
             } catch (e) {
-                console.warn(e);
+                //console.warn(e);
                 if (!e.message.includes("defined")) throw e; // actually looking for undefined or not defined
+                return undefined;
             }
         }
         return node?.nodeValue;
     }
-    const render = (hasTemplate, render) => {
+    const render =  (hasTemplate, render) => {
         let observer;
         if (hasTemplate) {
             if (observer) observer.cancel();
@@ -348,37 +380,43 @@ const {observe} = (() => {
             addListener(node, "click", anchorHandler);
         })
     }
-    const bindInput = (input, name, component,value) => {
+    const bound = new WeakSet();
+    const bindInput = (input, variableName, component, value) => {
+        if (bound.has(input)) return;
+        bound.add(input);
         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");
+            type = input.tagName === "SELECT" && input.hasAttribute("multiple") ? Array : inputTypeToType(inputtype);
         value ||= input.getAttribute("value");
-        let variable = component.vars[name] || {type};
+        let variable = component.vars[variableName] || {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}`)
+            else throw new TypeError(`Attempt to bind <input name="${variableName}" type="${type}"> to variable ${variableName}:${variable.type}`)
+        }
+        component.variables({[variableName]: type},{reactive:true});
+        if(inputtype!=="radio") {
+            if(value.includes("${")) input.attributes.value.value = "";
+            else component.setVariableValue(variableName, coerce(value,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;
+        const listener = (event) => {
+            if (event) event.stopImmediatePropagation();
+            let value = input.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)
+            } else if (input.tagName === "SELECT") {
+                if (input.hasAttribute("multiple")) {
+                    const varvalue = component.varsProxy[variableName];
+                    value = [...input.querySelectorAll("option")]
+                        .filter((option) => option.selected || resolveNodeOrText(option.attributes.value || option.innerText, component) === value) //todo make sync comopat
                         .map((option) => option.getAttribute("value") || option.innerText);
                 }
             }
-            component.varsProxy[name] = coerce(value, type);
-        })
+            component.varsProxy[variableName] = coerce(value, type);
+        };
+        addListener(input, eventname, listener);
     }
     const tryParse = (value) => {
         try {
@@ -388,22 +426,20 @@ const {observe} = (() => {
         }
     }
     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}
+        imported: {value: true, constant: true},
+        remote: {}
     };
     const createClass = (domElementNode, {observer, framed}) => {
         const instances = new Set(),
             dom = domElementNode.tagName === "TEMPLATE"
                 ? domElementNode.content.cloneNode(true)
-                : domElementNode.cloneNode(true);
+                : domElementNode.cloneNode(true),
+            observedAttributes = [];
+        observedAttributes.add = function(name) { observedAttributes.includes(name) || observedAttributes.push(name); }
         if (domElementNode.tagName === "TEMPLATE") domElementNode = domElementNode.cloneNode(true);
         return class CustomElement extends HTMLElement {
             static get instances() {
@@ -413,10 +449,18 @@ const {observe} = (() => {
             constructor() {
                 super();
                 instances.add(this);
-                observer ||= createObserver(this, framed);
                 const currentComponent = this,
                     shadow = this.attachShadow({mode: "open"}),
                     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);
+                    }
+                }});
                 this.vars = {
                     ...reserved,
                     addEventListener: {
@@ -431,9 +475,10 @@ const {observe} = (() => {
                         constant: true
                     },
                     postEvent: {
-                        value: (eventName, event) => {
+                        value: (eventName, event={}) => {
                             //event = {...event}
                             event.type = eventName;
+                            event.target = currentComponent;
                             eventlisteners[eventName]?.forEach((f) => f(event));
                         },
                         type: "function",
@@ -443,6 +488,8 @@ const {observe} = (() => {
                 };
                 this.defaultAttributes = domElementNode.tagName === "TEMPLATE" ? domElementNode.attributes : dom.attributes;
                 this.varsProxy = createVarsProxy(this.vars, this, CustomElement);
+                this.changeListener.targets = new Set();
+                this.varsProxy.addEventListener("change", this.changeListener);
                 if (framed || CustomElement.lightviewFramed) this.variables({message: Object}, {exported: true});
                 ["getElementById", "querySelector", "querySelectorAll"]
                     .forEach((fname) => {
@@ -473,138 +520,149 @@ const {observe} = (() => {
                     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 = [];
-                for (const script of scripts) {
+                    promises = [],
+                    scriptpromises = [];
+                for (const script of [...scripts]) {
                     if (script.attributes.src?.value?.includes("/lightview.js")) continue;
-                    if (script.className !== "lightview" && !((script.getAttribute("type") || "").includes("lightview/"))) continue;
-                    const scriptid = Math.random() + "",
-                        currentScript = document.createElement("script");
+                    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();
+                        continue;
+                    };
+                    const scriptid = Math.random() + "";
                     for (const attr of script.attributes) {
                         currentScript.setAttribute(attr.name, attr.name === "type" ? attr.value.replace("lightview/", "") : attr.value);
                     }
                     currentScript.classList.remove("lightview");
                     const text = script.innerHTML.replaceAll(/\/\*[\s\S]*?\*\/|([^:]|^)\/\/.*$/gm, "$1").replaceAll(/\r?\n/g, "");
-                    currentScript.innerHTML = `Function('if(window["${scriptid}"]?.ctx) { with(window["${scriptid}"].ctx) { ${text}; }  window["${scriptid}"](); }')(); `;
+                    currentScript.innerHTML = `Object.getPrototypeOf(async function(){}).constructor('if(window["${scriptid}"]?.ctx) { const ctx = window["${scriptid}"].ctx; { with(ctx) { ${text}; } } }')().then(() => window["${scriptid}"]()); `;
                     let resolver;
-                    promises.push(new Promise((resolve) => resolver = resolve));
                     window[scriptid] = () => {
                         delete window[scriptid];
                         currentScript.remove();
                         resolver();
                     }
                     window[scriptid].ctx = ctx.varsProxy;
-                    ctx.appendChild(currentScript);
+                    promises.push(new Promise((resolve) => {
+                        resolver = resolve;
+                        // wait for all regular scripts to load first
+                        Promise.all(scriptpromises).then(() => shadow.appendChild(currentScript));
+                    }));
                 }
                 Promise.all(promises).then(() => {
                     const nodes = getNodes(ctx);
                     nodes.forEach((node) => {
                         if (node.nodeType === Node.TEXT_NODE && node.template.includes("${")) {
-                            render(!!node.template, () => resolveNode(node, this))
+                            render(!!node.template,  () => resolveNodeOrText(node, this))
                         } else if (node.nodeType === Node.ELEMENT_NODE) {
                             // resolve the value before all else;
-                            const attr = node.attributes.value;
-                            if (attr && attr.template) {
-                                render(!!attr.template, () => {
-                                    const value = resolveNode(attr, this),
-                                        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"});
-                                    }
-                                    if (node.tagName === "SELECT") {
-                                        let values = [value];
-                                        if (node.hasAttribute("multiple")) values = coerce(value, Array);
-                                        [...node.querySelectorAll("option")].forEach((option) => {
-                                            if (option.hasAttribute("value")) {
-                                                if (values.includes(resolveNode(option.attributes.value, ctx))) {
-                                                    option.setAttribute("selected", "");
-                                                    option.selected = true;
-                                                }
-                                            } else if (option.innerText.trim() === value) {
-                                                option.setAttribute("selected", "");
-                                                option.selected = true;
+                            const attr = node.attributes.value,
+                                template = attr?.template;
+                            if (attr && template) {
+                                //render(!!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);
                                             }
-                                        })
-                                    }
-                                });
-                            }
-                            [...node.attributes].forEach((attr) => {
-                                if (attr.name === "value" && attr.template) return;
-                                const {name, value} = attr;
-                                if (name === "type") {
-                                    if (value === "radio") {
-                                        const name = resolveNode(node.attributes.name, ctx);
-                                        for (const vname of this.getVariableNames()) {
-                                            if (vname === name) {
-                                                render(true, () => {
-                                                    const name = resolveNode(node.attributes.name, ctx),
-                                                        varvalue = Function("context", "with(context) { return `${" + name + "}` }")(ctx.varsProxy);
-                                                    if (varvalue == resolveNode(node.attributes.value, ctx)) {
+                                        }
+                                        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;
                                                     }
-                                                });
-                                                bindInput(node, name, ctx);
-                                                break;
+                                                } 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;
+                                                }
                                             }
-                                        }
+                                        });
                                     }
+                            }
+                           [...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);
+                                        render(true,  () => {
+                                            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
-                                    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);
+                                    render(!!attr.template,  () => {
+                                        const value = attr.value;
                                         if (params[0]) {
                                             if (value === "true") node.setAttribute(params[0], "")
                                             else node.removeAttribute(params[0]);
-                                        } else if (eltype === "checkbox" || node.tagName === "OPTION") {
-                                            if (value === "true") node.setAttribute("checked", "")
-                                            else node.removeAttribute("checked");
+                                        } 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;
-                                    render(!!attr.template, () => {
-                                        const value = resolveNode(attr, this);
+                                    render(!!attr.template,  () => {
+                                        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") {
-                                    render(!!attr.template, () => {
-                                        const value = resolveNode(attr, this);
+                                    render(!!attr.template,  () => {
+                                        const value = resolveNodeOrText(attr, this);
                                         node.style.setProperty("display", value === "true" ? "revert" : "none");
                                     })
                                 } else if (type === "l-for") {
                                     node.template ||= node.innerHTML;
-                                    render(!!attr.template, () => {
+                                    render(!!attr.template,  () => {
                                         const [what = "each", vname = "item", index = "index", array = "array", after = false] = params,
-                                            value = resolveNode(attr, this),
+                                            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 + "` }}")(
+                                            html = target.reduce( (html, item, i, target) => {
+                                                return html += Function("vars", "context", "with(vars) { with(context) { return `" + node.template + "` }}")(
                                                     ctx.varsProxy,
                                                     {
                                                         [vname]: item,
@@ -625,42 +683,33 @@ const {observe} = (() => {
                                             else node.appendChild(parsed.body.firstChild);
                                         }
                                     })
-                                } else if (attr.template) {
-                                    render(!!attr.template, () => resolveNode(attr, this));
+                                } else {
+                                    render(!!attr.template,  () => {
+                                        resolveNodeOrText(attr, this);
+                                    })
                                 }
                             })
                         }
                     })
                     shadow.normalize();
-                    observer.observe(ctx, {attributeOldValue: true});
-                    if (ctx.hasOwnProperty("connectedCallback")) ctx.connectedCallback();
+                    observer ||= createObserver(ctx, framed);
+                    observer.observe(ctx, {attributeOldValue: true, subtree:true, characterData:true, characterDataOldValue:true});
+                    ctx.vars.postEvent.value("connected");
                 })
             }
-
-            adopted(value) {
-                this.adoptedCallback = value;
-                //Object.defineProperty(this, "adoptedCallback", {configurable: true, writable: true, value});
+            adoptedCallback(callback) {
+                this.vars.postEvent.value("adopted");
+                super.adoptedCallback();
             }
-
-            connected(callback) {
-                this.connectedCallback = callback;
-                //Object.defineProperty(this, "connectedCallback", {configurable: true, writable: true, value});
+            disconnectedCallback() {
+                this.vars.postEvent.value("disconnected");
+                super.disconnectedCallback();
             }
-
-            attributeChanged(callback) {
-                this.attributeChangedCallback = callback;
-                //Object.defineProperty(this, "attributeChangedCallback", {configurable: true, writable: true, value});
+            get observedAttributes() {
+                return CustomElement.observedAttributes;
             }
-
-            disconnected(callback) {
-                Object.defineProperty(this, "disconnectedCallback", {
-                    configurable: true,
-                    writable: true,
-                    value: () => {
-                        value();
-                        super.disconnectedCallback(callback);
-                    }
-                });
+            static get observedAttributes() {
+                return observedAttributes;
             }
 
             getVariableNames() {
@@ -669,17 +718,17 @@ const {observe} = (() => {
                 })
             }
 
-            setValue(variableName, value, {coerceTo = typeof (value)} = {}) {
+            setVariableValue(variableName, value, {coerceTo = typeof (value)} = {}) {
                 if (!this.isConnected) {
                     instances.delete(this);
                     return false;
                 }
                 let {type} = this.vars[variableName] || {};
                 if (type) {
-                    value = coerce(value, type);
                     if (this.varsProxy[variableName] !== value) {
                         const variable = this.vars[variableName];
                         if (variable.shared) {
+                            value = type.validate ? type.validate(value,variable) : coerce(value,coerceTo);
                             const event = new VariableEvent({
                                 variableName: variableName,
                                 value: value,
@@ -698,11 +747,11 @@ const {observe} = (() => {
                 return false;
             }
 
-            getValue(variableName) {
+            getVariableValue(variableName) {
                 return this.vars[variableName]?.value;
             }
 
-            variables(variables, {observed, reactive, shared, exported, imported} = {}) { // options = {observed,reactive,shared,exported,imported}
+            variables(variables, {observed, reactive, shared, exported, imported, remote} = {}) { // options = {observed,reactive,shared,exported,imported}
                 const addEventListener = this.varsProxy.addEventListener;
                 if (variables !== undefined) {
                     Object.entries(variables)
@@ -712,6 +761,7 @@ const {observe} = (() => {
                                 variable.value = this.hasAttribute(key) ? coerce(this.getAttribute(key), variable.type) : variable.value;
                                 variable.observed = observed;
                                 variable.imported = imported;
+                                if(variable.observed) this.observedAttributes.add(key);
                             }
                             if (reactive) {
                                 variable.reactive = true;
@@ -720,21 +770,20 @@ const {observe} = (() => {
                             if (shared) {
                                 variable.shared = true;
                                 addEventListener("change", ({variableName, value}) => {
-                                    if (this.vars[variableName]?.shared) {
-                                        this.siblings.forEach((instance) => instance.setValue(variableName, value))
-                                    }
+                                    if (this.vars[variableName]?.shared) this.siblings.forEach((instance) => instance.setVariableValue(variableName, value))
                                 })
                             }
                             if (exported) {
                                 variable.exported = true;
                                 // in case the export goes up to an iframe
                                 if (variable.value != null) setComponentAttribute(this, key, variable.value);
-                                addEventListener("change", ({variableName, value}) => {
-                                    value = typeof (value) === "string" || !value ? value : JSON.stringify(value);
-                                    if (value == null) removeComponentAttribute(this, variableName);
-                                    else setComponentAttribute(this, variableName, value);
-                                })
+                                this.changeListener.targets.add(key);
+                            }
+                            if (remote) {
+                                variable.remote = remote;
+                                handleRemote({variable, remote, reactive});
                             }
+                            if(type.validate) type.validate(undefined,variable);
                         });
                 }
                 return Object.entries(this.vars)
@@ -763,24 +812,143 @@ const {observe} = (() => {
             }
         }
     }
-    const createComponent = (name, node, {framed,observer} = {}) => {
+
+    const remoteProxy = ({json, variable,remote, reactive}) => {
+        const type = typeof (remote);
+        return new Proxy(json, {
+            get(target,property) {
+                if(property==="__remoteProxytarget__") return json;
+                return target[property];
+            },
+            async set(target, property, value) {
+                if(value && typeof(value)==="object" && value instanceof Promise) value = await value;
+                const oldValue = target[property];
+                if (oldValue !== value) {
+                    let remotevalue;
+                    if (type === "string") {
+                        const href = new URL(remote,window.location.href).href;
+                        remotevalue = patch({target,property,value,oldValue},href,variable);
+                    } else if(remote && type==="object") {
+                        let href;
+                        if(remote.path) href = new URL(remote.path,window.location.href).href;
+                        if(!remote.patch) {
+                            if(!href) throw new Error(`A remote path is required is no put function is provided for remote data`)
+                            remote.patch = patch;
+                        }
+                        remotevalue = remote.patch({target,property,value,oldValue},href,variable);
+                    }
+                    if(remotevalue) {
+                        await remotevalue.then((newjson) => {
+                            if (newjson && typeof (newjson) === "object" && reactive) {
+                                const target = variable.value?.__reactorProxyTarget__ ? json : variable.value;
+                                Object.entries(newjson).forEach(([key,newValue]) => {
+                                    if(target[key]!==newValue) target[key] = newValue;
+                                })
+                                Object.keys(target).forEach((key) => {
+                                    if(!(key in newjson)) delete target[key];
+                                });
+                                if(variable.value?.__reactorProxyTarget__) {
+                                    const dependents = variable.value.__dependents__,
+                                        observers = dependents[property] || [];
+                                    [...observers].forEach((f) => {
+                                        if (f.cancelled) dependents[property].delete(f);
+                                        else f();
+                                    })
+                                }
+                            } else {
+                                variable.value = json;
+                            }
+                        })
+                    }
+                }
+                return true;
+            }
+        })
+    }
+
+    const patch = ({target,property,value,oldValue},href,variable) => {
+        return fetch(href, {
+            method: "PATCH",
+            body: JSON.stringify({property,value,oldValue}),
+            headers: {
+                "Content-Type": "application/json"
+            }
+        }).then((response) => {
+            if (response.status < 400) return response.json();
+        })
+    }
+
+    const get = (href,variable) => {
+        return fetch(href)
+            .then((response) => {
+                if (response.status < 400) return response.json();
+            })
+    }
+
+    const put = (href,variable) => {
+        return fetch(href, {
+            method: "PUT",
+            body: JSON.stringify(variable.value),
+            headers: {
+                "Content-Type": "application/json"
+            }
+        }).then((response) => {
+            if (response.status === 200) return response.json();
+        })
+    }
+
+    const handleRemote = async ({variable, remote, reactive},doput) => {
+        const type = typeof (remote);
+        let value;
+        if (type === "string") {
+            const href = new URL(remote,window.location.href).href;
+            value = (doput
+                ? put(href,variable)
+                : get(href,variable));
+            if(variable.value===undefined) variable.value = value;
+        } else if (remote && type === "object") {
+            let href;
+            if(remote.path) href = new URL(remote.path,window.location.href).href;
+            if(!remote.get || !remote.put) {
+                if(!href) throw new Error(`A remote path is required is no put function is provided for remote data`)
+                if(!remote.get) remote.get = get;
+                if(!remote.put) remote.put = put;
+            }
+            value = (doput
+                ? remote.put(href,variable)
+                : remote.get(href,variable));
+            if(remote.ttl && !doput && !remote.intervalId) {
+                remote.intervalId = setInterval(async () => {
+                    await handleRemote({variable, remote, reactive});
+                })
+            }
+            if(variable.value===undefined) variable.value = value;
+        }
+        if(value) {
+            variable.value = await value.then((json) => {
+                if (json && typeof (json) === "object" && reactive) {
+                    return remoteProxy({json, variable,remote, reactive})
+                } else {
+                    return json;
+                }
+            })
+        }
+    }
+
+    const createComponent = (name, node, {framed, observer} = {}) => {
         let ctor = customElements.get(name);
         if (ctor) {
-            if (framed && !ctor.lightviewFramed) {
-                ctor.lightviewFramed = true;
-            } else {
-                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, framed});
         customElements.define(name, ctor);
-        Lightview.customElements.set(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);
@@ -792,12 +960,12 @@ const {observe} = (() => {
                 dom = parser.parseFromString(html, "text/html"),
                 unhide = !!dom.head.querySelector('meta[name="l-unhide"]'),
                 links = dom.head.querySelectorAll('link[href$=".html"][rel=module]');
-            for(const childlink of links) {
+            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);
+                    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});
@@ -807,7 +975,7 @@ const {observe} = (() => {
     const importLinks = async () => {
         const observer = createObserver(document.body);
         for (const link of [...document.querySelectorAll(`link[href$=".html"][rel=module]`)]) {
-            await importLink(link,observer);
+            await importLink(link, observer);
         }
     }
 
@@ -875,21 +1043,19 @@ const {observe} = (() => {
                             postMessage({type: "setAttribute", argsList: ["height", height + 20]});
                         }
                         resize();
-                        onresize(document.body, () => {
-                            resize();
-                        });
+                        onresize(document.body, () => resize());
                         return
                     }
                     if (type === "setAttribute") {
                         const [name, value] = [...argsList],
                             variable = document.body.vars[name];
-                        if (variable && variable.imported) document.body.setValue(name, value);
+                        if (variable && variable.imported) document.body.setVariableValue(name, value);
                         return;
                     }
                     if (type === "removeAttribute") {
                         const [name] = argsList[0],
                             variable = document.body.vars[name];
-                        if (variable && variable.imported) document.body.setValue(name, undefined);
+                        if (variable && variable.imported) document.body.setVariableValue(name, undefined);
 
                     }
                 });
@@ -927,9 +1093,7 @@ 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") {
@@ -977,7 +1141,7 @@ const {observe} = (() => {
         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
@@ -985,4 +1149,4 @@ const {observe} = (() => {
     }
 
     return {observe}
-})();
+})();