npm - lightview - Versions diffs - 1.6.5-b → 1.7.2-b - Mend

lightview 1.6.5-b → 1.7.2-b

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 (28) hide show

package/README.md +3 -3
package/components/chart/chart.html +15 -0
package/components/chart/example.html +32 -0
package/components/chart.html +22 -18
package/components/components.js +93 -0
package/components/gantt/example.html +27 -0
package/components/gantt/gantt.html +34 -0
package/components/gauge/example.html +28 -0
package/components/gauge/guage.html +19 -0
package/components/timeline.html +81 -0
package/examples/counter.html +1 -1
package/examples/foreign.html +27 -13
package/examples/forgeinform.html +29 -8
package/examples/form.html +1 -1
package/examples/invalid-template-literals.html +1 -4
package/examples/medium/remote.html +2 -1
package/examples/message.html +0 -1
package/examples/object-bound-form.html +32 -0
package/examples/remote.json +1 -1
package/examples/timeline.html +21 -0
package/examples/todo.html +38 -0
package/examples/types.html +3 -2
package/lightview.js +376 -243
package/package.json +1 -1
package/test/basic.html +8 -4
package/test/extended.html +10 -7
package/test/extended.test.mjs +182 -4
package/types.js +98 -52

package/README.md CHANGED Viewed

@@ -1,8 +1,8 @@
-# lightview v1.6.5b (BETA)
+# lightview v1.7.2b (BETA)
 Small, simple, powerful web UI and micro front end creation ...
-Great ideas from Svelte, React, Vue and Riot combined into one small tool: < 7K (minified/gzipped).
+Great ideas from Svelte, React, Vue and Riot combined into one small tool: < 7.5K (minified/gzipped).
 See the docs and examples at [https://lightview.dev](https://lightview.dev).
@@ -36,7 +36,7 @@ Meanwhile, here is what you get:
 1) SPA, and MPA friendly ... somewhat SEO friendly and short steps away from fully SEO friendly.
-1) A [component library](https://lightview.dev/components) including charts and gauges.
+1) A [component library](https://lightview.dev/components) including charts and gauges that work in Markdown files.
 1) Lots of live [editable examples](https://lightview.dev/#examples).

package/components/chart/chart.html ADDED Viewed

@@ -0,0 +1,15 @@
+<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/example.html ADDED Viewed

@@ -0,0 +1,32 @@
+<!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("myChart");
+    el.addEventListener("mounted",() => {
+        chart = el.chart;
+        chart.addRow(["Anchovies",1]);
+    });
+</script>
+</body>
+</html>

package/components/chart.html CHANGED Viewed

@@ -8,6 +8,10 @@
 <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) {
@@ -20,10 +24,19 @@
             }
           }
           chart.draw(datatable, options);
