Component (#24)

* Add Component. * Component. * Use extend instead of class, don't use preinitialize. * Keep id outside attributes, so attributes doesn't need to be copied. * Minor change. Use apply instead of call. * Update api docs. * Fix bug in component id. * Docs. * Example. * Docs. * Docs. * 2.0.0-alpha.0 * Fix example import url. * Remove evalExpression. * Component. * Make id template, and placeholders configurable. * Improve replaceExpressions. Remove false string result. * Support self enclosed tag for root element. * Add extensions to index imports. * Comments. * Comments. * Docs. * Component. * Add getExpressions. * Add test for attributes. * Docs. * 2.0.0-alpha.1 * Add extension to import. * 2.0.0-alpha.2 * Fix getAttributes regexp. * 2.0.0-alpha.3 * Fix bug parsing bool no-value attributes. * 2.0.0-alpha.4 * Use `replaceWith` to fix table rendering issue. * 2.0.0-alpha.5 * Add `recycle` method. Call `onRender` with `type`. * `destroy` doesn't expect `options.remove` anymore. Now it returns the view itself. So it can be chained with a `removeElement`call. * Remove outer template. Keep focus. * 2.0.0-alpha.6 * Minor fix in attributes. * 2.0.0-alpha.7 * Fix `extractAttributes` for data attributes. * 2.0.0-alpha.8 * Improve `set` method. * Atomic `change` events. * Support nested events. * Fix `previous` object. * Add tests. * Update modules. * 2.0.0-alpha.9 * Docs. * 2.0.0-alpha.10 * Check for emitter methods. * Add default properties. * Check for props instead of setting defaults. * Docs. * Update packages. * Add tests. * Minor. * Minor. * Minor. * Example imports version.
8tentaculos · Mar 30, 2024 · 8716c04 · 8716c04
1 parent eeb1998
commit 8716c04
Show file tree

Hide file tree

Showing 24 changed files with 2,309 additions and 1,712 deletions.
diff --git a/.travis.yml b/.travis.yml
@@ -1,7 +1,7 @@
 dist: focal
 language: node_js
 node_js:
-  - "19"
+  - "20"
 script:
   - npm run clean
   - npm run build

diff --git a/README.md b/README.md
@@ -1,10 +1,10 @@
 # <a href="http://rasti.js.org"><img src="docs/logo.svg" height="80" alt="Rasti" aria-label="rasti.js.org" /></a>
 
-Rasti is a minimalistic JavaScript MV library for building user interfaces.<br />
-It gives structure to applications by providing [models](docs/api.md#module_Model) that emit events on properties changes, and [views](docs/api.md#module_View) with declarative DOM events handling to define UI components.<br />
-Rasti is inspired by the Backbone.js architecture. It can be considered as an ES6 subset of Backbone.js for modern browsers.<br />
-It's ideal for building simple lightweight applications, without the need of configuration or boilerplate. Projects where a resulting small codebase is prioritized over using a complex rendering system.<br />
-The project is [hosted on GitHub](https://github.com/8tentaculos/rasti), and it's available for use under the [MIT](LICENSE.md) software license.<br />
+Rasti is a minimalistic and ultra-lightweight 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.  
+
+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).
 
 [![Travis (.com)](https://img.shields.io/travis/com/8tentaculos/rasti?style=flat-square)](https://app.travis-ci.com/8tentaculos/rasti)
@@ -17,17 +17,17 @@ You can report bugs and discuss features on the [GitHub issues page](https://git
 #### Using npm
 
 ```bash
-$ npm install --save rasti
+$ npm install rasti
 ```
 
 ```javascript
-import { Model, View } from 'rasti';
+import { Model, Component } from 'rasti';
 ```
 
 #### Using ES modules
 
 ```javascript
-import { Model, View } from 'https://esm.run/rasti';
+import { Model, Component } from 'https://esm.run/rasti';
 ```
 
 #### Using `<script>` tag
@@ -37,34 +37,29 @@ import { Model, View } from 'https://esm.run/rasti';
 ```
 
 ```javascript
-const { Model, View } = Rasti;
+const { Model, Component } = Rasti;
 ```
 
-#### A simple `View`
+#### A simple `Component`
 
 ```javascript
-class Timer extends View {
-    constructor(options) {
-        super(options);
-        // Create model to store internal state. Set `seconds` attribute into 0.
-        this.model = new Model({ seconds : 0 });
-        // Listen to changes in model `seconds` attribute and re render.
-        this.model.on('change:seconds', this.render.bind(this));
-        // Increment model `seconds` attribute every 1000 milliseconds.
-        this.interval = setInterval(() => this.model.seconds++, 1000);
-    }
-
-    template(model) {
-        return `Seconds: <span>${model.seconds}</span>`;
-    }
-}
-// Render view and append view's element into body.
-document.body.appendChild(new Timer().render().el);
+// Create Timer component.
+const Timer = Component.create`
+    <div>
+        Seconds: <span>${({ model }) => model.seconds}</span>
+    </div>
+`;
+// Create model to store seconds.
+const model = new Model({ seconds: 0 });
+// Mount timer on body.
+Timer.mount({ model }, document.body);
+// Increment `model.seconds` every second.
+setInterval(() => model.seconds++, 1000);
 ```
 
-[Try it on CodePen](https://codepen.io/8tentaculos/pen/dyXgGMp?editors=0010)
+[Try it on CodePen](https://codepen.io/8tentaculos/pen/gOQxaOE?editors=0010)
 
-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.<br />
+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.
 
 ## Example
@@ -75,6 +70,17 @@ The rasti [GitHub repository](https://github.com/8tentaculos/rasti) includes, in
 
 Complete [API documentation](docs/api.md).
 
+## Powered by Rasti
+
+### [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.
+
+### [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.
+
 ## License
 
 [MIT](LICENSE.md)
diff --git a/docker-development b/docker-development
@@ -1,2 +1,2 @@
 #! /bin/sh
-docker run --rm -it -e NODE_ENV=development -p 3000:3000 -v $PWD:/srv/rasti -w="/srv/rasti" node:19 bash
+docker run --rm -it -e NODE_ENV=development -p 3000:3000 -v $PWD:/srv/rasti -w="/srv/rasti" node:20 bash