lightview 1.4.10-b → 1.5.1-b

package/package.json

@@ -1,36 +1,36 @@
-{
-  "name": "lightview",
-  "version": "1.4.10b",
-  "description": "Small, simple, powerful web UI and micro front end creation ... Great ideas from Svelte, React, Vue and Riot combined.",
-  "main": "lightview.js",
-  "scripts": {
-    "test": "set NODE_OPTIONS=--experimental-vm-modules && jest ./test"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/anywhichway/lightview.git"
-  },
-  "keywords": [
-    "svelte",
-    "react",
-    "angular",
-    "riot",
-    "vue",
-    "moon",
-    "hyperapp",
-    "hyperhtml",
-    "micro front end",
-    "custom elements",
-    "web components"
-  ],
-  "author": "Simon Y. Blackwell",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/anywhichway/lightview/issues"
-  },
-  "homepage": "https://github.com/anywhichway/lightview#readme",
-  "devDependencies": {
-    "jest": "^27.5.1",
-    "jest-puppeteer": "^6.1.0"
-  }
-}
+{
+  "name": "lightview",
+  "version": "1.5.1b",
+  "description": "Small, simple, powerful web UI and micro front end creation ... Great ideas from Svelte, React, Vue and Riot combined.",
+  "main": "lightview.js",
+  "scripts": {
+    "test": "set NODE_OPTIONS=--experimental-vm-modules && jest ./test"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/anywhichway/lightview.git"
+  },
+  "keywords": [
+    "svelte",
+    "react",
+    "angular",
+    "riot",
+    "vue",
+    "moon",
+    "hyperapp",
+    "hyperhtml",
+    "micro front end",
+    "custom elements",
+    "web components"
+  ],
+  "author": "Simon Y. Blackwell",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/anywhichway/lightview/issues"
+  },
+  "homepage": "https://github.com/anywhichway/lightview#readme",
+  "devDependencies": {
+    "jest": "^27.5.1",
+    "jest-puppeteer": "^6.1.0"
+  }
+}

package/test/basic.html

@@ -19,7 +19,7 @@
         <input id="itel" type="tel" value="${itel}">
         <input id="iemail" type="email" value="${iemail}">
         <input id="iurl" type="url" value="${iurl}">
-        <input id="iradio" type="radio" value="${iradio}">
+        <input id="iradio" type="radio" name="iradio" value="test">
         <input id="isearch" type="search" value="${isearch}">
 
         <input id="icolor" type="color" value="${icolor}">
@@ -34,10 +34,10 @@
 
         <script type="lightview/module">
         //debugger;
-            self.variables({name:string,open:boolean,count:number,children:Array},{imported,reactive});
-            self.variables({color:string,checked:boolean,age:number,hamburger:Array},{exported,reactive});
-            self.variables({counter:number},{reactive});
-            self.variables({myshare:number},{shared});
+            self.variables({name:"string",open:"boolean",count:"number",children:Array},{imported,reactive});
+            self.variables({color:"string",checked:"boolean",age:"number",hamburger:Array},{exported,reactive});
+            self.variables({counter:"number"},{reactive});
+            self.variables({myshare:"number"},{shared});
 
             color = "green";
             checked = true;
@@ -46,26 +46,33 @@
             counter = 0;
             myshare = 1;
 
-            iuntyped = "test";
-            itext = "test";
-            itel = "test";
-            iemail = "test";
-            iurl = "test";
-            isearch = "test";
-            iradio = "test";
-            icolor = "test";
-            ipassword = "test";
+            addEventListener("connected", ({target}) => {
+                iuntyped = "test";
+                itext = "test";
+                itel = "test";
+                iemail = "test";
+                iurl = "test";
+                isearch = "test";
+                iradio = "test";
+                icolor = "test";
+                ipassword = "test";
 
-            inumber = 1;
-            irange = 1;
+                inumber = 1;
+                irange = 1;
+debugger;
+                idatetime = new Date();
 
-            idatetime = new Date();
-
-            icheckbox = true;
+                icheckbox = true;
+                target.testId = target.id;
+            });
 
             self.bump = () => {
                 counter++;
-                };
+            };
+
+            addEventListener("change",({variableName,value}) => {
+                self[variableName] = value;
+            });
         </script>
     </template>
     <script src="../lightview.js"></script>

