lightview 1.7.1-b → 1.8.1-b

package/examples/xor.html

@@ -7,25 +7,27 @@
         <p>
             Play: <input type="checkbox" value="${run}">
         </p>
-        <script type="lightview/module">
-      self.variables({
-        run: "boolean"
-      },{reactive});
-      self.variables({
-        name: "string"
-      }, {
-        imported
-      });
-      addEventListener("change", ({
-        variableName,
-        value
-      }) => {
-        if (variableName === "run" && value === true) {
-          self.siblings.forEach((sibling) => {
-            sibling.setVariableValue(variableName, false);
-          })
-        }
-      })
+        <script id="lightview">
+            (document.currentComponent||(document.currentComponent=document.body)).mount = async function() {
+                self.variables({
+                    run: "boolean"
+                }, {reactive});
+                self.variables({
+                    name: "string"
+                }, {
+                    imported
+                });
+                addEventListener("change", ({
+                        variableName,
+                        value
+                    }) => {
+                    if (variableName === "run" && value === true) {
+                        self.siblings.forEach((sibling) => {
+                            sibling.setVariableValue(variableName, false);
+                        })
+                    }
+                });
+            }
     </script>
     </template>
     <title>Lightview:Examples:XOR</title>

package/lightview.js

@@ -28,6 +28,8 @@ SOFTWARE.
     imported(x) => exported(x) => reactive(x) => remote(x,{path:".
  */
 
+if(document.body) document.currentComponent = document.body;
+
 const Lightview = {};
 
 const {observe} = (() => {
@@ -143,19 +145,10 @@ const {observe} = (() => {
                             }
                             instance.push(...parsed);
                         } else if (instance instanceof Date) {
-                            const time = Date.parse(value);
-                            if(!isNaN(time)) instance.setTime(time);
-                            else return;
+                            instance.setTime(Date.parse(value));
                         } 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);
@@ -180,10 +173,11 @@ const {observe} = (() => {
                             if (property === "toJSON") return function toJSON() { return [...target]; }
                             if (property === "toString") return function toString() { return JSON.stringify([...target]); }
                         }
-                        let value = target[property];
-                        if(target instanceof Date && typeof(value)==="function") {
-                            value = value.bind(target);
+                        if(target instanceof Date) {
+                            const value = data[property];
+                            if(typeof(value)==="function") return value.bind(data);
                         }
+                        let value = target[property];
                         const type = typeof (value);
                         if (CURRENTOBSERVER && typeof (property) !== "symbol" && type !== "function") {
                             const observers = dependents[property] ||= new Set();
@@ -237,6 +231,7 @@ const {observe} = (() => {
     const createVarsProxy = (vars, component, constructor) => {
         return new Proxy(vars, {
             get(target, property) {
+                if(property==="self") return component;
                 if(target instanceof Date) return Reflect.get(target,property);
                 let {value,get} = target[property] || {};
                 if(get) return target[property].value = get.call(target[property]);
@@ -276,6 +271,9 @@ const {observe} = (() => {
                     throw new TypeError(`Can't assign instance of '${newValue.constructor.name}' to variable '${property}:${type.name.replace("bound ", "")}'`)
                 }
                 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" : ""}'`)
+            },
+            keys() {
+                return [...Object.keys(vars)];
             }
         });
     }
@@ -355,8 +353,10 @@ const {observe} = (() => {
         if (template) {
             const name = getTemplateVariableName(template);
             try {
-                let value = (name
-                    ? walk(extras,name.split(".")) || walk(component.varsProxy,name.split(".")) || component[name]
+                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 `" + (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;
@@ -398,23 +398,28 @@ 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(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];
             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 name="${variableName}" type="${type}"> to variable ${variableName}:${existing.type}`)
+                existing.reactive = true;
+            } else {
+                component.variables({[variableName]: type},{reactive});
+            }
             if(inputtype!=="radio") {
-                if(typeof(value)==="string" && value.includes("${")) input.attributes.value.value = "";
-                else if(value!=="") component.setVariableValue(variableName, coerce(value,type));
+                if(typeof(value)==="string" && value.includes("${")) input.setAttribute("value","");
+                else component.setVariableValue(variableName, coerce(value,type));
             }
         }
         let eventname = "change";
@@ -473,9 +478,6 @@ const {observe} = (() => {
         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));
                 }
@@ -533,22 +535,43 @@ const {observe} = (() => {
             value: imported
         }
     };
-    const createClass = (domElementNode, {observer, framed}) => {
+    const createClass = (domElementNode, {observer, framed, href=window.location.href}) => {
         const instances = new Set(),
-            dom = domElementNode.tagName === "TEMPLATE"
-                ? domElementNode.content.cloneNode(true)
-                : domElementNode.cloneNode(true),
             observedAttributes = [];
+        /*let dom = domElementNode.tagName === "TEMPLATE"
+            ? domElementNode.content.cloneNode(true)
+            : domElementNode.cloneNode(true);*/
+        let dom;
         observedAttributes.add = function(name) { observedAttributes.includes(name) || observedAttributes.push(name); }
-        if (domElementNode.tagName === "TEMPLATE") domElementNode = domElementNode.cloneNode(true);
-        return class CustomElement extends HTMLElement {
+        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;
+                    [...node.attributes].forEach((attr) => dom.setAttribute(attr.name,attr.value));
+                    document.currentComponent = node;
+                    document.currentComponent.componentBaseURI = window.location.href;
+                    const lvscript = dom.querySelector("#lightview");
+                    if(lvscript) {
+                        const script = document.createElement("script");
+                        script.innerHTML = lvscript.innerHTML;
+                        document.head.appendChild(script);
+                        script.remove();
+                    }
+                    document.currentComponent = null;
+                }
+                dom.mount = node.mount;
+            }
             constructor() {
                 super();
+                this.componentBaseURI = href;
                 instances.add(this);
-                const currentComponent = this,
+                const currentComponent =  document.currentComponent =this,
                     shadow = this.attachShadow({mode: "open"}),
                     eventlisteners = {};
                 this.vars = {
@@ -581,7 +604,6 @@ 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"]
@@ -592,7 +614,17 @@ const {observe} = (() => {
                             value: (...args) => this.shadowRoot[fname](...args)
                         })
                     });
-                [...dom.childNodes].forEach((child) => shadow.appendChild(child.cloneNode(true)));
+                [...dom.childNodes].forEach((child) => {
+                    if(child.tagName && customElements.get(child.tagName.toLowerCase())) {
+                        const node = document.createElement(child.tagName);
+                        [...child.attributes].forEach((attr) => node.setAttribute(attr.name,attr.value));
+                        document.currentComponent = node;
+                        shadow.appendChild(node);
+                    } else {
+                        const node = child.cloneNode(true);
+                        shadow.appendChild(node);
+                    }
+                });
                 importAnchors(shadow, this);
             }
 
@@ -608,57 +640,44 @@ 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;
-                    // remove comments;
-                    const text = script.innerHTML
-                        .replaceAll(/\/\*[\s\S]*?\*\/|([^:]|^)\/\/.*$/gm, "$1")
-                        .replaceAll(/\r?\n/g, "")
-                        .replaceAll(/'(([^'\\]|\\.)*)'/g,"\\'$1\\'");
-                    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);
-                    }
-                    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);
-                    })
+            connectedCallback() {
+                [...dom.attributes].forEach((attr) => {
+                    if(!this.hasAttribute(attr.name)) this.setAttribute(attr.name,attr.value);
+                })
+                if(dom.mount) {
+                    const script = document.createElement("script");
+                    document.currentComponent = this;
+                    script.innerHTML = `with(document.currentComponent.varsProxy) { 
+                        const component = document.currentComponent; 
+                        (async () => { await (${dom.mount}).call(self,self); 
+                        component.compile();  })(); 
+                    };`;
+                    this.appendChild(script);
+                    script.remove();
+                    document.currentComponent = null;
                 }
+            }
+            compile() {
                 // Promise.all(promises).then(() => {
+                const ctx = this,
+                    shadow = this.shadowRoot;
                 const nodes = getNodes(ctx),
                     processNodes = (nodes,object) => {
                         nodes.forEach((node) => {
                             if (node.nodeType === Node.TEXT_NODE && node.template.includes("${")) {
                                 observe(() => resolveNodeOrText(node, this,true,node.extras));
+                                if(node.parentElement?.tagName==="TEXTAREA") {
+                                    const name = getTemplateVariableName(node.template);
+                                    if (name) {
+                                        const nameparts = name.split(".");
+                                        if(node.extras && node.extras[nameparts[0]]) {
+                                            object = node.extras[nameparts[0]];
+                                        }
+                                        if(!this.vars[nameparts[0]] || this.vars[nameparts[0]].reactive || object) {
+                                            bindInput(node.parentElement, name, this, resolveNodeOrText(node.template, this,true,node.extras), object);
+                                        }
+                                    }
+                                }
                             } else if (node.nodeType === Node.ELEMENT_NODE) {
                                 // resolve the value before all else;
                                 const attr = node.attributes.value,
@@ -673,7 +692,7 @@ const {observe} = (() => {
                                         if (name) {
                                             const nameparts = name.split(".");
                                             if(node.extras && node.extras[nameparts[0]]) {
-                                               object = node.extras[nameparts[0]];
+                                                object = node.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);
@@ -705,7 +724,11 @@ const {observe} = (() => {
                                                         }
                                                     })
                                                 } else if (eltype!=="radio") {
-                                                    attr.value = value;
+                                                    //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 = avalue;
                                                 }
                                             }
                                         });
@@ -713,9 +736,9 @@ const {observe} = (() => {
                                 }
                                 [...node.attributes].forEach(async (attr) => {
                                     if (attr.name === "value" && attr.template) return;
-                                    attr.template ||= attr.nodeValue?.includes("${") ? attr.nodeValue : undefined;
                                     const {name, value} = attr,
                                         vname = node.attributes.name?.value;
+                                    if(value.includes("${")) attr.template = value;
                                     if (name === "type" && value=="radio" && vname) {
                                         bindInput(node, vname, this, undefined, object);
                                         observe(() => {
@@ -766,7 +789,7 @@ const {observe} = (() => {
                                     } else if (type === "l-if") {
                                         observe(() => {
                                             const value = resolveNodeOrText(attr, this,true,node.extras);
-                                            node.style.setProperty("display", value == true ? "revert" : "none");
+                                            node.style.setProperty("display", value == true || value === "true" ? "revert" : "none");
                                         })
                                     } else if (type === "l-for") {
                                         node.template ||= node.innerHTML;
@@ -798,10 +821,14 @@ const {observe} = (() => {
                                                     while (node.lastElementChild) node.lastElementChild.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(() => {
@@ -833,7 +860,7 @@ const {observe} = (() => {
                 observer.observe(ctx, {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) {
@@ -902,6 +929,7 @@ const {observe} = (() => {
                             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) {
+                                if(remote || imported) throw new TypeError(`${key} can't be a constant and also remote or imported`)
                                 variable.constant = true;
                                 variable.value = constant;
                             }
@@ -928,16 +956,18 @@ const {observe} = (() => {
                     }, {});
             }
         }
+        cls.setTemplateNode(domElementNode);
+        return cls;
     }
 
-    const createComponent = (name, node, {framed, observer} = {}) => {
+    const createComponent = (name, node, {framed, observer, href} = {}) => {
         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});
+        ctor = createClass(node, {observer, framed, href});
         customElements.define(name, ctor);
         Lightview.customElements.set(name, ctor);
         return ctor;
@@ -954,16 +984,34 @@ const {observe} = (() => {
             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) {
+                modulelinks = dom.head.querySelectorAll('link[href$=".html"][rel=module]');
+            for (const childlink of modulelinks) {
                 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);
             }
+            const links =  dom.head.querySelectorAll('link:not([href$=".html"][rel=module])');
+            for(const childlink of links) {
+                const href = childlink.getAttribute("href"),
+                    childurl = new URL(href, url.href);
+                childlink.setAttribute("href", childurl.href);
+                if (link.hasAttribute("crossorigin")) childlink.setAttribute("crossorigin", link.getAttribute("crossorigin"));
+                dom.body.insertBefore(childlink,dom.body.firstChild);
+            }
+            document.currentComponent = dom.body;
+            document.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();
+            }
+            document.currentComponent = null;
+            createComponent(as, dom.body, {observer,href:url.href});
             if (unhide) dom.body.removeAttribute("hidden");
-            createComponent(as, dom.body, {observer});
         }
         return {as};
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lightview",
-  "version": "1.7.1b",
+  "version": "1.8.1b",
   "description": "Small, simple, powerful web UI and micro front end creation ... Great ideas from Svelte, React, Vue and Riot combined.",
   "main": "lightview.js",
   "scripts": {
@@ -28,9 +28,14 @@
   "bugs": {
     "url": "https://github.com/anywhichway/lightview/issues"
   },
-  "homepage": "https://github.com/anywhichway/lightview#readme",
+  "homepage": "https://lightview.dev",
   "devDependencies": {
+    "@editorjs/editorjs": "^2.16.0",
+    "editorjs-inline-tool": "^0.4.0",
     "jest": "^27.5.1",
     "jest-puppeteer": "^6.1.0"
+  },
+  "dependencies": {
+    "froala-editor": "^4.0.11"
   }
 }

package/sites/client.html

@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Lightview:Sites:Client</title>
+    <template id="template"></template>
+    <script src="../lightview.js"></script>
+    <script src="https://unpkg.com/peerjs@1.3.2/dist/peerjs.min.js"></script>
+    <script>
+        const template = document.getElementById("template"),
+            client = new Peer("anywhichway3",{debug:3});
+        client.on("open",(id) => {
+            console.log(id);
+            setTimeout(()=> document.body.innerHTML+=id);
+            const server = client.connect("anywhichway1");
+            server.on("open",() => {
+                server.send("Hi from " + id);
+                setTimeout(() => {
+                    server.send("Hi from " + id);
+                },5000);
+            });
+        });
+        client.on("connection",(conn) => {
+            //conn.on("open",() => {
+            //  conn.send("Client does not accept inbound connections")
+            // });
+            conn.on("data",(data) => {
+                console.log(data);
+                template.innerHTML = data;
+                setTimeout(()=> document.body.innerHTML=data);
+                const component = window.customElements.get("x-body");
+                if(component) component.setTemplateNode(template)
+                else Lightview.createComponent("x-body",template);
+                const body = document.createElement("x-body");
+                document.body.parentElement.replaceChild(body, document.body);
+                Object.defineProperty(document, "body", {
+                    enumerable: true, configurable: true, get() {
+                        return body;
+                    }
+                });
+            })
+        });
+    </script>
+</head>
+<body>
+
+</body>
+</html>