Reactivity for state

Test/observedobject.test.js

@@ -0,0 +1,62 @@
+window.testSuites.push( class testObservedObject {
+
+    FromJSONFailsWithoutAllFields() {
+        class Form extends ObservedObject {
+            id
+            path
+            $canvasPosition
+        }
+
+        try {
+            let obj = Form.decode({id: "123"})
+            return "Not implemented"
+        } catch {}
+    }
+
+    FromJSONInitsAllFields() {
+        class Form extends ObservedObject {
+            id
+            path
+            $canvasPosition
+        }
+
+        let obj = Form.decode({id: "123", path: "/", canvasPosition: "25|25"})
+        if(!(obj && obj["id"] === "123" && obj["path"] === "/" && obj["canvasPosition"] === "25|25")) {
+            return "Not all fields initialized!"
+        }
+    }
+
+    // WorksWithShadow() {
+    //     window.Form = class Form extends ObservedObject {
+    //         id
+    //         path
+    //         $canvasPosition
+    //     }
+
+    //     class File extends Shadow {
+    //         $$form = Form.decode({id: "123", path: "/", canvasPosition: "25|25"})
+    //     }
+
+    //     window.register(File, "file-1")
+    //     let file = window.File()
+    //     console.log(file, p())
+
+    //     return "Not yet"
+    // }
+
+    // ChangingObjChangesInstance() {
+    //     class Form extends ObservedObject {
+    //         id
+    //         path
+    //         $canvasPosition
+    //     }
+
+    //     let json = {id: "123", path: "/", canvasPosition: "25|25"}
+    //     let obj = Form.decode({id: "123", path: "/", canvasPosition: "25|25"})
+    //     json.id = "456"
+    //     if(!(obj["id"] === "456")) {
+    //         return "Change to original object was not reflected!"
+    //     }
+    // }
+    
+})

Test/render.test.js

@@ -0,0 +1,82 @@
+window.testSuites.push( class testRender {
+
+    SimpleParagraphWithState() {
+        class File extends Shadow {
+            $form
+
+            render = () => {
+                console.log("render", window.rendering)
+                p(this.form.data)
+            }
+        
+            constructor() {
+                super()
+            }
+        }
+
+        window.register(File, randomName("file"))
+        let form = {data: "asdf"}
+        const el = window.File(form)
+
+        if(!(el.firstChild?.matches("p"))) {
+            return `Child paragraph not rendered`
+        }
+        if(!(el.firstChild.innerText === "asdf")) {
+            return "Child para does not have inner text"
+        }
+    }
+
+    ParagraphConstructorChangeState() {
+        register(class File extends Shadow {
+            $name
+
+            render = () => {
+                console.log("render", window.rendering)
+                p(this.name)
+            }
+        
+            constructor() {
+                super()
+            }
+        }, randomName("file"))
+
+
+        let name = "asdf"
+        const file = File(name)
+        file.name = "hey123"
+
+        if(file.firstChild.innerText !== "hey123") {
+            return "Paragraph did not react to change!"
+        }
+    }
+
+    LiteralDoesNotCreateFalseReactivity() {
+        register(class File extends Shadow {
+            $name = "asd"
+
+            render = () => {
+                console.log("render", window.rendering)
+                p(this.name)
+                p("asd")
+            }
+        
+            constructor() {
+                super()
+            }
+        }, randomName("file"))
+
+
+        const file = File()
+        file.name = "hey123"
+
+        let childs = Array.from(file.children)
+        childs.forEach((el) => {
+            console.log(el.innerText)
+        })
+
+        if(file.children[1].innerText === "hey123") {
+            return "Paragraph innertext falsely changed"
+        }
+    }
+    
+})

Test/shadow.test.js

@@ -124,22 +124,42 @@ window.testSuites.push( class testShadow {
         }
     }
 
-    RegisterThrowsIfNoConstructorParams() {
-        class File3 extends Shadow {
-            $form
+    CannotAddUndefinedProperties() {
+        register(class File extends Shadow {
+
+            render = () => {
+                p("boi")
+            }
+        
+            constructor() {
+                super()
+                this.hey = "unallowed"
+            }
+        }, randomName("file"))
+
+        try {
+            const file = File()
+            return "Did not throw error!"
+        } catch(e) { 
+            if(!e.message.includes("Extensible")) {
+                throw e
+            }
+        }
+    }
+
+    SetNonStateFields() {
+        register(class File extends Shadow {
+            nonStateField
         
             constructor() {
                 super()
             }
-        }
+        }, randomName("file"))
 
-        try {
-            window.register(File3, "file3-el")
-        } catch(e) {
-            return
+        const file = File("asd")
+        if(!file.nonStateField === "asd") {
+            return "Did not set field!"
         }
-        
-        return "Error not thrown!"
     }
     
 })

Test/test.js

@@ -3,6 +3,23 @@ window.testSuites = [];
 
 await import ("./parse.test.js")
 await import ("./shadow.test.js")
+await import ("./observedobject.test.js")
+await import ("./render.test.js")
+
+window.randomName = function randomName(prefix) {
+    const sanitizedPrefix = prefix.toLowerCase().replace(/[^a-z0-9]/g, '');
+
+    // Generate a random suffix using numbers and lowercase letters
+    const suffixLength = 8; // You can adjust the length of the suffix
+    const suffixChars = 'abcdefghijklmnopqrstuvwxyz0123456789';
+    let suffix = '';
+    for (let i = 0; i < suffixLength; i++) {
+        suffix += suffixChars.charAt(Math.floor(Math.random() * suffixChars.length));
+    }
+
+    // Combine the prefix and suffix with a hyphen
+    return `${sanitizedPrefix}-${suffix}`;
+}
 
 window.test = async function() {
     // window.testSuites.sort();
@@ -24,7 +41,15 @@ window.test = async function() {
             if(typeof suite[test] === 'function' && test !== "constructor") {
                 testNum++;
                 console.log(`%c${testNum}. ${test}`, "margin-top: 10px; border-top: 2px solid #e9c9a0; color: #e9c9a0; border-radius: 10px; padding: 10px;");
-                let fail = await suite[test]();
+                
+                let fail;
+                try { 
+                    fail = await suite[test]()
+                } catch(e) {
+                    console.error(e)
+                    fail = "Error"
+                }
+
                 if(fail) {
                     failed++;
                     let spaceNum = test.length - fail.length