lightview 1.7.2-b → 1.8.2

package/types.js

@@ -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`);
@@ -356,6 +391,15 @@ const string = ({coerce=false, required = false,whenInvalid = ifInvalid, maxleng
     }
 }
 
+const html = (...args) => string(...args);
+html.safe = true;
+
+const css = (...args) => string(...args);
+css.safe = true;
+
+const script = (...args) => string(...args);
+script.safe = true;
+
 
 const validateSymbol  = function(value,variable) {
     if(value===undefined && variable.value===undefined) {
@@ -475,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;
     }
-    if(value) {
-        const json = await value;
+    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(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}
+export {ValidityState,any,array,boolean,duration,number,object,remote,shared,observed,remoteGenerator,string,symbol,reviver,html,css,script}

package/unsplash.key

@@ -0,0 +1 @@
+nRe-dHABvjv2shxyvDFQd3Y9MPni77qBG9ImAVH0wig

package/components/chart/chart.html

@@ -1,15 +0,0 @@
-<html>
-<head>
-    <meta charset="UTF-8">
-    <title>Lightview:Chart</title>
-</head>
-<body>
-<div id="target"></div>
-<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
-<script src="https://unpkg.com/json5@^2.0.0/dist/index.min.js"></script>
-<script type="lightview/module">
-    const {chart} = await import("/components/components.js");
-    chart(self);
-</script>
-</body>
-</html>

package/components/chart.html

@@ -1,81 +0,0 @@
-<html>
-<head>
-    <meta charset="UTF-8">
-    <title>Lightview:Chart</title>
-</head>
-<body hidden>
-<div id="target"></div>
-<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
-<script src="https://unpkg.com/json5@^2.0.0/dist/index.min.js"></script>
-<script type="lightview/module">
-    let table = JSON5.parse(self.firstChild.textContent.trim()),
-        chart,
-        datatable,
-        options = {};
-    const target = self.getElementById("target"),
-        resizeObserver = new ResizeObserver(entries => {
-          for (let entry of entries) {
-            if(entry.contentBoxSize) {
-              // Firefox implements `contentBoxSize` as a single content rect, rather than an array
-              const contentBoxSize = Array.isArray(entry.contentBoxSize) ? entry.contentBoxSize[0] : entry.contentBoxSize;
-              options.width = contentBoxSize.inlineSize;
-            } else {
-              options.width = entry.contentRect.width;
-            }
-          }
-          chart.draw(datatable, options);
-        }),
-        callback = (textNode, oldValue, newValue) => {
-            datatable = new google.visualization.DataTable();
-            try {
-                table = table || JSON5.parse(newValue.trim());
-                datatable = google.visualization.arrayToDataTable(table);
-                chart.draw(datatable, options);
-                table = null;
-            } catch (e) {
-                target.innerText = e + newValue;
-            }
-        };
-    self.firstChild.innerText = "Loading ...";
-    self.variables({type: "string", title: "string", style: "string"}, {observed});
-    if(style) target.setAttribute("style",style);
-    self.addRow = (row) => {
-        datatable.addRows([row]);
-        chart.draw(datatable, options);
-    };
-    self.setValue = (row,col,value) => {
-        if(datatable) {
-            datatable.setValue(row,col,value);
-            chart.draw(datatable, options);
-        }
-    };
-    self.setOptions = (newOptions) => {
-      Object.assign(options,newOptions);
-    };
-    self.init = () => {
-        if(!options.title && title) options.title = title;
-        chart = new google.visualization[type](target);
-        addEventListener("change",({target,value}) => {
-            if (target === "type") {
-                chart = new google.visualization[type](target);
-            } else if (target === "title") {
-                options.title = value;
-            } else if(target === "style") {
-                target.setAttribute("style",value);
-            }
-            chart.draw(datatable, options);
-        });
-        const node = self.firstChild;
-        callback(node, node.textContent, node.textContent);
-        // Will be used by the Lightview global observer
-        node.characterDataMutationCallback = callback;
-        // resized charts if window resizes
-        resizeObserver.observe(target);
-    };
-    self.addEventListener("connected", ({target}) => {
-        google.charts.load("current", {"packages": ["corechart","gauge"]});
-        google.charts.setOnLoadCallback(self.init);
-    });
-</script>
-</body>
-</html>

package/components/gantt/example.html

@@ -1,27 +0,0 @@
-<!DOCTYPE html>
-<head>
-    <title>Lightview:Chart:Example</title>
-    <link href="./gantt.html" rel="module">
-    <script src="../../lightview.js"></script>
-</head>
-<body>
-<l-gantt id="myChart" style="height:500px;" title="Research Project">
-    {
-    options: { },
-    rows: [
-    ['Research', 'Find sources',"2015-01-01", "2015-01-05", null,  100,  null],
-    ['Write', 'Write paper',null,"2015-01-09", "3d", 25, 'Research,Outline'],
-    ['Cite', 'Create bibliography',null, "2015-01-07","1d" , 20, 'Research'],
-    ['Complete', 'Hand in paper', null, "2015-01-10", "1d" , 0, 'Cite,Write'],
-    ['Outline', 'Outline paper', null, "2015-01-06", "1d" , 100, 'Research']
-    ]
-    }
-</l-gantt>
-<script>
-    const el = document.getElementById("myChart");
-    el.addEventListener("mounted",() => {
-        chart = el.chart;
-    });
-</script>
-</body>
-</html>

package/components/gantt/gantt.html

@@ -1,34 +0,0 @@
-<html>
-<head>
-    <title>Lightview:Gantt</title>
-</head>
-<body>
-<div id="target"></div>
-<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
-<script src="https://unpkg.com/json5@^2.0.0/dist/index.min.js"></script>
-<script type="lightview/module">
-    const {chart} = await import("/components/components.js"),
-        {duration} = await import("/types.js");
-    chart(self,{
-      packages:["gantt"],
-      columns:[
-        {label:"Task ID",type:"string"},
-        {label:"Task Name",type:"string"},
-        {label:"Start Date",type:"date"},
-        {label:"End Date",type:"date"},
-        {label:"Duration",type:"number"},
-        {label:"% Complete",type:"number"},
-        {label:"Dependencies",type:"string"}
-        ],
-      type:"Gantt",
-      rowTransform(row) {
-        return row.map((item,index) => {
-          if(item && (index===2 || index===3)) return new Date(item);
-          if(item && index===4) return duration.parse(item);
-          return item;
-        })
-      }
-    });
-</script>
-</body>
-</html>

package/components/gauge/example.html

@@ -1,28 +0,0 @@
-<!DOCTYPE html>
-<head>
-    <title>Lightview:Gauge:Example</title>
-    <link href="./gauge.html" rel="module">
-    <script src="../../lightview.js"></script>
-</head>
-<body>
-<l-gauge id="myChart" style="height:500px;" title="Server" hidden l-unhide>
-    {
-    options: {
-
-    },
-    rows: [
-    ['Memory', 80],
-    ['CPU', 55],
-    ['Network', 68]
-    ]
-    }
-</l-gauge>
-<script>
-    const el = document.getElementById("myChart");
-    el.addEventListener("mounted",() => {
-        chart = el.chart;
-        chart.addRow(["Storage",10]);
-    });
-</script>
-</body>
-</html>

package/components/gauge/guage.html

@@ -1,19 +0,0 @@
-<html>
-<head>
-    <meta charset="UTF-8">
-    <title>Lightview:Gauge</title>
-</head>
-<body>
-<div id="target"></div>
-<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
-<script src="https://unpkg.com/json5@^2.0.0/dist/index.min.js"></script>
-<script type="lightview/module">
-    const {chart} = await import("/components/components.js");
-    chart(self,{
-      packages:["corechart","gauge"],
-      columns:[{label:"Label",type:"string"},{label:"Value",type:"number"}],
-      type:"Gauge"
-    });
-</script>
-</body>
-</html>

package/components/gauge.html

@@ -1,57 +0,0 @@
-<html>
-<head>
-    <meta charset="UTF-8">
-    <title>Lightview:Gauge</title>
-</head>
-<body hidden>
-<div id="target"></div>
-<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
-<script type="lightview/module">
-    const target = self.getElementById("target"),
-        resizeObserver = new ResizeObserver(entries => {
-          for (let entry of entries) {
-            if(entry.contentBoxSize) {
-              // Firefox implements `contentBoxSize` as a single content rect, rather than an array
-              const contentBoxSize = Array.isArray(entry.contentBoxSize) ? entry.contentBoxSize[0] : entry.contentBoxSize;
-              options.width = contentBoxSize.inlineSize;
-            } else {
-              options.width = entry.contentRect.width;
-            }
-          }
-          chart.draw(datatable, options);
-        });
-    let chart,
-        datatable,
-        options;
-    self.variables({label: "string", value:"number", style: "string"}, {observed});
-    if(style) target.setAttribute("style",style);
-    self.setValue = (newValue) => {
-        if(datatable) {
-            datatable.setValue(0,1,newValue);
-            chart.draw(datatable, options);
-        }
-    };
-    self.init = () => {
-        options = { };
-        chart = new google.visualization.Gauge(target);
-        datatable = google.visualization.arrayToDataTable([["Label","Value"],[label,value]]);
-        addEventListener("change",({target,value}) => {
-            if (target === "label") {
-                datatable.setValue(0,0,value);
-            } else if(target ==="value") {
-                self.setValue(value);
-            } else if(target === "style") {
-                target.setAttribute("style",value);
-            }
-            chart.draw(datatable, options);
-        });
-        resizeObserver.observe(target);
-        self.removeAttribute("hidden");
-    };
-    self.addEventListener("connected", ({target}) => {
-        google.charts.load("current", {"packages": ["corechart","gauge"]});
-        google.charts.setOnLoadCallback(self.init);
-    });
-</script>
-</body>
-</html>

package/components/timeline.html

@@ -1,81 +0,0 @@
-<html>
-<head>
-    <meta charset="UTF-8">
-    <title>Lightview:Timeline</title>
-</head>
-<body hidden>
-<div id="target"></div>
-<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
-<script src="https://unpkg.com/json5@^2.0.0/dist/index.min.js"></script>
-<script type="lightview/module">
-debugger;
-    let table = JSON5.parse(self.firstChild.textContent.trim()),
-        chart,
-        datatable,
-        options = {};
-    const target = self.getElementById("target"),
-        resizeObserver = new ResizeObserver(entries => {
-          for (let entry of entries) {
-            if(entry.contentBoxSize) {
-              // Firefox implements `contentBoxSize` as a single content rect, rather than an array
-              const contentBoxSize = Array.isArray(entry.contentBoxSize) ? entry.contentBoxSize[0] : entry.contentBoxSize;
-              options.width = contentBoxSize.inlineSize;
-            } else {
-              options.width = entry.contentRect.width;
-            }
-          }
-          chart.draw(datatable, options);
-        }),
-        callback = (textNode, oldValue, newValue) => {
-            datatable = new google.visualization.DataTable();
-            try {
-                table = table || JSON5.parse(newValue.trim());
-                datatable = google.visualization.arrayToDataTable(table);
-                chart.draw(datatable, options);
-                table = null;
-            } catch (e) {
-                target.innerText = e + newValue;
-            }
-        };
-    self.firstChild.innerText = "Loading ...";
-    self.variables({type: "string", title: "string", style: "string"}, {observed});
-    if(style) target.setAttribute("style",style);
-    self.addRow = (row) => {
-        datatable.addRows([row]);
-        chart.draw(datatable, options);
-    };
-    self.setValue = (row,col,value) => {
-        if(datatable) {
-            datatable.setValue(row,col,value);
-            chart.draw(datatable, options);
-        }
-    };
-    self.setOptions = (newOptions) => {
-      Object.assign(options,newOptions);
-    };
-    self.init = () => {
-        if(!options.title && title) options.title = title;
-        chart = new google.visualization.Timeline(target);
-        addEventListener("change",({target,value}) => {
-            if(target === "title") {
-                options.title = value;
-            } else if(target === "style") {
-                target.setAttribute("style",value);
-            }
-            chart.draw(datatable, options);
-        });
-
-        const node = self.firstChild;
-        callback(node, node.textContent, node.textContent);
-        // Will be used by the Lightview global observer
-        node.characterDataMutationCallback = callback;
-        // resized charts if window resizes
-        resizeObserver.observe(target);
-    };
-    self.addEventListener("connected", ({target}) => {
-        google.charts.load("current", {"packages": ["timeline"]});
-        google.charts.setOnLoadCallback(self.init);
-    });
-</script>
-</body>
-</html>

package/examples/chart.html

@@ -1,66 +0,0 @@
-<!DOCTYPE html>
-<head>
-    <title>Chart</title>
-    <link href="../components/chart.html" rel="module">
-    <script src="../lightview.js"></script>
-</head>
-<body>
-<l-chart id="myPieChart" style="max-width:750px" type="PieChart" title="How Much Pizza I Ate Last Night">
-    // Chart will resize automatically to a max-width of 750px and repaint on type and title changes.
-    // The component DOM element also exposes a method `el.addRow(row:array)` to dynamically add data
-    // And, `el.init()` will re-render from the initial data and current attributes.
-    [
-        ["Topping","Slices"], // column headings
-        ["Mushrooms", 3],  // remaining rows are data
-        ["Onions", 1],
-        ["Olives", 1],
-        ["Zucchini", 1],
-        ["Pepperoni", 2]
-    ]
-</l-chart>
-<l-chart id="myBarChart" style="max-width:750px" type="BarChart" title="How Much Pizza I Ate Last Night">
-    [
-        ["Topping","Slices",{ role: "style" },{ role: "annotation" }], // column headings, annotation does not apply to Pie
-        ["Mushrooms", 3, "brown","M"],  // remaining rows are data
-        ["Onions", 1, "yellow","On"],
-        ["Olives", 1, "black", "Ol"],
-        ["Zucchini", 1,  "green","Z"],
-        ["Pepperoni", 2, "red","P"]
-    ]
-</l-chart>
-<l-chart id="myColumnChart" style="max-width:750px" type="ColumnChart" title="How Much Pizza I Ate Last Night">
-    [
-    ["Topping","Slices",{ role: "style" },{ role: "annotation" }], // column headings, style does not apply to Pie or Bar
-    ["Mushrooms", 3, "brown","Yum"],  // remaining rows are data
-    ["Onions", 1, "yellow","Sweet"],
-    ["Olives", 1, "black","So, so"],
-    ["Zucchini", 1, "green","Ick!"],
-    ["Pepperoni", 2, "red","Spicy!"]
-    ]
-</l-chart>
-<l-chart id="myGauges" style="max-width:750px" type="Gauge" title="Laptop">
-    [
-    ['Label', 'Value'], // gauge will always take two columns, Label and Value
-    ['Memory', 80],
-    ['CPU', 55],
-    ['Network', 68]
-    ]
-    // there is also a separate l-gauge component that shows just one gauge
-    // and is driven entirely by attributes
-</l-chart>
-<script>
-    const gauges = document.getElementById("myGauges");
-    gauges.addEventListener("connected",() => {
-        setInterval(function() {
-            gauges.setValue(0, 1, 40 + Math.round(60 * Math.random()));
-        }, 6000);
-        setInterval(function() {
-            gauges.setValue(1, 1, 40 + Math.round(60 * Math.random()));
-        }, 5000);
-        setInterval(function() {
-            gauges.setValue(2, 1, 60 + Math.round(40 * Math.random()));
-        }, 7500);
-    })
-</script>
-</body>
-</html>

package/examples/counter.html

@@ -1,24 +0,0 @@
-<head>
-    <title>Lightview:Examples:Counter</title>
-    <script src="../lightview.js?as=x-body"></script>
-</head>
-
-<body>
-<p>
-    <button l-on:click="${bump}">Click count:${count}</button>
-</p>
-
-<script type="lightview/module">
-    self.variables({count: "number",}, {reactive,set:0});
-    self.bump = () => count++;
-</script>
-
-<style>
-    button {
-        margin: 20px;
-        background: gray
-    }
-</style>
-</body>
-
-</html>