rasti 3.0.0-alpha.3 → 3.0.1

package/README.md

@@ -20,23 +20,23 @@
 ## Key Features  
 
 - **Declarative Components** 🌟  
-    Build dynamic UI components using intuitive template literals.  
+  Build dynamic UI components using intuitive template literals.  
 - **Event Delegation** 🎯  
-    Simplify event handling with built-in delegation.  
+  Simplify event handling with built-in delegation.  
 - **Model-View Binding** 🔗  
-    Keep your UI and data in sync with ease.  
+  Keep your UI and data in sync with ease.  
 - **Server-Side Rendering** 🌐  
-    Render as plain text for server-side use or static builds.  
+  Render as plain text for server-side use or static builds.  
 - **Lightweight and Fast** ⚡  
-    Minimal overhead with efficient rendering.  
+  Minimal overhead with efficient rendering.  
 - **Legacy Compatibility** 🕰️  
-    Seamlessly integrates into existing **Backbone.js** projects.  
+  Seamlessly integrates into existing **Backbone.js** projects.  
 - **Standards-Based** 📐  
-    Built on modern web standards, no tooling required.  
+  Built on modern web standards, no tooling required.  
 
 ## Getting Started
 
-### Using npm
+### Installing via npm
 
 ```bash
 $ npm install rasti
@@ -52,7 +52,7 @@ import { Model, Component } from 'rasti';
 import { Model, Component } from 'https://esm.run/rasti';
 ```
 
-### Using `<script>` tag
+### Using a `<script>` tag
 
 ```html
 <script src="https://cdn.jsdelivr.net/npm/rasti/dist/rasti.min.js"></script>
@@ -97,27 +97,27 @@ const routes = [
 // Create a Link component for navigation items.
 const Link = Component.create`
     <a href="${({ options }) => options.href}">
-        ${({ options }) => options.label}
+        ${({ options }) => options.renderChildren()}
     </a>
 `;
 
 // Create a Navigation component that renders Link components for each route.
 const Navigation = Component.create`
     <nav>
-        ${self => self.options.routes.map(
-            ({ label, href }) => self.partial`<${Link} ${{ label, href }} />`
+        ${({ options, partial }) => options.routes.map(
+            ({ label, href }) => partial`<${Link} href="${href}">${label}</${Link}>`
         )}
     </nav>
 `;
 
-// Create a Page component that includes the Navigation and displays the current route's label as the title.
-const Page = 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} />
         <section>
             <h1>
-                ${({ state, options }) => options.routes.find(
-                    ({ href }) => href === (state.location || '#')
+                ${({ model, options }) => options.routes.find(
+                    ({ href }) => href === (model.location || '#')
                 ).label}
             </h1>
         </section>
@@ -130,24 +130,26 @@ 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);
 
-// Mount the Page component to the body, passing the routes and model as options.
-Page.mount({ routes, model }, document.body);
+// Mount the Main component to the body, passing the routes and model as options.
+Main.mount({ routes, model }, document.body);
 ```
 
 [Try it on CodePen](https://codepen.io/8tentaculos/pen/dyBMNbq?editors=0010)
 
 ## Why Choose **Rasti**?  
 
-### Why Choose Rasti?  
-
-- **Lightweight Applications**: Designed for streamlined apps, free from unnecessary overhead or tooling.  
-- **High-Performance Rendering**: Optimized for scenarios where speed matters, delivering fast updates and efficient rendering—ideal for large dynamic tables or datasets without needing virtual scrolling.  
-- **Seamless Legacy Integration**: Modernize your **Backbone.js** views progressively, enabling incremental improvements without a full rewrite.  
+**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:  
 
+- **Skip the Setup**  
+  No installations, no build tools—just load it and start coding.  
+- **Lightweight and Efficient**  
+  Minimal footprint with optimized performance, ensuring smooth updates.  
+- **Just the Right Abstraction**  
+  Keeps you close to the DOM with no over-engineering. Fully hackable—if you're curious about how something works, just check the source code.  
 
 ## Example
 
-The rasti [GitHub repository](https://github.com/8tentaculos/rasti) includes, in the [example folder](https://github.com/8tentaculos/rasti/tree/master/example/todo), an example [TODO application](https://rasti.js.org/example/todo/index.html) that can be used as starter project.
+You can find a sample **TODO application** in the [example folder](https://github.com/8tentaculos/rasti/tree/master/example/todo) of the **Rasti** [GitHub repository](https://github.com/8tentaculos/rasti). This example serves as a great starting point for your own projects. Try it live [here](https://rasti.js.org/example/todo/index.html).
 
 ## API Documentation