create OO with default values, adding triangle

3.14.js

@@ -1,42 +0,0 @@
-
-/* Class */
-// - Force initialization of all variables. Throw error if not enough params passed in
-
-/* State (denoted by "$" in front of the name) */
-// - Sync with attributes
-// - Proxies to enforce type
-//     w/ initializers like [] {} 0 ""
-
-// How would one detect class object changes?
-// Does object detection go all layers down?
-
-    // Swift: Yes, if you change the inner it will rerender the outer.
-    // struct ContentView: View {
-    //     @State private var outerState = OuterStruct()
-
-    //     var body: some View {
-    //         Text(outerState.innerState.property)
-    //             .onTapGesture {
-    //                 outerState.innerState.property = "New Value"
-    //             }
-    //     }
-    // }
-
-    // struct OuterStruct {
-    //     var innerState = InnerStruct()
-    // }
-
-    // struct InnerStruct {
-    //     var property = "Initial Value"
-    // }
-
-// Reactivity:
-// Parse lines which use the variables?
-// Rerender whole thing?
-
-// Lit does only parts which depend, React does whole thing then compares
-
-// Binding
-// Objects are passed by reference, str and int by value
-
-

Test/init.test.js

@@ -272,7 +272,7 @@ window.testSuites.push( class testInit {
         }
         
         try {
-            let space = ChildSpace(Form.decode({path: "/asd"}))
+            let space = ChildSpace(Form.create({path: "/asd"}))
         } catch(e) {
             if(e.message.includes("Cannot read properties of undefined (reading 'path')")) {
                 return "Form did not get initialized!"

Test/observedobject.test.js

@@ -8,7 +8,7 @@ window.testSuites.push( class testObservedObject {
         }
 
         try {
-            let obj = Form.decode({id: "123"})
+            let obj = Form.create({id: "123"})
             return "Not implemented"
         } catch {}
     }
@@ -20,14 +20,23 @@ window.testSuites.push( class testObservedObject {
             $canvasPosition
         }
 
-        let obj = Form.decode({id: "123", path: "/", canvasPosition: "25|25"})
+        let obj = Form.create({id: "123", path: "/", canvasPosition: "25|25"})
         if(!(obj && obj["id"] === "123" && obj["path"] === "/" && obj["canvasPosition"] === "25|25")) {
             return "Not all fields initialized!"
         }
     }
 
-    ConstructorWorks() {
+    DefaultValueWorks() {
-        return "not done"
+        class WindowState extends ObservedObject {
+            $sidebarOut = false
+        }
+
+        let obj = WindowState.create()
+        console.log(obj)
+
+        if(obj.sidebarOut !== false) {
+            return "Default field not set"
+        }
     }
 
     NotExtensible() {
@@ -41,7 +50,7 @@ window.testSuites.push( class testObservedObject {
     //         $canvasPosition
     //     }
 
-    //     let obj = Form.decode({id: "123", path: "/", canvasPosition: "25|25"})
+    //     let obj = Form.create({id: "123", path: "/", canvasPosition: "25|25"})
     //     if(!(obj && obj["id"] === "123" && obj["path"] === "/" && obj["canvasPosition"] === "25|25")) {
     //         return "Not all fields initialized!"
     //     }
@@ -55,7 +64,7 @@ window.testSuites.push( class testObservedObject {
     //     }
 
     //     let json = {id: "123", path: "/", canvasPosition: "25|25"}
-    //     let obj = Form.decode({id: "123", path: "/", canvasPosition: "25|25"})
+    //     let obj = Form.create({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

@@ -79,7 +79,7 @@ window.testSuites.push( class testRender {
         }
 
         class File extends Shadow {
-            $$form = Form.decode({id: "123", path: "/", canvasPosition: "25|25"})
+            $$form = Form.create({id: "123", path: "/", canvasPosition: "25|25"})
 
             render = () => {
                 p(this.form.path)
@@ -101,7 +101,7 @@ window.testSuites.push( class testRender {
             $canvasPosition
         }
 
-        let object = Form.decode({id: "123", path: "/", canvasPosition: "25|25"});
+        let object = Form.create({id: "123", path: "/", canvasPosition: "25|25"});
 
         register(class File extends Shadow {
             $$form
@@ -132,7 +132,7 @@ window.testSuites.push( class testRender {
             $children
         }
 
-        let object = Form.decode({id: "123", children: [{path: "berry"}, {path: "blue"}]});
+        let object = Form.create({id: "123", children: [{path: "berry"}, {path: "blue"}]});
 
         register(class File extends Shadow {
             $$form

el.js

@@ -1,28 +0,0 @@
-class Index extends HTMLElement {
-
-    css = /*css*/ `
-        index-el {
-
-        }
-    `
-
-    html = /*html*/ `
-
-    `
-
-    constructor() {
-        super();
-        
-        addStyle(this.css);
-        this.innerHTML = this.html;
-    }
-
-    connectedCallback() {
-
-    }
-
-}
-
-customElements.define('index-el', Index);
-export default Index;
-

index.js

@@ -213,7 +213,7 @@ class ObservedObject {
         this._observers = {}
     }
 
-    static decode(obj) {
+    static create(obj = {}) {
         let instance = new this()
 
         Object.keys(instance).forEach((key) => {
@@ -221,6 +221,7 @@ class ObservedObject {
                 key = key.slice(1)
                 instance._observers[key] = new Map()
                 const backingFieldName = `_${key}`;
+                instance[backingFieldName] = instance["$" + key]
                 Object.defineProperty(instance, key, {
                     set: function(newValue) {
                         if(Array.isArray(newValue) && newValue.parent === undefined) {
@@ -254,7 +255,7 @@ class ObservedObject {
             if(obj[key]) {
                 instance[key] = obj[key]
             } else {
-                if(!instance[key]) {
+                if(instance[key] === undefined || instance[key] === null) {
                     throw new Error(`ObservedObject: Non-default value "${key}" must be initialized!`)
                 }
             }
@@ -676,6 +677,18 @@ window.Circle = function(text = "") {
     return div
 }
 
+window.Triangle = function() {
+    let div = document.createElement("div")
+    div.style.cssText += `
+        width: 20px;
+        height: 17.3px;
+        clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
+        background: black;
+    `
+    Registry.render(div)
+    return div
+}
+
 /* PROTOTYPE FUNCTIONS */
 
 Array.prototype.last = function() {

navigation.js

@@ -1,49 +0,0 @@
-let oldPushState = history.pushState;
-history.pushState = function pushState() {
-    let ret = oldPushState.apply(this, arguments);
-    window.dispatchEvent(new Event('pushstate'));
-    window.dispatchEvent(new Event('locationchange'));
-    return ret;
-};
-window.addEventListener('popstate', () => {
-    window.dispatchEvent(new Event('locationchange'));
-});
-  
-window.addEventListener('locationchange', locationChange);
-let urlBeforeChange = window.location.href;
-  
-window.navigateTo = function(url) {
-    window.history.pushState({}, '', url);
-}
-
-Object.defineProperty(window, 'routes', {
-    configurable: true,
-    enumerable: true,
-    set: function(newValue) {
-      Object.defineProperty(window, 'routes', {
-        value: newValue,
-        writable: false,
-        configurable: false,
-        enumerable: true
-      });
-  
-      locationChange();
-    },
-    get: function() {
-      return window.routes;
-    }
-});
-function locationChange() {
-    console.log("location change")
-    let URL = window.location.pathname.split("/").filter(d => (d !== 'Web') && (!d.includes('.html'))).join("/")
-    if(URL === "") URL = "/"
-    let wrapper = document.querySelector("#wrapper");
-    if(wrapper) {
-        wrapper.replaceWith(new window.routes[URL]())
-        document.body.children[0].id = "wrapper"
-    } else {
-        document.body.prepend(new window.routes[URL]())
-        document.body.children[0].id = "wrapper"
-    }
-    urlBeforeChange = window.location.href;
-}

navtemplate.js

@@ -1,60 +0,0 @@
-class NavigationIndex extends HTMLElement {
-    urlBeforeChange;
-
-    css = /*css*/ `
-        navigation-index {
-            
-        }
-    `
-
-    html = /*html*/ `
-
-    `
-
-    constructor() {
-        super();
-        quill.addStyle(this.css);
-        this.innerHTML = this.html;
-    }
-
-    connectedCallback() {
-        this.listenForNavigation();
-    }
-
-    listenForNavigation() {
-        let oldPushState = history.pushState;
-        history.pushState = function pushState() {
-            let ret = oldPushState.apply(this, arguments);
-            window.dispatchEvent(new Event('pushstate'));
-            window.dispatchEvent(new Event('locationchange'));
-            return ret;
-        };
-
-        window.addEventListener('popstate', () => {
-            window.dispatchEvent(new Event('locationchange'));
-        });
-        
-        window.addEventListener('locationchange', this.locationChange);
-
-        this.urlBeforeChange = window.location.href;
-    }
-
-    locationChange = async () => {
-        let splitURL = window.location.pathname.split("/");
-        let urlPrefix = splitURL.slice(0, -1).join('/');
-        let urlEnding = splitURL[splitURL.length-1];
-        if(urlEnding === '') {
-            this.innerHTML = this.html;
-        } else {
-            let pascalizedEnding = urlEnding.replace(/(^\w|-\w)/g, (urlEnding) => urlEnding.replace(/-/, "").toUpperCase());
-            import(`.${urlPrefix}/${pascalizedEnding}/${pascalizedEnding}.js`)
-            let htmlTag = urlEnding.includes("-") ? urlEnding : urlEnding + "-wrapper";
-            this.innerHTML = `<${htmlTag}></${htmlTag}>`
-        }
-        this.urlBeforeChange = window.location.href;
-    }
-
-}
-
-customElements.define('navigation-index', NavigationIndex);
-export default NavigationIndex;

notes.txt

@@ -1,3 +1,32 @@
+
+
+
+
+Shadow.File = (param) => new class {
+    trippy = "asd"
+
+    constructor() {
+        console.log(param)
+    }
+}
+
+console.log(Shadow.File("as"))
+
+
+ObservedObject.WindowState = () => ({
+    sidebarOut: false,
+    children: null
+})
+let windowState = ObservedObject.WindowState()
+console.log(windowState)
+
+
+Shadow(class File {
+
+}, "file-")
+
+
+
 3/16
 const TestClass = () => new class {
     constructor() {

todo.txt

@@ -1,11 +0,0 @@
-Constructor Parameters
-
-    In swift, can choose to pass in parameters from outside or not
-    This works because of labels and ability to override based on parameters
-
-    In JS, how would I init state from within but pass in another parameter?
-
-Refresh in Subpages
-
-    The hosting service needs to redirect all pages to the main index.html
-    This is the problem with Forum - you navigate, it's fine, refresh, goes away