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

lightview 1.6.4-b → 1.7.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 (32) hide show

package/README.md +2 -2
package/components/chart/chart.html +15 -0
package/components/chart/example.html +34 -0
package/components/chart.html +27 -22
package/components/components.js +93 -0
package/components/gantt/example.html +27 -0
package/components/gantt/gantt.html +35 -0
package/components/gauge/example.html +28 -0
package/components/gauge/guage.html +19 -0
package/components/gauge.html +1 -1
package/components/timeline.html +81 -0
package/examples/chart.html +11 -9
package/examples/counter.html +1 -1
package/examples/duration.html +279 -0
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 +60 -0
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/examples/xor.html +1 -1
package/lightview.js +380 -247
package/package.json +1 -1
package/test/basic.html +9 -5
package/test/extended.html +10 -7
package/test/extended.test.mjs +182 -4
package/types.js +116 -70

package/examples/duration.html ADDED Viewed

@@ -0,0 +1,279 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Lightview:Examples:Duration timewave timeview</title>
+</head>
+<body>
+<script>
+    const isDate = (value) => value && typeof(value)==="object" && value instanceof Date;
+    const durationMilliseconds = {
+        ms: 1,
+        s: 1000,
+        m: 1000 * 60,
+        h: 1000 * 60 * 60,
+        d: 1000 * 60 * 60 * 24,
+        w: 1000 * 60 * 60 * 24 * 7,
+        mo: 1000 * 60 * 60 * 2 * 365.2424177, // (1000 * 60 * 60 * 24 * 365.2424177)/12
+        q: 1000 * 60 * 60 * 6 * 365.2424177, // (1000 * 60 * 60 * 24 * 365.2424177)/4
+        y: 1000 * 60 * 60 * 24 * 365.2424177
+    };
+    const dateMath = {
+        y(date,y) {
+            date.setYear(date.getYear()+y);
+        },
+        q(date,q) {
+            const newmonth = (q * 3) + date.getMonth();
+            date.setMonth(newmonth>11 ? newmonth - 12 : newmonth);
+        },
+        mo(date,mo) {
+            const newmonth = mo + date.getMonth();
+            date.setMonth(newmonth>11 ? newmonth - 12 : newmonth);
+        },
+        w(date,w) {
+            const dayofyear = Math.floor((date - new Date(date.getFullYear(), 0, 0)) / durationMilliseconds["d"]),
+                newdayofyear = dayofyear + (w * 7),
+                newtime = date.getTime() + (newdayofyear + durationMilliseconds["d"])
+            date.setTime(newtime);
+        },
+        d(date,d) {
+            const dayofyear = Math.floor((date - new Date(date.getFullYear(), 0, 0)) / durationMilliseconds["d"]),
+                newdayofyear = dayofyear + d,
+                newtime = date.getTime() + (newdayofyear + durationMilliseconds["d"])
+            date.setTime(newtime);
+        },
+        h(date,h) {
+            const newhour = h + date.getHours();
+            date.setHours(newhour>23 ? 24-newhour : newhour);
+        },
+        m(date,m) {
+            const newminutes = m + date.getMinutes();
+            date.setMinutes(newminutes>59 ? 60-newminutes : newminutes);
+        },
+        s(date,s) {
+            const newseconds = s + date.getSeconds();
+            date.setSeconds(newseconds>59 ? 60-newseconds : newseconds);
+        },
+        ms(date,ms) {
+            const newmseconds = ms + date.getMilliseconds()
+            date.setMilliseconds(newmseconds>999 ? 1000-newmseconds : newmseconds);
+        }
+    }
+    const parseDuration = (value) => {
+        const type = typeof(value);
+        if(value && type==="object" && value instanceof D) return value.valueOf();
+        if(type==="number") return value;
+        if(type==="string") {
+            const parts = value.split(" ");
+            let ms = 0;
+            for(const part of parts) {
+                const num = parseFloat(part),
+                    suffix = part.substring((num+"").length);
+                if(typeof(num)==="number" && !isNaN(num) && suffix in durationMilliseconds) {
+                    ms += durationMilliseconds[suffix] * num;
+                } else {
+                    throw new TypeError(`${part} in ${value} is not a valid duration`)
+                }
+            }
+            return ms;
+        }
+        if(isDate(value)) return value.getTime();
+        return null;
+    };
+    function Period(start,end) {
+        if(!this || !(this instanceof Period)) return new Period(start,end);
+        Object.defineProperty(this,"start",{
+            set(value) {
+                if (!value || typeof (value) !== "object" || !(value instanceof Date)) throw new TypeError(`Period boundary must be a Date`);
+                start = value;
+            }
+        });
+        Object.defineProperty(this,"end",{
+            set(value) {
+                if (!value || typeof (value) !== "object" || !(value instanceof Date)) throw new TypeError(`Period boundary must be a Date`);
+                end = value;
+            }
+        });
+        Object.defineProperty(this,"valueOf",{ value:() => {
+            const t1 = start.getTime(),
+                t2 = end.getTime();
+            return D(Math.max(t1,t2)-Math.min(t1,t2))
+        }});
+        Object.defineProperty(this,"length",{get() { return this.valueOf();}});
+        this.start = start;
+        this.end = end;
+    }
+    function Clock(date=new Date(),{tz,hz}={}) {
+        if(typeof(date)==="number") date = new Date(date);
+        if(!date || typeof(date)!=="object" || !(date instanceof Date)) throw new TypeError(`Clock() expects a Date not ${JSON.stringify(date)}`);
+        let tzoffset = now.getTimezoneOffset(),
+            diff = 0;
+        if(tz) {
+            const thereLocaleStr = date.toLocaleString('en-US', {timeZone: tz}),
+                thereDate = new Date(thereLocaleStr);
+            diff = thereDate.getTime() - date.getTime();
+            tzoffset = Math.round(tzoffset - (diff /  (1000 * 60)));
+        } else {
+            tzoffset = date.getTimezoneOffset();
+        }
+        if(hz) {
+            if(hz>60) console.warn(`Clock set to run faster than ${hz}hz. Excess CPU load beyond typical DOM refresh rate.`);
+            const warp = date.getTime() - Date.now();
+            setInterval(() => {
+                date = new Date(Date.now() + warp);
+            },1000/Math.abs(hz))
+        }
+        const extensions = {
+            plus(duration,times=1) {
+                if(typeof(duration)==="number") duration = D(duration);
+                if(!D.is(duration)) throw new TypeError(`${JSON.stringify(duration)} is not a duration`);
+                const parts = duration.toJSON().split(" "),
+                    result = new Date(date);
+                Object.entries(dateMath).forEach(([key,math]) => {
+                    parts.some((part) => {
+                        if(part.endsWith(key)) {
+                            math(result,parseFloat(part)*times);
+                            return true;
+                        }
+                    })
+                });
+                return new Clock(result,{tz},true);
+            },
+            minus(duration) {
+                this.plus(duration,-1);
+            },
+            clone({tz,hz}={}) {
+                const thereDate = new Clock(new Date(),{tz}),
+                    thereOffset = thereDate.getTimezoneOffset(),
+                    offset = tzoffset - thereOffset,
+                    newDate = new Date(date.getTime() + offset * 1000 * 60)
+                return new Clock(newDate,{tz,hz});
+            },
+            getTimezoneOffset() {
+                return tzoffset;
+            },
+            toString() {
+                const string = date.toString(),
+                    offset = tzoffset / 60,
+                    fraction = offset % 1,
+                    minutes = (1 - fraction) >= .017 ? `${Math.round(fraction * 60)}` : "00", // .017 = 1 minute
+                    hours = `${Math.abs(Math.round(offset))}`,
+                    gmt = `GMT${offset>0 ? "-" : "+"}${hours.padStart(2,"0")}${minutes.padStart(2,"0")}`,
+                    zone = tz ? ` (${tz})` : "";
+                return string.replace(/GMT.*/g,gmt) + zone;
+            }
+        };
+        const proxy = new Proxy(date,{
+            get(target,property) {
+                let value = extensions[property];
+                if(value!==undefined) return value;
+                if(property==="weekDay") {
+                    return target.getDay()+1;
+                }
+                if(property==="dayOfMonth") {
+                    return target.getDate();
+                }
+                if(property==="dayOfYear" || property==="ordinal") {
+                    return Math.floor((target - new Date(target.getFullYear(), 0, 0)) / durationMilliseconds["d"])
+                }
+                if(property==="isInLeapYear") {
+                    const year = date.getFullYear();
+                    return !(year % 4 || !(year % 100) && year % 400);
+                }
+                if(property==="offset") {
+                    return tzoffset;
+                }
+                if(property==="weekOfYear") {
+                    return Math.floor(((target - new Date(target.getFullYear(), 0, 0)) / durationMilliseconds["d"]) / 7)
+                }
+                value = date[property];
+                if(typeof(value)==="function") return value.bind(target);
+                if(typeof(property)==="string" && !property.startsWith("get")) {
+                    let fname = "get" + property[0].toUpperCase() + property.substring(1);
+                    if(typeof(target[fname])==="function") return target[fname]();
+                    fname += "s";
+                    if(typeof(target[fname])==="function") return target[fname]();
+                }
+                return value;
+            }
+        });
+        return proxy;
+    }
+    Clock.min = (...clocks) => {
+        const mintime = clocks.reduce((mintime,clock) => {
+            const t = clock.getTime() + clock.getTimezoneOffset() * 1000 * 60;
+            mintime = Math.min(t,mintime);
+        },Infinity);
+        return clocks.reduce((min,clock) => {
+            if((clock.getTime() + clock.getTimezoneOffset() * 1000 * 60)===mintime) {
+                min.push(clock);
+            }
+            return min;
+        },[])
+    }
+    Clock.max = (...clocks) => {
+        const maxtime = clocks.reduce((mintime,clock) => {
+            const t = clock.getTime() + clock.getTimezoneOffset() * 1000 * 60;
+            mintime = Math.max(t,mintime);
+        },-Infinity);
+        return clocks.reduce((min,clock) => {
+            if((clock.getTime() + clock.getTimezoneOffset() * 1000 * 60)===maxtime) {
+                min.push(clock);
+            }
+            return min;
+        },[])
+    }
+    function D(value,type) {
+        if(!this || !(this instanceof D)) return new D(value,type);
+        let duration = value;
+        if(isDate(duration)) {
+            if(type && type!=="ms") throw new TypeError(`A date can't be used to initialize ${type}`);
+            duration = value.getTime()+"ms";
+        } else if(typeof(duration)==="number") {
+            duration += type||"ms";
+        }
+        const valueof = parseDuration(duration);
+        if(valueof==null) throw new TypeError(`${typeof(value)==="string" ? value : JSON.stringify(value)}${type!==undefined ? type :""} is not a valid duration`);
+        Object.defineProperty(this,"type",{get() { return type; }});
+        Object.defineProperty(this,"valueOf",{value:() => valueof});
+        Object.defineProperty(this,"toJSON",{value:() => duration});
+        return this;
+    }
+    D.is = (value) => value && typeof(value)==="object" && value instanceof D;
+    D.prototype.to = function(type="ms") {
+        const value = this.valueOf();
+        if(type==="Date") {
+            if(this instanceof Period) throw new TypeError(`Cannot convert Period to Date`);
+            return new Date(value);
+        }
+        if(!(type in durationMilliseconds)) throw new TypeError(`${type} is not a valid duration type`);
+        return value / durationMilliseconds[type];
+    }
+    D.prototype.days = function() { return this.to("d"); }
+    D.prototype.Date = function() { return this.to("Date"); }
+    D.Period = Period;
+    Period.is = (value) => value && typeof(value)==="object" && value instanceof Period;
+    Period.prototype = {...D.prototype};
+    delete Period.prototype.Date;
+    console.log(JSON.stringify(D(D("1d") + D("1w") + D("1w 2d")).days()));
+    const now = new Date(),
+        d = D(now) + D("1d"),
+        nyc = Clock(now,{tz:"America/New_York",hz:60}),
+        chicago = nyc.clone({tz:"America/Chicago"}),
+        toronto = nyc.clone({tz:"America/Toronto"}),
+        seattle = toronto.clone({tz:"America/Los_Angeles"});
+    console.log(now,new Date(D(d)),new Date(d));
+    console.log(D(1) instanceof D);
+    console.log(now.getTime(),D(now,"ms").valueOf());
+    console.log(JSON.stringify(Clock(now).plus(D("1mo"))));
+    console.log(Clock(now).weekOfYear,Clock(now).dayOfYear);
+    console.log(nyc.toString());
+    console.log(toronto.toString());
+    console.log(chicago.toString());
+    console.log(seattle.toString());
+    setInterval(() => console.log(nyc.toString()),1000*60);
+</script>
+</body>
+</html>

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 ADDED Viewed

