resonantjs 1.0.7 → 1.0.9

package/README.md

@@ -47,7 +47,10 @@ Include resonant.js in your HTML file, and use the following example to understa
 
 <script>
   const resonantJs = new Resonant();
-  resonantJs.add("counter", 0);
+  resonantJs.add("counter", 0, true);
+  //counter will instantiate the variable with name "counter"
+  //0 is the initial value of the variable
+  //true is optional, if true the variable will be stored in local storage
 </script>
 </body>
 </html>

package/examples/example-taskmanager.html

@@ -45,15 +45,12 @@
 
     // Add a callback to log actions taken on tasks
     resonantJs.addCallback("tasks", (tasks, task, action) => {
-        console.log(`Action taken: ${action} for ${task.name}`);
+        console.log(`Action taken: ${action}`);
     });
 
     function remove(task) {
-        //get by name
-        const index = tasks.findIndex(t => t.name === task.name);
-        tasks.splice(index, 1);
-
-        //You could use  as well, still trying to figure out if I want to leave this or not
+        const index = tasks.indexOf(task);
+        tasks.delete(index);
     }
 
     // Add a function to add a new task

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "resonantjs",
-  "version": "1.0.7",
+  "version": "1.0.9",
   "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

@@ -7,9 +7,45 @@ class ObservableArray extends Array {
         this.variableName = variableName;
         this.resonantInstance = resonantInstance;
         this.isDeleting = false;
+
+        this.forEach((item, index) => {
+            if (typeof item === 'object') {
+                this[index] = this._createProxy(item, index);
+            }
+        });
+    }
+
+    _createProxy(item, index) {
+        return new Proxy(item, {
+            set: (target, property, value) => {
+                if (target[property] !== value) {
+                    const oldValue = target[property];
+                    target[property] = value;
+                    this.resonantInstance._queueUpdate(this.variableName, 'modified', target, property, oldValue, index);
+                }
+                return true;
+            }
+        });
+    }
+
+    //temp fix for issues
+    forceUpdate() {
+        this.resonantInstance.arrayDataChangeDetection[this.variableName] = this.slice();
+        this.resonantInstance._queueUpdate(this.variableName, 'modified', this.slice());
+    }
+
+    update(array) {
+        window[this.variableName] = array;
+        this.resonantInstance._queueUpdate(this.variableName, 'updated', array);
     }
 
     push(...args) {
+        args = args.map((item, index) => {
+            if (typeof item === 'object') {
+                return this._createProxy(item, this.length + index);
+            }
+            return item;
+        });
         const result = super.push(...args);
         this.resonantInstance.arrayDataChangeDetection[this.variableName] = this.slice();
         args.forEach((item, index) => {
@@ -19,6 +55,12 @@ class ObservableArray extends Array {
     }
 
     splice(start, deleteCount, ...items) {
+        items = items.map((item, index) => {
+            if (typeof item === 'object') {
+                return this._createProxy(item, start + index);
+            }
+            return item;
+        });
         const removedItems = super.splice(start, deleteCount, ...items);
         this.resonantInstance.arrayDataChangeDetection[this.variableName] = this.slice();
 
@@ -73,8 +115,8 @@ class ObservableArray extends Array {
         return true;
     }
 
-    filter(filter) {
-        if(this.resonantInstance === undefined) {
+    filter(filter, actuallyFilter = true) {
+        if(this.resonantInstance === undefined || actuallyFilter === false) {
             return super.filter(filter);
         }
 
@@ -121,7 +163,7 @@ class Resonant {
         }
     }
 
-    updatePersistentData(variableName) {
+    updatePersistantData(variableName) {
         if (localStorage.getItem('res_' + variableName)) {
             localStorage.setItem('res_' + variableName, JSON.stringify(this.data[variableName]));
         }
@@ -180,7 +222,7 @@ class Resonant {
         if (this.pendingUpdates.get(variableName).length === 1) {
             setTimeout(() => {
                 const updates = this.pendingUpdates.get(variableName);
-                this.updatePersistentData(variableName);
+                this.updatePersistantData(variableName);
                 this.pendingUpdates.delete(variableName);
                 updates.forEach(update => {
                     this._triggerCallbacks(variableName, update);
@@ -190,6 +232,7 @@ class Resonant {
                 this.updateStylesFor(variableName);
             }, 0);
         }
+
     }
 
     _triggerCallbacks(variableName, callbackData) {

package/resonant.min.js

@@ -1 +1 @@
-class ObservableArray extends Array{constructor(e,t,...a){if(void 0===t)return super(...a);super(...a),this.variableName=e,this.resonantInstance=t,this.isDeleting=!1}push(...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,...a){let 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;let a=this.resonantInstance.arrayDataChangeDetection[this.variableName],s="modified";e>=a.length?s="added":void 0===a[e]&&(s="added"),this.resonantInstance.arrayDataChangeDetection[this.variableName]=this.slice();let i=this[e];this[e]=t,this.resonantInstance._queueUpdate(this.variableName,s,this[e],e,i)}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){if(void 0===this.resonantInstance)return super.filter(e);let t=super.filter(e);return this.resonantInstance.arrayDataChangeDetection[this.variableName]=this.slice(),this.resonantInstance._queueUpdate(this.variableName,"filtered"),t}}class Resonant{constructor(){this.data={},this.callbacks={},this.pendingUpdates=new Map,this.arrayDataChangeDetection={}}add(e,t,a){Array.isArray(t=this.persist(e,t,a))?(this.data[e]=new ObservableArray(e,this,...t),this.arrayDataChangeDetection[e]=this.data[e].slice()):"object"==typeof t?this.data[e]=this._createObject(e,t):this.data[e]=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)}updatePersistentData(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){let 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()):"object"==typeof 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||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.updatePersistentData(e),this.pendingUpdates.delete(e),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=>{let s=t.item||t.oldValue;a(this.data[e],s,t.action)})}updateElement(e){let 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){let s=t.querySelectorAll("[res-prop]");s.forEach(t=>{let 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){let conditionalElements=document.querySelectorAll(`[res-display*="${variableName}"]`);conditionalElements.forEach(conditionalElement=>{let 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){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{var 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{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)=>{let r=a.cloneNode(!0);for(let n in r.setAttribute("res-index",i),s){let l=r.querySelector(`[res-prop="${n}"]`);l&&(l.hasAttribute("data-resonant-bound")?"INPUT"===l.tagName||"TEXTAREA"===l.tagName?"checkbox"===l.type?l.checked=s[n]:l.value=s[n]:l.innerHTML=s[n]:("INPUT"===l.tagName||"TEXTAREA"===l.tagName?"checkbox"===l.type?(l.checked=s[n],l.onchange=()=>{s[n]=l.checked,this._queueUpdate(e,"modified",s,n,s[n])}):(l.value=s[n],l.oninput=()=>{s[n]=l.value,this._queueUpdate(e,"modified",s,n,s[n])}):l.innerHTML=s[n],l.setAttribute("data-resonant-bound","true")))}let h=r.querySelectorAll("[res-onclick], [res-onclick-remove]");h.forEach(t=>{let a=t.getAttribute("res-onclick"),i=t.getAttribute("res-onclick-remove");a&&(t.onclick=()=>{let e=Function("item",`return ${a}(item)`);e(s)}),i&&(t.onclick=()=>{let t=this.data[e].findIndex(e=>e[i]===s[i]);-1!==t&&this.data[e].splice(t,1)})}),r.setAttribute("res-rendered",!0),t.appendChild(r)})}addCallback(e,t){this.callbacks[e]||(this.callbacks[e]=[]),this.callbacks[e].push(t)}}
+class ObservableArray extends Array{constructor(e,t,...a){if(void 0===t)return super(...a);super(...a),this.variableName=e,this.resonantInstance=t,this.isDeleting=!1,this.forEach(((e,t)=>{"object"==typeof e&&(this[t]=this._createProxy(e,t))}))}_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((()=>{const t=this.pendingUpdates.get(e);this.updatePersistantData(e),this.pendingUpdates.delete(e),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){const a=n.querySelector(`[res-prop="${t}"]`);a&&(a.hasAttribute("data-resonant-bound")?"INPUT"===a.tagName||"TEXTAREA"===a.tagName?"checkbox"===a.type?a.checked=s[t]:a.value=s[t]:a.innerHTML=s[t]:("INPUT"===a.tagName||"TEXTAREA"===a.tagName?"checkbox"===a.type?(a.checked=s[t],a.onchange=()=>{s[t]=a.checked,this._queueUpdate(e,"modified",s,t,s[t])}):(a.value=s[t],a.oninput=()=>{s[t]=a.value,this._queueUpdate(e,"modified",s,t,s[t])}):a.innerHTML=s[t],a.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)}}