rasti 3.0.1 → 4.0.0-alpha.1

package/README.md

@@ -73,12 +73,13 @@ const Timer = Component.create`
 `;
 
 // Create a model to store the seconds.
-const model = new Model({ seconds: 0 });
+const model = new Model({ seconds : 0 });
 
 // Mount the Timer component to the body and pass the model as an option.
 Timer.mount({ model }, document.body);
 
 // Increment the `seconds` property of the model every second.
+// Only the text node inside the <span> gets updated on each render.
 setInterval(() => model.seconds++, 1000);
 ```
 
@@ -89,22 +90,22 @@ setInterval(() => model.seconds++, 1000);
 ```javascript
 // Define the routes for the navigation menu.
 const routes = [
-    { label: 'Home', href: '#' },
-    { label: 'Faq', href: '#faq' },
-    { label: 'Contact', href: '#contact' },
+    { label : 'Home', href : '#' },
+    { label : 'Faq', href : '#faq' },
+    { label : 'Contact', href : '#contact' },
 ];
 
 // Create a Link component for navigation items.
 const Link = Component.create`
-    <a href="${({ options }) => options.href}">
-        ${({ options }) => options.renderChildren()}
+    <a href="${({ props }) => props.href}">
+        ${({ props }) => props.renderChildren()}
     </a>
 `;
 
 // Create a Navigation component that renders Link components for each route.
 const Navigation = Component.create`
     <nav>
-        ${({ options, partial }) => options.routes.map(
+        ${({ props, partial }) => props.routes.map(
             ({ label, href }) => partial`<${Link} href="${href}">${label}</${Link}>`
         )}
     </nav>
@@ -113,10 +114,10 @@ const Navigation = Component.create`
 // Create a Main component that includes the Navigation and displays the current route's label as the title.
 const Main = Component.create`
     <main>
-        <${Navigation} routes=${({ options }) => options.routes} />
+        <${Navigation} routes=${({ props }) => props.routes} />
         <section>
             <h1>
-                ${({ model, options }) => options.routes.find(
+                ${({ model, props }) => props.routes.find(
                     ({ href }) => href === (model.location || '#')
                 ).label}
             </h1>
@@ -125,7 +126,7 @@ const Main = Component.create`
 `;
 
 // Initialize a model to store the current location.
-const model = new Model({ location: document.location.hash });
+const model = new Model({ location : document.location.hash });
 
 // Update the model's location state when the browser's history changes.
 window.addEventListener('popstate', () => model.location = document.location.hash);
@@ -136,6 +137,30 @@ Main.mount({ routes, model }, document.body);
 
 [Try it on CodePen](https://codepen.io/8tentaculos/pen/dyBMNbq?editors=0010)
 
+### Adding event listeners
+
+```javascript
+// Create a model to store the counter value.
+const model = new Model({ count : 0 });
+
+// Create a Counter component with increment and decrement buttons.
+const Counter = Component.create`
+    <div>
+        <div>Counter: ${({ model }) => model.count}</div>
+        <button onClick=${function() { this.model.count++; }}>Increment</button>
+        <button onClick=${function() { this.model.count--; }}>Decrement</button>
+    </div>
+`;
+
+// Mount the Counter component to the body and pass the model as an option.
+Counter.mount({ model }, document.body);
+
+// Event listeners are bound to 'this' and use delegation from the root element.
+// When buttons are clicked, only the text node gets updated, not the entire component.
+```
+
+[Try it on CodePen](https://https://codepen.io/8tentaculos/pen/XJXVQOR?editors=0010)
+
 ## Why Choose **Rasti**?  
 
 **Rasti** is built for developers who want a simple yet powerful way to create UI components without the complexity of heavy frameworks. Whether you're building a high-performance dashboard, or embedding a lightweight widget, **Rasti** lets you:  
@@ -155,16 +180,12 @@ You can find a sample **TODO application** in the [example folder](https://githu
 
 For detailed information on how to use **Rasti**, refer to the [API documentation](/docs/api.md).
 
+## Version History
 
-## Powered by **Rasti**
-
-### [Crypto Babylon](https://cryptobabylon.net)  
-
-A market analytics platform efficiently rendering over 300 dynamic rows, updated in real-time with thousands of messages per second via multiple WebSocket connections.  
-
-### [jsPacman](https://pacman.js.org)
-
-A DOM-based remake of the classic Ms. Pac-Man game. **Rasti** powers its custom game engine.  
+- **[v4.0.0](https://github.com/8tentaculos/rasti/releases/tag/v4.0.0)** - Current version with simpler event handling, smarter component reuse, and granular DOM updates
+- **[v3.0.0](https://github.com/8tentaculos/rasti/releases/tag/v3.0.0)** - Introduced **Containers**, dynamic element tags, **Component** tags, `partial` method, and dropped ES5 support
+- **[v2.0.0](https://github.com/8tentaculos/rasti/releases/tag/v2.0.0)** - Introduced **Components**
+- **[v1.0.0](https://github.com/8tentaculos/rasti/releases/tag/v1.0.0)** - Initial release
 
 ## License