@@ -0,0 +1,60 @@
+<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 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">
+    [
+    ['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/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>

package/examples/todo.html ADDED Viewed

@@ -0,0 +1,38 @@
+<html>
+<head>
+    <title>Lightview:Examples:ToDo</title>
+    <script src="../lightview.js?as=x-body"></script>
+</head>
+<body>
+<input type="text" value="${newItem}" placeholder="new todo item...">
+<button l-on:click="${addToList}">Add</button>
+<div l-for="${todoList}">
+    <input value="${item.status}" type="checkbox">
+    <span class="${item.status ? 'checked' : ''}">${item.text}</span>
+    <span l-on:click="({self}) => self.removeFromList(${index})">X>
+    <br/>
+</div>
+<script type="lightview/module">
+   self.variables(
+        { todoList: Array },
+        {
+            reactive,
+            set: [
+                {text: 'Write my first post', status: true},
+                {text: 'Upload the post to the blog', status: false}
+            ]
+        }
+    );
+    self.addToList = () => {
+        todoList = [...todoList, {text: newItem, status: false}];
+        newItem = '';
+    };
+    self.removeFromList = (index) => {
+        todoList.splice(index, 1);
+    };
+</script>
+<style>
+    .checked { text-decoration: line-through; }
+</style>
+</body>
+</html>

package/examples/types.html CHANGED Viewed

@@ -9,13 +9,14 @@
 <body>
 <div style="margin:20px">
     <p>
-        <button l-on:click="run">Run</button>
-        <button l-on:click="clear">Clear</button>
+        <button l-on:click="${run}">Run</button>
+        <button l-on:click="${clear}">Clear</button>
     </p>
     <p id="console"></p>
 </div>
 <script type="lightview/module">
     const {string} = await import("../types.js");
+        debugger;
     self.run = () => {
         self.variables({
           err: Error,

package/examples/xor.html CHANGED Viewed

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