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

lightview 1.7.1-b → 1.8.1-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 (49) hide show

package/README.md +2 -2
package/components/chart/chart.html +7 -5
package/components/chart/example.html +3 -5
package/components/chart.html +67 -65
package/components/components.js +29 -9
package/components/gantt/example.html +2 -7
package/components/gantt/gantt.html +33 -26
package/components/gauge/example.html +1 -1
package/components/gauge/gauge.html +20 -0
package/components/gauge.html +47 -44
package/components/orgchart/example.html +25 -0
package/components/orgchart/orgchart.html +41 -0
package/components/repl/code-editor.html +64 -0
package/components/repl/editor.html +37 -0
package/components/repl/editorjs-inline-tool/index.js +3 -0
package/components/repl/editorjs-inline-tool/inline-tools.js +28 -0
package/components/repl/editorjs-inline-tool/tool.js +175 -0
package/components/repl/repl-with-wysiwyg.html +355 -0
package/components/repl/repl.html +345 -0
package/components/repl/sup.js +44 -0
package/components/repl/wysiwyg-repl.html +258 -0
package/components/timeline/example.html +33 -0
package/components/timeline/timeline.html +44 -0
package/examples/anchor.html +11 -0
package/examples/chart.html +22 -54
package/examples/counter.html +5 -3
package/examples/counter2.html +26 -0
package/examples/directives.html +19 -17
package/examples/forgeinform.html +45 -43
package/examples/form.html +22 -20
package/examples/gauge.html +2 -0
package/examples/invalid-template-literals.html +5 -3
package/examples/message.html +10 -4
package/examples/nested.html +1 -1
package/examples/object-bound-form.html +12 -10
package/examples/remote.html +17 -15
package/examples/shared.html +41 -0
package/examples/xor.html +21 -19
package/lightview.js +138 -90
package/package.json +7 -2
package/sites/client.html +48 -0
package/sites/index.html +247 -0
package/test/basic.html +17 -16
package/test/basic.test.mjs +0 -10
package/test/extended.html +17 -20
package/types.js +10 -1
package/unsplash.key +1 -0
package/components/gauge/guage.html +0 -19
package/examples/duration.html +0 -279

package/components/timeline/example.html ADDED Viewed

@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Lightview:Component:Timeline:Example</title>
+    <link href="./timeline.html" rel="module">
+    <script src="../../lightview.js"></script>
+</head>
+<body>
+<l-timeline title="Presidents">
+    {
+    options: { showRowLabels: false },
+    rows: [
+        [ '1', 'George Washington','1789-03-30', '1797-2-04' ],
+        [ '2', 'John Adams',        '1797-02-04',  '1801-02-04' ],
+        [ '3', 'Thomas Jefferson',  '1801-02-04',  '1809-02-04']
+    ]
+    }
+</l-timeline>
+<l-timeline title="Presidents and Vice Presidents">
+    {
+    options: {  },
+    rows: [
+        [ 'President', 'George Washington','1789-03-30', '1797-2-04' ],
+        [ 'President', 'John Adams',        '1797-02-04',  '1801-02-04' ],
+        [ 'President', 'Thomas Jefferson',  '1801-02-04',  '1809-02-04'],
+        [ 'Vice President', 'John Adams','1789-03-21', '1797-02-04'],
+        [ 'Vice President', 'Thomas Jefferson','1797-02-04', '1801-02-04'],
+        [ 'Vice President', 'Aaron Burr','1801-02-04', '1805-02-04']
+    ]
+    }
+</l-timeline>
+</body>
+</html>

package/components/timeline/timeline.html ADDED Viewed

