stack state working (when top-level parent)

Test/state/state.test.js

@@ -52,12 +52,13 @@ window.testSuites.push( class testState {
 
             render() {
                 VStack(() => {
-                    let asd = this.state.logs.length * 2
+                    this.state.logs.forEach((log) => {
-                    p("hi")
+                        p(log)
-                        .fontSize(asd, vw)
+                    })
                 })
                 .onAppear(() => {
-                    this.state.logs = ["one", "two"]
+                    this.state.logs.push("one")
+                    this.state.logs.push("two")
                 })
             }
         }
@@ -65,7 +66,8 @@ window.testSuites.push( class testState {
         register(Home, randomName("home"))
         window.Home()
 
-        if(!($("p").style.fontSize === "4vw")) return "state did not update!"
+        if(!$("p")) return "no p's rendered"
+        if($$("p")[0].innerText !== "one") return "state did not update!"
+        if($$("p")[1].innerText !== "two") return "state did not update!"
     }
-
 })

index.js

@@ -553,12 +553,6 @@ HTMLElement.prototype.fontSize = StyleFunction(function(value, unit = "px") {
     return this
 })
 
-function checkPositionType(el) {
-    let computed = window.getComputedStyle(el).position
-    if(!(computed === "absolute" || computed === "fixed")) {
-        el.style.position = "absolute"
-    }
-}
 
 HTMLElement.prototype.width = function(value, unit = "px") {
     if ((typeof value !== 'number' && value !== "auto") || Number.isNaN(value))
@@ -580,6 +574,13 @@ HTMLElement.prototype.height = function(value, unit = "px") {
     return this
 }
 
+function checkPositionType(el) {
+    let computed = window.getComputedStyle(el).position
+    if(!(computed === "absolute" || computed === "fixed")) {
+        el.style.position = "absolute"
+    }
+}
+
 HTMLElement.prototype.x = function(value, unit = "px") {
     if (typeof value !== 'number' || isNaN(value))
         throw new Error(`Invalid value: ${value}. Expected a number.`);
@@ -821,25 +822,35 @@ window.textarea = function(placeholder = "") {
 
 /* STACKS */
 
+handleStack = function(cb, name, styles="") {
+    let nowRendering = quill.rendering[quill.rendering.length-1]
+    if (nowRendering.innerHTML.trim() === "" && !quill.isStack(nowRendering)) {
+        nowRendering.style.cssText += styles
+        nowRendering.classList.add(name)
+        cb()
+        if(quill.lastState) {
+            nowRendering.addStateWatcher(quill.lastState, () => {
+                nowRendering.innerHTML = ""
+                cb()
+            })
+        }
+        return nowRendering
+    } else {
+        let div = document.createElement("div")
+        div.classList.add(name)
+        div.style.cssText += styles
+        div.render = cb
+        quill.render(div)
+        return div
+    }
+}
+
 window.VStack = function (cb = () => {}) {
     let styles = `
         display: flex;
         flex-direction: column;
     `
-    let nowRendering = quill.rendering[quill.rendering.length-1]
+    return handleStack(cb, "VStack", styles)
-    if (nowRendering.innerHTML.trim() === "" && !quill.isStack(nowRendering)) {
-        nowRendering.style.cssText += styles
-        nowRendering.classList.add("VStack")
-        cb()
-        return nowRendering
-    }
-
-    let div = document.createElement("div")
-    div.classList.add("VStack")
-    div.style.cssText += styles
-    div.render = cb
-    quill.render(div)
-    return div
 }
 
 window.HStack = function (cb = () => {}) {
@@ -847,35 +858,11 @@ window.HStack = function (cb = () => {}) {
         display: flex;
         flex-direction: row;
     `;
-    let nowRendering = quill.rendering[quill.rendering.length - 1];
+    return handleStack(cb, "HStack", styles)
-    if (nowRendering.innerHTML.trim() === "" && !quill.isStack(nowRendering)) {
-        nowRendering.style.cssText += styles;
-        nowRendering.classList.add("HStack")
-        cb();
-        return nowRendering;
-    }
-
-    let div = document.createElement("div");
-    div.classList.add("HStack");
-    div.style.cssText += styles;
-    div.render = cb;
-    quill.render(div);
-    return div;
 };
 
 window.ZStack = function (cb = () => {}) {
-    let nowRendering = quill.rendering[quill.rendering.length - 1];
+    return handleStack(cb, "ZStack")
-    if (nowRendering.innerHTML.trim() === "" && !quill.isStack(nowRendering)) {
-        nowRendering.classList.add("ZStack")
-        cb();
-        return nowRendering;
-    }
-
-    let div = document.createElement("div");
-    div.classList.add("ZStack");
-    div.render = cb;
-    quill.render(div);
-    return div;
 };
 
 /* SHAPES */