Updating the "conditionals" naming to instead use res-display.

README.md

@@ -60,9 +60,10 @@ Include resonant.js in your HTML file, and use the following example to understa
 - **`res` and `res-prop` Attributes**: Bind HTML elements to your data model seamlessly.
     - `res` is used to identify an overarching data model.
     - `res-prop` links individual properties within that model to corresponding UI elements.
-- **`res-conditional` Attribute**: Conditionally display elements based on the data model's properties.
+- **`res-display` Attribute**: Conditionally display elements based on the data model's properties.
 - **`res-onclick` Attribute**: Triggers a function when an element is clicked, allowing for custom event handling.
 - **`res-onclick-remove` Attribute**: Removes an item from an array when the associated element is clicked.
+- **`res-style` Attribute**: Dynamically update CSS styles based on data model properties.
 - **Automatic UI Updates**: Changes to your JavaScript objects instantly reflect in the associated UI components, reducing manual DOM manipulation.
 
 ### Advanced Features

examples/example-basic.html

@@ -29,10 +29,10 @@ <h1>Resonant.js Basic Demo</h1>
     <section class="grid">
         <div>
             <h2>Counter: <span res="counter"></span></h2>
-            <div res-conditional="counter < 10" class="conditional">
+            <div res-display="counter < 10" class="conditional">
                 Only shows when counter is less than 10
             </div>
-            <div res-conditional="counter >= 10" class="conditional">
+            <div res-display="counter >= 10" class="conditional">
                 Only shows when counter is greater than or equal to 10
             </div>
         </div>
@@ -44,7 +44,7 @@ <h2>Counter: <span res="counter"></span></h2>
     <section class="grid" res="user">
         <div>
             <h2>User Information</h2>
-            <div res-conditional="user.firstname == 'John' && user.lastname == 'Doe'" class="conditional">
+            <div res-display="user.firstname == 'John' && user.lastname == 'Doe'" class="conditional">
                 Only shows when firstname is John and lastname is Doe
             </div>
 

package.json

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

resonant.js

@@ -127,7 +127,7 @@ class Resonant {
                     this.data[variableName] = newValue;
                 }
                 this.updateElement(variableName);
-                this.updateConditionalsFor(variableName);
+                this.updateDisplayConditionalsFor(variableName);
                 this.updateStylesFor(variableName);
                 if (!Array.isArray(newValue) && typeof newValue !== 'object') {
                     this._queueUpdate(variableName, 'modified', this.data[variableName]);
@@ -151,7 +151,7 @@ class Resonant {
                     this._triggerCallbacks(variableName, update);
                 });
                 this.updateElement(variableName);
-                this.updateConditionalsFor(variableName);
+                this.updateDisplayConditionalsFor(variableName);
                 this.updateStylesFor(variableName);
             }, 0);
         }
@@ -223,14 +223,14 @@ class Resonant {
             }
         });
 
-        this.updateConditionalsFor(variableName);
+        this.updateDisplayConditionalsFor(variableName);
         this.updateStylesFor(variableName);
     }
 
-    updateConditionalsFor(variableName) {
-        const conditionalElements = document.querySelectorAll(`[res-conditional*="${variableName}"]`);
+    updateDisplayConditionalsFor(variableName) {
+        const conditionalElements = document.querySelectorAll(`[res-display*="${variableName}"]`);
         conditionalElements.forEach(conditionalElement => {
-            const condition = conditionalElement.getAttribute('res-conditional');
+            const condition = conditionalElement.getAttribute('res-display');
             try {
                 if (eval(condition)) {
                     conditionalElement.style.display = '';