lightview 1.6.5-b → 1.6.6-b

package/README.md

@@ -1,8 +1,8 @@
-# lightview v1.6.5b (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/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

@@ -21,7 +21,7 @@
   <!--
       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">
+  <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],

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/lightview.js

@@ -40,14 +40,16 @@ const {observe} = (() => {
     Lightview.sanitizeTemplate = templateSanitizer;
 
     const escaper = document.createElement('textarea');
-
     function escapeHTML(html) {
         escaper.textContent = html;
         return escaper.innerHTML;
     }
-
     Lightview.escapeHTML = escapeHTML;
 
+    const isArrowFunction = (f) => {
+        return typeof(f)==="function" && (f+"").match(/\(*.*\)*\s*=>/g)
+    }
+
     const addListener = (node, eventName, callback) => {
         node.addEventListener(eventName, callback); // just used to make code footprint smaller
     }
@@ -226,7 +228,8 @@ const {observe} = (() => {
                 if(target instanceof Date) {
                     return Reflect.get(target,property);
                 }
-                let {value} = target[property] || {};
+                let {value,get} = target[property] || {};
+                if(get) return target[property].value = get.call(target[property]);
                 if (typeof (value) === "function") return value.bind(target);
                 return value;
             },
@@ -239,7 +242,8 @@ const {observe} = (() => {
                     return true;
                 }
                 const variable = target[property],
-                    {type, value, shared, exported, constant, reactive, remote} = variable;
+                    {value, shared, exported, constant, reactive, remote} = variable;
+                let type = variable.type;
                 if (constant) throw new TypeError(`${property}:${type} is a constant`);
                 if(newValue!=null || type.required) newValue = type.validate ? type.validate(newValue,target[property]) : coerce(newValue,type);
                 const newtype = typeof (newValue),
@@ -254,8 +258,10 @@ const {observe} = (() => {
                         target.postEvent.value("change", event);
                         if (event.defaultPrevented) {
                             target[property].value = value;
-                        } else if(remote && remote.put) {
-                            remote.handleRemote({variable,config:remote.config,reactive},true);
+                        } else if(remote && (variable.reactive || remote.put)) {
+                            remote.handleRemote({variable,config:remote.config},true);
+                        } else if(variable.set) {
+                            variable.set(newValue);
                         }
                     }
                     return true;
@@ -386,7 +392,8 @@ const {observe} = (() => {
             if (variable.type === "any" || variable.type === "unknown") variable.type = type;
             else throw new TypeError(`Attempt to bind <input name="${variableName}" type="${type}"> to variable ${variableName}:${variable.type}`)
         }
-        component.variables({[variableName]: type},{reactive:true});
+        const existing = component.vars[variableName];
+        if(!existing || existing.type!==type || !existing.reactive) component.variables({[variableName]: type},{reactive});
         if(inputtype!=="radio") {
             if(value.includes("${")) input.attributes.value.value = "";
             else component.setVariableValue(variableName, coerce(value,type));
@@ -419,12 +426,88 @@ const {observe} = (() => {
             return value;
         }
     }
+    const observed = () => {
+        return {
+            init({variable, component}) {
+                const name = variable.name;
+                variable.value = component.hasAttribute(name) ? coerce(component.getAttribute(name), variable.type) : variable.value;
+                variable.observed = true;
+                component.observedAttributes.add(variable.name);
+            }
+        }
+    }
+    const reactive = () => {
+        return {
+            init({variable, component}) {
+                variable.reactive = true;
+                component.vars[variable.name] = Reactor(variable);
+            }
+        }
+    }
+    const shared = () => {
+        return {
+            init({variable, component}) {
+                variable.shared = true;
+                /*addEventListener("change", ({variableName, value}) => {
+                    if (variableName===variable.name && component.vars[variableName]?.shared) component.siblings.forEach((instance) => instance.setVariableValue(variableName, value))
+                })*/
+                variable.set = function(newValue) {
+                    if(component.vars[this.name]?.shared) component.siblings.forEach((instance) => instance.setVariableValue(this.name, newValue));
+                }
+            }
+        }
+    }
+    const exported = () => {
+        return {
+            init({variable, component}) {
+                const name = variable.name;
+                variable.exported = true;
+                variable.set = (newValue) => {
+                    if(variable.exported) {
+                        if(newValue==null) {
+                            removeComponentAttribute(component, name);
+                        } else {
+                            newValue = typeof (newValue) === "string" ? newValue : JSON.stringify(newValue);
+                            setComponentAttribute(component, name, newValue);
+                        }
+                    }
+                }
+                variable.set(variable.value);
+                //component.changeListener.targets.add(name);
+            }
+        }
+    }
+    const imported = () => {
+        return {
+            init({variable, component}) {
+                const name = variable.name;
+                variable.imported = true;
+                variable.value = component.hasAttribute(name) ? coerce(component.getAttribute(name), variable.type) : variable.value;
+            }
+        }
+    }
+
     let reserved = {
-        observed: {value: true, constant: true},
-        reactive: {value: true, constant: true},
-        shared: {value: true, constant: true},
-        exported: {value: true, constant: true},
-        imported: {value: true, constant: true}
+        observed: {
+            constant: true,
+            value: observed
+        },
+        reactive: {
+            constant: true,
+            value: reactive
+        },
+        shared: {
+            constant: true,
+            value: shared
+        },
+        exported: {
+            constant: true,
+            value: exported
+        },
+        imported: {
+            constant: true,
+            value: imported
+        }
     };
     const createClass = (domElementNode, {observer, framed}) => {
         const instances = new Set(),
@@ -446,14 +529,14 @@ const {observe} = (() => {
                     shadow = this.attachShadow({mode: "open"}),
                     eventlisteners = {};
                 // needs to be local to the instance
-                Object.defineProperty(this,"changeListener",{value:
+                /*Object.defineProperty(this,"changeListener",{value:
                         function({variableName, value}) {
-                            if (currentComponent.changeListener.targets.has(variableName)) {
+                            //if (currentComponent.changeListener.targets.has(variableName)) {
                                 value = typeof (value) === "string" || !value ? value : JSON.stringify(value);
                                 if (value == null) removeComponentAttribute(currentComponent, variableName);
                                 else setComponentAttribute(currentComponent, variableName, value);
-                            }
-                        }});
+                           // }
+                        }});*/
                 this.vars = {
                     ...reserved,
                     addEventListener: {
@@ -481,9 +564,9 @@ const {observe} = (() => {
                 };
                 this.defaultAttributes = domElementNode.tagName === "TEMPLATE" ? domElementNode.attributes : dom.attributes;
                 this.varsProxy = createVarsProxy(this.vars, this, CustomElement);
-                this.changeListener.targets = new Set();
-                this.varsProxy.addEventListener("change", this.changeListener);
-                if (framed || CustomElement.lightviewFramed) this.variables({message: Object}, {exported: true});
+                //this.changeListener.targets = new Set();
+                //this.varsProxy.addEventListener("change", this.changeListener);
+                if (framed || CustomElement.lightviewFramed) this.variables({message: Object}, {exported});
                 ["getElementById", "querySelector", "querySelectorAll"]
                     .forEach((fname) => {
                         Object.defineProperty(this, fname, {
@@ -514,15 +597,19 @@ const {observe} = (() => {
                 for (const attr of this.defaultAttributes) this.hasAttribute(attr.name) || this.setAttribute(attr.name, attr.value);
                 const scripts = shadow.querySelectorAll("script"),
                     promises = [];
-                // scriptpromises = [];
                 for (const script of [...scripts]) {
                     if (script.attributes.src?.value?.includes("/lightview.js")) continue;
+                    // remove comments;
+                    const text = script.innerHTML.replaceAll(/\/\*[\s\S]*?\*\/|([^:]|^)\/\/.*$/gm, "$1").replaceAll(/\r?\n/g, "");
                     const currentScript = document.createElement("script");
                     if (script.className !== "lightview" && !((script.attributes.type?.value || "").includes("lightview/"))) {
                         for (const attr of script.attributes) currentScript.setAttribute(attr.name,attr.value);
+                        currentScript.innerHTML = text;
                         shadow.appendChild(currentScript);
                         await new Promise((resolve) => {
+                            const timeout = setTimeout(() => resolve(),500);
                             currentScript.onload = () => {
+                                clearTimeout(timeout);
                                 currentScript.remove();
                                 resolve();
                             }
@@ -534,7 +621,6 @@ const {observe} = (() => {
                         currentScript.setAttribute(attr.name, attr.name === "type" ? attr.value.replace("lightview/", "") : attr.value);
                     }
                     currentScript.classList.remove("lightview");
-                    const text = script.innerHTML.replaceAll(/\/\*[\s\S]*?\*\/|([^:]|^)\/\/.*$/gm, "$1").replaceAll(/\r?\n/g, "");
                     currentScript.innerHTML = `Object.getPrototypeOf(async function(){}).constructor('if(window["${scriptid}"]?.ctx) { const ctx = window["${scriptid}"].ctx; { with(ctx) { ${text}; } } }')().then(() => window["${scriptid}"]()); `;
                     await new Promise((resolve) => {
                         window[scriptid] = () => {
@@ -685,6 +771,7 @@ const {observe} = (() => {
                 shadow.normalize();
                 observer ||= createObserver(ctx, framed);
                 observer.observe(ctx, {attributeOldValue: true, subtree:true, characterData:true, characterDataOldValue:true});
+                if(this.hasAttribute("l-unhide")) this.removeAttribute("hidden");
                 //ctx.vars.postEvent.value("connected");
                 this.dispatchEvent(new Event("connected"));
                 // })
@@ -746,11 +833,13 @@ const {observe} = (() => {
                 return this.vars[variableName]?.value;
             }
 
-            variables(variables, {observed, reactive, shared, exported, imported, remote, constant,set} = {}) { // options = {observed,reactive,shared,exported,imported}
-                const addEventListener = this.varsProxy.addEventListener;
+            variables(variables, {remote, constant,set,...rest} = {}) { // options = {observed,reactive,shared,exported,imported}
+                const options = {remote, constant,...rest},
+                    addEventListener = this.varsProxy.addEventListener;
                 if (variables !== undefined) {
                     Object.entries(variables)
                         .forEach(([key, type]) => {
+                            if(isArrowFunction(type)) type = type();
                             const variable = this.vars[key] ||= {name: key, type};
                             if(set!==undefined && constant!==undefined) throw new TypeError(`${key} has the constant value ${constant} and can't be set to ${set}`);
                             variable.value = set;
@@ -758,35 +847,19 @@ const {observe} = (() => {
                                 variable.constant = true;
                                 variable.value = constant;
                             }
-                            if (observed || imported) {
-                                variable.value = this.hasAttribute(key) ? coerce(this.getAttribute(key), variable.type) : variable.value;
-                                variable.imported = imported;
-                                if(variable.observed) {
-                                    variable.observed = observed;
-                                    this.observedAttributes.add(key);
-                                }
-                            }
-                            if (reactive) {
-                                variable.reactive = true;
-                                this.vars[key] = Reactor(variable);
-                            }
-                            if (shared) {
-                                variable.shared = true;
-                                addEventListener("change", ({variableName, value}) => {
-                                    if (this.vars[variableName]?.shared) this.siblings.forEach((instance) => instance.setVariableValue(variableName, value))
-                                })
-                            }
-                            if (exported) {
-                                variable.exported = true;
-                                // in case the export goes up to an iframe
-                                if (variable.value != null) setComponentAttribute(this, key, variable.value);
-                                this.changeListener.targets.add(key);
-                            }
                             if (remote) {
                                 if(typeof(remote)==="function") remote = remote(`./${key}`);
                                 variable.remote = remote;
-                                remote.handleRemote({variable, config:remote.config, reactive,component:this});
+                                remote.handleRemote({variable, config:remote.config,component:this});
                             }
+                            // todo: handle custom functional types, remote should actually be handled this way
+                            Object.entries(rest).forEach(([type,f]) => {
+                                const functionalType = variable[type] = typeof(f)==="function" ? f() : f;
+                                if(functionalType.init) functionalType.init({variable,options,component:this});
+                                if((rest.get!==undefined || rest.set!==undefined) && constant!==undefined) throw new TypeError(`${key} has the constant value ${constant} and can't have a getter or setter`);
+                                variable.set != functionalType.set;
+                                variable.get != functionalType.get;
+                            });
                             if(type.validate && variable.value!==undefined) type.validate(variable.value,variable);
                         });
                 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lightview",
-  "version": "1.6.5b",
+  "version": "1.6.6b",
   "description": "Small, simple, powerful web UI and micro front end creation ... Great ideas from Svelte, React, Vue and Riot combined.",
   "main": "lightview.js",
   "scripts": {

package/test/extended.html

@@ -14,15 +14,18 @@ self.variables({strictboolean:boolean},{set:true});
 self.variables({strictnumber:number},{set:0});
 self.variables({strictobject:object},{set:{}});
 self.variables({strictstring:string},{set:"test"});
+self.variables({extendedarray:array({required:true,minlength:2,maxlength:3})});
+self.variables({extendedboolean:boolean({required:true})});
+self.variables({extendednumber:number({required:true,min:1,max:4,step:2,allowNaN:false})});
+self.variables({extendedobject:object({required:true})});
+self.variables({extendedstring:string({required:true,minlength:2,maxlength:4})});
 
+self.variables({allowNaNnumber:number({min:null,max:null,step:null})});
+self.variables({noNaNnumber:number({allowNaN:false})});
 
-self.variables({requiredarray:array({required:true})});
-self.variables({requiredboolean:boolean({required:true})});
-self.variables({requirednumber:number({required:true})});
-self.variables({requiredobject:object({required:true})});
-self.variables({requiredstring:string({required:true})});
-
-//self.setVariableValue("requirednumber",null);
+//debugger;
+//self.setVariableValue("extendedarray",[]);
+//console.log(typeof(extendedarray),extendedarray);
 
 </script>
 </body>

package/test/extended.test.mjs

@@ -253,18 +253,196 @@ describe('Lightview - Variables', () => {
         expect(validityState.value).toBe(0);
     });
 
-    test('requirednumber - should throw and not allow null', async () => {
+    test('extendedarray - should respect minlength', async () => {
         const result = await page.evaluate(() => {
             try {
-                document.body.setVariableValue("requirednumber",null);
+                document.body.setVariableValue("extendedarray",[]);
             } catch(e) {
                 return e.message;
             }
-            return document.body.getVariableValue("requirednumber")
+            return document.body.getVariableValue("extendedarray")
         });
         const {name,validityState} = JSON.parse(result,reviver);
-        expect(name).toBe("requirednumber");
+        expect(name).toBe("extendedarray");
+        expect(validityState.tooShort).toBe(true);
+    });
+
+    test('extendedarray - should respect maxlength', async () => {
+        const result = await page.evaluate(() => {
+            try {
+                document.body.setVariableValue("extendedarray",[1,2,3,4,5]);
+            } catch(e) {
+                return e.message;
+            }
+            return document.body.getVariableValue("extendedarray")
+        });
+        const {name,validityState} = JSON.parse(result,reviver);
+        expect(name).toBe("extendedarray");
+        expect(validityState.tooLong).toBe(true);
+    });
+
+    test('extendedarray - should throw and not allow null', async () => {
+        const result = await page.evaluate(() => {
+            try {
+                document.body.setVariableValue("extendedarray",null);
+            } catch(e) {
+                return e.message;
+            }
+            return document.body.getVariableValue("extendedarray")
+        });
+        const {name,validityState} = JSON.parse(result,reviver);
+        expect(name).toBe("extendedarray");
         expect(validityState.valueMissing).toBe(true);
+    });
+
+    test('extendednumber - should throw and not allow null', async () => {
+        const result = await page.evaluate(() => {
+            try {
+                document.body.setVariableValue("extendednumber",null);
+            } catch(e) {
+                return e.message;
+            }
+            return document.body.getVariableValue("extendednumber")
+        });
+        const {name,validityState} = JSON.parse(result,reviver);
+        expect(name).toBe("extendednumber");
+        expect(validityState.valueMissing).toBe(true);
+    });
+
+    test('extendednumber - should throw and not allow NaN', async () => {
+        const result = await page.evaluate(() => {
+            try {
+                document.body.setVariableValue("extendednumber",NaN);
+            } catch(e) {
+                return e.message;
+            }
+            return document.body.getVariableValue("extendednumber")
+        });
+        const {name,validityState} = JSON.parse(result,reviver);
+        expect(name).toBe("extendednumber");
+        expect(validityState.badInput).toBe(true);
         //expect(validityState.value).toBe(null);
     });
+
+    test('extendednumber - should respect min', async () => {
+        const result = await page.evaluate(() => {
+            try {
+                document.body.setVariableValue("extendednumber",0);
+            } catch(e) {
+                return e.message;
+            }
+            return document.body.getVariableValue("extendednumber")
+        });
+        const {name,validityState} = JSON.parse(result,reviver);
+        expect(name).toBe("extendednumber");
+        expect(validityState.rangeUnderflow).toBe(true);
+    });
+
+    test('extendednumber - should allow between and allow step', async () => {
+        const result = await page.evaluate(() => {
+            try {
+                document.body.setVariableValue("extendednumber",4);
+            } catch(e) {
+                return e.message;
+            }
+            return document.body.getVariableValue("extendednumber")
+        });
+        expect(result).toBe(4);
+    });
+
+    test('extendednumber - should respect max', async () => {
+        const result = await page.evaluate(() => {
+            try {
+                document.body.setVariableValue("extendednumber",5);
+            } catch(e) {
+                return e.message;
+            }
+            return document.body.getVariableValue("extendednumber")
+        });
+        const {name,validityState} = JSON.parse(result,reviver);
+        expect(name).toBe("extendednumber");
+        expect(validityState.rangeOverflow).toBe(true);
+    });
+
+    test('extendednumber - should respect step', async () => {
+        const result = await page.evaluate(() => {
+            try {
+                document.body.setVariableValue("extendednumber",3);
+            } catch(e) {
+                return e.message;
+            }
+            return document.body.getVariableValue("extendednumber")
+        });
+        const {name,validityState} = JSON.parse(result,reviver);
+        expect(name).toBe("extendednumber");
+        expect(validityState.rangeUnderflow).toBe(true);
+    });
+
+    test('allowNaNnumber - should allow NaN', async () => {
+        const result = await page.evaluate(() => {
+            try {
+                document.body.setVariableValue("allowNaNnumber",NaN);
+            } catch(e) {
+                return e.message;
+            }
+            return document.body.getVariableValue("allowNaNnumber")
+        });
+        expect(typeof(result)==="number" && isNaN(result)).toBe(true);
+    });
+
+    test('noNaNnumber - should not allow NaN', async () => {
+        const result = await page.evaluate(() => {
+            try {
+                document.body.setVariableValue("noNaNnumber",NaN);
+            } catch(e) {
+                return e.message;
+            }
+            return document.body.getVariableValue("noNaNnumber")
+        });
+        const {name,validityState} = JSON.parse(result,reviver);
+        expect(name).toBe("noNaNnumber");
+        expect(validityState.badInput).toBe(true);
+    });
+
+    test('extendedstring - should respect minlength', async () => {
+        const result = await page.evaluate(() => {
+            try {
+                document.body.setVariableValue("extendedstring","a");
+            } catch(e) {
+                return e.message;
+            }
+            return document.body.getVariableValue("extendedstring")
+        });
+        const {name,validityState} = JSON.parse(result,reviver);
+        expect(name).toBe("extendedstring");
+        expect(validityState.tooShort).toBe(true);
+    });
+
+    test('extendedstring - should respect maxlength', async () => {
+        const result = await page.evaluate(() => {
+            try {
+                document.body.setVariableValue("extendedstring","abcdefg");
+            } catch(e) {
+                return e.message;
+            }
+            return document.body.getVariableValue("extendedstring")
+        });
+        const {name,validityState} = JSON.parse(result,reviver);
+        expect(name).toBe("extendedstring");
+        expect(validityState.tooLong).toBe(true);
+    });
+
+    test('extendedstring - should throw and not allow null', async () => {
+        const result = await page.evaluate(() => {
+            try {
+                document.body.setVariableValue("extendedstring",null);
+            } catch(e) {
+                return e.message;
+            }
+            return document.body.getVariableValue("extendedstring")
+        });
+        const {name,validityState} = JSON.parse(result,reviver);
+        expect(name).toBe("extendedstring");
+        expect(validityState.valueMissing).toBe(true);
+    });
 })

package/types.js

@@ -108,7 +108,7 @@ const validateArray  = function(value,variable) {
     }
     return this.whenInvalid(variable,value);
 }
-const array = ({coerce=false, required = false,whenInvalid = ifInvalid,maxlength=Infinity,minlength=0,...rest}) => {
+const array = ({coerce=false, required = false,whenInvalid = ifInvalid,maxlength=Infinity,minlength=0,...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`);
@@ -126,10 +126,7 @@ const array = ({coerce=false, required = false,whenInvalid = ifInvalid,maxlength
         validate: validateArray
     }
 }
-array.validate = validateArray;
-array.whenInvalid = ifInvalid;
-array.coerce = false;
-array.required = false;
+
 
 const validateBoolean  = function(value,variable) {
     if(value===undefined && variable.value===undefined) {
@@ -149,7 +146,7 @@ const validateBoolean  = function(value,variable) {
     }
     return this.whenInvalid(variable,value);
 }
-const boolean = ({coerce=false,required=false, whenInvalid = ifInvalid,...rest}) =>{
+const boolean = ({coerce=false,required=false, whenInvalid = ifInvalid,...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`);
@@ -163,10 +160,7 @@ const boolean = ({coerce=false,required=false, whenInvalid = ifInvalid,...rest})
         validate: validateBoolean
     }
 }
-boolean.validate = validateBoolean;
-boolean.whenInvalid = ifInvalid;
-boolean.coerce = false;
-boolean.required = false;
+
 
 const validateNumber  = function(value,variable) {
     if(value===undefined && variable.value===undefined) {
@@ -178,13 +172,13 @@ const validateNumber  = function(value,variable) {
         const result = this.coerce ? tryParse(value) : value;
         if(typeof(result)!=="number") {
             variable.validityState = ValidityState({typeMismatch:true,value});
-        } else if(isNaN(result) && !allowNaN) {
+        } else if(isNaN(result) && !this.allowNaN) {
             variable.validityState = ValidityState({badInput:true,value});
-        } else if(result<this.min) {
+        } else if(this.min!=null && result<this.min) {
             variable.validityState = ValidityState({rangeUnderflow:true,value});
-        } else if(result>this.max) {
+        } else if(this.max!=null && result>this.max) {
             variable.validityState = ValidityState({rangeOverflow:true,value});
-        }  else if((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});
@@ -193,13 +187,13 @@ 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 = 1,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`);
-    if(typeof(min)!=="number") throw new TypeError(`min, ${JSON.stringify(min)}, must be a number`);
-    if(typeof(max)!=="number") throw new TypeError(`max, ${JSON.stringify(max)}, must be a number`);
-    if(typeof(step)!=="number") throw new TypeError(`step, ${JSON.stringify(step)}, must be a number`);
+    if(min!=null && typeof(min)!=="number") throw new TypeError(`min, ${JSON.stringify(min)}, must be a number`);
+    if(max!=null && typeof(max)!=="number") throw new TypeError(`max, ${JSON.stringify(max)}, must be a number`);
+    if(step!=null && typeof(step)!=="number") throw new TypeError(`step, ${JSON.stringify(step)}, must be a number`);
     if(typeof(allowNaN)!=="boolean") throw new TypeError(`step, ${JSON.stringify(allowNaN)}, must be a boolean`);
     if(rest.default!==undefined && typeof(rest.default)!=="number") throw new TypeError(`default, ${rest.default}, must be a number`);
     return {
@@ -215,14 +209,7 @@ const number = ({coerce=false,required = false,whenInvalid = ifInvalid,min=-Infi
         validate: validateNumber
     }
 }
-number.validate = validateNumber;
-number.whenInvalid = ifInvalid;
-number.min = -Infinity;
-number.max = Infinity;
-number.coerce = false;
-number.required = false;
-number.allowNaN = true;
-number.step = 1;
+
 
 const validateObject  = function(value,variable) {
     if(value===undefined && variable.value===undefined) {
@@ -241,7 +228,7 @@ const validateObject  = function(value,variable) {
     }
     return this.whenInvalid(variable,value);
 }
-const object = ({coerce=false, required = false,whenInvalid = ifInvalid,...rest}) => {
+const object = ({coerce=false, required = false,whenInvalid = ifInvalid,...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`);
@@ -255,10 +242,7 @@ const object = ({coerce=false, required = false,whenInvalid = ifInvalid,...rest}
         validate: validateObject
     }
 }
-object.validate = validateObject;
-object.whenInvalid = ifInvalid;
-object.coerce = false;
-object.required = false;
+
 
 const validateString  = function(value,variable) {
     if(value===undefined && variable.value===undefined) {
@@ -281,7 +265,7 @@ const validateString  = function(value,variable) {
     }
     return this.whenInvalid(variable,value);
 }
-const string = ({coerce=false, required = false,whenInvalid = ifInvalid, maxlength = Infinity, minlength = 0, pattern, ...rest}) => {
+const string = ({coerce=false, required = false,whenInvalid = ifInvalid, maxlength = Infinity, minlength = 0, pattern,...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`);
@@ -300,12 +284,7 @@ const string = ({coerce=false, required = false,whenInvalid = ifInvalid, maxleng
         validate: validateString
     }
 }
-string.validate = validateString;
-string.whenInvalid = ifInvalid;
-string.coerce = false;
-string.required = false;
-string.maxlength = Infinity;
-string.minlength = 0;
+
 
 const validateSymbol  = function(value,variable) {
     if(value===undefined && variable.value===undefined) {
@@ -324,7 +303,7 @@ const validateSymbol  = function(value,variable) {
     }
     return this.whenInvalid(variable,value);
 }
-const symbol = ({coerce=false,required=false, whenInvalid = ifInvalid,...rest}) =>{
+const symbol = ({coerce=false,required=false, whenInvalid = ifInvalid,...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`);
@@ -338,10 +317,6 @@ const symbol = ({coerce=false,required=false, whenInvalid = ifInvalid,...rest})
         validate: validateSymbol
     }
 }
-symbol.validate = validateSymbol;
-symbol.whenInvalid = ifInvalid;
-symbol.coerce = false;
-symbol.required = false;
 
 const remoteProxy = ({json, variable,config, reactive, component}) => {
     const type = typeof (config);
@@ -428,7 +403,7 @@ const put = (href,variable) => {
     })
 }
 
-const handleRemote = async ({variable, config, reactive, component},doput) => {
+const handleRemote = async ({variable, functionalType, config=functionalType, component},doput) => {
     const type = typeof (config);
     let value;
     if (type === "string") {
@@ -444,14 +419,14 @@ const handleRemote = async ({variable, config, reactive, component},doput) => {
         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 && reactive) config.put = put;
+            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, reactive, component});
+                await handleRemote({variable, config, component});
                 //schedule();
             },config.ttl);
         }
@@ -459,13 +434,11 @@ const handleRemote = async ({variable, config, reactive, component},doput) => {
     }
     if(value) {
         const json = await value;
-        //value.then((json) => {
-        if (json && typeof (json) === "object" && reactive) {
-            variable.value = remoteProxy({json, variable,config, reactive, component});
+        if (json && typeof (json) === "object" && variable.reactive) {
+            variable.value = remoteProxy({json, variable,config, component});
         } else {
             component.setVariableValue(variable.name,json);
         }
-        //})
     }
 }
 
@@ -476,4 +449,6 @@ const remote = (config) => {
     }
 }
 
-export {ValidityState,any,array,boolean,number,object,string,symbol,remote,reviver}
+const remoteGenerator = handleRemote;
+
+export {ValidityState,any,array,boolean,number,object,remote,remoteGenerator,string,symbol,reviver}