resonantjs 1.1.1 → 1.1.3

package/examples/example-basic.html

@@ -6,7 +6,7 @@
             rel="stylesheet"
             href="https://cdn.jsdelivr.net/npm/@picocss/pico@2.0.6/css/pico.min.css"
     />
-    <script src="https://unpkg.com/resonantjs@latest/resonant.min.js"></script>
+    <script src="../resonant.js"></script>
     <style>
         section.grid {
             padding: 1rem;
@@ -40,6 +40,17 @@
         <button onclick="counter++">Increment Counter</button>
     </section>
 
+    <section class="grid">
+        <code class="code">
+            resonantJs.add("counter", <span res="counter">0</span>);
+        </code>
+        <code class="code">
+            Counter: &lt;span res="counter"&gt;&lt;/span&gt;<br/><br/>
+            &lt;button onclick="counter++"&gt;Increment Counter&lt;/button&gt;<br/><br/>
+            &lt;div res-display="counter &lt; 10"&gt;contents&lt;/div&gt;<br/>
+        </code>
+    </section>
+
     <!-- Demonstrate object property binding -->
     <section class="grid" res="user">
         <div>
@@ -67,6 +78,26 @@
         </div>
     </section>
 
+    <section class="grid" res="user">
+        <code class="code">
+            resonantJs.add({<br/>
+            &nbsp;&nbsp;user: {<br/>
+            &nbsp;&nbsp;&nbsp;&nbsp;firstname: "<span res-prop="firstname"></span>",<br/>
+            &nbsp;&nbsp;&nbsp;&nbsp;lastname: "<span res-prop="lastname"></span>"<br/>
+            &nbsp;&nbsp;}<br/>
+            });
+        </code>
+        <code class="code">
+            &lt;div res="user"&gt;<br/>
+            &nbsp;&nbsp;&nbsp;&nbsp;&lt;input type="text" res-prop="firstname" /&gt;<br/>
+            &nbsp;&nbsp;&nbsp;&nbsp;&lt;input type="text" res-prop="lastname" /&gt;<br/>
+            &nbsp;&nbsp;&nbsp;&nbsp;&lt;span res-prop="firstname"&gt;&lt;/span&gt;<br/>
+            &nbsp;&nbsp;&nbsp;&nbsp;&lt;span res-prop="lastname"&gt;&lt;/span&gt;<br/>
+            &lt;/div&gt;
+            <br/><br/>
+        </code>
+    </section>
+
     <!-- Demonstrate dynamic list rendering -->
     <section class="grid">
         <div>
@@ -77,8 +108,84 @@
                 </li>
             </ul>
         </div>
+        <div>
+            <button onclick="addProjectMember()">Add</button>
+            <button onclick="toggleProjectMemberName()">Toggle Alice's Name</button>
+        </div>
 
-        <button onclick="addProjectMember()">Add Project Member</button>
+    </section>
+
+    <section class="grid">
+        <code class="code">
+            resonantJs.add({<br/>
+            &nbsp;&nbsp;projectTeam: [<br/>
+            &nbsp;&nbsp;&nbsp;&nbsp;{ name: "Alice", role: "Developer" },<br/>
+            &nbsp;&nbsp;&nbsp;&nbsp;{ name: "Bob", role: "Designer" }<br/>
+            &nbsp;&nbsp;]<br/>
+            });<br/><br/>
+
+            function addProjectMember() {<br/>
+            &nbsp;&nbsp;const newMember = { name: "Charlie", role: "Product Manager" };<br/>
+            &nbsp;&nbsp;projectTeam.push(newMember);<br/>
+            }
+        </code>
+        <code class="code">
+            &lt;ul res="projectTeam"&gt;<br/>
+            &nbsp;&nbsp;&lt;li&gt;<br/>
+            &nbsp;&nbsp;&nbsp;&nbsp;&lt;span res-prop="name"&gt;&lt;/span&gt - &lt;span res-prop="role"&gt;&lt;/span&gt<br/>
+            &nbsp;&nbsp;&lt;/li&gt;<br/>
+            &lt;/ul&gt;<br/><br/>
+            &lt;button onclick="addProjectMember()"&gt;Add Project Member&lt;/button&gt;
+        </code>
+    </section>
+    <section>
+        <h1>Summary</h1>
+        <p>
+            Resonant.js is a simple library that allows you to bind JavaScript variables to HTML elements.
+            This allows you to create dynamic web applications without the need for complex frameworks.
+        </p>
+        <h2>HTML properties</h2>
+        <table>
+            <tr>
+                <td>res</td>
+                <td>Bind an object to a section of HTML</td>
+            </tr>
+            <tr>
+                <td>res-prop</td>
+                <td>Bind an object property to an HTML element, used when the defined variable is an object array</td>
+            </tr>
+            <tr>
+                <td>res-display</td>
+                <td>Conditionally display an element based on a JavaScript expression</td>
+            </tr>
+            <tr>
+                <td>res-style, res-styles</td>
+                <td>Bind a style or styles object to an HTML element conditionally</td>
+            </tr>
+            <tr>
+                <td>res-onclick, res-onclick-remove</td>
+                <td>Bind an onclick event to an HTML element</td>
+            </tr>
+        </table>
+        <h2>Javascript Functions</h2>
+        <table>
+            <tr>
+                <td>const resonantJs = new Resonant();</td>
+                <td>Initialize the Resonant object</td>
+            </tr>
+            <tr>
+                <td>resonantJs.add("variableName", optionalBooleanForPersistence)</td>
+                <td>Bind a variable to the Resonant object</td>
+            </tr>
+            <tr>
+                <td>resonantJs.addAll()</td>
+                <td>Bind multiple variables to the Resonant object at once</td>
+            </tr>
+            <tr>
+                <td>resonantJs.addCallback("variableName", (objectReturned) => {})</td>
+                <td>Bind a callback function to a variable</td>
+            </tr>
+        </table>
     </section>
 </main>
 
@@ -92,8 +199,7 @@
     resonantJs.addAll({
         user: {
             firstname: "John",
-            lastname: "Doe",
-            email: ""
+            lastname: "Doe"
         },
         projectTeam: [
             { name: "Alice", role: "Developer" },
@@ -116,6 +222,12 @@
         const newMember = { name: "Charlie", role: "Product Manager" };
         projectTeam.push(newMember);
     }
+
+    //Silly function to demonstrate dynamic list rerendering
+    function toggleProjectMemberName() {
+        const alice = projectTeam[0];
+        alice.name = alice.name === "Alice" ? "Alicia" : "Alice";
+    }
 </script>
 </body>
 </html>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "resonantjs",
-  "version": "1.1.1",
+  "version": "1.1.3",
   "description": "A lightweight JavaScript framework that enables reactive data-binding for building dynamic and responsive web applications. It simplifies creating interactive UIs by automatically updating the DOM when your data changes.",
   "main": "resonant.js",
   "repository": {

package/resonant.js

@@ -1,6 +1,6 @@
 class ObservableArray extends Array {
     constructor(variableName, resonantInstance, ...args) {
-        if(resonantInstance === undefined) {
+        if (resonantInstance === undefined) {
             return super(...args);
         }
         super(...args);
@@ -13,6 +13,7 @@ class ObservableArray extends Array {
 
         this.forEach((item, index) => {
             if (typeof item === 'object') {
+                this._setKeyForObjectAndChildObjects(item, index);
                 this[index] = this._createProxy(item, index);
             }
         });
@@ -22,12 +23,53 @@ class ObservableArray extends Array {
         }
     }
 
+    _setKeyForObjectAndChildObjects(obj, index) {
+        if (typeof obj === 'object') {
+            obj.key = index + '-' + this._generateKeyByContentCheckSum(obj);
+            Object.keys(obj).forEach(key => {
+                this._setKeyForObjectAndChildObjects(obj[key], index);
+            });
+        }
+    }
+
+    _generateKeyByContentCheckSum(obj) {
+        const removeKeysRecursively = (obj) => {
+            if (!obj || typeof obj !== 'object') return obj;
+
+            if (Array.isArray(obj)) {
+                return obj.map(item => removeKeysRecursively(item));
+            }
+
+            const newObj = {...obj};
+            delete newObj.key;
+
+            Object.keys(newObj).forEach(key => {
+                if (typeof newObj[key] === 'object' && newObj[key] !== null) {
+                    newObj[key] = removeKeysRecursively(newObj[key]);
+                }
+            });
+
+            return newObj;
+        };
+
+        const objForHash = removeKeysRecursively(obj);
+        const str = JSON.stringify(objForHash);
+        let hash = 0;
+        for (let i = 0; i < str.length; i++) {
+            const char = str.charCodeAt(i);
+            hash = ((hash << 5) - hash) + char;
+            hash = hash & hash;
+        }
+        return Math.abs(hash).toString(36);
+    }
+
     _createProxy(item, index) {
         return new Proxy(item, {
             set: (target, property, value) => {
                 if (target[property] !== value) {
                     const oldValue = target[property];
                     target[property] = value;
+                    this._setKeyForObjectAndChildObjects(item, index);
                     this.resonantInstance._queueUpdate(this.variableName, 'modified', target, property, oldValue, index);
                 }
                 return true;
@@ -35,8 +77,11 @@ class ObservableArray extends Array {
         });
     }
 
-    //temp fix for issues
     forceUpdate() {
+        this.forEach((item, index) => {
+            console.log('forceUpdate', item, index);
+            this._setKeyForObjectAndChildObjects(item, index);
+        });
         this.resonantInstance.arrayDataChangeDetection[this.variableName] = this.slice();
         this.resonantInstance._queueUpdate(this.variableName, 'modified', this.slice());
     }
@@ -49,6 +94,7 @@ class ObservableArray extends Array {
     push(...args) {
         args = args.map((item, index) => {
             if (typeof item === 'object') {
+                this._setKeyForObjectAndChildObjects(item, this.length + index);
                 return this._createProxy(item, this.length + index);
             }
             return item;
@@ -102,9 +148,9 @@ class ObservableArray extends Array {
             }
 
             this.resonantInstance.arrayDataChangeDetection[this.variableName] = this.slice();
-
             const oldValue = this[index];
             this[index] = value;
+
             this.resonantInstance._queueUpdate(this.variableName, action, this[index], index, oldValue);
         }
         return true;
@@ -114,9 +160,7 @@ class ObservableArray extends Array {
         const oldValue = this[index];
         this.isDeleting = true;
         this.splice(index, 1);
-
         this.resonantInstance.arrayDataChangeDetection[this.variableName] = this.slice();
-
         this.resonantInstance._queueUpdate(this.variableName, 'removed', null, index, oldValue);
         this.isDeleting = false;
         return true;
@@ -126,7 +170,6 @@ class ObservableArray extends Array {
         if(this.resonantInstance === undefined || actuallyFilter === false) {
             return super.filter(filter);
         }
-
         const result = super.filter(filter);
         this.resonantInstance.arrayDataChangeDetection[this.variableName] = this.slice();
         this.resonantInstance._queueUpdate(this.variableName, 'filtered');
@@ -142,12 +185,28 @@ class Resonant {
         this.arrayDataChangeDetection = {};
     }
 
+    _handleInputElement(element, value, onChangeCallback) {
+        if (element.type === 'checkbox') {
+            element.checked = value;
+            if (!element.hasAttribute('data-resonant-bound')) {
+                element.onchange = () => onChangeCallback(element.checked);
+                element.setAttribute('data-resonant-bound', 'true');
+            }
+        } else {
+            element.value = value;
+            if (!element.hasAttribute('data-resonant-bound')) {
+                element.oninput = () => onChangeCallback(element.value);
+                element.setAttribute('data-resonant-bound', 'true');
+            }
+        }
+    }
+
     add(variableName, value, persist) {
         value = this.persist(variableName, value, persist);
         if (Array.isArray(value)) {
             this.data[variableName] = new ObservableArray(variableName, this, ...value);
             this.arrayDataChangeDetection[variableName] = this.data[variableName].slice();
-        } else if (typeof value === 'object') {
+        } else if (typeof value === 'object' && value !== null) {
             this.data[variableName] = this._createObject(variableName, value);
         } else {
             this.data[variableName] = value;
@@ -162,8 +221,8 @@ class Resonant {
             return value;
         }
         var found = localStorage.getItem('res_' + variableName);
-        if (found !== null && found !== undefined){
-            return JSON.parse(localStorage.getItem('res_' + variableName));
+        if (found !== null && found !== undefined) {
+            return JSON.parse(found);
         } else {
             localStorage.setItem('res_' + variableName, JSON.stringify(value));
             return value;
@@ -182,6 +241,10 @@ class Resonant {
         });
     }
 
+    _resolveValue(instance, key, override = null) {
+        return override ?? instance[key];
+    }
+
     _createObject(variableName, obj) {
         obj[Symbol('isProxy')] = true;
         return new Proxy(obj, {
@@ -196,15 +259,56 @@ class Resonant {
         });
     }
 
+    _evaluateDisplayCondition(element, item, condition) {
+        try {
+            const show = new Function('item', `return ${condition}`)(item);
+            element.style.display = show ? '' : 'none';
+        } catch (e) {
+            console.error(`Error evaluating display condition: ${condition}`, e);
+        }
+    }
+
+    _handleDisplayElements(parentElement, instance) {
+        const displayElements = parentElement.querySelectorAll('[res-display]');
+        displayElements.forEach(displayEl => {
+            const condition = displayEl.getAttribute('res-display') || '';
+            this._evaluateDisplayCondition(displayEl, instance, condition);
+        });
+    }
+
+    _bindClickEvents(parentElement, instance, arrayValue) {
+        const onclickElements = parentElement.querySelectorAll('[res-onclick], [res-onclick-remove]');
+        onclickElements.forEach(onclickEl => {
+            const functionName = onclickEl.getAttribute('res-onclick');
+            const removeKey = onclickEl.getAttribute('res-onclick-remove');
+
+            if (functionName) {
+                onclickEl.onclick = () => {
+                    const func = new Function('item', `return ${functionName}(item)`);
+                    func(instance);
+                };
+            }
+            if (removeKey) {
+                onclickEl.onclick = () => {
+                    if (arrayValue) {
+                        const removeIdx = arrayValue.findIndex(t => t[removeKey] === instance[removeKey]);
+                        if (removeIdx !== -1) {
+                            arrayValue.splice(removeIdx, 1);
+                        }
+                    }
+                };
+            }
+        });
+    }
+
     _defineProperty(variableName) {
         Object.defineProperty(window, variableName, {
             get: () => this.data[variableName],
             set: (newValue) => {
                 if (Array.isArray(newValue)) {
                     this.data[variableName] = new ObservableArray(variableName, this, ...newValue);
-                    this.arrayDataChangeDetection[variableName] = this.data[variableName].slice(); // Create a copy for change detection
-
-                } else if (typeof newValue === 'object') {
+                    this.arrayDataChangeDetection[variableName] = this.data[variableName].slice();
+                } else if (typeof newValue === 'object' && newValue !== null) {
                     this.data[variableName] = this._createObject(variableName, newValue);
                 } else {
                     this.data[variableName] = newValue;
@@ -212,7 +316,8 @@ class Resonant {
                 this.updateElement(variableName);
                 this.updateDisplayConditionalsFor(variableName);
                 this.updateStylesFor(variableName);
-                if (!Array.isArray(newValue) && typeof newValue !== 'object') {
+
+                if (!Array.isArray(newValue) && (typeof newValue !== 'object' || newValue === null)) {
                     this._queueUpdate(variableName, 'modified', this.data[variableName]);
                 }
             }
@@ -223,7 +328,6 @@ class Resonant {
         if (!this.pendingUpdates.has(variableName)) {
             this.pendingUpdates.set(variableName, []);
         }
-
         this.pendingUpdates.get(variableName).push({ action, item, property, oldValue });
 
         if (this.pendingUpdates.get(variableName).length === 1) {
@@ -232,16 +336,19 @@ class Resonant {
                 this.updatePersistantData(variableName);
                 this.pendingUpdates.delete(variableName);
 
-                updates = updates.filter((v, i, a) => a.findIndex(t => (t.property === v.property && t.action === v.action)) === i);
+                updates = updates.filter((v, i, a) =>
+                    a.findIndex(t => (t.property === v.property && t.action === v.action)) === i
+                );
+
                 updates.forEach(update => {
                     this._triggerCallbacks(variableName, update);
                 });
+
                 this.updateElement(variableName);
                 this.updateDisplayConditionalsFor(variableName);
                 this.updateStylesFor(variableName);
             }, 0);
         }
-
     }
 
     _triggerCallbacks(variableName, callbackData) {
@@ -258,55 +365,27 @@ class Resonant {
         const value = this.data[variableName];
 
         elements.forEach(element => {
-            element.value = value;
             if (element.tagName === 'INPUT' || element.tagName === 'TEXTAREA') {
-                if (!element.hasAttribute('data-resonant-bound')) {
-                    element.oninput = () => {
-                        this.data[variableName] = element.value;
-                        this._queueUpdate(variableName, 'modified', this.data[variableName]);
-                    };
-                    element.setAttribute('data-resonant-bound', 'true');
-                }
-            } else if (Array.isArray(value)) {
-                element.querySelectorAll(`[res="${variableName}"][res-rendered=true]`).forEach(el => el.remove());
+                this._handleInputElement(element, value, (newValue) => {
+                    this.data[variableName] = newValue;
+                    this._queueUpdate(variableName, 'modified', this.data[variableName]);
+                });
+            }
+            else if (Array.isArray(value)) {
+                element.querySelectorAll(`[res="${variableName}"][res-rendered="true"]`).forEach(el => el.remove());
                 this._renderArray(variableName, element);
-            } else if (typeof value === 'object') {
-                const subElements = element.querySelectorAll(`[res-prop]`);
+            }
+            else if (typeof value === 'object' && value !== null) {
+                const subElements = element.querySelectorAll('[res-prop]');
                 subElements.forEach(subEl => {
                     const key = subEl.getAttribute('res-prop');
                     if (key && key in value) {
-                        if (!subEl.hasAttribute('data-resonant-bound')) {
-                            if (subEl.tagName === 'INPUT' || subEl.tagName === 'TEXTAREA') {
-                                if (subEl.type === 'checkbox') {
-                                    subEl.checked = value[key];
-                                    subEl.onchange = () => {
-                                        this.data[variableName][key] = subEl.checked;
-                                    };
-                                } else {
-                                    subEl.value = value[key];
-                                    subEl.oninput = () => {
-                                        this.data[variableName][key] = subEl.value;
-                                    };
-                                }
-                            } else {
-                                subEl.innerHTML = value[key];
-                            }
-                            subEl.setAttribute('data-resonant-bound', 'true');
-                        } else {
-                            if (subEl.tagName === 'INPUT' || subEl.tagName === 'TEXTAREA') {
-                                if (subEl.type === 'checkbox') {
-                                    subEl.checked = value[key];
-                                } else {
-                                    subEl.value = value[key];
-                                }
-                            } else {
-                                subEl.innerHTML = value[key];
-                            }
-                        }
+                        this._renderObjectProperty(subEl, value[key], variableName, key);
                     }
                 });
-            } else {
-                element.innerHTML = value;
+            }
+            else {
+                element.innerHTML = value ?? '';
             }
         });
 
@@ -314,25 +393,151 @@ class Resonant {
         this.updateStylesFor(variableName);
     }
 
+    _renderObjectProperty(subEl, propValue, parentVarName, key) {
+        if ((subEl.tagName === 'INPUT' || subEl.tagName === 'TEXTAREA') &&
+            !Array.isArray(propValue) &&
+            typeof propValue !== 'object') {
+            this._handleInputElement(subEl, propValue, (newValue) => {
+                window[parentVarName][key] = newValue;
+            });
+        }
+        else if (Array.isArray(propValue)) {
+            this._renderNestedArray(subEl, propValue);
+        }
+        else if (typeof propValue === 'object' && propValue !== null) {
+            const nestedElements = subEl.querySelectorAll('[res-prop]');
+            nestedElements.forEach(nestedEl => {
+                const nestedKey = nestedEl.getAttribute('res-prop');
+                if (nestedKey && nestedKey in propValue) {
+                    this._renderObjectProperty(nestedEl, propValue[nestedKey], parentVarName, nestedKey);
+                }
+            });
+        }
+        else {
+            subEl.innerHTML = propValue ?? '';
+        }
+    }
+
+    _renderArray(variableName, el) {
+        const container = el.hasAttribute('res') && el.parentElement ? el.parentElement : el;
+
+        let template;
+        if (!window[variableName + "_template"]) {
+            template = el.cloneNode(true);
+            window[variableName + "_template"] = template;
+            el.style.display = 'none';
+            el.setAttribute('res-template', 'true');
+        } else {
+            template = window[variableName + "_template"];
+        }
+
+        const existingElements = new Map();
+        container.querySelectorAll(`[res="${variableName}"][res-rendered="true"]`).forEach(element => {
+            const key = element.getAttribute('res-key');
+            if (key) {
+                existingElements.set(key, element);
+            }
+        });
+
+        container.querySelectorAll(`[res="${variableName}"][res-rendered="true"]`).forEach(el => el.remove());
+
+        this.data[variableName].forEach((instance, index) => {
+            const elementKey = instance.key;
+            let elementToUse;
+
+            if (existingElements.has(elementKey)) {
+                elementToUse = existingElements.get(elementKey);
+                existingElements.delete(elementKey);
+                elementToUse.setAttribute("res-index", index);
+            } else {
+                elementToUse = template.cloneNode(true);
+                elementToUse.removeAttribute('res-template');
+                elementToUse.style.display = '';
+                elementToUse.setAttribute("res-rendered", "true");
+                elementToUse.setAttribute("res-key", elementKey);
+                elementToUse.setAttribute("res-index", index);
+
+                for (let key in instance) {
+                    let overrideInstanceValue = null;
+                    let subEl = elementToUse.querySelector(`[res-prop="${key}"]`);
+                    if (!subEl) {
+                        subEl = elementToUse.querySelector('[res-prop=""]');
+                        overrideInstanceValue = instance;
+                    }
+                    if (subEl) {
+                        const value = this._resolveValue(instance, key, overrideInstanceValue);
+
+                        if ((subEl.tagName === 'INPUT' || subEl.tagName === 'TEXTAREA') &&
+                            !Array.isArray(value) &&
+                            typeof value !== 'object') {
+                            this._handleInputElement(
+                                subEl,
+                                value,
+                                (newValue) => {
+                                    instance[key] = newValue;
+                                    this._queueUpdate(variableName, 'modified', instance, key, value);
+                                }
+                            );
+                        }
+                        else if (Array.isArray(value)) {
+                            this._renderNestedArray(subEl, value);
+                        }
+                        else if (typeof value === 'object' && value !== null) {
+                            const nestedElements = subEl.querySelectorAll('[res-prop]');
+                            nestedElements.forEach(nestedEl => {
+                                const nestedKey = nestedEl.getAttribute('res-prop');
+                                if (nestedKey && nestedKey in value) {
+                                    this._renderObjectProperty(nestedEl, value[nestedKey], variableName, nestedKey);
+                                }
+                            });
+                        }
+                        else {
+                            subEl.innerHTML = value ?? '';
+                        }
+                    }
+                }
+            }
+
+            this._handleDisplayElements(elementToUse, instance);
+            this._bindClickEvents(elementToUse, instance, this.data[variableName]);
+
+            container.appendChild(elementToUse);
+        });
+    }
+    _renderNestedArray(subEl, arrayValue) {
+        const template = subEl.cloneNode(true);
+        subEl.innerHTML = '';
+
+        subEl.removeAttribute('res-prop');
+
+        arrayValue.forEach((item, idx) => {
+            const cloned = template.cloneNode(true);
+            cloned.setAttribute('res-rendered', 'true');
+
+            const nestedEls = cloned.querySelectorAll('[res-prop]');
+            nestedEls.forEach(nestedEl => {
+                const nestedKey = nestedEl.getAttribute('res-prop');
+                if (nestedKey && nestedKey in item) {
+                    this._renderObjectProperty(nestedEl, item[nestedKey], null, nestedKey);
+                }
+            });
+
+            this._handleDisplayElements(cloned, item);
+            this._bindClickEvents(cloned, item, arrayValue);
+
+            subEl.appendChild(cloned);
+        });
+    }
     updateDisplayConditionalsFor(variableName) {
         const conditionalElements = document.querySelectorAll(`[res-display*="${variableName}"]`);
         conditionalElements.forEach(conditionalElement => {
             const condition = conditionalElement.getAttribute('res-display');
-            try {
-                if (eval(condition)) {
-                    conditionalElement.style.display = '';
-                } else {
-                    conditionalElement.style.display = 'none';
-                }
-            } catch (e) {
-                console.error(`Error evaluating condition for ${variableName}: ${condition}`, e);
-            }
+            this._evaluateDisplayCondition(conditionalElement, this.data[variableName], condition);
         });
     }
 
     updateStylesFor(variableName) {
         const styleElements = document.querySelectorAll(`[res-style*="${variableName}"]`);
-
         styleElements.forEach(styleElement => {
             let styleCondition = styleElement.getAttribute('res-style');
             try {
@@ -355,23 +560,21 @@ class Resonant {
                     const item = this.data[variableName][index];
                     styleCondition = styleCondition.replace(new RegExp(`\\b${variableName}\\b`, 'g'), 'item');
                     const styleClass = new Function('item', `return ${styleCondition}`)(item);
-
                     if (styleClass) {
                         styleElement.classList.add(styleClass);
                     } else {
-                        var elementHasStyle = styleElement.classList.contains(styleClass);
+                        const elementHasStyle = styleElement.classList.contains(styleClass);
                         if (elementHasStyle) {
                             styleElement.classList.remove(styleClass);
                         }
                     }
                 } else {
                     const styleClass = eval(styleCondition);
-
                     if (styleClass) {
                         styleElement.classList.add(styleClass);
                         styleElement.setAttribute('res-styles', styleClass);
                     } else {
-                        var elementHasStyle = styleElement.classList.contains(styleClass);
+                        const elementHasStyle = styleElement.classList.contains(styleClass);
                         if (elementHasStyle) {
                             styleElement.classList.remove(styleClass);
                         }
@@ -383,86 +586,6 @@ class Resonant {
         });
     }
 
-    _renderArray(variableName, el) {
-        let template = el.cloneNode(true);
-        el.innerHTML = '';
-
-        if (!window[variableName + "_template"]) {
-            window[variableName + "_template"] = template;
-        } else {
-            template = window[variableName + "_template"];
-        }
-
-        this.data[variableName].forEach((instance, index) => {
-            const clonedEl = template.cloneNode(true);
-            clonedEl.setAttribute("res-index", index);
-            for (let key in instance) {
-                let overrideInstanceValue = null;
-                let subEl = clonedEl.querySelector(`[res-prop="${key}"]`);
-                if(!subEl) {
-                    subEl = clonedEl.querySelector(`[res-prop=""]`);
-                    overrideInstanceValue = instance;
-                }
-                if (subEl) {
-                    if (!subEl.hasAttribute('data-resonant-bound')) {
-                        if (subEl.tagName === 'INPUT' || subEl.tagName === 'TEXTAREA') {
-                            if (subEl.type === 'checkbox') {
-                                subEl.checked = overrideInstanceValue ?? instance[key] ;
-                                subEl.onchange = () => {
-                                    instance[key] = subEl.checked;
-                                    this._queueUpdate(variableName, 'modified', instance, key, overrideInstanceValue ?? instance[key]);
-                                };
-                            } else {
-                                subEl.value = overrideInstanceValue ?? instance[key];
-                                subEl.oninput = () => {
-                                    instance[key] = subEl.value;
-                                    this._queueUpdate(variableName, 'modified', instance, key, overrideInstanceValue ?? instance[key]);
-                                };
-                            }
-                        } else {
-                            subEl.innerHTML = overrideInstanceValue ?? instance[key];
-                        }
-                        subEl.setAttribute('data-resonant-bound', 'true');
-                    } else {
-                        if (subEl.tagName === 'INPUT' || subEl.tagName === 'TEXTAREA') {
-                            if (subEl.type === 'checkbox') {
-                                subEl.checked = overrideInstanceValue ?? instance[key];
-                            } else {
-                                subEl.value = overrideInstanceValue ?? instance[key];
-                            }
-                        } else {
-                            subEl.innerHTML = overrideInstanceValue ?? instance[key];
-                        }
-                    }
-                }
-            }
-
-            const onclickElements = clonedEl.querySelectorAll('[res-onclick], [res-onclick-remove]');
-            onclickElements.forEach(onclickEl => {
-                const functionName = onclickEl.getAttribute('res-onclick');
-                const removeKey = onclickEl.getAttribute('res-onclick-remove');
-                if (functionName) {
-                    onclickEl.onclick = () => {
-                        const func = new Function('item', `return ${functionName}(item)`);
-                        func(instance);
-                    };
-                }
-
-                if (removeKey) {
-                    onclickEl.onclick = () => {
-                        const index = this.data[variableName].findIndex(t => t[removeKey] === instance[removeKey]);
-                        if (index !== -1) {
-                            this.data[variableName].splice(index, 1);
-                        }
-                    };
-                }
-            });
-
-            clonedEl.setAttribute("res-rendered", true);
-            el.appendChild(clonedEl);
-        });
-    }
-
     addCallback(variableName, method) {
         if (!this.callbacks[variableName]) {
             this.callbacks[variableName] = [];

package/resonant.min.js

@@ -1 +1 @@
-class ObservableArray extends Array{constructor(e,t,...a){if(void 0===t)return super(...a);super(...a);var s=void 0===t.data[e];this.variableName=e,this.resonantInstance=t,this.isDeleting=!1,this.forEach(((e,t)=>{"object"==typeof e&&(this[t]=this._createProxy(e,t))})),s||this.forceUpdate()}_createProxy(e,t){return new Proxy(e,{set:(e,a,s)=>{if(e[a]!==s){const i=e[a];e[a]=s,this.resonantInstance._queueUpdate(this.variableName,"modified",e,a,i,t)}return!0}})}forceUpdate(){this.resonantInstance.arrayDataChangeDetection[this.variableName]=this.slice(),this.resonantInstance._queueUpdate(this.variableName,"modified",this.slice())}update(e){window[this.variableName]=e,this.resonantInstance._queueUpdate(this.variableName,"updated",e)}push(...e){e=e.map(((e,t)=>"object"==typeof e?this._createProxy(e,this.length+t):e));const t=super.push(...e);return this.resonantInstance.arrayDataChangeDetection[this.variableName]=this.slice(),e.forEach(((e,t)=>{this.resonantInstance._queueUpdate(this.variableName,"added",e,this.length-1-t)})),t}splice(e,t,...a){a=a.map(((t,a)=>"object"==typeof t?this._createProxy(t,e+a):t));const s=super.splice(e,t,...a);return this.resonantInstance.arrayDataChangeDetection[this.variableName]=this.slice(),t>0&&s.forEach(((t,a)=>{this.resonantInstance._queueUpdate(this.variableName,"removed",t,e+a)})),a.length>0&&a.forEach(((t,a)=>{this.resonantInstance._queueUpdate(this.variableName,"added",t,e+a)})),s}set(e,t){if(this[e]!==t){if(this.isDeleting)return!0;const a=this.resonantInstance.arrayDataChangeDetection[this.variableName];let s="modified";(e>=a.length||void 0===a[e])&&(s="added"),this.resonantInstance.arrayDataChangeDetection[this.variableName]=this.slice();const i=this[e];this[e]=t,this.resonantInstance._queueUpdate(this.variableName,s,this[e],e,i)}return!0}delete(e){const t=this[e];return this.isDeleting=!0,this.splice(e,1),this.resonantInstance.arrayDataChangeDetection[this.variableName]=this.slice(),this.resonantInstance._queueUpdate(this.variableName,"removed",null,e,t),this.isDeleting=!1,!0}filter(e,t=!0){if(void 0===this.resonantInstance||!1===t)return super.filter(e);const a=super.filter(e);return this.resonantInstance.arrayDataChangeDetection[this.variableName]=this.slice(),this.resonantInstance._queueUpdate(this.variableName,"filtered"),a}}class Resonant{constructor(){this.data={},this.callbacks={},this.pendingUpdates=new Map,this.arrayDataChangeDetection={}}add(e,t,a){t=this.persist(e,t,a),Array.isArray(t)?(this.data[e]=new ObservableArray(e,this,...t),this.arrayDataChangeDetection[e]=this.data[e].slice()):this.data[e]="object"==typeof t?this._createObject(e,t):t,this._defineProperty(e),this.updateElement(e)}persist(e,t,a){if(void 0===a||!a)return t;var s=localStorage.getItem("res_"+e);return null!=s?JSON.parse(localStorage.getItem("res_"+e)):(localStorage.setItem("res_"+e,JSON.stringify(t)),t)}updatePersistantData(e){localStorage.getItem("res_"+e)&&localStorage.setItem("res_"+e,JSON.stringify(this.data[e]))}addAll(e){Object.entries(e).forEach((([e,t])=>{this.add(e,t)}))}_createObject(e,t){return t[Symbol("isProxy")]=!0,new Proxy(t,{set:(t,a,s)=>{if(t[a]!==s){const i=t[a];t[a]=s,this._queueUpdate(e,"modified",t,a,i)}return!0}})}_defineProperty(e){Object.defineProperty(window,e,{get:()=>this.data[e],set:t=>{Array.isArray(t)?(this.data[e]=new ObservableArray(e,this,...t),this.arrayDataChangeDetection[e]=this.data[e].slice()):this.data[e]="object"==typeof t?this._createObject(e,t):t,this.updateElement(e),this.updateDisplayConditionalsFor(e),this.updateStylesFor(e),Array.isArray(t)||"object"==typeof t||this._queueUpdate(e,"modified",this.data[e])}})}_queueUpdate(e,t,a,s,i){this.pendingUpdates.has(e)||this.pendingUpdates.set(e,[]),this.pendingUpdates.get(e).push({action:t,item:a,property:s,oldValue:i}),1===this.pendingUpdates.get(e).length&&setTimeout((()=>{let t=this.pendingUpdates.get(e);this.updatePersistantData(e),this.pendingUpdates.delete(e),t=t.filter(((e,t,a)=>a.findIndex((t=>t.property===e.property&&t.action===e.action))===t)),t.forEach((t=>{this._triggerCallbacks(e,t)})),this.updateElement(e),this.updateDisplayConditionalsFor(e),this.updateStylesFor(e)}),0)}_triggerCallbacks(e,t){this.callbacks[e]&&this.callbacks[e].forEach((a=>{const s=t.item||t.oldValue;a(this.data[e],s,t.action)}))}updateElement(e){const t=document.querySelectorAll(`[res="${e}"]`),a=this.data[e];t.forEach((t=>{if(t.value=a,"INPUT"===t.tagName||"TEXTAREA"===t.tagName)t.hasAttribute("data-resonant-bound")||(t.oninput=()=>{this.data[e]=t.value,this._queueUpdate(e,"modified",this.data[e])},t.setAttribute("data-resonant-bound","true"));else if(Array.isArray(a))t.querySelectorAll(`[res="${e}"][res-rendered=true]`).forEach((e=>e.remove())),this._renderArray(e,t);else if("object"==typeof a){t.querySelectorAll("[res-prop]").forEach((t=>{const s=t.getAttribute("res-prop");s&&s in a&&(t.hasAttribute("data-resonant-bound")?"INPUT"===t.tagName||"TEXTAREA"===t.tagName?"checkbox"===t.type?t.checked=a[s]:t.value=a[s]:t.innerHTML=a[s]:("INPUT"===t.tagName||"TEXTAREA"===t.tagName?"checkbox"===t.type?(t.checked=a[s],t.onchange=()=>{this.data[e][s]=t.checked}):(t.value=a[s],t.oninput=()=>{this.data[e][s]=t.value}):t.innerHTML=a[s],t.setAttribute("data-resonant-bound","true")))}))}else t.innerHTML=a})),this.updateDisplayConditionalsFor(e),this.updateStylesFor(e)}updateDisplayConditionalsFor(variableName){const conditionalElements=document.querySelectorAll(`[res-display*="${variableName}"]`);conditionalElements.forEach((conditionalElement=>{const condition=conditionalElement.getAttribute("res-display");try{eval(condition)?conditionalElement.style.display="":conditionalElement.style.display="none"}catch(e){console.error(`Error evaluating condition for ${variableName}: ${condition}`,e)}}))}updateStylesFor(variableName){const styleElements=document.querySelectorAll(`[res-style*="${variableName}"]`);styleElements.forEach((styleElement=>{let styleCondition=styleElement.getAttribute("res-style");try{let parent=styleElement,index=null;for(;parent&&!index;)index=parent.getAttribute("res-index"),parent=parent.parentElement;let resStyles=styleElement.getAttribute("res-styles");if(resStyles){let e=resStyles.split(" ");e.forEach((e=>{styleElement.classList.remove(e)}))}if(null!==index){const e=this.data[variableName][index];styleCondition=styleCondition.replace(new RegExp(`\\b${variableName}\\b`,"g"),"item");const t=new Function("item",`return ${styleCondition}`)(e);if(t)styleElement.classList.add(t);else{var elementHasStyle=styleElement.classList.contains(t);elementHasStyle&&styleElement.classList.remove(t)}}else{const styleClass=eval(styleCondition);if(styleClass)styleElement.classList.add(styleClass),styleElement.setAttribute("res-styles",styleClass);else{var elementHasStyle=styleElement.classList.contains(styleClass);elementHasStyle&&styleElement.classList.remove(styleClass)}}}catch(e){console.error(`Error evaluating style for ${variableName}: ${styleCondition}`,e)}}))}_renderArray(e,t){let a=t.cloneNode(!0);t.innerHTML="",window[e+"_template"]?a=window[e+"_template"]:window[e+"_template"]=a,this.data[e].forEach(((s,i)=>{const n=a.cloneNode(!0);n.setAttribute("res-index",i);for(let t in s){let a=null,i=n.querySelector(`[res-prop="${t}"]`);i||(i=n.querySelector('[res-prop=""]'),a=s),i&&(i.hasAttribute("data-resonant-bound")?"INPUT"===i.tagName||"TEXTAREA"===i.tagName?"checkbox"===i.type?i.checked=a??s[t]:i.value=a??s[t]:i.innerHTML=a??s[t]:("INPUT"===i.tagName||"TEXTAREA"===i.tagName?"checkbox"===i.type?(i.checked=a??s[t],i.onchange=()=>{s[t]=i.checked,this._queueUpdate(e,"modified",s,t,a??s[t])}):(i.value=a??s[t],i.oninput=()=>{s[t]=i.value,this._queueUpdate(e,"modified",s,t,a??s[t])}):i.innerHTML=a??s[t],i.setAttribute("data-resonant-bound","true")))}n.querySelectorAll("[res-onclick], [res-onclick-remove]").forEach((t=>{const a=t.getAttribute("res-onclick"),i=t.getAttribute("res-onclick-remove");a&&(t.onclick=()=>{new Function("item",`return ${a}(item)`)(s)}),i&&(t.onclick=()=>{const t=this.data[e].findIndex((e=>e[i]===s[i]));-1!==t&&this.data[e].splice(t,1)})})),n.setAttribute("res-rendered",!0),t.appendChild(n)}))}addCallback(e,t){this.callbacks[e]||(this.callbacks[e]=[]),this.callbacks[e].push(t)}}
+class ObservableArray extends Array{constructor(e,t,...r){if(void 0===t)return super(...r);super(...r);var s=void 0===t.data[e];this.variableName=e,this.resonantInstance=t,this.isDeleting=!1,this.forEach((e,t)=>{"object"==typeof e&&(this._setKeyForObjectAndChildObjects(e,t),this[t]=this._createProxy(e,t))}),s||this.forceUpdate()}_setKeyForObjectAndChildObjects(e,t){"object"==typeof e&&(e.key=t+"-"+this._generateKeyByContentCheckSum(e),Object.keys(e).forEach(r=>{this._setKeyForObjectAndChildObjects(e[r],t)}))}_generateKeyByContentCheckSum(e){let t=e=>{if(!e||"object"!=typeof e)return e;if(Array.isArray(e))return e.map(e=>t(e));let r={...e};return delete r.key,Object.keys(r).forEach(e=>{"object"==typeof r[e]&&null!==r[e]&&(r[e]=t(r[e]))}),r},r=t(e),s=JSON.stringify(r),a=0;for(let i=0;i<s.length;i++){let n=s.charCodeAt(i);a=(a<<5)-a+n,a&=a}return Math.abs(a).toString(36)}_createProxy(e,t){return new Proxy(e,{set:(r,s,a)=>{if(r[s]!==a){let i=r[s];r[s]=a,this._setKeyForObjectAndChildObjects(e,t),this.resonantInstance._queueUpdate(this.variableName,"modified",r,s,i,t)}return!0}})}forceUpdate(){this.forEach((e,t)=>{console.log("forceUpdate",e,t),this._setKeyForObjectAndChildObjects(e,t)}),this.resonantInstance.arrayDataChangeDetection[this.variableName]=this.slice(),this.resonantInstance._queueUpdate(this.variableName,"modified",this.slice())}update(e){window[this.variableName]=e,this.resonantInstance._queueUpdate(this.variableName,"updated",e)}push(...e){e=e.map((e,t)=>"object"==typeof e?(this._setKeyForObjectAndChildObjects(e,this.length+t),this._createProxy(e,this.length+t)):e);let t=super.push(...e);return this.resonantInstance.arrayDataChangeDetection[this.variableName]=this.slice(),e.forEach((e,t)=>{this.resonantInstance._queueUpdate(this.variableName,"added",e,this.length-1-t)}),t}splice(e,t,...r){r=r.map((t,r)=>"object"==typeof t?this._createProxy(t,e+r):t);let s=super.splice(e,t,...r);return this.resonantInstance.arrayDataChangeDetection[this.variableName]=this.slice(),t>0&&s.forEach((t,r)=>{this.resonantInstance._queueUpdate(this.variableName,"removed",t,e+r)}),r.length>0&&r.forEach((t,r)=>{this.resonantInstance._queueUpdate(this.variableName,"added",t,e+r)}),s}set(e,t){if(this[e]!==t){if(this.isDeleting)return!0;let r=this.resonantInstance.arrayDataChangeDetection[this.variableName],s="modified";e>=r.length?s="added":void 0===r[e]&&(s="added"),this.resonantInstance.arrayDataChangeDetection[this.variableName]=this.slice();let a=this[e];this[e]=t,this.resonantInstance._queueUpdate(this.variableName,s,this[e],e,a)}return!0}delete(e){let t=this[e];return this.isDeleting=!0,this.splice(e,1),this.resonantInstance.arrayDataChangeDetection[this.variableName]=this.slice(),this.resonantInstance._queueUpdate(this.variableName,"removed",null,e,t),this.isDeleting=!1,!0}filter(e,t=!0){if(void 0===this.resonantInstance||!1===t)return super.filter(e);let r=super.filter(e);return this.resonantInstance.arrayDataChangeDetection[this.variableName]=this.slice(),this.resonantInstance._queueUpdate(this.variableName,"filtered"),r}}class Resonant{constructor(){this.data={},this.callbacks={},this.pendingUpdates=new Map,this.arrayDataChangeDetection={}}_handleInputElement(e,t,r){"checkbox"===e.type?(e.checked=t,e.hasAttribute("data-resonant-bound")||(e.onchange=()=>r(e.checked),e.setAttribute("data-resonant-bound","true"))):(e.value=t,e.hasAttribute("data-resonant-bound")||(e.oninput=()=>r(e.value),e.setAttribute("data-resonant-bound","true")))}add(e,t,r){Array.isArray(t=this.persist(e,t,r))?(this.data[e]=new ObservableArray(e,this,...t),this.arrayDataChangeDetection[e]=this.data[e].slice()):"object"==typeof t&&null!==t?this.data[e]=this._createObject(e,t):this.data[e]=t,this._defineProperty(e),this.updateElement(e)}persist(e,t,r){if(void 0===r||!r)return t;var s=localStorage.getItem("res_"+e);return null!=s?JSON.parse(s):(localStorage.setItem("res_"+e,JSON.stringify(t)),t)}updatePersistantData(e){localStorage.getItem("res_"+e)&&localStorage.setItem("res_"+e,JSON.stringify(this.data[e]))}addAll(e){Object.entries(e).forEach(([e,t])=>{this.add(e,t)})}_resolveValue(e,t,r=null){return r??e[t]}_createObject(e,t){return t[Symbol("isProxy")]=!0,new Proxy(t,{set:(t,r,s)=>{if(t[r]!==s){let a=t[r];t[r]=s,this._queueUpdate(e,"modified",t,r,a)}return!0}})}_evaluateDisplayCondition(e,t,r){try{let s=Function("item",`return ${r}`)(t);e.style.display=s?"":"none"}catch(a){console.error(`Error evaluating display condition: ${r}`,a)}}_handleDisplayElements(e,t){let r=e.querySelectorAll("[res-display]");r.forEach(e=>{let r=e.getAttribute("res-display")||"";this._evaluateDisplayCondition(e,t,r)})}_bindClickEvents(e,t,r){let s=e.querySelectorAll("[res-onclick], [res-onclick-remove]");s.forEach(e=>{let s=e.getAttribute("res-onclick"),a=e.getAttribute("res-onclick-remove");s&&(e.onclick=()=>{let e=Function("item",`return ${s}(item)`);e(t)}),a&&(e.onclick=()=>{if(r){let e=r.findIndex(e=>e[a]===t[a]);-1!==e&&r.splice(e,1)}})})}_defineProperty(e){Object.defineProperty(window,e,{get:()=>this.data[e],set:t=>{Array.isArray(t)?(this.data[e]=new ObservableArray(e,this,...t),this.arrayDataChangeDetection[e]=this.data[e].slice()):"object"==typeof t&&null!==t?this.data[e]=this._createObject(e,t):this.data[e]=t,this.updateElement(e),this.updateDisplayConditionalsFor(e),this.updateStylesFor(e),Array.isArray(t)||"object"==typeof t&&null!==t||this._queueUpdate(e,"modified",this.data[e])}})}_queueUpdate(e,t,r,s,a){this.pendingUpdates.has(e)||this.pendingUpdates.set(e,[]),this.pendingUpdates.get(e).push({action:t,item:r,property:s,oldValue:a}),1===this.pendingUpdates.get(e).length&&setTimeout(()=>{let t=this.pendingUpdates.get(e);this.updatePersistantData(e),this.pendingUpdates.delete(e),(t=t.filter((e,t,r)=>r.findIndex(t=>t.property===e.property&&t.action===e.action)===t)).forEach(t=>{this._triggerCallbacks(e,t)}),this.updateElement(e),this.updateDisplayConditionalsFor(e),this.updateStylesFor(e)},0)}_triggerCallbacks(e,t){this.callbacks[e]&&this.callbacks[e].forEach(r=>{let s=t.item||t.oldValue;r(this.data[e],s,t.action)})}updateElement(e){let t=document.querySelectorAll(`[res="${e}"]`),r=this.data[e];t.forEach(t=>{if("INPUT"===t.tagName||"TEXTAREA"===t.tagName)this._handleInputElement(t,r,t=>{this.data[e]=t,this._queueUpdate(e,"modified",this.data[e])});else if(Array.isArray(r))t.querySelectorAll(`[res="${e}"][res-rendered="true"]`).forEach(e=>e.remove()),this._renderArray(e,t);else if("object"==typeof r&&null!==r){let s=t.querySelectorAll("[res-prop]");s.forEach(t=>{let s=t.getAttribute("res-prop");s&&s in r&&this._renderObjectProperty(t,r[s],e,s)})}else t.innerHTML=r??""}),this.updateDisplayConditionalsFor(e),this.updateStylesFor(e)}_renderObjectProperty(e,t,r,s){if("INPUT"!==e.tagName&&"TEXTAREA"!==e.tagName||Array.isArray(t)||"object"==typeof t){if(Array.isArray(t))this._renderNestedArray(e,t);else if("object"==typeof t&&null!==t){let a=e.querySelectorAll("[res-prop]");a.forEach(e=>{let s=e.getAttribute("res-prop");s&&s in t&&this._renderObjectProperty(e,t[s],r,s)})}else e.innerHTML=t??""}else this._handleInputElement(e,t,e=>{window[r][s]=e})}_renderArray(e,t){let r=t.hasAttribute("res")&&t.parentElement?t.parentElement:t,s;window[e+"_template"]?s=window[e+"_template"]:(s=t.cloneNode(!0),window[e+"_template"]=s,t.style.display="none",t.setAttribute("res-template","true"));let a=new Map;r.querySelectorAll(`[res="${e}"][res-rendered="true"]`).forEach(e=>{let t=e.getAttribute("res-key");t&&a.set(t,e)}),r.querySelectorAll(`[res="${e}"][res-rendered="true"]`).forEach(e=>e.remove()),this.data[e].forEach((t,i)=>{let n=t.key,l;if(a.has(n))l=a.get(n),a.delete(n),l.setAttribute("res-index",i);else for(let o in(l=s.cloneNode(!0)).removeAttribute("res-template"),l.style.display="",l.setAttribute("res-rendered","true"),l.setAttribute("res-key",n),l.setAttribute("res-index",i),t){let h=null,d=l.querySelector(`[res-prop="${o}"]`);if(d||(d=l.querySelector('[res-prop=""]'),h=t),d){let c=this._resolveValue(t,o,h);if("INPUT"!==d.tagName&&"TEXTAREA"!==d.tagName||Array.isArray(c)||"object"==typeof c){if(Array.isArray(c))this._renderNestedArray(d,c);else if("object"==typeof c&&null!==c){let u=d.querySelectorAll("[res-prop]");u.forEach(t=>{let r=t.getAttribute("res-prop");r&&r in c&&this._renderObjectProperty(t,c[r],e,r)})}else d.innerHTML=c??""}else this._handleInputElement(d,c,r=>{t[o]=r,this._queueUpdate(e,"modified",t,o,c)})}}this._handleDisplayElements(l,t),this._bindClickEvents(l,t,this.data[e]),r.appendChild(l)})}_renderNestedArray(e,t){let r=e.cloneNode(!0);e.innerHTML="",e.removeAttribute("res-prop"),t.forEach((s,a)=>{let i=r.cloneNode(!0);i.setAttribute("res-rendered","true");let n=i.querySelectorAll("[res-prop]");n.forEach(e=>{let t=e.getAttribute("res-prop");t&&t in s&&this._renderObjectProperty(e,s[t],null,t)}),this._handleDisplayElements(i,s),this._bindClickEvents(i,s,t),e.appendChild(i)})}updateDisplayConditionalsFor(e){let t=document.querySelectorAll(`[res-display*="${e}"]`);t.forEach(t=>{let r=t.getAttribute("res-display");this._evaluateDisplayCondition(t,this.data[e],r)})}updateStylesFor(variableName){let styleElements=document.querySelectorAll(`[res-style*="${variableName}"]`);styleElements.forEach(styleElement=>{let styleCondition=styleElement.getAttribute("res-style");try{let parent=styleElement,index=null;for(;parent&&!index;)index=parent.getAttribute("res-index"),parent=parent.parentElement;let resStyles=styleElement.getAttribute("res-styles");if(resStyles&&resStyles.split(" ").forEach(e=>{styleElement.classList.remove(e)}),null!==index){let item=this.data[variableName][index];styleCondition=styleCondition.replace(RegExp(`\\b${variableName}\\b`,"g"),"item");let styleClass=Function("item",`return ${styleCondition}`)(item);if(styleClass)styleElement.classList.add(styleClass);else{let elementHasStyle=styleElement.classList.contains(styleClass);elementHasStyle&&styleElement.classList.remove(styleClass)}}else{let styleClass=eval(styleCondition);if(styleClass)styleElement.classList.add(styleClass),styleElement.setAttribute("res-styles",styleClass);else{let elementHasStyle=styleElement.classList.contains(styleClass);elementHasStyle&&styleElement.classList.remove(styleClass)}}}catch(e){console.error(`Error evaluating style for ${variableName}: ${styleCondition}`,e)}})}addCallback(e,t){this.callbacks[e]||(this.callbacks[e]=[]),this.callbacks[e].push(t)}}