npm - lightview - Versions diffs - 1.8.1-b → 1.8.2 - Mend

lightview 1.8.1-b → 1.8.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (126) hide show

package/README.md +15 -16
package/docs/CNAME +1 -0
package/docs/api.html +674 -0
package/docs/blank.html +10 -0
package/docs/comparedto.html +89 -0
package/docs/components/chart-repl.html +69 -0
package/{components/chart → docs/components}/chart.html +2 -2
package/{components → docs/components}/components.js +3 -3
package/docs/components/contents.html +17 -0
package/docs/components/gantt-repl.html +61 -0
package/{components/gantt → docs/components}/gantt.html +3 -3
package/docs/components/gauge-repl.html +66 -0
package/{components/gauge → docs/components}/gauge.html +2 -2
package/docs/components/orgchart-repl.html +64 -0
package/{components/orgchart → docs/components}/orgchart.html +2 -2
package/docs/components/repl-as-src.html +17 -0
package/docs/components/repl-repl.html +95 -0
package/docs/components/repl.html +527 -0
package/docs/components/timeline-repl.html +72 -0
package/{components/timeline → docs/components}/timeline.html +2 -2
package/docs/components.html +14 -0
package/docs/css/highlightjs.min.css +9 -0
package/docs/css/tutorial.css +35 -0
package/docs/examples/anchor.html +11 -0
package/{examples → docs/examples}/chart.html +2 -2
package/{examples → docs/examples}/counter.html +1 -1
package/{examples → docs/examples}/counter.test.mjs +0 -0
package/{examples → docs/examples}/counter2.html +1 -1
package/{examples → docs/examples}/directives.html +1 -1
package/{examples → docs/examples}/foreign.html +1 -1
package/{examples → docs/examples}/forgeinform.html +1 -1
package/{examples → docs/examples}/form.html +1 -1
package/{examples → docs/examples}/gauge.html +2 -2
package/{examples → docs/examples}/invalid-template-literals.html +1 -1
package/{examples → docs/examples}/medium/remote.html +1 -1
package/{examples → docs/examples}/message.html +0 -0
package/{examples → docs/examples}/nested.html +1 -1
package/{examples → docs/examples}/object-bound-form.html +0 -0
package/{examples → docs/examples}/remote-server.js +0 -0
package/{examples → docs/examples}/remote.html +2 -2
package/{examples → docs/examples}/remote.json +0 -0
package/{examples → docs/examples}/scratch.html +1 -1
package/docs/examples/sensors/index.html +44 -0
package/{examples → docs/examples}/sensors/sensor-server.js +0 -0
package/{examples → docs/examples}/shared.html +0 -0
package/{examples → docs/examples}/template.html +1 -1
package/{examples → docs/examples}/timeline.html +2 -2
package/docs/examples/todo.html +40 -0
package/docs/examples/top.html +10 -0
package/{examples → docs/examples}/types.html +1 -1
package/{examples → docs/examples}/xor.html +1 -1
package/docs/examples.html +25 -0
package/docs/index.html +44 -0
package/docs/javascript/codejar.min.js +8 -0
package/docs/javascript/highlightjs.min.js +1173 -0
package/docs/javascript/isomorphic-git.js +9 -0
package/docs/javascript/json5.min.js +1 -0
package/docs/javascript/lightning-fs.js +1 -0
package/docs/javascript/lightview.js +1285 -0
package/docs/javascript/marked.min.js +6 -0
package/docs/javascript/peerjs.min.js +70 -0
package/docs/javascript/turndown.js +973 -0
package/docs/javascript/types.js +606 -0
package/docs/javascript/utils.js +45 -0
package/docs/lightview.html +63 -0
package/docs/old_index.html +965 -0
package/docs/old_index.md +1132 -0
package/docs/slidein.html +51 -0
package/docs/tutorial/0-getting-started.html +67 -0
package/docs/tutorial/1-intro-to-variables.html +103 -0
package/docs/tutorial/10-template-components.html +80 -0
package/docs/tutorial/11-linked-components.html +76 -0
package/docs/tutorial/12-imported-components.html +67 -0
package/docs/tutorial/13-input-binding.html +94 -0
package/docs/tutorial/14-automatic-variable-creation.html +74 -0
package/docs/tutorial/15-form-binding.html +110 -0
package/docs/tutorial/16-if-directive.html +60 -0
package/docs/tutorial/17-loop-directives.html +83 -0
package/docs/tutorial/18-sanitizing-and-escaping-input.html +79 -0
package/docs/tutorial/2-imported-and-exported-variables.html +80 -0
package/docs/tutorial/3-data-types.html +89 -0
package/docs/tutorial/4-extended-data-types.html +83 -0
package/docs/tutorial/5-extended-functional-types.html +96 -0
package/docs/tutorial/5.1-extended-functional-types.html +79 -0
package/docs/tutorial/5.2-extended-functional-types.html +70 -0
package/docs/tutorial/6-conventional-javascript.html +75 -0
package/docs/tutorial/7-monitoring-with-observers.html +107 -0
package/docs/tutorial/8-event-listeners.html +65 -0
package/docs/tutorial/9-intro-to-components.html +91 -0
package/docs/tutorial/contents.html +32 -0
package/docs/tutorial/my-component.html +29 -0
package/docs/tutorial/remote-value.json +4 -0
package/docs/websiterepl.html +46 -0
package/lightview.js +430 -340
package/lightview.min.js +1 -0
package/lightview_good.js +1267 -0
package/lightview_optimized.js +1274 -0
package/package.json +1 -1
package/repl_hold.html +320 -0
package/test/basic.html +15 -4
package/test/basic.test.mjs +1 -1
package/test/extended.html +1 -1
package/types.js +109 -36
package/components/chart/example.html +0 -32
package/components/chart.html +0 -83
package/components/gantt/example.html +0 -22
package/components/gauge/example.html +0 -28
package/components/gauge.html +0 -60
package/components/orgchart/example.html +0 -25
package/components/repl/code-editor.html +0 -64
package/components/repl/editor.html +0 -37
package/components/repl/editorjs-inline-tool/index.js +0 -3
package/components/repl/editorjs-inline-tool/inline-tools.js +0 -28
package/components/repl/editorjs-inline-tool/tool.js +0 -175
package/components/repl/repl-with-wysiwyg.html +0 -355
package/components/repl/repl.html +0 -345
package/components/repl/sup.js +0 -44
package/components/repl/wysiwyg-repl.html +0 -258
package/components/timeline/example.html +0 -33
package/components/timeline.html +0 -81
package/examples/anchor.html +0 -11
package/examples/sensors/index.html +0 -30
package/examples/todo.html +0 -38
package/examples/top.html +0 -10
package/sites/client.html +0 -48
package/sites/index.html +0 -247

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "lightview",
-  "version": "1.8.1b",
+  "version": "1.8.2",
   "description": "Small, simple, powerful web UI and micro front end creation ... Great ideas from Svelte, React, Vue and Riot combined.",
   "main": "lightview.js",
   "scripts": {

package/repl_hold.html ADDED Viewed

@@ -0,0 +1,320 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Lightview:REPL</title>
+        </head>
+<body>
+<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/styles/default.min.css">
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+<div id="content" style="flex:auto;min-height:100%;width:750px;max-width:750px;height:100%;border:1px solid;padding:10px;margin:0 auto">
+    <div style="display:flex;flex-direction:column;">
+        <div id="tabs" style="flex-grow:0;width:100%;border:1px;padding-bottom:5px;text-align:center">
+            <span style="padding-right:10px"><label for="headhtml" l-on:click="${onTabClick}">HTML Head</label><input for="headhtml" value="${headhtmlPinned}" type="checkbox"  l-on:click="${onPinClick}"></span>
+            <span style="padding-right:10px"><label for="bodyhtml" l-on:click="${onTabClick}">HTML Body</label><input for="bodyhtml" value="${bodyhtmlPinned}" type="checkbox" l-on:click="${onPinClick}" checked></span>
+            <!--span style="padding-right:10px"><label for="markdown" l-on:click="${onTabClick}">Markdown (Body)</label><input for="markdown" value="${markdownPinned}" type="checkbox" l-on:click="${onPinClick}"></span-->
+            <span style="padding-right:10px"><label for="css" l-on:click="${onTabClick}">Style</label><input for="css" value="${cssPinned}" type="checkbox" l-on:click="${onPinClick}"></span>
+            <span style="padding-right:10px"><label for="script" l-on:click="${onTabClick}">Script</label><input for="script" value="${scriptPinned}" type="checkbox" l-on:click="${onPinClick}"></span>
+            <span style="padding-right:10px"><label for="preview" l-on:click="${onTabClick}">Preview</label><input for="preview" value="${previewPinned}" type="checkbox" l-on:click="${onPinClick}"></span>
+        </div>
+    </div>
+    <div id="headhtml" style="display:none;margin:10px" class="language-html">&lt;head&gt;<slot name="head"></slot>&lt;/head&gt;</div>
+    <div id="bodyhtml" style="margin:10px" class="language-html">&lt;body&gt;<slot name="body"></slot>&lt;/body&gt;</div>
+    <!--textarea id="markdown" style="margin-right:2px;display:none">${markdown}</textarea-->
+    <div id="css" style="display:none;margin:10px" class="language-css">&lt;style&gt;<slot name="css"></slot>&lt;/style&gt;</div>
+    <div id="script" style="display:none;margin:10px" class="language-javascript">&lt;script&gt;<slot name="script"></slot>&lt;/script&gt;</div>
+    <iframe id="preview" style="max-width:99%;width:99%;margin:10px;display:none" src="./blank.html"></iframe>
+</div>
+<div style="width:100%;text-align:center">
+    <div style="padding:5px">${source}</div>
+    <button l-on:click="${doSave}">Save</button>&nbsp;&nbsp;
+    <button l-if="${!source.trim().startsWith('http')}" l-on:click="${doReset}">Reset</button>
+</div>
+<style id="style">
+    label:hover {
+        text-decoration: underline
+    }
+</style>
+<script id="lightview">
+    (document.currentComponent||(document.currentComponent=document.body)).mount = async function() {
+        const {CodeJar} = await import("https://cdn.jsdelivr.net/npm/codejar@3.6.0/codejar.min.js");
+        const turndownService = new TurndownService({
+            headingStyle: "atx",
+            codeBlockStyle: "fenced",
+            emDelimiter: "*"
+        });
+        turndownService.keep(() => true);
+        const {html, css, script} = await import("../types.js");
+        self.variables({
+            onTabClick: "function",
+            onPinClick: "function",
+            doSave: "function",
+            doReset: "function"
+        });
+        self.variables({
+            wysiwygPinned: "boolean",
+            bodyhtmlPinned: "boolean",
+            bodyhtml: html,
+            markdownPinned: "boolean",
+            markdown: "string",
+            cssPinned: "boolean",
+            cssText: css,
+            scriptPinned: "boolean",
+            scriptText: script,
+            headhtmlPinned: "boolean",
+            headhtml: html,
+            previewPinned: "boolean",
+            source: "string",
+        }, {reactive});
+        self.variables({
+            src: "string",
+        }, {imported});
+        bodyhtmlPinned = true;
+        const loadFromFile = async () => {
+            const html = await fs.readFile(url.pathname, {encoding: "utf8"});
+            source = `IndexedDB://${url.hostname + "_repl"}${url.pathname}`;
+            return html;
+        };
+        const loadFromServer = async () => {
+            const response = await fetch(url.href);
+            const html = await response.text();
+            source = url.href;
+            return html;
+        };
+        const parseFullHTML = (fullHTML) => {
+            const parser = new DOMParser(),
+                fragment = parser.parseFromString(fullHTML, "text/html"),
+                body_el = fragment?.querySelector("body"),
+                style_el = fragment?.querySelector("style"),
+                script_el = body_el?.querySelector("script");
+            if (style_el) {
+                cssText = style_el?.innerHTML.trim();
+                style_el.remove();
+            } else {
+                cssText = "";
+            }
+            if (script_el) {
+                scriptText = script_el?.innerHTML.trim(),
+                    script_el.remove();
+            } else {
+                scriptText = "";
+            }
+            headhtml = (fragment?.head.innerHTML || "").trim();
+            bodyhtml = body_el?.innerHTML.trim();
+        };
+        let fs,
+            url;
+        if (src) {
+            url = new URL(src, window.location.href);
+            fs = new LightningFS(url.hostname + "_repl").promises;
+            try {
+                parseFullHTML(await loadFromFile());
+            } catch (e) {
+                try {
+                    parseFullHTML(await loadFromServer());
+                } catch (e) {
+                    fullHTML = e.message;
+                }
+            }
+        } else {
+            url = new URL(window.location.href);
+            fs = new LightningFS(url.hostname + "_repl").promises;
+            bodyhtml = "";
+            headhtml = "";
+            scriptText = "";
+            cssText = "";
+        }
+        ;
+        // initialize variables
+        markdown = "";
+        const tabs = [...self.querySelectorAll("label[for]")]
+            .map((label) => {
+                const id = label.getAttribute("for");
+                return [id, self.getElementById(id), label];
+            });
+        const showTab = (targetid) => {
+            tabs.forEach(([id, el, label]) => {
+                if (id === targetid || self.varsProxy[`${id}Pinned`]) {
+                    el.style.display = "block";
+                } else if (!self.varsProxy[`${id}Pinned`]) {
+                    el.style.display = "none";
+                }
+            });
+        };
+        const hideTab = (targetid) => {
+            tabs.forEach(([id, el, label]) => {
+                if (id === targetid) el.style.display = "none";
+            });
+        };
+        onTabClick = (event) => {
+            showTab(event.target.getAttribute("for"));
+        };
+        onPinClick = (event) => {
+            const id = event.target.getAttribute("for"),
+                checked = self.varsProxy[`${id}Pinned`] = event.target.checked;
+            if (checked) onTabClick(event);
+            else hideTab(id);
+        };
+        doSave = async () => {
+            const parts = url.pathname.split("/");
+            let dir = "";
+            parts.shift();
+            parts.pop();
+            for (const part of parts) {
+                dir = dir + "/" + part;
+                try {
+                    await fs.mkdir(dir);
+                } catch (e) {
+                    if (e.message === "EEXIST") break;
+                    throw e;
+                }
+            }
+            fs.writeFile(url.pathname, doPreview(), {encoding: "utf8"}, () => {
+            });
+            source = `IndexedDB://${url.hostname + "_repl"}${url.pathname}`;
+        };
+        doReset = async () => {
+            try {
+                await fs.unlink(url.pathname);
+            } catch (e) {
+            }
+            if (src) {
+                try {
+                    parseFullHTML(await loadFromServer());
+                    doPreview();
+                } catch (e) {
+                    previewEl.innerHTML = fullHTML = e.message;
+                }
+            } else {
+                bodyhtml = "";
+                headhtml = "";
+                scriptText = "";
+                cssText = "";
+                previewEl.innerHTML = "";
+            }
+        };
+        const doPreview = () => {
+            // not quite write, createComponent needs to be reworked to handle a head and import its links
+            /*const template = document.createElement("template");
+            template.innerHTML = bodyhtml +
+                "<style>" + cssText + "</style>" +
+                '<script id="lightview">' + scriptText + "<" + "/script>";
+            const component = window.customElements.get("x-preview");
+            if (component) {
+                component.setTemplateNode(template);
+            } else {
+                Lightview.createComponent("x-preview", template);
+            }
+            previewEl.innerHTML = "<x-preview></x-preview>";
+            return "<html><head>" + headhtml + "</head><body>" + template.innerHTML + "<body></html>"*/
+            const str =
+                    "<html>" +
+                    "<head>" + headhtml.replace("./lightview.js",new URL("./lightview.js",window.location.href).href) +" </head>" +
+                    "<body>" + bodyhtml +
+                    "<style>" + cssText + "</style>" +
+                    '<script id="lightview">debugger;' + scriptText + "<" + "/script>" +
+                    "</body>" +
+                    "</html>",
+                blob = new Blob([str], {type : 'text/html'}),
+                newurl = window.URL.createObjectURL(blob);
+            previewEl.src = newurl;
+        };
+        const tabsEl = self.getElementById("tabs"),
+            headhtmlEl = document.body.querySelector('[slot="head"]'),
+            bodyhtmlEl = document.body.querySelector('[slot="body"]'),
+            markdownEl = self.getElementById("markdown"),
+            cssEl = document.body.querySelector('[slot="css"]'),
+            scriptEl = document.body.querySelector('[slot="script"]'),
+            previewEl = self.getElementById("preview");
+        const highlight = (el,...args) => {
+            hljs.highlightElement(el,...args);
+        }
+        if(headhtmlEl) {
+            headhtmlEl.className = "language-html";
+            const bodyJar = CodeJar(headhtmlEl, highlight);
+            bodyJar.updateCode(headhtml);
+            bodyJar.onUpdate(code => {
+                headhtml = code;
+                doPreview();
+            })
+        }
+        if(bodyhtmlEl) {
+            bodyhtmlEl.className = "language-html";
+            const bodyJar = CodeJar(bodyhtmlEl, highlight);
+            bodyJar.updateCode(bodyhtml);
+            bodyJar.onUpdate(code => {
+                bodyhtml = code;
+                doPreview();
+            })
+        }
+        if(cssEl) {
+            cssEl.className = "language-css";
+            const bodyJar = CodeJar(cssEl, highlight);
+            bodyJar.updateCode(cssText);
+            bodyJar.onUpdate(code => {
+                cssText = code;
+                doPreview();
+            })
+        }
+        if(scriptEl) {
+            scriptEl.className = "language-javascript";
+            const bodyJar = CodeJar(scriptEl, highlight);
+            bodyJar.updateCode(scriptText);
+            bodyJar.onUpdate(code => {
+                scriptText = code;
+                doPreview();
+            })
+        }
+        doPreview();
+        /*let prevmarkdown; // prevents indirect recursion
+        observe(() => {
+            const text = turndownService.turndown(bodyhtml).trim();
+            if (text && text !== prevtext) {
+                markdown = markdownEl.innerHTML = prevmarkdown = text;
+            }
+        });
+        let prevbodyhtml; // prevents indirect recursion
+        observe(() => {
+            const html = marked.parse(markdown).trim();
+            if (html && html !== prevbodyhtml) {
+                bodyhtml = bodyhtmlEl.innerText = prevbodyhtml = html;
+            }
+        });*/
+        const initEditor = () => {
+        };
+        self.addEventListener("mounted", () => {
+            initEditor();
+            doPreview();
+        });
+    }
+</script>
+</body>
+</html>

package/test/basic.html CHANGED Viewed

@@ -5,6 +5,7 @@
     <title>Basic</title>
     <template id="x-test" name="joe" open="true" count=1 children='["mary"]' l-on:click="${bump}">
+        <input id="iuntyped" value="${iuntyped}">
         <input id="idatetime" type="datetime" value="${idatetime}">
         <span id="children">${children}</span>
@@ -18,7 +19,7 @@
         <span id="age">${age}</span>
         <span id="hamburger">${hamburger}</span>
-        <input id="iuntyped" value="${iuntyped}">
         <input id="itext" type="text" value="${itext}">
         <input id="itel" type="tel" value="${itel}">
         <input id="iemail" type="email" value="${iemail}">
@@ -35,8 +36,16 @@
         <input id="icheckbox" type="checkbox" value="${icheckbox}">
     </template>
     <script>
-        document.getElementById("x-test").mount = (self) => {
+        document.getElementById("x-test").mount = async (self) => {
             // debugger;
+            self.variables(
+                {
+                    shared:"function"
+                },
+                {
+                    constant: (await import("../types.js")).shared
+                }
+            );
             self.variables({name: "string", open: "boolean", count: "number", children: Array}, {imported, reactive});
             self.variables({color: "string", checked: "boolean", age: "number", hamburger: Array}, {
                 exported,
@@ -52,7 +61,8 @@
             counter = 0;
             myshare = 1;
-            self.addEventListener("connected", ({target}) => {
+            self.addEventListener("mounted", ({target}) => {
+                debugger;
                 iuntyped = "test";
                 itext = "test";
                 itel = "test";
@@ -80,8 +90,9 @@
             });
         }
     </script>
-    <script src="../lightview2.js"></script>
+    <script src="../lightview.js"></script>
     <script>
+        Lightview.createInputVariables = true;
         Lightview.createComponent("x-test",document.getElementById("x-test"));
     </script>
 </head>

package/test/basic.test.mjs CHANGED Viewed

@@ -164,7 +164,7 @@ describe('Lightview - Variables', () => {
     });
     test('untyped input - iuntyped should be "test"', async () => {
-        const result = await page.evaluate(async () => {
+        const result = await page.evaluate(() => {
             const el = document.getElementById("test"),
                 result = el.getElementById("iuntyped")
             return result.getAttribute("value");

package/test/extended.html CHANGED Viewed

@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <title>Extended</title>
-    <script src="../lightview2.js?as=x-body"></script>
+    <script src="../lightview.js?as=x-body"></script>
 </head>
 <body>
 <script>

package/types.js CHANGED Viewed

@@ -17,6 +17,41 @@ function reviver(property,value) {
     if(value==="@NaN") return NaN;
     return value;
 }
+const deepEqual = (a,b,matchType=deepEqual.LEFT, seen=new Set()) => {
+    if(matchType===deepEqual.RIGHT) return deepEqual(b,a,deepEqual.LEFT,seen);
+    if(matchType===deepEqual.COMMUTATIVE) return deepEqual(a,b,deepEqual.LEFT) && deepEqual(b,a,deepEqual.LEFT);
+    if(a===b) return true;
+    const type = typeof(a);
+    if(type==="function" || type!==typeof(b) || (a && !b) || (b && !a)) return false;
+    if(type==="number" && isNaN(a) && isNaN(b)) return true;
+    if(a && type==="object") {
+        if(seen.has(a)) return true;
+        seen.add(a);
+        if(a.constructor!==b.constructor || a.length!==b.length || a.size!==b.size) return false;
+        if(a instanceof Date) a.getTime() === b.getTime();
+        if(a instanceof RegExp) return a.toString() === b.toString();
+        if(a instanceof Set) {
+            for(const avalue of [...a]) {
+                if(![...b].some((bvalue) => deepEqual(avalue,bvalue,matchType,seen))) return false;
+            }
+            return true;
+        }
+        if(a instanceof Map) {
+            for(const [key,value] of [...a]) {
+                if(!deepEqual(b.get(key),value,matchType,seen)) return false;
+            }
+            return true;
+        }
+        for(const key in a) {
+            if(!deepEqual(a[key],b[key],matchType,seen)) return false;
+        }
+        return true;
+    }
+    return false;
+}
+deepEqual.LEFT = 1;
+deepEqual.COMMUTATIVE = 2;
+deepEqual.RIGHT = 3;
 function ValidityState(options) {
     if(!this || !(this instanceof ValidityState)) return new ValidityState(options);
@@ -245,11 +280,11 @@ const validateNumber  = function(value,variable) {
             variable.validityState = ValidityState({typeMismatch:true,value});
         } else if(isNaN(result) && !this.allowNaN) {
             variable.validityState = ValidityState({badInput:true,value});
-        } else if(this.min!=null && result<this.min) {
+        } else if(this.min!=null && result<this.min && !(this.min===-Infinity && isNaN(result))) {
             variable.validityState = ValidityState({rangeUnderflow:true,value});
-        } else if(this.max!=null && result>this.max) {
+        } else if(this.max!=null && result>this.max && !(this.max===Infinity && isNaN(result))) {
             variable.validityState = ValidityState({rangeOverflow:true,value});
-        }  else if(this.step!==null && (result % this.step)!==0) {
+        }  else if(this.step!=null && (result % this.step)!==0) {
             variable.validityState = ValidityState({rangeUnderflow:true,value});
         } else {
             variable.validityState = ValidityState({valid:true});
@@ -258,7 +293,7 @@ const validateNumber  = function(value,variable) {
     }
     return this.whenInvalid(variable,value);
 }
-const number = ({coerce=false,required = false,whenInvalid = ifInvalid,min=-Infinity,max=Infinity,step = 1,allowNaN = true,...rest}={}) => {
+const number = ({coerce=false,required = false,whenInvalid = ifInvalid,min=-Infinity,max=Infinity,step,allowNaN = true,...rest}={}) => {
     if(typeof(coerce)!=="boolean") throw new TypeError(`coerce, ${JSON.stringify(coerce)}, must be a boolean`);
     if(typeof(required)!=="boolean") throw new TypeError(`required, ${JSON.stringify(required)}, must be a boolean`);
     if(typeof(whenInvalid)!=="function") throw new TypeError(`whenInvalid, ${whenInvalid}, must be a function`);
@@ -484,51 +519,89 @@ const put = (href,variable) => {
 }
 const handleRemote = async ({variable, functionalType, config=functionalType, component},doput) => {
-    const type = typeof (config);
     let value;
-    if (type === "string") {
-        const href = new URL(config,window.location.href).href;
-        value = (doput
-            ? put(href,variable)
-            : get(href,variable));
-        if(variable.value===undefined) variable.value = value; // do not await here
-    } else if (remote && type === "object") {
-        if(!config.path) config.path = `./${variable.name}`;
-        if(config.path.endsWith("/")) config.path = `${config.path}${variable.name}`;
-        const href = new URL(config.path,window.location.href).href;
-        if(!config.get || !config.put) {
-            if(!href) throw new Error(`A remote path is required if no put function is provided for remote data`)
-            if(!config.get) config.get = get;
-            if(!config.put && variable.reactive) config.put = put;
-        }
-        value = (doput
-            ? config.put(href,variable)
-            : config.get(href,variable));
-        if(config.ttl && !doput && !config.intervalId) {
-            config.intervalId = setInterval(async () => {
-                await handleRemote({variable, config, component});
-                //schedule();
-            },config.ttl);
-        }
-        if(variable.value===undefined) variable.value = value;
+    if(!config.path) config.path = `./${variable.name}`;
+    if(config.path.endsWith("/")) config.path = `${config.path}${variable.name}`;
+    const href = new URL(config.path,new URL(config.base.replace("blob:","")).href).href;
+    if(!config.get || !config.put) {
+        if(!href) throw new Error(`A remote path is required if no put function is provided for remote data`)
+        if(!config.get) config.get = get;
+        if(!config.put && variable.reactive) config.put = put;
+    }
+    let areequal;
+    value = (doput
+        ? (areequal = deepEqual(variable.value,config.previousValue,deepEqual.COMMUTATIVE)) ? variable.value : config.put(href,variable)
+        : config.get(href,variable));
+    if(config.ttl && !doput && !config.intervalId) {
+        config.intervalId = setInterval(async () => {
+            await handleRemote({variable, config, component});
+            //schedule();
+        },config.ttl);
     }
-    if(value) {
-        const json = await value;
+    if(variable.value===undefined) variable.value = value;
+    if(value && !areequal) {
+        const json = config.previousValue = await value;
         if (json && typeof (json) === "object" && variable.reactive) {
-            variable.value = remoteProxy({json, variable,config, component});
+           component.setVariableValue(variable.name,remoteProxy({json, variable,config, component}));
+          // variable.value = remoteProxy({json, variable,config, component});
         } else {
             component.setVariableValue(variable.name,json);
         }
     }
 }
-const remote = (config) => {
+const remote = (config,base=document.baseURI||window.location.href) => {
+    if(typeof(config)==="string") config = {path:config};
+    config.base = base;
     return {
-        config,
+        config:{...config},
         handleRemote
     }
 }
+const shared = () => {
+    return {
+        init({variable, component}) {
+            const name = variable.name,
+                set = variable.set || (() => {});
+            variable.shared = true;
+            variable.set = function(newValue) {
+                set(newValue);
+                if(this.shared) { // still shared
+                    component.siblings.forEach((instance) => {
+                        const svariable = instance.vars[name];
+                        if(svariable?.shared) {
+                            instance.setVariableValue(name, newValue);
+                        }
+                    });
+                }
+            }
+            // initialize
+            component.siblings.forEach((instance) => {
+                if(instance===component) return;
+                const svariable = instance.vars[name];
+                if(svariable?.shared) {
+                    if(variable.value==null) {
+                        if(svariable.value!=null) variable.value = instance.vars[name].value
+                    } else instance.setVariableValue(name, variable.value);
+                }
+            });
+        }
+    }
+}
+const observed = () => {
+    return {
+        init({variable, component}) {
+            if(variable.observed) return;
+            const name = variable.name;
+            variable.value = component.hasAttribute(name) ? coerce(component.getAttribute(name), variable.type) : variable.value;
+            variable.observed = true;
+            component.observedAttributes.add(name);
+        }
+    }
+}
 const remoteGenerator = handleRemote;
-export {ValidityState,any,array,boolean,duration,number,object,remote,remoteGenerator,string,symbol,reviver,html,css,script}
+export {ValidityState,any,array,boolean,duration,number,object,remote,shared,observed,remoteGenerator,string,symbol,reviver,html,css,script}

package/components/chart/example.html DELETED Viewed

@@ -1,32 +0,0 @@
-<!DOCTYPE html>
-<head>
-    <title>Lightview:Chart:Example</title>
-    <link href="./chart.html" rel="module">
-    <script src="../../lightview.js"></script>
-</head>
-<body>
-<l-chart id="myPieChart" type="PieChart" style="height:500px;" title="How Much Pizza I Ate Last Night">
-    {
-    options: { },
-    columns: [
-    {label: "Topping", type: "string"},
-    {label: "Slices", type: "number"}
-    ],
-    rows: [
-    ["Mushrooms", 3],
-    ["Onions", 1],
-    ["Olives", 1],
-    ["Zucchini", 1],
-    ["Pepperoni", 2]
-    ]
-    }
-</l-chart>
-<script>
-    const el = document.getElementById("myPieChart");
-    el.addEventListener("mounted",() => {
-        chart = el.chart;
-        chart.addRow(["Anchovies",1]);
-    });
-</script>
-</body>
-</html>