@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Lightview:Component:Timeline</title>
+</head>
+<body>
+<div id="target"></div>
+<script src="https://unpkg.com/json5@^2.0.0/dist/index.min.js"></script>
+<script id="lightview">
+    (document.currentComponent||(document.currentComponent=document.body)).mount = async function() {
+        const {chart} = await import(new URL("../components.js", window.location.href).href);
+        chart(self, {
+            packages: ["timeline"],
+            columns: [
+                {id: "RowLabel", type: "string"},
+                {id: "BarLabel", type: "string"},
+                {id: "Start", type: "date"},
+                {id: "End", type: "date"}
+            ],
+            type: "Timeline",
+            optionsTransform(options) {
+                options = {...options};
+                if ("showRowLabels" in options) {
+                    options.timeline = {showRowLabels: options.showRowLabels};
+                }
+                return options;
+            },
+            rowTransform(row, i) {
+                return row.map((item, index) => {
+                    if (item && (index === 2 || index === 3)) {
+                        const date = new Date(item);
+                        if (!date || typeof (date) !== "object" || !(date instanceof Date)) {
+                            throw new TypeError(`row:${i} col:${index} is not a date`);
+                        }
+                        return date;
+                    }
+                    return item;
+                })
+            }
+        });
+    }
+</script>
+</body>
+</html>

package/examples/anchor.html ADDED Viewed

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Anchors</title>
+    <script src="../lightview.js?as=x-body"></script>
+</head>
+<body>
+<p><a href="./counter.html" target="#mytarget" crossorigin="use-credentials">Show Counter</a></p>
+<div id="mytarget">To Be Replaced</div>
+</body>
+</html>

package/examples/chart.html CHANGED Viewed

@@ -1,66 +1,34 @@
 <!DOCTYPE html>
 <head>
     <title>Chart</title>
-    <link href="../components/chart.html" rel="module">
+    <link href="../components/chart/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 id="myChart" type="PieChart" style="height:500px;" title="How Much Pizza I Ate Last Night" hidden l-unhide>
+    {
+    options: {
+    },
+    columns: [
+    {label: "Topping", type: "string"},
+    {label: "Slices", type: "number"}
+    ],
+    rows: [
+    ["Mushrooms", 3],
+    ["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);
-    })
+    const el = document.getElementById("myChart");
+    el.addEventListener("mounted",() => {
+        chart = el.chart;
+        chart.addRow(["Anchovies",1]);
+    });
 </script>
 </body>
 </html>

package/examples/counter.html CHANGED Viewed

@@ -8,9 +8,11 @@
     <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 id="lightview">
+    (document.currentComponent||(document.currentComponent=document.body)).mount = async function() {
+        self.variables({count: "number",}, {reactive, set: 0});
+        self.bump = () => count++;
+    }
 </script>
 <style>

package/examples/counter2.html ADDED Viewed

@@ -0,0 +1,26 @@
+<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 id="lightview">
+    (document.currentComponent||(document.currentComponent=document.body)).mount = async function() {
+        this.variables({count: "number",}, {reactive,set:0});
+        this.bump = () => count++;
+    }
+</script>
+<style>
+    button {
+        margin: 20px;
+        background: gray
+    }
+</style>
+</body>
+</html>

package/examples/directives.html CHANGED Viewed

@@ -50,26 +50,28 @@
     Variable Values
     <p id="variables"></p>
 </div>
-<script type="lightview/module">
-self.variables({on:"boolean",options:Array},{reactive});
+<script id="lightview">
+    (document.currentComponent||(document.currentComponent=document.body)).mount = async function() {
+        self.variables({on: "boolean", options: Array}, {reactive});
-on = true;
-options = ["lettuce"];
+        on = true;
+        options = ["lettuce"];
 // 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);
-    });
-};
-variableValues();
-addEventListener("change",()=> {
-    variableValues()
-});
+        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);
+            });
+        };
+        variableValues();
+        addEventListener("change", () => {
+            variableValues()
+        });
+    }
 </script>
 </body>

package/examples/forgeinform.html CHANGED Viewed

@@ -46,50 +46,52 @@
     </p>
 </div>
