rasti 2.1.0-alpha.1 → 3.0.0-alpha.1

package/README.md

@@ -1,18 +1,40 @@
-# <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)
-
-## Getting started
+[![jsDelivr hits (npm)](https://img.shields.io/jsdelivr/npm/hm/rasti?style=flat-square)](https://www.jsdelivr.com/package/npm/rasti)
+
+## 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,24 +62,23 @@ 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.
+// Define a Timer component that displays the number of seconds from the model.
 const Timer = Component.create`
     <div>
         Seconds: <span>${({ model }) => model.seconds}</span>
     </div>
 `;
-// Create model to store seconds.
+
+// Create a model to store the seconds.
 const model = new Model({ seconds: 0 });
-// Mount timer on body.
+
+// Mount the Timer component to the body and pass the model as an option.
 Timer.mount({ model }, document.body);
-// Increment `model.seconds` every second.
+
+// Increment the `seconds` property of the model every second.
 setInterval(() => model.seconds++, 1000);
 ```
 
@@ -66,49 +87,88 @@ setInterval(() => model.seconds++, 1000);
 ### Adding sub components
 
 ```javascript
-// Create Button component.
-const Button = Component.create`
-    <button
-        onClick="${{ '&' : function() { this.options.onClick() } }}"
-    >
+// Define the routes for the navigation menu.
+const routes = [
+    { 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.label}
-    </button>
+    </a>
 `;
-// Create Counter component.
-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>
+
+// Create a Navigation component that renders Link components for each route.
+const Navigation = Component.create`
+    <nav>
+        ${({ options }) => options.routes.map(
+            ({ label, href }) => Link.mount({ label, href })
+        )}
+    </nav>
+`;
+
+// Create a Page component that includes the Navigation and displays the current route's label as the 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>
 `;
-// Create model to store count.
-const model = new Model({ count: 0 });
-// Mount counter on body.
-Counter.mount({ model }, document.body);
+
+// Initialize a model to store the current location.
+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);
 ```
 
-[Try it on CodePen](https://codepen.io/8tentaculos/pen/ZEZarEQ?editors=0010)
+[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).
+