-        });
-    let chart,
-        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) => {
@@ -40,21 +53,8 @@
       Object.assign(options,newOptions);
     };
     self.init = () => {
-        const node = self.firstChild,
-            callback = (textNode, oldValue, newValue) => {
-                datatable = new google.visualization.DataTable();
-                try {
-                    const table = JSON5.parse(newValue.trim());
-                    datatable = google.visualization.arrayToDataTable(table);
-                    chart.draw(datatable, options);
-                } catch (e) {
-                    target.innerText = e + newValue;
-                }
-            };
         if(!options.title && title) options.title = title;
         chart = new google.visualization[type](target);
-        node.characterDataMutationCallback = callback;
-        callback(node, node.textContent, node.textContent);
         addEventListener("change",({target,value}) => {
             if (target === "type") {
                 chart = new google.visualization[type](target);
@@ -65,8 +65,12 @@
             }
             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.removeAttribute("hidden");
     };
     self.addEventListener("connected", ({target}) => {
         google.charts.load("current", {"packages": ["corechart","gauge"]});

package/components/components.js ADDED Viewed

@@ -0,0 +1,93 @@
+const chart = (self,{packages = ["corechart"],options={},columns=[],rows=[],type,rowTransform}={}) => {
+    options = {...options};
+    columns = [...columns];
+    let chart,
+        datatable;
+    const chartProxy = (chart) => {
+        const extras = {
+            setOption(name,value) {
+                options[name] = value;
+                chart.draw(datatable, options);
+            },
+            setOptions(newOptions) {
+                options = {...newOptions};
+                chart.draw(datatable, options);
+            }
+        };
+        return new Proxy(chart,{
+            get(target,property) {
+                let value = extras[property];
+                if(value!==undefined) return value;
+                value = target[property];
+                if(value!==undefined) return Reflect.get(target,property);
+                value = datatable[property];
+                if(typeof(value)==="function") {
+                    if(["add","insert","remove","set"].some((prefix) => property.startsWith(prefix))) {
+                        return (...args) => { value.call(datatable,...args); chart.draw(datatable,options); };
+                    };
+                    return value.bind(datatable);
+                };
+            }
+        });
+    };
+    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 {
+                const config = JSON5.parse(newValue.trim());
+                if(config.options) options=config.options;
+                if(config.columns) columns=config.columns;
+                if(config.rows) rows=config.rows;
+                columns.forEach((column) => {
+                    datatable.addColumn(column);
+                });
+                if(rowTransform) rows = rows.map((row) => rowTransform(row));
+                datatable.addRows(rows);
+                chart.draw(datatable, options);
+            } catch (e) {
+                target.innerText = e + newValue;
+            }
+        };
+    self.firstChild.innerText = "Loading ...";
+    self.variables({type: "string", title: "string", style: "string"}, {observed:true});
+    if(self.hasAttribute("style")) target.setAttribute("style",self.getAttribute("style"));
+    self.init = () => {
+        if(!options.title && self.hasAttribute("title")) options.title = self.getAttribute("title");
+        self.chart = chart = chartProxy(new google.visualization[type||self.getAttribute("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.dispatchEvent(new Event("mounted"));
+    };
+    self.addEventListener("connected", ({target}) => {
+        google.charts.load("current", {"packages":packages});
+        google.charts.setOnLoadCallback(self.init);
+    });
+}
+export {chart};

package/components/gantt/example.html ADDED Viewed

@@ -0,0 +1,27 @@
+<!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 ADDED Viewed

@@ -0,0 +1,34 @@
+<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 ADDED Viewed

@@ -0,0 +1,28 @@
+<!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 ADDED Viewed

@@ -0,0 +1,19 @@
+<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/timeline.html ADDED Viewed

@@ -0,0 +1,81 @@
+<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/counter.html CHANGED Viewed

@@ -5,7 +5,7 @@
 <body>
 <p>
-    <button l-on:click="bump">Click count:${count}</button>
+    <button l-on:click="${bump}">Click count:${count}</button>
 </p>
 <script type="lightview/module">

package/examples/foreign.html CHANGED Viewed

@@ -12,24 +12,38 @@
    The component below is loaded from an alternate domain and running in a child iframe.
     The logging console is below the component in this frame.
 </p>
-<iframe id="myframe" src="https://lightview.dev/foreignform.html?id=myframe"></iframe>
+<p>New Order:<span id="orderclip"></span></p>
+<iframe id="myframe"
+        class="l-remote" style="border-width:2px;border-style:dashed;"
+        src="https://lightview.dev/examples/foreignform.html?id=myframe"></iframe>
 <div id="console" style="max-height:250px;scroll:auto"></div>
 <script>
-    const mutationCallback = (mutationsList) => {
-        const console = document.getElementById("console");
-        for (const {target,attributeName,oldValue} of mutationsList) {
-            const line = document.createElement("div"),
-                event = {attributeName,oldValue,value:target.getAttribute(attributeName)};
-            line.innerText = JSON.stringify(event);
-            console.appendChild(line);
-        }
-    };
-    const observer = new MutationObserver(mutationCallback),
-        iframe = document.getElementById("myframe");
-    observer.observe(iframe, { attributes:true, attributeOldValue: true });
+    const iframe = document.getElementById("myframe");
     iframe.addEventListener("DOMContentLoaded",(event) => {
+        // modify the line below, or remove this event listener
+        // based on the needs of your application
         console.log(event);
     });
+    iframe.addEventListener("message",({detail}) => {
+        // modify the lines below, or remove this event listener
+        // based on the needs of your application
+        const orderclip = document.getElementById("orderclip");
+        orderclip.innerText = JSON.stringify(detail);
+    });
+    iframe.addEventListener("attribute.changed",(event) => {
+        const {target,detail} = event,
+            {attributeName,value,oldValue} = detail;
+        event.stopImmediatePropagation();
+        if(target.getAttribute(attributeName)!==oldValue) {
+            // modify the lines below, or remove this event listener
+            // based on the needs of your application
+            const console = document.getElementById("console"),
+                line = document.createElement("div");
+            line.innerText = JSON.stringify(detail);
+            console.appendChild(line);
+        }
+    });
 </script>
 </body>

package/examples/forgeinform.html CHANGED Viewed

@@ -27,7 +27,9 @@
         <option>tomato</option>
         <option>cheese</option>
     </select>
+    <br><button l-on:click="${placeOrder}">Place Order</button>
     </p>
+    Expose: <input type="checkbox" value="${checked}">
     <p l-if="${checked}">
         Now you've done it. You've exposed me.
     </p>
@@ -45,24 +47,43 @@
     </p>
 </div>
 <script type="lightview/module">
+    const orders = [];
+    self.variables({
+      checked: "boolean"
+    }, {
+      reactive
+    });
     self.variables({
       color: "string",
-      checked: "boolean",
       hamburger: Array
     }, {
-      reactive
+      reactive, exported
+    });
+    self.addEventListener("connected",() => {
+        color = "green";
+        checked = true;
+        hamburger = ["lettuce"];
     });
-    color = "green";
-    checked = true;
-    hamburger = ["lettuce"];
+    self.placeOrder = () => {
+        orders.push(hamburger);
+        message = {hamburger};
+    };
     // demo instrumentation
     const variableValues = () => {
       const el = self.getElementById("variables");
       while (el.lastElementChild) el.lastElementChild.remove();
       self.getVariableNames().forEach((name) => {
-        const line = document.createElement("div");
-        line.innerText = `${name} = ${JSON.stringify(self.getVariableValue(name))}`;
-        el.appendChild(line);
+         const line = document.createElement("div");
+         line.innerText = `${name} = ${JSON.stringify(self.getVariableValue(name))}`;
+         el.appendChild(line);
+      });
+      const line = document.createElement("div");
+      line.innerText = "Previous Orders";
+      el.appendChild(line);
+      orders.forEach((order) => {
+         const line = document.createElement("div");
+            line.innerText = JSON.stringify(order);
+            el.appendChild(line);
       });
     };
     variableValues();

package/examples/form.html CHANGED Viewed

@@ -38,7 +38,7 @@
     addEventListener("change", () => {
       variableValues()
     });
-    addEventListener("connected",() => {
+    self.addEventListener("connected",() => {
         color = "yellow";
         checked = true;
         hamburger = ["cheese"];

package/examples/invalid-template-literals.html CHANGED Viewed

@@ -6,7 +6,7 @@
 </head>
 <body>
 <p>
-    <button l-on:click="bump">Click count:${count}</button>
+    <button l-on:click="${bump}">Click count:${count}</button>
 </p>
 <div style="margin:20px">
     <p>
@@ -24,9 +24,6 @@
     <p>
         ${function(){return \${test}})()}
     </p>
-    <p>
-        ${window.alert("ok")}
-    </p>
 </div>
 <script type="lightview/module">

package/examples/medium/remote.html CHANGED Viewed

@@ -15,11 +15,12 @@
 </head>
 <body>
 <!--
-  layout the dashboad using the chart component r-chart
+  layout the dashboard using the chart component r-chart
 -->
 <div style="width:100%;text-align:center">
   <!--
       set the initial value 0 for all components in a relaxed JSON5 configuration data block
+      add the attributes hidden and l-unhide to eliminate flicker and display of Loading ....
   -->
   <r-chart id="dashboard" style="display:inline-block" type="Gauge" title="Server Status">
     [

package/examples/message.html CHANGED Viewed

@@ -6,7 +6,6 @@
 <body>
 ${value}
 <script type="lightview/module">
-debugger;
     self.variables({value:"string"},{imported});
 </script>
 </body>

package/examples/object-bound-form.html ADDED Viewed

@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Form</title>
+    <script src="../lightview.js?as=x-body"></script>
+</head>
+<body>
+<form value="${hamburger}" style="margin:20px;padding:5px;border:1px;border-style:solid;">
+    <div>Hamburger options:</div>
+    <select value="${hamburger.options}" multiple>
+        <option value="lettuce">lettuce</option>
+        <option value="tomato">tomato</option>
+        <option>cheese</option>
+    </select>
+    <p id="variables">
+    </p>
+</form>
+<script type="lightview/module">
+    self.addEventListener("connected",() => {
+        hamburger.options = ["cheese"];
+        observe(() => {
+             const el = self.getElementById("variables");
+             el.innerText = JSON.stringify(hamburger);
+        });
+    });
+  </script>
+</body>
+</html>

package/examples/remote.json CHANGED Viewed

	@@ -1 +1 @@
1	- {"name":"joe","age":30}
1	+ {"name":"joe","age":40}

package/examples/timeline.html ADDED Viewed

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<head>
+    <title>Chart</title>
+    <link href="../components/timeline.html" rel="module">
+    <script src="../lightview.js"></script>
+</head>
+<body>
+<l-timeline 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.
+    [
+        [{ type: 'string', id: 'Position' },{ type: 'string', id: 'Name' },{ type: 'date', id: 'Start' },{ type: 'date', id: 'End' }],
+        [ '1', 'George Washington', '1789-03-30','1797-02-04'] // Date(1789, 3, 30), Date(1797, 2, 4)
+        //[ '2', 'John Adams',        Date(1797, 2, 4),  Date(1801, 2, 4) ],
+        //[ '3', 'Thomas Jefferson',  Date(1801, 2, 4),  Date(1809, 2, 4) ]]);
+    ]
+</l-timeline>
+</body>
+</html>