rasti 2.1.0-alpha.0 → 3.0.0-alpha.0

package/README.md

@@ -1,18 +1,33 @@
-# <a href="http://rasti.js.org"><img src="docs/logo.svg" height="80" alt="Rasti.js - JavaScript library for building user interfaces" aria-label="rasti.js.org" /></a>
+<p align="center">
+    <picture>
+        <source media="(prefers-color-scheme: dark)" srcset="docs/logo-dark.svg">
+        <img alt="Rasti.js" src="docs/logo.svg" height="120">
+    </picture>
+</p>
 
-Rasti is a minimalistic JavaScript library for building user interfaces.  
-It is designed to simplify the creation of complex dynamic applications by providing a declarative API for building reusable and composable UI components.  
-Rasti is based on web standards, has a small footprint, and can be used directly in the browser without requiring any boilerplate or configuration.  
+<p align="center">
+    <b>Modern MVC for building user interfaces</b>
+</p>
 
-The project is [hosted on GitHub](https://github.com/8tentaculos/rasti), and it's available for use under the [MIT](LICENSE.md) software license.  
-You can report bugs and discuss features on the [GitHub issues page](https://github.com/8tentaculos/rasti/issues).
+**Rasti** is a lightweight MVC library for building fast, reactive user interfaces. Inspired by **Backbone.js**, it retains a familiar API while removing non-essential features and introducing modern, declarative, and composable components to simplify complex UI development.
 
 [![Travis (.com)](https://img.shields.io/travis/com/8tentaculos/rasti?style=flat-square)](https://app.travis-ci.com/8tentaculos/rasti)
 [![npm version](https://img.shields.io/npm/v/rasti.svg?style=flat-square)](https://www.npmjs.com/package/rasti)
+[![npm package minimized gzipped size](https://img.shields.io/bundlejs/size/rasti?style=flat-square)](https://unpkg.com/rasti/dist/rasti.min.js)
 [![npm downloads](https://img.shields.io/npm/dm/rasti.svg?style=flat-square)](https://www.npmjs.com/package/rasti)
-[![](https://data.jsdelivr.com/v1/package/npm/rasti/badge)](https://www.jsdelivr.com/package/npm/rasti)
+[![jsDelivr hits (npm)](https://img.shields.io/jsdelivr/npm/hm/rasti?style=flat-square)](https://www.jsdelivr.com/package/npm/rasti)
 
-## Getting started
+## Key Features  
+
+- 🌟 **Declarative Components**: Build dynamic UI components using intuitive template literals.  
+- 🎯 **Event Delegation**: Simplify event handling with built-in delegation.  
+- 🔗 **Model-View Binding**: Keep your UI and data in sync with ease.  
+- 🌐 **Server-Side Rendering**: Render as plain text for server-side use or static builds.  
+- ⚡ **Lightweight and Fast**: Minimal overhead with efficient rendering.  
+- 🕰️ **Legacy Compatibility**: Seamlessly integrates into existing **Backbone.js** projects.
+- 📐 **Standards-Based**: Built on modern web standards, no tooling required. 
+
+## Getting Started
 
 ### Using npm
 
@@ -40,14 +55,11 @@ import { Model, Component } from 'https://esm.run/rasti';
 const { Model, Component } = Rasti;
 ```
 
-  The [rasti npm package](https://www.npmjs.com/package/rasti) includes precompiled production and development UMD builds in the dist folder. They can be used directly without a bundler and are thus compatible with many popular JavaScript module loaders and environments.  
-  The UMD builds make Rasti available as a `window.Rasti` global variable.
-
-
-### A simple `Component`
+### Create a `Component`
 
 ```javascript
 // Create Timer component.
+// Renders seconds from model.
 const Timer = Component.create`
     <div>
         Seconds: <span>${({ model }) => model.seconds}</span>
@@ -56,6 +68,7 @@ const Timer = Component.create`
 // Create model to store seconds.
 const model = new Model({ seconds: 0 });
 // Mount timer on body.
+// Pass model as options.
 Timer.mount({ model }, document.body);
 // Increment `model.seconds` every second.
 setInterval(() => model.seconds++, 1000);
@@ -67,48 +80,120 @@ setInterval(() => model.seconds++, 1000);
 
 ```javascript
 // Create Button component.
+// Calls `options.handleClick` when clicked.
+// Renders children passed to it.
 const Button = Component.create`
     <button
-        onClick="${{ '&' : function() { this.options.onClick() } }}"
+        onClick=${{ '&' : function() { this.options.handleClick() } }}
     >
-        ${({ options }) => options.label}
+        ${({ options }) => options.renderChildren()}
     </button>
 `;
 // Create Counter component.
+// Adds two Buttons to increment and decrement count.
+// Displays current count.
 const Counter = Component.create`
     <div>
-        ${({ model }) => Button.mount({ label : '-', onClick : () => model.count-- })}
-        <span>${({ model }) => model.count}</span>
-        ${({ model }) => Button.mount({ label : '+', onClick : () => model.count++ })}
+        <div>Counter: ${() => model.count}</div>
+        <${Button} handleClick=${({ model }) => () => model.count++}>
+            Increment
+        </${Button}>
+        <${Button} handleClick=${({ model }) => () => model.count--}>
+            Decrement
+        </${Button}>
     </div>
 `;
 // Create model to store count.
 const model = new Model({ count: 0 });
 // Mount counter on body.
+// Pass model as options.
 Counter.mount({ model }, document.body);
 ```
 
 [Try it on CodePen](https://codepen.io/8tentaculos/pen/ZEZarEQ?editors=0010)
 
+### Rendering iterables
+
+```javascript
+// Routes data to be used in Navigation.
+const routes = [
+    { label : 'Home', href : '#' },
+    { label : 'Faq', href : '#faq' },
+    { label : 'Contact', href : '#contact' },
+];
+// Create Link component to be used in Navigation.
+const Link = Component.create`
+    <a href="${({ options }) => options.href}">
+        ${({ options }) => options.label}
+    </a>
+`;
+// Create Navigation component.
+// Iterates over routes and mounts Link components.
+const Navigation = Component.create`
+    <nav>
+        ${({ options }) => options.routes.map(
+            ({ label, href }) => Link.mount({ label, href })
+        )}
+    </nav>
+`;
+// Create Page component.
+// Adds Navigation and displays current route label as title.
+const Page = Component.create`
+    <main>
+        <${Navigation} routes=${({ options }) => options.routes} />
+        <section>
+            <h1>
+                ${({ state, options }) => options.routes.find(
+                    ({ href }) => href === (state.location || '#')
+                ).label}
+            </h1>
+        </section>
+    </main>
+`;
+// Local state to store location.
+const model = new Model({ location : document.location.hash });
+// Listen to location changes and update state.
+window.addEventListener('popstate', () => model.location = document.location.hash);
+// Mount counter on body.
+// Pass routes and model as options.
+Page.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.  
+
+
 ## 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](http://rasti.js.org/example/todo/index.html) that can be used as starter project.
+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.
+
+## API Documentation
 
-## API
+For detailed information on how to use **Rasti**, refer to the [API documentation](/docs/api.md).
 
-Complete [API documentation](docs/api.md).
 
-## Powered by Rasti
+## Powered by **Rasti**
 
-### Crypto Babylon
+### [Crypto Babylon](https://cryptobabylon.net)  
 
-[Crypto Babylon](https://cryptobabylon.net), a markets analytics platform, leverages the capabilities of Rasti.  
-The Rasti rendering system is responsible for efficiently rendering a table containing over 300 rows. Additionally, it seamlessly updates the DOM in real-time, handling thousands of messages per second from multiple WebSocket connections.
+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
+### [jsPacman](https://pacman.js.org)
 
-[jsPacman](https://pacman.js.org), a JavaScript DOM-based remake of the classic Ms. Pac-Man game, utilizes Rasti at a low level for its custom game engine.
+A DOM-based remake of the classic Ms. Pac-Man game. **Rasti** powers its custom game engine.  
 
 ## License
 
-[MIT](LICENSE.md)
+**Rasti** is open-source and available under the [MIT License](LICENSE).
+
+## Contributing
+
+Contributions are welcome! Share feature ideas or report bugs on our [GitHub Issues page](https://github.com/8tentaculos/rasti/issues).
+