lightview 1.7.2-b → 1.8.2

package/lightview.js

@@ -28,10 +28,12 @@ SOFTWARE.
     imported(x) => exported(x) => reactive(x) => remote(x,{path:".
  */
 
-const Lightview = {};
+var currentComponent = window.currentComponent = null;
+if(document.body)  currentComponent = window.currentComponent = document.currentComponent = document.body;
+var Lightview = window.Lightview = { };
 
-const {observe} = (() => {
-    let CURRENTOBSERVER;
+var {observe} = (() => {
+    let CURRENTOBSERVER;//, CURRENTNODE;
     const parser = new DOMParser();
 
     const templateSanitizer = (string) => {
@@ -44,19 +46,19 @@ const {observe} = (() => {
     Lightview.sanitizeTemplate = templateSanitizer;
 
     const escaper = document.createElement('textarea');
-    function escapeHTML(html) {
+    const escapeHTML = html => {
         escaper.textContent = html;
         return escaper.innerHTML;
     }
     Lightview.escapeHTML = escapeHTML;
 
-    const isArrowFunction = (f) => typeof(f)==="function" && (f+"").match(/\(*.*\)*\s*=>/g);
+    const isArrowFunction = f => typeof(f)==="function" && (f+"").match(/\(*.*\)*\s*=>/g);
 
-    const getTemplateVariableName = (template) => {
-        if(template && /^\$\{[a-zA-z_.]*\}$/g.test(template)) return template.substring(2, template.length - 1);
+    const getTemplateVariableName = template => {
+        if(template && !template.includes("[") && /^\$\{[a-zA-z_0-9.]*\}$/g.test(template)) return template.substring(2, template.length - 1);
     }
 
-    const walk = (target,path,depth=path.length-1,create) => {
+    const walk = (target,path,{depth=path.length-1,create}={}) => {
         for(let i=0;i<=depth;i++) {
             target = (target[path[i]]==null && create ?  target[path[i]] = (typeof(create)==="function" ? Object.create(create.prototype) : {}) : target[path[i]]);
             if(target===undefined) return;
@@ -66,12 +68,14 @@ const {observe} = (() => {
 
     const addListener = (node, eventName, callback, self) => {
         node.addEventListener(eventName, (event) => {
-            if(self) event.self = self;
+            // todo shopuld self be currentComponent or component
+            if(self) Object.defineProperty(event,"self",{value:self});
             callback(event);
         });
     }
 
-    const anchorHandler = async (event) => {
+    // imports a component based on an anchor and replace content of a target node with an instance of the component
+    const anchorHandler = async event => {
         event.preventDefault();
         const target = event.target;
         if (target === event.currentTarget) {
@@ -83,14 +87,15 @@ const {observe} = (() => {
             })
         }
     }
-    const getNameFromPath = (path) => {
+    const getNameFromPath = path => {
         const file = path.split("/").pop(),
-            name = file.split(".")[0];
-        if (name.includes("-")) return name;
+            name = file.split(".")[0],
+            parts = name.split("-");
+        if (name.includes("-") && parts[0].length>=1) return name;
         return "l-" + name;
     }
     const observe = (f, thisArg, argsList = []) => {
-        const observer = (...args) => {
+        let observer = (...args) => {
             if(observer.cancelled) return;
             CURRENTOBSERVER = observer;
             try {
@@ -100,25 +105,27 @@ const {observe} = (() => {
             }
             CURRENTOBSERVER = null;
         }
-        observer.cancel = () => observer.cancelled = true;
+        observer.cancel = () => {
+            observer.cancelled = true;
+            return observer = null;
+        }
         observer();
         return observer;
     }
     const coerce = (value, toType) => {
-        if (value + "" === "null" || value + "" === "undefined" || toType==="any") return value;
+        if (["null","undefined"].includes(value + "") || toType==="any") return value;
         const type = typeof (value);
         if (type === toType) return value;
-        if (toType === "number") return parseFloat(value + "");
+        if (toType === "number") {
+            value = value + "";
+            if(value==="NaN") return NaN;
+            const result = parseFloat(value);
+            if(isNaN(result)) throw new TypeError(`Unable to coerce '${value}' to 'number'`)
+            return result;
+        }
         if (toType === "boolean") {
-            if (["on", "checked", "selected"].includes(value)) return true;
-            if (value == null || value === "") return false;
-            try {
-                const parsed = JSON.parse(value + "");
-                if (typeof (parsed) === "boolean") return parsed;
-                return [1, "on", "checked", "selected"].includes(parsed);
-            } catch (e) {
-                throw new TypeError(`Unable to convert ${value} into 'boolean'`);
-            }
+            if ([1,"on", "checked", "selected","true"].includes(value)) return true;
+            if ([null,"",0,"false"].includes(value)) return false;
         }
         if (toType === "string") return value + "";
         const isfunction = typeof (toType) === "function";
@@ -139,7 +146,7 @@ const {observe} = (() => {
                                 }
                             }
                             if (!Array.isArray(parsed)) {
-                                throw new TypeError(`Expected an Array for parsed data`)
+                                throw new TypeError(`Expected Array for parsed data ${parsed}:${typeof(parsed)}`)
                             }
                             instance.push(...parsed);
                         } else if (instance instanceof Date) {
@@ -147,55 +154,47 @@ const {observe} = (() => {
                         } else {
                             Object.assign(instance, JSON.parse(value));
                         }
-                        if (toType !== Date) {
-                            Object.defineProperty(instance, "constructor", {
-                                configurable: true,
-                                writable: true,
-                                value: toType.prototype.constructor || toType
-                            });
-                        }
                         return instance;
                     }
                     return JSON.parse(value);
                 } catch (e) {
-                    throw new TypeError(`Unable to convert ${value} into ${isfunction ? toType.name : type}`);
+                    throw new TypeError(`Unable to coerce '${value}:${type}' to '${isfunction ? toType.name : type}'`);
                 }
             }
         }
-        throw new TypeError(`Unable to coerce ${value} to ${toType}`)
+        throw new TypeError(`Unable to coerce '${value}:${type}' to '${toType}'`)
     }
-    const Reactor = (data) => {
+    const Reactor = data => {
         if (data && typeof (data) === "object") {
             if (data.__isReactor__) return data;
-            const childReactors = [],
-                dependents = {},
-                proxy = new Proxy(data, {
+            let dependents = {};
+            const childReactors = new Set(),
+                //nodes = new Set(),
+                {proxy,revoke} = Proxy.revocable(data, {
                     get(target, property) {
                         if (property === "__isReactor__") return true;
-                        if(property=== "__dependents__") return dependents;
-                        if(property=== "__reactorProxyTarget__") return data;
+                        if (property === "revoke") return () => {
+                            dependents = {};
+                            childReactors.forEach((reactor) => reactor.revoke());
+                            revoke();
+                        };
                         if (target instanceof Array) {
-                            if (property === "toJSON") return function toJSON() { return [...target]; }
-                            if (property === "toString") return function toString() { return JSON.stringify([...target]); }
+                            if (property === "toJSON") return function toJSON() { return [...target] }
+                            if (property === "toString") return function toString() { return JSON.stringify([...target]) }
+                        }
+                        if(target instanceof Date) {
+                            const value = data[property];
+                            if(typeof(value)==="function") return value.bind(data);
                         }
-                        if(target instanceof Date) return Reflect.get(target,property);
                         let value = target[property];
+                        if(typeof (property) === "symbol") return value;
                         const type = typeof (value);
-                        if (CURRENTOBSERVER && typeof (property) !== "symbol" && type !== "function") {
-                            const observers = dependents[property] ||= new Set();
-                            observers.add(CURRENTOBSERVER)
-                        }
+                        if (type === "function") return ([Date].includes(value) || property==="then") ? value.bind(target) : value;
+                        if (CURRENTOBSERVER)  (dependents[property] ||= new Set()).add(CURRENTOBSERVER)
                         if(value===undefined) return;
-                        if (childReactors.includes(value) || (value && type !== "object") || typeof (property) === "symbol") {
-                            // 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") {
-                            value = Reactor(value);
-                            childReactors.push(value);
-                        }
-                        target[property] = value;
+                        if (value==null || type !== "object" || childReactors.has(value)) return value;
+                        value = target[property] = Reactor(value);
+                        childReactors.add(value);
                         return value;
                     },
                     async set(target, property, value) {
@@ -207,11 +206,10 @@ const {observe} = (() => {
                         if (target[property] !== value) {
                             if (value && type === "object") {
                                 value = Reactor(value);
-                                childReactors.push(value);
+                                childReactors.add(value);
                             }
                             target[property] = value;
-                            const observers = dependents[property] || [];
-                            [...observers].forEach((f) => {
+                            [...dependents[property] || []].forEach((f) => { // handle dependent observers
                                 if (f.cancelled) dependents[property].delete(f);
                                 else f();
                             })
@@ -219,28 +217,26 @@ const {observe} = (() => {
                         return true;
                     }
                 });
+            //Object.entries(proxy).forEach(([key,value]) => proxy[key] = value);
             return proxy;
         }
         return data;
     }
 
-    class VariableEvent {
-        constructor(config) {
-            Object.assign(this, config);
-        }
-    }
-
     const createVarsProxy = (vars, component, constructor) => {
-        return new Proxy(vars, {
+        const {proxy,revoke} = Proxy.revocable(vars, {
             get(target, property) {
+                if(property==="self") return component;
+                if(property === "revoke") return revoke;
                 if(target instanceof Date) return Reflect.get(target,property);
+                if(typeof(property)==="symbol") return target[property];
                 let {value,get} = target[property] || {};
                 if(get) return target[property].value = get.call(target[property]);
                 if (typeof (value) === "function") return value.bind(target);
                 return value;
             },
             set(target, property, newValue) {
-                const event = new VariableEvent({variableName: property, value: newValue});
+                const event = {variableName: property, value: newValue};
                 if (target[property] === undefined) {
                     target[property] = {type: "any", value: newValue}; // should we allow this,  do first to prevent loops
                     target.postEvent.value("change", event);
@@ -250,7 +246,14 @@ const {observe} = (() => {
                 const variable = target[property],
                     {value, shared, exported, constant, reactive, remote} = variable;
                 let type = variable.type;
-                if (constant) throw new TypeError(`${property}:${type} is a constant`);
+                if (constant) {
+                    const error = new TypeError(`${property}:${type} is a constant`);
+                    if(Lightview.renderErrors) {
+                        variable.value = error.toString();
+                        return true;
+                    }
+                    throw error;
+                }
                 if(newValue!=null || type.required) newValue = type.validate ? type.validate(newValue,target[property]) : coerce(newValue,type);
                 const newtype = typeof (newValue),
                     typetype = typeof (type);
@@ -260,24 +263,36 @@ const {observe} = (() => {
                     (typetype === "function" && !type.validate && (newValue && newtype === "object" && newValue instanceof type) || variable.validityState?.valid)) {
                     if (value !== newValue) {
                         event.oldValue = value;
-                        target[property].value = reactive ? Reactor(newValue) : newValue; // do first to prevent loops
+                        variable.value = reactive && !variable.__isReactor__ ? Reactor(newValue) : newValue; // do first to prevent loops
                         target.postEvent.value("change", event);
                         if (event.defaultPrevented) target[property].value = value;
-                        else if(remote && (variable.reactive || remote.put)) remote.handleRemote({variable,config:remote.config},true);
+                        else if(remote && ((variable.reactive && variable?.remote?.config.put!==false) || remote.put)) remote.handleRemote({variable,config: variable?.remote?.config},true);
                         else if(variable.set) variable.set(newValue);
                     }
                     return true;
                 }
                 if (typetype === "function" && newValue && newtype === "object") {
-                    throw new TypeError(`Can't assign instance of '${newValue.constructor.name}' to variable '${property}:${type.name.replace("bound ", "")}'`)
+                    const error = new TypeError(`Can't assign instance of '${newValue.constructor.name}' to variable '${property}:${type.name.replace("bound ", "")}'`)
+                    if(Lightview.renderErrors) {
+                        variable.value = error.toString();
+                        return true;
+                    }
+                    throw error;
+                }
+                const error = new TypeError(`Can't assign '${typeof (newValue)} ${newtype === "string" ? '"' + newValue + '"' : newValue}' to variable '${property}:${typetype === "function" ? type.name.replace("bound ", "") : type} ${type.required ? "required" : ""}'`)
+                if(Lightview.renderErrors) {
+                    variable.value = error.toString();
+                    return true;
                 }
-                throw new TypeError(`Can't assign '${typeof (newValue)} ${newtype === "string" ? '"' + newValue + '"' : newValue}' to variable '${property}:${typetype === "function" ? type.name.replace("bound ", "") : type} ${type.required ? "required" : ""}'`)
+                throw error;
             },
             keys() {
                 return [...Object.keys(vars)];
             }
         });
+        return proxy;
     }
+    // this is a DOM observer, not an observer of the observer programming paradigm
     const createObserver = (domNode, framed) => {
         const mobserver = new MutationObserver((mutations) => {
             mutations.forEach((mutation) => {
@@ -296,6 +311,7 @@ const {observe} = (() => {
                     }
                 } else if (mutation.type === "childList") {
                     for (const target of mutation.removedNodes) {
+                        //target.lightviewProxies?.forEach((proxy) => proxy.forgetNode(target));
                         if (target.disconnectedCallback) target.disconnectedCallback();
                     }
                     for (const target of mutation.addedNodes) {
@@ -318,77 +334,109 @@ const {observe} = (() => {
         }
         return nodes;
     }
-    const getNodes = (root) => {
-        const nodes = new Set();
+    const getNodes = (root,href,nodes = new Set()) => {
         if (root.shadowRoot) {
             nodes.add(root);
-            getNodes(root.shadowRoot).forEach((node) => nodes.add(node))
+            getNodes(root.shadowRoot,href,nodes);
         } else {
             for (const node of root.childNodes) {
-                if (node.tagName === "SCRIPT") continue;
-                if (node.nodeType === Node.TEXT_NODE && node.nodeValue?.includes("${")) {
+                if (node.nodeType === Node.TEXT_NODE && (node.template || node.nodeValue?.includes("${"))) {
                     node.template ||= node.nodeValue;
                     nodes.add(node);
                 } else if (node.nodeType === Node.ELEMENT_NODE) {
                     let skip;
-                    [...node.attributes].forEach((attr) => {
-                        if (attr.value.includes("${")) {
+                    for(const attr of node.attributes) {
+                        if (attr.template || attr.value.includes("${")) {
                             attr.template ||= attr.value;
                             nodes.add(node);
-                        } else if (attr.name.includes(":") || attr.name.startsWith("l-")) {
+                        } else if (attr.name.startsWith("l-") || attr.name.includes(":")) {
                             skip = attr.name.includes("l-for:");
-                            nodes.add(node)
+                            nodes.add(node);
                         }
-                    })
+                    }
                     if (node.getAttribute("type") === "radio") nodes.add(node);
-                    if (!skip && !node.shadowRoot) getNodes(node).forEach((node) => nodes.add(node));
+                    if (!skip && !node.shadowRoot) getNodes(node,href,nodes);
                 }
             }
         }
         return nodes;
     }
 
-    const resolveNodeOrText = (node, component, safe,extras=node.extras||{}) => {
+    // populate a string literal template and turn objects into strings
+    const populateTemplate = (strings,...values) => {
+        values = values.map((value) => {
+            const type = typeof(value);
+            try {
+                if(value && type==="object") return JSON.stringify(value);
+                return value;
+            } catch(e) {
+                return e.toString();
+            }
+        });
+        return strings.reduce((result,string,index) => index < values.length ? result += string + values[index] : result + string,"");
+    }
+
+    const resolveNodeOrText = (node, component, safe,extras={},skipSetAttribute) => {
         const type = typeof (node),
             template = type === "string" ? node.trim() : node.template;
+        extras.populateTemplate = populateTemplate;
         if (template) {
             const name = getTemplateVariableName(template);
             try {
-                let value = (name
-                    ? component[name] || walk(extras,name.split(".")) || walk(component.varsProxy,name.split("."))
-                    : Function("context", "extras", "with(context) { with(extras) { return `" + (safe ? template : Lightview.sanitizeTemplate(template)) + "` } }")(component.varsProxy,extras));
+                const parts = name ? name.split(".") : null;
+                let value;
+                value = (parts
+                    ? (value = walk(extras,parts)) || (value = walk(component.varsProxy,parts)) || (value == null ? component[name] : value)
+                    : Function("context", "extras", "with(context) { with(extras) { return populateTemplate`" + (safe ? template : Lightview.sanitizeTemplate(template)) + "` } }")(component.varsProxy,extras));
                 //let value = Function("context", "with(context) { return `" + Lightview.sanitizeTemplate(template) + "` }")(component.varsProxy);
                 if(typeof(value)==="function") return value;
                 value = (name || node.nodeType === Node.TEXT_NODE || safe ? value : Lightview.escapeHTML(value));
                 if (type === "string") return value==="undefined" ? undefined : value;
-                if(name) {
-                    node.nodeValue = value==null ? "" : typeof(value)==="string" ? value : JSON.stringify(value);
-                } else {
-                    node.nodeValue = value == "null" || value == "undefined" ? "" : value;
+
+                if(!(skipSetAttribute && node.nodeType===Node.ATTRIBUTE_NODE)) {
+                    //requestAnimationFrame(() => {
+                    if(name) node.nodeValue = value==null ? "" : typeof(value)==="string" ? value : JSON.stringify(value);
+                    else node.nodeValue = value == "null" || value == "undefined" ? "" : value;
+                    //})
                 }
                 return value;
             } catch (e) {
                 //console.warn(e);
-                if (!e.message.includes("defined")) throw e; // actually looking for undefined or not defined
+                if (!e.message.includes("defined")) {
+                    if(Lightview.renderErrors) return e.message;
+                    throw e;
+                } // actually looking for undefined or not defined, but different browsers spell or quote differently
                 return undefined;
             }
         }
         return node?.nodeValue;
     }
-    const inputTypeToType = (inputType) => {
-        if (!inputType) return "any"
-        if (["text", "tel", "email", "url", "search", "radio", "color", "password"].includes(inputType)) return "string";
-        if (["number", "range"].includes(inputType)) return "number";
-        if (["datetime"].includes(inputType)) return Date;
-        if (["checkbox"].includes(inputType)) return "boolean";
-        return "any";
+    const inputTypeToType = inputType => {
+        const map = {
+            text:"string",
+            tel:"string",
+            email:"string",
+            url:"string",
+            search:"string",
+            radio:"string",
+            color:"string",
+            password:"string",
+            number:"number",
+            range:"number",
+            datetime:Date,
+            checkbox:"boolean"
+        }
+        return map[inputType] || "any";
     }
-    const importAnchors = (node, component) => {
-        [...node.querySelectorAll('a[href$=".html"][target^="#"]')].forEach((node) => {
-            node.removeEventListener("click", anchorHandler);
-            addListener(node, "click", anchorHandler);
-        })
+    const enableAnchors = node => {
+        for(const anode of node.querySelectorAll('a[href$=".html"][target^="#"]')) {
+            anode.removeEventListener("click", anchorHandler);
+            addListener(anode, "click", anchorHandler);
+        }
     }
+    Object.defineProperty(Lightview,"enableAnchors",{value:enableAnchors});
+    //Lightview.enableAnchors = enableAnchors;
+
     const bound = new WeakSet();
     const bindInput = (input, variableName, component, value, object) => {
         if (bound.has(input)) return;
@@ -397,22 +445,30 @@ const {observe} = (() => {
             nameparts = variableName.split(".");
         let type = input.tagName === "SELECT" && input.hasAttribute("multiple") ? Array : inputTypeToType(inputtype);
         const variable = walk(component.vars,nameparts) || {type};
-        if(type==="any") type = variable.type;
-        if(value==null) value = input.getAttribute("value");
+        if(type==="any") type = variable?.type.type || variable?.type;
+        if(inputtype==="checkbox" && value==null) value = input.checked;
+        if(value==null) {
+            const avalue = input.getAttribute("value");
+            if(avalue) value = avalue;
+        }
         if(object && nameparts.length>1) {
-            const [root,...path] = nameparts;
-            object = walk(object,path,path.length-2,true);
-            const key = path[path.length-1];
+            const [root,...path] = nameparts,
+                key = path[path.length-1];
+            object = walk(object,path,{depth:path.length-2,create:true});
             object[key] =  coerce(value,type);
         } else {
-            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}`)
-            }
             const existing = component.vars[variableName];
-            if(!existing || existing.type!==type || !existing.reactive) component.variables({[variableName]: type},{reactive});
+            if(existing) {
+                existingtype = existing?.type.type || existing?.type;
+                if(existingtype!==type) throw new TypeError(`Attempt to bind <${input.tagName} name="${variableName}" type="${type}"> to variable ${variableName}:${existing.type}`)
+                existing.reactive = true;
+            } else if(Lightview.createInputVariables) {
+                component.variables({[variableName]: type},{reactive,set:typeof(value)==="string" && value.startsWith("${") ? "" : value});
+            } else {
+                throw new TypeError(`Attempt to bind undefined variable ${variableName} to <${input.tagName} type="${type}>`)
+            }
             if(inputtype!=="radio") {
-                if(typeof(value)==="string" && value.includes("${")) input.attributes.value.value = "";
+                if(typeof(value)==="string" && value.includes("${")) input.setAttribute("value","");
                 else component.setVariableValue(variableName, coerce(value,type));
             }
         }
@@ -434,32 +490,22 @@ const {observe} = (() => {
             }
             if(object) {
                 const [root,...path] = nameparts;
-                object = walk(object,nameparts,path.length-2,true);
+                object = walk(object,nameparts,{depth:path.length-2,create:true});
             } else {
-                object = walk(component.varsProxy,nameparts,nameparts.length-2,true);
+                object = walk(component.varsProxy,nameparts,{depth:nameparts.length-2,create:true});
             }
             const key = nameparts[nameparts.length-1];
             object[key] =  coerce(value,type);
         };
         addListener(input, eventname, listener,component);
     }
-    const tryParse = (value) => {
+    const tryParse = value => {
         try {
             return JSON.parse(value);
         } catch (e) {
             return value;
         }
     }
-    const observed = () => {
-        return {
-            init({variable, component}) {
-                const name = variable.name;
-                variable.value = component.hasAttribute(name) ? coerce(component.getAttribute(name), variable.type) : variable.value;
-                variable.observed = true;
-                component.observedAttributes.add(variable.name);
-            }
-        }
-    }
     const reactive = () => {
         return {
             init({variable, component}) {
@@ -468,30 +514,21 @@ const {observe} = (() => {
             }
         }
     }
-    const shared = () => {
-        return {
-            init({variable, component}) {
-                variable.shared = true;
-                /*addEventListener("change", ({variableName, value}) => {
-                    if (variableName===variable.name && component.vars[variableName]?.shared) component.siblings.forEach((instance) => instance.setVariableValue(variableName, value))
-                })*/
-                variable.set = function(newValue) {
-                    if(component.vars[this.name]?.shared) component.siblings.forEach((instance) => instance.setVariableValue(this.name, newValue));
-                }
-            }
-        }
-    }
     const exported = () => {
         return {
             init({variable, component}) {
-                const name = variable.name;
+                const name = variable.name,
+                    set = variable.set || (() => {});
                 variable.exported = true;
                 variable.set = (newValue) => {
-                    if(variable.exported) {
-                        if(newValue==null) {
+                    set(newValue);
+                    if(variable.exported) { // still exported
+                        if(variable.value==null) {
                             removeComponentAttribute(component, name);
                         } else {
-                            newValue = typeof (newValue) === "string" ? newValue : JSON.stringify(newValue);
+                            const type = typeof(newValue);
+                            // note, using isArray below will not always work for proxied items, so using instanceOf
+                            newValue = type === "string" ? newValue : (type==="object" && newValue instanceof Array) ? JSON.stringify([...newValue]) : JSON.stringify(newValue);
                             setComponentAttribute(component, name, newValue);
                         }
                     }
@@ -503,26 +540,23 @@ const {observe} = (() => {
     const imported = () => {
         return {
             init({variable, component}) {
-                const name = variable.name;
+                const name = variable.name.toLowerCase();
+                let value = component.hasAttribute(name) ? component.getAttribute(name) : null;
+                if((variable.type==="boolean" || variable.type.type==="boolean") && value==="") value = true;
                 variable.imported = true;
-                variable.value = component.hasAttribute(name) ? coerce(component.getAttribute(name), variable.type) : variable.value;
+                variable.value = value!=null ? coerce(value, variable.type) : variable.value;
+                if(variable.set) {
+                    variable.set(variable.value);
+                }
             }
         }
     }
 
     let reserved = {
-        observed: {
-            constant: true,
-            value: observed
-        },
         reactive: {
             constant: true,
             value: reactive
         },
-        shared: {
-            constant: true,
-            value: shared
-        },
         exported: {
             constant: true,
             value: exported
@@ -531,24 +565,55 @@ const {observe} = (() => {
             constant: true,
             value: imported
         }
-    };
-    const createClass = (domElementNode, {observer, framed, href}) => {
+    }
+
+    // patches relative references to use the passed in href as base
+    const patchElementURIs = (node,tagName,attributeName,href) => { // attributeName will always be href or src
+        if(node) {
+            for(const child of node.querySelectorAll(tagName)) {
+                let value = child.getAttribute(attributeName);
+                if (value) child.setAttribute(attributeName, new URL(value, href).href);
+            }
+        }
+    }
+    // forces re-evaluation of scripts and links
+    const forceLoadElement = node => {
+        if((node.getAttribute("src")||"").includes("/lightview.js")) return;
+        const el = document.createElement(node.tagName.toLowerCase());
+        for(const attr of node.attributes) el.setAttribute(attr.name,attr.value);
+        el.innerHTML = node.innerHTML;
+        node.after(el);
+        node.remove();
+    }
+    const createClass = (domElementNode, {observer, framed, href= window.location.href.replace("blob:",""), mount}) => {
         const instances = new Set(),
-            dom = domElementNode.tagName === "TEMPLATE"
-                ? domElementNode.content.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 {
+        let dom;
+        observedAttributes.add = function(name) { observedAttributes.includes(name) || observedAttributes.push(name) }
+        const cls = class CustomElement extends HTMLElement {
             static get instances() {
                 return instances;
             }
+            static setTemplateNode(node) {
+                dom = node.tagName === "TEMPLATE"
+                    ? document.createElement("div")
+                    : node.cloneNode(true);
+                if(node.tagName === "TEMPLATE") {
+                    dom.innerHTML = node.innerHTML;
+                    for(const attr of node.attributes) dom.setAttribute(attr.name,attr.value);
+                }
+                patchElementURIs(dom.head,"link","href",href);
+                patchElementURIs(dom.head,"script","src",href);
+                patchElementURIs(dom.body||dom,"link","href",href);
+                patchElementURIs(dom.body||dom,"script","src",href);
+                dom.mount = node.mount || node.body?.mount;
+            }
             constructor() {
                 super();
+                this.componentBaseURI = href;
+                currentComponent =  window.currentComponent = document.currentComponent = this;
                 instances.add(this);
-                const currentComponent = this,
-                    shadow = this.attachShadow({mode: "open"}),
+                const shadow = this.attachShadow({mode: "open"}),
                     eventlisteners = {};
                 this.vars = {
                     ...reserved,
@@ -560,7 +625,7 @@ const {observe} = (() => {
                     addEventListener: {
                         value: (eventName, listener) => {
                             const listeners = eventlisteners[eventName] ||= new Set();
-                            [...listeners].forEach((f) => {
+                            listeners.forEach((f) => {
                                 if (listener + "" === f + "") listeners.delete(f);
                             })
                             eventlisteners[eventName].add(listener);
@@ -580,19 +645,48 @@ const {observe} = (() => {
                     },
                     self: {value: currentComponent, type: CustomElement, constant: true}
                 };
-                this.defaultAttributes = domElementNode.tagName === "TEMPLATE" ? domElementNode.attributes : dom.attributes;
                 this.varsProxy = createVarsProxy(this.vars, this, CustomElement);
                 if (framed || CustomElement.lightviewFramed) this.variables({message: Object}, {exported});
-                ["getElementById", "querySelector", "querySelectorAll"]
+                ["getElementById", "querySelector"] //, "querySelectorAll"
+                    .forEach((fname) => {
+                        const f = this[fname];
+                        Object.defineProperty(this, fname, {
+                            configurable: true,
+                            writable: true,
+                            value: (...args) => { return (f ? f.call(this,...args) : null) || this.shadowRoot[fname](...args) }
+                        })
+                    });
+                ["querySelectorAll"]
                     .forEach((fname) => {
+                        const f = this[fname];
                         Object.defineProperty(this, fname, {
                             configurable: true,
                             writable: true,
-                            value: (...args) => this.shadowRoot[fname](...args)
+                            value: (...args) => { return [...f.call(this,...args),...this.shadowRoot[fname](...args)] }
                         })
                     });
-                [...dom.childNodes].forEach((child) => shadow.appendChild(child.cloneNode(true)));
-                importAnchors(shadow, this);
+                [...dom.head?.childNodes||[]].forEach((child) => {
+                    const clone = child.cloneNode(true);
+                    document.head.appendChild(clone);
+                    if(["LINK","SCRIPT"].includes(clone.tagName)) forceLoadElement(clone);
+                });
+                const body = dom.body || dom;
+                for(const child of body.childNodes) {
+                    if(child.tagName && customElements.get(child.tagName.toLowerCase())) {
+                        const node = document.createElement(child.tagName);
+                        for(const attr of child.attributes) node.setAttribute(attr.name,attr.value);
+                        //currentComponent = window.currentComponent = document.currentComponent = node;
+                        shadow.appendChild(node);
+                    } else {
+                        const clone = child.cloneNode(true);
+                        shadow.appendChild(clone);
+                        if(["LINK","SCRIPT"].includes(clone.tagName)) forceLoadElement(clone);
+                    }
+                }
+                //forceLoadElements(shadow,"link");
+                //forceLoadElements(shadow,"script");
+                //importStyleSheets(shadow,this);
+                enableAnchors(shadow);
             }
 
             get siblings() {
@@ -607,117 +701,139 @@ const {observe} = (() => {
                 instances.delete(this);
             }
 
-            async connectedCallback() {
-                const ctx = this,
-                    shadow = ctx.shadowRoot;
-                for (const attr of this.defaultAttributes) this.hasAttribute(attr.name) || this.setAttribute(attr.name, attr.value);
-                const scripts = shadow.querySelectorAll("script"),
-                    promises = [];
-                for (const script of [...scripts]) {
-                    if (script.attributes.src?.value?.includes("/lightview.js")) continue;
-                    const text = script.innerHTML
-                        .replaceAll(/\/\*[\s\S]*?\*\/|([^:]|^)\/\/.*$/gm, "$1") // remove comments;
-                        .replaceAll(/\r?\n/g, "") // remove \n
-                        .replaceAll(/import\s*\((\s*["'][\.\/].*["'])\)/g,`import(new URL($1,"${href ? href : window.location.href}").href)`) // handle relative paths
-                        .replaceAll(/'(([^'\\]|\\.)*)'/g,"\\'$1\\'"); // handle quotes
-                    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);
-                        currentScript.innerHTML = text;
-                        shadow.appendChild(currentScript);
-                        await new Promise((resolve) => {
-                            const timeout = setTimeout(() => resolve(),500);
-                            currentScript.onload = () => {
-                                clearTimeout(timeout);
-                                currentScript.remove();
-                                resolve();
-                            }
-                        })
-                        continue;
-                    };
-                    const scriptid = Math.random() + "";
-                    for (const attr of script.attributes) {
-                        currentScript.setAttribute(attr.name, attr.name === "type" ? attr.value.replace("lightview/", "") : attr.value);
+            connectedCallback() {
+                const node = dom.body || dom;
+                for(const attr of node.attributes) {
+                    if(!this.hasAttribute(attr.name)) this.setAttribute(attr.name,attr.value);
+                }
+                if(mount ||= dom.mount||this.mount) {
+                    const script = document.createElement("script");
+                    document.currentComponent = this;
+                    script.innerHTML = `with(document.currentComponent.varsProxy) { 
+                        ${typeof(lightviewDebug)!=="undefined" && lightviewDebug===true ? "debugger;" : ""}
+                        const component = document.currentComponent; 
+                        (async () => { await (${mount}).call(self,self); 
+                        component.compile();  })(); 
+                    };`;
+                    this.appendChild(script);
+                    script.remove();
+                    for(const child of this.querySelectorAll('link[rel="stylesheet"][export]')) { // ].forEach(async (child) =>
+                        child.remove();
+                        this.appendChild(child);
                     }
-                    currentScript.classList.remove("lightview");
-                    currentScript.innerHTML = `Object.getPrototypeOf(async function(){}).constructor('if(window["${scriptid}"]?.ctx) { const ctx = window["${scriptid}"].ctx; { with(ctx) { ${text}; } } }')().then(() => window["${scriptid}"]()); `;
-                    await new Promise((resolve) => {
-                        window[scriptid] = () => {
-                            delete window[scriptid];
-                            currentScript.remove();
-                            script.remove();
-                            resolve();
-                        }
-                        window[scriptid].ctx = ctx.varsProxy;
-                        shadow.appendChild(currentScript);
-                    })
+                    window.currentComponent = document.currentComponent = null;
                 }
+            }
+            compile() {
                 // Promise.all(promises).then(() => {
-                const nodes = getNodes(ctx),
-                    processNodes = (nodes,object) => {
+                const shadow = this.shadowRoot,
+                    nodes = getNodes(this,href),
+                    processNodes = (nodes,{object,extras}={}) => { //rootName
                         nodes.forEach((node) => {
                             if (node.nodeType === Node.TEXT_NODE && node.template.includes("${")) {
-                                observe(() => resolveNodeOrText(node, this,true,node.extras));
+                                const observer = observe(((node,ctx) => () => resolveNodeOrText(node, ctx,true,extras))(node,this));
+                                node.observers ||= new Set();
+                                node.observers.add(observer);
+                                if(node.parentElement?.tagName==="TEXTAREA") {
+                                    const name = getTemplateVariableName(node.template);
+                                    if (name) {
+                                        const nameparts = name.split(".");
+                                        if(extras && extras[nameparts[0]]) object = extras[nameparts[0]];
+                                        if(!this.vars[nameparts[0]] || this.vars[nameparts[0]].reactive || object) {
+                                            bindInput(node.parentElement, name, this, resolveNodeOrText(node.template, this,true,extras), object);
+                                        }
+                                    }
+                                }
                             } else if (node.nodeType === Node.ELEMENT_NODE) {
+                                if(node.tagName==="FORM") {
+                                    const value = node.getAttribute("value"),
+                                        name = getTemplateVariableName(value);
+                                    if(name) {
+                                        node.addEventListener("submit",(event) => {
+                                            if(!event.target.hasAttribute("action")) event.preventDefault();
+                                            const object = {};
+                                            [...node.querySelectorAll("input[name]"),...node.querySelectorAll("textarea[name]")]
+                                                .forEach((input) => {
+                                                    const eltype = input.getAttribute("type"),
+                                                        path = input.getAttribute("name").split("."),
+                                                        property = path[path.length-1],
+                                                        target = walk(object,path,{depth:path.length-2,create:true})
+                                                    if(["radio","checkbox"].includes(eltype)) {
+                                                        target[property] = input.checked;
+                                                    } else {
+                                                        target[property] = input.value;
+                                                    }
+                                                });
+                                            this.varsProxy[name] = object;
+                                        })
+                                    }
+                                    return;
+                                }
                                 // resolve the value before all else;
                                 const attr = node.attributes.value,
                                     template = attr?.template;
                                 if (attr && template) {
                                     //let value = resolveNodeOrText(attr, this),
                                     //   ;
-                                    const eltype = node.attributes.type ? resolveNodeOrText(node.attributes.type, ctx, false,node.extras) : null,
-                                        template = attr.template;
+                                    const eltype = node.attributes.type ? resolveNodeOrText(node.attributes.type, this, false,extras) : null,
+                                        aname = node.getAttribute("name"),
+                                        template = attr.template;// || (rootName && aname ? `\${${rootName}.${name}}` : null);
                                     if (template) {
                                         const name = getTemplateVariableName(template);
                                         if (name) {
                                             const nameparts = name.split(".");
-                                            if(node.extras && node.extras[nameparts[0]]) {
-                                                object = node.extras[nameparts[0]];
-                                            }
+                                            if(extras && extras[nameparts[0]]) object = extras[nameparts[0]];
                                             if(!this.vars[nameparts[0]] || this.vars[nameparts[0]].reactive || object) {
-                                                bindInput(node, name, this, resolveNodeOrText(attr, this,false,node.extras), object);
+                                                bindInput(node, name, this, resolveNodeOrText(attr, this,false,extras), object);
                                             }
                                         }
-                                        observe(() => {
-                                            const value = resolveNodeOrText(template, ctx,false,node.extras);
+                                        const observer = observe(((node,ctx,template) => () => {
+                                            const value = resolveNodeOrText(template, ctx,false,extras);
                                             if(value!==undefined) {
                                                 if (eltype === "checkbox") {
                                                     if (coerce(value, "boolean") === true) {
                                                         node.setAttribute("checked", "");
-                                                        node.checked = true;
+                                                        //node.checked = true; // do we need to do this and set attribute
                                                     } else {
                                                         node.removeAttribute("checked");
-                                                        node.checked = false;
+                                                        //node.checked = false;
                                                     }
                                                 } else if (node.tagName === "SELECT") {
-                                                    let values = [value];
-                                                    if (node.hasAttribute("multiple")) values = coerce(value, Array);
+                                                    const values = node.hasAttribute("multiple") ? coerce(value, Array) : [value];
                                                     [...node.querySelectorAll("option")].forEach(async (option) => {
                                                         if (option.hasAttribute("value")) {
-                                                            if (values.includes(resolveNodeOrText(option.attributes.value, ctx,false,node.extras))) {
+                                                            if (values.includes(resolveNodeOrText(option.attributes.value, ctx,false,extras))) {
                                                                 option.setAttribute("selected", "");
-                                                                option.selected = true;
+                                                                //option.selected = true;
                                                             }
-                                                        } else if (values.includes(resolveNodeOrText(option.innerText, ctx,false,node.extras))) {
+                                                        } else if (values.includes(resolveNodeOrText(option.innerText, ctx,false,extras))) {
                                                             option.setAttribute("selected", "");
-                                                            option.selected = true;
+                                                            //option.selected = true;
                                                         }
                                                     })
                                                 } else if (eltype!=="radio") {
+                                                    //attr.value = typeof(value)==="string" ? value : JSON.stringify(value);
+                                                    let avalue = typeof(value)==="string" ? value : value.toString ? value.toString() : JSON.stringify(value);
+                                                    if(avalue.startsWith('"')) avalue = avalue.substring(1);
+                                                    if(avalue.endsWith('"')) avalue = avalue.substring(0,avalue.length-1);
                                                     attr.value = value;
+                                                    if(node.tagName==="INPUT") node.value = value;
                                                 }
                                             }
-                                        });
+                                        })(node,this,template));
+                                        node.observers ||= new Set();
+                                        node.observers.add(observer);
                                     }
                                 }
-                                [...node.attributes].forEach(async (attr) => {
-                                    if (attr.name === "value" && attr.template) return;
+                                for(const attr of node.attributes) {
+                                    if (attr.name === "value" && attr.template) continue;
                                     const {name, value} = attr,
                                         vname = node.attributes.name?.value;
-                                    if (name === "type" && value=="radio" && vname) {
+                                    if (value.includes("${")) attr.template = value;
+                                    if (name === "type" && value == "radio" && vname) {
                                         bindInput(node, vname, this, undefined, object);
-                                        observe(() => {
-                                            const varvalue =  Function("context", "with(context) { return `${" + vname + "}` }")(ctx.varsProxy);
+                                        const observer = observe(((node,ctx) => () => {
+                                            const varvalue = Function("context", "with(context) { return `${" + vname + "}` }")(ctx.varsProxy);
                                             if (node.attributes.value.value == varvalue) {
                                                 node.setAttribute("checked", "");
                                                 node.checked = true;
@@ -725,117 +841,122 @@ const {observe} = (() => {
                                                 node.removeAttribute("checked");
                                                 node.checked = false;
                                             }
-                                        });
+                                        })(node,this));
+                                        node.observers ||= new Set();
+                                        node.observers.add(observer);
                                     }
-
                                     const [type, ...params] = name.split(":");
                                     if (type === "") { // name is :something
-                                        observe(() => {
+                                        const observer = observe(((node,attr,ctx)=>() => {
                                             const value = attr.value;
                                             if (params[0]) {
                                                 if (value === "true") node.setAttribute(params[0], "")
                                                 else node.removeAttribute(params[0]);
                                             } else {
-                                                const elvalue = node.attributes.value ? resolveNodeOrText(node.attributes.value, ctx,false,node.extras) : null,
-                                                    eltype = node.attributes.type ? resolveNodeOrText(node.attributes.type, ctx,false,node.extras) : null;
+                                                const elvalue = node.attributes.value ? resolveNodeOrText(node.attributes.value, ctx, false, extras) : null,
+                                                    eltype = node.attributes.type ? resolveNodeOrText(node.attributes.type, ctx, false, extras) : null;
                                                 if (eltype === "checkbox" || node.tagName === "OPTION") {
                                                     if (elvalue === true) node.setAttribute("checked", "")
                                                     else node.removeAttribute("checked");
                                                 }
                                             }
-                                        })
+                                        })(node,attr,this));
+                                        node.observers ||= new Set();
+                                        node.observers.add(observer);
                                     } else if (type === "l-on") {
                                         let listener;
-                                        observe(() => {
-                                            const value = resolveNodeOrText(attr, this,true,node.extras);
+                                        const observer = observe(((node,attr,ctx) => () => {
+                                            const value = resolveNodeOrText(attr, ctx, true, extras,true);
                                             if (listener) node.removeEventListener(params[0], listener);
                                             listener = null;
-                                            if(typeof(value)==="function") {
+                                            if (typeof (value) === "function") {
                                                 listener = value;
                                             } else {
                                                 try {
                                                     listener = Function("return " + value)();
-                                                } catch(e) {
+                                                } catch (e) {
 
                                                 }
                                             }
-                                            if(listener) addListener(node, params[0], listener,ctx);
-                                        })
+                                            if (listener) addListener(node, params[0], listener, ctx);
+                                        })(node,attr,this));
+                                        node.observers ||= new Set();
+                                        node.observers.add(observer);
                                     } else if (type === "l-if") {
-                                        observe(() => {
-                                            const value = resolveNodeOrText(attr, this,true,node.extras);
-                                            node.style.setProperty("display", value == true ? "revert" : "none");
-                                        })
+                                        const observer = observe(((node,attr,ctx) => () => {
+                                            const value = resolveNodeOrText(attr, ctx, true, extras);
+                                            node.style.setProperty("display", value == true || value === "true" ? "revert" : "none");
+                                        })(node,attr,this));
+                                        node.observers ||= new Set();
+                                        node.observers.add(observer);
                                     } else if (type === "l-for") {
-                                        node.template ||= node.innerHTML;
-                                        node.clone ||= node.cloneNode(true);
-                                        observe(() => {
-                                            const [what = "each", vname = "item", index = "index", array = "array", after = false] = params,
-                                                value = resolveNodeOrText(attr, this,false,node.extras),
-                                                coerced = coerce(value, what === "each" ? Array : "object"),
-                                                target = what === "each" ? coerced : Object[what](coerced),
-                                                children = target.reduce((children,item,i,target) => {
-                                                    const clone = node.clone.cloneNode(true),
-                                                        extras = node.extras = {
-                                                            [vname]: item,
-                                                            [index]: i,
-                                                            [array]: target
-                                                        },
-                                                        nodes = [...getNodes(clone)].map((node) => {
-                                                            node.extras = extras;
-                                                            return node;
-                                                        });
-                                                    processNodes(nodes);
-                                                    children.push(...clone.childNodes);
-                                                    return children;
-                                                },[]);
-                                            if (!window.lightviewDebug) {
-                                                if (after) {
-                                                    node.style.setProperty("display", "none")
+                                        //node.template ||= node.innerHTML;
+                                        //node.clone ||= node.cloneNode(true);
+                                        let clone = node.cloneNode(true),
+                                            observer = observe(((node,attr,ctx) => () => {
+                                                const [what = "each", vname = "item", index = "index", array = "array", after = false] = params;
+                                                /*if (!window.lightviewDebug) {
+                                                    requestAnimationFrame(() => {
+                                                        if (after) node.style.setProperty("display", "none")
+                                                        else node.innerHTML = "";
+                                                    })
+                                                }*/
+                                                const value = resolveNodeOrText(attr, ctx, false, extras,true),
+                                                    coerced = coerce(value, what === "each" ? Array : "object"),
+                                                    target = what === "each" ? coerced : Object[what](value),
+                                                    children = target.reduce((children, item, i, target) => {
+                                                        const child = clone.cloneNode(true),
+                                                            extras = {
+                                                                [vname]: item,
+                                                                [index]: i,
+                                                                [array]: target
+                                                            },
+                                                            nodes = getNodes(child, href);
+                                                        processNodes(nodes,{extras});
+                                                        children.push(...child.childNodes);
+                                                        return children;
+                                                    }, []);
+                                                //requestAnimationFrame(() => {
+                                                if(children.length===0) {
+                                                    node.innerHTML = ""
                                                 } else {
-                                                    while (node.lastElementChild) node.lastElementChild.remove();
+                                                    children.forEach((child,i) => {
+                                                        if (after) node.parentElement.insertBefore(child, node);
+                                                        else if(node?.childNodes[i]) {
+                                                            const old = node.childNodes[i];
+                                                            if(old.observers) {
+                                                                old.observers.forEach((observer) => observer.cancel())
+                                                                old.observers.clear();
+                                                                old.observers = null;
+                                                            }
+                                                            node.replaceChild(child,old);
+                                                        }
+                                                        else node.appendChild(child);
+                                                    })
+                                                    while(node.childNodes.length>children.length) node.lastChild.remove();
                                                 }
-                                            }
-                                            //const nodes = getNodes(parsed.body);
-                                            children.forEach((child) => {
-                                                //while (parsed.body.firstChild) {
-                                                //const child = parsed.body.firstChild;
-                                                if (after) node.parentElement.insertBefore(child, node);
-                                                else node.appendChild(child);
-                                            })
-                                            //processNodes(nodes);
-                                        })
-                                    } else if(attr.template) {
-                                        observe(() => {
-                                            resolveNodeOrText(attr, this,false,node.extras);
-                                        })
+                                                // });
+                                            })(node,attr,this,extras));
+                                        node.observers ||= new Set();
+                                        node.observers.add(observer);
+                                    } else if (attr.template) {
+                                        const observer = observe(((node,attr,ctx,extras) => () => {
+                                            resolveNodeOrText(attr, ctx, false, extras);
+                                        })(node,attr,this,extras));
+                                        node.observers ||= new Set();
+                                        node.observers.add(observer);
                                     }
-                                })
+                                }
                             }
                         })
                     };
-                nodes.forEach((node) => {
-                    if(node.tagName==="FORM") {
-                        const value = node.getAttribute("value"),
-                            name = getTemplateVariableName(value);
-                        if(name) {
-                            const childnodes = [...nodes].filter((childnode) => node!==childnode && node.contains(childnode));
-                            childnodes.forEach((node) => nodes.delete(node));
-                            const variable = ctx.vars[name] ||= {type: "object", reactive:true, value: Reactor({})};
-                            if(variable.type !== "object" || !variable.reactive || !variable.value || typeof(variable.value)!=="object") {
-                                throw new TypeError(`Can't bind form ${node.getAttribute("id")} to non-object variable ${name}`);
-                            }
-                            processNodes(childnodes,variable.value);
-                        }
-                    }
-                })
                 processNodes(nodes);
                 shadow.normalize();
-                observer ||= createObserver(ctx, framed);
-                observer.observe(ctx, {attributeOldValue: true, subtree:true, characterData:true, characterDataOldValue:true});
+                observer ||= createObserver(this, framed);
+                observer.observe(this, {attributeOldValue: true, subtree:true, characterData:true, characterDataOldValue:true});
                 if(this.hasAttribute("l-unhide")) this.removeAttribute("hidden");
                 //ctx.vars.postEvent.value("connected");
-                this.dispatchEvent(new Event("connected"));
+                this.dispatchEvent(new Event("mounted"));
                 // })
             }
             adoptedCallback(callback) {
@@ -856,6 +977,13 @@ const {observe} = (() => {
                     .filter(name => !(name in reserved) && !["self", "addEventListener", "postEvent","observe"].includes(name))
             }
 
+            getVariableData() {
+                return this.getVariableNames().reduce((data,name) => {
+                    data[name] = this.getVariableValue(name);
+                    return data;
+                },{})
+            }
+
             getVariable(name) {
                 return this.vars[name] ? {...this.vars[name]} : undefined;
             }
@@ -871,11 +999,11 @@ const {observe} = (() => {
                         const variable = this.vars[variableName];
                         if (variable.shared) {
                             value = type.validate ? type.validate(value,variable) : coerce(value,coerceTo);
-                            const event = new VariableEvent({
+                            const event = {
                                 variableName: variableName,
                                 value: value,
                                 oldValue: variable.value
-                            });
+                            };
                             variable.value = value;
                             this.vars.postEvent.value("change", event);
                             if (event.defaultPrevented) variable.value = value;
@@ -893,29 +1021,31 @@ const {observe} = (() => {
                 return this.vars[variableName]?.value;
             }
 
-            variables(variables, {remote, constant,set,...rest} = {}) { // options = {observed,reactive,shared,exported,imported}
-                const options = {remote, constant,...rest},
-                    addEventListener = this.varsProxy.addEventListener;
+            variables(variables, {remote, constant, set,...rest} = {}) { // options = {observed,reactive,shared,exported,imported}
+                const options = {remote, constant, ...rest};
                 if (variables !== undefined) {
                     Object.entries(variables)
                         .forEach(([key, type]) => {
                             if(isArrowFunction(type)) type = 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(set!==undefined) variable.value = set;
                             if(constant!==undefined) {
+                                if(remote || rest.imported || rest.observed) throw new TypeError(`${key} can't be a constant and also remote, imported or observed`)
                                 variable.constant = true;
                                 variable.value = constant;
                             }
                             if (remote) {
-                                if(typeof(remote)==="function") remote = remote(`./${key}`);
-                                variable.remote = remote;
-                                remote.handleRemote({variable, config:remote.config,component:this});
+                                const type = typeof(remote);
+                                if(type==="function") variable.remote = remote(`./${key}`);
+                                else if(this.vars.remote.value && type==="string") variable.remote = this.vars.remote.value(remote);
+                                else throw new TypeError("Attempt to use type 'remote' without importing 'remote' from types.js")
+                                variable.remote.handleRemote({variable, config:variable.remote.config,component:this});
                             }
                             // todo: handle custom functional types, remote should actually be handled this way
                             Object.entries(rest).forEach(([type,f]) => {
                                 const functionalType = variable[type] = typeof(f)==="function" ? f() : f;
-                                if(functionalType.init) functionalType.init({variable,options,component:this});
+                                if(functionalType.init) functionalType.init({variable,options,component:this,coerce});
                                 if((rest.get!==undefined || rest.set!==undefined) && constant!==undefined) throw new TypeError(`${key} has the constant value ${constant} and can't have a getter or setter`);
                                 variable.set != functionalType.set;
                                 variable.get != functionalType.get;
@@ -930,16 +1060,18 @@ const {observe} = (() => {
                     }, {});
             }
         }
+        cls.setTemplateNode(domElementNode);
+        return cls;
     }
 
-    const createComponent = (name, node, {framed, observer, href} = {}) => {
+    const createComponent = (name, node, {framed, observer, href, mount} = {}) => {
         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`));
             return ctor;
         }
-        ctor = createClass(node, {observer, framed, href});
+        ctor = createClass(node, {observer, framed, href, mount});
         customElements.define(name, ctor);
         Lightview.customElements.set(name, ctor);
         return ctor;
@@ -947,40 +1079,46 @@ const {observe} = (() => {
     Lightview.customElements = new Map();
     Lightview.createComponent = createComponent;
     const importLink = async (link, observer) => {
-        const url = (new URL(link.getAttribute("href"), window.location.href)),
+        const url = (new URL(link.getAttribute("href"),document.baseURI)),
             as = link.getAttribute("as") || getNameFromPath(url.pathname);
-        if (url.hostname !== window.location.hostname && !link.getAttribute("crossorigin")) {
+        if (url.origin !== window.location.origin && !link.getAttribute("crossorigin")) {
             throw new URIError(`importLink:HTML imports must be from same domain: ${url.hostname}!=${location.hostname} unless 'crossorigin' attribute is set.`)
         }
         if (!customElements.get(as)) {
             const html = await (await fetch(url.href)).text(),
                 dom = parser.parseFromString(html, "text/html"),
-                unhide = !!dom.head.querySelector('meta[name="l-unhide"]'),
-                links = dom.head.querySelectorAll('link[href$=".html"][rel=module]');
-            for (const childlink of links) {
-                const href = childlink.getAttribute("href"),
-                    childurl = new URL(href, url.href);
-                childlink.setAttribute("href", childurl.href);
+                unhide = !!dom.head.querySelector('meta[name="l-unhide"]');
+            for (const childlink of dom.head.querySelectorAll('link[href]')) {
+                childlink.setAttribute("href", new URL(childlink.getAttribute("href"), url.href).href);
                 if (link.hasAttribute("crossorigin")) childlink.setAttribute("crossorigin", link.getAttribute("crossorigin"))
-                await importLink(childlink, observer);
+                if(childlink.getAttribute("href").endsWith(".html") && childlink.getAttribute("rel")==="module") await importLink(childlink, observer);
+            }
+            currentComponent = window.currentComponent = document.currentComponent = dom.body;
+            currentComponent.componentBaseURI = url.href;
+            const lvscript = dom.getElementById("lightview");
+            if(lvscript) {
+                const script = document.createElement("script");
+                script.innerHTML = lvscript.innerHTML;
+                document.body.appendChild(script);
+                script.remove();
             }
+            currentComponent = window.currentComponent = document.currentComponent = null;
+            createComponent(as, dom, {observer,href:url.href});
             if (unhide) dom.body.removeAttribute("hidden");
-            createComponent(as, dom.body, {observer,href:url.href});
         }
         return {as};
     }
     const importLinks = async () => {
         const observer = createObserver(document.body);
-        for (const link of [...document.querySelectorAll(`link[href$=".html"][rel=module]`)]) {
+        for (const link of document.querySelectorAll(`link[href$=".html"][rel=module]`)) {
             await importLink(link, observer);
         }
     }
 
     const bodyAsComponent = ({as = "x-body", unhide, framed} = {}) => {
-        const parent = document.body.parentElement;
         createComponent(as, document.body, {framed});
         const component = document.createElement(as);
-        parent.replaceChild(component, document.body);
+        document.body.parentElement.replaceChild(component, document.body);
         Object.defineProperty(document, "body", {
             enumerable: true, configurable: true, get() {
                 return component;
@@ -992,10 +1130,10 @@ const {observe} = (() => {
     const postMessage = (data, target = window.parent) => {
         if (postMessage.enabled) {
             if (target instanceof HTMLIFrameElement) {
-                data = {...data, href: window.location.href};
+                data = {...data, href: document.baseURI};
                 target.contentWindow.postMessage(JSON.stringify(data), "*");
             } else {
-                data = {...data, iframeId: document.lightviewId, href: window.location.href};
+                data = {...data, iframeId: document.lightviewId, href: document.baseURI};
                 target.postMessage(JSON.stringify(data), "*");
             }
         }
@@ -1018,11 +1156,11 @@ const {observe} = (() => {
         resizeObserver.observe(node);
     };
 
-    const url = new URL(document.currentScript.getAttribute("src"), window.location.href);
+    const url = new URL(document.currentScript.getAttribute("src"), document.baseURI);
     let domContentLoadedEvent;
     if (!domContentLoadedEvent) addListener(window, "DOMContentLoaded", (event) => domContentLoadedEvent = event);
     let OBSERVER;
-    const loader = async (whenFramed) => {
+    const loader = async whenFramed => {
         await importLinks();
         const unhide = !!document.querySelector('meta[name="l-unhide"]'),
             isolated = !!document.querySelector('meta[name="l-isolate"]'),
@@ -1043,20 +1181,14 @@ const {observe} = (() => {
                         onresize(document.body, () => resize());
                         return
                     }
-                    if (type === "setAttribute") {
-                        const [name, value] = [...argsList],
-                            variable = document.body.vars[name];
+                    if (["setAttribute","removeAttribute"].includes(type)) {
+                        let [name, value] = [...argsList];
+                        const variable = document.body.vars[name];
+                        if(type==="removeAttribute") value = undefined;
                         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.setVariableValue(name, undefined);
-
                     }
                 });
-                const url = new URL(window.location.href);
+                const url = new URL(document.baseURI);
                 document.lightviewId = url.searchParams.get("id");
                 postMessage({type: "DOMContentLoaded"})
             }
@@ -1070,7 +1202,7 @@ const {observe} = (() => {
                     iframe = document.getElementById(iframeId);
                 if (iframe) {
                     if (type === "DOMContentLoaded") {
-                        postMessage({type: "framed", href: window.location.href}, iframe);
+                        postMessage({type: "framed", href: document.baseURI}, iframe);
                         Object.defineProperty(domContentLoadedEvent, "currentTarget", {
                             enumerable: false,
                             configurable: true,
@@ -1127,9 +1259,11 @@ const {observe} = (() => {
                         }
                     }
                 };
-                const observer = OBSERVER = new MutationObserver(mutationCallback),
-                    iframe = document.getElementById("myframe");
-                observer.observe(iframe, {attributes: true, attributeOldValue: true});
+                const observer = OBSERVER = new MutationObserver(mutationCallback);
+                // iframe = document.getElementById("myframe");
+                for(const iframe of document.body.querySelectorAll("iframe")) {
+                    observer.observe(iframe, {attributes: true, attributeOldValue: true});
+                }
             }
         }
     }
@@ -1137,8 +1271,10 @@ const {observe} = (() => {
         // loads for framed content
         addListener(document, "DOMContentLoaded", (event) => loader(callback));
     }
-    Lightview.whenFramed = whenFramed;
-
+    Object.defineProperty(Lightview,"whenFramed",{value:whenFramed});
+    //Lightview.whenFramed = whenFramed;
+    Lightview.loader = loader;
+//debugger;
     if (window.location === window.parent.location || !(window.parent instanceof Window) || window.parent !== window) {
         // loads for unframed content
         // CodePen mucks with window.parent