lightview 1.4.8-b → 1.6.2-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 && remote.put) {
+                            remote.handleRemote({variable,config:remote.config,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,53 +315,48 @@ const {observe} = (() => {
             nodes.push(root, ...getNodes(root.shadowRoot))
         } else {
             for (const node of root.childNodes) {
-                if(node.tagName==="SCRIPT") continue;
+                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 resolveNodeOrText = (node, component,safe) => {
-        const type = typeof(node),
+    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(template) + "` }")(component.varsProxy);
-                value = node.nodeType===Node.TEXT_NODE || !safe ? value : Lightview.escapeHTML(value);
-                if(type==="string") return value;
-                node.nodeValue = value=="null" || value=="undefined" ? "" : value;
+                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) => {
-        let observer;
-        if (hasTemplate) {
-            if (observer) observer.cancel();
-            observer = observe(render)
-        } else {
-            render();
-        }
-    }
     const inputTypeToType = (inputType) => {
         if (!inputType) return "any"
         if (["text", "tel", "email", "url", "search", "radio", "color", "password"].includes(inputType)) return "string";
@@ -353,26 +372,28 @@ const {observe} = (() => {
         })
     }
     const bound = new WeakSet();
-    const bindInput = (input, variableName, component,value) => {
-        if(bound.has(input)) return;
+    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[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="${variableName}" type="${type}"> to variable ${variableName}:${variable.type}`)
         }
-        component.variables({[variableName]: type});
-        if(inputtype!=="radio") component.setValue(variableName,value);
+        component.variables({[variableName]: type},{reactive:true});
+        if(inputtype!=="radio") {
+            if(value.includes("${")) input.attributes.value.value = "";
+            else component.setVariableValue(variableName, coerce(value,type));
+        }
         let eventname = "change";
         if (input.tagName !== "SELECT" && (!inputtype || input.tagName === "TEXTAREA" || ["text", "number", "tel", "email", "url", "search", "password"].includes(inputtype))) {
             eventname = "input";
         }
         const listener = (event) => {
-            if(event) event.stopImmediatePropagation();
+            if (event) event.stopImmediatePropagation();
             let value = input.value;
             if (inputtype === "checkbox") {
                 value = input.checked
@@ -380,7 +401,7 @@ const {observe} = (() => {
                 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)
+                        .filter((option) => option.selected || resolveNodeOrText(option.attributes.value || option.innerText, component) === value) //todo make sync comopat
                         .map((option) => option.getAttribute("value") || option.innerText);
                 }
             }
@@ -396,11 +417,6 @@ 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},
@@ -411,7 +427,9 @@ const {observe} = (() => {
         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() {
@@ -421,10 +439,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: {
@@ -439,9 +465,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",
@@ -451,6 +478,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) => {
@@ -481,138 +510,148 @@ 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, () => resolveNodeOrText(node, this))
+                           observe(() => 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 = resolveNodeOrText(attr, this),
+                            const attr = node.attributes.value,
+                                template = attr?.template;
+                            if (attr && template) {
+                                    let value = resolveNodeOrText(attr, this),
                                         eltype = node.attributes.type ? resolveNodeOrText(node.attributes.type, ctx) : null;
-                                    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 = resolveNodeOrText(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(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;
+                                    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 = resolveNodeOrText(node.attributes.name, ctx);
-                                        for (const vname of this.getVariableNames()) {
-                                            if (vname === name) {
-                                                render(true, () => {
-                                                    const name = resolveNodeOrText(node.attributes.name, ctx),
-                                                        varvalue = Function("context", "with(context) { return `${" + name + "}` }")(ctx.varsProxy);
-                                                    if (varvalue == resolveNodeOrText(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);
+                                   observe(() => {
+                                        const varvalue =  Function("context", "with(context) { return `${" + vname + "}` }")(ctx.varsProxy);
+                                        if (node.attributes.value.value == varvalue) {
+                                            node.setAttribute("checked", "");
+                                            node.checked = true;
+                                        } else {
+                                            node.removeAttribute("checked");
+                                            node.checked = false;
+                                        }
+                                    });
                                 }
 
                                 const [type, ...params] = name.split(":");
                                 if (type === "") { // name is :something
-                                    render(!!attr.template, () => {
-                                        const value = attr.value,
-                                            elvalue = resolveNodeOrText(node.attributes.value, ctx),
-                                            eltype = resolveNodeOrText(node.attributes.type, ctx),
-                                            elname = resolveNodeOrText(node.attributes.name, ctx);
+                                    observe(() => {
+                                        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, () => {
+                                    observe(() => {
                                         const value = resolveNodeOrText(attr, this);
                                         if (listener) node.removeEventListener(params[0], listener);
                                         listener = this[value] || window[value] || Function(value);
                                         addListener(node, params[0], listener);
                                     })
                                 } else if (type === "l-if") {
-                                    render(!!attr.template, () => {
+                                    observe(() => {
                                         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, () => {
+                                    observe(() => {
                                         const [what = "each", vname = "item", index = "index", array = "array", after = false] = params,
                                             value = resolveNodeOrText(attr, this),
                                             coerced = coerce(value, what === "each" ? Array : "object"),
                                             target = what === "each" ? coerced : Object[what](coerced),
-                                            html = target.reduce((html, item, i, target) => {
-                                                return html += Function("vars","context", "with(vars) { with(context) { return `" + node.template + "` }}")(
+                                            html = target.reduce( (html, item, i, target) => {
+                                                return html += Function("vars", "context", "with(vars) { with(context) { return `" + node.template + "` }}")(
                                                     ctx.varsProxy,
                                                     {
                                                         [vname]: item,
@@ -633,61 +672,53 @@ const {observe} = (() => {
                                             else node.appendChild(parsed.body.firstChild);
                                         }
                                     })
-                                } else if (attr.template) {
-                                    render(!!attr.template, () => resolveNodeOrText(attr, this));
+                                } else if(attr.template) {
+                                    observe(() => {
+                                        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");
             }
-
-            connected(callback) {
-                this.connectedCallback = callback;
-                //Object.defineProperty(this, "connectedCallback", {configurable: true, writable: true, value});
+            disconnectedCallback() {
+                this.vars.postEvent.value("disconnected");
             }
-
-            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() {
-                return Object.keys(this.vars).filter((name) => {
-                    return !(name in reserved) && !["self", "addEventListener", "postEvent"].includes(name)
-                })
+                return Object.keys(this.vars)
+                    .filter(name => !(name in reserved) && !["self", "addEventListener", "postEvent"].includes(name))
+            }
+
+            getVariable(name) {
+                return this.vars[name] ? {...this.vars[name]} : undefined;
             }
 
-            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,
@@ -706,20 +737,29 @@ 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, constant,set} = {}) { // options = {observed,reactive,shared,exported,imported}
                 const addEventListener = this.varsProxy.addEventListener;
                 if (variables !== undefined) {
                     Object.entries(variables)
                         .forEach(([key, type]) => {
                             const variable = this.vars[key] ||= {name: key, type};
+                            if(set!==undefined && constant!==undefined) throw new TypeError(`${key} has the constant value ${constant} and can't be set to ${set}`);
+                            variable.value = set;
+                            if(constant!==undefined) {
+                                variable.constant = true;
+                                variable.value = constant;
+                            }
                             if (observed || imported) {
                                 variable.value = this.hasAttribute(key) ? coerce(this.getAttribute(key), variable.type) : variable.value;
-                                variable.observed = observed;
                                 variable.imported = imported;
+                                if(variable.observed) {
+                                    variable.observed = observed;
+                                    this.observedAttributes.add(key);
+                                }
                             }
                             if (reactive) {
                                 variable.reactive = true;
@@ -728,21 +768,21 @@ 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) {
+                                if(typeof(remote)==="function") remote = remote(`./${key}`);
+                                variable.remote = remote;
+                                remote.handleRemote({variable, config:remote.config, reactive,component:this});
                             }
+                            if(type.validate) type.validate(variable.value,variable);
                         });
                 }
                 return Object.entries(this.vars)
@@ -751,44 +791,23 @@ const {observe} = (() => {
                         return result;
                     }, {});
             }
-
-            constants(variables) {
-                if (variables !== undefined) {
-                    Object.entries(variables)
-                        .forEach(([key, value]) => {
-                            const type = typeof (value) === "function" ? value : typeof (value),
-                                variable = this.vars[key];
-                            if (variable !== undefined) throw new TypeError(`${variable.constant ? "const" : "let"} ${key}:${variable.type} already declared.`);
-                            if (value === undefined) throw new TypeError(`const ${key}:undefined must be initialized.`);
-                            this.vars[key] = {type, value, constant: true};
-                        })
-                }
-                return Object.entries(this.vars)
-                    .reduce((result, [key, variable]) => {
-                        if (variable.constant) result[key] = {...variable};
-                        return result;
-                    }, {});
-            }
         }
     }
-    const createComponent = (name, node, {framed,observer} = {}) => {
+
+    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);
@@ -800,12 +819,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});
@@ -815,7 +834,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);
         }
     }
 
@@ -883,21 +902,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);
 
                     }
                 });
@@ -935,9 +952,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") {
@@ -985,7 +1000,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