package/test/basic.test.mjs

@@ -10,7 +10,7 @@ describe('Google', () => {
     });
 });
 
-describe('Lightview', () => {
+describe('Lightview - Variables', () => {
     beforeAll(async () => {
         await page.goto('http://localhost:8080/test/basic.html');
     });
@@ -22,7 +22,7 @@ describe('Lightview', () => {
     test('boolean - open should be imported', async () => {
         const result = await page.evaluate(() => {
             const el = document.getElementById("test");
-            return JSON.parse(el.getValue("open"));
+            return JSON.parse(el.getVariableValue("open"));
         });
         expect(result).toBe(true);
     });
@@ -30,7 +30,7 @@ describe('Lightview', () => {
     test('number - count should be imported', async () => {
         const result = await page.evaluate(() => {
             const el = document.getElementById("test");
-            return JSON.parse(el.getValue("count"));
+            return JSON.parse(el.getVariableValue("count"));
         });
         expect(result).toBe(1);
     });
@@ -38,7 +38,7 @@ describe('Lightview', () => {
     test('string - name should be imported', async () => {
         const result = await page.evaluate(() => {
             const el = document.getElementById("test");
-            return el.getValue("name");
+            return el.getVariableValue("name");
         });
         expect(result).toBe("joe");
     });
@@ -46,7 +46,7 @@ describe('Lightview', () => {
     test('object - children should be imported', async () => {
         const result = await page.evaluate(() => {
             const el = document.getElementById("test");
-            return el.getValue("children").toJSON();
+            return el.getVariableValue("children").toJSON();
         });
         expect(Array.isArray(result)).toBe(true);
         expect(result[0]).toBe("mary");
@@ -167,7 +167,7 @@ describe('Lightview', () => {
         const result = await page.evaluate(async () => {
             const el0 = document.getElementById("test"),
                 el1 = document.getElementById("test1")
-            return [el0.getValue("myshare"),el1.getValue("myshare")];
+            return [el0.getVariableValue("myshare"),el1.getVariableValue("myshare")];
         });
         expect(Array.isArray(result)).toBe(true);
         expect(result[0]).toBe(result[1]);
@@ -182,21 +182,78 @@ describe('Lightview', () => {
         expect(result).toBe("test");
     });
 
-    // "tel", "email", "url", "search", "radio", "color", "password"
-    ["text","tel","email", "url", "search", "radio", "color", "password"].forEach((type) => {
-        const f =  Function(`return async () => {
+
+    test('text input - itext should be test', async () => {
         const result = await page.evaluate(async () => {
             const el = document.getElementById("test"),
-                result = el.getElementById("i${type}");
-            return {value:result.getAttribute("value"),variable:el.vars["i${type}"]};
+                result = el.getElementById(`itext`);
+            return result.getAttribute("value");
         });
-        const {value,variable} = result;
-        expect(value).toBe("test");
-         expect(variable.name).toBe("i${type}");
-         expect(variable.type).toBe("string");
-          if("${type}"!=="radio") expect(variable.value).toBe(value);
-    }`)();
-        test(`${type} input - i${type} should be "test"`,f);
+        expect(result).toBe("test");
+    });
+
+
+    test('tel input - itel should be test', async () => {
+        const result = await page.evaluate(async () => {
+            const el = document.getElementById("test"),
+                result = el.getElementById("itel");
+            return result.getAttribute("value");
+        });
+        expect(result).toBe("test");
+    });
+
+    test('email input - email should be test', async () => {
+        const result = await page.evaluate(async () => {
+            const el = document.getElementById("test"),
+                result = el.getElementById("iemail");
+            return result.getAttribute("value");
+        });
+        expect(result).toBe("test");
+    });
+
+        test('url input - url should be test', async () => {
+            const result = await page.evaluate(async () => {
+                const el = document.getElementById("test"),
+                    result = el.getElementById("iurl");
+                return result.getAttribute("value");
+            });
+            expect(result).toBe("test");
+        });
+
+        test('search input - search should be test', async () => {
+            const result = await page.evaluate(async () => {
+                const el = document.getElementById("test"),
+                    result = el.getElementById("isearch");
+                return result.getAttribute("value");
+            });
+            expect(result).toBe("test");
+        });
+
+        test('radio input - radio should be test', async () => {
+            const result = await page.evaluate(async () => {
+                const el = document.getElementById("test"),
+                    result = el.getElementById("iradio");
+                return result.checked;
+            });
+            expect(result).toBe(true);
+        });
+
+        test('color input - color should be test', async () => {
+            const result = await page.evaluate(async () => {
+                const el = document.getElementById("test"),
+                    result = el.getElementById("icolor");
+                return result.getAttribute("value");
+            });
+            expect(result).toBe("test");
+        });
+
+        test('password input - password should be test', async () => {
+            const result = await page.evaluate(async () => {
+                const el = document.getElementById("test"),
+                    result = el.getElementById("ipassword");
+                return result.getAttribute("value");
+            });
+            expect(result).toBe("test");
         });
 
     test('number input - inumber should be 1', async () => {
@@ -232,17 +289,37 @@ describe('Lightview', () => {
         const result = await page.evaluate(async () => {
             const el = document.getElementById("test"),
                 result = el.getElementById("icheckbox")
-            return JSON.parse(result.getAttribute("value"));
+            return result.checked;
         });
         expect(result).toBe(true);
     });
+});
 
+describe("Lightview - on: directive", () => {
     test('on:<handler> - count should be bumped', async () => {
         await page.click("#test",{waitUntil:"load"});
         const result = await page.evaluate(async () => {
             const el = document.getElementById("test");
-            return JSON.parse(el.getValue("counter"));
+            return JSON.parse(el.getVariableValue("counter"));
         });
         expect(result).toBe(1);
     });
-});
+})
+
+describe("Lightview - lifecycle", () => {
+    test('connected should be called', async () => {
+        const result = await page.evaluate(async () => {
+            const el = document.getElementById("test");
+            return el.testId;
+        });
+        expect(result).toBe("test");
+    });
+    test('change should be called', async () => {
+        await page.click("#test",{waitUntil:"load"});
+        const result = await page.evaluate(async () => {
+            const el = document.getElementById("test");
+            return el.counter;
+        });
+        expect(result).toBe(2);
+    });
+})

package/types.js

@@ -0,0 +1,312 @@
+function ValidityState(options) {
+    if(!this || !(this instanceof ValidityState)) return new ValidityState(options);
+    Object.assign(this,{
+        valid:false,
+        badInput:undefined,
+        customError:undefined,
+        patternMismatch:undefined,
+        rangeUnderflow:undefined,
+        rangeOverflow:undefined,
+        typeMismatch:undefined,
+        valueMissing:undefined,
+        stepMistmatch:undefined,
+        tooLong:undefined,
+        tooShort:undefined
+    },options);
+}
+
+const tryParse = (value) => {
+    try {
+        return JSON.parse(value+"")
+    } catch(e) {
+
+    }
+}
+
+const ifInvalid = (variable) => {
+    variable.validityState.type = typeof(variable.type)==="string" ? variable.type : variable.type.type;
+    throw new TypeError(JSON.stringify(variable));
+    // or could return existing value variable.value
+    // or could return nothing
+}
+
+const validateAny = function(value,variable) {
+    if(value===undefined && variable.value===undefined) {
+        return this.default;
+    }
+    if(this.required && value==null) {
+        variable.validityState = ValidityState({valueMissing: true});
+    } else {
+        variable.validityState = ValidityState({valid:true});
+        return value;
+    }
+    return this.whenInvalid(variable);
+}
+const any = ({required=false,whenInvalid = ifInvalid,...rest}) => { // ...rest allows use of property "default", which is otherwise reserved
+    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`);
+    return {
+        type: "any",
+        required,
+        whenInvalid,
+        ...rest,
+        validate: validateAny
+    }
+}
+any.validate = validateAny;
+any.required = false;
+
+const validateArray  = function(value,variable) {
+    if(value===undefined && variable.value===undefined) {
+        return this.default;
+    }
+    if(this.required && value==null) {
+        variable.validityState = ValidityState({valueMissing: true});
+    } else {
+        let result = this.coerce && typeof(value)==="string" ? tryParse(value.startsWith("[") ? value : `[${value}]`) : value;
+        if (!Array.isArray(result)) {
+            if (value.includes(",")) result = value.split(",");
+        }
+        if(typeof(result)!=="object" || !(result instanceof Array || Array.isArray(result))) {
+            variable.validityState = ValidityState({typeMismatch:true,value});
+        } else if(result.length<this.minlength) {
+            variable.validityState = ValidityState({tooShort:true,value});
+        } else if(result.length>this.maxlength) {
+            variable.validityState = ValidityState({tooLong:true,value});
+        } else {
+            variable.validityState = ValidityState({valid:true});
+            return result;
+        }
+    }
+    return this.whenInvalid(variable);
+}
+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`);
+    if(typeof(maxlength)!=="number") throw new TypeError(`maxlength, ${JSON.stringify(maxlength)}, must be a number`);
+    if(typeof(minlength)!=="number") throw new TypeError(`minlength, ${JSON.stringify(minlength)}, must be a number`);
+    if(rest.default!==undefined && (typeof(rest.default)!=="object" || !(rest.default instanceof Array || Array.isArray(rest.default)))) throw new TypeError(`default, ${rest.default}, must be an Array`);
+    return {
+        type: "array",
+        coerce,
+        required,
+        whenInvalid,
+        maxlength,
+        minlength,
+        ...rest,
+        validate: validateArray
+    }
+}
+array.validate = validateArray;
+array.coerce = false;
+array.required = false;
+
+const validateBoolean  = function(value,variable) {
+    if(value===undefined && variable.value===undefined) {
+        return this.default;
+    }
+    if(variable.value===undefined) value = this.default;
+    if(this.required && value==null) {
+        variable.validityState = ValidityState({valueMissing: true});
+    } else {
+        const result = !!(this.coerce ? tryParse(value) : value);
+        if(typeof(result)!=="boolean") {
+            variable.validityState = ValidityState({typeMismatch: true, value});
+        } else {
+            variable.validityState = ValidityState({valid:true});
+            return result;
+        }
+    }
+    return this.whenInvalid(variable);
+}
+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`);
+    if(rest.default!==undefined && typeof(rest.default)!=="boolean") throw new TypeError(`default, ${rest.default}, must be a boolean`);
+    return {
+        type: "boolean",
+        coerce,
+        required,
+        whenInvalid,
+        ...rest,
+        validate: validateBoolean
+    }
+}
+boolean.validate = validateBoolean;
+boolean.coerce = false;
+boolean.required = false;
+
+const validateNumber  = function(value,variable) {
+    if(value===undefined && variable.value===undefined) {
+        return this.default;
+    }
+    if(this.required && value==null) {
+        variable.validityState = ValidityState({valueMissing: true});
+    } else {
+        const result = this.coerce ? tryParse(value) : value;
+        if(typeof(result)!=="number") {
+            variable.validityState = ValidityState({typeMismatch:true,value});
+        } else if(isNaN(result) && !allowNaN) {
+            variable.validityState = ValidityState({badInput:true,value});
+        } else if(result<this.min) {
+            variable.validityState = ValidityState({rangeUnderflow:true,value});
+        } else if(result>this.max) {
+            variable.validityState = ValidityState({rangeOverflow:true,value});
+        }  else if((result % this.step)!==0) {
+            variable.validityState = ValidityState({rangeUnderflow:true,value});
+        } else {
+            variable.validityState = ValidityState({valid:true});
+            return result;
+        }
+    }
+    return this.whenInvalid(variable);
+}
+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(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 {
+        type: "number",
+        coerce,
+        required,
+        whenInvalid,
+        min,
+        max,
+        step,
+        allowNaN,
+        ...rest,
+        validate: validateNumber
+    }
+}
+number.validate = validateNumber;
+number.min = -Infinity;
+number.max = Infinity;
+number.coerce = false;
+number.required = false;
+number.allwNaN = true;
+number.step = 1;
+
+const validateObject  = function(value,variable) {
+    if(value===undefined && variable.value===undefined) {
+        return this.default;
+    }
+    if(this.required && value==null) {
+        variable.validityState = ValidityState({valueMissing: true});
+    } else {
+        const result = this.coerce ? tryParse(value) : value;
+        if(typeof(result)!=="object") {
+            variable.validityState = ValidityState({typeMismatch:true,value});
+        } else {
+            variable.validityState = ValidityState({valid:true});
+            return result;
+        }
+    }
+    return this.whenInvalid(variable);
+}
+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`);
+    if(rest.default!==undefined && typeof(rest.default)!=="object") throw new TypeError(`default, ${rest.default}, must be of type object`);
+    return {
+        type: "object",
+        coerce,
+        required,
+        whenInvalid,
+        ...rest,
+        validate: validateObject
+    }
+}
+object.validate = validateObject;
+object.coerce = false;
+object.required = false;
+
+const validateString  = function(value,variable) {
+    if(value===undefined && variable.value===undefined) {
+        return this.default;
+    }
+    if(this.required && value==null) {
+        variable.validityState = ValidityState({valueMissing: true});
+    } else {
+        const result = this.coerce ? value+"" : value;
+        if(typeof(result)!=="string") {
+            variable.validityState = ValidityState({typeMismatch:true,value});
+        } else if(result.length<this.minlength) {
+            variable.validityState = ValidityState({tooShort:true,value});
+        } else if(result.length>this.maxlength) {
+            variable.validityState = ValidityState({tooLong:true,value});
+        } else {
+            variable.validityState = ValidityState({valid:true});
+            return result;
+        }
+    }
+    return this.whenInvalid(variable);
+}
+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`);
+    if(typeof(maxlength)!=="number") throw new TypeError(`maxlength, ${JSON.stringify(maxlength)}, must be a number`);
+    if(typeof(minlength)!=="number") throw new TypeError(`minlength, ${JSON.stringify(minlength)}, must be a number`);
+    if(pattern && (typeof(pattern)!=="object" || !(pattern instanceof RegExp))) throw new TypeError(`pattern, ${pattern}, must be a RegExp`);
+    if(rest.default!==undefined && typeof(rest.default)!=="string") throw new TypeError(`default, ${rest.default}, must be a string`);
+    return {
+        type: "string",
+        coerce,
+        required,
+        whenInvalid,
+        maxlength,
+        minlength,
+        ...rest,
+        validate: validateString
+    }
+}
+string.validate = validateString;
+string.coerce = false;
+string.required = false;
+string.maxlength = Infinity;
+string.minlength = 0;
+
+const validateSymbol  = function(value,variable) {
+    if(value===undefined && variable.value===undefined) {
+        return this.default;
+    }
+    if(this.required && value==null) {
+        variable.validityState = ValidityState({valueMissing: true});
+    } else {
+        const result = !!(this.coerce && typeof(value)!=="symbol" ? Symbol(value+"") : value);
+        if(typeof(result)!=="symbol") {
+            variable.validityState = ValidityState({typeMismatch: true, value});
+        } else {
+            variable.validityState = ValidityState({valid:true});
+            return result;
+        }
+    }
+    return this.whenInvalid(variable);
+}
+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`);
+    if(rest.default!==undefined && typeof(rest.default)!=="symbol") throw new TypeError(`default, ${rest.default}, must be a symbol`);
+    return {
+        type: "symbol",
+        coerce,
+        required,
+        whenInvalid,
+        ...rest,
+        validate: validateSymbol
+    }
+}
+symbol.validate = validateSymbol;
+symbol.coerce = false;
+symbol.required = false;
+
+export {ValidityState,any,array,boolean,number,string,symbol}