state array working

Test/state/state.test.js

@@ -33,7 +33,7 @@ window.testSuites.push( class testState {
                         .fontSize(() => {return this.state.logs.length > 0 ? [2, em] : [1, em]})
                 })
                 .onAppear(() => {
-                    this.state.logs = ["one", "two"]
+                    this.state.logs.push("one")
                 })
             }
         }

index.js

@@ -228,25 +228,58 @@ window.register = (el, tagname) => {
     window[el.prototype.constructor.name] = function (...params) {
         let instance = new el(...params)
         if(instance.state) {
-            let proxy = new Proxy(instance.state, {
+            const proxyCache = new WeakMap();
-                get(target, prop, receiver) {
-                    if (typeof prop === "symbol") { // Ignore internal / symbol accesses
-                        return Reflect.get(target, prop, receiver);
-                    }
 
-                    quill.lastLastState = quill.lastState
+            function reactive(value, path=[]) {
-                    quill.lastState = prop;
+                if (value && typeof value === "object") {
-                    return Reflect.get(target, prop, receiver);
+                    if (proxyCache.has(value)) return proxyCache.get(value);
-                },
-                set(target, prop, value, receiver) {
-                    const oldValue = target[prop];
-                    if (oldValue === value) return true;
 
-                    const result = Reflect.set(target, prop, value, receiver);
+                    const p = new Proxy(value, createHandlers(path));
-                    instance.stateWatchers[prop].forEach((cb) => cb())
+                    proxyCache.set(value, p);
-                    return result;
+                    return p;
                 }
-            });
+                return value;
+            }
+
+            function isNumericKey(prop) {
+                return typeof prop === "string" && prop !== "" && String(+prop) === prop;
+            }
+
+            function createHandlers(path) {
+                return {
+                    get(target, prop, receiver) {
+                        if (typeof prop === "symbol") {
+                            return Reflect.get(target, prop, receiver);
+                        }
+
+                        let nextPath = (Array.isArray(target) && !isNumericKey(prop)) ? path : path.concat(prop) // To filter out arr.length, arr.map, arr.forEach, etc.
+                        quill.lastState = nextPath.join(".");
+    
+                        const v = Reflect.get(target, prop, receiver);
+                        return reactive(v, nextPath);
+                    },
+    
+                    set(target, prop, value, receiver) {
+                        const oldLength = Array.isArray(target) ? target.length : undefined;
+                        const oldValue = target[prop];
+                        if (oldValue === value) return true;
+
+                        const result = Reflect.set(target, prop, value, receiver);
+
+                        let changedPath = (Array.isArray(target) && (!isNumericKey(prop) || target.length !== oldLength)) ? path : path.concat(prop).join("."); // To filter out arr.length, arr.map, arr.forEach, and also a push/pop/unshift.
+                        const watchers = instance.stateWatchers[changedPath];
+
+                        if (watchers) {
+                            watchers.forEach(cb => cb());
+                        }
+
+                        return result;
+                    }
+                };
+            }
+
+            let proxy = reactive(instance.state)
+
             Object.defineProperty(instance, "state", {
                 value: proxy,
                 writable: false,