lightview 1.6.3-b → 1.6.6-b

package/README.md

@@ -1,8 +1,8 @@
-# lightview v1.6.3b (BETA)
+# lightview v1.6.6b (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).
 

package/components/chart.html

@@ -23,7 +23,7 @@
         });
     let chart,
         datatable,
-        options;
+        options = {};
     self.variables({type: "string", title: "string", style: "string"}, {observed});
     if(style) target.setAttribute("style",style);
     self.addRow = (row) => {
@@ -36,6 +36,9 @@
             chart.draw(datatable, options);
         }
     };
+    self.setOptions = (newOptions) => {
+      Object.assign(options,newOptions);
+    };
     self.init = () => {
         const node = self.firstChild,
             callback = (textNode, oldValue, newValue) => {
@@ -48,9 +51,7 @@
                     target.innerText = e + newValue;
                 }
             };
-        options = {
-            title: title
-        };
+        if(!options.title && title) options.title = title;
         chart = new google.visualization[type](target);
         node.characterDataMutationCallback = callback;
         callback(node, node.textContent, node.textContent);
@@ -67,7 +68,7 @@
         resizeObserver.observe(target);
         self.removeAttribute("hidden");
     };
-    addEventListener("connected", ({target}) => {
+    self.addEventListener("connected", ({target}) => {
         google.charts.load("current", {"packages": ["corechart","gauge"]});
         google.charts.setOnLoadCallback(self.init);
     });

package/components/gauge.html

@@ -48,7 +48,7 @@
         resizeObserver.observe(target);
         self.removeAttribute("hidden");
     };
-    addEventListener("connected", ({target}) => {
+    self.addEventListener("connected", ({target}) => {
         google.charts.load("current", {"packages": ["corechart","gauge"]});
         google.charts.setOnLoadCallback(self.init);
     });

package/examples/chart.html

@@ -50,15 +50,17 @@
 </l-chart>
 <script>
     const gauges = document.getElementById("myGauges");
-    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);
+    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/foreign.html

@@ -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

@@ -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

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

package/examples/medium/remote.html

@@ -0,0 +1,59 @@
+<html>
+<head>
+  <title>Lightview:Examples:Medium:Remote</title>
+  <!--
+      for convenience, import the chart component from the Lightview component library
+      alias it to r-chart rather than use the default l-chart
+      we could use any gauge component that exposes methods to update its view
+  -->
+  <link href="../../components/chart.html" rel="module" crossorigin="use-credentials" as="r-chart">
+  <!--
+      load the lightview library, about 7K
+      use the body of this file to create a custom element to replace itself
+  -->
+  <script src="../../lightview.js?as=x-body"></script>
+</head>
+<body>
+<!--
+  layout the dashboad 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
+  -->
+  <r-chart id="dashboard" style="display:inline-block" type="Gauge" title="Server Status" hidden l-unhide>
+    [
+    ['Label', 'Value'], // gauge will always take two columns, Label and Value
+    ['Memory', 0],
+    ['CPU', 0],
+    ['Network', 0]
+    ]
+  </r-chart>
+</div>
+<script type="lightview/module">
+    // use local, normal variables for as much as possible
+    const {remote} = await import("../../types.js"), // load the functional type 'remote`
+      sensorIndex = { // map sensor names to indexes in the dashboard data
+        memory:0,
+        cpu:1,
+        network:2
+      },
+      dashboard = document.body.getElementById("dashboard"),
+      path = "https://lightview.dev/sensors/"; // replace base path for your own implementation
+    // create remote reactive variables for sensors with differing refresh rates (ttl in milliseconds)
+    self.variables({memory:"number"},{remote:remote({ttl:5000,path})});
+    self.variables({cpu:"number"},{remote:remote({ttl:2500,path})});
+    self.variables({network:"number"},{remote:remote({ttl:1500,path})});
+    dashboard.addEventListener("connected",() => {
+       dashboard.setOptions({ // when dashboard component has finished initializing, set more options
+          redFrom: 90, redTo: 100,
+          yellowFrom:75, yellowTo: 90,
+          minorTicks: 5});
+      addEventListener("change",({variableName,value}) => { // execute the magic with a localized eventListener
+         const index = sensorIndex[variableName];
+         dashboard.setValue(index, 1, value);
+      });
+    });
+</script>
+</body>
+</html>

package/examples/remote.json

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

package/examples/types.html

@@ -16,6 +16,7 @@
 </div>
 <script type="lightview/module">
     const {string} = await import("../types.js");
+        debugger;
     self.run = () => {
         self.variables({
           err: Error,

package/examples/xor.html

@@ -28,7 +28,7 @@
       })
     </script>
     </template>
-    <title>Form</title>
+    <title>Lightview:Examples:XOR</title>
     <script src="../lightview.js"></script>
     <script>
         Lightview.createComponent("x-audiostream", document.getElementById("audiostream"))

package/jest.config.json

@@ -9,4 +9,4 @@
   "globalSetup": "jest-environment-puppeteer/setup",
   "globalTeardown": "jest-environment-puppeteer/teardown",
   "testEnvironment": "jest-environment-puppeteer"
-}
+}