lightview 1.4.8-b → 1.6.2-b

package/package.json

@@ -1,36 +1,36 @@
-{
-  "name": "lightview",
-  "version": "1.4.8b",
-  "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.6.2b",
+  "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

@@ -4,6 +4,7 @@
     <meta charset="UTF-8">
     <title>Basic</title>
     <template id="x-test" name="joe" open="true" count=1 children='["mary"]' l-on:click="bump">
+
         <span id="name">${name}</span>
         <span id="open">${open}</span>
         <span id="count">${count}</span>
@@ -18,8 +19,9 @@
         <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" name="iradio" value="test">
         <input id="isearch" type="search" value="${isearch}">
-        <input id="iradio" type="radio" value="${iradio}">
+
         <input id="icolor" type="color" value="${icolor}">
         <input id="ipassword" type="password" value="${ipassword}">
 
@@ -31,11 +33,11 @@
         <input id="icheckbox" type="checkbox" value="${icheckbox}">
 
         <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});
+        //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});
 
             color = "green";
             checked = true;
@@ -44,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;
 
-            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");
-          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);
+    });
+})