-<script type="lightview/module">
-    const orders = [];
-    self.variables({
-      checked: "boolean"
-    }, {
-      reactive
-    });
-    self.variables({
-      color: "string",
-      hamburger: Array
-    }, {
-      reactive, exported
-    });
-    self.addEventListener("connected",() => {
-        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 = "Previous Orders";
-      el.appendChild(line);
-      orders.forEach((order) => {
-         const line = document.createElement("div");
-            line.innerText = JSON.stringify(order);
+<script id="lightview">
+    (document.currentComponent||(document.currentComponent=document.body)).mount = async function() {
+        const orders = [];
+        self.variables({
+            checked: "boolean"
+        }, {
+            reactive
+        });
+        self.variables({
+            color: "string",
+            hamburger: Array
+        }, {
+            reactive, exported
+        });
+        self.addEventListener("connected", () => {
+            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 = "Previous Orders";
             el.appendChild(line);
-      });
-    };
-    variableValues();
-    addEventListener("change", () => {
-      variableValues()
-    });
+            orders.forEach((order) => {
+                const line = document.createElement("div");
+                line.innerText = JSON.stringify(order);
+                el.appendChild(line);
+            });
+        };
+        variableValues();
+        addEventListener("change", () => {
+            variableValues()
+        });
+    }
   </script>
 </body>

package/examples/form.html CHANGED Viewed

@@ -33,26 +33,28 @@
     </p>
 </div>
-<script type="lightview/module">
-    self.variables({color:"string"},{reactive});
-    addEventListener("change", () => {
-      variableValues()
-    });
-    self.addEventListener("connected",() => {
-        color = "yellow";
-        checked = true;
-        hamburger = ["cheese"];
-    });
-    // 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);
-      });
-    };
+<script id="lightview">
+    (document.currentComponent||(document.currentComponent=document.body)).mount = async function() {
+        self.variables({color: "string"}, {reactive});
+        addEventListener("change", () => {
+            variableValues()
+        });
+        self.addEventListener("connected", () => {
+            color = "yellow";
+            checked = true;
+            hamburger = ["cheese"];
+        });
+        // 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);
+            });
+        };
+    }
   </script>
 </body>

package/examples/gauge.html CHANGED Viewed

@@ -3,6 +3,8 @@
     <title>Chart</title>
     <link href="../components/gauge.html" rel="module">
     <script src="../lightview.js"></script>
+    <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>
 </head>
 <body>
 <l-gauge id="myGauge" style="max-width:750px" type="Gauge" label="Laptop" value="50"></l-gauge>

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

@@ -26,9 +26,11 @@
     </p>
 </div>
-<script type="lightview/module">
-    self.variables({count: "number",test:"number"}, {reactive,set:0});
-    self.bump = () => count++;
+<script id="lightview">
+    (document.currentComponent||(document.currentComponent=document.body)).mount = async function() {
+        self.variables({count: "number", test: "number"}, {reactive, set: 0});
+        self.bump = () => count++;
+    }
 </script>
 <style>

package/examples/message.html CHANGED Viewed

@@ -1,12 +1,18 @@
 <html>
 <head>
     <meta charset="UTF-8">
-    <title>Message</title>
+    <title>Lightview:Examples:Message</title>
+    <script src="../lightview2.js?as=x-body"></script>
 </head>
-<body>
+<body value="Hello!">
 ${value}
-<script type="lightview/module">
-    self.variables({value:"string"},{imported});
+<script id="lightview">
+    /*(document.currentComponent||=document.body).mount = function() {
+        this.variables({value:"string"},{imported});
+    }*/
+    (document.currentComponent||(document.currentComponent=document.body)).mount = function() {
+        this.variables({value:"string"},{imported});
+    }
 </script>
 </body>
 </html>

package/examples/nested.html CHANGED Viewed

@@ -2,7 +2,7 @@
 <head>
     <title>Nested</title>
     <link href="./message.html" rel="module">
-    <script src="../lightview.js?as=x-body"></script>
+    <script src="../lightview2.js?as=x-body"></script>
 </head>
 <body>
 <l-message value="Hello One"></l-message>

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

@@ -3,9 +3,8 @@
 <head>
     <title>Form</title>
-    <script src="../lightview.js?as=x-body"></script>
+    <script src="https://000686818.codepen.website/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>
@@ -18,15 +17,18 @@
     </p>
 </form>
-<script type="lightview/module">
-    self.addEventListener("connected",() => {
-        hamburger.options = ["cheese"];
-        observe(() => {
-             const el = self.getElementById("variables");
-             el.innerText = JSON.stringify(hamburger);
+<script id="lightview">
+    (document.currentComponent||(document.currentComponent=document.body)).mount = async function() {
+        self.addEventListener("mounted",() => {
+            hamburger.options = ["cheese"];
+            // demo instrumentation
+            observe(() => {
+                const el = self.getElementById("variables");
+                el.innerText = JSON.stringify(hamburger);
+            });
         });
-    });
-  </script>
+    }
+</script>
 </body>
 </html>

package/examples/remote.html CHANGED Viewed

@@ -6,27 +6,29 @@
   <script src="../lightview.js?as=x-body"></script>
 </head>
 <body>
+<p>You must run the file "remote-server.js" for this example to work.</p>
+<input id="myRemote" type="text" value="${JSON.stringify(myRemote)}" size="${JSON.stringify(myRemote).length}"><br>
+<button l-on:click="${patch}">Patch</button><br>
+<button l-on:click="${replace}">Replace</button>
-<input id="myRemote" type=text" value="${JSON.stringify(myRemote)}" size="${JSON.stringify(myRemote).length}"><br>
-<button l-on:click="patch">Patch</button><br>
-<button l-on:click="replace">Replace</button>
+<script id="lightview">
+    (document.currentComponent||(document.currentComponent=document.body)).mount = async function() {
+        const {remote} = await import("../types.js");
-<script type="lightview/module">
-const {remote} = await import("../types.js");
+        self.variables({myRemote: "object"}, {reactive, remote: remote("http://localhost:8000/remote.json")});
-self.variables({myRemote:"object"},{reactive,remote:remote("http://localhost:8000/remote.json")});
+        await myRemote; // must await remotes before the first time they are used, e.g. before HTML is rendered
-await myRemote; // must await remotes before the first time they are used, e.g. before HTML is rendered
+        self.patch = () => {
+            const json = JSON.parse(document.body.getElementById("myRemote").value);
+            Object.assign(myRemote, json);
+        };
-self.patch = () => {
-  const json = JSON.parse(document.body.getElementById("myRemote").value);
-  Object.assign(myRemote,json);
-};
-self.replace = () => {
-  myRemote = JSON.parse(document.body.getElementById("myRemote").value);
-};
+        self.replace = () => {
+            myRemote = JSON.parse(document.body.getElementById("myRemote").value);
+        };
+    }
 </script>
 </body>
 </html>

package/examples/shared.html ADDED Viewed

@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Form</title>
+    <template id="myform">
+        ${formname}: <form>
+        <input type="text" value="${name}">
+    </form>
+        <script id="lightview">
+            (document.currentComponent||(document.currentComponent=document.body)).mount = async function() {
+                self.variables({
+                    name: "string"
+                }, {
+                    shared,
+                    reactive
+                });
+                self.variables({
+                    formname: "string"
+                }, {
+                    imported
+                });
+            }
+    </script>
+    </template>
+    <script src="https://000686818.codepen.website/lightview.js"></script>
+    <script>
+        Lightview.createComponent("x-form", document.getElementById("myform"))
+    </script>
+</head>
+<body>
+<div style="margin:20px">
+    <p>Changing one field will change the other. Try it.</p>
+    <x-form formname="Form1"></x-form>
+    <x-form formname="Form2"></x-form>
+</div>
+</body>
+</html>